/* =========================================================
   PÁGINA DOCENTES
========================================================= */

.docente-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


/* =========================================================
   CARD
========================================================= */

.executive-card {
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #D8E3EF;
    border-radius: 15px;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .07);
    overflow: hidden;
}


/* HEADER */

.executive-card-header {
    min-height: 66px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #D7E2EF;
    background: linear-gradient( 90deg, #F2F7FD 0%, #E8F1FB 100% );
}


/* ICONO */

.executive-card-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #D9E9FB;
    color: #1769C2;
    font-size: 17px;
}


/* TÍTULO */

.executive-card-title {
    min-width: 0;
    flex: 1;
}

    .executive-card-title h2 {
        margin: 0;
        color: var(--gsk-primary);
        font-size: 15px;
        font-weight: 700;
    }

    .executive-card-title span {
        display: block;
        margin-top: 2px;
        color: #64748B;
        font-size: 11px;
    }


/* CONTENIDO EXTRA DEL HEADER */

.executive-card-header-extra {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


/* BODY */

.executive-card-body {
    padding: 20px;
    background: #FFFFFF;
}


/* =========================================================
   FORMULARIO
========================================================= */

.form-field {
    margin-bottom: 17px;
}

    .form-field > label {
        display: block;
        margin-bottom: 6px;
        color: #475569;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
    }


/* =========================================================
   INPUTS
========================================================= */

.input-pro {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

    .input-pro > i {
        position: absolute;
        left: 14px;
        z-index: 2;
        color: #64748B;
        font-size: 15px;
        pointer-events: none;
    }

    .input-pro .form-control {
        width: 100%;
        height: 44px;
        padding: 8px 14px 8px 41px;
        border: 1px solid #D7E0EA;
        border-radius: 10px;
        background: #FBFDFF;
        color: var(--gsk-text);
        font-size: 13px;
        box-shadow: none;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

        .input-pro .form-control::placeholder {
            color: #94A3B8;
        }

        .input-pro .form-control:focus {
            background: #FFFFFF;
            border-color: #3979C5;
            box-shadow: 0 0 0 3px rgba(57,121,197,.10);
        }


/* =========================================================
   IDENTIFICACIÓN / ACCIONES
========================================================= */

.field-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .field-actions .input-pro {
        flex: 1;
    }

.btn-field-action {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D7E0EA;
    border-radius: 10px;
    background: #F8FBFF;
    font-size: 16px;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

    .btn-field-action:hover {
        transform: translateY(-1px);
    }


/* BUSCAR */

.btn-search {
    color: #1769C2;
}

    .btn-search:hover {
        background: #EAF3FF;
        border-color: #BFD5ED;
    }


/* NUEVO */

.btn-new {
    color: #198754;
}

    .btn-new:hover {
        background: #EDFFF5;
        border-color: #B7E2CB;
    }


/* =========================================================
   PASSWORD
========================================================= */

.input-password .form-control {
    padding-right: 43px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

    .password-toggle:hover {
        background: #EEF3F8;
        color: var(--gsk-primary);
    }

/* =========================================================
   SELECTED
========================================================= */

.select-pro {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

    .select-pro > i {
        position: absolute;
        left: 14px;
        z-index: 2;
        color: #64748B;
        font-size: 15px;
        pointer-events: none;
    }

    .select-pro .form-select {
        width: 100%;
        height: 44px;
        padding-left: 41px;
        border: 1px solid #D7E0EA;
        border-radius: 10px;
        background-color: #FBFDFF;
        color: var(--gsk-text);
        font-size: 13px;
        box-shadow: none;
    }

/* =========================================================
   CUENTA ACTIVA
========================================================= */

.account-status {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #C9DCF1;
    border-radius: 11px;
    background: linear-gradient( 90deg, #EFF6FD, #F7FAFE );
}

    .account-status .form-check-input {
        width: 18px;
        height: 18px;
        margin: 0;
        flex: 0 0 18px;
        cursor: pointer;
    }

    .account-status strong {
        display: block;
        color: var(--gsk-primary);
        font-size: 13px;
        font-weight: 600;
    }

    .account-status span {
        display: block;
        margin-top: 2px;
        color: var(--gsk-text-muted);
        font-size: 11px;
    }


/* =========================================================
   BOTÓN PRINCIPAL
========================================================= */

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.btn-docente-primary {
    min-height: 44px;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    background: linear-gradient( 135deg, #08172C, #214F88 );
    color: white;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 5px 14px rgba(11,31,58,.20);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .btn-docente-primary:hover {
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(11,31,58,.24);
    }

    .btn-docente-primary:active {
        transform: translateY(0);
    }


/* =========================================================
   LISTADO
========================================================= */

.docentes-list-card {
    margin-top: 28px;
    height: auto;
}


/* HEADER LISTADO */

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* CONTADOR */

.record-counter {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 20px;
    background: #E9F1FA;
    color: #476684;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}


/* BODY LISTADO */

.list-body {
    padding: 14px 16px 16px;
    background: #F9FBFD;
}


/* =========================================================
   TABLA
========================================================= */

.executive-table-container {
    border: 1px solid #D9E3EE;
    border-radius: 10px;
    overflow: hidden;
    background: white;
}

.docente-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

    .docente-table thead th {
        padding: 13px 16px;
        background: #E7F0FA;
        color: #35597D;
        border-bottom: 1px solid #C7D7E8;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .docente-table tbody td {
        padding: 14px 16px;
        border-bottom: 1px solid #E9EEF4;
        color: #172B4D;
        font-size: 13px;
        vertical-align: middle;
    }

    .docente-table tbody tr:nth-child(even) {
        background: #F7FAFD;
    }

    .docente-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .docente-table tbody tr {
        cursor: pointer;
        transition: background .15s ease;
    }

        .docente-table tbody tr:hover {
            background: #EAF4FF;
        }

.docente-selected {
    background: #DFEDFC !important;
    box-shadow: inset 3px 0 0 #2F74C8;
}


/* =========================================================
   DOCENTE EN TABLA
========================================================= */

.teacher-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.teacher-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #E3EEFB;
    color: #1769C2;
    font-size: 15px;
}

.teacher-cell strong {
    color: var(--gsk-primary);
    font-size: 13px;
    font-weight: 600;
}

.identification-value,
.username-value {
    color: #475569;
    font-size: 13px;
}


/* =========================================================
   ESTADOS
========================================================= */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-active {
    background: #E9F9F0;
    border: 1px solid #BDE8CE;
    color: #168149;
}

.status-inactive {
    background: #FFF0F1;
    border: 1px solid #F7C9CF;
    color: #C73642;
}


/* =========================================================
   MÓVIL - LISTADO
========================================================= */

.docentes-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-teacher-card {
    padding: 14px;
    border: 1px solid #D7E2ED;
    border-radius: 12px;
    background: linear-gradient( 180deg, #FFFFFF, #F8FBFE );
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .mobile-teacher-card:hover {
        border-color: #A9C8E8;
        background: #F4F9FF;
    }

    .mobile-teacher-card.selected {
        border-color: #7EB1E8;
        background: #EEF6FF;
    }


/* CABECERA MÓVIL */

.mobile-teacher-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-teacher-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #E1EDFB;
    color: #1769C2;
}

.mobile-teacher-name {
    min-width: 0;
    flex: 1;
}

    .mobile-teacher-name strong {
        display: block;
        color: var(--gsk-primary);
        font-size: 13px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-teacher-name span {
        display: block;
        margin-top: 2px;
        color: var(--gsk-text-muted);
        font-size: 11px;
    }


/* INFORMACIÓN MÓVIL */

.mobile-teacher-info {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #DFE7EF;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .mobile-teacher-info span {
        color: var(--gsk-text-muted);
        font-size: 11px;
    }

    .mobile-teacher-info strong {
        color: #334155;
        font-size: 12px;
        font-weight: 600;
    }


/* =========================================================
   SIN REGISTROS
========================================================= */

.empty-state {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    text-align: left;
}

.empty-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #E8F1FB;
    color: #1769C2;
    font-size: 18px;
}

.empty-state strong {
    display: block;
    color: var(--gsk-primary);
    font-size: 13px;
}

.empty-state span {
    display: block;
    margin-top: 3px;
    color: var(--gsk-text-muted);
    font-size: 11px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .executive-card-header {
        min-height: 60px;
        padding: 12px 15px;
    }

    .executive-card-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 15px;
    }

    .executive-card-title h2 {
        font-size: 14px;
    }

    .executive-card-title span {
        font-size: 10px;
    }

    .executive-card-body {
        padding: 15px;
    }

    .field-actions {
        gap: 6px;
    }

    .btn-field-action {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .input-pro .form-control {
        height: 42px;
        font-size: 12px;
    }

    .account-status {
        padding: 11px 12px;
    }

    .form-actions {
        margin-top: 8px;
    }

    .btn-docente-primary {
        width: 100%;
    }

    .docentes-list-card {
        margin-top: 20px;
    }

    .list-body {
        padding: 12px;
    }

    .record-counter {
        padding: 4px 8px;
        font-size: 10px;
    }

    .mobile-teacher-header .status-pill {
        padding: 4px 7px;
        font-size: 10px;
    }
}