:root {
    --blue: #2563eb;
    --blue-hover: #1d4ed8;
    --blue-soft: #eff6ff;

    --ink: #0b1f44;
    --ink-strong: #071a3b;

    --muted: #6b7d9f;
    --muted-light: #94a3b8;

    --line: #dbe4f0;
    --line-soft: #edf2f7;

    --soft: #f8fafc;

    --green: #16a34a;
    --red: #ef4444;

    --shadow-card:
        0 18px 50px rgba(15, 23, 42, 0.08),
        0 4px 14px rgba(15, 23, 42, 0.03);

    --font-main:
        "Segoe UI Variable",
        "Inter",
        "Aptos",
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-family: var(--font-main);
    color: var(--ink);
}

/* =========================================================
   MI HORARIO · GRILLA SEMANAL POR SUBNIVEL
   ========================================================= */
.schedule-level-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.schedule-level-tabs::-webkit-scrollbar { display: none; }
.schedule-level-tabs a {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #dce5f1;
    border-radius: 999px;
    background: #fff;
    color: #62738e;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
}
.schedule-level-tabs a.is-active { border-color: #2563eb; background: #2563eb; color: #fff; }

.schedule-config-card {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #dfe7f3;
    border-radius: 16px;
    background: #fff;
}
.schedule-config-card > div { min-width: 0; }
.schedule-config-card span { color: #7b8ba3; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.schedule-config-card h2 { margin: 4px 0 0; color: #0b2a55; font-size: 16px; }
.schedule-config-card p { margin: 5px 0 0; color: #70819b; font-size: 10px; font-weight: 700; }
.schedule-config-status { display: inline-block; margin-top: 8px; color: #087a55; font-size: 9px; letter-spacing: .06em; }

.schedule-math {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #dfe7f3;
    border-radius: 13px;
    background: #dfe7f3;
}
.schedule-math span { min-width: 0; padding: 10px; background: #fff; color: #7b8ba3; font-size: 8px; font-weight: 850; text-align: center; }
.schedule-math strong { display: block; margin-top: 3px; color: #0b2a55; font-size: 11px; }

.schedule-load-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
}
.schedule-load-strip > div { flex: 0 0 auto; min-width: 170px; padding: 9px 11px; border: 1px solid #e0e7f1; border-radius: 11px; background: #fff; }
.schedule-load-strip strong,.schedule-load-strip span { display: block; white-space: nowrap; }
.schedule-load-strip strong { color: #0b2a55; font-size: 9px; }
.schedule-load-strip span { margin-top: 4px; color: #a46900; font-size: 8px; font-weight: 850; }
.schedule-load-strip .is-complete span { color: #087a55; }

.schedule-desktop-grid { max-width: 100%; overflow: auto; border: 1px solid #d9e2ee; border-radius: 14px; background: #fff; }
.schedule-desktop-grid table,.schedule-mobile-grid table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.schedule-desktop-grid th,.schedule-desktop-grid td { height: 58px; padding: 5px; border-right: 1px solid #e3e9f1; border-bottom: 1px solid #e3e9f1; }
.schedule-desktop-grid thead th { height: 39px; position: sticky; top: 0; z-index: 2; background: #f4f7fb; color: #536681; font-size: 9px; letter-spacing: .05em; }
.schedule-desktop-grid thead th:first-child { width: 116px; }
.schedule-desktop-grid tr:last-child th,.schedule-desktop-grid tr:last-child td { border-bottom: 0; }
.schedule-desktop-grid tr > *:last-child { border-right: 0; }
.schedule-desktop-grid tbody th { background: #fbfcfe; text-align: left; }
.schedule-desktop-grid tbody th strong,.schedule-desktop-grid tbody th span { display: block; }
.schedule-desktop-grid tbody th strong { color: #0b2a55; font-size: 9px; }
.schedule-desktop-grid tbody th span { margin-top: 3px; color: #70819b; font-size: 8px; }

.schedule-cell { width: 100%; height: 46px; padding: 5px 7px; overflow: hidden; border: 1px dashed #cbd7e7; border-radius: 7px; background: #fbfdff; color: #7a8ba3; font: inherit; font-size: 8px; font-weight: 800; line-height: 1.25; cursor: pointer; }
.schedule-cell:hover,.schedule-cell:focus-visible { border-color: #2563eb; outline: 2px solid rgba(37,99,235,.12); }
.schedule-cell.is-asignada { border-style: solid; border-color: #bdd0f5; background: #eef4ff; color: #164fae; }
.schedule-cell.is-libre { border-style: solid; border-color: #d9e0e9; background: #f5f7fa; color: #687990; }
.schedule-break-row th,.schedule-break-row td { height: 42px; background: #eef4ff !important; color: #2563eb !important; font-size: 9px !important; font-weight: 900; text-align: center !important; letter-spacing: .06em; }

.schedule-mobile-grid { display: none; }
.schedule-day-pills { display: flex; gap: 6px; margin-bottom: 8px; }
.schedule-day-pills button { flex: 1 1 0; min-width: 0; min-height: 38px; padding: 0 5px; border: 1px solid #dce5f1; border-radius: 999px; background: #fff; color: #667893; font-size: 9px; font-weight: 900; }
.schedule-day-pills button.is-active { border-color: #2563eb; background: #2563eb; color: #fff; }

.schedule-calculation { padding: 11px; display: grid; gap: 4px; border: 1px solid #dce5f1; border-radius: 11px; background: #f7f9fc; color: #667893; }
.schedule-calculation strong { color: #0b2a55; font-size: 10px; }
.schedule-calculation span { font-size: 9px; line-height: 1.45; }
.schedule-calculation.is-valid { border-color: #bde4d4; background: #effaf5; }
.schedule-calculation.is-valid strong { color: #087a55; }
.schedule-calculation.is-invalid { border-color: #f2c6c1; background: #fff5f3; }
.schedule-calculation.is-invalid strong { color: #b83227; }

@media (max-width: 900px) {
    .schedule-math { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
    .schedule-config-card { align-items: stretch; flex-direction: column; gap: 12px; }
    .schedule-config-card .button { width: 100%; }
    .schedule-math { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .schedule-desktop-grid { display: none; }
    .schedule-mobile-grid { min-width: 0; display: block; }
    .schedule-mobile-grid table { overflow: hidden; border: 1px solid #d9e2ee; border-radius: 12px; background: #fff; }
    .schedule-mobile-grid th,.schedule-mobile-grid td { height: 52px; padding: 5px; border-right: 1px solid #e3e9f1; border-bottom: 1px solid #e3e9f1; }
    .schedule-mobile-grid tr:last-child th,.schedule-mobile-grid tr:last-child td { border-bottom: 0; }
    .schedule-mobile-grid tr > *:last-child { border-right: 0; }
    .schedule-mobile-grid thead th { height: 36px; background: #f4f7fb; color: #536681; font-size: 9px; }
    .schedule-mobile-grid thead th:first-child,.schedule-mobile-grid tbody th { width: 105px; }
    .schedule-mobile-grid tbody th { background: #fbfcfe; color: #0b2a55; font-size: 9px; text-align: left; }
    .schedule-mobile-grid tbody th strong,.schedule-mobile-grid tbody th span { display: block; }
    .schedule-mobile-grid tbody th span { margin-top: 3px; color: #70819b; font-size: 8px; }
    .schedule-cell { min-height: 42px; height: auto; }
}


/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #ffffff;
}

body {
    margin: 0;
    min-height: 100%;
    background: #ffffff;
    font-family: var(--font-main);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[hidden] {
    display: none !important;
}

button,
input {
    font: inherit;
}

button,
a {
    touch-action: manipulation;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   LOGIN
   ========================================================= */

.login-body {
    min-height: 100svh;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 82% 23%,
            rgba(37, 99, 235, 0.045) 0,
            rgba(37, 99, 235, 0.018) 15rem,
            transparent 27rem
        ),
        #ffffff;
}


/* =========================================================
   ESTRUCTURA
   ========================================================= */

.login-shell {
    position: relative;

    width: min(100%, 1440px);
    min-height: 100svh;

    margin: 0 auto;

    padding:
        clamp(38px, 5vh, 68px)
        clamp(34px, 7vw, 110px)
        24px;

    display: grid;

    grid-template-columns:
        minmax(440px, 1.05fr)
        minmax(430px, 0.95fr);

    grid-template-rows:
        minmax(0, 1fr)
        auto;

    column-gap: clamp(70px, 9vw, 155px);

    align-items: center;

    overflow: hidden;
}


/* =========================================================
   DECORACIÓN
   ========================================================= */

.decor-circle {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    z-index: 0;
}

.decor-circle-top {
    width: 330px;
    height: 330px;

    left: -255px;
    top: -65px;

    border: 54px solid rgba(37, 99, 235, 0.055);
}

.decor-circle-bottom {
    width: 430px;
    height: 430px;

    left: -290px;
    bottom: -260px;

    border: 1.5px solid rgba(37, 99, 235, 0.52);

    box-shadow:
        24px -20px 0 22px rgba(37, 99, 235, 0.025),
        58px -50px 0 42px rgba(37, 99, 235, 0.018);
}


/* =========================================================
   MARCA SGAP
   ========================================================= */

.login-brand {
    position: relative;
    z-index: 1;

    min-width: 0;

    display: flex;
    align-items: center;
}

.login-brand-content {
    width: 100%;
    max-width: 610px;
}

.sgap-wordmark {
    display: flex;
    align-items: baseline;

    margin: 0;

    font-family: var(--font-main);

    font-size: clamp(76px, 7vw, 112px);

    line-height: 0.82;

    letter-spacing: -0.075em;

    font-weight: 900;

    color: var(--ink-strong);

    white-space: nowrap;
}

.sgap-wordmark span {
    display: inline-block;
}

.sgap-wordmark .sgap-blue {
    color: var(--blue);
}

.sgap-line {
    display: block;

    width: 72px;
    height: 4px;

    margin: 28px 0;

    border-radius: 999px;

    background: var(--blue);
}

.login-brand h1 {
    margin: 0;

    max-width: 580px;

    font-family: var(--font-main);

    font-size: clamp(32px, 3.25vw, 48px);

    line-height: 1.08;

    letter-spacing: -0.045em;

    font-weight: 850;

    color: var(--ink-strong);
}

.portal-copy {
    margin: 26px 0 0;

    color: var(--muted);

    font-size: clamp(14px, 1.35vw, 19px);

    font-weight: 570;

    letter-spacing: 0.13em;

    line-height: 1.4;
}


/* =========================================================
   TARJETA
   ========================================================= */

.card {
    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 20px;

    box-shadow: var(--shadow-card);
}

.login-card {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 500px;

    height: 545px;
    min-height: 545px;
    max-height: 545px;

    margin: 0;

    padding: 42px 36px 32px;

    display: flex;
    flex-direction: column;

    align-self: center;

    overflow: hidden;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.login-card-header {
    flex: 0 0 auto;
}

.login-card-header h1 {
    margin: 0 0 7px;

    color: var(--ink-strong);

    font-size: 31px;

    line-height: 1.08;

    letter-spacing: -0.045em;

    font-weight: 850;
}

.muted {
    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.45;

    font-weight: 500;
}


/* =========================================================
   SELECTOR
   ========================================================= */

.segmented {
    flex: 0 0 auto;

    display: flex;

    width: 100%;

    margin: 30px 0 23px;

    padding: 4px;

    gap: 4px;

    background: #f6f8fc;

    border-radius: 13px;
}

.segment {
    flex: 1;

    min-width: 0;
    min-height: 48px;

    padding: 0 12px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: #667795;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: -0.01em;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

.segment.is-active {
    background: #ffffff;

    color: var(--blue);

    box-shadow:
        0 3px 10px rgba(15, 23, 42, 0.075),
        0 1px 3px rgba(15, 23, 42, 0.05);
}


/* =========================================================
   MENSAJES
   ========================================================= */

.message-zone {
    min-height: 0;
}

.message {
    margin: 0 0 13px;

    padding: 10px 12px;

    border-radius: 10px;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 650;
}

.message.error {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.message.success {
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}


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

#login-form {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;
}

.login-form-stage {
    position: relative;

    flex: 0 0 235px;

    height: 235px;
    min-height: 235px;
    max-height: 235px;

    overflow: hidden;
}

.mode-fields {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.login-form-stage.is-consulta {
    flex-basis: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

.login-form-stage.is-consulta #consulta-fields {
    position: static;
    height: auto;
}

.login-form-stage.is-consulta + .submit-button {
    margin-top: 20px;
}


/* =========================================================
   LABELS
   ========================================================= */

label {
    display: block;

    margin: 0 0 9px;

    color: var(--ink);

    font-size: 12px;

    line-height: 1.25;

    font-weight: 750;

    letter-spacing: 0.015em;
}

.mode-fields label:not(:first-child) {
    margin-top: 20px;
}


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

.input-wrap {
    position: relative;

    width: 100%;
}

.input-wrap > svg {
    position: absolute;

    left: 17px;
    top: 50%;

    transform: translateY(-50%);

    width: 20px;
    height: 20px;

    color: #7687a3;

    pointer-events: none;
}

.input-wrap input {
    width: 100%;
    height: 58px;

    padding: 0 16px 0 50px;

    border: 1px solid #d4dfec;

    border-radius: 11px;

    outline: none;

    background: #ffffff;

    color: var(--ink);

    font-size: 14px;

    font-weight: 520;

    text-transform: uppercase;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.input-wrap input:focus {
    border-color: var(--blue);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.105);
}

.input-wrap:has(.visibility) input {
    padding-right: 94px;

    text-transform: none;
}

#usuario {
    text-transform: none;
}


/* =========================================================
   CONTRASEÑA
   ========================================================= */

.visibility {
    position: absolute;

    right: 11px;
    top: 50%;

    transform: translateY(-50%);

    height: 38px;

    padding: 0 8px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--blue);

    font-size: 11px;

    font-weight: 750;
}

.visibility:hover {
    background: var(--blue-soft);
}

.text-link {
    display: inline-block;

    margin-top: 16px;

    color: var(--blue);

    font-size: 12px;

    font-weight: 720;

    line-height: 1.4;
}


/* =========================================================
   BOTONES
   ========================================================= */

.button {
    min-height: 50px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 1px solid transparent;

    border-radius: 11px;

    font-size: 13px;

    font-weight: 750;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.button-primary {
    background: var(--blue);

    color: #ffffff;

    box-shadow:
        0 8px 18px rgba(37, 99, 235, 0.14);
}

.button-primary:hover {
    background: var(--blue-hover);

    transform: translateY(-1px);
}

.button-primary:disabled {
    cursor: wait;

    opacity: 0.62;

    transform: none;
}

.button-secondary {
    background: #ffffff;

    border-color: var(--line);

    color: var(--ink);
}

.button-danger {
    background: var(--red);

    color: #ffffff;
}

.submit-button {
    width: 100%;

    min-height: 56px;

    margin-top: auto;

    flex: 0 0 56px;

    border-radius: 11px;
}


/* =========================================================
   SPINNER
   ========================================================= */

.spinner {
    width: 17px;
    height: 17px;

    border: 2px solid rgba(255, 255, 255, 0.5);

    border-top-color: #ffffff;

    border-radius: 50%;

    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Informes · búsqueda y cambio rápido de estudiante */
.report-student-status-line{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:9px;color:#64748b;font-size:.58rem;font-weight:800}
.report-student-status-line [data-student-active-status]{color:#1d4ed8}
.report-student-empty{margin:8px 0 0;padding:9px 10px;border-radius:9px;background:#f8fafc;color:#64748b;text-align:center;font-size:.62rem;font-weight:800}
.report-student-row{grid-template-columns:32px minmax(0,1fr) auto}
.report-student-row-state{min-width:18px;display:flex;align-items:center;justify-content:flex-end}
.report-student-row-state>span{display:none;font-size:.54rem;font-weight:900;letter-spacing:.03em}
.report-student-row-state>svg{width:16px;height:16px;fill:none;stroke:#8ba0bc;stroke-width:1.8}
.report-student-row.is-active{background:#eef5ff;box-shadow:inset 3px 0 0 #2563eb}
.report-student-row.is-active .report-student-row-state>span{display:block;color:#1d4ed8}
.report-student-row.is-active .report-student-row-state>svg{display:none}
.report-student-row:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:-2px}
.report-actions button:focus-visible,.report-preview-toolbar-button:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:2px}
.student-sheet-body{max-height:calc(82vh - 238px)}

@media (max-width:640px){
  .report-student-status-line{align-items:flex-start;font-size:.56rem}
  .report-student-row{min-height:44px}
  .student-sheet-body{max-height:calc(90dvh - 230px)}
}


/* =========================================================
   FOOTER
   ========================================================= */

.login-footer {
    grid-column: 1 / -1;

    width: 100%;

    padding-top: 18px;

    text-align: center;

    color: #8493ac;

    font-size: 10.5px;

    line-height: 1.4;

    letter-spacing: 0.025em;
}

.login-footer strong {
    display: block;

    color: #60718f;

    font-size: 11px;

    font-weight: 680;
}

.login-footer span {
    display: block;

    margin-top: 5px;

    color: #94a3b8;

    font-size: 10px;

    font-weight: 500;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .login-shell {
        grid-template-columns:
            minmax(340px, 0.9fr)
            minmax(410px, 1.1fr);

        column-gap: 48px;

        padding-left: 42px;
        padding-right: 42px;
    }

    .sgap-wordmark {
        font-size: clamp(65px, 7vw, 84px);
    }

    .login-brand h1 {
        font-size: clamp(28px, 3.2vw, 36px);
    }

    .login-card {
        max-width: 470px;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 760px) {

    .login-body {
        background:
            radial-gradient(
                circle at 100% 0,
                rgba(37, 99, 235, 0.05),
                transparent 18rem
            ),
            #ffffff;
    }

    .login-shell {
        width: 100%;
        min-height: 100svh;

        padding:
            18px
            16px
            12px;

        display: flex;
        flex-direction: column;

        overflow-x: hidden;
    }


    .login-brand {
        width: 100%;

        display: block;

        padding: 0 0 15px;

        text-align: center;
    }

    .login-brand-content {
        width: 100%;
        max-width: 430px;

        margin: 0 auto;
    }

    .sgap-wordmark {
        justify-content: center;

        font-size: 43px;

        line-height: 0.92;
    }

    .sgap-line {
        width: 40px;
        height: 3px;

        margin: 10px auto;
    }

    .login-brand h1 {
        font-size: 18px;

        line-height: 1.1;

        letter-spacing: -0.025em;
    }

    .portal-copy {
        margin-top: 8px;

        font-size: 9px;

        letter-spacing: 0.13em;
    }


    .decor-circle-top {
        width: 190px;
        height: 190px;

        left: -155px;
        top: -65px;

        border-width: 32px;
    }

    .decor-circle-bottom {
        width: 230px;
        height: 230px;

        left: -185px;
        bottom: -155px;
    }


    .login-card {
        width: 100%;
        max-width: 470px;

        height: 485px;
        min-height: 485px;
        max-height: 485px;

        margin: 0 auto;

        padding:
            24px
            20px
            20px;

        border-radius: 18px;
    }

    .login-card-header h1 {
        font-size: 25px;
    }

    .muted {
        font-size: 12px;
    }


    .segmented {
        margin:
            19px
            0
            16px;
    }

    .segment {
        min-height: 44px;

        font-size: 10.5px;
    }


    .login-form-stage {
        flex: 0 0 208px;

        height: 208px;
        min-height: 208px;
        max-height: 208px;
    }

    .input-wrap input {
        height: 53px;

        font-size: 13px;
    }

    .mode-fields label:not(:first-child) {
        margin-top: 15px;
    }

    .text-link {
        margin-top: 12px;
    }

    .submit-button {
        min-height: 52px;

        flex-basis: 52px;
    }


    .login-footer {
        width: 100%;

        margin-top: auto;

        padding:
            13px
            4px
            0;
    }

    .login-footer strong {
        font-size: 9.5px;
    }

    .login-footer span {
        margin-top: 3px;

        font-size: 9px;
    }
}


/* =========================================================
   MÓVILES PEQUEÑOS
   ========================================================= */

@media (max-width: 430px) {

    .login-shell {
        padding-left: 12px;
        padding-right: 12px;
    }

    .sgap-wordmark {
        font-size: 39px;
    }

    .login-brand h1 {
        font-size: 16.5px;
    }

    .login-card {
        height: 475px;
        min-height: 475px;
        max-height: 475px;

        padding:
            22px
            17px
            18px;
    }

    .login-card-header h1 {
        font-size: 23px;
    }

    .segmented {
        margin-top: 17px;
        margin-bottom: 14px;
    }

    .segment {
        font-size: 10px;
    }

    .login-form-stage {
        flex-basis: 204px;

        height: 204px;
        min-height: 204px;
        max-height: 204px;
    }
}

/* Ajustes funcionales: acceso de cursos, filtros e insumos. */
.home-course-card { padding-right: 58px; }
.home-course-card-enter { width: 28px; height: 28px; border-radius: 0; background: transparent; }
.home-course-card:hover .home-course-card-enter, .home-course-card:focus-visible .home-course-card-enter, .home-course-card:active .home-course-card-enter { transform: translateY(-50%) translateX(2px); background: transparent; }
.attendance-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.attendance-summary-item { min-width: 0; }

.inputs-page { display: grid; gap: 14px; padding-bottom: 92px; }
.inputs-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.inputs-tabs a { min-width: 0; padding: 12px 4px; color: var(--muted); text-align: center; font-size: 11px; font-weight: 850; }
.inputs-tabs a.is-active { color: var(--blue); box-shadow: inset 0 -3px 0 var(--blue); background: var(--blue-soft); }
.inputs-subtabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
.inputs-controls { padding: 16px; display: grid; gap: 16px; }
.inputs-switcher { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.inputs-switcher label, .inputs-title-wrap label { margin: 0; font-size: 9px; }
.inputs-switcher select { min-width: 210px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; font-weight: 750; }
.inputs-new { min-height: 44px; }
.inputs-title-row { display: flex; align-items: end; gap: 10px; }
.inputs-title-wrap { min-width: 0; flex: 1; display: grid; gap: 7px; }
.inputs-title-wrap input { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-strong); font-weight: 800; text-transform: uppercase; }
.inputs-title-wrap input:focus { outline: 0; border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.inputs-date { color: var(--muted); font-size: 9px; font-weight: 750; }
.inputs-stage-field { display: grid; gap: 7px; margin: 0; font-size: 9px; }
.inputs-stage-field select { width: min(100%, 320px); min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-weight: 750; }
.inputs-stage-detected { margin: 0; color: #166534; font-size: 9px; font-weight: 800; }
.inputs-title-edit { flex: 0 0 46px; min-height: 46px; }
.inputs-roster { display: grid; gap: 8px; }
.input-student-card { min-width: 0; padding: 11px 14px; display: grid; grid-template-columns: 28px minmax(0,1fr) 150px 92px; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 5px 14px rgba(15,23,42,.035); }
.input-student-number { color: var(--muted-light); font-size: 9px; font-weight: 850; }.input-student-card > strong { min-width: 0; font-size: 11px; }
.grade-control { display: flex; min-width: 0; }.grade-control input { min-width: 0; width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-right: 0; border-radius: 9px 0 0 9px; color: var(--ink-strong); font-weight: 850; text-align: center; }.grade-control button { min-width: 42px; border: 1px solid var(--line); border-radius: 0 9px 9px 0; background: #f8fafc; color: var(--blue); font-size: 9px; font-weight: 900; }
.grade-control input.is-invalid { border-color: #f59e0b; background: #fffbeb; }.grade-control input.is-low { border-color: #fecaca; background: #fff7f7; color: #b91c1c; }.grade-hint { color: var(--muted); font-size: 8px; font-weight: 750; }.inputs-save-bar { position: fixed; z-index: 30; left: 264px; right: 0; bottom: 0; min-height: 74px; padding: 12px 18px; display: grid; place-items: center; border-top: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }.inputs-save-bar .button { width: min(100%,420px); }
.inputs-save-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.inputs-save-button:disabled { cursor: not-allowed; opacity: .58; box-shadow: none; }
.inputs-save-button[aria-busy="true"] { cursor: wait; opacity: .78; }
.inputs-save-spinner { width: 15px; height: 15px; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.48); border-top-color: #fff; border-radius: 50%; animation: inputs-save-spin .7s linear infinite; }
.inputs-save-spinner[hidden] { display: none; }
@keyframes inputs-save-spin { to { transform: rotate(360deg); } }

.inputs-page .inputs-save-toast {
    top: auto;
    bottom: 92px;
    width: max-content;
    max-width: min(420px, calc(100vw - 32px));
    min-height: 0;
    padding: 12px 16px;
    border-radius: 999px;
    border-color: #bbf7d0;
    color: #166534;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 8px);
}
.inputs-page .inputs-save-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.inputs-page .inputs-save-toast.is-hiding { opacity: 0; transform: translate(-50%, -8px); }

@media (max-width: 699px) { .attendance-summary { display: grid; overflow: hidden; } .attendance-summary-item { min-width: 0; padding: 10px 3px; } .attendance-summary-item span { font-size: 7px; } .inputs-page { padding-bottom: 88px; } .inputs-save-bar { left: 0; min-height: 70px; padding: 10px 14px; } .inputs-page .inputs-save-toast { bottom: 84px; max-width: calc(100vw - 24px); padding: 10px 14px; } .input-student-card { grid-template-columns: 24px minmax(0,1fr); } .grade-control { grid-column: 2; width: min(100%,180px); } .grade-hint { grid-column: 2; } }

/* En móvil, las acciones fijas permanecen en su sitio.
   El drawer y su overlay se apilan por encima de ellas, evitando el efecto de
   desaparición/reaparición y cualquier pulsación accidental. */
@media (max-width: 699px) {
    .app-shell.menu-open .inputs-save-bar,
    .app-shell.menu-open .attendance-save-bar {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}


@media (max-width: 359px) {

    .login-shell {
        padding-left: 9px;
        padding-right: 9px;
    }

    .sgap-wordmark {
        font-size: 36px;
    }

    .login-brand h1 {
        font-size: 15px;
    }

    .portal-copy {
        font-size: 8px;
    }

    .login-card {
        height: 465px;
        min-height: 465px;
        max-height: 465px;

        padding:
            20px
            14px
            17px;
    }

    .segment {
        padding: 0 4px;

        font-size: 9.2px;
    }

    .login-form-stage {
        height: 198px;
        min-height: 198px;
        max-height: 198px;

        flex-basis: 198px;
    }
}


/* =========================================================
   DASHBOARD EXISTENTE
   ========================================================= */

.brand-mark {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    margin: 0 auto 16px;

    border-radius: 16px;

    background: #eff6ff;

    color: var(--blue);
}

.brand-mark svg {
    width: 29px;
    height: 29px;
}

.brand-mark.small {
    width: 36px;
    height: 36px;

    margin: 0;

    border-radius: 11px;
}

.brand-mark.small svg {
    width: 20px;
}

.eyebrow {
    margin: 0 0 7px;

    color: var(--blue);

    font-size: 12px;

    font-weight: 750;

    letter-spacing: 0.08em;
}

.app-body {
    min-height: 100svh;

    background: var(--soft);
}

.app-shell {
    min-height: 100svh;
}

.sidebar {
    position: fixed;
    z-index: 20;

    inset: 0 auto 0 0;

    width: 264px;

    padding: 20px 14px;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border-right: 1px solid var(--line);
}

.sidebar-top {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 6px 22px;

    font-size: 13px;

    font-weight: 800;
}

.close-menu {
    display: none;

    margin-left: auto;
}

.icon-button {
    min-width: 42px;
    min-height: 42px;

    display: inline-grid;
    place-items: center;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color: var(--muted);

    font-size: 27px;
}

.admin-profile {
    margin: 4px 6px 22px;

    padding: 14px 0;

    display: flex;
    align-items: center;

    gap: 10px;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.avatar {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #eff6ff;

    color: var(--blue);

    font-size: 14px;

    font-weight: 800;
}

.admin-profile strong,
.admin-profile span {
    display: block;

    font-size: 12px;
}

.admin-profile span {
    margin-top: 3px;

    color: var(--muted);

    font-size: 10px;
}

.nav-link {
    width: 100%;
    min-height: 44px;

    margin: 3px 0;

    padding: 0 11px;

    display: flex;
    align-items: center;

    gap: 12px;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color: #475569;

    font-size: 12px;

    font-weight: 700;

    text-align: left;
}

.nav-link i {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    color: var(--muted);
}

.nav-link i svg {
    width: 19px;
    height: 19px;
}

.nav-link:hover {
    background: var(--soft);

    color: var(--ink);
}

.nav-link.is-active {
    background: #eff6ff;

    color: var(--blue);
}

.logout-form {
    margin-top: auto;
}

.nav-link.danger {
    color: #dc2626;
}

.app-main {
    min-width: 0;

    padding-left: 264px;
}

.header {
    min-height: 78px;

    padding: 13px 32px;

    display: flex;
    align-items: center;

    gap: 18px;

    background: #ffffff;

    border-bottom: 1px solid var(--line);
}

.environment {
    min-width: 0;
}

.environment span {
    display: block;

    margin-bottom: 3px;

    color: var(--muted);

    font-size: 10px;

    font-weight: 750;
}

.environment strong {
    display: block;

    overflow: hidden;

    font-size: 13px;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.environment-button {
    margin-left: auto;
}

.environment-button svg {
    width: 18px;
}

.menu-button {
    display: none;
}

.content {
    max-width: 1100px;

    margin: 0 auto;

    padding: 42px 32px;
}

.content-heading {
    margin-bottom: 20px;
}

.content h1 {
    margin: 0 0 7px;

    font-size: 24px;
}

.empty-state {
    padding: 46px 22px;

    text-align: center;
}

.empty-icon,
.modal-icon {
    width: 52px;
    height: 52px;

    margin: 0 auto 18px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: #eff6ff;

    color: var(--blue);
}

.empty-icon svg,
.modal-icon svg {
    width: 27px;
    height: 27px;
}

.empty-state h2,
.modal h2 {
    margin: 0 0 8px;

    font-size: 16px;
}

.empty-state p,
.modal p {
    max-width: 460px;

    margin: 0 auto 22px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.55;
}

.sidebar-overlay {
    display: none;
}

.modal-backdrop {
    position: fixed;
    z-index: 40;

    inset: 0;

    padding: 20px;

    display: grid;
    place-items: center;

    background: rgba(15, 23, 42, 0.22);
}

.modal {
    position: relative;

    width: min(100%, 420px);

    padding: 38px 24px 24px;

    border-radius: 18px;

    background: #ffffff;

    box-shadow: var(--shadow-card);

    text-align: center;
}

.modal-close {
    position: absolute;

    right: 8px;
    top: 8px;
}

.modal .button {
    width: 100%;
}

.modal-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.modal-actions .button {
    min-width: 128px;
}

@media (max-width: 420px) {
    .modal-actions { gap: 8px; }
    .modal-actions .button { min-width: 0; flex: 1; padding-inline: 10px; }
}


/* =========================================================
   DASHBOARD MÓVIL
   ========================================================= */

@media (max-width: 699px) {

    .sidebar {
        z-index: 120;
        transform: translateX(-100%);

        transition: transform 0.22s ease;

        box-shadow: var(--shadow-card);
    }

    .app-shell.menu-open .sidebar {
        transform: translateX(0);
    }

    .app-shell.menu-open .sidebar-overlay {
        position: fixed;
        z-index: 110;

        inset: 0;

        display: block;

        background: rgba(15, 23, 42, 0.22);
    }

    .close-menu,
    .menu-button {
        display: grid;
    }

    .header {
        padding: 12px 16px;

        gap: 6px;
    }

    .environment {
        flex: 1;
    }

    .environment-button {
        min-width: 44px;

        padding: 0 12px;
    }

    .environment-button span {
        display: none;
    }

    .app-main {
        padding-left: 0;
    }

    .content {
        padding: 28px 16px;
    }

    .empty-state {
        padding: 38px 18px;
    }
}


/* =========================================================
   IDENTIDAD Y ACABADOS DEL DASHBOARD SGAP
   ========================================================= */

.sidebar-brand {
    min-width: 0;

    display: grid;

    gap: 3px;
}

.sidebar-brand strong {
    color: var(--ink-strong);

    font-size: 20px;

    line-height: 1;

    letter-spacing: -0.075em;
}

.sidebar-brand strong span {
    color: var(--blue);
}

.sidebar-brand small {
    color: var(--muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.025em;

    line-height: 1.35;

    max-width: 190px;
}

.sidebar-top {
    min-height: 57px;
}

.nav-link.is-active i {
    color: var(--blue);
}

.menu-button svg { width: 21px; height: 21px; stroke-width: 1.75; }

.header,
.sidebar,
.empty-state,
.modal {
    box-shadow: none;
}

.empty-state {
    min-height: 255px;

    display: grid;
    place-content: center;
}

.modal {
    box-shadow: 0 18px 48px rgba(11, 31, 68, 0.12);
}

@media (min-width: 700px) {

    .empty-state {
        min-height: 275px;
    }
}


/* =========================================================
   MÓDULOS DE CONFIGURACIÓN
   ========================================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.dialog-open {
    overflow: hidden;
}

.module-page {
    display: grid;
    gap: 20px;
}

.module-heading,
.section-heading,
.management-item,
.item-actions,
.dialog-actions,
.course-card-topline,
.student-roster-header,
.student-step-heading {
    display: flex;
    align-items: center;
}

.module-heading,
.section-heading,
.management-item,
.course-card-topline,
.student-roster-header {
    justify-content: space-between;
    gap: 16px;
}

.module-heading h1,
.section-heading h2 {
    margin: 0;
    color: var(--ink-strong);
}

.module-heading > div > p:last-child,
.section-heading p,
.management-item span {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.management-card {
    overflow: hidden;
}

.section-heading {
    padding: 20px;
    border-bottom: 1px solid var(--line);
}

.section-heading h2 {
    font-size: 14px;
}

.item-list {
    display: grid;
}

.management-item {
    min-height: 74px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}

.management-item:last-child {
    border-bottom: 0;
}

.management-item strong,
.management-item span {
    display: block;
}

.management-item strong {
    font-size: 13px;
}

.management-item span {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .035em;
}

.item-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
    flex: 0 0 auto;
}

.item-actions form {
    margin: 0;
    display: inline-flex;
}

.action-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.action-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.action-button:hover {
    background: var(--soft);
    border-color: currentColor;
    transform: translateY(-1px);
}

.action-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .18);
    outline-offset: 2px;
}

.action-button.edit { color: var(--blue); }
.action-button.calendar { color: var(--green); }
.action-button.delete { color: var(--red); }

.compact-empty {
    padding: 32px 20px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

/* =========================================================
   MODALES SGAP
   ========================================================= */

.dialog-backdrop {
    position: fixed;
    z-index: 200;
    inset: 0;
    overflow-y: auto;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(11, 31, 68, .22);
    backdrop-filter: blur(2px);
}

.dialog-panel {
    width: min(100%, 480px);
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    margin: auto;
    padding: 30px 24px 24px;
    position: relative;
    border: 1px solid rgba(219, 228, 240, .9);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 58px rgba(11, 31, 68, .16);
}

.dialog-panel h2 {
    margin: 0 44px 22px 0;
    color: var(--ink-strong);
    font-size: 16px;
    line-height: 1.25;
}

.dialog-copy {
    margin: -6px 0 20px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.dialog-form,
.dialog-panel form {
    display: grid;
    gap: 16px;
}

.dialog-panel label {
    margin: 0;
}

.dialog-panel input,
.dialog-panel select,
.dialog-panel textarea {
    width: 100%;
    margin-top: 8px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    outline: 0;
    text-transform: uppercase;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.dialog-panel input,
.dialog-panel select {
    height: 46px;
}

.dialog-panel textarea {
    min-height: 180px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
    line-height: 1.5;
}

.dialog-panel input:focus,
.dialog-panel select:focus,
.dialog-panel textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .11);
}

.dialog-close {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.dialog-close:hover {
    background: var(--soft);
    color: var(--ink);
}

.dialog-close svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.dialog-actions,
.modal-actions {
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
}

.dialog-actions .button,
.modal-actions .button {
    min-width: 118px;
}

.confirmation-dialog {
    width: min(100%, 480px);
}

.calendar-dialog {
    width: min(100%, 720px);
}

.import-dialog {
    width: min(100%, 760px);
}

.date-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.date-grid fieldset {
    min-width: 0;
    margin: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.date-grid legend {
    padding: 0 4px;
    color: var(--blue);
    font-size: 10px;
    font-weight: 800;
}

.date-grid label {
    font-size: 10px;
}

.exceptions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.exceptions h3 {
    margin: 0 0 14px;
    color: var(--ink-strong);
    font-size: 12px;
}

.exception-form {
    grid-template-columns: 1fr 1fr;
    align-items: end;
}

.exception-form label:last-of-type,
.exception-form .button {
    grid-column: 1 / -1;
}

.exception-item {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--soft);
    font-size: 10px;
}

.exception-item strong,
.exception-item span {
    display: block;
}

.exception-item span {
    margin-top: 3px;
    color: var(--muted);
}

/* =========================================================
   SELECTOR DE ENTORNO
   ========================================================= */

.environment-options {
    display: grid;
    gap: 8px;
    margin: 0 0 4px;
    text-align: left;
}

.environment-options form {
    margin: 0;
}

.environment-option {
    width: 100%;
    min-height: 58px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.environment-option:hover,
.environment-option.is-active {
    border-color: rgba(37, 99, 235, .42);
    background: #f8fbff;
}

.environment-option.is-active {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
}

.environment-option span,
.environment-option strong,
.environment-option small {
    display: block;
}

.environment-option strong {
    font-size: 11px;
}

.environment-option small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

.environment-option svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: var(--blue);
}

/* =========================================================
   DISTRIBUTIVO / DASHBOARD
   ========================================================= */

 .course-groups {
    display: grid;
    gap: 24px;
}

.course-group {
    display: grid;
    gap: 10px;
}

.course-group-heading {
    display: flex;
    align-items: center;
}

.course-group-heading::after {
    display: none;
}

.course-group-heading span {
    color: #8996ab;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.course-card {
    --course-accent: var(--blue);
    min-height: 118px;
    padding: 14px 72px 14px 16px;
    position: relative;
    overflow: hidden;
    border: 1px solid #dfe6f1;
    border-left: 4px solid var(--course-accent);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(11, 31, 68, .035);
}

.course-card::before {
    display: none;
}

.course-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.course-card span,
.course-card small,
.course-card p {
    display: block;
    color: #7f8da4;
    font-size: 10px;
    font-weight: 750;
}

.course-card small {
    position: absolute;
    top: 14px;
    right: 72px;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--course-accent) 10%, white);
    color: var(--course-accent);
    font-size: 9px;
    font-weight: 850;
}

.course-card h2 {
    margin: 8px 0 4px;
    color: var(--ink-strong);
    font-size: 15px;
    line-height: 1.15;
}

.course-card p {
    margin: 10px 0 0;
    color: var(--course-accent);
    font-weight: 800;
}

.distribution-card {
    min-height: 174px;
}

.course-card-topline > span {
    margin: 0;
}

/* =========================================================
   GESTIÓN ESTUDIANTES
   ========================================================= */

.students-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.students-sidebar-panel {
    display: grid;
    gap: 16px;
}

.student-step-card {
    padding: 18px;
}

.student-step-heading {
    gap: 10px;
    align-items: flex-start;
}

.student-step-number {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 11px;
    font-weight: 850;
}

.student-step-heading strong,
.student-step-heading small {
    display: block;
}

.student-step-heading strong {
    color: var(--ink-strong);
    font-size: 12px;
}

.student-step-heading small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
}

.course-selector-form {
    margin-top: 16px;
}

.course-selector-form select {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-size: 11px;
    font-weight: 720;
    outline: 0;
}

.course-selector-form select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .11);
}

.import-card > .button {
    width: 100%;
    margin-top: 16px;
}

.import-column-guide {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.import-column-guide span {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fbfdff;
    color: var(--ink);
    font-size: 8px;
    font-weight: 750;
    line-height: 1.4;
}

.import-column-guide b {
    margin-bottom: 2px;
    display: block;
    color: var(--muted);
    font-size: 7px;
    letter-spacing: .04em;
}

.inline-import-form {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.import-paste-area {
    width: 100%;
    min-height: 178px;
    resize: vertical;
    padding: 12px;
    border: 1px dashed #b9cbe4;
    border-radius: 11px;
    background: #fbfdff;
    color: var(--ink);
    font-family: var(--font-main);
    font-size: 10px;
    line-height: 1.55;
    outline: none;
    text-transform: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.import-paste-area::placeholder {
    color: #8da0ba;
    opacity: 1;
}

.import-paste-area:focus {
    border-style: solid;
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.import-paste-area:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.import-review-button {
    width: 100%;
}

.import-format {
    margin-top: 16px;
    padding: 12px;
    display: grid;
    gap: 3px;
    border: 1px dashed #cbd8ea;
    border-radius: 10px;
    background: #fbfdff;
}

.import-format span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 750;
}

.import-format span:first-child {
    margin-top: 0;
}

.import-format strong {
    color: var(--ink);
    font-size: 9px;
}

.student-step-note {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 9px;
    text-align: center;
}

.student-roster {
    min-width: 0;
    overflow: hidden;
}

.student-roster-header {
    min-height: 78px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.student-roster-header span,
.student-roster-header h2 {
    display: block;
}

.student-roster-header span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
}

.student-roster-header h2 {
    margin: 5px 0 0;
    color: var(--ink-strong);
    font-size: 14px;
}

.student-count {
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 9px;
    white-space: nowrap;
}

.roster-empty {
    min-height: 330px;
    padding: 30px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.roster-empty-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--blue-soft);
    color: var(--blue);
}

.roster-empty-icon svg {
    width: 25px;
    height: 25px;
}

.roster-empty strong {
    color: var(--ink-strong);
    font-size: 12px;
}

.roster-empty span {
    margin-top: 6px;
    color: var(--muted);
    font-size: 10px;
}

.student-roster-list {
    display: grid;
}

.student-roster-row {
    min-height: 68px;
    padding: 11px 20px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
}

.student-roster-row:last-child {
    border-bottom: 0;
}

.student-row-number {
    color: var(--muted-light);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.student-row-data {
    min-width: 0;
}

.student-row-data strong,
.student-row-data span {
    display: block;
}

.student-row-data strong {
    overflow: hidden;
    color: var(--ink-strong);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-row-data span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
}

.student-row-actions {
    justify-self: end;
}

.student-roster-tools {
    display: grid;
    justify-items: end;
    gap: 9px;
}

.student-access-toolbar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.student-access-toolbar form {
    margin: 0;
}

.student-access-tool {
    min-height: 34px;
    padding: 7px 10px;
    gap: 6px;
    font-size: 8px;
}

.student-access-tool svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.student-access-state {
    width: max-content;
    max-width: 100%;
    margin-top: 7px !important;
    padding: 5px 7px;
    display: flex !important;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b !important;
    font-size: 8px !important;
    font-weight: 850 !important;
}

.student-access-state.is-active {
    background: #ecfdf5;
    color: #047857 !important;
}

.student-access-state code {
    overflow-wrap: anywhere;
    color: inherit;
    font: inherit;
    letter-spacing: .08em;
}

.student-access-state button {
    width: 25px;
    height: 25px;
    padding: 0;
    display: grid;
    place-items: center;
    flex: 0 0 25px;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, .72);
    color: inherit;
    cursor: pointer;
}

.student-access-state button:hover,
.student-access-state button:focus-visible {
    background: #fff;
    outline: 2px solid rgba(4, 120, 87, .18);
}

.student-access-state button svg {
    width: 14px;
    height: 14px;
}

.student-permanent-delete-state {
    max-width: 520px;
    margin-top: 7px !important;
    color: #b91c1c !important;
    font-size: 7.5px !important;
    font-weight: 800 !important;
    line-height: 1.35;
}

.student-permanent-delete-state.is-available {
    color: #92400e !important;
}

.action-button.permanent-delete {
    border-color: #991b1b;
    background: #991b1b;
    color: #fff;
}

.action-button.permanent-delete:hover {
    background: #7f1d1d;
}

.import-textarea {
    font-family: var(--font-main);
    font-size: 11px;
    text-transform: none !important;
}

.import-summary {
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.import-summary > div {
    min-width: 0;
    padding: 10px 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.import-summary strong,
.import-summary span {
    display: block;
}

.import-summary strong {
    color: var(--ink-strong);
    font-size: 15px;
}

.import-summary span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 7.5px;
    font-weight: 800;
}

.import-preview-list {
    max-height: 330px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 11px;
}

.import-preview-row {
    min-height: 58px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line-soft);
}

.import-preview-row:last-child {
    border-bottom: 0;
}

.import-preview-row strong,
.import-preview-row span {
    display: block;
}

.import-preview-row strong {
    color: var(--ink);
    font-size: 10px;
}

.import-preview-row > div > span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.import-status {
    flex: 0 0 auto;
    padding: 5px 7px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-size: 7.5px;
    font-weight: 850;
    white-space: nowrap;
}

.status-nuevo { color: var(--blue); background: var(--blue-soft); }
.status-error,
.status-duplicado { color: #b91c1c; background: #fef2f2; }
.status-posible-duplicado { color: #92400e; background: #fffbeb; }
.status-ya-existe,
.status-ya-existente,
.status-ya-matriculado { color: #64748b; background: #f8fafc; }

.import-preview-detail {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.35;
}

.status-conflicto-periodo {
    color: #b91c1c;
    background: #fef2f2;
}

.import-confirm-actions {
    margin-top: 18px;
}

.import-blocked-message {
    flex: 1 0 100%;
    margin: 0;
    color: #b91c1c;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.45;
}

.import-confirm-actions form {
    display: block;
}

/* =========================================================
   RESPONSIVE DE MÓDULOS
   ========================================================= */

@media (min-width: 900px) {
    .module-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        align-items: start;
    }
}

@media (max-width: 980px) {
    .students-layout {
        grid-template-columns: 280px minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .course-groups {
        gap: 22px;
    }

    .course-grid {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }

    .students-layout {
        grid-template-columns: 1fr;
    }

    .students-sidebar-panel {
        grid-template-columns: 1fr;
    }

    .roster-empty {
        min-height: 220px;
    }

    .import-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .import-summary > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 699px) {
    .module-heading,
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .module-heading > .button,
    .section-heading > .button {
        width: 100%;
    }

    .management-item {
        gap: 12px;
    }

    .item-actions {
        margin-left: auto;
    }

    .date-grid,
    .exception-form {
        grid-template-columns: 1fr;
    }

    .exception-form label:last-of-type,
    .exception-form .button {
        grid-column: auto;
    }

    .dialog-panel {
        padding: 28px 18px 18px;
    }

    .dialog-actions,
    .modal-actions {
        width: 100%;
    }

    .dialog-actions .button,
    .modal-actions .button {
        min-width: 0;
        flex: 1;
        padding-inline: 10px;
    }

    .student-roster-header {
        align-items: flex-start;
        gap: 10px;
    }

    .student-roster-tools {
        width: 100%;
        justify-items: start;
    }

    .student-access-toolbar {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-access-toolbar form,
    .student-access-tool {
        width: 100%;
    }

    .student-roster-row {
        grid-template-columns: 26px minmax(0, 1fr) auto;
        padding: 12px 14px;
        gap: 10px;
    }

    .student-row-data strong {
        white-space: normal;
        line-height: 1.35;
    }

    .student-row-actions {
        gap: 5px;
    }

    .action-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

}

@media (max-width: 430px) {
    .course-grid {
        grid-template-columns: 1fr;
    }

    .course-card {
        min-height: 136px;
        padding: 16px 15px 16px 18px;
    }

    .import-column-guide {
        grid-template-columns: 1fr;
    }

    .import-paste-area {
        min-height: 160px;
    }

    .management-item {
        padding: 13px 14px;
    }

    .student-roster-header {
        padding: 15px 14px;
    }

    .student-count {
        font-size: 8px;
    }

    .student-roster-row {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .student-row-actions {
        grid-column: 2;
        justify-self: start;
        margin-top: 2px;
    }

    .student-access-toolbar {
        grid-template-columns: 1fr;
    }

    .import-preview-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .import-status {
        align-self: flex-start;
    }
}

@media (min-width: 700px) {
    .sidebar .close-menu {
        display: none !important;
    }
}

/* =========================================================
   FICHA DEL CURSO
   ========================================================= */

.course-card-link {
    position: relative;
    display: block;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.course-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .09);
}

.course-card-link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .18);
    outline-offset: 3px;
}

.course-card-enter {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--course-accent, var(--blue));
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--course-accent, var(--blue)) 24%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.course-card-link:hover .course-card-enter {
    transform: translateY(-50%) translateX(3px);
    filter: saturate(1.05) brightness(.98);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--course-accent, var(--blue)) 30%, transparent);
}

.course-card-link:active .course-card-enter {
    transform: translateY(-50%) translateX(1px) scale(.97);
}

.course-card-enter svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.15;
}

.course-file-page {
    display: grid;
    gap: 26px;
}

.course-file-heading,
.attendance-context {
    display: flex;
    align-items: center;
    gap: 16px;
}

.course-back-link,
.attendance-back {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.course-back-link:hover,
.attendance-back:hover {
    border-color: #bfdbfe;
    background: var(--blue-soft);
    color: var(--blue);
}

.course-file-heading h1,
.attendance-context h1 {
    margin: 4px 0 0;
    color: var(--ink-strong);
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.1;
}

.course-file-meta,
.attendance-context > div > p:last-child {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.course-context-navigation {
    width: min(100%, 520px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
}

.course-context-link {
    min-width: 0;
    min-height: 38px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.course-context-link:hover,
.course-context-link:focus-visible {
    background: #fff;
    color: var(--blue);
}

.course-context-link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .16);
    outline-offset: 1px;
}

.course-context-link.is-active {
    background: #fff;
    color: var(--blue);
    box-shadow: 0 2px 8px rgba(15, 42, 85, .08), inset 0 -2px 0 var(--blue);
}

.course-file-meta span {
    margin: 0 7px;
    color: var(--muted-light);
}

.course-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.course-module-card {
    min-height: 190px;
    padding: 24px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.course-module-card.module-attendance {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.course-module-card.module-attendance:hover {
    transform: translateY(-2px);
    border-color: #bfdbfe;
    box-shadow: 0 18px 38px rgba(37, 99, 235, .10);
}

.course-module-card.module-attendance:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .18);
    outline-offset: 3px;
}

.course-module-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--blue-soft);
    color: var(--blue);
}

.course-module-icon svg {
    width: 24px;
    height: 24px;
}

.course-module-card h2 {
    margin: 3px 0 8px;
    color: var(--ink-strong);
    font-size: 16px;
}

.course-module-card p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.course-module-arrow {
    align-self: center;
    color: var(--blue);
}

.course-module-arrow svg {
    width: 19px;
    height: 19px;
}

.course-module-card.is-coming {
    background: #fbfcfe;
}

.course-module-card.is-coming .course-module-icon {
    background: #f1f5f9;
    color: #64748b;
}

.coming-pill {
    width: max-content;
    margin-top: 16px;
    padding: 5px 8px;
    display: inline-flex;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .04em;
}

/* =========================================================
   ASISTENCIA
   ========================================================= */

.attendance-page {
    display: grid;
    gap: 14px;
    padding-bottom: 92px;
}

.attendance-context {
    margin-bottom: 4px;
}

.attendance-toolbar {
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr);
    gap: 12px;
}

.attendance-field {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 9px;
    font-weight: 850;
}

.attendance-field > input,
.attendance-search-wrap {
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}

.attendance-field > input {
    width: 100%;
    padding: 0 13px;
    color: var(--ink);
}

.attendance-search-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
}

.attendance-search-wrap svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--muted);
}

.attendance-search-wrap input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    text-transform: uppercase;
}

.attendance-field > input:focus,
.attendance-search-wrap:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
    outline: none;
}

.attendance-summary {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
}

.attendance-summary-item {
    min-height: 62px;
    padding: 10px 8px;
    border: 0;
    border-right: 1px solid var(--line-soft);
    background: #fff;
    color: var(--muted);
    text-align: center;
    transition: background .16s ease, color .16s ease;
}

.attendance-summary-item:last-child {
    border-right: 0;
}

.attendance-summary-item strong,
.attendance-summary-item span {
    display: block;
}

.attendance-summary-item strong {
    color: inherit;
    font-size: 16px;
}

.attendance-summary-item span {
    margin-top: 3px;
    font-size: 8px;
    font-weight: 850;
}

.attendance-summary-item:hover,
.attendance-summary-item.is-active {
    background: #f8fafc;
    color: var(--ink-strong);
}

.attendance-summary-item.is-active {
    box-shadow: inset 0 -3px 0 currentColor;
}

.attendance-summary-item.state-p { color: #059669; }
.attendance-summary-item.state-f { color: #dc2626; }
.attendance-summary-item.state-j { color: #2563eb; }
.attendance-summary-item.state-a { color: #d97706; }
.attendance-summary-item.state-fu { color: #9f1239; }

.attendance-roster {
    display: grid;
    gap: 8px;
}

.attendance-list-count {
    margin: 0 2px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .025em;
}

.attendance-student-card {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(460px, 1.6fr);
    align-items: center;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .035);
}

.attendance-student-head {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.attendance-student-number {
    flex: 0 0 auto;
    color: var(--muted-light);
    font-size: 9px;
    font-weight: 850;
}

.attendance-student-head strong {
    min-width: 0;
    color: var(--ink-strong);
    font-size: 10px;
    line-height: 1.35;
}

.attendance-state-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(54px, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.attendance-state {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-right: 1px solid var(--line);
    background: #f8fafc;
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
    transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}

.attendance-state:last-child {
    border-right: 0;
}

.attendance-state:hover {
    background: #f1f5f9;
}

.attendance-state.is-selected.state-p { background: #10b981; color: #fff; }
.attendance-state.is-selected.state-f { background: #ef4444; color: #fff; }
.attendance-state.is-selected.state-j { background: #3b82f6; color: #fff; }
.attendance-state.is-selected.state-a { background: #f59e0b; color: #fff; }
.attendance-state.is-selected.state-fu { background: #be123c; color: #fff; }

.attendance-state.is-selected {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .72);
}

.attendance-state-check {
    width: 13px;
    height: 13px;
    display: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.attendance-state.is-selected .attendance-state-check {
    display: block;
}

.attendance-state:focus-visible {
    position: relative;
    z-index: 2;
    outline: 3px solid rgba(37, 99, 235, .2);
    outline-offset: -3px;
}

.attendance-save-bar {
    position: fixed;
    z-index: 30;
    left: 264px;
    right: 0;
    bottom: 0;
    min-height: 74px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
}

.attendance-save-button {
    width: min(100%, 420px);
    flex: 0 1 420px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.attendance-save-button.has-pending-changes {
    box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
}

.attendance-save-button:disabled {
    cursor: not-allowed;
    opacity: .56;
    box-shadow: none;
}

.attendance-save-button[aria-busy="true"] {
    cursor: wait;
    opacity: .78;
}

.attendance-save-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: attendance-spin .7s linear infinite;
}

.attendance-back-to-top {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
    color: var(--blue);
}

.attendance-back-to-top[hidden] {
    display: none;
}

.attendance-back-to-top svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.attendance-back-to-top:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .22);
    outline-offset: 3px;
}

@keyframes attendance-spin {
    to { transform: rotate(360deg); }
}

.attendance-empty {
    min-height: 280px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}

.attendance-empty h2 {
    margin: 10px 0 4px;
    font-size: 13px;
}

.attendance-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}

.attendance-page .sgap-toast {
    position: fixed;
    z-index: 80;
    top: auto;
    left: 50%;
    right: auto;
    bottom: 92px;
    width: max-content;
    max-width: min(420px, calc(100vw - 32px));
    min-height: 0;
    padding: 12px 16px;
    display: block;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
    color: var(--ink);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .2s ease, transform .2s ease;
}

.attendance-page .sgap-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.attendance-page .sgap-toast.is-success {
    border-color: #bbf7d0;
    color: #166534;
}

.attendance-page .sgap-toast.is-error {
    border-color: #fecaca;
    color: #b91c1c;
}

.attendance-discard-button {
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fff;
    color: #b91c1c;
    font-weight: 850;
}

@media (max-width: 980px) {
    .course-module-grid {
        grid-template-columns: 1fr;
    }

    .course-module-card {
        min-height: 140px;
    }

    .attendance-student-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 699px) {
    .course-file-heading,
    .attendance-context {
        align-items: flex-start;
    }

    .course-file-meta {
        line-height: 1.5;
    }

    .course-module-card {
        padding: 18px;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .attendance-page {
        padding-bottom: 88px;
    }

    .attendance-toolbar {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .attendance-summary { display: grid; overflow: hidden; }

    .attendance-summary-item { min-width: 0; padding: 10px 3px; }

    .attendance-student-card {
        padding: 13px;
        gap: 12px;
    }

    .attendance-student-head strong {
        font-size: 11px;
    }

    .attendance-state-grid {
        grid-template-columns: repeat(5, minmax(48px, 1fr));
    }

    .attendance-state {
        min-height: 42px;
    }

    .attendance-save-bar {
        left: 0;
        min-height: 70px;
        padding: 10px 14px;
    }

    .attendance-page .sgap-toast {
        bottom: 84px;
        max-width: calc(100vw - 24px);
        padding: 10px 14px;
    }
}

@media (max-width: 430px) {
    .course-file-heading h1,
    .attendance-context h1 {
        font-size: 20px;
    }

    .course-module-card {
        grid-template-columns: 44px minmax(0, 1fr);
        min-height: 0;
    }

    .course-module-arrow {
        display: none;
    }

    .course-module-icon {
        width: 44px;
        height: 44px;
    }

    .attendance-summary-item { min-width: 0; }

    .course-context-navigation {
        width: 100%;
        gap: 3px;
        padding: 4px;
    }

    .course-context-link {
        min-height: 40px;
        padding: 0 3px;
        font-size: 8px;
    }

    .attendance-state-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .attendance-state {
        min-width: 0;
        font-size: 10px;
    }
}

/* =========================================================
   AJUSTE PREMIUM: TARJETAS MIS CURSOS + MI DISTRIBUTIVO
   ========================================================= */
.course-card-link {
    padding-right: 82px;
}

.course-card-enter {
    right: 18px;
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--course-accent, var(--blue)) 18%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--course-accent, var(--blue)) 11%, white);
    color: var(--course-accent, var(--blue));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--course-accent, var(--blue)) 12%, transparent);
}

.course-card-link:hover .course-card-enter {
    transform: translateY(-50%) translateX(2px);
    background: color-mix(in srgb, var(--course-accent, var(--blue)) 16%, white);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--course-accent, var(--blue)) 18%, transparent);
    filter: none;
}

.course-card-enter svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.distribution-card {
    min-height: 150px;
    padding: 18px;
}

.distribution-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
}

.distribution-card-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.distribution-card-meta > span {
    color: #7f8da4;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
}

.distribution-card .distribution-badge {
    position: static;
    inset: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--blue);
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.distribution-actions {
    flex: 0 0 auto;
    align-self: flex-start;
}

.distribution-card h2 {
    margin: 20px 0 0;
    padding-right: 0;
}

.distribution-card p {
    margin-top: 12px;
}

.distribution-card .distribution-hours {
    margin-top: 8px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .035em;
}

.distribution-card .distribution-hours + p {
    margin-top: 6px;
}

/* =========================================================
   MI HORARIO
   ========================================================= */
.message.warning {
    border-color: #f5d58b;
    background: #fff9e9;
    color: #8a5a00;
}

.schedule-page {
    min-width: 0;
}

.schedule-context {
    min-width: 0;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #dfe7f3;
    border-radius: 16px;
    background: #fff;
}

.schedule-context span,
.schedule-summary span,
.schedule-summary small {
    color: #7b8ba3;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
}

.schedule-context strong {
    display: block;
    margin-top: 4px;
    color: #0b2a55;
    font-size: 14px;
}

.schedule-context p {
    margin: 0;
    color: #2563eb;
    font-size: 11px;
    font-weight: 850;
    text-align: right;
}

.schedule-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.schedule-summary article {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid #e1e8f2;
    border-radius: 14px;
    background: #fff;
}

.schedule-summary strong {
    display: block;
    margin: 5px 0 2px;
    color: #0b2a55;
    font-size: 22px;
    line-height: 1;
}

.schedule-summary .is-complete strong { color: #087a55; }
.schedule-summary .is-pending strong { color: #a46900; }
.schedule-summary .is-exceeded strong { color: #c0392b; }

.schedule-levels,
.schedule-level {
    display: grid;
    gap: 14px;
}

.schedule-levels {
    gap: 24px;
}

.schedule-level-heading span {
    color: #2563eb;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .1em;
}

.schedule-level-heading h2 {
    margin: 3px 0 0;
    color: #0b2a55;
    font-size: 16px;
}

.schedule-assignment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.schedule-assignment {
    min-width: 0;
    padding: 17px;
    display: flex;
    flex-direction: column;
    border: 1px solid #dfe7f3;
    border-top: 3px solid #d09a25;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(11, 31, 68, .035);
}

.schedule-assignment.is-completo { border-top-color: #119b6b; }
.schedule-assignment.is-excedido { border-top-color: #dc4c3f; }

.schedule-assignment-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.schedule-assignment-head span {
    color: #71829b;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .045em;
}

.schedule-assignment-head h3 {
    margin: 5px 0 0;
    color: #0b2a55;
    font-size: 15px;
}

.schedule-status {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: #fff5dc;
    color: #946000;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .055em;
}

.is-completo .schedule-status { background: #e9f8f2; color: #087a55; }
.is-excedido .schedule-status { background: #fff0ee; color: #b83227; }

.schedule-load {
    margin-top: 14px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
}

.schedule-load span {
    color: #7b8ba3;
    font-size: 8px;
    font-weight: 800;
}

.schedule-load strong {
    color: #2563eb;
    font-size: 12px;
}

.schedule-missing-hours,
.schedule-empty {
    margin: 13px 0 0;
    color: #8a5a00;
    font-size: 10px;
    font-weight: 750;
}

.schedule-empty {
    color: #8190a5;
}

.schedule-days {
    margin-top: 4px;
    display: grid;
    gap: 9px;
}

.schedule-day-group {
    min-width: 0;
}

.schedule-day-group h4 {
    margin: 12px 0 6px;
    color: #5f718c;
    font-size: 9px;
    letter-spacing: .075em;
}

.schedule-block {
    min-width: 0;
    min-height: 52px;
    padding: 8px 8px 8px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #e4eaf3;
    border-left: 3px solid #2563eb;
    border-radius: 11px;
    background: #f9fbff;
}

.schedule-block + .schedule-block {
    margin-top: 6px;
}

.schedule-block > div:first-child {
    min-width: 0;
}

.schedule-block strong,
.schedule-block span {
    display: block;
}

.schedule-block strong {
    color: #0b2a55;
    font-size: 12px;
}

.schedule-block span {
    margin-top: 3px;
    color: #71829b;
    font-size: 8px;
    font-weight: 850;
}

.schedule-block-actions .action-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
}

.schedule-add {
    width: 100%;
    margin-top: 14px;
}

.schedule-add:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.schedule-time-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .schedule-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .schedule-assignment-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 699px) {
    .schedule-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .schedule-heading .button {
        width: 100%;
    }

    .schedule-context {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .schedule-context p {
        text-align: left;
    }

    .schedule-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schedule-assignment {
        padding: 14px;
    }

    .schedule-assignment-head {
        gap: 8px;
    }

    .schedule-block {
        padding-left: 9px;
    }
}

@media (max-width: 390px) {
    .schedule-summary article {
        padding: 12px;
    }

    .schedule-summary strong {
        font-size: 19px;
    }

    .schedule-time-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .course-card-link {
        min-height: 150px;
        padding: 18px 76px 18px 18px;
    }

    .course-card-enter {
        right: 18px;
        width: 42px;
        height: 42px;
    }

    .distribution-card {
        min-height: 160px;
        padding: 18px;
    }

    .distribution-card-header {
        align-items: flex-start;
        gap: 10px;
    }

    .distribution-card-meta {
        max-width: calc(100% - 96px);
    }

    .distribution-actions {
        gap: 5px;
    }

    .distribution-card .action-button {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
    }

    .distribution-card h2 {
        margin-top: 22px;
        font-size: 16px;
    }
}


/* =========================================================
   INICIO · MIS CURSOS (AJUSTE SEGÚN MOCKUP)
   ========================================================= */
.home-course-card {
    min-height: 146px;
    padding: 16px 74px 16px 16px;
}

.home-course-card .course-card-top {
    align-items: flex-start;
}

.home-course-card small {
    top: 16px;
    right: 74px;
    padding: 3px 9px;
    font-size: 9px;
    letter-spacing: .02em;
}

.home-course-card h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 16px;
}

.home-course-card p {
    margin-top: 0;
    font-size: 11px;
}

.home-course-card-enter {
    right: 18px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: color-mix(in srgb, var(--course-accent, var(--blue)) 12%, white);
    color: color-mix(in srgb, var(--course-accent, var(--blue)) 62%, #475569);
    box-shadow: none;
}

.home-course-card-enter svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.1;
}

.home-course-card:hover .home-course-card-enter,
.home-course-card:focus-visible .home-course-card-enter {
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--course-accent, var(--blue)) 16%, white);
    box-shadow: none;
    filter: none;
}

.home-course-card:hover,
.home-course-card:focus-visible {
    transform: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

@media (max-width: 430px) {
    .home-course-card {
        min-height: 138px;
        padding: 18px 76px 18px 18px;
    }

    .home-course-card small {
        top: 18px;
        right: 76px;
    }

    .home-course-card-enter {
        right: 18px;
        width: 32px;
        height: 32px;
    }
}


/* =========================================================
   INICIO · MIS CURSOS · ACCESO VISUAL SEGÚN MOCKUP APROBADO
   ========================================================= */
.home-course-card {
    position: relative;
    padding-right: 70px;
}

.home-course-card-enter {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--course-accent, var(--blue)) 12%, white);
    color: var(--course-accent, var(--blue));
    box-shadow: none;
}

.home-course-card-enter svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-course-card:hover .home-course-card-enter,
.home-course-card:focus-visible .home-course-card-enter,
.home-course-card:active .home-course-card-enter {
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--course-accent, var(--blue)) 16%, white);
    color: var(--course-accent, var(--blue));
    box-shadow: none;
    filter: none;
}

@media (max-width: 430px) {
    .home-course-card {
        padding-right: 70px;
    }

    .home-course-card-enter {
        right: 16px;
        width: 32px;
        height: 32px;
    }
}

/* Reglas finales de los controles compactos de esta fase. */
.home-course-card { padding-right: 58px; }
.home-course-card-enter { width: 28px; height: 28px; border-radius: 0; background: transparent; }
.home-course-card:hover .home-course-card-enter, .home-course-card:focus-visible .home-course-card-enter, .home-course-card:active .home-course-card-enter { transform: translateY(-50%) translateX(2px); background: transparent; }
.attendance-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.attendance-summary-item { min-width: 0; }
@media (max-width: 699px) { .attendance-summary { display: grid; overflow: hidden; } .attendance-summary-item { min-width: 0; flex: initial; padding: 10px 3px; } .attendance-summary-item span { font-size: 7px; } }

/* =========================================================
   INICIO · CARRUSELES POR SUBNIVEL Y PRÓXIMA CLASE
   ========================================================= */
.home-carousel-viewport,
.home-carousel-nav {
    display: none;
}

.home-next-class {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 42, 74, .06), 0 1px 2px rgba(15, 42, 74, .04);
}

/* Agenda docente: maqueta visual sin persistencia ni controles funcionales. */
.home-agenda{margin-top:16px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 3px rgba(15,42,74,.04);min-width:0}
.home-agenda-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.home-agenda-heading h2{margin:0;color:#0b2a55;font-size:14px;font-weight:800}
.home-agenda-heading p{margin:5px 0 0;color:#7b8ba1;font-size:10px;font-weight:700}
.home-agenda svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.home-agenda-more{display:grid;place-items:center;width:30px;height:30px;border:0;background:transparent;color:#7b8ba1;padding:0;opacity:1}
.home-agenda-timeline{position:relative;list-style:none;margin:0;padding:0 0 0 20px}
.home-agenda-event{--agenda-tone:#7d9dd5;--agenda-soft:#edf3fc;position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:start;gap:9px;padding:0 0 18px;border:0;border-radius:0;background:transparent;box-shadow:none}
.home-agenda-event::after{content:"";position:absolute;left:-16px;top:16px;bottom:-16px;width:1px;background:#e0e6ee}
.home-agenda-event:last-child::after{display:none}
.home-agenda-event::before{content:"";position:absolute;z-index:1;left:-19px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--agenda-tone);box-shadow:0 0 0 3px #fff}
.home-agenda-high{--agenda-tone:#d88982;--agenda-soft:#fcf0ed}
.home-agenda-medium{--agenda-tone:#cba05d;--agenda-soft:#fbf5e9}
.home-agenda-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--agenda-tone);background:var(--agenda-soft)}
.home-agenda-details{min-width:0}
.home-agenda-details time,.home-agenda-time{display:block;font-size:10px;font-weight:700;color:#7b8ba1;line-height:1.4}
.home-agenda-details h3{margin:3px 0;color:#183456;font-size:11px;font-weight:800;line-height:1.4;overflow-wrap:anywhere}
.home-agenda-details p{margin:0;color:#8290a3;font-size:9px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.home-agenda-priority{margin-top:15px;border-radius:999px;padding:3px 7px;color:var(--agenda-tone);background:var(--agenda-soft);font-size:8px;font-weight:800;line-height:1.4;white-space:nowrap}
.home-agenda-end{--agenda-tone:#a3afbe;--agenda-soft:#f5f7fa;padding-bottom:0;grid-template-columns:32px minmax(0,1fr)}
.home-agenda-end::before{width:7px;height:7px;background:#fff;border:1px solid #b2bdcb;left:-20px;top:12px}
.home-agenda-end h3{color:#7b8ba1;font-size:10px}
.home-agenda-all{display:flex;align-items:center;gap:9px;width:100%;margin-top:14px;padding:11px 0 0;border:0;border-top:1px solid #edf1f6;background:transparent;color:#54759d;opacity:1;font:inherit;font-size:10px;font-weight:800;text-align:left}
.home-agenda-all>svg:last-child{margin-left:auto;width:15px;height:15px}
.home-agenda-all{text-decoration:none}
.agenda-page{min-width:0}
.agenda-page .content-heading>p:last-child{font-size:12px;color:#7b8ba1}
.agenda-view-tabs{display:flex;gap:5px;margin:14px 0}
.agenda-view-tabs a{padding:9px 18px;border-radius:9px;background:#eef3fa;color:#54759d;text-decoration:none;font-size:12px;font-weight:800}
.agenda-view-tabs a[aria-current]{background:#0b2a55;color:#fff}
.agenda-full{margin-top:0}
.agenda-range-heading h2,.agenda-day-heading{font-size:12px;line-height:1.6;color:#183456;margin:0 0 16px}
.agenda-date-nav{display:flex;justify-content:space-between;gap:8px;margin-bottom:16px}
.agenda-date-nav a{color:#54759d;font-size:10px;font-weight:800;text-decoration:none}
.agenda-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:22px}
.agenda-weekday{text-align:center;color:#7b8ba1;font-size:10px;font-weight:800;padding:5px 0}
.agenda-month-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:44px;border:1px solid #e5ebf3;border-radius:7px;text-decoration:none;color:#183456;font-size:12px}
.agenda-month-day[aria-current]{border-color:#54759d;background:#edf3fc;font-weight:800}
.agenda-day-dots{display:flex;gap:3px;min-height:5px}
.agenda-day-dots i{width:5px;height:5px;border-radius:50%;background:#7d9dd5}
.agenda-day-dots .agenda-dot-high{background:#d88982}.agenda-day-dots .agenda-dot-medium{background:#cba05d}
.agenda-empty{padding:22px 0;color:#7b8ba1;font-size:11px;text-align:center}
.agenda-empty p{font-size:10px}
.agenda-full .home-agenda-timeline{margin-bottom:20px}
.agenda-finished-label{display:inline-block;margin-top:4px;font-size:8px;color:#7b8ba1;font-weight:700}
.agenda-event-finished .home-agenda-details h3{color:#7b8ba1}
.agenda-page a:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.agenda-event-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.agenda-edit{border:0;background:transparent;color:#54759d;padding:5px 0;font-size:9px;font-weight:800;cursor:pointer}
.agenda-dialog{width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box;padding:18px;border:1px solid #dbe5f1;border-radius:14px;color:#183456;overflow:auto}
.agenda-dialog::backdrop{background:rgba(15,42,74,.4)}
.agenda-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;position:sticky;top:-18px;z-index:1;background:#fff}
.agenda-dialog h2{font-size:14px;margin:0}
.agenda-dialog-header button{display:grid;place-items:center;border:0;background:transparent;color:#54759d;width:44px;height:44px}
.agenda-dialog-header svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.agenda-form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.agenda-form-grid label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:11px;font-weight:800}
.agenda-form-grid input,.agenda-form-grid select,.agenda-form-grid textarea{width:100%;min-width:0;box-sizing:border-box;min-height:44px;border:1px solid #dbe5f1;border-radius:8px;padding:9px;font:inherit;font-size:14px;color:#183456;background:#fff;text-transform:uppercase}
.agenda-form-grid .agenda-all-day{flex-direction:row;align-items:center;min-height:44px}
.agenda-all-day input{width:20px;min-height:20px;height:20px}
.agenda-context-note{font-size:10px;line-height:1.5;color:#7b8ba1;margin:0}
.agenda-dialog-footer{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;position:sticky;bottom:-18px;background:#fff;padding:14px 0;margin-top:12px}
.agenda-dialog-footer .button{min-height:44px;font-size:11px}
.agenda-dialog [data-agenda-delete],.agenda-dialog [data-agenda-confirm-delete]{color:#b45353;border:1px solid #eed2d2;background:#fcf0ed}
.agenda-form-error,.agenda-dialog [role=alert]{font-size:12px;color:#b45353;line-height:1.5}
.agenda-feedback{color:#277457;background:#edf8f2;padding:10px;border-radius:8px;font-size:12px}
.agenda-delete-dialog p{font-size:12px;line-height:1.6}
.agenda-dialog :focus-visible,.agenda-edit:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
@media(min-width:640px){.agenda-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.agenda-form-wide{grid-column:1/-1}}
@media(min-width:768px){.home-agenda{padding:18px}.home-agenda-details h3{font-size:12px}.home-agenda-details p{font-size:10px}.home-agenda-priority{font-size:9px}}

.home-next-class-label {
    margin: 0 0 12px;
    color: #8b95a5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

.home-next-class-empty {
    min-height: 138px;
    padding: 18px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    text-align: center;
}

.home-next-class-empty svg {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .55;
}

.home-next-class-empty strong,
.home-next-class-empty span,
.home-next-class-filled strong,
.home-next-class-filled span {
    display: block;
}

.home-next-class-empty strong {
    color: #0f2a4a;
    font-size: 13px;
    letter-spacing: .02em;
}

.home-next-class-empty span {
    color: #8b95a5;
    font-size: 12px;
}

.home-next-class-filled {
    min-height: 58px;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.home-next-class-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0e8f80;
}

.home-next-class-filled strong {
    color: #0f2a4a;
    font-size: 14px;
}

.home-next-class-filled span {
    margin-top: 3px;
    color: #8b95a5;
    font-size: 12px;
}

.home-next-class-filled small {
    padding: 5px 11px;
    border-radius: 20px;
    background: #d3f3ee;
    color: #0b6e62;
    font-size: 11px;
    font-weight: 850;
}

@media (max-width: 699px) {
    .home-course-groups {
        gap: 0;
    }

    .home-course-group {
        margin-bottom: 26px;
        overflow: hidden;
    }

    .home-course-group .course-group-heading {
        margin-bottom: 10px;
    }

    .home-course-grid {
        display: none;
    }

    .home-carousel-viewport {
        display: block;
        overflow: hidden;
        border-radius: 14px;
    }

    .home-carousel-track {
        display: flex;
        gap: 12px;
        transition: transform .32s cubic-bezier(.22, .61, .36, 1);
        touch-action: pan-y;
        will-change: transform;
    }

    .home-carousel-card {
        flex: 0 0 88%;
        min-height: 118px;
        padding: 16px 58px 16px 15px;
    }

    .home-carousel-card:only-child {
        flex-basis: 100%;
    }

    .home-carousel-nav {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }

    .home-carousel-arrow {
        width: 32px;
        height: 32px;
        padding: 0;
        display: grid;
        place-items: center;
        border: 1px solid #e7eaef;
        border-radius: 50%;
        background: #fff;
        color: #0f2a4a;
        cursor: pointer;
    }

    .home-carousel-arrow svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .home-carousel-dots {
        min-height: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }

    .home-carousel-dot {
        width: 6px;
        height: 6px;
        min-width: 0;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: #e7eaef;
        cursor: pointer;
        transition: width .25s ease, background .25s ease;
    }

    .home-carousel-dot.is-active {
        width: 20px;
        background: #0f2a4a;
    }

    .home-next-class {
        margin-top: 2px;
    }
}

@media (max-width: 390px) {
    .home-carousel-card {
        flex-basis: 87%;
    }

    .home-next-class {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-carousel-track,
    .home-carousel-dot {
        transition: none;
    }
}

/* =========================================================
   INSUMOS · ARQUITECTURA TRIMESTRAL Y CRUD DE INSUMOS
   ========================================================= */
.inputs-section-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.inputs-section-nav a {
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--muted);
    text-align: center;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 850;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.inputs-section-nav a:hover,
.inputs-section-nav a:focus-visible {
    border-color: #bfdbfe;
    color: var(--blue);
}

.inputs-section-nav a.is-active {
    border-color: #bfdbfe;
    background: var(--blue-soft);
    color: var(--blue);
    box-shadow: inset 0 -2px 0 var(--blue);
}

.inputs-empty-state {
    min-height: 260px;
    padding: 34px 22px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    text-align: center;
}

.inputs-empty-state h2,
.inputs-empty-state p {
    margin: 0;
}

.inputs-empty-state > p:not(.eyebrow) {
    max-width: 520px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.inputs-empty-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--blue-soft);
    color: var(--blue);
}

.inputs-empty-icon svg {
    width: 24px;
    height: 24px;
}

.inputs-toolbar {
    padding: 15px 16px;
    display: grid;
    grid-template-columns: minmax(230px, 1fr) auto;
    gap: 12px 14px;
    align-items: end;
}

.inputs-selector-wrap {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.inputs-selector-wrap label {
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
}

.inputs-selector-wrap select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink-strong);
    font-size: 11px;
    font-weight: 800;
}

.inputs-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.inputs-action {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--blue);
}

.inputs-action:hover,
.inputs-action:focus-visible {
    border-color: #bfdbfe;
    background: var(--blue-soft);
}

.inputs-action-danger {
    color: #b91c1c;
}

.inputs-action-danger:hover,
.inputs-action-danger:focus-visible {
    border-color: #fecaca;
    background: #fff7f7;
}

.inputs-new-button {
    min-height: 42px;
    white-space: nowrap;
}

.inputs-active-title {
    grid-column: 1 / -1;
    min-width: 0;
    padding-top: 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--line-soft);
}

.inputs-active-title strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink-strong);
    font-size: 15px;
}

.inputs-active-title span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
}

.inputs-dialog {
    width: min(92vw, 460px);
}

.inputs-dialog h2 {
    margin-top: 0;
}

.inputs-dialog label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
}

.inputs-dialog input[type="text"] {
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink-strong);
    font-weight: 800;
    text-transform: uppercase;
}

.inputs-dialog input[type="text"]:focus {
    outline: 0;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.inputs-pending-state {
    min-height: 220px;
}

@media (max-width: 699px) {
    .inputs-section-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .inputs-section-nav a {
        min-height: 52px;
        padding: 7px 8px;
        font-size: 9px;
        line-height: 1.15;
    }

    .inputs-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 13px;
        gap: 10px;
    }

    .inputs-toolbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .inputs-new-button {
        margin-left: auto;
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 9px;
    }

    .inputs-active-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .inputs-active-title strong {
        font-size: 14px;
    }

    .inputs-empty-state {
        min-height: 235px;
        padding: 28px 18px;
    }

    .input-student-card {
        padding: 10px 12px;
        gap: 8px;
    }

    .input-student-card > strong {
        font-size: 10px;
        line-height: 1.25;
    }

    .grade-control {
        width: min(100%, 190px);
    }
}


/* =========================================================
   INSUMOS · CONTEXTO TEMPORAL + EVALUACIÓN FORMATIVA
   ========================================================= */
.inputs-period-context {
    margin: 2px 0 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 7px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .01em;
}
.inputs-period-context strong {
    color: var(--ink-strong);
    font-size: 9px;
    font-weight: 850;
}
.inputs-period-context i {
    color: var(--muted-light);
    font-style: normal;
}

.inputs-evaluation-heading {
    margin-top: 14px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}
.inputs-evaluation-heading h2 {
    margin: 2px 0 0;
    color: var(--ink-strong);
    font-size: 18px;
}
.inputs-evaluation-legend {
    display: flex;
    gap: 7px;
    font-size: 8px;
    font-weight: 850;
}
.inputs-evaluation-legend span {
    padding: 4px 7px;
    border-radius: 999px;
}
.inputs-evaluation-legend .is-ok {
    background: #ecfdf5;
    color: #047857;
}
.inputs-evaluation-legend .is-low {
    background: #fff1f2;
    color: #b91c1c;
}

.formative-list {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}
.formative-student {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .035);
}
.formative-student-name {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}
.formative-student-name span {
    flex: 0 0 auto;
    color: var(--muted-light);
    font-size: 8px;
    font-weight: 900;
}
.formative-student-name strong {
    min-width: 0;
    color: var(--ink-strong);
    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 850;
    overflow-wrap: anywhere;
}
.formative-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}
.formative-value,
.formative-input {
    min-width: 0;
    min-height: 48px;
    padding: 6px 6px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    background: #f8fafc;
}
.formative-value small,
.formative-input small {
    color: var(--muted);
    font-size: 7px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .04em;
}
.formative-value strong {
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.formative-value.is-ok {
    border-color: #d1fae5;
    background: #f3fbf7;
}
.formative-value.is-ok strong {
    color: #047857;
}
.formative-value.is-low {
    border-color: #fecdd3;
    background: #fff7f8;
}
.formative-value.is-low strong {
    color: #b91c1c;
}
.formative-value.is-weighted {
    border-color: #dbeafe;
    background: #f5f9ff;
}
.formative-value.is-weighted strong {
    color: #1e3a5f;
}
.formative-input {
    position: relative;
    background: #f5f7fb;
    border-color: #dce3ec;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.formative-input:focus-within {
    border-color: #93c5fd;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}
.formative-input input {
    width: 100%;
    min-width: 0;
    height: 24px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink-strong);
    text-align: center;
    font-size: 12px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.formative-input.is-ok {
    border-color: #d1fae5;
    background: #f3fbf7;
}
.formative-input.is-ok input { color: #047857; }
.formative-input.is-low {
    border-color: #fecdd3;
    background: #fff7f8;
}
.formative-input.is-low input { color: #b91c1c; }
.formative-input.is-invalid {
    border-color: #fbbf24;
    background: #fffbeb;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .08);
}

@media (max-width: 699px) {
    .inputs-period-context {
        margin-top: 0;
        margin-bottom: 8px;
        gap: 4px 5px;
        font-size: 7.5px;
    }
    .inputs-period-context strong { font-size: 8px; }
    .inputs-evaluation-heading {
        margin-top: 12px;
        align-items: center;
    }
    .inputs-evaluation-heading h2 { font-size: 15px; }
    .inputs-evaluation-legend { font-size: 7px; gap: 5px; }
    .inputs-evaluation-legend span { padding: 3px 6px; }
    .formative-list { gap: 7px; }
    .formative-student {
        padding: 9px 9px 10px;
        border-radius: 13px;
    }
    .formative-student-name { margin-bottom: 7px; gap: 6px; }
    .formative-student-name span { font-size: 7px; }
    .formative-student-name strong { font-size: 9.5px; }
    .formative-grid { gap: 5px; }
    .formative-value,
    .formative-input {
        min-height: 45px;
        padding: 5px 3px;
        border-radius: 11px;
    }
    .formative-value small,
    .formative-input small { font-size: 6.5px; }
    .formative-value strong,
    .formative-input input { font-size: 11px; }
}

/* =========================================================
   INSUMOS · SUMATIVA + FINAL TRIMESTRAL · AJUSTE VISUAL
   ========================================================= */
.formative-grid {
    grid-template-columns: .92fr 1.16fr .92fr .92fr;
}

.formative-value,
.formative-input {
    min-height: 50px;
}

.formative-input input {
    min-height: 28px;
}

.sumative-list,
.final-list {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.sumative-student,
.final-student {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .035);
}

.sumative-grid {
    display: grid;
    grid-template-columns: 1fr 1.16fr 1fr 1fr 1fr;
    gap: 7px;
    align-items: stretch;
}

.sumative-grid > .formative-value,
.sumative-grid > .formative-input,
.final-grid > .formative-value,
.final-grid > .final-value {
    height: 100%;
    min-height: 50px;
}

.final-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr;
    gap: 7px;
    align-items: stretch;
}

.final-value {
    min-width: 0;
    min-height: 50px;
    padding: 6px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #f5f9ff;
}

.final-value small {
    color: var(--muted);
    font-size: 7px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .04em;
}

.final-value strong {
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.final-value.is-ok {
    border-color: #a7f3d0;
    background: #ecfdf5;
    box-shadow: inset 0 0 0 1px rgba(4, 120, 87, .03);
}

.final-value.is-ok strong {
    color: #047857;
}

.final-value.is-low {
    border-color: #fecaca;
    background: #fff1f2;
    box-shadow: inset 0 0 0 1px rgba(185, 28, 28, .03);
}

.final-value.is-low strong {
    color: #b91c1c;
}

.final-heading {
    margin-bottom: 0;
}

@media (max-width: 699px) {
    .formative-grid {
        grid-template-columns: .9fr 1.2fr .9fr .9fr;
        gap: 5px;
    }

    .formative-value,
    .formative-input,
    .sumative-grid > .formative-value,
    .sumative-grid > .formative-input,
    .final-grid > .formative-value,
    .final-grid > .final-value {
        min-height: 46px;
    }

    .formative-input input {
        min-height: 26px;
    }

    .sumative-list,
    .final-list {
        gap: 7px;
    }

    .sumative-student,
    .final-student {
        padding: 9px 9px 10px;
        border-radius: 13px;
    }

    .sumative-grid {
        grid-template-columns: .92fr 1.12fr .92fr .92fr .92fr;
        gap: 4px;
    }

    .sumative-grid .formative-value,
    .sumative-grid .formative-input {
        padding: 5px 2px;
        border-radius: 10px;
    }

    .sumative-grid .formative-value small,
    .sumative-grid .formative-input small {
        font-size: 6px;
    }

    .sumative-grid .formative-value strong,
    .sumative-grid .formative-input input {
        font-size: 10px;
    }

    .final-grid {
        grid-template-columns: .92fr .92fr 1.16fr;
        gap: 5px;
    }

    .final-value {
        padding: 5px 3px;
        border-radius: 11px;
    }

    .final-value small {
        font-size: 6.5px;
    }

    .final-value strong {
        font-size: 13px;
    }
}

/* =========================================================
   SGAP · UNIFORMIDAD DE CALIFICACIONES + PA + SP
   ========================================================= */
.formative-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.formative-grid > .formative-value,
.formative-grid > .formative-input,
.sumative-grid > .formative-value,
.sumative-grid > .formative-input,
.final-grid > .formative-value,
.final-grid > .final-value,
.academic-score {
    box-sizing: border-box;
    height: 60px;
    min-height: 60px;
}

.formative-input input {
    height: 28px;
    min-height: 28px;
}

.inputs-period-context-annual {
    margin-top: 4px;
}

.annual-heading {
    align-items: center;
}

.annual-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    font-size: 8px;
    font-weight: 850;
}

.annual-legend span,
.annual-status {
    border-radius: 999px;
}

.annual-legend span {
    padding: 4px 7px;
}

.annual-legend .is-approved,
.annual-status.is-approved {
    background: #ecfdf5;
    color: #047857;
}

.annual-legend .is-supplementary,
.annual-status.is-supplementary {
    background: #fff7ed;
    color: #b45309;
}

.annual-legend .is-failed,
.annual-status.is-failed {
    background: #fff1f2;
    color: #b91c1c;
}

.annual-status.is-pending {
    background: #f1f5f9;
    color: #64748b;
}

.annual-list,
.supplementary-list {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.annual-student,
.supplementary-student {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .035);
}

.annual-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    align-items: stretch;
}

.supplementary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    align-items: stretch;
    max-width: 520px;
}

.academic-score {
    min-width: 0;
    padding: 7px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    background: #f8fafc;
}

.academic-score small {
    color: var(--muted);
    font-size: 7px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .04em;
}

.academic-score strong,
.academic-score input {
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.academic-score.is-ok,
.academic-score.is-approved {
    border-color: #d1fae5;
    background: #f3fbf7;
}
.academic-score.is-ok strong,
.academic-score.is-approved strong { color: #047857; }

.academic-score.is-low,
.academic-score.is-failed {
    border-color: #fecdd3;
    background: #fff7f8;
}
.academic-score.is-low strong,
.academic-score.is-failed strong { color: #b91c1c; }

.academic-score.is-supplementary {
    border-color: #fed7aa;
    background: #fffaf3;
}
.academic-score.is-supplementary strong { color: #b45309; }

.academic-score.is-empty,
.academic-score.is-locked {
    border-color: #e2e8f0;
    background: #f8fafc;
}
.academic-score.is-empty strong,
.academic-score.is-locked strong { color: #94a3b8; }

.academic-score-final {
    border-width: 1.5px;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .045);
}

.academic-score-final strong {
    font-size: 16px;
}

.academic-score-input {
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.academic-score-input:focus-within {
    border-color: #93c5fd;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.academic-score-input input {
    width: 100%;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink-strong);
    text-align: center;
}

.annual-status {
    width: fit-content;
    margin: 8px 0 0;
    padding: 4px 8px;
    font-size: 8px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .025em;
}

.annual-notice {
    margin: 10px 0 0;
    padding: 9px 11px;
    border: 1px solid #dbeafe;
    border-radius: 11px;
    background: #f8fbff;
    color: #475569;
    font-size: 9px;
    line-height: 1.45;
    font-weight: 750;
}

@media (max-width: 699px) {
    .formative-grid,
    .annual-grid {
        gap: 5px;
    }

    .formative-grid > .formative-value,
    .formative-grid > .formative-input,
    .sumative-grid > .formative-value,
    .sumative-grid > .formative-input,
    .final-grid > .formative-value,
    .final-grid > .final-value,
    .academic-score {
        height: 56px;
        min-height: 56px;
    }

    .formative-value,
    .formative-input,
    .academic-score {
        padding: 6px 4px;
        border-radius: 11px;
    }

    .annual-student,
    .supplementary-student {
        padding: 9px;
        border-radius: 13px;
    }

    .annual-heading h2 {
        font-size: 14px;
    }

    .annual-legend {
        gap: 4px;
        font-size: 6.5px;
    }

    .annual-legend span {
        padding: 3px 5px;
    }

    .academic-score small {
        font-size: 6.5px;
    }

    .academic-score strong,
    .academic-score input {
        font-size: 11px;
    }

    .academic-score-final strong {
        font-size: 14px;
    }

    .supplementary-grid {
        max-width: none;
        gap: 5px;
    }

    .annual-status {
        margin-top: 7px;
        font-size: 7px;
        padding: 4px 7px;
    }
}

/* =========================================================
   PORTAL DE CONSULTA PARA REPRESENTANTES
   ========================================================= */

.consulta-body {
    min-height: 100svh;
    background:
        radial-gradient(circle at 50% -10%, rgba(37, 99, 235, .08), transparent 34rem),
        #f3f6fb;
}

.consulta-shell {
    width: 100%;
    min-height: 100svh;
    padding: 34px 18px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.consulta-card {
    width: min(100%, 820px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.consulta-header,
.consulta-student-head,
.consulta-meta-grid,
.consulta-subject-tabs,
.consulta-period-tabs,
.consulta-section-head,
.consulta-inputs-list,
.consulta-summary,
.consulta-annual-grid,
.consulta-sp-grid,
.consulta-status {
    margin-left: 28px;
    margin-right: 28px;
}

.consulta-header {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--line-soft);
}

.consulta-brand-mini {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.consulta-brand-mini strong {
    font-size: 25px;
    line-height: 1;
    letter-spacing: -1.4px;
    color: var(--ink-strong);
}

.consulta-brand-mini strong span {
    color: var(--blue);
}

.consulta-brand-mini small {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--muted);
}

.consulta-new-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--blue);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
    white-space: nowrap;
}

.consulta-new-link svg {
    width: 16px;
    height: 16px;
}

.consulta-student-head {
    padding: 22px 0 18px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.consulta-avatar {
    width: 54px;
    height: 54px;
    min-width: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #1d4ed8, #2563eb);
    color: #fff;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .22);
    font-size: 17px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .02em;
    aspect-ratio: 1 / 1;
}

.consulta-student-title {
    min-width: 0;
}

.consulta-student-title h1 {
    margin: 0 0 5px;
    color: var(--ink-strong);
    font-size: 17px;
    line-height: 1.2;
    font-weight: 900;
}

.consulta-student-title p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.5;
    font-weight: 750;
}

.consulta-meta-grid {
    padding: 14px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.consulta-meta-grid div {
    min-width: 0;
}

.consulta-meta-grid span,
.consulta-section-head span,
.consulta-input-row span,
.consulta-grade-box span {
    display: block;
    color: var(--muted-light);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .055em;
}

.consulta-meta-grid strong {
    display: block;
    margin-top: 4px;
    color: var(--ink-strong);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
}

.consulta-subject-tabs {
    padding-top: 14px;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

.consulta-subject-tabs::-webkit-scrollbar {
    display: none;
}

.consulta-subject-tabs a {
    min-width: 68px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: #fff;
    text-align: center;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
}

.consulta-subject-tabs a.is-active {
    border-color: #bfdbfe;
    background: var(--blue-soft);
    color: var(--blue);
}

.consulta-period-tabs {
    min-height: 56px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    border-bottom: 1px solid var(--line-soft);
}

.consulta-period-tabs a {
    position: relative;
    padding: 17px 4px 14px;
    color: var(--muted-light);
    text-align: center;
    font-size: 10px;
    font-weight: 900;
}

.consulta-period-tabs a.is-active {
    color: var(--blue);
}

.consulta-period-tabs a.is-active::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: var(--blue);
}

.consulta-section-head {
    padding: 20px 0 12px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-end;
}

.consulta-section-head h2 {
    margin: 4px 0 0;
    color: var(--ink-strong);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 900;
}

.consulta-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 8.5px;
    font-weight: 750;
    white-space: nowrap;
}

.consulta-inputs-list {
    display: grid;
    gap: 8px;
}

.consulta-input-row {
    min-height: 54px;
    padding: 10px 13px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: #fff;
}

.consulta-input-row div {
    min-width: 0;
}

.consulta-input-row strong {
    display: block;
    margin-top: 3px;
    color: #26364f;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 800;
}

.consulta-value,
.consulta-summary-row strong,
.consulta-final-row strong,
.consulta-grade-box strong {
    font-variant-numeric: tabular-nums;
}

.consulta-value {
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.consulta-value.is-missing {
    color: #b45309;
    font-size: 8.5px;
    letter-spacing: .02em;
}

.consulta-summary {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
}

.consulta-summary-group + .consulta-summary-group {
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.consulta-summary-group h3 {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .065em;
}

.consulta-summary-row,
.consulta-final-row {
    min-height: 29px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px dashed #d8e1ec;
}

.consulta-summary-row:last-child {
    border-bottom: 0;
}

.consulta-summary-row span,
.consulta-final-row span {
    color: #52627b;
    font-size: 9px;
    font-weight: 750;
}

.consulta-summary-row strong {
    font-size: 10px;
    font-weight: 900;
}

.consulta-final-row {
    margin-top: 14px;
    padding-top: 13px;
    min-height: 45px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.consulta-final-row span {
    color: var(--ink-strong);
    font-size: 10px;
    font-weight: 900;
}

.consulta-final-row strong {
    font-size: 18px;
    font-weight: 950;
}

.consulta-annual-grid,
.consulta-sp-grid {
    display: grid;
    gap: 10px;
}

.consulta-annual-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.consulta-sp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.consulta-grade-box {
    min-height: 78px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    text-align: center;
}

.consulta-grade-box.is-featured {
    border-color: #bfdbfe;
    background: var(--blue-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .035);
}

.consulta-grade-box strong {
    font-size: 16px;
    font-weight: 950;
}

.consulta-status {
    margin-top: 12px;
    min-height: 38px;
    padding: 10px 14px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .045em;
}

.consulta-status.is-approved {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
}

.consulta-status.is-warning {
    color: #a16207;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.consulta-status.is-failed {
    color: #dc2626;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}

.consulta-status.is-pending {
    color: var(--muted);
    background: #f8fafc;
    border: 1px solid var(--line);
}

.consulta-empty {
    padding: 22px 14px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--muted);
    background: #fbfdff;
    text-align: center;
    font-size: 9px;
    font-weight: 800;
}

.consulta-footer {
    margin-top: 28px;
    padding: 20px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    color: var(--muted-light);
    border-top: 1px solid var(--line-soft);
    text-align: center;
}

.consulta-footer strong {
    font-size: 8px;
    font-weight: 800;
}

.consulta-footer span {
    font-size: 7.5px;
    font-weight: 700;
}

.is-good {
    color: #059669 !important;
}

.is-low {
    color: #dc2626 !important;
}

.is-neutral {
    color: var(--ink) !important;
}

@media (max-width: 699px) {
    .consulta-shell {
        padding: 0;
        background: #fff;
    }

    .consulta-card {
        width: 100%;
        min-height: 100svh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .consulta-header,
    .consulta-student-head,
    .consulta-meta-grid,
    .consulta-subject-tabs,
    .consulta-period-tabs,
    .consulta-section-head,
    .consulta-inputs-list,
    .consulta-summary,
    .consulta-annual-grid,
    .consulta-sp-grid,
    .consulta-status {
        margin-left: 16px;
        margin-right: 16px;
    }

    .consulta-header {
        min-height: 68px;
    }

    .consulta-brand-mini strong {
        font-size: 22px;
    }

    .consulta-brand-mini small {
        display: none;
    }

    .consulta-new-link {
        font-size: 8px;
    }

    .consulta-student-head {
        padding: 18px 0 15px;
        gap: 11px;
    }

    .consulta-avatar {
        width: 48px;
        height: 48px;
        min-width: 48px;
        flex-basis: 48px;
        font-size: 15px;
    }

    .consulta-student-title h1 {
        font-size: 13px;
    }

    .consulta-student-title p {
        font-size: 8px;
    }

    .consulta-meta-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 12px 0;
    }

    .consulta-meta-grid span {
        font-size: 6.5px;
    }

    .consulta-meta-grid strong {
        font-size: 8.5px;
    }

    .consulta-period-tabs {
        min-height: 50px;
    }

    .consulta-period-tabs a {
        padding: 15px 2px 12px;
        font-size: 9px;
    }

    .consulta-section-head {
        padding-top: 16px;
        align-items: flex-start;
    }

    .consulta-section-head h2 {
        font-size: 12px;
    }

    .consulta-section-head p {
        font-size: 7.5px;
    }

    .consulta-input-row {
        min-height: 50px;
        padding: 9px 11px;
        gap: 9px;
    }

    .consulta-input-row strong {
        font-size: 9px;
    }

    .consulta-value {
        font-size: 10px;
    }

    .consulta-value.is-missing {
        max-width: 84px;
        text-align: right;
        white-space: normal;
        line-height: 1.15;
    }

    .consulta-summary {
        padding: 13px 12px;
    }

    .consulta-summary-row span,
    .consulta-final-row span {
        font-size: 8px;
    }

    .consulta-summary-row strong {
        font-size: 9px;
    }

    .consulta-final-row strong {
        font-size: 17px;
    }

    .consulta-annual-grid {
        gap: 7px;
    }

    .consulta-grade-box {
        min-height: 68px;
        padding: 9px 5px;
        border-radius: 12px;
    }

    .consulta-grade-box strong {
        font-size: 13px;
    }

    .consulta-status {
        font-size: 8px;
    }
}

@media (max-width: 390px) {
    .consulta-header,
    .consulta-student-head,
    .consulta-meta-grid,
    .consulta-subject-tabs,
    .consulta-period-tabs,
    .consulta-section-head,
    .consulta-inputs-list,
    .consulta-summary,
    .consulta-annual-grid,
    .consulta-sp-grid,
    .consulta-status {
        margin-left: 12px;
        margin-right: 12px;
    }

    .consulta-meta-grid {
        gap: 5px;
    }

    .consulta-meta-grid strong {
        font-size: 8px;
    }

    .consulta-annual-grid {
        gap: 5px;
    }

    .consulta-grade-box {
        min-height: 64px;
        padding-left: 3px;
        padding-right: 3px;
    }
}

/* =========================================================
   SGAP · CIERRE SP + PONDERADOS EN CONSULTA
   ========================================================= */
.supplementary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 720px;
}

.consulta-summary-row.is-weighted {
    min-height: 36px;
    margin-top: 3px;
    padding: 4px 8px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #f8fbff;
}

.consulta-summary-row.is-weighted span {
    color: var(--ink-strong);
    font-size: 10px;
    font-weight: 900;
}

.consulta-summary-row.is-weighted strong {
    font-size: 12px;
    font-weight: 950;
}

@media (max-width: 699px) {
    .supplementary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: none;
        gap: 5px;
    }

    .consulta-summary-row.is-weighted {
        min-height: 34px;
        padding: 4px 7px;
    }

    .consulta-summary-row.is-weighted span {
        font-size: 8.8px;
    }

    .consulta-summary-row.is-weighted strong {
        font-size: 10.5px;
    }
}

/* =========================================================
   INFORMES · CENTRO DE CONSULTA Y SÁBANAS
   ========================================================= */
.reports-page{display:grid;gap:20px}.reports-heading{display:flex;align-items:flex-start;gap:12px}.reports-heading h1{margin:2px 0 4px;color:#0b2a55;font-size:clamp(1.45rem,2vw,2rem)}.reports-context{margin:0;color:#64748b;font-size:.84rem;font-weight:700}.reports-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.report-hub-card{background:#fff;border:1px solid #dbe5f1;border-radius:16px;padding:16px;box-shadow:0 8px 22px rgba(15,42,85,.045);display:flex;flex-direction:column;min-width:0}.report-hub-head{display:flex;align-items:center;gap:11px;margin-bottom:13px}.report-hub-icon{width:38px;height:38px;border-radius:12px;background:#eef5ff;color:#2563eb;display:grid;place-items:center;flex:0 0 auto}.report-hub-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.report-hub-head h2{margin:0;color:#0b2a55;font-size:.92rem}.report-hub-head p{margin:3px 0 0;color:#7b8ca5;font-size:.67rem;font-weight:700}.report-controls{display:grid;gap:6px}.report-controls label{font-size:.63rem;font-weight:800;color:#64748b}.report-controls select,.report-search-wrap input{width:100%;border:1px solid #d7e0ec;border-radius:10px;background:#fff;color:#132f57;min-height:40px;padding:0 11px;font:inherit;font-size:.82rem;font-weight:700;outline:none}.report-controls select:focus,.report-search-wrap input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.10)}.report-term-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.report-term-tabs a{text-decoration:none;text-align:center;padding:8px 4px;border-radius:9px;background:#eef4fb;color:#6b7d98;font-size:.72rem;font-weight:900}.report-term-tabs a.is-active{background:#dbeafe;color:#1d4ed8;box-shadow:inset 0 0 0 1px #bfdbfe}.report-actions{display:grid;grid-template-columns:1.25fr .8fr .8fr;gap:7px;margin-top:13px}.report-actions button{border:1px solid #d5deea;background:#fff;color:#31496d;border-radius:9px;min-height:36px;padding:0 8px;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer}.report-actions button:hover{border-color:#a9b9cd;background:#f8fbff}.report-actions button.report-action-primary{background:#2563eb;color:#fff;border-color:#2563eb}.report-actions svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.report-search-wrap{position:relative}.report-search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:#7890b2;stroke-width:1.8}.report-search-wrap input{padding-left:36px}.report-student-list{margin-top:8px;max-height:260px;overflow:auto;border-top:1px solid #edf1f6}.report-student-row{width:100%;border:0;border-bottom:1px solid #edf1f6;background:transparent;display:grid;grid-template-columns:32px minmax(0,1fr) 18px;align-items:center;gap:9px;padding:9px 2px;cursor:pointer;text-align:left;color:#19345d}.report-student-row:hover{background:#f8fbff}.report-student-row>svg{width:16px;height:16px;fill:none;stroke:#8ba0bc;stroke-width:1.8}.report-student-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e7f0ff;color:#2563eb;font-size:.64rem;font-weight:900;aspect-ratio:1/1;flex:0 0 auto}.report-student-avatar.large{width:46px;height:46px;font-size:.82rem}.report-student-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.73rem;font-weight:800}.report-preview-block{scroll-margin-top:18px;display:grid;gap:10px}.report-preview-title{display:flex;align-items:end;justify-content:space-between;gap:12px}.report-preview-title span{display:block;color:#2563eb;font-size:.62rem;font-weight:900;letter-spacing:.08em}.report-preview-title h2{margin:2px 0 0;color:#0b2a55;font-size:1rem}.report-preview-title>strong{font-size:.78rem;color:#48617f}.report-paper{background:#fff;border:1px solid #d8e1ec;border-radius:10px;padding:20px;box-shadow:0 12px 28px rgba(15,42,85,.06)}.report-paper-head{text-align:center;color:#102a4f;margin-bottom:13px}.report-paper-head h3{margin:0 0 3px;font-size:.92rem}.report-paper-head strong{font-size:.72rem}.report-paper-head p{margin:3px 0 0;font-size:.62rem;font-weight:700}.report-table-scroll{overflow:auto;max-width:100%;border:1px solid #cfd8e4}.institutional-table{border-collapse:collapse;width:max-content;min-width:100%;font-size:.62rem;color:#183153;background:#fff}.institutional-table th,.institutional-table td{border:1px solid #cfd8e4;padding:4px 5px;text-align:center;white-space:nowrap}.institutional-table th{background:#f2f6fb;color:#27466f;font-weight:900}.institutional-table .student-col{text-align:left;min-width:210px;position:sticky;left:0;background:#fff;z-index:1}.institutional-table th.student-col{background:#eef4fa;z-index:2}.institutional-table td.is-low{color:#c81e1e;font-weight:800;background:#fff8f8}.institutional-table td.is-good{color:#00835d;font-weight:800;background:#f6fffb}.institutional-table td.is-neutral{color:#183153}.institutional-table td.final-cell{font-weight:900}.report-legend{text-align:center;color:#5e718c;font-size:.58rem;font-weight:700;margin-top:10px}.report-signatures{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px;color:#1c355b;font-size:.58rem;font-weight:800;text-align:center}.report-signatures span{border-top:1px solid #8090a7;padding-top:6px}.student-sheet-backdrop{position:fixed;inset:0;background:rgba(12,28,52,.32);z-index:1190;opacity:0;transition:opacity .18s ease}.student-sheet-backdrop.is-open{opacity:1}.student-bottom-sheet{position:fixed;z-index:1200;left:50%;bottom:0;transform:translate(-50%,105%);width:min(760px,calc(100% - 28px));max-height:min(82vh,760px);background:#fff;border:1px solid #d8e3ef;border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -20px 50px rgba(10,35,70,.18);transition:transform .2s ease;overflow:hidden}.student-bottom-sheet.is-open{transform:translate(-50%,0)}.sheet-open{overflow:hidden}.student-sheet-handle{width:44px;height:4px;border-radius:99px;background:#c7d2e2;margin:8px auto 6px}.student-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 18px 13px;border-bottom:1px solid #e7edf5}.student-sheet-identity{display:flex;align-items:center;gap:11px;min-width:0}.student-sheet-identity p{margin:0;color:#2563eb;font-size:.58rem;font-weight:900}.student-sheet-identity h2{margin:2px 0;color:#102a4f;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.student-sheet-identity>div>span{display:block;color:#7386a0;font-size:.64rem;font-weight:700}.student-sheet-close{border:0;background:#f3f6fa;color:#60748f;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}.student-sheet-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}.student-sheet-main-tabs{display:grid;grid-template-columns:1fr 1fr;padding:9px 18px 0;gap:6px}.student-sheet-main-tabs button,.student-sheet-term-tabs button{border:0;border-radius:9px;background:#f1f5fa;color:#667a96;min-height:35px;font-size:.68rem;font-weight:900;cursor:pointer}.student-sheet-main-tabs button.is-active,.student-sheet-term-tabs button.is-active{background:#e1edff;color:#1d4ed8}.student-sheet-body{overflow:auto;max-height:calc(82vh - 150px);padding:12px 18px 22px}.student-sheet-term-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:12px}.sheet-attendance-card{border:1px solid #e0e8f1;border-radius:12px;padding:10px;margin-bottom:8px}.sheet-attendance-card>strong{display:block;color:#17355e;font-size:.7rem;margin-bottom:8px}.sheet-attendance-card>div{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.sheet-attendance-card span{background:#f5f8fc;border-radius:9px;padding:7px 4px;text-align:center;color:#70819a;font-size:.56rem;font-weight:900}.sheet-attendance-card b{display:block;color:#18375f;font-size:.84rem;margin-top:2px}.sheet-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px dashed #dbe3ed;padding:9px 2px;color:#526987;font-size:.68rem;font-weight:700}.sheet-row strong{font-size:.8rem}.sheet-row.is-final{border-bottom:0;margin-top:4px;padding:12px 0}.sheet-row.is-final span,.sheet-row.is-final strong{font-size:.86rem;font-weight:900}.sheet-aportes,.sheet-summary{border:1px solid #e2e9f2;border-radius:12px;padding:2px 10px;margin-bottom:10px}.sheet-grade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.sheet-grade-grid.three{grid-template-columns:repeat(3,1fr)}.sheet-grade-grid>div{border:1px solid #dce6f1;border-radius:11px;padding:10px 5px;text-align:center;background:#f8fbff}.sheet-grade-grid>div.featured{background:#eef5ff;border-color:#c9dcfb}.sheet-grade-grid span{display:block;color:#7185a1;font-size:.58rem;font-weight:900}.sheet-grade-grid strong{display:block;margin-top:3px;font-size:.9rem}.sheet-status{margin-top:10px;border-radius:10px;background:#f1f5f9;color:#27466f;text-align:center;padding:9px;font-size:.68rem;font-weight:900}.sheet-loading,.sheet-empty{padding:24px 10px;text-align:center;color:#7a8da7;font-size:.72rem;font-weight:800}.sheet-empty.is-error{color:#b91c1c}.student-bottom-sheet .is-low{color:#c81e1e}.student-bottom-sheet .is-good{color:#00835d}.student-bottom-sheet .is-neutral{color:#183153}

@media (max-width: 980px){.reports-hub-grid{grid-template-columns:1fr}.report-student-list{max-height:220px}.report-paper{padding:14px}.institutional-table .student-col{min-width:180px}}
@media (max-width: 640px){.reports-page{gap:14px}.reports-heading{gap:8px}.reports-heading h1{font-size:1.25rem}.reports-context{font-size:.72rem}.report-hub-card{padding:12px;border-radius:14px}.report-hub-icon{width:34px;height:34px;border-radius:10px}.report-hub-head{margin-bottom:10px}.report-hub-head h2{font-size:.82rem}.report-hub-head p{font-size:.6rem}.report-actions{grid-template-columns:1fr 1fr 1fr;gap:5px}.report-actions button{min-height:34px;font-size:.61rem;padding:0 5px}.report-preview-title{align-items:center}.report-paper{padding:9px;border-radius:8px}.report-paper-head h3{font-size:.75rem}.report-paper-head strong{font-size:.62rem}.report-paper-head p{font-size:.54rem}.institutional-table{font-size:.56rem}.institutional-table th,.institutional-table td{padding:3px 4px}.institutional-table .student-col{min-width:150px}.report-signatures{gap:12px;margin-top:26px}.student-bottom-sheet{width:100%;max-height:88vh;border-radius:20px 20px 0 0}.student-sheet-header{padding:7px 12px 11px}.student-sheet-identity h2{font-size:.82rem}.student-sheet-identity>div>span{font-size:.57rem}.student-sheet-main-tabs{padding:8px 12px 0}.student-sheet-body{padding:10px 12px 18px;max-height:calc(88vh - 140px)}.student-sheet-term-tabs{gap:4px}.student-sheet-term-tabs button{min-height:32px;font-size:.62rem}.sheet-attendance-card>div{gap:4px}.sheet-grade-grid{gap:4px}.sheet-grade-grid>div{padding:8px 3px}.sheet-grade-grid strong{font-size:.78rem}.report-student-row{padding:8px 2px}.report-student-name{font-size:.69rem}}

@media print{.sidebar,.app-header,.reports-heading,.course-context-navigation,.reports-hub-grid,.report-preview-title,.student-bottom-sheet,.student-sheet-backdrop{display:none!important}.content{padding:0!important}.report-preview-block{display:none!important}.report-preview-block.print-active{display:block!important}.report-paper{border:0;box-shadow:none;padding:0}.report-table-scroll{overflow:visible;border:0}.institutional-table{width:100%;font-size:7px}.institutional-table .student-col{position:static}.report-signatures{margin-top:25px}}

/* =========================================================
   INFORMES · AJUSTE RESPONSIVE + VISTA PREVIA DE IMPRESIÓN
   ========================================================= */
.reports-page{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.reports-page *{box-sizing:border-box}
.reports-heading,.reports-hub-grid,.report-hub-card{min-width:0;max-width:100%}
#rendimiento-academico{scroll-margin-top:16px}
.report-control-label{display:block;margin:0 0 6px;color:#64748b;font-size:.63rem;font-weight:800}
.report-selection-note{margin:9px 0 0;color:#7b8ca5;font-size:.58rem;line-height:1.45;font-weight:700}
.report-actions.report-actions-clean{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr)}
.report-actions.report-actions-clean button{width:100%;min-width:0}
.report-template-source[hidden]{display:none!important}

.report-preview-modal[hidden]{display:none!important}
.report-preview-modal{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:18px;opacity:0;transition:opacity .16s ease}
.report-preview-modal.is-open{opacity:1}
.report-preview-backdrop{position:absolute;inset:0;background:rgba(9,25,48,.48);backdrop-filter:blur(2px)}
.report-preview-dialog{position:relative;z-index:1;width:min(1180px,calc(100vw - 36px));height:min(90vh,860px);min-width:0;background:#f7f9fc;border:1px solid #dbe4ef;border-radius:18px;box-shadow:0 28px 80px rgba(7,28,58,.24);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.report-preview-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;background:#fff;border-bottom:1px solid #e4ebf3}
.report-preview-modal-head p{margin:0;color:#2563eb;font-size:.58rem;font-weight:900;letter-spacing:.08em}
.report-preview-modal-head h2{margin:2px 0 0;color:#0b2a55;font-size:.98rem}
.report-preview-close{width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:#f1f5f9;color:#5e718c;cursor:pointer;flex:0 0 auto}
.report-preview-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.report-preview-modal-body{min-width:0;min-height:0;overflow:auto;padding:16px}
.report-preview-modal-body .report-paper{width:max-content;min-width:100%;max-width:none;margin:0 auto;box-shadow:none}
.report-preview-modal-body .report-table-scroll{overflow:visible;border:1px solid #cfd8e4}
.report-preview-modal-body .institutional-table{width:max-content;min-width:100%}
.report-preview-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:11px 16px;background:#fff;border-top:1px solid #e4ebf3}
.report-preview-modal-actions .button{min-height:38px}
.report-preview-open{overflow:hidden}

.sheet-selector{display:grid;gap:6px;margin-bottom:10px}
.sheet-selector label{color:#64748b;font-size:.6rem;font-weight:900}
.sheet-selector select{width:100%;min-height:38px;border:1px solid #d7e0ec;border-radius:10px;background:#fff;color:#17355e;padding:0 10px;font:inherit;font-size:.72rem;font-weight:800;outline:none}
.sheet-attendance-detail{border:1px solid #e2e9f2;border-radius:12px;overflow:hidden}
.sheet-attendance-detail-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-bottom:1px solid #edf1f6;color:#60748f;font-size:.68rem;font-weight:700}
.sheet-attendance-detail-row:last-child{border-bottom:0}
.sheet-attendance-detail-row strong{color:#17355e;font-size:.67rem}

@media (max-width:980px){
  .report-preview-dialog{width:calc(100vw - 24px);height:92vh}
  .report-preview-modal-body{padding:12px}
}
@media (max-width:640px){
  body:has(.reports-page){max-width:100%}
  .reports-page{padding-inline:6px;gap:14px}
  .reports-hub-grid{width:100%;gap:12px}
  .report-hub-card{width:100%;margin:0;border-radius:14px;padding:14px}
  .report-actions.report-actions-clean{grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:6px}
  .report-actions.report-actions-clean button{min-height:38px;font-size:.64rem}
  .report-selection-note{font-size:.56rem}
  .report-preview-modal{padding:6px}
  .report-preview-dialog{width:calc(100vw - 12px);height:calc(100vh - 12px);border-radius:16px}
  .report-preview-modal-head{padding:10px 12px}
  .report-preview-modal-head h2{font-size:.82rem}
  .report-preview-modal-body{padding:8px;overflow:auto;-webkit-overflow-scrolling:touch}
  .report-preview-modal-body .report-paper{padding:10px;min-width:760px}
  .report-preview-modal-actions{padding:9px 10px;gap:6px}
  .report-preview-modal-actions .button{flex:1;min-width:0;padding-inline:8px;font-size:.68rem}
  .report-student-list{max-height:230px}
  .student-bottom-sheet{left:6px;right:6px;width:auto;max-width:none;transform:translateY(105%);border-radius:18px 18px 0 0}
  .student-bottom-sheet.is-open{transform:translateY(0)}
  .student-sheet-term-tabs{grid-template-columns:repeat(5,minmax(0,1fr));width:100%}
  .student-sheet-term-tabs button{min-width:0;padding-inline:2px}
  .sheet-row{min-width:0}
  .sheet-row span{min-width:0;overflow-wrap:anywhere}
}

/* =========================================================
   INFORMES · AJUSTE FINAL SEGÚN REFERENCIA MÓVIL
   ========================================================= */
.report-actions.report-actions-clean{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.report-actions.report-actions-clean button{min-height:40px}
.report-student-list[hidden]{display:none!important}
.report-search-wrap input{text-transform:uppercase}

/* Vista previa como documento completo, sin ensanchar la página principal. */
.report-preview-modal{position:fixed;inset:0;z-index:1500;padding:0;background:#4b5054;opacity:0;transition:opacity .16s ease;display:block}
.report-preview-modal.is-open{opacity:1}
.report-preview-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:#4b5054;box-shadow:none;display:grid;grid-template-rows:44px minmax(0,1fr);overflow:hidden}
.report-preview-modal-head{height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;background:#30353a;border:0;color:#fff}
.report-preview-modal-title-wrap{display:flex;align-items:center;gap:6px;min-width:0}
.report-preview-doc-icon{font-size:.76rem;color:#e8edf3}
.report-preview-modal-head h2{margin:0;color:#fff;font-size:.68rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-preview-toolbar-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.report-preview-toolbar-button{border:1px solid rgba(255,255,255,.12);border-radius:5px;background:#555b62;color:#fff;min-height:30px;padding:0 10px;font-size:.62rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.report-preview-toolbar-button.is-primary{background:#2563eb;border-color:#2563eb}
.report-preview-toolbar-button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.report-preview-modal-body{min-width:0;min-height:0;overflow:auto;padding:28px 14px 48px;background:#4b5054;display:flex;align-items:flex-start;justify-content:center;-webkit-overflow-scrolling:touch}
.report-preview-stage{position:relative;flex:0 0 auto;margin:0 auto}
.report-preview-stage .report-paper{position:absolute;left:0;top:0;margin:0;background:#fff;border:0;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,.35);padding:28px}
.report-preview-stage .report-table-scroll{overflow:visible;border:1px solid #111}
.report-preview-stage .institutional-table{width:max-content;min-width:100%;font-size:7px;color:#111}
.report-preview-stage .institutional-table th,.report-preview-stage .institutional-table td{border-color:#111;padding:3px 4px}
.report-preview-stage .institutional-table th{background:#fff;color:#111}
.report-preview-stage .institutional-table .student-col{position:static;background:#fff;min-width:210px}
.report-preview-stage .report-paper-head{color:#111;margin-bottom:12px}
.report-preview-stage .report-paper-head h3{font-size:13px}
.report-preview-stage .report-paper-head strong{font-size:10px}
.report-preview-stage .report-paper-head p{font-size:8px}
.report-preview-stage .report-legend{color:#111;font-size:7px}
.report-preview-stage .report-signatures{color:#111;font-size:7px}
.report-preview-open{overflow:hidden!important}

/* Consulta individual: resultados solo después de escribir. */
.report-individual-card .report-student-list{margin-top:8px;border:1px solid #e4ebf3;border-radius:12px;max-height:210px;overflow:auto;padding:0 8px;background:#fff}
.report-student-row:last-child{border-bottom:0}
.student-sheet-term-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:640px){
  body:has(.reports-page){width:100%;max-width:100%}
  .content:has(.reports-page){min-width:0;max-width:100%;padding-left:0!important;padding-right:0!important}
  .reports-page{width:100%;max-width:100%;padding:0 14px 18px!important;gap:14px}
  .reports-heading{padding:0 2px}
  .reports-hub-grid{width:100%;max-width:100%;gap:14px}
  .report-hub-card{width:100%;max-width:100%;margin:0;border-radius:16px;padding:16px;overflow:hidden}
  .report-actions.report-actions-clean{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .report-actions.report-actions-clean button{min-height:42px;font-size:.68rem}
  .report-preview-modal-body{padding:28px 8px 48px}
  .report-preview-modal-head{padding:6px 8px}
  .report-preview-modal-head h2{font-size:.58rem;max-width:46vw}
  .report-preview-toolbar-button{min-height:29px;padding:0 8px;font-size:.56rem}
  .student-bottom-sheet{left:0;right:0;width:100%;max-width:none;max-height:90dvh;border-radius:22px 22px 0 0;transform:translateY(105%)}
  .student-bottom-sheet.is-open{transform:translateY(0)}
  .student-sheet-body{max-height:calc(90dvh - 142px)}
  .student-sheet-term-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== INFORMES · AJUSTE RESPONSIVO Y SÁBANAS 2026-09-11 ===== */
.attendance-day-head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1;white-space:normal}
.attendance-day-head span{font-size:.94em;font-weight:900}
.attendance-day-head strong{font-size:1em;font-weight:900}
.attendance-sheet .attendance-day-col{width:26px;min-width:26px;max-width:26px;padding:2px!important}
.attendance-sheet th:first-child,.attendance-sheet td:first-child{width:28px;min-width:28px;max-width:28px}

/* La hoja de vista previa usa un ancho de documento controlado; no el ancho natural infinito de la tabla. */
.report-preview-stage .report-paper-attendance{width:1120px!important;min-width:1120px!important;max-width:1120px!important}
.report-preview-stage .report-paper-performance{width:1240px!important;min-width:1240px!important;max-width:1240px!important}
.report-preview-stage .attendance-sheet,.report-preview-stage .performance-sheet{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed}
.report-preview-stage .attendance-sheet{font-size:6.7px!important}
.report-preview-stage .attendance-sheet th,.report-preview-stage .attendance-sheet td{padding:2px 2px!important;line-height:1.08}
.report-preview-stage .attendance-sheet .student-col{width:205px!important;min-width:205px!important;max-width:205px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-preview-stage .attendance-sheet th:nth-last-child(-n+5),.report-preview-stage .attendance-sheet td:nth-last-child(-n+5){width:28px!important;min-width:28px!important;max-width:28px!important}

.report-preview-stage .performance-sheet{font-size:7px!important}
.report-preview-stage .performance-sheet th,.report-preview-stage .performance-sheet td{padding:2px 2px!important;line-height:1.08}
.report-preview-stage .performance-sheet .number-col,.report-preview-stage .performance-sheet th:first-child,.report-preview-stage .performance-sheet td:first-child{width:28px!important}
.report-preview-stage .performance-sheet .student-col{width:210px!important;min-width:210px!important;max-width:210px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-preview-stage .performance-sheet .performance-ap-col{width:43px!important}
.report-preview-stage .performance-sheet .performance-result-col{width:49px!important}
.compact-head{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:1px;white-space:normal}
.compact-head small{display:block;font-size:.82em;font-weight:900;line-height:1}

/* Vista previa grande y legible en PC, escalada al ancho útil en móvil. */
.report-preview-modal-body{overflow:auto!important}
.report-preview-stage{margin:0 auto!important}
@media (min-width: 900px){
  .report-preview-modal-body{padding:24px 24px 44px!important}
}
@media (max-width: 899px){
  .report-preview-modal-body{padding:16px 8px 36px!important}
}

/* Resultados de búsqueda: ocultos hasta escribir y visibles de forma inequívoca al coincidir. */
.report-student-list[hidden]{display:none!important}
.report-student-row[hidden]{display:none!important}
.report-student-row.is-match{display:grid!important}

/* El hub se adapta sin miniaturizar en PC y se apila limpio en móvil. */
@media (min-width: 1180px){
  .reports-hub-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important;gap:18px!important}
  .report-hub-card{padding:18px!important}
}
@media (min-width: 761px) and (max-width: 1179px){
  .reports-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .report-individual-card{grid-column:1/-1}
}
@media (max-width: 760px){
  .reports-hub-grid{grid-template-columns:1fr!important}
  .reports-page{padding-inline:14px!important}
  .report-hub-card{padding:15px!important}
}

/* INFORMES: selección explícita y consulta individual por trimestre */
.report-actions button:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}

.report-term-tabs a:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px}
.student-sheet-term-selector{padding:10px 16px 0;background:#fff;border-bottom:1px solid #e4ebf3}
.student-sheet-term-selector>span{display:block;margin-bottom:7px;color:#60738f;font-size:.62rem;font-weight:900;letter-spacing:.04em}
.student-sheet-term-selector .student-sheet-term-tabs{margin:0 0 10px}
.sheet-term-range{margin:0 0 8px;color:#71839c;font-size:.66rem;font-weight:800}
@media (max-width:760px){
  .student-sheet-term-selector{padding:9px 12px 0}
  .student-sheet-term-selector>span{font-size:.58rem}
}

/* =========================================================
   VISIBILIDAD DE CONSULTA · CALENDARIO · ENTORNO ACTIVO
   ========================================================= */
.environment {
    min-width: 0;
    flex: 1 1 auto;
}
.environment strong,
.environment small {
    display: block;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
.environment strong {
    color: #0b2a55;
    font-size: 13px;
    line-height: 1.22;
    font-weight: 850;
}
.environment small {
    margin-top: 2px;
    color: #6b7d98;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 750;
}

.publication-card {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15,42,85,.045);
}
.publication-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.publication-card-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eef5ff;
    color: #2563eb;
}
.publication-card-icon svg { width: 21px; height: 21px; }
.publication-card-head h2 {
    margin: 2px 0 4px;
    color: #0b2a55;
    font-size: 16px;
}
.publication-card-head p:last-child {
    margin: 0;
    color: #71829a;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 700;
}
.publication-context {
    margin: 14px 0 10px;
    padding: 10px 12px;
    border-radius: 11px;
    background: #f7faff;
    border: 1px solid #e6edf6;
}
.publication-context strong,
.publication-context span { display: block; }
.publication-context strong {
    color: #17355e;
    font-size: 11px;
    line-height: 1.3;
}
.publication-context span {
    margin-top: 2px;
    color: #71829a;
    font-size: 9px;
    font-weight: 800;
}
.publication-switch-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
.publication-switch-item {
    min-width: 0;
    min-height: 58px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #dfe7f1;
    border-radius: 12px;
    background: #fbfdff;
}
.publication-switch-item > div { min-width: 0; }
.publication-switch-item strong,
.publication-switch-item span { display: block; }
.publication-switch-item strong {
    color: #17355e;
    font-size: 11px;
    font-weight: 900;
}
.publication-switch-item > div > span {
    margin-top: 2px;
    color: #7b8da5;
    font-size: 7px;
    line-height: 1.2;
    font-weight: 900;
}
.publication-switch {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
}
.publication-switch-track {
    width: 42px;
    height: 24px;
    padding: 3px;
    display: block;
    border-radius: 999px;
    background: #d9e1eb;
    box-shadow: inset 0 0 0 1px rgba(71,85,105,.08);
    transition: background .18s ease, box-shadow .18s ease;
}
.publication-switch-track i {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15,23,42,.18);
    transition: transform .18s ease;
}
.publication-switch.is-on .publication-switch-track {
    background: #2563eb;
    box-shadow: inset 0 0 0 1px rgba(29,78,216,.15);
}
.publication-switch.is-on .publication-switch-track i { transform: translateX(18px); }
.publication-switch:focus-visible .publication-switch-track { box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
.publication-help {
    margin: 10px 0 0;
    color: #7a8ca5;
    font-size: 8px;
    line-height: 1.45;
    font-weight: 750;
}

.sgap-toast {
    position: fixed;
    z-index: 2000;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 430px);
    min-height: 46px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid #dbe6f1;
    box-shadow: 0 14px 38px rgba(15,42,85,.16);
    color: #17355e;
    font-size: 10px;
    font-weight: 900;
    transition: opacity .2s ease, transform .2s ease;
}
.sgap-toast svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sgap-toast.is-success svg { color: #059669; }
.sgap-toast.is-error svg { color: #dc2626; }
.sgap-toast.is-hiding { opacity: 0; transform: translate(-50%, -8px); }

.consulta-period-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.consulta-period-tabs a svg {
    width: 10px;
    height: 10px;
    stroke-width: 2;
}
.consulta-period-tabs a.is-locked {
    color: #9aa8ba;
    background: #fbfcfe;
}
.consulta-period-tabs a.is-locked.is-active { color: #74849a; }
.consulta-period-tabs a.is-locked.is-active::after { background: #cbd5e1; }
.consulta-publication-locked {
    margin: 26px auto 14px;
    max-width: 430px;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid #dfe7f1;
    border-radius: 16px;
    background: #fbfdff;
}
.consulta-publication-lock-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #eef4fb;
    color: #60748f;
}
.consulta-publication-lock-icon svg { width: 24px; height: 24px; }
.consulta-publication-locked strong {
    display: block;
    color: #17355e;
    font-size: 11px;
    line-height: 1.4;
}
.consulta-publication-locked p {
    margin: 7px auto 0;
    color: #7b8da5;
    font-size: 9px;
    line-height: 1.5;
    font-weight: 700;
}

@media (max-width: 820px) {
    .publication-switch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
    .header { align-items: flex-start; min-height: 72px; }
    .environment { padding-top: 1px; }
    .environment strong { font-size: 11px; line-height: 1.18; }
    .environment small { font-size: 8.5px; }
    .environment-button { align-self: center; }
    .publication-card { margin-top: 14px; padding: 14px; }
    .publication-card-head h2 { font-size: 14px; }
    .publication-switch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .publication-switch-item { min-height: 54px; }
    .consulta-period-tabs a { flex-direction: column; gap: 2px; }
}
@media (max-width: 390px) {
    .publication-switch-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
    .publication-switch-item { padding: 8px; }
    .publication-switch-track { width: 38px; height: 22px; }
    .publication-switch-track i { width: 16px; height: 16px; }
    .publication-switch.is-on .publication-switch-track i { transform: translateX(16px); }
}


/* Cierre operativo: resultados académicos incompletos no se representan como cero. */
.formative-value.is-pending,
.final-value.is-pending {
    background: #f8fafc;
    border-color: #d7e0ea;
    color: #64748b;
}
.formative-value.is-pending strong,
.final-value.is-pending strong {
    color: #64748b;
}


/* =========================================================
   CIERRE UX: ASISTENCIA / DRAWER / MODAL RESPONSIVO
   ========================================================= */
.attendance-alert-dialog {
    width: min(100%, 480px);
    text-align: left;
}

/* =========================================================
   SEGURIDAD DE LA CUENTA ADMINISTRATIVA
   ========================================================= */
.security-body { overflow-x: hidden; }
.security-access-shell {
    width: 100%;
    min-height: 100svh;
    padding: 24px 16px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at top left, #eaf3ff, transparent 42%), #f5f8fc;
}
.security-access-card,
.security-card {
    width: min(100%, 520px);
    padding: 32px;
}
.security-card { margin: 0 auto; }
.security-access-card h1 { margin: 0 0 10px; color: #0b2a55; font-size: 24px; }
.security-lock {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #eaf3ff;
    color: var(--blue);
}
.security-lock svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.security-intro { margin: 0 0 22px; color: var(--muted); font-size: 11px; line-height: 1.55; font-weight: 700; }
.security-form { display: grid; gap: 9px; }
.security-form label { margin-top: 7px; color: #334155; font-size: 10px; font-weight: 850; }
.security-form input {
    width: 100%;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}
.security-form input:focus { outline: 3px solid rgba(37,99,235,.12); border-color: var(--blue); }
.security-form .button { width: 100%; margin-top: 10px; }
.security-help { margin: 3px 0 0; color: #71829a; font-size: 9px; line-height: 1.5; font-weight: 700; }
.security-back { display: inline-block; margin-bottom: 22px; color: var(--blue); font-size: 10px; font-weight: 850; }
.security-logout { margin-top: 18px; text-align: center; }
.security-logout .text-link { border: 0; background: transparent; cursor: pointer; }
@media (max-width: 430px) {
    .security-access-shell { padding: 14px; align-items: center; }
    .security-access-card, .security-card { padding: 22px 18px; border-radius: 16px; }
    .security-access-card h1 { font-size: 20px; }
    .security-form input { min-height: 50px; }
}

.attendance-alert-dialog .dialog-actions {
    justify-content: center;
}

.attendance-alert-dialog .dialog-actions .button {
    min-width: 150px;
}

@media (max-width: 699px) {
    .app-shell.menu-open .inputs-save-bar,
    .app-shell.menu-open .attendance-save-bar {
        z-index: 30;
        pointer-events: none;
    }

    .app-shell.menu-open .sidebar-overlay {
        z-index: 110;
    }

    .app-shell.menu-open .sidebar {
        z-index: 120;
    }

    .dialog-backdrop {
        z-index: 200;
        padding: 14px;
    }

    .dialog-panel,
    .attendance-alert-dialog {
        width: min(100%, 480px);
        max-width: calc(100vw - 28px);
        max-height: calc(100dvh - 28px);
        padding: 26px 20px 20px;
        border-radius: 16px;
    }

    .attendance-alert-dialog .dialog-copy {
        overflow-wrap: anywhere;
    }
}

/* INSUMOS · ENTRADA ÁGIL DE CALIFICACIONES */
.inputs-page input[data-grade],
.inputs-page input[data-eval-grade] {
    scroll-margin-block: 96px;
}

.grade-control input:focus-visible {
    position: relative;
    z-index: 1;
    outline: 0;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

@media (max-width: 699px) {
    .inputs-page input[data-grade],
    .inputs-page input[data-eval-grade] {
        font-size: 16px;
        touch-action: manipulation;
    }
}

/* INSUMOS · NAVEGACIÓN EN LISTAS LARGAS */
.inputs-list-tools {
    min-width: 0;
    padding: 12px 14px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.inputs-list-tools[hidden],
.inputs-search-empty[hidden],
[data-inputs-student][hidden],
.inputs-back-to-top[hidden] {
    display: none;
}

.inputs-search-field {
    width: min(100%, 430px);
    min-width: 0;
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
}

.inputs-search-wrap {
    position: relative;
    display: block;
    min-width: 0;
}

.inputs-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    fill: none;
    stroke: #7890b2;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.inputs-search-wrap input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px 0 39px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink-strong);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.inputs-search-wrap input:focus {
    outline: 0;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.inputs-list-count {
    flex: 0 0 auto;
    margin: 0 0 13px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
}

.inputs-search-empty {
    margin: 0;
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.inputs-save-bar.has-back-to-top {
    grid-template-columns: minmax(0, 420px) 42px;
    justify-content: center;
    gap: 10px;
}

.inputs-back-to-top {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
    color: var(--blue);
    cursor: pointer;
}

.inputs-back-to-top.is-floating {
    position: fixed;
    z-index: 45;
    right: 18px;
    bottom: 18px;
}

.inputs-back-to-top svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inputs-back-to-top:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .22);
    outline-offset: 3px;
}

/* INFORMES · NAVEGACIÓN EN CONTENIDO EXTENSO */
.report-student-list {
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.report-individual-card .report-student-list {
    padding: 0;
}

.report-student-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    padding-inline: 8px;
}

/* INFORMES · CIERRE RESPONSIVE Y ACCESIBLE */
.student-bottom-sheet {
    display: flex;
    flex-direction: column;
}

.student-bottom-sheet[hidden] {
    display: none !important;
}

.student-bottom-sheet > :not(.student-sheet-body) {
    flex: 0 0 auto;
}

.student-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overscroll-behavior: contain;
}

.student-sheet-close:focus-visible,
.student-sheet-main-tabs button:focus-visible,
.student-sheet-term-tabs button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .22);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .report-controls select,
    .report-search-wrap input,
    .report-term-tabs a,
    .report-actions.report-actions-clean button,
    .student-sheet-main-tabs button,
    .student-sheet-term-tabs button {
        min-height: 44px;
    }

    .report-term-tabs a {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .student-sheet-close {
        width: 44px;
        height: 44px;
    }

    .report-preview-dialog {
        grid-template-rows: 52px minmax(0, 1fr);
    }

    .report-preview-modal-head {
        height: 52px;
    }

    .report-preview-toolbar-button {
        min-height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .report-preview-modal,
    .student-bottom-sheet,
    .student-sheet-backdrop {
        transition: none;
    }
}

.reports-back-to-top {
    position: fixed;
    z-index: 850;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
    color: var(--blue);
    cursor: pointer;
}

.reports-back-to-top[hidden],
.sheet-open .reports-back-to-top,
.report-preview-open .reports-back-to-top {
    display: none !important;
}

.reports-back-to-top svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reports-back-to-top:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .22);
    outline-offset: 3px;
}

@media (max-width: 699px) {
    .reports-back-to-top {
        right: 14px;
        bottom: 14px;
    }
}

@media print {
    .reports-back-to-top,
    .report-preview-modal {
        display: none !important;
    }
}

@media (max-width: 699px) {
    .inputs-list-tools {
        padding: 11px 12px;
        display: grid;
        gap: 7px;
    }

    .inputs-search-field {
        width: 100%;
    }

    .inputs-search-wrap input {
        min-height: 46px;
        font-size: 16px;
    }

    .inputs-list-count {
        margin: 0;
        white-space: normal;
    }

    .inputs-back-to-top.is-floating {
        right: 14px;
        bottom: 14px;
    }
}