/* =====================================================================
   Eduka · hoja de estilos
   Primero el teléfono: todo se diseña para una pantalla angosta y se
   amplía con @media (min-width) para tableta y escritorio.
   ===================================================================== */

/* ----- Colores y medidas ----- */
/* Colores planos y clásicos: nada de degradados ni brillos. Cada persona elige uno de ocho colores en Apariencia
   (data-color en <html>, lo pone eduka.js) y cada color fija solo tres cosas: el del menú, el principal para el modo
   claro y el principal para el modo oscuro. Lo demás (fondos, textos, bordes) es gris neutro, igual en todos. */
:root {
    --ek-fondo: #f3f4f6;
    --ek-superficie: #ffffff;
    --ek-superficie-2: #f1f3f5;
    --ek-texto: #1f2933;
    --ek-texto-suave: #5f6b7a;
    --ek-borde: #dde1e6;
    --ek-acento: #f0b429;
    --ek-exito: #1f8a5b;
    --ek-exito-suave: #e3f3eb;
    --ek-error: #c53030;
    --ek-error-suave: #fbeaea;
    --ek-info: #2b6cb0;
    --ek-info-suave: #e6eff9;
    /* Horas extra: un ámbar sobrio que se distingue de cualquier color de asignatura por el borde y la etiqueta. */
    --ek-extra: #b45309;
    --ek-extra-suave: #fdf0e1;
    --ek-sombra: 0 1px 2px rgb(16 24 40 / 6%);

    /* Sertur (azul y cian de SerturBookings): el color que se usa si no se ha elegido otro. El cian es el acento con el
       que se marca la opción activa y el foco; los demás colores usan su propio tono como acento. */
    --ek-c-menu: #0a1f44;
    --ek-c: #0b5cff;
    --ek-c-hover: #0848cc;
    --ek-c-suave: #e9f4ff;
    --ek-c-acento: #00c46a;
    --ek-c-noche: #5c9dff;
    --ek-c-noche-hover: #85b6ff;
    --ek-c-noche-suave: #0f2550;
    --ek-c-acento-noche: #2ee08a;

    --ek-primario: var(--ek-c);
    --ek-primario-hover: var(--ek-c-hover);
    --ek-primario-suave: var(--ek-c-suave);
    --ek-logo: var(--ek-c);

    /* El menú es del color elegido en los dos modos: es la identidad de la institución en pantalla. */
    --ek-menu: var(--ek-c-menu);
    --ek-menu-fondo: var(--ek-menu);
    --ek-menu-texto: rgb(255 255 255 / 78%);
    --ek-menu-texto-fuerte: #ffffff;
    --ek-menu-hover: rgb(255 255 255 / 8%);
    --ek-menu-activo: rgb(255 255 255 / 14%);
    --ek-menu-borde: rgb(255 255 255 / 12%);

    --ek-ancho-menu: 280px;
    --ek-ancho-menu-contraido: 84px;
    --ek-alto-barra: 58px;
    --ek-radio: 12px;
    --ek-radio-chico: 8px;
    --ek-transicion: 200ms cubic-bezier(.4, 0, .2, 1);
    /* Salida suave (cajón) y resorte con un leve rebote (indicador): linear() dibuja la curva de un resorte real. */
    --ek-salida: cubic-bezier(.22, 1, .36, 1);
    --ek-resorte: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%,
        1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%,
        .997 69.8%, 1.003 76.9%, 1);
    --ek-fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ek-fuente-titulos: 'Poppins', var(--ek-fuente);

    color-scheme: light;
}

/* Los colores de Apariencia (Sertur, el inicial, está en :root y abajo en el tema). Van sin :root para que cada muestra del panel Apariencia se pinte con su propio color. */
[data-color="marino"] { --ek-c-menu: #1f2d3d; --ek-c: #1d4e89; --ek-c-hover: #163d6b; --ek-c-suave: #e4ecf6; --ek-c-noche: #7aa7dc; --ek-c-noche-hover: #9bbde6; --ek-c-noche-suave: #1e2c3d; }
[data-color="azul"] { --ek-c-menu: #0f4c81; --ek-c: #1565c0; --ek-c-hover: #0f4f99; --ek-c-suave: #e3eefb; --ek-c-noche: #6ea8f0; --ek-c-noche-hover: #93bff5; --ek-c-noche-suave: #172b45; }
[data-color="verde"] { --ek-c-menu: #1b4332; --ek-c: #1e7a4f; --ek-c-hover: #17613f; --ek-c-suave: #e2f2e9; --ek-c-noche: #5cc28f; --ek-c-noche-hover: #80d2a8; --ek-c-noche-suave: #173326; }
[data-color="petroleo"] { --ek-c-menu: #134e5a; --ek-c: #0f7482; --ek-c-hover: #0b5c67; --ek-c-suave: #ddf0f2; --ek-c-noche: #4fbfcc; --ek-c-noche-hover: #78d0da; --ek-c-noche-suave: #13323a; }
[data-color="vino"] { --ek-c-menu: #5b1a2a; --ek-c: #9b2335; --ek-c-hover: #7d1b2a; --ek-c-suave: #f7e4e7; --ek-c-noche: #e5788a; --ek-c-noche-hover: #ec9aa8; --ek-c-noche-suave: #3a1c22; }
[data-color="teja"] { --ek-c-menu: #6a2c1a; --ek-c: #b2451f; --ek-c-hover: #8f3718; --ek-c-suave: #fae8e0; --ek-c-noche: #f08a62; --ek-c-noche-hover: #f4a888; --ek-c-noche-suave: #3b2219; }
[data-color="morado"] { --ek-c-menu: #3b2458; --ek-c: #6b3fa0; --ek-c-hover: #563282; --ek-c-suave: #efe7f8; --ek-c-noche: #b391e6; --ek-c-noche-hover: #c7adee; --ek-c-noche-suave: #2b2140; }
[data-color="grafito"] { --ek-c-menu: #2d3339; --ek-c: #3f4d5c; --ek-c-hover: #313c48; --ek-c-suave: #e7eaee; --ek-c-noche: #a3b3c4; --ek-c-noche-hover: #bdc9d6; --ek-c-noche-suave: #262c33; }

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --ek-fondo: #121417;
        --ek-superficie: #1a1d21;
        --ek-superficie-2: #22262b;
        --ek-texto: #e6e8eb;
        --ek-texto-suave: #a0a8b2;
        --ek-borde: #30353b;
        --ek-primario: var(--ek-c-noche);
        --ek-primario-hover: var(--ek-c-noche-hover);
        --ek-primario-suave: var(--ek-c-noche-suave);
        --ek-exito-suave: #143427;
        --ek-error-suave: #3a1c1f;
        --ek-info-suave: #172b45;
        --ek-sombra: 0 1px 2px rgb(0 0 0 / 30%);
        --ek-extra: #f0a35e;
        --ek-extra-suave: #3a2a17;
        color-scheme: dark;
    }
}

:root[data-tema="oscuro"] {
    --ek-fondo: #121417;
    --ek-superficie: #1a1d21;
    --ek-superficie-2: #22262b;
    --ek-texto: #e6e8eb;
    --ek-texto-suave: #a0a8b2;
    --ek-borde: #30353b;
    --ek-primario: var(--ek-c-noche);
    --ek-primario-hover: var(--ek-c-noche-hover);
    --ek-primario-suave: var(--ek-c-noche-suave);
    --ek-exito-suave: #143427;
    --ek-error-suave: #3a1c1f;
    --ek-info-suave: #172b45;
    --ek-sombra: 0 1px 2px rgb(0 0 0 / 30%);
    --ek-extra: #f0a35e;
        --ek-extra-suave: #3a2a17;
        color-scheme: dark;
}

/* ----- Base ----- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--ek-fuente);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ek-texto);
    background: var(--ek-fondo);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { font-family: var(--ek-fuente-titulos); line-height: 1.25; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: 1.45rem; font-weight: 600; }
h2 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 .75em; text-wrap: pretty; }
a { color: var(--ek-primario); }
code { font-size: .9em; background: var(--ek-superficie-2); padding: .1em .35em; border-radius: 6px; }
h1:focus { outline: none; }
::selection { background: color-mix(in srgb, var(--ek-primario) 25%, transparent); }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--ek-primario) 55%, transparent); outline-offset: 2px; }

.ek-icono { flex: none; display: inline-block; vertical-align: middle; }
.ek-en-linea { display: inline; margin: 0; }

.ek-si-oscuro { display: none; }
:root[data-tema="oscuro"] .ek-si-claro { display: none; }
:root[data-tema="oscuro"] .ek-si-oscuro { display: inline-block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .ek-si-claro { display: none; }
    :root:not([data-tema="claro"]) .ek-si-oscuro { display: inline-block; }
}

/* Cambio de tema con un círculo que se abre desde el botón (API de transiciones de vista; eduka.js lo dibuja). */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* =====================================================================
   Estructura: barra superior (teléfono), menú lateral y contenido
   ===================================================================== */
.ek-app { min-height: 100dvh; }

.ek-barra-movil {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .35rem;
    height: calc(var(--ek-alto-barra) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) .6rem 0 max(.5rem, env(safe-area-inset-left));
    background: var(--ek-menu);
    color: var(--ek-menu-texto-fuerte);
}

/* Al desplazar la página, la barra gana sombra poco a poco (animación ligada al desplazamiento, sin JavaScript). */
@supports (animation-timeline: scroll()) {
    .ek-barra-movil {
        animation: ek-barra-elevada linear both;
        animation-timeline: scroll(root);
        animation-range: 0 90px;
    }
}

@keyframes ek-barra-elevada {
    to { box-shadow: 0 2px 6px rgb(0 0 0 / 22%); }
}

.ek-barra-marca {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-right: auto;
    color: inherit;
    text-decoration: none;
    font-family: var(--ek-fuente-titulos);
    font-weight: 600;
    font-size: 1.1rem;
}

.ek-barra-movil .ek-boton-icono { color: inherit; width: 44px; height: 44px; }
.ek-barra-movil .ek-boton-icono:hover { background: rgb(255 255 255 / 12%); color: inherit; }

/* Menú lateral: en el teléfono es un cajón que entra desde la izquierda. */
.ek-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(86vw, 312px);
    background: var(--ek-menu-fondo);
    color: var(--ek-menu-texto);
    transform: translateX(-104%);
    transition: transform 420ms var(--ek-salida), width 320ms var(--ek-salida);
    box-shadow: 4px 0 16px rgb(0 0 0 / 25%);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    isolation: isolate;
    overflow: hidden;
    overflow: clip; /* recorta sin ser desplazable: el foco nunca puede correr el menú de lugar */
}

body.ek-menu-abierto { overflow: hidden; }
body.ek-menu-abierto .ek-lateral { transform: translateX(0); }

.ek-telon {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(0 0 0 / 45%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--ek-salida);
}

body.ek-menu-abierto .ek-telon { opacity: 1; pointer-events: auto; }

/* Al abrir el cajón, las opciones entran en cascada (--i lo pone eduka.js). */
@media (max-width: 899.98px) {
    body.ek-menu-abierto .ek-lateral :is(.ek-menu-item, .ek-grupo-cabecera, .ek-buscar, .ek-menu-pie) {
        animation: ek-entrar 460ms var(--ek-salida) both;
        animation-delay: calc(80ms + var(--i, 0) * 22ms);
    }
}

@keyframes ek-entrar {
    from { opacity: 0; transform: translateX(-14px); }
}

.ek-principal { min-width: 0; }

.ek-contenido {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.1rem max(1rem, env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.ek-solo-escritorio { display: none !important; }

/* ----- Escritorio y tableta horizontal ----- */
@media (min-width: 900px) {
    .ek-barra-movil, .ek-telon, .ek-solo-movil { display: none !important; }
    .ek-solo-escritorio { display: inline-grid !important; }

    .ek-lateral {
        width: var(--ek-ancho-menu);
        transform: none;
        box-shadow: none;
    }

    .ek-principal {
        margin-left: var(--ek-ancho-menu);
        transition: margin-left 320ms var(--ek-salida);
    }

    .ek-contenido { padding: 2rem 2.25rem 3rem; }

    body.ek-menu-abierto { overflow: auto; }

    /* Menú contraído: solo íconos; el nombre aparece en una etiqueta flotante al pasar el cursor. */
    .ek-menu-contraido .ek-lateral { width: var(--ek-ancho-menu-contraido); }
    .ek-menu-contraido .ek-principal { margin-left: var(--ek-ancho-menu-contraido); }
    .ek-menu-contraido :is(.ek-menu-etiqueta, .ek-menu-texto, .ek-grupo-flecha, .ek-insignia) { display: none; }
    .ek-menu-contraido .ek-menu-cabecera { flex-direction: column; align-items: center; gap: .6rem; padding-inline: 0; }
    .ek-menu-contraido .ek-menu-marca { margin: 0; }
    .ek-menu-contraido .ek-menu-contraer .ek-icono { transform: rotate(180deg); }
    .ek-menu-contraido .ek-buscar { justify-content: center; width: 48px; margin-inline: auto; padding: 0; }
    .ek-menu-contraido .ek-menu-enlaces { padding-inline: .9rem; }
    .ek-menu-contraido :is(.ek-menu-item, .ek-grupo-cabecera) { justify-content: center; padding-inline: 0; }
    .ek-menu-contraido .ek-grupo .ek-grupo-items { grid-template-rows: 1fr; }
    .ek-menu-contraido .ek-grupo-interior { padding-left: 0; margin-left: 0; border-left: 0; }
    .ek-menu-contraido .ek-grupo-interior::before { display: none; }
    /* Los grupos se reducen a su ícono, que separa las secciones. */
    .ek-menu-contraido .ek-grupo-cabecera { min-height: 30px; cursor: default; }
    .ek-menu-contraido .ek-grupo-icono { opacity: .6; }
    .ek-menu-contraido .ek-menu-pie { flex-direction: column; padding: .5rem 0; margin-inline: .75rem; }
    .ek-menu-contraido .ek-usuario { flex: none; }
    .ek-menu-contraido .ek-usuario-acciones { flex-direction: column; }
}

/* =====================================================================
   Menú
   ===================================================================== */
.ek-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    overflow: clip;
}

.ek-menu-cabecera {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: 1.05rem .75rem .6rem 1rem;
}

.ek-menu-marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    margin-right: auto;
    color: var(--ek-menu-texto-fuerte);
    text-decoration: none;
    border-radius: var(--ek-radio-chico);
}

.ek-menu-marca .ek-logo {
    flex: none;
}

.ek-menu-texto { display: flex; flex-direction: column; min-width: 0; }
.ek-menu-texto strong {
    font-family: var(--ek-fuente-titulos);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--ek-menu-texto-fuerte);
}
.ek-menu-texto small {
    color: var(--ek-menu-texto);
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    opacity: .9;
}
.ek-menu-texto .ek-menu-anio { color: var(--ek-acento); font-weight: 600; opacity: 1; }

.ek-lateral .ek-boton-icono { color: var(--ek-menu-texto); }
.ek-lateral .ek-boton-icono:hover { background: var(--ek-menu-hover); color: var(--ek-menu-texto-fuerte); }
.ek-menu-contraer .ek-icono { transition: transform 420ms var(--ek-resorte); }

/* ----- Buscar (abre la barra de comandos) ----- */
.ek-buscar {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: calc(100% - 1.5rem);
    min-height: 42px;
    margin: .25rem .75rem .5rem;
    padding: 0 .55rem 0 .8rem;
    border: 1px solid var(--ek-menu-borde);
    border-radius: var(--ek-radio-chico);
    background: rgb(0 0 0 / 14%);
    color: var(--ek-menu-texto);
    font: inherit;
    font-size: .88rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--ek-transicion), border-color var(--ek-transicion);
}

.ek-buscar:hover { background: rgb(0 0 0 / 22%); border-color: rgb(255 255 255 / 22%); }
.ek-buscar .ek-menu-etiqueta { opacity: .85; }

kbd, .ek-buscar kbd {
    flex: none;
    padding: .1rem .4rem;
    border-radius: 6px;
    border: 1px solid rgb(255 255 255 / 18%);
    background: rgb(255 255 255 / 8%);
    font: 600 .68rem/1.5 var(--ek-fuente);
    letter-spacing: .3px;
    color: var(--ek-menu-texto);
}

/* ----- Opciones ----- */
.ek-menu-enlaces {
    position: relative;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .35rem .75rem .75rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 18%) transparent;
    /* Los bordes de la lista se desvanecen: se nota que hay más opciones al desplazar. */
    mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 18px), transparent);
}

.ek-menu-item,
.ek-grupo-cabecera {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    min-height: 44px; /* objetivo táctil cómodo */
    padding: .55rem .8rem;
    border: 0;
    border-radius: var(--ek-radio-chico);
    background: transparent;
    color: var(--ek-menu-texto);
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background var(--ek-transicion), color var(--ek-transicion);
}

.ek-menu-item .ek-icono { transition: color var(--ek-transicion); }
.ek-menu-item:hover,
.ek-grupo-cabecera:hover { background: var(--ek-menu-hover); color: var(--ek-menu-texto-fuerte); }
.ek-menu-item:hover .ek-icono { color: var(--ek-menu-texto-fuerte); }

.ek-menu-item.activo {
    background: var(--ek-menu-activo);
    color: var(--ek-menu-texto-fuerte);
    font-weight: 600;
}

.ek-menu-item.activo .ek-icono { color: var(--ek-menu-texto-fuerte); }

/* Marca de la opción activa: una barra sólida del color de acento. */
.ek-menu-item.activo::before {
    content: "";
    position: absolute;
    left: -.75rem;
    z-index: 1;
    top: 9px;
    bottom: 9px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--ek-acento);
    animation: ek-marca 420ms var(--ek-resorte) both;
}

@keyframes ek-marca { from { transform: scaleY(0); } }

/* Dentro de un grupo, la barra se posa sobre el hilo del grupo. */
.ek-grupo-interior .ek-menu-item.activo::before { left: -.55rem; width: 3px; border-radius: 3px; top: 10px; bottom: 10px; }

/* Con el indicador deslizante (eduka.js), el fondo de la opción lo pone la píldora y no cada opción. */
.ek-con-indicador :is(.ek-menu-item, .ek-grupo-cabecera):hover,
.ek-con-indicador .ek-menu-item.activo { background: transparent; }

.ek-menu-indicador {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--ek-ancho-ind, 0);
    height: var(--ek-alto-ind, 44px);
    z-index: 0;
    border-radius: var(--ek-radio-chico);
    background: var(--ek-menu-activo);
    transform: translate(var(--ek-x-ind, 0), var(--ek-y-ind, 0));
    opacity: 0;
    pointer-events: none;
    transition: transform 560ms var(--ek-resorte), width 400ms var(--ek-salida), height 400ms var(--ek-salida), opacity 200ms;
}

.ek-menu-indicador.visible { opacity: 1; }
.ek-menu-indicador.sin-animar { transition: none; }

.ek-menu-etiqueta { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ek-menu-pronto { cursor: default; opacity: .55; }
.ek-menu-pronto:hover { background: transparent; color: var(--ek-menu-texto); }
.ek-menu-pronto:hover .ek-icono { color: inherit; transform: none; }

.ek-insignia {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: .15rem .45rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--ek-acento) 16%, transparent);
    color: var(--ek-acento);
    border: 1px solid color-mix(in srgb, var(--ek-acento) 30%, transparent);
}

/* Grupos plegables: la altura se anima con grid-template-rows (0fr ↔ 1fr), sin medir en JavaScript. */
.ek-grupo { margin-top: .5rem; }
.ek-grupo-cabecera {
    gap: .65rem;
    min-height: 40px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgb(255 255 255 / 55%);
}

/* Ícono del grupo: sencillo, del mismo color del rótulo. */
.ek-grupo-icono {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    color: inherit;
}

.ek-grupo-flecha { transition: transform 380ms var(--ek-resorte); opacity: .65; }
.ek-grupo.cerrado .ek-grupo-flecha { transform: rotate(-90deg); }

.ek-grupo-items {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 360ms var(--ek-salida);
}

.ek-grupo.cerrado .ek-grupo-items { grid-template-rows: 0fr; }

/* Las opciones de un grupo cuelgan de una línea fina. */
.ek-grupo-interior {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: .8rem;
    padding-left: .55rem;
    transition: opacity 300ms;
}

.ek-grupo.cerrado .ek-grupo-interior { opacity: 0; }

.ek-grupo-interior::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--ek-menu-borde);
    pointer-events: none;
}

/* ----- Etiqueta flotante (menú contraído) ----- */
.ek-menu-tooltip {
    position: fixed;
    z-index: 70;
    top: 0;
    left: 0;
    padding: .4rem .7rem;
    border-radius: 6px;
    background: #1f2328;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
    opacity: 0;
    transform: translate(var(--ek-tx, 0), var(--ek-ty, 0)) translateX(-6px) scale(.96);
    transform-origin: left center;
    pointer-events: none;
    transition: opacity 160ms, transform 260ms var(--ek-salida);
}

.ek-menu-tooltip::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 2px;
}

.ek-menu-tooltip.visible { opacity: 1; transform: translate(var(--ek-tx, 0), var(--ek-ty, 0)) scale(1); }

/* ----- Pie del menú: persona, paleta, tema y salida ----- */
.ek-menu-pie {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem .75rem .9rem;
    padding: .55rem;
    border-radius: var(--ek-radio);
    background: rgb(0 0 0 / 14%);
    border: 1px solid var(--ek-menu-borde);
}

.ek-usuario { display: flex; align-items: center; gap: .65rem; min-width: 0; flex: 1; }
.ek-usuario-datos { display: flex; flex-direction: column; min-width: 0; }
.ek-usuario-datos strong { color: var(--ek-menu-texto-fuerte); font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-usuario-datos small { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.ek-usuario-acciones { display: flex; gap: 0; }
.ek-usuario-acciones .ek-boton-icono { width: 36px; height: 36px; }

/* ----- Apariencia (ventana emergente): modo y color ----- */
.ek-paleta {
    position: fixed;
    inset: auto;
    margin: 0;
    width: 340px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio);
    background: var(--ek-superficie);
    color: var(--ek-texto);
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
    opacity: 0;
    transform: translateY(10px) scale(.97);
    transform-origin: bottom left;
    transition: opacity 200ms, transform 380ms var(--ek-salida), overlay 380ms allow-discrete, display 380ms allow-discrete;
}

.ek-paleta:popover-open { opacity: 1; transform: none; }
@starting-style { .ek-paleta:popover-open { opacity: 0; transform: translateY(10px) scale(.97); } }

.ek-paleta-cabecera { display: flex; align-items: center; justify-content: space-between; margin: -.25rem -.35rem .75rem 0; }
.ek-paleta-cabecera strong { font-family: var(--ek-fuente-titulos); font-size: 1.05rem; }
.ek-paleta-rotulo { display: block; margin: 1rem 0 .55rem; font-size: .7rem; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--ek-texto-suave); }

/* Modo: un control segmentado con una píldora que se desliza hasta la opción elegida. */
.ek-modos {
    --ek-modo: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 4px;
    border-radius: 10px;
    background: var(--ek-superficie-2);
    box-shadow: inset 0 0 0 1px var(--ek-borde);
}

.ek-modos::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 3);
    border-radius: 7px;
    background: var(--ek-superficie);
    box-shadow: inset 0 0 0 1px var(--ek-borde);
    transform: translateX(calc(var(--ek-modo) * 100%));
    transition: transform 260ms var(--ek-salida);
}

.ek-modos button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 40px;
    border: 0;
    background: none;
    color: var(--ek-texto-suave);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--ek-transicion);
}

.ek-modos button[aria-checked="true"] { color: var(--ek-texto); }
.ek-modos button[aria-checked="true"] .ek-icono { color: var(--ek-primario); }

/* Colores: una muestra plana por color, con una franja del principal debajo del color del menú. */
.ek-colores { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem .5rem; }

.ek-color {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ek-texto-suave);
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
}

.ek-color-muestra {
    display: grid;
    place-items: center;
    width: 100%;
    height: 44px;
    border-radius: var(--ek-radio-chico);
    background: var(--ek-c-menu);
    border-bottom: 8px solid var(--ek-c);
    color: #fff;
    transition: outline-color var(--ek-transicion);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.ek-color-muestra .ek-icono { visibility: hidden; }
.ek-color:hover .ek-color-muestra { outline-color: var(--ek-borde); }
.ek-color[aria-checked="true"] { color: var(--ek-texto); }
.ek-color[aria-checked="true"] .ek-color-muestra { outline-color: var(--ek-texto); }
.ek-color[aria-checked="true"] .ek-color-muestra .ek-icono { visibility: visible; }
.ek-color:focus-visible { outline: none; }
.ek-color:focus-visible .ek-color-muestra { outline: 3px solid var(--ek-primario); }

/* En el teléfono la apariencia sube desde abajo, como una hoja. */
@media (max-width: 599.98px) {
    .ek-paleta {
        left: 0 !important;
        right: 0;
        top: auto !important;
        bottom: 0;
        width: 100%;
        max-height: 88dvh;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: opacity 200ms, transform 460ms var(--ek-salida), overlay 460ms allow-discrete, display 460ms allow-discrete;
    }

    .ek-paleta:popover-open { transform: none; }
    @starting-style { .ek-paleta:popover-open { transform: translateY(100%); } }

    /* Agarradera de la hoja. */
    .ek-paleta::before { content: ""; display: block; width: 40px; height: 5px; margin: -.35rem auto .7rem; border-radius: 99px; background: var(--ek-borde); }
    .ek-paleta::backdrop { background: rgb(0 0 0 / 35%); }
}

/* =====================================================================
   Barra de comandos (Ctrl+K)
   ===================================================================== */
.ek-comandos {
    width: min(640px, calc(100vw - 1.5rem));
    max-height: min(560px, calc(100dvh - 4rem));
    margin: max(8vh, 1rem) auto auto;
    padding: 0;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio);
    background: var(--ek-superficie);
    color: var(--ek-texto);
    box-shadow: 0 12px 32px rgb(0 0 0 / 22%);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(.97);
    transition: opacity 200ms, transform 360ms var(--ek-salida), overlay 360ms allow-discrete, display 360ms allow-discrete;
}

.ek-comandos[open] { display: flex; flex-direction: column; opacity: 1; transform: none; }

@starting-style {
    .ek-comandos[open] { opacity: 0; transform: translateY(-10px) scale(.97); }
}

.ek-comandos::backdrop {
    background: rgb(0 0 0 / 40%);
    opacity: 0;
    transition: opacity 250ms, overlay 250ms allow-discrete, display 250ms allow-discrete;
}

.ek-comandos[open]::backdrop { opacity: 1; }
@starting-style { .ek-comandos[open]::backdrop { opacity: 0; } }

.ek-comandos-busqueda {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--ek-borde);
    color: var(--ek-texto-suave);
}

.ek-comandos-busqueda input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ek-texto);
    font: inherit;
    font-size: 17px;
}

.ek-comandos-busqueda kbd, .ek-comandos-pie kbd {
    color: var(--ek-texto-suave);
    border-color: var(--ek-borde);
    background: var(--ek-superficie-2);
}

.ek-comandos-lista { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .45rem; margin: 0; list-style: none; }
.ek-comandos-seccion { padding: .6rem .7rem .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--ek-texto-suave); }

.ek-comando {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 46px;
    padding: .45rem .7rem;
    border-radius: var(--ek-radio-chico);
    cursor: pointer;
    color: var(--ek-texto);
    scroll-margin: .5rem;
}

.ek-comando-icono {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--ek-primario);
    background: var(--ek-primario-suave);
}

.ek-comando-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-comando-texto mark { background: none; color: var(--ek-primario); font-weight: 700; }
.ek-comando-grupo { flex: none; font-size: .72rem; color: var(--ek-texto-suave); }
.ek-comando[aria-selected="true"] { background: var(--ek-primario-suave); }
.ek-comando[aria-selected="true"] .ek-comando-icono { background: var(--ek-primario); color: var(--ek-superficie); }
.ek-comando[aria-selected="true"]::after { content: "↵"; font-size: .9rem; color: var(--ek-primario); }
.ek-comandos-vacio { padding: 2rem 1rem; text-align: center; color: var(--ek-texto-suave); }

.ek-comandos-pie {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .6rem 1rem;
    border-top: 1px solid var(--ek-borde);
    font-size: .74rem;
    color: var(--ek-texto-suave);
}

.ek-comandos-pie span { display: inline-flex; align-items: center; gap: .3rem; }

@media (max-width: 599.98px) {
    .ek-comandos { margin-top: .75rem; }
    .ek-comandos-pie { display: none; }
}

/* ----- Avatar ----- */
.ek-avatar {
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ek-superficie-2);
}

.ek-avatar-iniciales {
    display: inline-grid;
    place-items: center;
    width: var(--ek-avatar, 36px);
    height: var(--ek-avatar, 36px);
    background: var(--ek-logo);
    color: #fff;
    font-weight: 600;
    font-size: calc(var(--ek-avatar, 36px) * .38);
}

.ek-barra-movil .ek-avatar { box-shadow: 0 0 0 2px rgb(255 255 255 / 35%); }

/* Quien prefiere menos movimiento ve todo quieto: sin deslizamientos ni rebotes. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* =====================================================================
   Controles
   ===================================================================== */
.ek-boton-icono {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ek-texto-suave);
    cursor: pointer;
    transition: background var(--ek-transicion), color var(--ek-transicion);
}

.ek-boton-icono:hover { background: var(--ek-superficie-2); color: var(--ek-texto); }
.ek-boton-mini { width: 24px; height: 24px; }

.ek-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .6rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--ek-radio-chico);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ek-transicion), border-color var(--ek-transicion), transform 80ms, box-shadow var(--ek-transicion);
}

.ek-btn:active { transform: scale(.98); }
.ek-btn[disabled] { opacity: .6; cursor: not-allowed; }
.ek-btn-bloque { width: 100%; }
.ek-btn-compacto { min-height: 36px; padding: .35rem .8rem; }

.ek-btn-primario { background: var(--ek-primario); color: var(--ek-superficie); }
.ek-btn-primario:hover { background: var(--ek-primario-hover); }

.ek-btn-secundario { background: var(--ek-superficie); color: var(--ek-texto); border-color: var(--ek-borde); }
.ek-btn-secundario:hover { background: var(--ek-superficie-2); }

.ek-btn-texto { background: transparent; color: var(--ek-primario); padding-inline: .6rem; min-height: 36px; }
.ek-btn-texto:hover { background: var(--ek-primario-suave); }

/* Relieve sutil y foco visible con teclado: los botones se leen como botones, también en el tema oscuro. */
.ek-btn:focus-visible { outline: 2px solid var(--ek-primario); outline-offset: 2px; }
.ek-btn-primario { box-shadow: 0 1px 2px rgb(16 24 40 / 14%), inset 0 1px 0 rgb(255 255 255 / 12%); }
.ek-btn-secundario { box-shadow: var(--ek-sombra); }
.ek-btn-secundario:hover { border-color: color-mix(in srgb, var(--ek-texto) 22%, var(--ek-borde)); }

/* ----- Barra de acciones de una página: grupo de botones unidos, menú desplegable y la acción principal -----
   En el teléfono la acción principal va arriba a lo ancho y las demás en una rejilla de íconos con su nombre debajo. */
.ek-barra-acciones { display: flex; flex-direction: column; gap: .5rem; }
.ek-barra-acciones > .ek-btn-primario { order: -1; width: 100%; }

.ek-grupo-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .5rem; }
.ek-grupo-botones .ek-btn {
    width: 100%;
    min-height: 60px;
    flex-direction: column;
    gap: .2rem;
    padding: .5rem .35rem;
    font-size: .8rem;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
}
.ek-grupo-botones .ek-icono { color: var(--ek-primario); }
.ek-grupo-botones .ek-desplegable-flecha { display: none; }

.ek-desplegable { position: relative; }
.ek-desplegable > summary { list-style: none; user-select: none; }
.ek-desplegable > summary::-webkit-details-marker { display: none; }
.ek-desplegable[open] > summary { background: var(--ek-primario-suave); border-color: color-mix(in srgb, var(--ek-primario) 35%, var(--ek-borde)); }
.ek-desplegable-flecha { transition: transform var(--ek-transicion); }
.ek-desplegable[open] .ek-desplegable-flecha { transform: rotate(180deg); }

.ek-desplegable-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    width: min(300px, calc(100vw - 32px));
    padding: .35rem;
    background: var(--ek-superficie);
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio);
    box-shadow: 0 12px 32px rgb(16 24 40 / 16%), 0 2px 6px rgb(16 24 40 / 8%);
    animation: ek-desplegar 160ms var(--ek-salida);
}
.ek-desplegable-titulo {
    margin: .3rem .7rem .4rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ek-texto-suave);
}
.ek-desplegable-menu a {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 48px;
    padding: .55rem .7rem;
    border-radius: var(--ek-radio-chico);
    color: var(--ek-texto);
    text-decoration: none;
}
.ek-desplegable-menu a:hover, .ek-desplegable-menu a:focus-visible { background: var(--ek-primario-suave); outline: none; }
.ek-desplegable-menu a > .ek-icono { flex: none; color: var(--ek-primario); }
.ek-desplegable-menu strong { display: block; font-weight: 600; }
.ek-desplegable-menu small { display: block; color: var(--ek-texto-suave); font-size: .8rem; }

@keyframes ek-desplegar { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ek-desplegable-menu { animation: none; } }

/* En pantalla ancha: una sola barra, con los botones unidos a la izquierda y la acción principal a la derecha. */
@media (min-width: 760px) {
    .ek-encabezado.ek-encabezado-apilado { flex-direction: column; align-items: stretch; }
    .ek-barra-acciones {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: .5rem;
        background: var(--ek-superficie);
        border: 1px solid var(--ek-borde);
        border-radius: var(--ek-radio);
        box-shadow: var(--ek-sombra);
    }
    .ek-barra-acciones > .ek-btn-primario { order: 0; width: auto; }

    .ek-grupo-botones { display: flex; gap: 0; }
    .ek-grupo-botones .ek-btn {
        width: auto;
        min-height: 44px;
        flex-direction: row;
        gap: .5rem;
        padding: .55rem 1rem;
        font-size: .92rem;
        white-space: nowrap;
        border-radius: 0;
        box-shadow: none;
    }
    .ek-grupo-botones > * + * { margin-left: -1px; }
    .ek-grupo-botones > .ek-btn:hover, .ek-grupo-botones summary:hover { position: relative; z-index: 1; }
    .ek-grupo-botones > :first-child, .ek-grupo-botones > :first-child > summary { border-radius: var(--ek-radio-chico) 0 0 var(--ek-radio-chico); }
    .ek-grupo-botones > :last-child, .ek-grupo-botones > :last-child > summary { border-radius: 0 var(--ek-radio-chico) var(--ek-radio-chico) 0; }
    .ek-grupo-botones .ek-desplegable-flecha { display: inline-block; margin-left: -.15rem; color: var(--ek-texto-suave); }
    .ek-desplegable-menu { right: auto; left: 0; }
}

.ek-btn-google {
    background: #fff;
    color: #1f1f1f;
    border-color: #dadce0;
    font-weight: 500;
    min-height: 48px;
}

.ek-btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgb(60 64 67 / 30%); }

.ek-formulario { display: flex; flex-direction: column; gap: 1rem; }
.ek-formulario-rejilla { display: grid; gap: 1rem; }
.ek-campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.ek-campo label { font-weight: 600; font-size: .85rem; }

.ek-input {
    width: 100%;
    min-height: 44px;
    padding: .6rem .8rem;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-chico);
    background: var(--ek-superficie);
    color: var(--ek-texto);
    font: inherit;
    font-size: 16px; /* 16px evita que el iPhone haga zoom al escribir */
    transition: border-color var(--ek-transicion), box-shadow var(--ek-transicion);
}

.ek-input:focus { outline: none; border-color: var(--ek-primario); box-shadow: 0 0 0 4px var(--ek-primario-suave); }
.ek-input-compacto { min-height: 36px; padding: .35rem .6rem; font-size: 14px; }
.ek-input.ek-pendiente { border-color: var(--ek-acento); background: color-mix(in srgb, var(--ek-acento) 12%, var(--ek-superficie)); }

.ek-input-icono { position: relative; }
.ek-input-icono > .ek-icono { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--ek-texto-suave); pointer-events: none; }
.ek-input-icono > .ek-input { padding-left: 2.6rem; }

.ek-input-prefijo { display: flex; }
.ek-input-prefijo span {
    display: grid;
    place-items: center;
    padding: 0 .75rem;
    border: 1px solid var(--ek-borde);
    border-right: 0;
    border-radius: var(--ek-radio-chico) 0 0 var(--ek-radio-chico);
    background: var(--ek-superficie-2);
    color: var(--ek-texto-suave);
}
.ek-input-prefijo .ek-input { border-radius: 0 var(--ek-radio-chico) var(--ek-radio-chico) 0; }

.ek-error { color: var(--ek-error); font-size: .82rem; }
.ek-ayuda { color: var(--ek-texto-suave); font-size: .85rem; }
.ek-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

.ek-aviso {
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--ek-radio-chico);
    border: 1px solid transparent;
    font-size: .92rem;
}

.ek-aviso-error { background: var(--ek-error-suave); border-color: color-mix(in srgb, var(--ek-error) 30%, transparent); color: var(--ek-error); }
.ek-aviso-exito { background: var(--ek-exito-suave); border-color: color-mix(in srgb, var(--ek-exito) 30%, transparent); color: var(--ek-exito); }
.ek-aviso-info { background: var(--ek-info-suave); border-color: color-mix(in srgb, var(--ek-info) 30%, transparent); color: var(--ek-texto); }

/* Aviso abajo (AvisoAbajo.razor): pegado al borde inferior de la pantalla mientras la página siga más abajo. */
.ek-aviso-abajo { position: sticky; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 5; margin-top: 1rem; }
.ek-aviso-abajo .ek-aviso { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .6rem .6rem .6rem 1rem; box-shadow: 0 8px 28px rgb(16 24 40 / 18%); background-color: var(--ek-superficie); }
.ek-aviso-abajo .ek-aviso-exito { background: color-mix(in srgb, var(--ek-exito-suave) 85%, var(--ek-superficie)); }
.ek-aviso-abajo .ek-aviso-error { background: color-mix(in srgb, var(--ek-error-suave) 85%, var(--ek-superficie)); }
.ek-aviso-abajo .ek-aviso > svg { flex: none; }
.ek-aviso-abajo .ek-aviso > span { flex: 1; min-width: 0; }
.ek-aviso-cerrar { flex: none; min-width: 44px; min-height: 44px; color: inherit; }

/* =====================================================================
   Páginas internas
   ===================================================================== */
.ek-encabezado {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.ek-encabezado p { color: var(--ek-texto-suave); margin: 0; }
.ek-encabezado > .ek-btn { flex: none; }

.ek-tarjeta {
    background: var(--ek-superficie);
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio);
    padding: 1.1rem;
    box-shadow: var(--ek-sombra);
    margin-bottom: 1rem;
}

.ek-tarjeta p:last-child { margin-bottom: 0; }

.ek-tarjeta-destacada {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border-color: color-mix(in srgb, var(--ek-acento) 60%, var(--ek-borde));
    background: color-mix(in srgb, var(--ek-acento) 10%, var(--ek-superficie));
}

.ek-tarjeta-destacada > .ek-icono { color: #c98a00; }

.ek-tarjeta-enlace {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform var(--ek-transicion), border-color var(--ek-transicion);
}

.ek-tarjeta-enlace:hover { transform: translateY(-2px); border-color: var(--ek-primario); }
.ek-tarjeta-enlace > .ek-icono,
.ek-tarjeta-pronto > .ek-icono { color: var(--ek-primario); margin-bottom: .5rem; }
.ek-tarjeta-enlace p, .ek-tarjeta-pronto p { color: var(--ek-texto-suave); }
.ek-tarjeta-pronto { opacity: .75; border-style: dashed; box-shadow: none; }

.ek-rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ek-rejilla > .ek-tarjeta { margin-bottom: 0; }

.ek-bienvenida {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem;
    margin-bottom: 1.25rem;
    border-radius: var(--ek-radio);
    background: var(--ek-menu);
    border-left: 6px solid var(--ek-acento);
    color: #fff;
}

.ek-bienvenida h1 { font-size: 1.35rem; margin: 0; }
.ek-bienvenida-saludo { margin: 0 0 .15rem; opacity: .85; }
.ek-bienvenida-sub { margin: .35rem 0 0; opacity: .75; font-size: .88rem; }
.ek-bienvenida-sub::first-letter { text-transform: uppercase; }

.ek-chip {
    flex: none;
    padding: .3rem .75rem;
    border-radius: 99px;
    background: rgb(255 255 255 / 16%);
    border: 1px solid rgb(255 255 255 / 25%);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.ek-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .25rem;
    padding: 3rem 1rem;
    color: var(--ek-texto-suave);
}

.ek-vacio h1, .ek-vacio h2 { color: var(--ek-texto); }
.ek-vacio .ek-btn { margin-top: .75rem; }
.ek-vacio-lista, .ek-cargando { color: var(--ek-texto-suave); text-align: center; padding: 1.5rem; }

/* ----- Filtros ----- */
.ek-filtros { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }

.ek-segmentos {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.ek-segmentos::-webkit-scrollbar { display: none; }

.ek-segmentos button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 36px;
    padding: .3rem .8rem;
    border: 1px solid var(--ek-borde);
    border-radius: 99px;
    background: var(--ek-superficie);
    color: var(--ek-texto-suave);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.ek-segmentos button span { font-size: .75rem; padding: 0 .4rem; border-radius: 99px; background: var(--ek-superficie-2); }
.ek-segmentos button.activo { background: var(--ek-primario); border-color: var(--ek-primario); color: var(--ek-superficie); }
.ek-segmentos button.activo span { background: rgb(255 255 255 / 22%); }

/* ----- Tablas: en el teléfono cada fila es una tarjeta con la etiqueta de cada dato ----- */
.ek-tabla { width: 100%; border-collapse: separate; border-spacing: 0; }

.ek-tabla-adaptable thead { display: none; }
.ek-tabla-adaptable tr {
    display: block;
    margin-bottom: .75rem;
    padding: .75rem 1rem;
    background: var(--ek-superficie);
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio);
    box-shadow: var(--ek-sombra);
}

.ek-tabla-adaptable td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    font-size: .9rem;
}

.ek-tabla-adaptable td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    color: var(--ek-texto-suave);
    font-size: .78rem;
    font-weight: 600;
}

.ek-tabla-adaptable td[data-etiqueta="Persona"],
.ek-tabla-adaptable td[data-etiqueta="Docente"] { display: block; padding-bottom: .6rem; border-bottom: 1px solid var(--ek-borde); margin-bottom: .2rem; }
.ek-tabla-adaptable td[data-etiqueta="Persona"]::before,
.ek-tabla-adaptable td[data-etiqueta="Docente"]::before { display: none; }
.ek-tabla-adaptable td select { max-width: 60%; }
/* La numeración de corrido de una lista (los grupos): discreta, para contar de un vistazo. */
.ek-tabla .ek-col-numero { color: var(--ek-texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 760px) { .ek-tabla th.ek-col-numero, .ek-tabla td.ek-col-numero { width: 3rem; text-align: right; } }
.ek-tabla-adaptable .ek-celda-acciones { justify-content: flex-end; }
.ek-tabla-adaptable .ek-celda-acciones:empty { display: none; }

@media (min-width: 760px) {
    .ek-encabezado { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .ek-filtros { flex-direction: row; align-items: center; }
    .ek-filtros > .ek-input { max-width: 320px; }
    .ek-formulario-rejilla { grid-template-columns: 1fr 1fr; }
    .ek-formulario-linea { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
    .ek-formulario-linea .ek-campo { flex: 1 1 200px; }

    .ek-tabla-adaptable { background: var(--ek-superficie); border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); box-shadow: var(--ek-sombra); overflow: hidden; }
    .ek-tabla-adaptable thead { display: table-header-group; }
    .ek-tabla-adaptable tr { display: table-row; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; border-radius: 0; }
    .ek-tabla-adaptable th {
        text-align: left;
        padding: .75rem 1rem;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: var(--ek-texto-suave);
        background: var(--ek-superficie-2);
    }
    .ek-tabla-adaptable td { display: table-cell; padding: .7rem 1rem; border-top: 1px solid var(--ek-borde); vertical-align: middle; }
    .ek-tabla-adaptable td[data-etiqueta]::before { display: none; }
    .ek-tabla-adaptable td[data-etiqueta="Persona"],
    .ek-tabla-adaptable td[data-etiqueta="Docente"] { display: table-cell; border-bottom: 0; margin: 0; padding-bottom: .7rem; }
    .ek-tabla-adaptable td select { max-width: 200px; }
    .ek-tabla-adaptable tbody tr:hover { background: var(--ek-superficie-2); }
    .ek-tabla-adaptable .ek-celda-acciones { text-align: right; }
    .ek-tabla-adaptable .ek-celda-acciones:empty { display: table-cell; }

    .ek-bienvenida { padding: 1.75rem 2rem; }
    .ek-bienvenida h1 { font-size: 1.7rem; }
}

.ek-fila-inactiva { opacity: .6; }

.ek-persona { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.ek-persona > div { display: flex; flex-direction: column; min-width: 0; }
.ek-persona small { color: var(--ek-texto-suave); overflow: hidden; text-overflow: ellipsis; }

.ek-estado { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; }
.ek-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ek-estado-activo { color: var(--ek-exito); }
.ek-estado-inactivo { color: var(--ek-texto-suave); }

/* ----- Instituciones ----- */
.ek-institucion header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.ek-institucion header h2 { margin: 0; }
.ek-institucion footer { border-top: 1px solid var(--ek-borde); margin-top: .75rem; padding-top: .5rem; display: flex; justify-content: flex-end; }
.ek-dominios { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ek-dominios li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .35rem .2rem .6rem;
    border-radius: 99px;
    background: var(--ek-primario-suave);
    color: var(--ek-primario);
    font-size: .82rem;
    font-weight: 600;
}
.ek-dominio-nuevo { display: flex; gap: .4rem; }

/* =====================================================================
   Ingreso y registro
   ===================================================================== */
.ek-sesion {
    position: relative;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* la columna nunca crece más que la pantalla por un texto largo */
    place-items: center;
    padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom));
    background: var(--ek-menu);
    overflow: hidden;
}

.ek-sesion-marco { position: relative; width: 100%; max-width: 440px; }

.ek-tarjeta-sesion {
    background: var(--ek-superficie);
    border-radius: var(--ek-radio);
    padding: 1.75rem 1.4rem;
    box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
}

.ek-sesion-cabecera { text-align: center; margin-bottom: 1.4rem; }
.ek-sesion-cabecera .ek-logo { margin-bottom: .75rem; }
.ek-sesion-cabecera > .ek-icono { color: var(--ek-primario); margin-bottom: .5rem; }
.ek-sesion-cabecera h1 { font-size: 1.5rem; margin-bottom: .25rem; }
.ek-sesion-cabecera p { color: var(--ek-texto-suave); margin: 0; }

.ek-separador {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.4rem 0 1rem;
    color: var(--ek-texto-suave);
    font-size: .82rem;
}

.ek-separador::before, .ek-separador::after { content: ""; flex: 1; height: 1px; background: var(--ek-borde); }

.ek-sesion-formulario { display: grid; gap: .85rem; }
.ek-sesion-recordar { font-size: .9rem; }
.ek-sesion-recordada { display: grid; gap: .85rem; }
.ek-sesion-cuenta { display: flex; align-items: center; gap: .65rem; padding: .75rem .9rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico);
    background: var(--ek-superficie-2); overflow-wrap: anywhere; }
.ek-sesion-cuenta > .ek-icono { flex: none; color: var(--ek-primario); }
.ek-sesion-cuenta span { display: grid; }
.ek-sesion-cuenta small { color: var(--ek-texto-suave); font-size: .78rem; }
.ek-sesion-cuenta strong { color: var(--ek-titulo); }
.ek-sesion-otra { display: block; margin-top: .75rem; text-align: center; }
/* Cuentas repetidas en Personas: la pendiente y la que ya existía, lado a lado en el escritorio. */
.ek-repetidas { display: grid; gap: .6rem; padding: 1rem; margin-bottom: 1rem; border-left: 4px solid var(--ek-error); }
.ek-repetidas h2 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1.05rem; color: var(--ek-titulo); }
.ek-repetidas h2 .ek-icono { color: var(--ek-error); }
.ek-repetidas p { margin: 0; }
.ek-repetidas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ek-repetidas li { display: grid; gap: .5rem; padding: .7rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); }
.ek-repetida-cuentas { display: grid; gap: .3rem; }
.ek-repetida-cuentas > span { display: grid; overflow-wrap: anywhere; }
.ek-repetida-cuentas small { color: var(--ek-texto-suave); font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.ek-repetida-cuentas strong { color: var(--ek-titulo); }
.ek-repetida-cuentas span span { color: var(--ek-texto-suave); font-size: .88rem; }
.ek-repetida-flecha { color: var(--ek-texto-suave); transform: rotate(-90deg); }
@media (min-width: 760px) {
    .ek-repetida-cuentas { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .9rem; }
    .ek-repetida-flecha { transform: rotate(180deg); }
}
.ek-sesion-notas { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.ek-sesion-notas li { display: flex; gap: .5rem; align-items: center; color: var(--ek-texto-suave); font-size: .84rem; }
.ek-sesion-notas .ek-icono { color: var(--ek-exito); }

.ek-sesion-pie { text-align: center; color: rgb(255 255 255 / 60%); font-size: .8rem; margin: 1.1rem 0 0; }

.ek-pasos { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.1rem; counter-reset: paso; }
.ek-pasos li {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    color: var(--ek-texto-suave);
    counter-increment: paso;
}

.ek-pasos li::before {
    content: counter(paso);
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--ek-superficie-2);
    font-weight: 600;
}

.ek-pasos li.actual { color: var(--ek-texto); font-weight: 600; }
.ek-pasos li.actual::before { background: var(--ek-primario); color: var(--ek-superficie); }
.ek-pasos li.hecho::before { content: "✓"; background: var(--ek-exito); color: #fff; }

.ek-institucion-encontrada {
    display: flex;
    gap: .9rem;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--ek-radio);
    background: var(--ek-primario-suave);
    color: var(--ek-primario);
}

.ek-institucion-encontrada div { display: flex; flex-direction: column; min-width: 0; color: var(--ek-texto); }
.ek-institucion-encontrada small { color: var(--ek-texto-suave); }
.ek-institucion-encontrada strong { font-family: var(--ek-fuente-titulos); font-size: 1.05rem; }
.ek-institucion-encontrada span { font-size: .85rem; overflow-wrap: anywhere; }

.ek-enlace-sutil { display: block; text-align: center; margin-top: .9rem; font-size: .88rem; }

.ek-demo { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.ek-demo-titulo { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--ek-texto-suave); margin: 0; }
.ek-demo-cuenta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .8rem;
    border: 1px dashed var(--ek-borde);
    border-radius: var(--ek-radio-chico);
    color: var(--ek-texto);
    text-decoration: none;
    font-size: .88rem;
}
.ek-demo-cuenta:hover { border-color: var(--ek-primario); background: var(--ek-primario-suave); }
.ek-demo-cuenta small { color: var(--ek-texto-suave); }
.ek-demo-otro { display: flex; gap: .5rem; margin-top: .35rem; }
.ek-demo-otro .ek-input { flex: 1; min-width: 0; }

@media (min-width: 480px) {
    .ek-tarjeta-sesion { padding: 2.25rem 2rem; }
}

/* ----- Error de Blazor ----- */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 1000;
    padding: .8rem 1rem;
    border-radius: var(--ek-radio-chico);
    background: #3a1c1f;
    color: #fff;
    box-shadow: var(--ek-sombra);
}

#blazor-error-ui .reload { color: var(--ek-acento); margin-left: .5rem; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* =====================================================================
   Horarios
   ===================================================================== */
.ek-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ek-pestanas { margin-bottom: 1rem; }
/* Rúbrica por criterios y niveles: tabla para leerla y, tocable, para calificar eligiendo el nivel de cada criterio. */
.ek-rubrica { display: grid; gap: .5rem; }
.ek-rubrica-titulo { display: block; font-weight: 600; margin-bottom: .35rem; }
.ek-rubrica-fila { display: grid; gap: .4rem; padding: .6rem .75rem; border: 1px solid var(--ek-borde); border-radius: 12px; }
.ek-rubrica-nombre { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.ek-rubrica-nombre small { color: var(--ek-texto-suave); white-space: nowrap; }
.ek-rubrica-opciones { display: flex; flex-wrap: wrap; gap: .35rem; }
.ek-rubrica-nivel { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; min-height: 44px; min-width: 4.5rem; padding: .35rem .7rem; border-radius: 10px; border: 1px solid var(--ek-borde); background: var(--ek-superficie); font: inherit; font-size: .85rem; line-height: 1.2; color: var(--ek-texto); text-align: center; }
.ek-rubrica-nivel small, .ek-rubrica-nivel em { color: var(--ek-texto-suave); font-size: .72rem; font-style: normal; }
.ek-rubrica-nivel em { max-width: 14rem; }
.ek-rubrica.tocable .ek-rubrica-nivel { cursor: pointer; }
.ek-rubrica.tocable .ek-rubrica-nivel:hover { border-color: var(--ek-primario); color: var(--ek-primario); }
.ek-rubrica-nivel.elegido, .ek-rubrica.tocable .ek-rubrica-nivel.elegido:hover { background: var(--ek-primario); border-color: var(--ek-primario); color: #fff; }
.ek-rubrica-nivel.elegido small { color: rgba(255, 255, 255, .85); }
@media (min-width: 720px) {
  .ek-rubrica-fila { grid-template-columns: minmax(9rem, 1fr) 3fr; align-items: center; }
  .ek-rubrica-nombre { flex-direction: column; align-items: flex-start; gap: 0; }
}
.ek-rubrica-editor { display: grid; gap: .75rem; }
.ek-rubrica-criterio { display: grid; gap: .5rem; margin: 0; padding: .75rem; border: 1px solid var(--ek-borde); border-radius: 12px; }
.ek-rubrica-criterio-cabecera { display: flex; gap: .5rem; align-items: center; }
.ek-rubrica-criterio-cabecera input { flex: 1; min-width: 0; }
.ek-rubrica-numero { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ek-primario-suave); color: var(--ek-primario); font-size: .8rem; font-weight: 700; }
.ek-rubrica-niveles { display: grid; gap: .4rem; justify-items: start; }
.ek-rubrica-nivel-form { display: grid; grid-template-columns: 1fr 4.5rem auto; gap: .4rem; width: 100%; }
.ek-rubrica-nivel-form input:nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .ek-rubrica-nivel-form { grid-template-columns: 10rem 4.5rem 1fr auto; }
  .ek-rubrica-nivel-form input:nth-child(3) { grid-column: auto; }
}
/* Saltos entre las pantallas de una misma carga (Planeación, Tareas, Evaluaciones, Notas). */
.ek-saltos { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .85rem; }
.ek-saltos a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .3rem .9rem; border-radius: 99px; border: 1px solid var(--ek-borde); background: var(--ek-superficie); color: var(--ek-texto-suave); font-size: .85rem; font-weight: 600; text-decoration: none; }
.ek-saltos a:hover { color: var(--ek-primario); border-color: var(--ek-primario); }
.ek-saltos a.activo { background: var(--ek-primario); border-color: var(--ek-primario); color: #fff; }
@media (min-width: 720px) { .ek-saltos a { min-height: 38px; } }
.ek-segmentos button.ek-alerta { border-color: var(--ek-error); }

.ek-fila-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ek-fila-titulo h2 { margin: 0; }
.ek-fila-titulo p { margin: .15rem 0 0; }
/* El botón de cerrar se queda al lado del título aunque la ayuda sea larga. */
.ek-fila-titulo:has(> .ek-boton-icono) { flex-wrap: nowrap; }

.ek-check { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .9rem; cursor: pointer; }
.ek-check input { width: 18px; height: 18px; accent-color: var(--ek-primario); }
.ek-campo-corto { flex: 0 1 120px !important; }
.ek-input-color { padding: .25rem; height: 44px; cursor: pointer; }
.ek-confirmar p { margin-bottom: .75rem; }

/* ----- Cuadrícula semanal ----- */
.ek-horario-tarjeta { padding: 1rem; }
.ek-horario-titulo { display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ek-horario-titulo h2 { margin: 0; }
.ek-horario-titulo p { margin: .1rem 0 0; }

/* Teléfono: pestañas de días y una lista por franjas. La tabla se esconde. */
.ek-horario-pestanas { margin-bottom: .75rem; }
.ek-horario-pestanas button { flex: 1 0 auto; justify-content: center; }
.ek-horario-marco { display: none; }

.ek-horario-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ek-horario-lista li { display: grid; grid-template-columns: 56px 1fr; gap: .6rem; align-items: stretch; }
.ek-horario-lista li > .ek-clase,
.ek-horario-lista li > .ek-celda-vacia { min-height: 60px; }

.ek-horario-hora { display: flex; flex-direction: column; justify-content: center; font-variant-numeric: tabular-nums; }
.ek-horario-hora span { font-weight: 600; font-size: .88rem; }
.ek-horario-hora small { color: var(--ek-texto-suave); font-size: .74rem; }

.ek-horario-descanso {
    display: grid;
    place-items: center;
    min-height: 30px;
    border-radius: var(--ek-radio-chico);
    background: repeating-linear-gradient(135deg, var(--ek-superficie-2) 0 8px, transparent 8px 16px);
    color: var(--ek-texto-suave);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.ek-clase {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    width: 100%;
    height: 100%;
    min-height: 56px;
    padding: .4rem .6rem;
    border: 0;
    border-radius: var(--ek-radio-chico);
    background: var(--ek-clase);
    color: var(--ek-clase-texto, #fff);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 -3px 0 rgb(0 0 0 / 12%);
    transition: transform 120ms, box-shadow var(--ek-transicion), opacity var(--ek-transicion);
}

.ek-clase:disabled { cursor: default; opacity: 1; }
.ek-clase:not(:disabled):hover { transform: translateY(-1px); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 12%), 0 6px 14px rgb(0 0 0 / 15%); }
.ek-clase strong { font-size: .88rem; line-height: 1.2; }
.ek-clase small { font-size: .74rem; line-height: 1.2; opacity: .9; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.ek-clase .ek-clase-salon { opacity: .75; }
.ek-clase-fija { position: absolute; top: 5px; right: 5px; opacity: .85; }

/* Hora extra: borde grueso y etiqueta del color de horas extra, iguales en el horario del docente, del grupo y el general. */
.ek-clase-extra { box-shadow: inset 0 0 0 3px var(--ek-extra); }
.ek-clase-extra:not(:disabled):hover { box-shadow: inset 0 0 0 3px var(--ek-extra), 0 6px 14px rgb(0 0 0 / 15%); }
.ek-clase-marca-extra {
    align-self: flex-start;
    margin-top: 2px;
    padding: 0 .35rem;
    border-radius: 4px;
    background: var(--ek-extra);
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.ek-horario-tabla .ek-clase-marca-extra { position: absolute; top: 4px; right: 4px; margin: 0; }
.ek-horario-tabla .ek-clase-extra .ek-clase-fija { top: auto; bottom: 5px; }
.ek-muestra-extra { background: var(--ek-superficie); box-shadow: inset 0 0 0 3px var(--ek-extra); }
.ek-chip-extra { margin-left: .35rem; background: var(--ek-extra-suave); color: var(--ek-extra); }
.ek-leyendas { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.ek-clase-corta { display: none; }
.ek-clase.seleccionada { outline: 3px solid var(--ek-texto); outline-offset: 2px; transform: scale(1.02); }

.ek-celda-vacia {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 56px;
    border: 1px dashed var(--ek-borde);
    border-radius: var(--ek-radio-chico);
    background: transparent;
    color: var(--ek-texto-suave);
}

/* Mientras se elige a dónde mover una clase: verde donde cabe, rayado rojo donde choca. */
button.ek-celda-vacia { cursor: pointer; font: inherit; }
.ek-horario-eligiendo .ek-clase:not(.seleccionada) { opacity: .55; }
.ek-destino-libre { border: 2px dashed var(--ek-exito); background: var(--ek-exito-suave); color: var(--ek-exito); }
.ek-destino-libre:hover { background: color-mix(in srgb, var(--ek-exito) 22%, transparent); }
.ek-celda-vacia.ek-destino-cruce { border-color: color-mix(in srgb, var(--ek-error) 40%, transparent); background: repeating-linear-gradient(135deg, var(--ek-error-suave) 0 6px, transparent 6px 12px); cursor: not-allowed; }

.ek-muestra { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; }
.ek-muestra.ek-destino-libre { border-width: 2px; }

.ek-barra-edicion {
    position: sticky;
    top: calc(var(--ek-alto-barra) + env(safe-area-inset-top) + .5rem);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .8rem;
    margin-bottom: .75rem;
    border-radius: var(--ek-radio-chico);
    background: var(--ek-primario-suave);
    font-size: .9rem;
}

.ek-pendientes { display: flex; flex-wrap: wrap; gap: .5rem; }
.ek-pendiente {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 150px;
    padding: .55rem 2.8rem .55rem .8rem;
    border: 1px solid var(--ek-borde);
    border-left: 5px solid var(--ek-clase);
    border-radius: var(--ek-radio-chico);
    background: var(--ek-superficie);
    color: var(--ek-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ek-pendiente small { color: var(--ek-texto-suave); font-size: .78rem; }
.ek-pendiente.seleccionada { outline: 3px solid var(--ek-primario); }
.ek-pendiente:disabled { cursor: default; }
.ek-insignia-horas { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--ek-error); }

@media (min-width: 760px) {
    .ek-horario-pestanas, .ek-horario-lista { display: none; }
    .ek-horario-marco { display: block; overflow-x: auto; }

    .ek-horario-tabla { width: 100%; border-collapse: separate; border-spacing: 5px; table-layout: fixed; min-width: 640px; }
    .ek-horario-tabla thead th {
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: var(--ek-texto-suave);
        padding: .35rem;
        text-align: center;
    }
    .ek-horario-tabla thead th:first-child { width: 64px; }
    .ek-horario-tabla thead th.hoy { color: var(--ek-primario); }
    .ek-horario-tabla thead th.hoy::after { content: ""; display: block; width: 24px; height: 3px; margin: 3px auto 0; border-radius: 3px; background: var(--ek-primario); }
    .ek-horario-tabla td { height: 64px; padding: 0; vertical-align: top; }
.ek-horario-tabla td.hoy { background: color-mix(in srgb, var(--ek-primario) 7%, transparent); border-radius: var(--ek-radio-chico); }
    .ek-horario-tabla tr.ek-horario-fila-descanso td { height: 30px; }
    .ek-horario-tabla th.ek-horario-hora { text-align: right; padding-right: .4rem; }
    .ek-horario-tabla .ek-clase { height: 100%; min-height: 64px; }
    .ek-horario-tabla .ek-celda-vacia { height: 64px; }
}

/* En columnas angostas se muestra la abreviatura; con espacio, el nombre completo. */
@media (min-width: 760px) and (max-width: 1199.98px) {
    .ek-horario-tabla .ek-clase-corta { display: inline; }
    .ek-horario-tabla .ek-clase-larga { display: none; }
}

/* ----- Configuración ----- */
.ek-franjas { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ek-franjas li {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    align-items: center;
    gap: .75rem;
    padding: .35rem .5rem .35rem .8rem;
    border-radius: var(--ek-radio-chico);
    background: var(--ek-superficie-2);
    font-size: .9rem;
}
.ek-franjas li.descanso { background: repeating-linear-gradient(135deg, var(--ek-superficie-2) 0 8px, transparent 8px 16px); color: var(--ek-texto-suave); }
.ek-franja-hora { font-variant-numeric: tabular-nums; font-weight: 600; }
.ek-franja-tipo { font-size: .8rem; }
.ek-franjas small { color: var(--ek-texto-suave); }

.ek-serie { padding: 1rem; margin-bottom: .75rem; border: 1px dashed var(--ek-primario); border-radius: var(--ek-radio); background: var(--ek-primario-suave); }
.ek-serie h3 { font-size: 1rem; }
.ek-serie .ek-formulario-rejilla { margin-bottom: .5rem; }
.ek-franja-nueva { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--ek-borde); }
.ek-franja-nueva .ek-input { width: auto; }
.ek-franja-nueva + .ek-franja-nueva { border-top: 0; padding-top: .25rem; }

/* La franja que se está cambiando se abre en su lugar, con las horas y la opción de correr las siguientes. */
.ek-franjas li.ek-franja-edicion { display: block; padding: .75rem; background: var(--ek-primario-suave); border: 1px solid color-mix(in srgb, var(--ek-primario) 35%, var(--ek-borde)); }
.ek-franja-edicion form { display: flex; flex-direction: column; gap: .5rem; }
.ek-franja-edicion-horas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.ek-franja-edicion-horas label { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.ek-franja-edicion-horas .ek-input { width: auto; }
.ek-franja-edicion .ek-ayuda { margin: 0; }
/* Los niveles que tienen clase a esa hora: la sexta hora puede ser solo de secundaria y media. */
.ek-franja-niveles { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: .5rem .75rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); background: var(--ek-superficie); }
.ek-franja-niveles legend { padding: 0 .25rem; font-size: .85rem; font-weight: 600; }
.ek-franja-tipo .ek-etiqueta { margin-left: .35rem; }

@media (min-width: 760px) {
    .ek-rejilla-4 { grid-template-columns: repeat(5, 1fr); }
}

.ek-rejilla-compacta { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ek-asignatura { display: flex; align-items: center; gap: .75rem; padding: .75rem; }
.ek-asignatura > div:not(.ek-acciones) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ek-asignatura small { color: var(--ek-texto-suave); font-size: .8rem; }
.ek-asignatura .ek-acciones { gap: 0; flex-wrap: nowrap; }
.ek-asignatura > .ek-icono { color: var(--ek-primario); }
.ek-asignatura-muestra {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 12px;
    background: var(--ek-clase);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    /* Abreviaturas de hasta 10 letras («ARITMETICA»): se parten en dos líneas antes que salirse del cuadro. */
    padding: 0 2px;
    line-height: 1.05;
    text-align: center;
    overflow-wrap: anywhere;
}

.ek-punto-color { display: inline-block; width: 10px; height: 10px; margin-right: .5rem; border-radius: 50%; background: var(--ek-clase); vertical-align: middle; }
.ek-estado-pendiente { color: #c77700; }

/* ----- Barra de carga ----- */
.ek-carga { display: flex; align-items: center; gap: .5rem; min-width: 150px; }
.ek-carga-barra { flex: 1; height: 8px; border-radius: 99px; background: var(--ek-superficie-2); overflow: hidden; }
.ek-carga-barra span { display: block; height: 100%; border-radius: 99px; background: var(--ek-acento); transition: width var(--ek-transicion); }
.ek-carga small { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.ek-carga-completa .ek-carga-barra span { background: var(--ek-exito); }
.ek-carga-excedida .ek-carga-barra span { background: var(--ek-error); }
.ek-carga-excedida small { color: var(--ek-error); }


.ek-docentes-carga { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.ek-docentes-carga > div, .ek-docentes-carga > button { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); font-size: .9rem; }
.ek-docentes-carga span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-docentes-carga small { color: var(--ek-error); display: inline-flex; align-items: center; gap: 2px; }

/* ----- Disponibilidad ----- */
.ek-disponibilidad { display: grid; grid-template-columns: 52px repeat(var(--ek-dias), 1fr); gap: 4px; margin-bottom: .75rem; }
.ek-disponibilidad-dia { text-align: center; font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--ek-texto-suave); padding: .3rem 0; }
.ek-disponibilidad-dia .ek-clase-larga { display: none; }
.ek-disponibilidad-dia .ek-clase-corta { display: inline; }
.ek-disponibilidad-celda {
    min-height: 44px;
    border: 1px solid var(--ek-borde);
    border-radius: 8px;
    background: var(--ek-exito-suave);
    color: var(--ek-error);
    font: inherit;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
}
.ek-disponibilidad-celda:hover { border-color: var(--ek-primario); }
.ek-bloqueada { background: repeating-linear-gradient(135deg, var(--ek-error-suave) 0 6px, color-mix(in srgb, var(--ek-error) 18%, transparent) 6px 12px); border-color: color-mix(in srgb, var(--ek-error) 40%, transparent); }
.ek-muestra.ek-bloqueada { border: 1px solid var(--ek-error); }

@media (min-width: 760px) {
    .ek-disponibilidad { grid-template-columns: 64px repeat(var(--ek-dias), 1fr); gap: 6px; }
    .ek-disponibilidad-dia .ek-clase-larga { display: inline; }
    .ek-disponibilidad-dia .ek-clase-corta { display: none; }
}

/* ----- Clases de hoy (inicio) ----- */
.ek-hoy-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ek-hoy-lista li {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border-left: 4px solid var(--ek-clase);
    border-radius: var(--ek-radio-chico);
    background: var(--ek-superficie-2);
}
.ek-hoy-lista li > div { display: flex; flex-direction: column; min-width: 0; }
.ek-hoy-lista li small { color: var(--ek-texto-suave); font-size: .8rem; }
.ek-hoy-lista li.pasada { opacity: .5; }
.ek-hoy-lista li.ahora { background: color-mix(in srgb, var(--ek-clase) 14%, var(--ek-superficie)); }
.ek-chip-ahora { padding: .15rem .55rem; border-radius: 99px; background: var(--ek-clase); color: #fff; font-size: .72rem; font-weight: 700; }

/* Actividades de la agenda para toda la comunidad (Inicio y Mi horario). */
.ek-hoy, .ek-comunidad { margin-bottom: 1rem; }
.ek-comunidad-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ek-comunidad-lista li { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-comunidad-lista li.hoy { background: var(--ek-primario-suave); --ek-clase: var(--ek-primario); }
.ek-comunidad-lista li > div { display: flex; flex-direction: column; min-width: 0; }
.ek-comunidad-lista li small { color: var(--ek-texto-suave); font-size: .8rem; }
.ek-comunidad-lista li small::first-letter { text-transform: uppercase; }
.ek-comunidad-lista li p { margin: .25rem 0 0; font-size: .85rem; }
.ek-comunidad-fecha { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--ek-superficie); border: 1px solid var(--ek-borde); line-height: 1; }
.ek-comunidad-fecha strong { font-size: 1.15rem; color: var(--ek-titulo); }
.ek-comunidad-fecha small { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.ek-hoy .ek-chip-neutro { font-size: .72rem; }

/* ----- Impresión: solo el horario, sin menú ni botones ----- */
@media print {
    .ek-lateral, .ek-barra-movil, .ek-telon, .ek-no-imprimir, .ek-encabezado .ek-acciones, .ek-aviso, #blazor-error-ui, #components-reconnect-modal { display: none !important; }
    .ek-principal { margin: 0 !important; }
    .ek-contenido { padding: 0; max-width: none; }
    body { background: #fff; }
    .ek-tarjeta { box-shadow: none; border: 0; padding: 0; }
    .ek-horario-pestanas, .ek-horario-lista { display: none !important; }
    .ek-horario-marco { display: block !important; }
    .ek-horario-tabla { width: 100%; border-spacing: 3px; table-layout: fixed; }
    .ek-horario-tabla td { height: 54px; }
    .ek-clase { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ek-clase-corta { display: none !important; }
    .ek-clase-larga { display: inline !important; }
}

/* Clases con las que se puede intercambiar la elegida: se resaltan en vez de atenuarse. */
.ek-horario-eligiendo .ek-clase.ek-destino-libre:not(.seleccionada) { opacity: 1; outline: 3px dashed var(--ek-exito); outline-offset: 1px; border: 0; }

/* La fila de descanso de la tabla debe seguir siendo celda de tabla para ocupar todas las columnas. */
.ek-horario-tabla td.ek-horario-descanso { display: table-cell; text-align: center; vertical-align: middle; }

/* En el teléfono los días caben todos a lo ancho, sin desplazar las pestañas. */
.ek-horario-pestanas button { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: .3rem; gap: .25rem; }

/* =====================================================================
   Docentes
   ===================================================================== */
@media (min-width: 760px) {
    .ek-rejilla-ficha { grid-template-columns: repeat(4, 1fr); }
    .ek-rejilla-ficha .ek-campo-ancho { grid-column: span 2; }
}

.ek-pasos-importar { margin: 0 0 1rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
.ek-pasos-importar li { padding-left: .25rem; }
.ek-pasos-importar .ek-btn { margin-left: .25rem; }

.ek-adjuntar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    margin-top: .6rem;
    padding: 1.25rem 1rem;
    border: 2px dashed var(--ek-primario);
    border-radius: var(--ek-radio);
    background: var(--ek-primario-suave);
    color: var(--ek-primario);
    text-align: center;
    cursor: pointer;
    transition: background var(--ek-transicion);
}
.ek-adjuntar:hover { background: color-mix(in srgb, var(--ek-primario) 16%, var(--ek-superficie)); }
.ek-adjuntar span { font-weight: 600; color: var(--ek-texto); overflow-wrap: anywhere; }
.ek-adjuntar small { color: var(--ek-texto-suave); }
.ek-adjuntar.ocupado { opacity: .6; pointer-events: none; }
.ek-adjuntar:focus-within { outline: 3px solid color-mix(in srgb, var(--ek-primario) 55%, transparent); }

.ek-resumen-importacion { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.ek-chip-estado { display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 99px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.ek-chip-crear { background: var(--ek-exito-suave); color: var(--ek-exito); }
.ek-chip-actualizar { background: var(--ek-info-suave); color: var(--ek-info); }
.ek-chip-error { background: var(--ek-error-suave); color: var(--ek-error); }
.ek-fila-error td { background: color-mix(in srgb, var(--ek-error) 5%, transparent); }
.ek-tabla-importacion { margin-bottom: 1rem; }
.ek-tabla-importacion td[data-etiqueta="Resultado"] .ek-error { text-align: right; }
@media (min-width: 760px) {
    .ek-tabla-importacion td[data-etiqueta="Resultado"] .ek-error { text-align: left; }
}

/* =====================================================================
   Años lectivos, sedes y proyectos
   ===================================================================== */
.ek-anio header h2 { font-size: 1.6rem; }
.ek-anio-trabajo { border: 2px solid var(--ek-primario); }
.ek-anio-marca { display: flex; align-items: center; gap: .35rem; color: var(--ek-primario); font-weight: 600; font-size: .85rem; }
.ek-chip-neutro { background: var(--ek-superficie-2); color: var(--ek-texto-suave); }
.ek-opciones-copia { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.ek-insignia-anio { background: rgb(255 255 255 / 14%); color: var(--ek-menu-texto-fuerte); }

.ek-sede .ek-coordinacion { margin-bottom: .6rem; }
.ek-sede footer { border-top: 1px solid var(--ek-borde); padding-top: .5rem; margin-top: .25rem; justify-content: flex-end; }

.ek-coordinadores-grupo { border: 1px dashed var(--ek-borde); border-radius: var(--ek-radio); padding: .75rem 1rem; margin: 0; }
.ek-coordinadores-grupo legend { font-weight: 600; font-size: .9rem; padding: 0 .35rem; }
.ek-coordinadores-grupo .ek-formulario-linea { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .5rem; }
.ek-coordinadores-grupo .ek-campo { flex: 1 1 180px; }
.ek-lista-corta { display: flex; flex-direction: column; gap: 2px; }

.ek-sugeridos { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ek-chip-sugerido {
    display: inline-flex; align-items: center; gap: .25rem;
    min-height: 34px; padding: .25rem .7rem;
    border: 1px dashed var(--ek-primario); border-radius: 99px;
    background: transparent; color: var(--ek-primario);
    font: inherit; font-size: .82rem; cursor: pointer;
}
.ek-chip-sugerido:hover { background: var(--ek-primario-suave); }

.ek-integrantes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ek-integrantes li { padding: .25rem .7rem; border-radius: 99px; background: var(--ek-superficie-2); font-size: .85rem; }
.ek-integrantes li.lider { background: var(--ek-primario); color: var(--ek-superficie); font-weight: 600; }

.ek-lista-seleccion { list-style: none; padding: 0; margin: .5rem 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); }
.ek-lista-seleccion li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: 0 .75rem; border-bottom: 1px solid var(--ek-borde); }
.ek-lista-seleccion li:last-child { border-bottom: 0; }
.ek-lider { font-size: .8rem; color: var(--ek-primario); }

.ek-etiquetas { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.ek-etiqueta { padding: .05rem .5rem; border-radius: 99px; background: var(--ek-primario-suave); color: var(--ek-primario); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.ek-etiqueta-proyecto { background: var(--ek-exito-suave); color: var(--ek-exito); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ek-menu-texto .ek-menu-anio { color: var(--ek-acento); font-weight: 600; }

/* =====================================================================
   Convivencia
   ===================================================================== */
.ek-textarea { min-height: auto; resize: vertical; line-height: 1.5; }
.ek-acciones-final { justify-content: flex-end; margin-bottom: 2rem; }

/* Tipo I amable, Tipo II de atención, Tipo III en rojo porque exige remisión inmediata. */
.ek-tipo-1 { background: var(--ek-info-suave); color: var(--ek-info); }
.ek-tipo-2 { background: color-mix(in srgb, var(--ek-acento) 22%, var(--ek-superficie)); color: #9a6400; }
.ek-tipo-3 { background: var(--ek-error-suave); color: var(--ek-error); }
:root[data-tema="oscuro"] .ek-tipo-2 { color: var(--ek-acento); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .ek-tipo-2 { color: var(--ek-acento); } }

.ek-estado-caso-0 { background: var(--ek-primario-suave); color: var(--ek-primario); }
.ek-estado-caso-1 { background: var(--ek-info-suave); color: var(--ek-info); }
.ek-estado-caso-2 { background: color-mix(in srgb, var(--ek-acento) 22%, var(--ek-superficie)); color: var(--ek-texto); }
.ek-estado-caso-3 { background: var(--ek-exito-suave); color: var(--ek-exito); }

.ek-caso-enlace { color: var(--ek-primario); text-decoration: none; }
.ek-caso-enlace:hover { text-decoration: underline; }
.ek-tabla-casos td[data-etiqueta="Caso"] { flex-wrap: wrap; }
.ek-tabla-casos td[data-etiqueta="Caso"] small { display: block; }

/* En el teléfono las dos columnas se funden en una sola lista para poner los involucrados justo después de los hechos. */
.ek-caso { display: flex; flex-direction: column; gap: 0; }
.ek-caso-principal, .ek-caso-lateral { display: contents; }
.ek-caso section { order: 5; min-width: 0; }
.ek-caso .ek-sec-hechos { order: 1; }
.ek-caso .ek-sec-involucrados { order: 2; }
.ek-caso .ek-sec-bitacora { order: 9; }
.ek-volver { display: inline-flex; align-items: center; min-height: 32px; color: var(--ek-primario); font-size: .9rem; text-decoration: none; }
.ek-volver:hover { text-decoration: underline; }
.ek-tarjeta h2 { display: flex; align-items: center; gap: .4rem; font-size: 1.05rem; }
.ek-tarjeta h3 { font-size: .92rem; margin: 1.1rem 0 .4rem; }
.ek-relato { white-space: pre-wrap; margin: 0; line-height: 1.6; }

/* ----- Asistente ----- */
.ek-asistente { border-color: color-mix(in srgb, var(--ek-primario) 35%, var(--ek-borde)); }
.ek-asistente h2 .ek-icono { color: var(--ek-primario); }
.ek-asistente .ek-fila-titulo > .ek-btn { width: 100%; }
.ek-analizando { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; color: var(--ek-texto-suave); }
.ek-analizando p { margin: 0; }
.ek-girando {
    flex: none;
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 3px solid var(--ek-primario-suave);
    border-top-color: var(--ek-primario);
    border-radius: 50%;
    animation: ek-girar .8s linear infinite;
}
@keyframes ek-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ek-girando { animation-duration: 3s; } }

.ek-analisis { line-height: 1.55; }
.ek-analisis-sugerencia {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1rem;
    margin-bottom: .9rem;
    border-radius: var(--ek-radio-chico);
    background: var(--ek-superficie-2);
    border-left: 5px solid var(--ek-info);
}
.ek-analisis-sugerencia strong { font-size: 1.15rem; }
.ek-tipo-borde-2 { border-left-color: var(--ek-acento); }
.ek-tipo-borde-3 { border-left-color: var(--ek-error); }
.ek-analisis-alertas { padding: .6rem .9rem; margin-bottom: .9rem; border-radius: var(--ek-radio-chico); background: var(--ek-error-suave); color: var(--ek-texto); }
.ek-analisis-alertas p { display: flex; gap: .45rem; align-items: flex-start; margin: .3rem 0; }
.ek-analisis-alertas .ek-icono { flex: none; color: var(--ek-error); margin-top: .15rem; }
.ek-cita { margin: 0 0 .75rem; padding: .6rem .9rem; border-radius: var(--ek-radio-chico); border: 1px solid var(--ek-borde); background: var(--ek-superficie); }
.ek-cita figcaption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem; margin-bottom: .35rem; }
.ek-cita blockquote { margin: 0; padding-left: .75rem; border-left: 3px solid var(--ek-primario); font-style: italic; color: var(--ek-texto); }
.ek-cita-dudosa { border-style: dashed; border-color: var(--ek-error); }
.ek-cita-dudosa blockquote { border-left-color: var(--ek-error); }
.ek-lista-analisis { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.ek-lista-analisis small { display: block; }
.ek-analisis-pie { margin-top: 1.1rem; padding-top: .75rem; border-top: 1px solid var(--ek-borde); font-size: .8rem; }

.ek-selector-tipo { margin: .5rem 0; }
.ek-selector-tipo button { min-height: 44px; padding: .3rem 1.1rem; font-weight: 600; }
.ek-pasos-elegir { border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); padding: .4rem .9rem .6rem; margin: .75rem 0; }
.ek-pasos-elegir legend { font-size: .85rem; font-weight: 600; padding: 0 .3rem; }
.ek-pasos-elegir .ek-check { align-items: flex-start; min-height: 0; padding: .45rem 0; }
.ek-pasos-elegir .ek-check input { margin-top: .15rem; flex: none; }

/* ----- Ruta de atención ----- */
.ek-protocolo { list-style: none; padding: 0; margin: 0; counter-reset: paso; }
.ek-protocolo li { display: flex; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--ek-borde); counter-increment: paso; }
.ek-protocolo li:first-child { border-top: 0; }
.ek-protocolo li::before {
    content: counter(paso);
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ek-superficie-2);
    color: var(--ek-texto-suave);
    font-size: .8rem;
    font-weight: 700;
}
.ek-protocolo li.hecho::before { content: "✓"; background: var(--ek-exito); color: #fff; }
.ek-protocolo li.no-aplica::before { content: "–"; background: var(--ek-borde); }
.ek-protocolo li.hecho p, .ek-protocolo li.no-aplica p { color: var(--ek-texto-suave); }
.ek-protocolo-texto { flex: 1; min-width: 0; }
.ek-protocolo-texto p { margin: 0 0 .2rem; }
.ek-protocolo-texto small { display: block; }
.ek-protocolo-estado { margin-top: .3rem; color: var(--ek-exito); font-weight: 600; }
.ek-protocolo li.no-aplica .ek-protocolo-estado { color: var(--ek-texto-suave); }
.ek-protocolo-completar { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.ek-protocolo-completar .ek-acciones { justify-content: flex-end; }
.ek-protocolo .ek-btn-texto { padding-left: 0; }

.ek-borrador { font-family: var(--ek-fuente); margin: .75rem 0; }

/* ----- Involucrados ----- */
.ek-participantes { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; flex-direction: column; gap: .4rem; }
.ek-participantes li { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); background: var(--ek-superficie); }
.ek-participantes select { width: auto; flex: none; }
.ek-persona-caso { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ek-persona-caso strong { overflow-wrap: anywhere; line-height: 1.3; }
.ek-persona-caso small { color: var(--ek-texto-suave); font-size: .8rem; }
.ek-papel-1 { background: var(--ek-error-suave); color: var(--ek-error); }
.ek-papel-2 { background: color-mix(in srgb, var(--ek-acento) 22%, var(--ek-superficie)); color: var(--ek-texto); }
.ek-papel-3, .ek-papel-4, .ek-papel-5 { background: var(--ek-superficie-2); color: var(--ek-texto-suave); }
.ek-resultados-personas li { padding: 0; }
.ek-resultado-persona {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    padding: .4rem .75rem;
    border: 0;
    background: none;
    color: var(--ek-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ek-resultado-persona:hover { background: var(--ek-primario-suave); }
.ek-resultado-persona .ek-icono { color: var(--ek-primario); flex: none; }
.ek-resultado-persona small { color: var(--ek-texto-suave); }
.ek-caso-lateral .ek-input { margin-bottom: .5rem; }

/* ----- Bitácora ----- */
.ek-bitacora-nueva { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.ek-bitacora-nueva .ek-btn { align-self: flex-end; }
.ek-bitacora-nueva .ek-input { margin-bottom: 0; }
.ek-bitacora { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--ek-borde); }
.ek-bitacora li { position: relative; padding: 0 0 1rem .5rem; }
.ek-bitacora li::before { content: ""; position: absolute; left: -1.4rem; top: .3rem; width: 10px; height: 10px; border-radius: 50%; background: var(--ek-primario); box-shadow: 0 0 0 3px var(--ek-superficie); }
.ek-bitacora li.ek-bitacora-11::before { background: var(--ek-acento); }
.ek-bitacora li.ek-bitacora-12::before { background: var(--ek-exito); }
.ek-bitacora small { display: block; }
.ek-bitacora p { margin: .15rem 0 0; white-space: pre-wrap; font-size: .9rem; overflow-wrap: anywhere; }

.ek-otras-entidades { margin-top: .75rem; padding: .6rem .9rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-otras-entidades summary { min-height: 32px; font-weight: 600; cursor: pointer; }

.ek-componentes { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-bottom: .75rem; }
.ek-componente { padding: .7rem .9rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); border-top: 4px solid var(--ek-primario); }
.ek-componente:nth-child(2) { border-top-color: var(--ek-info); }
.ek-componente:nth-child(3) { border-top-color: var(--ek-error); }
.ek-componente:nth-child(4) { border-top-color: var(--ek-acento); }
.ek-componente p { margin: .25rem 0 0; font-size: .88rem; color: var(--ek-texto-suave); }
.ek-ruta-tipo { border-left: 5px solid var(--ek-info); }
.ek-ruta-tipo-2 { border-left-color: var(--ek-acento); }
.ek-ruta-tipo-3 { border-left-color: var(--ek-error); }

.ek-estado-asistente { display: flex; gap: 1rem; align-items: flex-start; }
.ek-estado-asistente h2 { margin: 0 0 .2rem; }
.ek-estado-asistente p { overflow-wrap: anywhere; }
.ek-estado-asistente-icono { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ek-exito-suave); color: var(--ek-exito); }
.ek-estado-asistente-icono.apagado { background: var(--ek-superficie-2); color: var(--ek-texto-suave); }
.ek-estado-asistente .ek-confirmar { margin-top: .75rem; }

.ek-manual { display: flex; gap: 1rem; align-items: flex-start; }
.ek-manual > .ek-icono { flex: none; color: var(--ek-primario); }
.ek-manual h2 { margin: 0 0 .2rem; overflow-wrap: anywhere; }

@media (min-width: 760px) {
    .ek-asistente .ek-fila-titulo > .ek-btn { width: auto; }
    .ek-campo-corto-fecha { flex: 0 1 200px !important; }
    .ek-componentes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
    .ek-caso { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
    .ek-caso-principal, .ek-caso-lateral { display: block; min-width: 0; }
    .ek-caso-lateral { position: sticky; top: 1rem; }
    .ek-componentes { grid-template-columns: repeat(4, 1fr); }
}

@media print {
    .ek-caso { display: block; }
    .ek-bitacora-nueva, .ek-protocolo-completar, .ek-asistente .ek-btn { display: none !important; }
}

/* =====================================================================
   Resoluciones
   ===================================================================== */
.ek-subtitulo-formulario { font-size: .95rem; margin: 1.25rem 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--ek-borde); }
.ek-tarjeta-destacada-suave { border-color: color-mix(in srgb, var(--ek-primario) 40%, var(--ek-borde)); }
.ek-texto-plantilla { font-size: 15px; line-height: 1.5; }
.ek-articulo-plantilla { padding: .75rem 0; border-top: 1px solid var(--ek-borde); }
.ek-articulo-plantilla .ek-fila-titulo { flex-wrap: nowrap; margin-bottom: .5rem; }
.ek-articulo-fijo { margin: 1rem 0; padding: .9rem 1rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-articulo-fijo > strong { display: block; margin-bottom: .5rem; }
.ek-ayuda-plantilla summary { font-weight: 600; cursor: pointer; min-height: 32px; }
.ek-marcadores { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ek-marcadores td { padding: .3rem .4rem; border-top: 1px solid var(--ek-borde); vertical-align: top; }
.ek-marcadores td:first-child { white-space: nowrap; }
.ek-imagenes-institucionales { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.ek-imagen-institucional { display: flex; flex-direction: column; gap: .5rem; }
.ek-imagen-marco { display: grid; place-items: center; height: 140px; border: 1px dashed var(--ek-borde); border-radius: var(--ek-radio-chico); background: #fff; }
.ek-imagen-marco img { max-width: 90%; max-height: 120px; object-fit: contain; }
.ek-imagen-institucional label.ek-btn { cursor: pointer; }
@media (min-width: 760px) {
    .ek-imagenes-institucionales { grid-template-columns: 1fr 1fr; }
}

/* ----- Citaciones de convivencia ----- */
.ek-citacion-nueva { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--ek-borde); }
.ek-citados { border: 0; padding: 0; margin: 0 0 .75rem; }
.ek-citados legend { font-weight: 600; margin-bottom: .4rem; }
.ek-lista-citados { max-height: 240px; }
.ek-lista-citados li { padding: 0 .6rem; }
.ek-lista-citados .ek-check { width: 100%; min-height: 44px; }
.ek-citaciones { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.ek-citaciones .ek-chip-estado { white-space: normal; }
.ek-citaciones > li { padding: .8rem .9rem; border: 1px solid var(--ek-borde); border-left: 4px solid var(--ek-primario); border-radius: var(--ek-radio-chico); }
.ek-citaciones p { margin: .35rem 0 .5rem; }
.ek-citacion-cuando { display: flex; flex-direction: column; gap: .1rem; }
.ek-citacion-cuando strong::first-letter { text-transform: uppercase; }
.ek-citaciones .ek-etiquetas { list-style: none; padding: 0; margin: 0; }

/* Correos enviados: direcciones y asuntos largos se parten en vez de ensanchar la tarjeta en el teléfono. */
.ek-tabla-correos td { overflow-wrap: anywhere; }
.ek-tabla-correos td::before { overflow-wrap: normal; }

/* ----- Horario general: franjas por filas y grupos por columnas ----- */
/* Con muchos grupos la tabla es más ancha que el teléfono: se desplaza dentro de su marco, con la hora siempre a la vista. */
.ek-general h2 { font-size: 1rem; }
.ek-general-marco { overflow-x: auto; margin: 0 -.25rem; padding: 0 .25rem; }
.ek-general-tabla { border-collapse: separate; border-spacing: 3px; width: 100%; table-layout: fixed; min-width: calc(60px + var(--ek-columnas, 4) * 92px); }
.ek-general-tabla th.ek-general-hora { width: 60px; }
.ek-general-tabla th { font-size: .76rem; font-weight: 700; color: var(--ek-texto-suave); padding: .25rem; white-space: nowrap; }
.ek-general-tabla td { min-width: 88px; height: 52px; padding: 0; vertical-align: top; }
.ek-general-hora {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 56px;
    background: var(--ek-superficie);
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.ek-general-hora small { display: block; font-weight: 500; }
.ek-general-clase {
    display: flex;
    flex-direction: column;
    gap: 1px;
    height: 100%;
    min-height: 52px;
    padding: .3rem .4rem;
    border-radius: 6px;
    background: var(--ek-clase);
    color: #fff;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.ek-general-clase strong { font-size: .8rem; line-height: 1.1; text-shadow: 0 1px 1px rgb(0 0 0 / 25%); }
.ek-general-clase small { font-size: .68rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgb(0 0 0 / 25%); }
.ek-general-descanso {
    height: 30px;
    border-radius: 6px;
    background: repeating-linear-gradient(135deg, var(--ek-superficie-2) 0 8px, transparent 8px 16px);
    color: var(--ek-texto-suave);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle !important;
}
.ek-general-tabla tr.ek-horario-fila-descanso td { height: 30px; }
.ek-solo-impresion { display: none; }

@media print {
    .ek-solo-impresion { display: block; }
    .ek-general { break-after: page; }
    .ek-general-marco { overflow: visible; }
    .ek-general-tabla td { min-width: 0; }
}

/* ----- Ausencias y reemplazos ----- */
.ek-campo-fecha { width: auto; }
.ek-girar .ek-icono { transform: rotate(180deg); }
.ek-fecha-larga { font-family: var(--ek-fuente-titulos); }
.ek-fila-pendiente td:first-child { box-shadow: inset 4px 0 0 var(--ek-error); }
.ek-ausencia select.ek-input { min-width: 0; width: 100%; }
@media print {
    .ek-reemplazos-dia { border: 0; padding: 0; }
}
.ek-celda-reemplazo { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ek-celda-reemplazo select.ek-input { flex: 1 1 220px; }
.ek-avisado { white-space: nowrap; }
@media (min-width: 900px) {
    .ek-celda-reemplazo { display: table-cell; }
    .ek-celda-reemplazo select.ek-input { min-width: 300px; }
}

/* ----- Agenda ----- */
.ek-aviso-canal { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.ek-aviso-canal .ek-icono { vertical-align: -3px; }
.ek-acciones-izquierda { justify-content: flex-start; flex-wrap: wrap; }
.ek-agenda-dia { margin: 1.25rem 0 .5rem; font-size: 1rem; color: var(--ek-texto-suave); }
.ek-evento { display: flex; gap: 1rem; margin-bottom: .75rem; border-left: 4px solid var(--ek-primario); }
.ek-evento h3 { margin: 0 0 .25rem; font-size: 1.02rem; }
.ek-evento p { margin: .25rem 0; }
.ek-evento-hora { flex: none; display: flex; flex-direction: column; min-width: 72px; font-variant-numeric: tabular-nums; }
.ek-evento-hora small { color: var(--ek-texto-suave); }
.ek-evento-cuerpo { flex: 1; min-width: 0; }
.ek-evento-descripcion { white-space: pre-line; }
.ek-evento-cancelado { opacity: .65; border-left-color: var(--ek-borde); }
.ek-evento-cancelado h3 { text-decoration: line-through; }
.ek-texto-error { color: var(--ek-error); }
.ek-pasos-numerados { padding-left: 1.2rem; }
.ek-pasos-numerados li { margin-bottom: .5rem; }

/* ----- Órganos institucionales ----- */
.ek-organos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); margin-bottom: 1rem; }
.ek-organos .ek-tarjeta { margin-bottom: 0; }
.ek-integrantes-organo { list-style: none; padding: 0; margin: .5rem 0; }
.ek-integrantes-organo .ek-chip-estado { white-space: normal; }
.ek-papel { width: auto; min-width: 130px; }
/* Integrantes de la comunidad (sin cuenta): se distinguen del personal con el color de la institución. */
.ek-chip-comunidad { background: color-mix(in srgb, var(--ek-primario) 12%, var(--ek-superficie)); color: var(--ek-primario); }
.ek-subtitulo-organo { font-size: 1rem; margin: 1rem 0 .5rem; }
.ek-composicion { margin: .5rem 0; font-size: .9rem; }
/* En el teléfono cada integrante es una tarjeta con sus campos uno bajo otro; en pantalla ancha, en dos columnas. */
.ek-externo { border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); padding: .75rem; margin: 0 0 .75rem; display: grid; gap: .5rem; min-width: 0; }
.ek-externo .ek-campo { margin: 0; min-width: 0; }
.ek-externo-quitar { justify-self: start; }
@media (min-width: 700px) {
    .ek-externo { grid-template-columns: 1fr 1fr; }
    .ek-externo-quitar { grid-column: 1 / -1; }
}

/* =====================================================================
   Firma electrónica
   ===================================================================== */
/* La página a la que llega quien firma desde el correo: sin menú, pensada para el teléfono. */
.ek-firma-fondo { min-height: 100dvh; background: var(--ek-menu); padding: calc(.75rem + env(safe-area-inset-top)) .5rem calc(1rem + env(safe-area-inset-bottom)); }
.ek-firma-marco { max-width: 820px; margin: 0 auto; }
.ek-firma { margin: 0; padding: 1.1rem .9rem; }
.ek-firma h1 { font-size: 1.3rem; margin: .5rem 0 .25rem; }
.ek-firma-cabecera { display: flex; gap: .7rem; align-items: center; padding-bottom: .75rem; border-bottom: 1px solid var(--ek-borde); }
.ek-firma-cabecera div { display: flex; flex-direction: column; min-width: 0; }
.ek-firma-cabecera small { color: var(--ek-texto-suave); }
.ek-firma-estado { text-align: center; padding: 1.5rem .5rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.ek-firma-estado > .ek-icono { color: var(--ek-texto-suave); }
.ek-firma-hecha > .ek-icono { color: var(--ek-exito); }
/* Las páginas del documento se leen como papel, en claro también con el tema oscuro. */
.ek-firma-paginas { display: flex; flex-direction: column; gap: .6rem; margin: .9rem 0 .5rem; }
.ek-firma-paginas img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); }
.ek-firma-formulario { margin-top: .75rem; border-top: 1px solid var(--ek-borde); padding-top: .9rem; }
.ek-firma-acepto { align-items: flex-start; }
.ek-firma-pad { margin: .75rem 0; }
.ek-firma-lienzo {
    display: block; width: 100%; height: 200px; background: #fff; border: 2px dashed var(--ek-borde);
    border-radius: var(--ek-radio-chico); touch-action: none; cursor: crosshair;
}
.ek-firma-pad-pie { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; margin-top: .35rem; }
.ek-firma-huella { margin-top: .75rem; overflow-wrap: anywhere; }
.ek-firma-huella code { font-size: .78rem; }

/* La tarjeta del caso: quién firmó y quién falta. */
.ek-firma-progreso { height: 8px; border-radius: 4px; background: var(--ek-superficie-2); overflow: hidden; margin: .5rem 0; }
.ek-firma-progreso span { display: block; height: 100%; background: var(--ek-exito); }
.ek-firmantes { list-style: none; padding: 0; margin: .5rem 0; }
.ek-firmantes > li { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--ek-borde); }
.ek-firmante-datos { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.ek-firmante-datos small { overflow-wrap: anywhere; }
.ek-firmante-acciones, .ek-firmante-reenvio { flex-basis: 100%; }
.ek-firmantes-editar > li { flex-direction: column; align-items: stretch; }
.ek-firmante-quitado { opacity: .6; }
.ek-firma-historia { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--ek-borde); }

@media (min-width: 700px) {
    .ek-firma-fondo { padding: 2rem 1rem; }
    .ek-firma { padding: 1.6rem 1.8rem; }
    .ek-firma-lienzo { height: 220px; }
}

/* =====================================================================
   Estudiantes: lista, ficha en un cajón lateral y familia
   ===================================================================== */
.ek-chip-tramite { background: var(--ek-extra-suave); color: var(--ek-extra); }
.ek-avisos-fila { display: block; margin-top: .25rem; }
.ek-acciones-centro { justify-content: center; margin: 1rem 0; }
.ek-persona-linea { display: flex; flex-direction: column; min-width: 0; }
.ek-persona-linea a { color: var(--ek-primario); font-size: .85rem; text-decoration: none; }
.ek-persona-linea a:hover { text-decoration: underline; }

/* El cajón ocupa toda la pantalla en el teléfono y se abre desde la derecha en escritorio. */
.ek-cajon-telon {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgb(16 24 40 / 45%);
    animation: ek-aparecer 180ms ease-out;
}
.ek-cajon {
    position: fixed;
    inset: 0;
    z-index: 81;
    display: flex;
    flex-direction: column;
    background: var(--ek-fondo);
    box-shadow: -12px 0 32px rgb(16 24 40 / 20%);
    animation: ek-entrar-derecha 240ms var(--ek-salida);
}
.ek-cajon-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    background: var(--ek-superficie);
    border-bottom: 1px solid var(--ek-borde);
}
.ek-cajon-nombre { font-size: 1.1rem; line-height: 1.25; }
.ek-cajon-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }

.ek-cuenta-estudiante {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .65rem .8rem;
    border-radius: var(--ek-radio-chico);
    background: var(--ek-superficie);
    border: 1px solid var(--ek-borde);
    font-size: .9rem;
    overflow-wrap: anywhere;
}
.ek-cuenta-estudiante .ek-icono { flex: none; color: var(--ek-primario); }

.ek-seccion-ficha {
    padding: 1rem;
    background: var(--ek-superficie);
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio);
}
.ek-seccion-ficha h3 {
    margin: 0 0 .75rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ek-texto-suave);
}

.ek-datos { display: grid; grid-template-columns: 1fr; gap: .6rem 1rem; margin: 0; }
.ek-dato { min-width: 0; }
.ek-dato dt { font-size: .75rem; color: var(--ek-texto-suave); }
.ek-dato dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.ek-matricula + .ek-matricula { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--ek-borde); }
.ek-matricula-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }

.ek-familiares { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.ek-familiar {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .75rem;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-chico);
    min-width: 0;
}
.ek-familiar header { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .2rem; }
.ek-familiar strong { overflow-wrap: anywhere; }
.ek-familiar small { color: var(--ek-texto-suave); }
.ek-familiar-acudiente { border-color: color-mix(in srgb, var(--ek-exito) 45%, var(--ek-borde)); background: color-mix(in srgb, var(--ek-exito-suave) 45%, var(--ek-superficie)); }
.ek-etiqueta-acudiente { background: var(--ek-exito-suave); color: var(--ek-exito); }
.ek-familiar-contacto { display: flex; flex-wrap: wrap; gap: .25rem; margin: .2rem 0 0 -.6rem; }
.ek-familiar-contacto .ek-btn { min-height: 40px; overflow-wrap: anywhere; white-space: normal; text-align: left; }

@keyframes ek-aparecer { from { opacity: 0; } }
@keyframes ek-entrar-derecha { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ek-cajon, .ek-cajon-telon { animation: none; } }

@media (min-width: 560px) {
    .ek-datos { grid-template-columns: 1fr 1fr; }
    .ek-familiares { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 760px) {
    .ek-cajon { inset: 0 0 0 auto; width: min(640px, 92vw); border-left: 1px solid var(--ek-borde); }
    .ek-cajon-cuerpo { padding: 1.25rem; }
    .ek-filtros-estudiantes > .ek-input[type="search"] { max-width: 340px; }
    .ek-filtros-estudiantes > select.ek-input { max-width: 220px; }
}

@media print {
    .ek-cajon-telon { display: none !important; }
    .ek-cajon { position: static; box-shadow: none; animation: none; }
}

/* =====================================================================
   Dictado por voz y relato redactado por el asistente
   ===================================================================== */
.ek-dictado { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0; }
.ek-dictado-estado { flex-basis: 100%; min-height: 1em; }
.ek-dictado-estado:empty { display: none; }
.ek-sin-dictado .ek-dictar { display: none !important; }
.ek-dictar.grabando {
    background: var(--ek-error);
    border-color: var(--ek-error);
    color: #fff;
    animation: ek-latido 1.4s ease-in-out infinite;
}
.ek-dictar.grabando .ek-icono { color: #fff; }
@keyframes ek-latido { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ek-error) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ek-dictar.grabando { animation: none; } }

.ek-propuesta-relato {
    margin: .75rem 0;
    padding: .9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--ek-primario) 35%, var(--ek-borde));
    border-radius: var(--ek-radio);
    background: var(--ek-primario-suave);
}
.ek-propuesta-relato header { display: flex; align-items: center; gap: .4rem; color: var(--ek-primario); margin-bottom: .4rem; }
.ek-propuesta-texto { white-space: pre-line; margin: 0 0 .5rem; line-height: 1.55; color: var(--ek-texto); }
.ek-bitacora-nueva .ek-dictado { justify-content: space-between; margin: 0; }

/* =====================================================================
   Educación inclusiva: la figura humana marca discapacidad y la estrella, capacidad excepcional
   ===================================================================== */
:root {
    --ek-inclusion: #1565c0;
    --ek-inclusion-suave: #e3eefb;
    --ek-talento: #b7791f;
    --ek-talento-suave: #fdf3dc;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) { --ek-inclusion: #7fb2f0; --ek-inclusion-suave: #182b44; --ek-talento: #f2c14e; --ek-talento-suave: #3a2f14; }
}
:root[data-tema="oscuro"] { --ek-inclusion: #7fb2f0; --ek-inclusion-suave: #182b44; --ek-talento: #f2c14e; --ek-talento-suave: #3a2f14; }

.ek-nombre-inclusion { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.ek-marca-inclusion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 24px;
    height: 24px;
    border-radius: 99px;
    flex: none;
    vertical-align: middle;
}
.ek-marca-discapacidad { background: var(--ek-inclusion-suave); color: var(--ek-inclusion); }
.ek-marca-capacidad { background: var(--ek-talento-suave); color: var(--ek-talento); }
/* Con texto puede partirse: hay categorías del SIMAT largas («Auditiva: usuario de lengua de señas colombiana»). */
.ek-marca-inclusion.con-texto { width: auto; height: auto; max-width: 100%; flex: 0 1 auto; border-radius: 14px; padding: .3rem .7rem .3rem .45rem; font-size: .82rem; font-weight: 600; }
.ek-marca-inclusion.con-texto > span { min-width: 0; }
.ek-marcas-ficha { display: flex; flex-wrap: wrap; gap: .4rem; }

.ek-seccion-inclusion { border-color: color-mix(in srgb, var(--ek-inclusion) 35%, var(--ek-borde)); }
.ek-campo-con-marca { display: flex; align-items: flex-end; gap: .5rem; min-width: 0; }
.ek-campo-con-marca > .ek-icono { flex: none; margin-bottom: .7rem; }
.ek-campo-con-marca > .ek-campo { flex: 1; min-width: 0; }
.ek-marca-discapacidad-campo > .ek-icono { color: var(--ek-inclusion); }
.ek-marca-capacidad-campo > .ek-icono { color: var(--ek-talento); }

/* Formulario dentro del cajón: los botones quedan siempre a la vista al pie. */
.ek-formulario-estudiante .ek-formulario-rejilla { gap: .75rem; }
.ek-formulario-estudiante .ek-subtitulo-formulario { margin: 1rem 0 .5rem; font-size: .95rem; }
.ek-formulario-estudiante .ek-subtitulo-formulario:first-of-type { margin-top: 0; }
.ek-cajon-pie {
    position: sticky;
    bottom: -1rem;
    margin: 0 -1rem -1rem;
    padding: .75rem 1rem 1rem;
    background: var(--ek-fondo);
    border-top: 1px solid var(--ek-borde);
}
.ek-cajon-pie .ek-aviso { margin-bottom: .6rem; }
.ek-cajon-cabecera .ek-acciones { flex-wrap: nowrap; align-items: center; }
@media (min-width: 760px) {
    .ek-cajon-pie { bottom: -1.25rem; margin: 0 -1.25rem -1.25rem; padding: .75rem 1.25rem 1.25rem; }
}
.ek-cajon-cabecera > div:first-child:not(.ek-persona) { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 760px) {
    .ek-filtros-estudiantes { flex-wrap: wrap; }
    .ek-filtros-estudiantes > .ek-input[type="search"] { flex: 1 1 220px; }
    .ek-filtros-estudiantes > select.ek-input { flex: 0 1 200px; }
    .ek-filtros-estudiantes > .ek-ayuda { white-space: nowrap; }
}

/* ----- Inclusión (PIAR y caracterización) ----- */
.ek-inclusion-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.ek-inclusion-cifra { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; }
.ek-inclusion-cifra .ek-marca-inclusion { width: 44px; height: 44px; }
.ek-inclusion-cifra div { display: flex; flex-direction: column; min-width: 0; }
.ek-inclusion-cifra strong { font-size: 1.5rem; line-height: 1.1; color: var(--ek-titulo); }
.ek-inclusion-cifra span { font-size: .82rem; color: var(--ek-texto-suave); }
.ek-inclusion-persona {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
}
button.ek-inclusion-persona { cursor: pointer; }
button.ek-inclusion-persona:hover span { color: var(--ek-primario); text-decoration: underline; }
.ek-tabla-inclusion td[data-etiqueta="Estudiante"] { display: block; padding-bottom: .6rem; border-bottom: 1px solid var(--ek-borde); margin-bottom: .2rem; }
.ek-tabla-inclusion td[data-etiqueta="Estudiante"]::before { display: none; }
.ek-inclusion-grupo { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ek-tabla-inclusion td select.ek-inclusion-selector { max-width: 100%; width: 100%; font-size: 16px; }
.ek-tabla-inclusion td:has(> .ek-inclusion-selector) { flex-direction: column; align-items: stretch; gap: .3rem; }
@media (min-width: 760px) {
    .ek-tabla-inclusion td[data-etiqueta="Estudiante"] { display: table-cell; border-bottom: 0; margin: 0; padding-bottom: .7rem; }
    .ek-tabla-inclusion td:has(> .ek-inclusion-selector) { display: table-cell; }
    .ek-tabla-inclusion td select.ek-inclusion-selector { min-width: 200px; }
    .ek-inclusion-grupo { align-items: flex-start; text-align: left; }
}
.ek-marca-piar { background: color-mix(in srgb, var(--ek-primario) 12%, var(--ek-superficie)); color: var(--ek-primario); }
.ek-marca-vencido { background: var(--ek-error-suave); color: var(--ek-error); }
.ek-inclusion-piar { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; text-align: right; }
.ek-inclusion-cifras { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* PIAR del estudiante: en el teléfono, una columna; en escritorio, el plazo y el equipo al lado. */
.ek-piar { display: grid; gap: 1rem; }
.ek-piar-principal, .ek-piar-lateral { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ek-piar-principal .ek-tarjeta { display: flex; flex-direction: column; gap: .9rem; }
.ek-piar-principal h2, .ek-piar-lateral h2 { margin: 0; font-size: 1.05rem; }
.ek-piar-campo textarea { font-size: 16px; min-height: 96px; }
.ek-piar-persona { gap: .75rem; margin: .25rem 0 .5rem; }
.ek-piar-persona h1 { margin: 0; }
.ek-piar-persona p { margin: 0; color: var(--ek-texto-suave); }
.ek-piar-guardar { flex-direction: column; align-items: stretch; gap: .5rem; }
.ek-piar-guardar .ek-btn { min-height: 44px; }
.ek-piar-equipo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.ek-piar-equipo li { display: flex; align-items: center; gap: .6rem; }
.ek-piar-equipo span { display: flex; flex-direction: column; min-width: 0; }
.ek-piar-equipo small { color: var(--ek-texto-suave); }
.ek-piar-ruta { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .4rem; color: var(--ek-texto-suave); }
.ek-piar-ruta li.actual { color: var(--ek-texto); font-weight: 600; }
.ek-piar-ruta li.hecho { color: var(--ek-exito); font-weight: 600; }
.ek-piar-ruta li.hecho::marker { content: "✓  "; }
@media (min-width: 760px) {
    .ek-inclusion-piar { align-items: flex-start; text-align: left; }
    .ek-piar-guardar { flex-direction: row; align-items: center; justify-content: flex-end; }
}
@media (min-width: 1100px) {
    .ek-piar { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
    .ek-piar-lateral { position: sticky; top: 1rem; }
}

/* Ajustes razonables del PIAR: una tarjeta por espacio en el periodo elegido. */
.ek-ajustes { display: grid; gap: .75rem; }
/* Los periodos se parten en dos renglones en el teléfono: el elegido (el que corre) siempre queda a la vista. */
.ek-periodos-piar { flex-wrap: wrap; overflow: visible; }
.ek-ajuste { display: flex; flex-direction: column; gap: .6rem; }
.ek-ajuste.vacio { background: var(--ek-superficie-2); box-shadow: none; }
.ek-ajuste-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.ek-ajuste-cabecera h3 { margin: 0; font-size: 1rem; color: var(--ek-titulo); }
.ek-ajuste-cabecera small { display: block; }
.ek-ajuste-detalle { display: grid; gap: .15rem .75rem; margin: 0; }
.ek-ajuste-detalle dt { font-size: .78rem; font-weight: 700; color: var(--ek-texto-suave); text-transform: uppercase; letter-spacing: .04em; margin-top: .35rem; }
.ek-ajuste-detalle dd { margin: 0; white-space: pre-line; }
.ek-ajuste-acciones { flex-wrap: wrap; justify-content: flex-end; }
.ek-ajuste-formulario { display: flex; flex-direction: column; gap: .9rem; }
.ek-ajuste-opciones { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ek-ajuste-opciones legend { font-weight: 600; font-size: .85rem; margin-bottom: .4rem; padding: 0; }
.ek-opcion {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .35rem .8rem;
    border: 1px solid var(--ek-borde);
    border-radius: 99px;
    background: var(--ek-superficie);
    cursor: pointer;
    font-size: .9rem;
}
.ek-opcion:has(input:checked) { border-color: var(--ek-primario); background: var(--ek-primario-suave); color: var(--ek-primario); font-weight: 600; }
.ek-opcion input { width: 18px; height: 18px; accent-color: var(--ek-primario); }
.ek-ajuste-intensidad { display: grid; gap: .4rem; }
.ek-ajuste-intensidad .ek-opcion { border-radius: 12px; }
.ek-ajuste-intensidad .ek-opcion span { display: flex; flex-direction: column; }
.ek-ajuste-intensidad .ek-opcion small { color: var(--ek-texto-suave); font-weight: 400; }
/* Propuestas del asistente en el formulario del ajuste: cada una es una tarjeta plana para usarla o descartarla. */
.ek-asistente-piar { display: flex; flex-direction: column; gap: .5rem; }
.ek-asistente-piar p { margin: 0; }
.ek-propuestas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ek-propuesta { display: flex; flex-direction: column; gap: .4rem; padding: .75rem; border: 1px solid var(--ek-borde); border-radius: 12px; background: var(--ek-superficie-2); }

/* Tareas en equipo: la nota propia de cada integrante y la asignación de equipos, una fila por estudiante. */
.ek-entrega-integrantes { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.ek-entrega-integrantes legend { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; padding: 0; }
.ek-entrega-integrante { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ek-entrega-integrante .ek-entrega-nota { max-width: 6rem; }
/* Equipos: un tablero con una tarjeta por equipo; cada integrante se mueve con su selector. «Sin equipo» va arriba y
   resaltado, porque quien está ahí no puede entregar. */
.ek-equipos-barra { display: grid; gap: .85rem; padding: 1rem; margin-bottom: .85rem; }
.ek-equipos-cifras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ek-equipos-cifras li { display: grid; padding: .55rem .7rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-equipos-cifras strong { font-size: 1.35rem; line-height: 1.1; color: var(--ek-titulo); }
.ek-equipos-cifras small { color: var(--ek-texto-suave); font-size: .78rem; }
.ek-equipos-cifras li.alerta { background: var(--ek-error-suave); }
.ek-equipos-cifras li.alerta strong { color: var(--ek-error); }
.ek-equipos-azar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--ek-texto-suave); font-size: .92rem; }
.ek-equipos-azar label { font-weight: 600; color: var(--ek-texto); }
.ek-equipos-azar .ek-input { width: 4.5rem; text-align: center; }
.ek-equipos-azar .ek-btn { flex: 1 1 100%; justify-content: center; }
.ek-equipos-tablero { display: grid; gap: .75rem; }
.ek-equipo-tarjeta { display: grid; gap: .5rem; align-content: start; padding: .85rem 1rem 1rem; border-radius: var(--ek-radio); background: var(--ek-superficie);
    border: 1px solid var(--ek-borde); border-top: 4px solid var(--ek-primario); box-shadow: var(--ek-sombra); }
.ek-equipo-tarjeta > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ek-equipo-tarjeta > header h2 { margin: 0; font-size: 1.05rem; color: var(--ek-titulo); }
.ek-equipo-tarjeta p { margin: 0; }
.ek-equipo-titulo { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--ek-titulo); border-color: transparent; background: transparent; padding-left: .35rem; }
.ek-equipo-tarjeta .ek-equipo-titulo { padding-left: .4rem; margin-left: -.4rem; }
.ek-equipo-titulo:hover { border-color: var(--ek-borde); }
.ek-equipo-titulo:focus { background: var(--ek-superficie); }
.ek-equipo-sin { margin-bottom: .75rem; border-top-color: var(--ek-error); background: color-mix(in srgb, var(--ek-error-suave) 45%, var(--ek-superficie)); }
.ek-equipo-integrantes { list-style: none; margin: 0; padding: 0; display: grid; }
.ek-equipo-integrantes li { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(7.5rem, 9rem); align-items: center; gap: .55rem; padding: .4rem 0;
    border-top: 1px solid var(--ek-borde); }
.ek-equipo-integrantes li:first-child { border-top: 0; }
.ek-equipo-integrante-nombre { overflow-wrap: anywhere; font-size: .95rem; }
.ek-equipo-integrantes select { padding-top: .35rem; padding-bottom: .35rem; }
.ek-equipo-quitar { justify-self: start; color: var(--ek-texto-suave); }
.ek-equipo-agregar { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 64px; padding: 1rem; border: 2px dashed var(--ek-borde);
    border-radius: var(--ek-radio); background: transparent; color: var(--ek-primario); font: inherit; font-weight: 700; cursor: pointer; }
.ek-equipo-agregar:hover { border-color: var(--ek-primario); background: var(--ek-primario-suave); }
.ek-equipos-guardar { position: sticky; bottom: .75rem; z-index: 4; display: flex; justify-content: flex-end; margin-top: .85rem; }
.ek-equipos-guardar .ek-btn { box-shadow: var(--ek-sombra); }
@media (min-width: 760px) {
    .ek-equipos-barra { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .ek-equipos-cifras { grid-template-columns: repeat(3, minmax(6.5rem, 9rem)); }
    .ek-equipos-azar .ek-btn { flex: none; }
    .ek-equipos-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) { .ek-equipos-tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ek-mi-tarea-equipo { display: flex; align-items: flex-start; gap: .4rem; margin: .4rem 0; font-size: .9rem; color: var(--ek-texto-suave); }

/* Tablero del PIAR: la fila del total resalta. */
.ek-tablero-piar { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .75rem; }
.ek-tablero-piar .ek-fila-total td { font-weight: 700; }

/* Historia escolar: cada año con sus documentos; las entregas, con su huella. */
.ek-historia { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .75rem; }
.ek-historia-anios, .ek-historia-entregas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ek-historia-anios li, .ek-historia-entregas li { display: flex; flex-direction: column; gap: .25rem; padding: .6rem 0; border-bottom: 1px solid var(--ek-borde); }
.ek-historia-anio { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ek-historia-anio strong { font-size: 1.1rem; color: var(--ek-titulo); }
.ek-piar-texto { margin: 0; white-space: pre-line; }

/* Los anexos del PIAR: cada enlace con su altura táctil. */
.ek-piar-documentos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ek-piar-documentos a { display: flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 600; color: var(--ek-primario); text-decoration: none; }

/* Acta de acuerdo del PIAR: cada actividad en casa es un bloque con su línea; la frecuencia y «Quitar» van juntas. */
.ek-acta-formulario { display: flex; flex-direction: column; gap: .75rem; }
.ek-acta-estado, .ek-acta-formulario .ek-tarjeta { display: flex; flex-direction: column; gap: .6rem; }
.ek-acta-estado p { margin: 0; }
.ek-acta-papel { align-items: flex-end; }
.ek-actividad-casa { display: flex; flex-direction: column; gap: .5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--ek-borde); }
.ek-actividad-casa .ek-formulario-linea { align-items: flex-end; }
.ek-actividad-quitar { align-self: flex-end; }

/* Seguimiento: un resumen del año arriba y, en cada ajuste, cómo le fue en el periodo. */
.ek-seguimiento-resumen { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .75rem; }
.ek-seguimiento-resumen h3 { margin: 0; font-size: 1rem; color: var(--ek-titulo); }
.ek-seguimiento-periodos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.ek-seguimiento-periodos li { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; }
.ek-seguimiento { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--ek-borde); }
.ek-seguimiento h4 { margin: 0; font-size: .85rem; color: var(--ek-titulo); }
.ek-seguimiento .ek-ajuste-formulario, .ek-seguimiento .ek-ajuste-detalle, .ek-seguimiento .ek-ajuste-acciones { align-self: stretch; }
.ek-seguimiento p { margin: 0; }
@media (min-width: 760px) {
    .ek-seguimiento-resumen { flex-direction: row; align-items: center; justify-content: space-between; }
    .ek-ajuste-detalle { grid-template-columns: 110px 1fr; }
    .ek-ajuste-detalle dt { margin-top: 0; padding-top: .1rem; }
    .ek-ajuste-intensidad { grid-template-columns: 1fr 1fr; }
    .ek-ajuste-intensidad legend { grid-column: 1 / -1; }
}

/* Evaluaciones en línea (docs/EVALUACIONES.md): banco de preguntas, armado de la evaluación, presentar y revisar. Primero
   el teléfono: opciones grandes de tocar (44 px) y una columna; en pantalla ancha, más aire. */
.ek-btn-icono { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
.ek-icono-arriba { transform: rotate(180deg); }
.ek-opciones-pregunta { display: grid; gap: .5rem; margin: 0; padding: .75rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); }
.ek-opciones-pregunta legend { padding: 0 .3rem; font-weight: 600; color: var(--ek-titulo); }
.ek-opcion-pregunta { display: grid; grid-template-columns: 28px minmax(0, 1fr) 44px; align-items: center; gap: .4rem; }
.ek-opcion-pregunta input[type=radio], .ek-opcion-pregunta input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--ek-primario); }
.ek-par-pregunta { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: .35rem; align-items: center; padding-bottom: .5rem; border-bottom: 1px dashed var(--ek-borde); }
.ek-par-pregunta > span { display: none; }
.ek-par-pregunta > input:nth-of-type(2) { grid-column: 1; }
.ek-par-pregunta > button { grid-row: 1 / span 2; grid-column: 2; }
.ek-banco { display: grid; gap: .75rem; }
.ek-pregunta-banco { display: grid; gap: .4rem; padding: 1rem; }
.ek-pregunta-banco.archivada { opacity: .65; }
.ek-pregunta-banco.ajena { border-left: 3px solid var(--ek-info); }
.ek-banco-filtros { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.ek-pregunta-banco p { margin: 0; }
.ek-pregunta-banco .ek-ayuda { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ek-pregunta-enunciado { margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--ek-texto); font-weight: 500; }
.ek-pregunta-opciones { margin: 0; padding-left: 1.1rem; display: grid; gap: .15rem; color: var(--ek-texto-suave); font-size: .92rem; overflow-wrap: anywhere; }
.ek-pregunta-opciones li.correcta { color: var(--ek-exito); font-weight: 600; list-style: none; margin-left: -1.1rem; }
.ek-pregunta-opciones li.correcta .ek-icono { vertical-align: -2px; margin-right: .2rem; }

.ek-resumen-evaluacion { display: grid; gap: .6rem; padding: 1rem; }
.ek-resumen-evaluacion p { margin: 0; }
.ek-datos-evaluacion { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ek-datos-evaluacion li { display: grid; padding: .5rem .65rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-datos-evaluacion small { color: var(--ek-texto-suave); font-size: .75rem; }
.ek-datos-evaluacion strong { color: var(--ek-titulo); font-size: .92rem; }

/* Modalidad de la evaluación: tres tarjetas, una elegida. En el teléfono, una debajo de otra. */
.ek-modalidades { border: 0; margin: 0 0 .25rem; padding: 0; display: grid; gap: .5rem; }
.ek-modalidades legend { font-weight: 600; font-size: .85rem; margin-bottom: .4rem; padding: 0; }
.ek-modalidad {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    min-height: 44px;
    padding: .7rem .85rem;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-chico);
    background: var(--ek-superficie);
    cursor: pointer;
}
.ek-modalidad input { margin-top: .2rem; width: 18px; height: 18px; flex: none; accent-color: var(--ek-primario); }
.ek-modalidad span { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ek-modalidad small { color: var(--ek-texto-suave); font-size: .82rem; line-height: 1.35; }
.ek-modalidad.activa { border-color: var(--ek-primario); background: var(--ek-primario-suave); }
.ek-modalidad.activa strong { color: var(--ek-primario); }
@media (min-width: 760px) {
    .ek-modalidades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ek-modalidades legend { grid-column: 1 / -1; }
}


/* Leer las hojas: los botones para la cámara y el PDF, y lo leído (lo último arriba). */
.ek-subir { position: relative; cursor: pointer; }
.ek-subir.deshabilitado { opacity: .55; pointer-events: none; }
.ek-lecturas { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ek-lecturas li {
    display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .5rem .75rem;
    border: 1px solid var(--ek-borde); border-left: 4px solid var(--ek-exito); border-radius: var(--ek-radio-chico); background: var(--ek-superficie);
}
.ek-lecturas li.revisar { border-left-color: var(--ek-extra); }
.ek-lecturas li.error { border-left-color: var(--ek-error); }
.ek-lectura-quien { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ek-lectura-quien small { color: var(--ek-texto-suave); display: flex; flex-wrap: wrap; gap: 0 .4rem; }
.ek-lecturas li.error .ek-lectura-quien small span { color: var(--ek-error); }
.ek-lectura-aviso { color: var(--ek-extra); }
.ek-lectura-nota { font-size: 1.35rem; font-weight: 800; color: var(--ek-titulo); }

/* Revisar una hoja: la imagen enderezada y los renglones. En el teléfono, la imagen arriba. */
.ek-revision-hoja { display: grid; gap: 1rem; margin: 1rem 0 1.5rem; }
.ek-revision-imagen img { width: 100%; height: auto; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); background: #fff; }
.ek-revision-renglones { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; align-content: start; }
.ek-revision-renglones li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .3rem .5rem; border-radius: var(--ek-radio-chico); }
.ek-revision-renglones li.dudoso { background: var(--ek-extra-suave); }
.ek-revision-etiqueta { flex: none; width: 3.4rem; text-align: right; font-weight: 700; font-size: .9rem; }
.ek-revision-burbujas { display: flex; flex-wrap: wrap; gap: .3rem; }
.ek-revision-burbuja {
    width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ek-borde-fuerte, #8C8C8C);
    background: var(--ek-superficie); color: var(--ek-texto); font-weight: 700; font-size: .95rem; cursor: pointer;
}
.ek-revision-burbuja.marcada { background: var(--ek-titulo); border-color: var(--ek-titulo); color: var(--ek-superficie); }
.ek-revision-burbuja:disabled { cursor: default; opacity: .7; }
.ek-revision-estado { color: var(--ek-texto-suave); }
.ek-revision-renglones li.dudoso .ek-revision-estado { color: var(--ek-extra); font-weight: 600; }
@media (min-width: 900px) {
    .ek-revision-hoja { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .ek-revision-imagen { position: sticky; top: 1rem; }
    .ek-revision-burbuja { width: 36px; height: 36px; font-size: .85rem; }
}

/* Prueba escrita: versiones, descargas y la lista de hojas. */
.ek-prueba-escrita { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.ek-prueba-escrita h2 { margin: 0; font-size: 1.05rem; }
.ek-prueba-generar { align-items: flex-end; gap: .6rem; }
.ek-descargas { display: grid; gap: .5rem; }
.ek-descarga {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
    padding: .6rem .8rem;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-chico);
    background: var(--ek-superficie);
    color: var(--ek-texto);
    text-decoration: none;
}
.ek-descarga:hover { border-color: var(--ek-primario); }
.ek-descarga span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ek-descarga small { color: var(--ek-texto-suave); }
.ek-descarga-letra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ek-primario-suave);
    color: var(--ek-primario);
    font-weight: 800;
    font-size: 1.15rem;
}
.ek-descarga-clave .ek-descarga-letra { background: var(--ek-superficie-2); color: var(--ek-texto-suave); }
.ek-hojas-escritas { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ek-hojas-escritas li { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .25rem 0; border-bottom: 1px solid var(--ek-borde); }
.ek-hoja-version {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--ek-borde); font-weight: 700;
}
.ek-hoja-nombre { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ek-hoja-nombre small { color: var(--ek-texto-suave); font-size: .78rem; }
@media (min-width: 760px) {
    .ek-descargas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .ek-hojas-escritas { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}
.ek-preguntas-elegidas { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .5rem; counter-reset: pregunta; }
.ek-preguntas-elegidas > li { display: grid; gap: .5rem; padding: .75rem; counter-increment: pregunta; }
.ek-preguntas-elegidas > li .ek-pregunta-elegida-texto::before { content: counter(pregunta) ". "; font-weight: 700; color: var(--ek-primario); }
.ek-pregunta-elegida-texto { display: grid; gap: .15rem; min-width: 0; overflow-wrap: anywhere; }
.ek-pregunta-elegida-texto small { color: var(--ek-texto-suave); font-size: .78rem; }
.ek-pregunta-elegida-acciones { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.ek-puntos { display: inline-flex; align-items: center; gap: .35rem; color: var(--ek-texto-suave); font-size: .9rem; margin-right: auto; }
.ek-puntos .ek-input { width: 5.5rem; }
.ek-banco-elegir { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ek-banco-elegir > li { display: grid; gap: .4rem; padding: .6rem 0; border-top: 1px solid var(--ek-borde); }
.ek-banco-elegir > li > button { justify-self: start; }

/* Presentar: el reloj se queda arriba al bajar por las preguntas. */
.ek-reloj-evaluacion { position: sticky; top: calc(var(--ek-alto-barra, 56px) + .25rem); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
    margin: 0 0 .75rem; padding: .6rem .85rem; border-radius: var(--ek-radio); background: var(--ek-superficie); border: 1px solid var(--ek-borde); box-shadow: var(--ek-sombra); }
.ek-reloj-evaluacion strong { font-variant-numeric: tabular-nums; color: var(--ek-titulo); }
.ek-reloj-evaluacion small { margin-left: auto; color: var(--ek-texto-suave); font-size: .78rem; }
.ek-reloj-evaluacion.ultimo-minuto { border-color: var(--ek-error); background: var(--ek-error-suave); }
.ek-reloj-evaluacion.ultimo-minuto strong { color: var(--ek-error); }
.ek-instrucciones-evaluacion { margin: 0 0 .75rem; padding: .85rem 1rem; white-space: pre-line; }
.ek-presentar { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .75rem; }
.ek-presentar-pregunta, .ek-revisar-pregunta { display: grid; gap: .65rem; padding: 1rem; }
.ek-presentar-pregunta > header, .ek-revisar-pregunta > header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; color: var(--ek-texto-suave); font-size: .82rem; }
.ek-presentar-opciones { display: grid; gap: .45rem; }
.ek-presentar-opciones label { display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .55rem .75rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico);
    cursor: pointer; overflow-wrap: anywhere; }
.ek-presentar-opciones label.elegida { border-color: var(--ek-primario); background: var(--ek-primario-suave); }
.ek-presentar-opciones input { flex: none; width: 20px; height: 20px; accent-color: var(--ek-primario); }
.ek-presentar-vf { grid-template-columns: 1fr 1fr; }
.ek-completar { line-height: 2.6; }
.ek-hueco { display: inline-block; width: 9rem; max-width: 100%; min-height: 40px; padding: .3rem .5rem; margin: 0 .2rem; }
.ek-presentar-relacionar { display: grid; gap: .6rem; }
.ek-relacion { display: grid; gap: .3rem; }
.ek-relacion > span { font-weight: 600; overflow-wrap: anywhere; }
.ek-entregar-evaluacion { display: grid; gap: .5rem; padding: 1rem; margin-bottom: 1.5rem; }
.ek-entregar-evaluacion p { margin: 0; }

/* Revisar: el color dice cómo le fue en cada pregunta. */
.ek-resultado-evaluacion { display: grid; justify-items: start; gap: .35rem; padding: 1rem; margin-bottom: .75rem; }
.ek-resultado-evaluacion p { margin: 0; }
.ek-revisar-pregunta { border-left: 4px solid var(--ek-borde); }
.ek-revisar-pregunta.acertada { border-left-color: var(--ek-exito); }
.ek-revisar-pregunta.parcial { border-left-color: var(--ek-info); }
.ek-revisar-pregunta.errada { border-left-color: var(--ek-error); }
.ek-revisar-pregunta.pendiente { border-left-color: var(--ek-texto-suave); }
.ek-revisar-pregunta > header strong { color: var(--ek-titulo); font-size: .95rem; }
.ek-revision { display: grid; gap: .15rem; margin: 0; }
.ek-revision dt { margin-top: .4rem; color: var(--ek-texto-suave); font-size: .78rem; font-weight: 600; }
.ek-revision dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.ek-calificar-pregunta { display: grid; gap: .5rem; padding-top: .5rem; border-top: 1px dashed var(--ek-borde); }
.ek-mi-evaluacion-linea p { margin: 0; }
.ek-mi-evaluacion-nota { font-size: 1.4rem; color: var(--ek-titulo); }

.ek-calificar-pregunta .ek-acciones-inicio { margin-right: auto; }
/* La lista del docente: el color dice el estado (abierta en verde, próxima en azul, cerrada y borrador en gris). */
.ek-evaluaciones-lista { display: grid; gap: .75rem; }
.ek-evaluacion-tarjeta { --ek-estado: var(--ek-texto-suave); --ek-estado-suave: var(--ek-superficie-2);
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .75rem; padding: 1rem; border-radius: var(--ek-radio);
    background: var(--ek-superficie); border: 1px solid var(--ek-borde); box-shadow: var(--ek-sombra); }
.ek-evaluacion-tarjeta.abierta { --ek-estado: var(--ek-exito); --ek-estado-suave: var(--ek-exito-suave); }
.ek-evaluacion-tarjeta.proxima { --ek-estado: var(--ek-info); --ek-estado-suave: var(--ek-info-suave); }
.ek-evaluacion-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ek-estado-suave); color: var(--ek-estado); }
.ek-evaluacion-tarjeta.borrador .ek-evaluacion-icono, .ek-evaluacion-tarjeta.cerrada .ek-evaluacion-icono { background: var(--ek-primario-suave); color: var(--ek-primario); }
.ek-evaluacion-cuerpo { display: grid; gap: .45rem; min-width: 0; }
.ek-evaluacion-cuerpo > header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .35rem .75rem; }
.ek-evaluacion-cuerpo h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.ek-evaluacion-cuerpo h3 a { color: var(--ek-titulo); text-decoration: none; }
.ek-evaluacion-cuerpo h3 a:hover { color: var(--ek-primario); text-decoration: underline; }
.ek-evaluacion-estado { background: var(--ek-estado-suave); color: var(--ek-estado); }
.ek-evaluacion-datos, .ek-mi-evaluacion-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: var(--ek-texto-suave); font-size: .86rem; }
.ek-evaluacion-datos li, .ek-mi-evaluacion-datos li { display: inline-flex; align-items: center; gap: .3rem; }
.ek-evaluacion-datos li.sin-planilla { color: var(--ek-error); }
.ek-evaluacion-cuerpo > footer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding-top: .55rem; border-top: 1px solid var(--ek-borde); font-size: .9rem; color: var(--ek-texto-suave); }
.ek-evaluacion-cuerpo > footer strong { color: var(--ek-titulo); font-size: 1rem; }
.ek-evaluacion-cuerpo > footer .ek-btn { margin-left: auto; }
/* La tarjeta del estudiante: el borde y la etiqueta dicen si puede presentarla ya. */
.ek-mi-evaluacion-linea { border-top-color: var(--ek-texto-suave); }
.ek-mi-evaluacion-abierta { border-top-color: var(--ek-exito); }
.ek-mi-evaluacion-proxima { border-top-color: var(--ek-info); }
.ek-mi-evaluacion-momento { background: var(--ek-superficie-2); color: var(--ek-texto-suave); }
.ek-mi-evaluacion-abierta .ek-mi-evaluacion-momento { background: var(--ek-exito-suave); color: var(--ek-exito); }
.ek-mi-evaluacion-proxima .ek-mi-evaluacion-momento { background: var(--ek-info-suave); color: var(--ek-info); }
.ek-mi-evaluacion-datos li { padding: .25rem .55rem; border-radius: 99px; background: var(--ek-superficie-2); }
.ek-mi-evaluacion-acciones .ek-btn { flex: 1 1 100%; justify-content: center; }
/* Al presentar: cuánto lleva respondido, junto al reloj, y el número de cada pregunta marcado cuando ya la respondió. */
.ek-progreso-evaluacion { flex: 1 1 100%; height: 6px; border-radius: 99px; background: var(--ek-superficie-2); overflow: hidden; }
.ek-progreso-evaluacion > span { display: block; height: 100%; border-radius: inherit; background: var(--ek-acento-marca); transition: width .25s; }
.ek-reloj-evaluacion .ek-progreso-texto { margin-left: 0; }
.ek-presentar-pregunta > header { align-items: center; justify-content: flex-start; }
.ek-presentar-pregunta > header > small:last-child:not(:nth-child(2)) { margin-left: auto; }
.ek-numero-pregunta { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ek-superficie-2);
    color: var(--ek-titulo); font-weight: 700; font-size: .85rem; }
.ek-numero-pregunta.respondida { background: var(--ek-primario); color: #fff; }
/* Estadísticas: barras planas, verde lo correcto y rojo la confusión más común. */
.ek-estadisticas-resumen { margin-bottom: .75rem; }
.ek-estadisticas-preguntas { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ek-estadisticas-preguntas > li { display: grid; gap: .5rem; padding: 1rem; }
.ek-estadisticas-preguntas > li > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; color: var(--ek-texto-suave); font-size: .82rem; }
.ek-estadisticas-preguntas p { margin: 0; }
.ek-barra-acierto, .ek-barra-opcion { display: block; height: 10px; border-radius: 99px; background: var(--ek-superficie-2); overflow: hidden; }
.ek-barra-acierto > span, .ek-barra-opcion > span { display: block; height: 100%; border-radius: inherit; background: var(--ek-primario); }
.ek-estadisticas-opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ek-estadisticas-opciones li { display: grid; grid-template-columns: minmax(0, 1fr) 2.2rem; gap: .2rem .6rem; align-items: center; font-size: .92rem; }
.ek-estadisticas-opcion-texto { grid-column: 1 / -1; overflow-wrap: anywhere; }
.ek-estadisticas-opciones li strong { text-align: right; color: var(--ek-titulo); }
.ek-estadisticas-opciones li.correcta .ek-estadisticas-opcion-texto { color: var(--ek-exito); font-weight: 600; }
.ek-estadisticas-opciones li.correcta .ek-barra-opcion > span { background: var(--ek-exito); }
.ek-estadisticas-opciones li.error-comun .ek-barra-opcion > span { background: var(--ek-error); }

@media (min-width: 760px) {
    .ek-par-pregunta { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 44px; border-bottom: 0; padding-bottom: 0; }
    .ek-par-pregunta > span { display: block; color: var(--ek-texto-suave); }
    .ek-par-pregunta > input:nth-of-type(2) { grid-column: auto; }
    .ek-par-pregunta > button { grid-row: auto; grid-column: auto; }
    .ek-datos-evaluacion { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .ek-preguntas-elegidas > li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .ek-pregunta-elegida-acciones .ek-puntos { margin-right: .5rem; }
    .ek-banco-elegir > li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .ek-relacion { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
    .ek-presentar-pregunta, .ek-revisar-pregunta { padding: 1.15rem 1.35rem; }
    .ek-estadisticas-opciones li { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 2.2rem; }
    .ek-mi-evaluacion-acciones .ek-btn { flex: none; }
    .ek-evaluacion-tarjeta { padding: 1.1rem 1.25rem; }
    .ek-estadisticas-opcion-texto { grid-column: auto; }
}

/* =====================================================================
   Tema SerturBookings: la estructura y los colores de SerturBookings (azul #1f6fe0 y cian #16b4c6, títulos en
   azul marino, menú blanco, tarjetas de 14 px con sombra suave), en colores planos como pide Eduka: lo que en Sertur
   es degradado aquí es el color sólido. Cada persona puede seguir eligiendo otro color en Apariencia; Sertur es el
   inicial. Las reglas de abajo refinan las anteriores.
   ===================================================================== */
:root {
    --ek-fondo: #f5f7fb;
    --ek-superficie: #ffffff;
    --ek-superficie-2: #f7f9fc;
    --ek-texto: #2c3a4b;
    --ek-texto-suave: #6c7a91;
    --ek-borde: #e6eaf0;
    --ek-titulo: #0a1f44;
    --ek-sombra: 0 8px 24px rgb(27 42 74 / 6%);
    --ek-radio: 14px;
    --ek-radio-chico: 10px;
    --ek-fuente: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ek-fuente-titulos: var(--ek-fuente);
    --ek-fuente-marca: 'Poppins', var(--ek-fuente);

    /* El color elegido (--ek-c…) se define arriba y en [data-color]: aquí no, o taparía el que eligió cada persona. */
    --ek-acento-marca: var(--ek-c-acento);

    /* Menú claro, como Sertur: blanco con borde fino y la opción activa en un celeste suave. */
    --ek-menu: var(--ek-superficie);
    --ek-menu-fondo: var(--ek-superficie);
    --ek-menu-texto: #56637a;
    --ek-menu-texto-fuerte: var(--ek-titulo);
    --ek-menu-hover: #f3f6fb;
    --ek-menu-activo: color-mix(in srgb, var(--ek-primario) 9%, var(--ek-superficie));
    --ek-menu-borde: var(--ek-borde);
}

/* Eduka, la imagen corporativa (el color inicial): azul #0B5CFF de confianza, verde #00C46A de crecimiento como acento
   de la opción activa y el foco, azul marino #0A1F44 y celeste #E9F4FF de fondo suave. */
[data-color="eduka"] {
    --ek-c-menu: #0a1f44; --ek-c: #0b5cff; --ek-c-hover: #0848cc; --ek-c-suave: #e9f4ff; --ek-c-acento: #00c46a;
    --ek-c-noche: #5c9dff; --ek-c-noche-hover: #85b6ff; --ek-c-noche-suave: #0f2550; --ek-c-acento-noche: #2ee08a;
}

[data-color="sertur"] {
    --ek-c-menu: #1b2a4a; --ek-c: #1f6fe0; --ek-c-hover: #1656b8; --ek-c-suave: #e8f0fe; --ek-c-acento: #16b4c6;
    --ek-c-noche: #6ea3f2; --ek-c-noche-hover: #93bbf6; --ek-c-noche-suave: #16294a; --ek-c-acento-noche: #3fd0de;
}

/* Los demás colores marcan con su propio tono: no tienen un segundo color como el cian de Sertur. */
[data-color]:not([data-color="sertur"]):not([data-color="eduka"]) { --ek-c-acento: var(--ek-c); --ek-c-acento-noche: var(--ek-c-noche); }

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --ek-titulo: #e6e8eb;
        --ek-sombra: 0 8px 24px rgb(0 0 0 / 28%);
        --ek-acento-marca: var(--ek-c-acento-noche);
        --ek-menu-texto: #a8b2c0;
        --ek-menu-hover: rgb(255 255 255 / 6%);
        --ek-menu-activo: color-mix(in srgb, var(--ek-primario) 18%, var(--ek-superficie));
    }
}

:root[data-tema="oscuro"] {
    --ek-titulo: #e6e8eb;
    --ek-sombra: 0 8px 24px rgb(0 0 0 / 28%);
    --ek-acento-marca: var(--ek-c-acento-noche);
    --ek-menu-texto: #a8b2c0;
    --ek-menu-hover: rgb(255 255 255 / 6%);
    --ek-menu-activo: color-mix(in srgb, var(--ek-primario) 18%, var(--ek-superficie));
}

/* ----- Títulos: negrita marcada y una barra corta del color principal bajo el de la página ----- */
h1, h2, h3 { color: var(--ek-titulo); }
h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; }
h2 { font-weight: 700; }
h3 { font-weight: 700; }
.ek-encabezado h1::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-top: .45rem;
    border-radius: 4px;
    background: var(--ek-primario);
}

/* ----- Menú lateral ----- */
.ek-lateral { border-right: 1px solid var(--ek-menu-borde); }
.ek-menu-cabecera { padding-bottom: .9rem; margin-bottom: .35rem; border-bottom: 1px solid var(--ek-menu-borde); }
.ek-menu-texto strong, .ek-barra-marca { font-family: var(--ek-fuente-marca); }
.ek-menu-texto .ek-menu-anio { color: var(--ek-primario); }
.ek-lateral .ek-menu-contraer { border: 1px solid var(--ek-menu-borde); width: 34px; height: 34px; border-radius: 8px; }

.ek-buscar { background: var(--ek-fondo); border-color: var(--ek-menu-borde); color: var(--ek-menu-texto); }
.ek-buscar:hover { background: var(--ek-menu-hover); border-color: color-mix(in srgb, var(--ek-texto) 18%, var(--ek-borde)); }
kbd, .ek-buscar kbd { border-color: var(--ek-borde); background: var(--ek-superficie); color: var(--ek-texto-suave); }
.ek-menu-enlaces { scrollbar-color: var(--ek-borde) transparent; }

/* Grupos como en Sertur: el nombre en azul marino y en minúsculas, no como rótulo en mayúsculas. */
.ek-grupo-cabecera {
    min-height: 42px;
    font-size: .92rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ek-menu-texto-fuerte);
}
.ek-grupo-icono { color: var(--ek-menu-texto); }

.ek-menu-item { font-size: .92rem; }
.ek-menu-item.activo,
.ek-con-indicador .ek-menu-item.activo { color: var(--ek-primario); }
.ek-menu-item.activo .ek-icono { color: var(--ek-acento-marca); }
.ek-menu-item:hover .ek-icono { color: var(--ek-menu-texto-fuerte); }
.ek-menu-item.activo:hover .ek-icono { color: var(--ek-acento-marca); }

/* La opción activa lleva la barra cian pegada a su borde izquierdo, dentro de la opción. */
.ek-menu-item.activo::before,
.ek-grupo-interior .ek-menu-item.activo::before {
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--ek-acento-marca);
}

.ek-insignia { background: var(--ek-primario-suave); color: var(--ek-primario); border-color: color-mix(in srgb, var(--ek-primario) 25%, transparent); }
.ek-menu-pie { background: var(--ek-fondo); border-color: var(--ek-menu-borde); }

/* Barra del teléfono: blanca, con borde, como el menú. */
.ek-barra-movil { background: var(--ek-superficie); color: var(--ek-titulo); border-bottom: 1px solid var(--ek-borde); }
.ek-barra-movil .ek-boton-icono:hover { background: var(--ek-menu-hover); }
@keyframes ek-barra-elevada { to { box-shadow: 0 6px 16px rgb(27 42 74 / 8%); } }

/* ----- Tarjetas, campos y botones ----- */
.ek-tarjeta { padding: 1.25rem; }
.ek-tarjeta h2 { color: var(--ek-titulo); }
.ek-campo label { color: var(--ek-texto-suave); }
.ek-input { padding: .58rem .9rem; }
.ek-input:focus { border-color: var(--ek-acento-marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ek-acento-marca) 20%, transparent); }
.ek-btn:focus-visible { outline-color: var(--ek-acento-marca); }
.ek-btn-primario { box-shadow: 0 4px 12px rgb(27 42 74 / 12%); }
.ek-btn-secundario { color: var(--ek-titulo); }
.ek-aviso { border-radius: 12px; }

/* Pestañas y filtros tipo píldora: la elegida en el color principal, las demás sin borde. */
.ek-segmentos button { border-color: transparent; background: transparent; font-weight: 600; }
.ek-segmentos button:hover { background: var(--ek-menu-hover); color: var(--ek-titulo); }
.ek-segmentos button.activo { box-shadow: 0 4px 12px rgb(27 42 74 / 12%); }
.ek-segmentos button.activo:hover { background: var(--ek-primario-hover); color: var(--ek-superficie); }

/* ----- Tablas como las de Sertur: encabezado gris claro y fila resaltada al pasar ----- */
@media (min-width: 760px) {
    .ek-tabla-adaptable th { font-weight: 700; letter-spacing: .05em; }
    .ek-tabla-adaptable tbody tr:hover td { background: var(--ek-superficie-2); }
}

/* La muestra de cada color en Apariencia enseña el color principal: el menú ya no se pinta. */
.ek-color-muestra { background: var(--ek-c); }

/* =====================================================================
   Puesta en marcha: avance, pasos y aviso en Inicio
   ===================================================================== */
/* Anillo de avance: dos colores planos con corte seco (no es un degradado: es una gráfica de torta). */
.ek-progreso-cifra {
    --ek-avance: 0%;
    flex: none;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: conic-gradient(var(--ek-primario) var(--ek-avance), var(--ek-superficie-2) 0);
}
.ek-progreso-cifra::before { content: ""; grid-area: 1 / 1; width: 72%; height: 72%; border-radius: 50%; background: var(--ek-superficie); }
.ek-progreso-cifra strong { grid-area: 1 / 1; z-index: 1; font-size: 1.2rem; font-weight: 800; color: var(--ek-titulo); }
.ek-progreso-chico { width: 58px; height: 58px; }
.ek-progreso-chico strong { font-size: .85rem; }

.ek-progreso-marcha { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.ek-progreso-texto { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; width: 100%; }
.ek-progreso-texto h2 { margin: 0; font-size: 1.2rem; }
.ek-progreso-texto p { margin: 0; color: var(--ek-texto-suave); }
.ek-barra-avance { width: 100%; height: 6px; border-radius: 6px; background: var(--ek-superficie-2); overflow: hidden; }
.ek-barra-avance span { display: block; height: 100%; border-radius: 6px; background: var(--ek-acento-marca); transition: width 600ms var(--ek-salida); }

.ek-pasos-marcha { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.ek-paso-marcha {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem .9rem;
    padding: 1rem;
    background: var(--ek-superficie);
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio);
    box-shadow: var(--ek-sombra);
}
.ek-paso-marcha > .ek-btn { grid-column: 2; justify-self: start; }
.ek-paso-marcha.siguiente { border-color: color-mix(in srgb, var(--ek-primario) 55%, var(--ek-borde)); box-shadow: 0 0 0 3px var(--ek-primario-suave), var(--ek-sombra); }
.ek-paso-numero {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ek-superficie-2);
    color: var(--ek-texto-suave);
    font-weight: 800;
}
.ek-paso-listo .ek-paso-numero { background: var(--ek-exito-suave); color: var(--ek-exito); }
.ek-paso-enprogreso .ek-paso-numero { background: var(--ek-extra-suave); color: var(--ek-extra); }
.siguiente .ek-paso-numero { background: var(--ek-primario); color: var(--ek-superficie); }
.ek-paso-cuerpo { min-width: 0; }
.ek-paso-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.ek-paso-titulo h3 { margin: 0; font-size: 1rem; }
.ek-paso-cuerpo p { margin: .25rem 0 0; }
.ek-paso-detalle { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ek-titulo); font-size: .9rem; }
.ek-paso-detalle .ek-icono { flex: none; color: var(--ek-acento-marca); }
.ek-paso-falta { color: var(--ek-extra); font-size: .88rem; font-weight: 600; }
.ek-paso-listo .ek-paso-falta { display: none; }
.ek-chip-pendiente { background: var(--ek-superficie-2); color: var(--ek-texto-suave); }
.ek-subtitulo-marcha { margin-top: .5rem; }
.ek-pasos-opcionales .ek-paso-marcha { box-shadow: none; }

/* El aviso de Inicio es todo un enlace a la guía. */
.ek-aviso-marcha { display: flex; align-items: center; gap: 1rem; color: inherit; text-decoration: none; border-color: color-mix(in srgb, var(--ek-primario) 35%, var(--ek-borde)); }
.ek-aviso-marcha:hover { border-color: var(--ek-primario); }
.ek-aviso-marcha h2 { margin: 0 0 .2rem; font-size: 1rem; }
.ek-aviso-marcha p { margin: 0; color: var(--ek-texto-suave); font-size: .9rem; }
.ek-aviso-marcha > div:nth-child(2) { flex: 1; min-width: 0; }
.ek-aviso-marcha-flecha { flex: none; transform: rotate(180deg); color: var(--ek-primario); }

@media (min-width: 760px) {
    .ek-progreso-marcha { flex-direction: row; align-items: center; gap: 1.5rem; }
    .ek-progreso-cifra:not(.ek-progreso-chico) { width: 112px; height: 112px; }
    .ek-paso-marcha { grid-template-columns: auto 1fr auto; align-items: center; }
    .ek-paso-marcha > .ek-btn { grid-column: 3; justify-self: end; }
}

/* Con el menú blanco, lo que antes tomaba el color del menú (bienvenida, ingreso, firma) toma el tono oscuro del color
   elegido, como el panel azul marino de la marca en SerturBookings. */
.ek-bienvenida { background: var(--ek-c-menu); border-left-color: var(--ek-acento-marca); }
.ek-bienvenida h1 { color: #fff; }
.ek-sesion, .ek-firma-fondo { background: var(--ek-c-menu); }

/* ----- Horario por sede y jornadas de cada sede ----- */
.ek-sedes-horario { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; margin-bottom: .9rem; padding-bottom: 2px; }
.ek-sede-opcion {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .5rem 1rem;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-chico);
    background: var(--ek-superficie);
    color: var(--ek-titulo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--ek-sombra);
}
.ek-sede-opcion .ek-icono { color: var(--ek-texto-suave); }
.ek-sede-opcion:hover { border-color: color-mix(in srgb, var(--ek-primario) 40%, var(--ek-borde)); }
.ek-sede-opcion.activo { border-color: var(--ek-primario); background: var(--ek-primario-suave); color: var(--ek-primario); box-shadow: inset 3px 0 0 var(--ek-acento-marca); }
.ek-sede-opcion.activo .ek-icono { color: var(--ek-acento-marca); }
.ek-sedes-jornada { margin-bottom: .9rem; }

/* Horarios con nombre: elegir cuál se arma (como las sedes, con su estado debajo) y la franja del borrador, que no se
   debe confundir con lo publicado. */
.ek-horarios-elegir { display: flex; align-items: center; gap: .5rem; overflow-x: auto; scrollbar-width: none; margin-bottom: .9rem; padding-bottom: 2px; }
.ek-horario-opcion { flex: none; display: grid; justify-items: start; gap: .05rem; min-height: 44px; padding: .45rem .95rem; border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio); background: var(--ek-superficie); color: var(--ek-texto); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.ek-horario-opcion small { font-size: .74rem; font-weight: 500; color: var(--ek-texto-suave); }
.ek-horario-opcion:hover { border-color: color-mix(in srgb, var(--ek-primario) 40%, var(--ek-borde)); }
.ek-horario-opcion.activo { border-color: var(--ek-primario); background: var(--ek-primario-suave); color: var(--ek-primario); box-shadow: inset 3px 0 0 var(--ek-acento-marca); }
.ek-horarios-elegir > .ek-btn { flex: none; }
.ek-borrador-horario { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem .75rem; margin-bottom: .9rem; padding: .75rem 1rem;
    border: 1px dashed var(--ek-info); border-radius: var(--ek-radio); background: var(--ek-info-suave); color: var(--ek-texto); }
.ek-borrador-horario > .ek-icono { color: var(--ek-info); }
.ek-borrador-horario > div:first-of-type { display: grid; gap: .1rem; }
.ek-borrador-horario small { color: var(--ek-texto-suave); }
.ek-borrador-horario .ek-acciones { grid-column: 1 / -1; justify-content: flex-end; }
.ek-horarios-proponer { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .5rem .85rem; align-items: start; padding: 1rem; margin-bottom: .9rem; }
.ek-horarios-proponer-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ek-primario-suave); color: var(--ek-primario); }
.ek-horarios-proponer h2 { margin: 0 0 .2rem; font-size: 1.02rem; }
.ek-horarios-proponer p { margin: 0; }
.ek-horarios-proponer > .ek-btn, .ek-horarios-proponer > .ek-acciones { grid-column: 1 / -1; justify-self: start; }
/* Organizar: una tarjeta por horario, con el borde del color de su estado. */
.ek-horarios-lista { display: grid; gap: .75rem; }
.ek-horario-nombrado { --ek-estado: var(--ek-texto-suave); --ek-estado-suave: var(--ek-superficie-2);
    display: grid; gap: .55rem; padding: .9rem 1rem 1rem; border-radius: var(--ek-radio); background: var(--ek-superficie);
    border: 1px solid var(--ek-borde); border-top: 4px solid var(--ek-estado); box-shadow: var(--ek-sombra); }
.ek-horario-nombrado.publicado { --ek-estado: var(--ek-exito); --ek-estado-suave: var(--ek-exito-suave); }
.ek-horario-nombrado.con-borrador { --ek-estado: var(--ek-info); --ek-estado-suave: var(--ek-info-suave); }
.ek-horario-nombrado > header { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.ek-horario-nombrado p { margin: 0; }
.ek-horario-nombre { flex: 1 1 14rem; min-width: 0; font-weight: 700; color: var(--ek-titulo); border-color: transparent; background: transparent; }
.ek-horario-nombrado .ek-horario-nombre { padding-left: .4rem; margin-left: -.4rem; }
.ek-horario-nombre:hover:not(:disabled) { border-color: var(--ek-borde); }
.ek-horario-nombre:focus { background: var(--ek-superficie); }
.ek-horario-estado { background: var(--ek-estado-suave); color: var(--ek-estado); }
.ek-horario-grupos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ek-horario-grupos li { padding: .2rem .6rem; border-radius: 99px; background: var(--ek-superficie-2); font-size: .85rem; font-weight: 600; color: var(--ek-titulo); }
.ek-elegir-grupos { display: grid; gap: .6rem; margin: 0; padding: .85rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); }
.ek-elegir-grupos legend { padding: 0 .3rem; font-weight: 700; color: var(--ek-titulo); }
.ek-elegir-grupos p { margin: 0; }
.ek-elegir-grupos-sede { display: grid; gap: .4rem; }
.ek-elegir-grupos-sede h3 { margin: .3rem 0 0; font-size: .9rem; color: var(--ek-titulo); }
.ek-elegir-grupos-nivel { display: grid; gap: .3rem; }
.ek-elegir-grupos-nivel > .ek-btn { justify-self: start; padding-left: 0; }
.ek-elegir-grupos-opciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.ek-elegir-grupos-opciones label { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .35rem .7rem; border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-chico); cursor: pointer; font-weight: 600; }
.ek-elegir-grupos-opciones label.marcado { border-color: var(--ek-primario); background: var(--ek-primario-suave); color: var(--ek-primario); }
.ek-elegir-grupos-opciones input { width: 18px; height: 18px; accent-color: var(--ek-primario); }
.ek-elegir-grupos-opciones small { font-weight: 500; font-size: .72rem; color: var(--ek-texto-suave); }
.ek-horario-nuevo { display: grid; gap: .35rem; padding: .9rem 1rem; border: 2px dashed var(--ek-borde); border-radius: var(--ek-radio); }
.ek-horario-nuevo label { font-weight: 700; color: var(--ek-titulo); }
.ek-horario-nuevo > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.ek-horario-nuevo .ek-input { flex: 1 1 14rem; }
@media (min-width: 760px) {
    .ek-borrador-horario { grid-template-columns: auto minmax(0, 1fr) auto; }
    .ek-borrador-horario .ek-acciones { grid-column: auto; }
    .ek-horarios-proponer { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; }
    .ek-horarios-proponer > .ek-btn, .ek-horarios-proponer > .ek-acciones { grid-column: auto; }
    .ek-horarios-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.ek-serie-subtitulo { margin: .9rem 0 .4rem; font-size: .9rem; }
.ek-serie-descansos { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ek-serie-descansos li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.ek-serie-descansos label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.ek-serie-descansos .ek-input { width: 5rem; }

/* ----- Grupos por sede y jornada (como la «Lista de grupos» del SIMAT) ----- */
.ek-barra-grupos { margin-bottom: 1rem; }
.ek-grupos-sede { margin-top: 1.5rem; }
.ek-grupos-sede-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: 1.1rem; margin: 0 0 .25rem; padding-bottom: .5rem; border-bottom: 2px solid var(--ek-primario); }
.ek-grupos-sede-titulo .ek-icono { color: var(--ek-acento-marca); }
.ek-grupos-sede-titulo small { font-weight: 500; }
.ek-grupos-jornada { margin: 1rem 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-texto-suave); }
.ek-sobrecupo { color: var(--ek-error); font-weight: 700; }

.ek-enlace { background: none; border: 0; padding: 0; color: var(--ek-primario); font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; }
.ek-chip-grupo { min-height: 36px; padding: 0 .6rem; border: 1px solid var(--ek-borde); border-radius: 99px; gap: .35rem; }
.ek-chip-grupo.activo { border-color: var(--ek-primario); background: color-mix(in srgb, var(--ek-primario) 12%, transparent); }

/* Selector de docente: un buscador propio con su lista, porque la lista nativa del navegador no se puede estilizar. */
.ek-selector { position: relative; min-width: 0; }
.ek-selector-entrada { width: 100%; padding-right: 5.25rem; text-overflow: ellipsis; }
.ek-selector > .ek-selector-horas { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ek-selector-lista {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(420px, calc(100vw - 2rem));
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: .35rem;
    list-style: none;
    background: var(--ek-superficie);
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio);
    box-shadow: 0 12px 28px rgb(16 24 40 / 14%);
}
.ek-selector-opcion {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    padding: .35rem .55rem;
    border-radius: var(--ek-radio-chico);
    color: var(--ek-texto);
    font-size: .92rem;
    cursor: pointer;
}
.ek-selector-opcion.activo, .ek-selector-opcion:hover { background: var(--ek-superficie-2); }
.ek-selector-opcion.elegido { font-weight: 600; }
.ek-selector-iniciales {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ek-primario-suave);
    color: var(--ek-primario);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.ek-selector-opcion.elegido .ek-selector-iniciales { background: var(--ek-primario); color: var(--ek-superficie); }
.ek-selector-vacio .ek-selector-iniciales { background: var(--ek-superficie-2); color: var(--ek-texto-suave); }
.ek-selector-vacio .ek-selector-nombre { color: var(--ek-texto-suave); }
.ek-selector-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-selector-nombre mark { background: none; color: var(--ek-primario); font-weight: 700; }
.ek-selector-horas { font-size: .78rem; color: var(--ek-texto-suave); white-space: nowrap; }
.ek-selector-nada { padding: .6rem .55rem; font-size: .85rem; color: var(--ek-texto-suave); }

/* Carga académica y plan de estudios como planilla: una fila por asignatura. En el teléfono el nombre va arriba y debajo
   sus casillas; en pantalla ancha, columnas. Las casillas de la carga se guardan al salir de ellas. */
.ek-carga-cabecera { display: grid; gap: .75rem; margin-bottom: 1rem; padding: .75rem 1rem; }
.ek-carga-total { margin: 0; font-weight: 600; }
.ek-carga-ayuda { margin: 0 0 .75rem; }

/* Filtros de la carga: sede, jornada, grupo, el docente (que no filtra) y el botón Generar. */
.ek-carga-filtros { display: grid; gap: .75rem; margin-bottom: 1rem; padding: .75rem 1rem; }
.ek-carga-generar { display: flex; align-items: flex-end; }
.ek-carga-generar .ek-btn { width: 100%; }

.ek-carga-lista { display: grid; }
.ek-carga-titulos { display: none; }
.ek-carga-area { margin: 1rem 0 .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-texto-suave); }
.ek-carga-titulos + .ek-carga-area { margin-top: 0; }
.ek-carga-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: .4rem .5rem;
    align-items: center;
    padding: .6rem 0;
    border-top: 1px solid var(--ek-borde);
}
.ek-carga-nombre { grid-column: 1 / -1; min-width: 0; font-size: .92rem; color: var(--ek-texto-suave); }
.ek-carga-con-horas .ek-carga-nombre { color: var(--ek-texto); font-weight: 600; }
.ek-carga-sin-docente .ek-carga-nombre { color: var(--ek-texto); font-weight: 600; }
.ek-carga-sin-docente .ek-selector-entrada { border-style: dashed; }
.ek-carga-fila .ek-input { min-height: 44px; font-size: 16px; min-width: 0; }
.ek-carga-horas { text-align: center; }
.ek-carga-aviso { grid-column: 1 / -1; font-size: .8rem; color: var(--ek-exito); }
.ek-carga-aviso-error { color: var(--ek-error); }
.ek-carga-confirmar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .88rem; }
.ek-btn-peligro { background: var(--ek-error); color: var(--ek-superficie); }
.ek-btn-peligro:hover { filter: brightness(.92); }

/* Por grupo: docente, horas y quitar. Por docente: grupo y asignatura en la misma línea que las horas. */
.ek-carga-fila-grupo { grid-template-columns: minmax(0, 1fr) 72px 44px; }
.ek-carga-fila-docente { grid-template-columns: minmax(0, 1fr) 72px 44px; }
.ek-carga-fila-docente .ek-carga-nombre { grid-column: auto; }
.ek-carga-fila-docente .ek-carga-confirmar { grid-column: 1 / -1; }
.ek-carga-fila-docente .ek-enlace { font-size: inherit; font-weight: 700; }

/* Plan de estudios: horas y peso en el área. */
.ek-plan-area { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.ek-plan-area small { font-size: .78rem; letter-spacing: 0; text-transform: none; }
.ek-plan-suma-bien { color: var(--ek-exito); }
.ek-plan-suma-mal { color: var(--ek-error); }
.ek-plan-peso { display: flex; align-items: center; gap: .3rem; justify-content: flex-end; }
.ek-plan-peso .ek-input { width: 72px; }

/* Lo que casi nunca se usa va plegado. */
.ek-carga-detalles { margin-top: 1.25rem; border-top: 1px solid var(--ek-borde); padding-top: .75rem; }
.ek-carga-detalles summary, .ek-historial-plegable summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: .9rem; color: var(--ek-texto-suave); }
.ek-carga-detalles[open] summary, .ek-historial-plegable[open] summary { color: var(--ek-texto); margin-bottom: .5rem; }
.ek-carga-fila-detalle { grid-template-columns: 80px auto minmax(0, 1fr); }
.ek-carga-fila-detalle .ek-carga-nombre small { margin-left: .35rem; font-weight: 400; color: var(--ek-texto-suave); }
.ek-carga-dato { display: grid; gap: .1rem; font-size: .75rem; color: var(--ek-texto-suave); }

/* Historial de auditoría: lo más reciente arriba. */
.ek-historial { list-style: none; margin: 0; padding: 0; display: grid; }
.ek-historial li { padding: .65rem 0; border-top: 1px solid var(--ek-borde); }
.ek-historial li:first-child { border-top: 0; }
.ek-historial-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; font-size: .85rem; }
.ek-historial-cabeza span, .ek-historial-cabeza time { color: var(--ek-texto-suave); }
.ek-historial p { margin: .2rem 0 0; font-size: .9rem; }

/* Lista de docentes: se toca uno para abrir su carga. */
button.ek-docente-carga { width: 100%; min-height: 44px; border: 1px solid transparent; color: var(--ek-texto); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
button.ek-docente-carga:hover { border-color: var(--ek-primario); }

/* Asignar a un docente: los grupos por grado, con las horas del plan. */
.ek-carga-grupos { display: grid; margin-bottom: 1rem; }
.ek-carga-grado { display: grid; gap: .35rem; padding: .5rem 0; border-top: 1px solid var(--ek-borde); font-size: .85rem; }
.ek-carga-grado-grupos { display: flex; flex-wrap: wrap; gap: .4rem; }
.ek-carga-grado-grupos .ek-chip-grupo { min-height: 44px; }
.ek-chip-grupo small { color: #c77700; font-size: .75rem; }
.ek-chip-grupo.ek-chip-propio { opacity: .6; cursor: default; }
.ek-carga-opciones { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1.5rem; margin: 1rem 0; padding: .85rem 1rem; border-radius: var(--ek-radio-chico); background: var(--ek-fondo); }
.ek-carga-opciones .ek-check { display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; align-items: center; min-height: 44px; }
.ek-carga-opciones .ek-check small { grid-column: 2; color: var(--ek-texto-suave); font-size: .78rem; }
.ek-carga-extra { max-width: 32rem; }
.ek-carga-extra .ek-carga-horas { width: 5.5rem; }
.ek-carga-nivel { margin: .25rem 0 .75rem; }
.ek-carga-boton { position: sticky; bottom: 0; z-index: 4; margin: 0 -1.25rem -1.25rem; padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--ek-superficie); border-top: 1px solid var(--ek-borde); border-radius: 0 0 var(--ek-radio) var(--ek-radio); }
.ek-carga-boton .ek-btn { width: 100%; }

@media (min-width: 640px) {
    .ek-carga-filtros { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
    .ek-carga-filtros-docente { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ek-carga-generar .ek-btn { width: auto; }
}

@media (min-width: 760px) {
    .ek-carga-cabecera { grid-template-columns: minmax(0, 420px) auto; align-items: end; justify-content: space-between; }
    /* Sede, jornada, grupo y docente en una fila, con Generar al final. */
    .ek-carga-filtros:not(.ek-carga-filtros-docente) { display: flex; align-items: flex-end; }
    .ek-carga-filtros:not(.ek-carga-filtros-docente) .ek-campo { flex: 1 1 150px; min-width: 0; }
    .ek-carga-generar { flex: none; }
    .ek-carga-titulos { display: grid; gap: .75rem; padding: 0 0 .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-texto-suave); }
    .ek-carga-titulos-grupo, .ek-carga-fila-grupo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 80px 44px; }
    .ek-carga-titulos-docente, .ek-carga-fila-docente { grid-template-columns: minmax(0, 1fr) 80px 44px; }
    .ek-carga-fila { gap: .75rem; padding: .35rem 0; }
    .ek-carga-nombre { grid-column: auto; }
    .ek-carga-confirmar, .ek-carga-fila-docente .ek-carga-confirmar { grid-column: 2 / -1; }
    .ek-carga-fila-detalle { grid-template-columns: minmax(0, 1fr) 80px auto minmax(0, 200px); }
    .ek-carga-grado { grid-template-columns: 130px 1fr; align-items: center; }
    .ek-carga-boton .ek-btn { width: auto; }
}
/* Planilla de notas: estudiantes por filas y actividades por columnas, agrupadas por componente. La primera columna y los
   títulos quedan fijos al desplazarse, como en una hoja de cálculo. En el teléfono se desplaza a lo ancho; las vistas «Por
   actividad» y «Por estudiante» son una lista de una sola casilla por fila, cómoda con el dedo. */
/* En el teléfono: grupo y periodo lado a lado; asignatura y las vistas debajo, a todo el ancho. */
.ek-notas-filtros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7.5rem); grid-auto-flow: row dense; gap: .6rem .75rem; margin-bottom: 1rem; padding: .75rem 1rem; }
.ek-notas-filtros > .ek-notas-sede, .ek-notas-filtros > .ek-notas-asignatura, .ek-notas-filtros > .ek-notas-vistas { grid-column: 1 / -1; }
.ek-notas-vistas { align-self: end; }
.ek-notas-vistas button { min-height: 44px; }
.ek-notas-etiqueta { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; color: var(--ek-texto-suave); }
.ek-notas-cerrado { color: var(--ek-error); font-weight: 600; }
.ek-notas-estado { font-size: .82rem; color: var(--ek-exito); min-height: 1.2em; }
.ek-notas-estado-error { color: var(--ek-error); }
.ek-notas-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-bottom: .6rem; }
.ek-notas-datos { flex: 1 1 18rem; margin: 0; }
.ek-notas-reemplazar { min-height: 36px; font-size: .85rem; }

.ek-notas-contenedor { overflow: auto; max-height: calc(100dvh - 220px); border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); }
.ek-notas-tabla { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: .88rem; }
.ek-notas-tabla thead { position: sticky; top: 0; z-index: 3; }
.ek-notas-tabla th, .ek-notas-tabla td { padding: .2rem .12rem; border-bottom: 1px solid var(--ek-borde); background: var(--ek-superficie); text-align: center; vertical-align: middle; }
.ek-notas-tabla thead th { background: var(--ek-superficie-2); font-size: .75rem; font-weight: 700; color: var(--ek-texto-suave); }
.ek-notas-tabla th.ek-notas-fija { position: sticky; left: 0; z-index: 2; min-width: 8.5rem; max-width: 10.5rem; text-align: left; font-weight: 600; color: var(--ek-texto);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--ek-borde); }
.ek-notas-tabla thead th.ek-notas-fija { z-index: 4; background: var(--ek-superficie-2); }
.ek-notas-componente { border-left: 2px solid var(--ek-borde); text-transform: uppercase; letter-spacing: .04em; }
.ek-notas-componente small { display: block; font-weight: 600; text-transform: none; letter-spacing: 0; }
.ek-notas-actividad span { display: block; max-width: 3.3rem; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ek-texto); }
.ek-notas-actividad small { display: block; font-weight: 400; }
.ek-notas-definitiva { min-width: 5rem; border-left: 1px solid var(--ek-borde); }
/* La nota de cada componente cierra su grupo de actividades: sombreada y con una línea que lo separa del siguiente. */
.ek-notas-tabla .ek-notas-promedio { min-width: 2.8rem; padding-inline: .3rem; background: var(--ek-superficie-2); border-right: 2px solid var(--ek-borde); font-size: .85rem; }
.ek-notas-tabla thead th.ek-notas-promedio { color: var(--ek-texto); }
.ek-notas-actividad { cursor: help; }
.ek-notas-lista-nota { float: right; letter-spacing: 0; text-transform: none; color: var(--ek-texto); }
.ek-notas-definitiva strong { display: block; font-size: .95rem; }
.ek-notas-todos th, .ek-notas-todos td { background: var(--ek-superficie-2); }
.ek-notas-todos th.ek-notas-fija { color: var(--ek-texto-suave); font-weight: 600; }
.ek-notas-numero { display: inline-block; min-width: 1.6rem; color: var(--ek-texto-suave); font-weight: 400; font-size: .78rem; }

.ek-nota { width: 3rem; min-height: 44px; padding: .2rem; font-size: 16px; text-align: center; }
.ek-nota:disabled { background: transparent; border-color: transparent; color: var(--ek-texto); opacity: 1; }
.ek-nota-llenar { border-style: dashed; background: var(--ek-superficie); }
.ek-nota-error { border-color: var(--ek-error); background: color-mix(in srgb, var(--ek-error) 8%, var(--ek-superficie)); }
.ek-nota-baja, .ek-nota-baja-texto { color: var(--ek-error); }
.ek-nota-baja { font-weight: 700; }

.ek-desempeno { display: inline-block; margin-top: .1rem; padding: 0 .45rem; border-radius: 99px; font-size: .72rem; font-weight: 700; }
.ek-desempeno-bajo { background: color-mix(in srgb, var(--ek-error) 14%, var(--ek-superficie)); color: var(--ek-error); }
.ek-desempeno-basico { background: color-mix(in srgb, #c77700 16%, var(--ek-superficie)); color: #c77700; }
.ek-desempeno-alto { background: var(--ek-primario-suave); color: var(--ek-primario); }
.ek-desempeno-superior { background: color-mix(in srgb, var(--ek-exito) 16%, var(--ek-superficie)); color: var(--ek-exito); }

/* Vistas de una sola columna: por actividad (todo el grupo) y por estudiante (todas sus actividades). */
.ek-notas-lista-cabecera { display: grid; gap: .75rem; margin-bottom: .5rem; }
.ek-notas-navegar { display: flex; align-items: center; gap: .35rem; }
.ek-notas-navegar .ek-input { flex: 1; min-width: 0; }
.ek-girar svg { transform: rotate(180deg); }
.ek-notas-lista { list-style: none; margin: 0; padding: 0; }
.ek-notas-lista li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-top: 1px solid var(--ek-borde); }
.ek-notas-lista li.ek-notas-lista-componente, .ek-mis-actividades li.ek-notas-lista-componente { display: block; padding: .75rem 0 .2rem; border-top: 0;
    font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-texto-suave); }
.ek-notas-nombre { min-width: 0; font-size: .92rem; }
.ek-notas-nombre small { color: var(--ek-texto-suave); }
.ek-notas-lista .ek-nota { width: 5rem; min-height: 44px; }
.ek-notas-resumen { margin: 1rem 0 0; font-weight: 600; }

/* Mis notas (estudiante). */
.ek-mis-notas { display: grid; gap: 1rem; }
.ek-mi-asignatura header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ek-mi-asignatura h2 { margin: 0; }
.ek-mi-definitiva { text-align: right; }
.ek-mi-definitiva strong { display: block; font-size: 1.4rem; line-height: 1.1; }
.ek-mis-actividades { list-style: none; margin: .5rem 0 0; padding: 0; }
.ek-mis-actividades li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px solid var(--ek-borde); font-size: .92rem; }

/* Avisos y su campana. */
.ek-campana { position: relative; }
.ek-campana-cuenta { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px;
    background: var(--ek-error); color: var(--ek-superficie); font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center; }
.ek-avisos { list-style: none; margin: 0; padding: 0; }
.ek-avisos li { padding: .75rem 0 .75rem .75rem; border-top: 1px solid var(--ek-borde); border-left: 3px solid transparent; }
.ek-avisos li:first-child { border-top: 0; }
.ek-avisos li.ek-aviso-nuevo { border-left-color: var(--ek-primario); }
.ek-avisos p { margin: .2rem 0; font-size: .92rem; }
.ek-avisos small { color: var(--ek-texto-suave); }

/* Escala de valoración en el SIEE. */
.ek-escala { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

@media (min-width: 760px) {
    /* En pantalla ancha, todo en una fila: grupo, asignatura, periodo y al lado las vistas. */
    .ek-notas-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; }
    .ek-notas-filtros > .ek-campo { flex: 1 1 10rem; min-width: 0; }
    .ek-notas-filtros > .ek-notas-asignatura { flex: 2 1 16rem; }
    .ek-notas-filtros > .ek-notas-periodo { flex: 0 0 8.5rem; }
    .ek-notas-vistas { flex: none; }
    .ek-notas-tabla th.ek-notas-fija { min-width: 12rem; max-width: 18rem; }
    /* Con mouse las casillas pueden ser más bajas: así caben más estudiantes a la vista. */
    .ek-notas-tabla .ek-nota { min-height: 34px; }
    .ek-notas-lista-cabecera { grid-template-columns: minmax(0, 1fr) 160px; align-items: end; }
    .ek-mis-notas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* Estilo de hoja de cálculo para la planilla: casillas sin borde propio separadas por líneas finas (el borde aparece al
   pasar el mouse o al escribir), filas alternas, la fila en la que se escribe resaltada para no perder el renglón, los
   componentes con el color de la marca y la nota del periodo fija a la derecha al desplazarse. */
.ek-notas-tabla td { border-right: 1px solid color-mix(in srgb, var(--ek-borde) 70%, transparent); }
.ek-notas-tabla tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--ek-superficie-2) 55%, var(--ek-superficie)); }
.ek-notas-tabla tbody tr:hover > * { background: color-mix(in srgb, var(--ek-primario) 6%, var(--ek-superficie)); }
.ek-notas-tabla tbody tr:focus-within > * { background: color-mix(in srgb, var(--ek-primario) 11%, var(--ek-superficie)); }
.ek-notas-tabla tbody tr > .ek-notas-promedio { background: var(--ek-superficie-2); }
.ek-notas-tabla .ek-nota:not(.ek-nota-llenar) { border-color: transparent; background: transparent; border-radius: 6px; font-variant-numeric: tabular-nums; }
.ek-notas-tabla .ek-nota:not(.ek-nota-llenar):hover { border-color: var(--ek-borde); }
.ek-notas-tabla .ek-nota:not(.ek-nota-llenar):focus { border-color: var(--ek-primario); background: var(--ek-superficie); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ek-primario) 25%, transparent); }
.ek-notas-tabla .ek-nota.ek-nota-error { border-color: var(--ek-error); background: color-mix(in srgb, var(--ek-error) 8%, var(--ek-superficie)); }
.ek-notas-tabla thead tr:first-child th.ek-notas-componente { background: var(--ek-primario-suave); color: var(--ek-primario); }
.ek-notas-tabla thead th.ek-notas-actividad span { font-weight: 600; }
.ek-notas-tabla th.ek-notas-definitiva, .ek-notas-tabla td.ek-notas-definitiva { position: sticky; right: 0; z-index: 1; border-left: 2px solid var(--ek-borde); }
.ek-notas-tabla thead th.ek-notas-definitiva { z-index: 4; }
.ek-notas-tabla td.ek-notas-definitiva { background: var(--ek-superficie); }
.ek-notas-tabla tbody tr:nth-child(even) > td.ek-notas-definitiva { background: color-mix(in srgb, var(--ek-superficie-2) 55%, var(--ek-superficie)); }
.ek-notas-excel { display: flex; gap: .4rem; }
.ek-notas-excel .ek-btn { gap: .35rem; }
.ek-notas-excel label.ocupado { opacity: .6; pointer-events: none; }

/* Columna de estudiantes: número, foto (o iniciales) y nombre en una línea. El nombre largo se corta y se ve completo al
   pasar el mouse. Los títulos de la columna y de la fila «para todo el grupo» van en versalitas pequeñas, como los de los
   componentes, para que no compitan con los nombres. */
.ek-notas-tabla th.ek-notas-fija { max-width: 12rem; padding: .2rem .75rem .2rem .5rem; overflow: visible; }
.ek-notas-tabla thead th.ek-notas-fija { padding-left: .75rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-texto-suave); vertical-align: bottom; padding-bottom: .55rem; }
.ek-notas-cuenta { display: inline-block; margin-left: .3rem; padding: 0 .45rem; border-radius: 99px; background: var(--ek-superficie); border: 1px solid var(--ek-borde);
    font-size: .7rem; letter-spacing: 0; color: var(--ek-texto-suave); }
.ek-notas-alumno { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.ek-notas-alumno .ek-avatar { width: 28px; height: 28px; }
.ek-notas-alumno .ek-avatar-iniciales { --ek-avatar: 28px; background: color-mix(in srgb, var(--ek-primario) 14%, var(--ek-superficie)); color: var(--ek-primario); font-size: .68rem; }
.ek-notas-alumno-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .86rem; }
/* El nombre es un botón que abre la ficha del estudiante: se ve como texto y se subraya al pasar el mouse. */
button.ek-notas-alumno { width: 100%; min-height: 36px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.ek-notas-alumno:hover .ek-notas-alumno-nombre { color: var(--ek-primario); text-decoration: underline; text-underline-offset: 2px; }
button.ek-notas-alumno:focus-visible { outline: 2px solid var(--ek-primario); outline-offset: 2px; border-radius: 6px; }
.ek-notas-lista button.ek-notas-alumno { flex: 1; width: auto; min-height: 44px; }
.ek-notas-alumno .ek-marca-inclusion { width: 20px; height: 20px; }
.ek-notas-alumno .ek-marca-inclusion svg { width: 13px; height: 13px; }
/* Ficha desde la planilla: las notas del periodo por componente y la familia con su teléfono a un toque. */
.ek-notas-ficha-notas, .ek-notas-ficha-familia { list-style: none; margin: 0; padding: 0; }
.ek-notas-ficha-notas li, .ek-notas-ficha-familia li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-top: 1px solid var(--ek-borde); }
.ek-notas-ficha-notas li:first-child, .ek-notas-ficha-familia li:first-child { border-top: 0; }
.ek-notas-ficha-notas small { color: var(--ek-texto-suave); }
.ek-notas-ficha-total { font-weight: 700; }
.ek-notas-ficha-total .ek-desempeno { margin-left: .35rem; }
.ek-notas-ficha-familia li > span { display: grid; min-width: 0; }
.ek-notas-ficha-familia small { color: var(--ek-texto-suave); }
.ek-notas-tabla .ek-notas-numero { min-width: 1.3rem; text-align: right; font-size: .72rem; font-variant-numeric: tabular-nums; }
.ek-notas-para-todos { display: block; padding-left: 1.85rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-primario); }
.ek-notas-tabla td { padding: .12rem .1rem; }
@media (min-width: 760px) {
    .ek-notas-tabla .ek-nota { min-height: 30px; }
    .ek-notas-tabla th.ek-notas-fija { max-width: 18rem; }
    .ek-notas-tabla .ek-notas-todos .ek-nota-llenar { font-size: 14px; }
    /* La nota del periodo y su desempeño en una línea: así la fila queda del alto de una casilla. */
    .ek-notas-tabla td.ek-notas-definitiva { min-width: 6.5rem; white-space: nowrap; }
    .ek-notas-tabla td.ek-notas-definitiva strong { display: inline-block; min-width: 1.9rem; text-align: right; }
    .ek-notas-tabla td.ek-notas-definitiva .ek-desempeno { margin: 0 0 0 .35rem; vertical-align: 1px; }
}


/* Vistas «Por actividad» y «Por estudiante»: una columna centrada (la casilla queda cerca del nombre aunque la página
   ocupe toda la pantalla), una tarjeta arriba con lo que se está calificando y un bloque por componente con su nota. */
.ek-notas-vista { display: grid; gap: .85rem; max-width: 880px; margin: 0 auto; padding: 0 0 1.25rem; }
.ek-notas-foco { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; padding: .9rem 1rem; border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio); background: var(--ek-superficie); box-shadow: var(--ek-sombra); }
.ek-notas-foco-elegir { flex: 1 1 10rem; min-width: 0; margin: 0; }
.ek-notas-para-todos-campo { margin: 0; }
.ek-notas-para-todos-campo .ek-nota { width: 5.5rem; }

/* Tarjeta del estudiante: flechas a los lados, foto, nombre y la nota del periodo en grande. */
.ek-notas-foco-estudiante { flex-wrap: nowrap; align-items: center; gap: .6rem; }
.ek-notas-paso { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ek-borde); border-radius: 50%;
    background: var(--ek-superficie); color: var(--ek-texto); cursor: pointer; transition: background var(--ek-transicion, .15s), border-color .15s; }
.ek-notas-paso:hover:not(:disabled) { border-color: var(--ek-primario); color: var(--ek-primario); background: var(--ek-primario-suave); }
.ek-notas-paso:disabled { opacity: .35; cursor: default; }
.ek-notas-foco-persona { flex: 1; display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .2rem; border: 0; border-radius: var(--ek-radio-chico);
    background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ek-notas-foco-persona:hover strong { color: var(--ek-primario); }
.ek-notas-foco-persona .ek-avatar { width: 56px; height: 56px; }
.ek-notas-foco-persona .ek-avatar-iniciales { --ek-avatar: 56px; background: color-mix(in srgb, var(--ek-primario) 14%, var(--ek-superficie)); color: var(--ek-primario); }
.ek-notas-foco-texto { display: grid; min-width: 0; }
.ek-notas-foco-texto strong { display: flex; align-items: center; gap: .35rem; font-size: 1.05rem; color: var(--ek-titulo); overflow: hidden; }
.ek-notas-foco-texto small { color: var(--ek-texto-suave); font-size: .8rem; }
.ek-notas-foco-definitiva { flex: none; display: grid; justify-items: center; min-width: 4.5rem; padding: .35rem .7rem; border-radius: var(--ek-radio-chico);
    background: var(--ek-primario-suave); text-align: center; }
.ek-notas-foco-definitiva small { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-texto-suave); }
.ek-notas-foco-definitiva strong { display: block; font-size: 1.5rem; line-height: 1.15; color: var(--ek-titulo); }
.ek-notas-foco-definitiva strong.ek-nota-baja-texto { color: var(--ek-error); }
.ek-notas-foco-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; padding: 0 .25rem; }

/* Un bloque por componente: el nombre con su peso a la izquierda y la nota del componente a la derecha. */
.ek-notas-bloque { overflow: hidden; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); background: var(--ek-superficie); box-shadow: var(--ek-sombra); }
.ek-notas-bloque > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem;
    background: color-mix(in srgb, var(--ek-primario) 6%, var(--ek-superficie)); border-bottom: 1px solid var(--ek-borde); }
.ek-notas-bloque-titulo { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-primario); }
.ek-notas-bloque-titulo small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ek-texto-suave); }
.ek-notas-bloque-peso { margin-left: .35rem; padding: .05rem .5rem; border-radius: 99px; background: var(--ek-superficie); border: 1px solid var(--ek-borde);
    font-size: .7rem; letter-spacing: 0; color: var(--ek-texto-suave); }
.ek-notas-bloque-nota { display: inline-flex; align-items: center; justify-content: center; min-width: 3.2rem; padding: .15rem .65rem; border-radius: 99px;
    background: var(--ek-superficie); border: 1px solid var(--ek-borde); font-size: .95rem; font-variant-numeric: tabular-nums; }
.ek-notas-bloque-cuenta { font-size: .78rem; font-weight: 600; color: var(--ek-texto-suave); }
.ek-notas-bloque-cuenta.completo { color: var(--ek-exito); }
.ek-notas-bloque .ek-notas-lista li { min-height: 52px; padding: .3rem .6rem .3rem 1rem; border-top: 1px solid color-mix(in srgb, var(--ek-borde) 70%, transparent); }
.ek-notas-bloque .ek-notas-lista li:first-child { border-top: 0; }
.ek-notas-bloque .ek-notas-lista li:nth-child(even) { background: color-mix(in srgb, var(--ek-superficie-2) 45%, var(--ek-superficie)); }
.ek-notas-bloque .ek-notas-lista li:hover { background: color-mix(in srgb, var(--ek-primario) 5%, var(--ek-superficie)); }
.ek-notas-bloque .ek-notas-lista li:focus-within { background: color-mix(in srgb, var(--ek-primario) 10%, var(--ek-superficie)); }
.ek-notas-actividad-nombre { display: grid; font-weight: 600; }
.ek-notas-actividad-nombre small { font-weight: 400; font-size: .78rem; }
.ek-notas-bloque .ek-notas-alumno .ek-avatar { width: 32px; height: 32px; }
.ek-notas-bloque .ek-notas-alumno .ek-avatar-iniciales { --ek-avatar: 32px; }
/* La casilla: centrada, con el número en tabular y sin borde hasta que se toca, como en la planilla. */
.ek-notas-bloque .ek-nota { width: 4.75rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.ek-notas-bloque .ek-nota:not(.ek-nota-error):not(:focus) { border-color: color-mix(in srgb, var(--ek-borde) 80%, transparent); background: var(--ek-superficie); }
@media (max-width: 559px) {
    .ek-notas-foco-estudiante { flex-wrap: wrap; }
    .ek-notas-foco-persona { order: -1; flex-basis: 100%; }
    .ek-notas-foco-definitiva { flex: 1; grid-auto-flow: column; justify-content: center; align-items: center; gap: .5rem; }
}

/* La página de notas ocupa toda la pantalla: el contenido pierde su ancho máximo y sus márgenes, los filtros son una
   barra compacta y la planilla va de borde a borde. En el teléfono la página se desplaza y la tabla llena el alto de la
   pantalla; en escritorio la página tiene el alto de la ventana y la planilla se desplaza por dentro, con sus títulos y
   la columna de nombres fijos. */
.ek-contenido:has(> .ek-pagina-notas) { max-width: none; padding: 0; }
.ek-pagina-notas { display: flex; flex-direction: column; }
.ek-pagina-notas > .ek-notas-titulo { margin: 0; padding: .75rem 1rem .25rem; }
.ek-pagina-notas > .ek-notas-titulo p { display: none; }
.ek-pagina-notas > .ek-cargando, .ek-pagina-notas > .ek-vacio { margin: 1rem; }
.ek-pagina-notas > .ek-notas-filtros { margin: 0; padding: .5rem 1rem .75rem; border-bottom: 1px solid var(--ek-borde); }
.ek-pagina-notas > .ek-notas { flex: 1; margin: 0; padding: .75rem 0 0; border: 0; border-radius: 0; box-shadow: none; }
.ek-pagina-notas > .ek-notas > :not(.ek-notas-contenedor) { margin-left: 1rem; margin-right: 1rem; }
.ek-pagina-notas .ek-notas-contenedor { max-height: calc(100dvh - var(--ek-alto-barra)); border-width: 1px 0 0; border-radius: 0; }

@media (min-width: 760px) {
    .ek-pagina-notas > .ek-notas-titulo p { display: block; }
}

@media (min-width: 900px) {
    .ek-pagina-notas { height: 100dvh; }
    .ek-pagina-notas > .ek-notas-titulo { padding: 1rem 1.5rem .25rem; }
    .ek-pagina-notas > .ek-notas-filtros { padding: .5rem 1.5rem .75rem; }
    /* La planilla llena lo que queda de la ventana; las vistas de lista se desplazan dentro de la misma área. */
    .ek-pagina-notas > .ek-notas { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
    .ek-pagina-notas > .ek-notas > :not(.ek-notas-contenedor) { margin-left: 1.5rem; margin-right: 1.5rem; flex-shrink: 0; }
    .ek-pagina-notas .ek-notas-contenedor { flex: 1; min-height: 0; max-height: none; }
}
@media (min-width: 900px) {
    /* Un poco de aire entre el menú lateral y la planilla (va después de la página completa, que quita los bordes). */
    .ek-pagina-notas .ek-notas-contenedor { margin-left: 1rem; border-left-width: 1px; border-top-left-radius: var(--ek-radio-chico); }
}


/* Plan de estudios: asignaturas por área. */
.ek-acciones-titulo { margin-left: auto; gap: 0; }
.ek-asignatura-marcas { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.ek-asignatura-marcas .ek-chip-estado { background: var(--ek-superficie-2); color: var(--ek-texto-suave); }
.ek-fila-area td { background: var(--ek-superficie-2); }

/* Resoluciones: el historial de un docente debajo de su resolución vigente. */
.ek-historial-resolucion { display: block; margin-top: .2rem; }
.ek-historial-resolucion span + span::before { content: " · "; }

/* Convivencia: actas de las reuniones de un caso. */
.ek-actas-lista { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .75rem; }
.ek-acta-reunion { border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); padding: .75rem .9rem; display: grid; gap: .5rem; }
.ek-acta-cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.ek-acta-cabecera > div { min-width: 0; display: grid; }
.ek-acta-cabecera strong { overflow-wrap: anywhere; }
.ek-acta-detalle summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.ek-acta-detalle h4 { margin: .6rem 0 .2rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ek-texto-suave); }
.ek-acta-formulario { border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); padding: .9rem; margin-top: .75rem; }
.ek-acta-formulario h3 { margin: 0 0 .5rem; }
.ek-asistente-nuevo { align-items: flex-end; margin-top: .5rem; }
.ek-lista-citados li { display: grid; gap: .35rem; }

/* Agenda por días: un tarjeta por fecha del rango, con sus actividades y el formulario para agregar */
.ek-dia-agenda { margin-bottom: .75rem; }
.ek-dia-agenda-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.ek-dia-agenda-cabecera .ek-agenda-dia { margin: 0; }
.ek-dia-agenda-libre { background: var(--ek-fondo-suave, transparent); }
.ek-actividad-dia { padding: .6rem 0; border-top: 1px solid var(--ek-borde); }
.ek-actividad-dia p { margin: .15rem 0 0; }
.ek-dia-agenda-formulario { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--ek-borde); }

/* Calendario: cada periodo en una fila — a la izquierda sus fechas y a la derecha sus cierres (en el teléfono, uno bajo el otro) */
.ek-periodo { display: grid; gap: 1rem; }
.ek-periodo-titulo { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; }
.ek-periodo-numero { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ek-primario); color: #fff; font-weight: 700; }
.ek-cierres { list-style: none; margin: 0 0 .5rem; padding: 0; }
.ek-cierres li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .45rem 0; border-top: 1px solid var(--ek-borde); }
.ek-cierres li:first-child { border-top: 0; }
.ek-cierre-nombre { flex: 1 1 12rem; }
.ek-cierre-fecha { white-space: nowrap; }
.ek-cierre-acciones { display: inline-flex; }
@media (min-width: 900px) {
    .ek-periodo { grid-template-columns: minmax(14rem, 1fr) 2fr; gap: 2rem; align-items: start; }
    .ek-periodo-cierres { border-left: 1px solid var(--ek-borde); padding-left: 2rem; }
}

/* SIEE y planeación: filas de componentes y tarjetas por componente */
.ek-siee-filas { display: grid; gap: .75rem; margin: .5rem 0; }
.ek-siee-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; align-items: end; }
.ek-siee-nombre { grid-column: 1 / -1; }
.ek-siee-campo { display: grid; gap: .25rem; font-size: .85rem; color: var(--ek-texto-suave); }
.ek-siee-periodo { padding: .75rem 0; border-top: 1px solid var(--ek-borde); }
.ek-siee-componentes { display: grid; gap: .75rem; }
@media (min-width: 900px) {
    .ek-siee-fila { grid-template-columns: 12rem 10rem 14rem; }
    .ek-siee-nombre { grid-column: auto; align-self: center; }
    .ek-siee-componentes { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Configuración: pestañas de navegación (enlaces con aspecto de píldora) y tarjetas del resumen */
.ek-segmentos a {
    flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .3rem .9rem;
    border: 1px solid transparent; border-radius: 99px; background: transparent; color: var(--ek-texto-suave);
    font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ek-segmentos a:hover { background: var(--ek-menu-hover); color: var(--ek-titulo); }
.ek-segmentos a.activo { background: var(--ek-primario); border-color: var(--ek-primario); color: var(--ek-superficie); box-shadow: 0 4px 12px rgb(27 42 74 / 12%); }
.ek-config-tarjetas { display: grid; gap: .75rem; }
.ek-config-tarjeta { display: block; text-decoration: none; color: inherit; }
.ek-config-tarjeta h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.ek-config-tarjeta:hover { border-color: var(--ek-primario); }
@media (min-width: 700px) { .ek-config-tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ek-config-tarjetas { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================================
   Marca Eduka: el isotipo y «eduka» en Poppins, como en la imagen corporativa
   ===================================================================== */
.ek-marca { display: flex; align-items: center; gap: .65rem; }
.ek-marca-vertical { flex-direction: column; gap: .5rem; text-align: center; }
.ek-marca-texto { display: flex; flex-direction: column; min-width: 0; }
.ek-marca-nombre {
    font-family: var(--ek-fuente-marca);
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: lowercase;
    color: var(--ek-titulo);
}
.ek-marca .ek-marca-nombre { font-size: 2rem; line-height: 1; }
.ek-marca-vertical .ek-marca-nombre { font-size: 2.6rem; }
.ek-marca-lema {
    margin-top: .35rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ek-texto-suave);
}
.ek-menu-texto strong.ek-marca-nombre { font-size: 1.45rem; line-height: 1.1; color: var(--ek-titulo); }
.ek-barra-marca .ek-marca-nombre { font-size: 1.3rem; }
.ek-sesion-cabecera .ek-marca { margin-bottom: 1.1rem; }


/* Foto en la ficha del estudiante: tocarla la cambia; la cámara en la esquina dice que se puede. */
.ek-foto-ficha { position: relative; flex: none; display: inline-block; border-radius: 50%; cursor: pointer; }
.ek-foto-ficha.ocupado { opacity: .6; pointer-events: none; }
.ek-foto-ficha:focus-within { outline: 2px solid var(--ek-primario); outline-offset: 2px; }
.ek-foto-ficha .ek-avatar { width: 64px; height: 64px; }
.ek-foto-ficha-icono { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--ek-primario); color: #fff; box-shadow: 0 0 0 2px var(--ek-superficie); }
.ek-foto-quitar { display: block; margin-top: .15rem; padding-inline: 0; min-height: 32px; }

/* En la página de notas a pantalla completa, las vistas de una columna van centradas. */
.ek-pagina-notas > .ek-notas > .ek-notas-vista { width: min(880px, calc(100% - 2rem)); max-width: none; margin-inline: auto; }

/* ===== SIEE y planeación del periodo =====
   Cada componente tiene su color en todas partes (barra de pesos, filas, tarjetas de planeación), así se reconoce sin
   leer: Hacer con el color principal, Saber con el acento, Ser en ámbar y la prueba de competencias en naranja. */
.ek-comp-1 { --ek-comp: var(--ek-primario); }
.ek-comp-2 { --ek-comp: var(--ek-acento-marca); }
.ek-comp-3 { --ek-comp: var(--ek-talento); }
.ek-comp-4 { --ek-comp: var(--ek-extra); }
.ek-comp-punto { flex: none; width: 10px; height: 10px; margin-top: .4rem; border-radius: 50%; background: var(--ek-comp); }

.ek-siee-tarjeta { display: grid; gap: 1rem; }
.ek-siee-tarjeta-cabecera h2 { margin: 0 0 .2rem; }
.ek-siee-tarjeta-cabecera p { margin: 0; }

/* El reparto de los pesos en una barra: cada componente ocupa lo que pesa. */
.ek-pesos { display: grid; gap: .25rem; }
.ek-pesos-barra { display: flex; gap: 3px; height: 30px; margin-bottom: .6rem; overflow: hidden; border-radius: 8px; }
.ek-pesos-barra > span { display: flex; align-items: center; min-width: 0; padding: 0 .6rem; background: var(--ek-comp); color: #fff;
    font-size: .74rem; font-weight: 700; white-space: nowrap; transition: flex-grow .25s ease; }
.ek-pesos-barra-texto { overflow: hidden; text-overflow: ellipsis; }
.ek-pesos-cabecera { display: none; }

/* Una fila por componente. En el teléfono: nombre arriba, peso y obligatorias abajo lado a lado. */
.ek-pesos-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1rem; align-items: center; padding: .8rem 0; border-top: 1px solid var(--ek-borde); }
.ek-pesos-nombre { grid-column: 1 / -1; display: flex; gap: .6rem; min-width: 0; }
.ek-pesos-nombre > span:last-child { display: grid; min-width: 0; }
.ek-pesos-nombre strong { color: var(--ek-titulo); }
.ek-pesos-nombre small { color: var(--ek-texto-suave); font-size: .8rem; }
.ek-pesos-peso { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.ek-pesos-entrada { position: relative; flex: none; width: 6rem; }
.ek-pesos-entrada .ek-input { padding-right: 1.8rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ek-pesos-entrada > span { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: var(--ek-texto-suave); font-weight: 600; pointer-events: none; }
.ek-pesos-medidor { flex: 1; height: 8px; min-width: 3rem; overflow: hidden; border-radius: 99px; background: var(--ek-superficie-2); }
.ek-pesos-medidor > span { display: block; height: 100%; border-radius: inherit; background: var(--ek-comp); transition: width .25s ease; }

/* Más y menos para las actividades obligatorias: con el dedo es más cómodo que escribir el número. */
.ek-contador { display: inline-flex; align-items: center; border: 1px solid var(--ek-borde); border-radius: 99px; background: var(--ek-superficie); }
.ek-contador button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ek-texto); cursor: pointer; }
.ek-contador button:hover:not(:disabled) { background: var(--ek-primario-suave); color: var(--ek-primario); }
.ek-contador button:disabled { opacity: .3; cursor: default; }
.ek-contador > span { min-width: 1.75rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.ek-siee-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .9rem; border-top: 1px solid var(--ek-borde); }

/* Por periodo: una tarjeta por periodo; la que tiene pesos propios ocupa todo el ancho para editarlos. */
.ek-siee-periodos { display: grid; gap: .75rem; }
.ek-siee-periodo-tarjeta { display: grid; gap: .75rem; padding: .9rem 1rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); background: var(--ek-superficie); }
.ek-siee-periodo-tarjeta > header { display: flex; align-items: center; gap: .7rem; }
.ek-siee-periodo-tarjeta .ek-periodo-numero { flex: none; }
.ek-siee-periodo-texto { flex: 1; display: grid; min-width: 0; }
.ek-siee-periodo-texto strong { color: var(--ek-titulo); }
.ek-siee-periodo-texto small { color: var(--ek-texto-suave); font-size: .8rem; }
.ek-siee-periodo-tarjeta .ek-pesos-barra { height: 10px; margin: 0; gap: 2px; }
.ek-siee-periodo-tarjeta .ek-pesos-barra .ek-pesos-barra-texto { display: none; }
.ek-siee-periodo-tarjeta.propio { border-color: color-mix(in srgb, var(--ek-primario) 45%, var(--ek-borde)); }
.ek-siee-periodo-tarjeta.propio .ek-pesos-barra { height: 26px; }
.ek-siee-periodo-tarjeta.propio .ek-pesos-barra .ek-pesos-barra-texto { display: inline; }

/* Escala de valoración: los cuatro desempeños en una barra, cada uno del ancho de su rango. */
.ek-escala-visual { display: flex; gap: 3px; overflow: hidden; border-radius: var(--ek-radio-chico); }
.ek-escala-tramo { display: grid; align-content: center; justify-items: center; min-width: 0; padding: .55rem .35rem; text-align: center; border-radius: 0; }
.ek-escala-tramo strong { font-size: .85rem; }
.ek-escala-tramo small { font-size: .74rem; font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ek-escala-grupos { display: grid; gap: 1rem; }
.ek-escala-grupo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: .9rem 1rem 1rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); }
.ek-escala-grupo legend { padding: 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-texto-suave); }
.ek-escala-grupo .ek-campo { margin: 0; min-width: 0; }
.ek-escala-grupo label { display: flex; align-items: center; gap: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-escala-grupo .ek-input { font-weight: 600; font-variant-numeric: tabular-nums; }
.ek-escala-punto { flex: none; width: 10px; height: 10px; padding: 0; border-radius: 50%; background: currentColor; }

/* ----- Planeación del periodo ----- */
.ek-plan-filtros { display: grid; gap: .75rem; }
.ek-plan-filtros .ek-campo { margin: 0; }
.ek-plan-periodos { justify-self: start; }

/* Cómo va la planeación: ícono, texto, barra de avance y el botón para darla por completa. */
.ek-plan-estado { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1rem 0; padding: .9rem 1rem; border: 1px solid var(--ek-borde);
    border-left: 4px solid var(--ek-extra); border-radius: var(--ek-radio); background: var(--ek-superficie); box-shadow: var(--ek-sombra); }
.ek-plan-estado.lista { border-left-color: var(--ek-primario); }
.ek-plan-estado.completa { border-left-color: var(--ek-exito); }
.ek-plan-copiar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .5rem .6rem; margin: -.25rem 0 1rem; padding: .75rem 1rem; border: 1px dashed var(--ek-borde); border-radius: 14px; background: var(--ek-superficie); }
.ek-plan-copiar label { font-weight: 600; grid-column: 2; }
.ek-plan-copiar .ek-icono { color: var(--ek-primario); grid-row: 1 / span 2; }
.ek-plan-copiar select { grid-column: 2; }
.ek-plan-copiar button { grid-column: 2; justify-self: start; }
.ek-plan-copiar small { grid-column: 2; }
@media (min-width: 720px) {
  .ek-plan-copiar { grid-template-columns: auto auto minmax(16rem, 1fr) auto; }
  .ek-plan-copiar .ek-icono { grid-row: auto; }
  .ek-plan-copiar label, .ek-plan-copiar select, .ek-plan-copiar button { grid-column: auto; }
  .ek-plan-copiar small { grid-column: 2 / -1; }
}
.ek-plan-estado-icono { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--ek-extra-suave); color: var(--ek-extra); }
.ek-plan-estado.lista .ek-plan-estado-icono { background: var(--ek-primario-suave); color: var(--ek-primario); }
.ek-plan-estado.completa .ek-plan-estado-icono { background: var(--ek-exito-suave); color: var(--ek-exito); }
.ek-plan-estado-texto { flex: 1 1 16rem; display: grid; gap: .2rem; min-width: 0; }
.ek-plan-estado-texto strong { color: var(--ek-titulo); }
.ek-plan-estado-texto small { color: var(--ek-texto-suave); font-size: .82rem; }
.ek-plan-progreso { display: block; height: 6px; margin-top: .3rem; overflow: hidden; border-radius: 99px; background: var(--ek-superficie-2); }
.ek-plan-progreso > span { display: block; height: 100%; border-radius: inherit; background: var(--ek-extra); transition: width .3s ease; }
.ek-plan-estado.lista .ek-plan-progreso > span { background: var(--ek-primario); }
.ek-plan-estado.completa .ek-plan-progreso > span { background: var(--ek-exito); }

/* Una tarjeta por componente, con su color arriba. */
.ek-plan-componentes { display: grid; gap: 1rem; }
.ek-plan-componente { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ek-borde); border-top: 4px solid var(--ek-comp);
    border-radius: var(--ek-radio); background: var(--ek-superficie); box-shadow: var(--ek-sombra); }
.ek-plan-componente > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .9rem 1rem .6rem; }
.ek-plan-componente-titulo { display: flex; gap: .6rem; min-width: 0; }
.ek-plan-componente h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0; font-size: 1.05rem; }
.ek-plan-componente-titulo small { display: block; margin-top: .1rem; color: var(--ek-texto-suave); font-size: .8rem; }
.ek-plan-peso { padding: .05rem .5rem; border-radius: 99px; background: color-mix(in srgb, var(--ek-comp) 14%, var(--ek-superficie)); color: var(--ek-texto);
    font-size: .74rem; font-weight: 700; }
.ek-plan-cuenta { flex: none; display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .6rem; border-radius: 99px; background: var(--ek-error-suave);
    color: var(--ek-error); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ek-plan-cuenta.cumple { background: var(--ek-exito-suave); color: var(--ek-exito); }
.ek-plan-vacio { margin: 0 1rem .5rem; padding: .75rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); color: var(--ek-texto-suave); font-size: .88rem; text-align: center; }

.ek-plan-actividades { list-style: none; margin: 0; padding: 0; }
.ek-plan-actividades li { display: flex; align-items: center; gap: .5rem; padding: .6rem .5rem .6rem 1rem; border-top: 1px solid color-mix(in srgb, var(--ek-borde) 70%, transparent); }
.ek-plan-actividades li:hover { background: color-mix(in srgb, var(--ek-comp) 5%, var(--ek-superficie)); }
.ek-plan-actividad-texto { flex: 1; display: grid; gap: .15rem; min-width: 0; }
.ek-plan-actividad-texto strong { font-weight: 600; color: var(--ek-texto); }
.ek-plan-actividad-texto small { color: var(--ek-texto-suave); font-size: .82rem; }
.ek-plan-etiquetas { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }
.ek-plan-etiqueta { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 99px; background: var(--ek-superficie-2);
    color: var(--ek-texto-suave); font-size: .74rem; font-weight: 600; }
.ek-plan-acciones { flex: none; display: inline-flex; }
.ek-plan-acciones .ek-boton-icono { color: var(--ek-texto-suave); }
.ek-plan-acciones .ek-boton-icono:hover { color: var(--ek-primario); }
/* Con mouse, las acciones aparecen al pasar por la actividad; en el teléfono se ven siempre. */
@media (hover: hover) {
    .ek-plan-acciones { opacity: 0; transition: opacity .15s; }
    .ek-plan-actividades li:hover .ek-plan-acciones, .ek-plan-acciones:focus-within { opacity: 1; }
}

.ek-plan-agregar { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; margin: .5rem 1rem 1rem; padding: .5rem;
    border: 1.5px dashed color-mix(in srgb, var(--ek-comp) 55%, var(--ek-borde)); border-radius: var(--ek-radio-chico); background: none;
    color: var(--ek-texto); font: inherit; font-weight: 600; cursor: pointer; margin-top: auto; }
.ek-plan-actividades + .ek-plan-agregar { margin-top: .5rem; }
.ek-plan-agregar:hover { border-style: solid; background: color-mix(in srgb, var(--ek-comp) 8%, var(--ek-superficie)); }
.ek-plan-formulario { display: grid; gap: .6rem; margin: .5rem 1rem 1rem; padding: .9rem; border-radius: var(--ek-radio-chico);
    background: color-mix(in srgb, var(--ek-comp) 6%, var(--ek-superficie)); border: 1px solid color-mix(in srgb, var(--ek-comp) 30%, var(--ek-borde)); }
.ek-plan-formulario .ek-campo { margin: 0; }
.ek-plan-formulario-titulo { color: var(--ek-titulo); }

@media (min-width: 700px) {
    .ek-pesos-cabecera { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 1.25rem; padding: 0 0 .4rem;
        font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-texto-suave); }
    .ek-pesos-cabecera span:last-child { width: 8.5rem; text-align: center; }
    .ek-pesos-fila { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 1.25rem; }
    .ek-pesos-nombre { grid-column: auto; }
    .ek-contador { width: 8.5rem; justify-content: space-between; }
    .ek-siee-periodos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ek-siee-periodo-tarjeta.propio { grid-column: 1 / -1; }
    .ek-escala-grupos { grid-template-columns: 1fr 1fr; }
    .ek-plan-filtros { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
@media (min-width: 1100px) {
    .ek-siee-periodos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ek-plan-componentes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
@media (max-width: 459px) {
    .ek-escala-grupo { grid-template-columns: 1fr 1fr; }
    .ek-escala-tramo small { font-size: .66rem; }
}
.ek-escala-nota { grid-column: 1 / -1; order: 1; margin: 0; font-size: .8rem; }
@media (max-width: 699px) { .ek-plan-periodos { max-width: 100%; } }

/* Correo de la institución: pasos numerados para autorizar a Eduka en Google Workspace. */
.ek-correo-medio { display: grid; gap: 1rem; }
.ek-correo-medio > h2 { margin: 0; }
.ek-correo-medio .ek-segmentos small { margin-left: .3rem; font-size: .7rem; font-weight: 700; opacity: .8; }
.ek-pasos-correo { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.ek-pasos-correo li { position: relative; padding: .1rem 0 0 2.6rem; line-height: 1.5; overflow-wrap: anywhere; counter-increment: paso; }
.ek-pasos-correo li::before { content: counter(paso); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
    border-radius: 50%; background: var(--ek-primario-suave); color: var(--ek-primario); font-weight: 700; font-size: .85rem; }
.ek-copiable { display: block; margin-top: .35rem; padding: .5rem .75rem; border: 1px dashed var(--ek-borde); border-radius: var(--ek-radio-chico);
    background: var(--ek-superficie-2); user-select: all; }
.ek-copiable code { font-size: .85rem; }
.ek-correo-dominio { margin: 0; }

/* Asistente del docente: el botón bajo los textos largos, el menú de transformaciones y la propuesta por aceptar. */
.ek-mejorar { display: grid; gap: .5rem; margin-top: .4rem; }
.ek-mejorar-boton { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .3rem .8rem;
    border: 1px solid color-mix(in srgb, var(--ek-primario) 35%, var(--ek-borde)); border-radius: 99px; background: var(--ek-primario-suave);
    color: var(--ek-primario); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.ek-mejorar-boton:hover:not(:disabled) { background: var(--ek-primario); color: var(--ek-superficie); }
.ek-mejorar-boton:disabled { opacity: .5; cursor: default; }
.ek-mejorar-menu { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .7rem; border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-mejorar-opcion { min-height: 36px; padding: .3rem .75rem; border: 1px solid var(--ek-borde); border-radius: 99px; background: var(--ek-superficie);
    color: var(--ek-texto); font: inherit; font-size: .84rem; cursor: pointer; }
.ek-mejorar-opcion:hover:not(:disabled) { border-color: var(--ek-primario); color: var(--ek-primario); }
.ek-mejorar-indicacion { flex: 1 1 100%; display: flex; gap: .4rem; }
.ek-mejorar-indicacion .ek-input { flex: 1; min-width: 0; }
.ek-mejorar-estado { font-size: .84rem; color: var(--ek-primario); font-weight: 600; }
.ek-mejorar-propuesta { padding: .8rem 1rem; border: 1px solid color-mix(in srgb, var(--ek-primario) 35%, var(--ek-borde)); border-left: 4px solid var(--ek-primario);
    border-radius: var(--ek-radio-chico); background: var(--ek-superficie); }
.ek-mejorar-propuesta strong { display: inline-flex; align-items: center; gap: .3rem; color: var(--ek-primario); font-size: .85rem; }
.ek-mejorar-propuesta p { margin: .4rem 0 .6rem; white-space: pre-wrap; }
.ek-mejorar-error { margin: 0; color: var(--ek-error); font-size: .85rem; }
.ek-mejorar-error a { margin-left: .35rem; }
.ek-asistente-uso { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .5rem 0; }
.ek-asistente-uso div { display: grid; }
.ek-asistente-uso dt { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-texto-suave); }
.ek-asistente-uso dd { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ek-titulo); font-variant-numeric: tabular-nums; }

/* ===== Entregas de tareas =====
   Docente: un resumen del grupo, la lista de estudiantes con su estado y un panel lateral para revisar y publicar.
   Estudiante: sus clases, cada tarea como tarjeta del color de su componente y la retroalimentación con lo que hizo bien y
   cómo corregir cada falla. */
.ek-calificacion-tarea { display: grid; gap: .75rem; margin: 0; padding: 1rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); }
.ek-calificacion-tarea legend { padding: 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-texto-suave); }
.ek-calificacion-tarea .ek-campo { margin: 0; }
.ek-opciones-publicar { display: grid; gap: .5rem; }
.ek-opciones-publicar label { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); cursor: pointer; }
.ek-opciones-publicar label.activa { border-color: var(--ek-primario); background: var(--ek-primario-suave); }
.ek-opciones-publicar input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--ek-primario); }
.ek-opciones-publicar span { display: grid; }
.ek-opciones-publicar small { color: var(--ek-texto-suave); }
.ek-insignia-cuenta { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 99px; background: var(--ek-extra-suave); color: var(--ek-extra);
    font-size: .72rem; font-weight: 700; }

.ek-entregas-resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.ek-entregas-resumen > div { display: grid; padding: .75rem 1rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); background: var(--ek-superficie); box-shadow: var(--ek-sombra); }
.ek-entregas-resumen strong { font-size: 1.5rem; line-height: 1.1; color: var(--ek-titulo); font-variant-numeric: tabular-nums; }
.ek-entregas-resumen small { color: var(--ek-texto-suave); font-size: .8rem; }
.ek-entregas-propuestas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.ek-entregas-lista { list-style: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); background: var(--ek-superficie); box-shadow: var(--ek-sombra); }
.ek-entregas-lista li + li { border-top: 1px solid color-mix(in srgb, var(--ek-borde) 70%, transparent); }
.ek-entregas-lista li.activa { background: var(--ek-primario-suave); }
.ek-entregas-fila { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 56px; padding: .5rem 1rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ek-entregas-fila:hover:not(:disabled) { background: color-mix(in srgb, var(--ek-primario) 5%, var(--ek-superficie)); }
.ek-entregas-fila:disabled { cursor: default; opacity: .75; }
.ek-entregas-nombre { flex: 1; display: grid; min-width: 0; }
.ek-entregas-nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-entregas-nombre small { color: var(--ek-texto-suave); font-size: .8rem; }
.ek-entregas-tarde { color: var(--ek-extra); font-weight: 600; }
.ek-entregas-nota { min-width: 2.6rem; text-align: right; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--ek-titulo); }
.ek-entregas-nota.propuesta { color: var(--ek-texto-suave); font-style: italic; }
.ek-entrega-cajon { width: min(640px, 100%); }
.ek-entrega-texto { white-space: pre-wrap; margin: 0; padding: .75rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-entrega-archivos { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.ek-entrega-archivos a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.ek-entrega-archivos small { color: var(--ek-texto-suave); }
.ek-entrega-publicar { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ek-borde); }
.ek-entrega-publicar h3 { margin: 0; }
.ek-entrega-nota { max-width: 7rem; font-size: 1.25rem; font-weight: 700; text-align: center; }

/* Retroalimentación: fortalezas con una marca verde y cada falla como tarjeta con su forma de mejorar. */
.ek-retro-fortalezas { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .35rem; }
.ek-retro-fortalezas li { display: flex; gap: .45rem; align-items: flex-start; }
.ek-retro-fortalezas .ek-icono { flex: none; margin-top: .15rem; color: var(--ek-exito); }
.ek-retro-observaciones { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; counter-reset: obs; }
.ek-retro-observaciones li { position: relative; padding: .75rem .9rem .75rem 2.6rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); counter-increment: obs; }
.ek-retro-observaciones li::before { content: counter(obs); position: absolute; left: .75rem; top: .75rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem;
    border-radius: 50%; background: var(--ek-error-suave); color: var(--ek-error); font-size: .75rem; font-weight: 700; }
.ek-retro-observaciones p { margin: .25rem 0 0; }
.ek-retro-mejorar { padding: .5rem .65rem; border-radius: 8px; background: var(--ek-exito-suave); }
.ek-retro-mejorar span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-exito); }

/* =====================================================================
   Módulo del estudiante: Mis clases y la cabecera de la clase
   Cada asignatura tiene un color plano que sale de su nombre (TonoClase): la tarjeta en Mis clases y la cabecera de la
   clase lo llevan, así el estudiante la reconoce de un vistazo. Primero el teléfono; en escritorio, rejilla y cifras al lado.
   ===================================================================== */
.ek-tono-0 { --ek-tono: var(--ek-primario); }
.ek-tono-1 { --ek-tono: #0f8a6b; }
.ek-tono-2 { --ek-tono: #b7531f; }
.ek-tono-3 { --ek-tono: #6b4fbb; }
.ek-tono-4 { --ek-tono: #0e7490; }
.ek-tono-5 { --ek-tono: #a3246f; }

.ek-clases { display: grid; gap: .8rem; }
.ek-clase-tarjeta { display: grid; gap: .8rem; padding: 1rem 1rem .85rem; border: 1px solid var(--ek-borde); border-top: 5px solid var(--ek-tono); border-radius: 14px;
    background: var(--ek-superficie); box-shadow: var(--ek-sombra); color: inherit; text-decoration: none; transition: transform var(--ek-transicion), box-shadow var(--ek-transicion), border-color var(--ek-transicion); }
.ek-clase-tarjeta:hover { border-color: var(--ek-tono); box-shadow: 0 6px 18px rgb(16 24 40 / 10%); transform: translateY(-1px); }
.ek-clase-tarjeta-cuerpo { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.ek-clase-inicial { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--ek-tono); color: #fff; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.ek-clase-tarjeta-texto { flex: 1; display: grid; gap: .15rem; min-width: 0; }
.ek-clase-tarjeta-texto strong { font-size: 1.08rem; color: var(--ek-titulo); line-height: 1.2; }
.ek-clase-tarjeta-texto small { display: inline-flex; align-items: center; gap: .3rem; color: var(--ek-texto-suave); }
.ek-clase-tarjeta-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .7rem; border-top: 1px solid var(--ek-borde); }
.ek-clase-estado { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 99px; background: var(--ek-exito-suave); color: var(--ek-exito); font-size: .8rem; font-weight: 650; }
.ek-clase-estado.pendiente { background: var(--ek-extra-suave); color: var(--ek-extra); }
.ek-clase-ir { display: inline-flex; align-items: center; gap: .1rem; color: var(--ek-tono); font-weight: 650; font-size: .88rem; }
.ek-clase-ir .ek-icono { transform: rotate(180deg); }

.ek-clase-hero { display: grid; gap: 1rem; margin: 0 0 1rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: 16px; background: var(--ek-tono); color: #fff; box-shadow: var(--ek-sombra); }
.ek-clase-hero-texto { display: grid; gap: .25rem; min-width: 0; }
.ek-clase-volver { display: inline-flex; align-items: center; gap: .15rem; justify-self: start; min-height: 32px; padding: .2rem .6rem .2rem .3rem; border-radius: 99px; background: rgb(255 255 255 / 16%); color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; }
.ek-clase-volver:hover { background: rgb(255 255 255 / 26%); }
.ek-clase-hero h1 { margin: .25rem 0 0; font-size: 1.55rem; line-height: 1.15; color: #fff; }
.ek-clase-hero h1::after { display: none; }
.ek-clase-hero p { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; color: rgb(255 255 255 / 88%); font-size: .95rem; }
.ek-clase-hero-sep { opacity: .6; }
.ek-clase-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.ek-clase-cifra { display: grid; align-content: start; gap: .1rem; padding: .6rem .7rem; border-radius: 12px; background: rgb(255 255 255 / 14%); }
.ek-clase-cifra dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / 80%); }
.ek-clase-cifra dd { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.ek-clase-cifra small { font-size: .78rem; color: rgb(255 255 255 / 85%); }
.ek-clase-cifra .ek-desempeno { justify-self: start; background: rgb(255 255 255 / 92%); }

.ek-clase-pestanas { display: flex; gap: .3rem; margin: 0 0 1rem; padding: .3rem; border: 1px solid var(--ek-borde); border-radius: 14px; background: var(--ek-superficie); overflow-x: auto; scrollbar-width: none; }
.ek-clase-pestanas::-webkit-scrollbar { display: none; }
.ek-clase-pestanas button { flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .9rem; border: 0; border-radius: 10px; background: transparent; color: var(--ek-texto-suave); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
.ek-clase-pestanas button:hover { background: var(--ek-superficie-2); color: var(--ek-texto); }
.ek-clase-pestanas button.activo { background: var(--ek-primario); color: #fff; }
.ek-clase-pestana-cuenta { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 99px; background: var(--ek-superficie-2); color: var(--ek-texto); font-size: .72rem; font-weight: 700; }
.ek-clase-pestanas button.activo .ek-clase-pestana-cuenta { background: rgb(255 255 255 / 22%); color: #fff; }
.ek-mi-clase-barra { display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: space-between; margin-bottom: .75rem; }
@media (min-width: 760px) {
    .ek-clase-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 1.4rem 1.5rem; }
    .ek-clase-hero h1 { font-size: 2rem; }
    .ek-clase-cifras { gap: .6rem; }
    .ek-clase-cifra { min-width: 120px; padding: .7rem .9rem; }
    .ek-clase-pestanas { display: inline-flex; max-width: 100%; }
}
.ek-mi-clase-barra .ek-segmentos { max-width: 100%; }
.ek-mis-tareas { display: grid; gap: 1rem; }
.ek-mi-tarea { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--ek-borde); border-top: 4px solid var(--ek-comp, var(--ek-primario)); border-radius: var(--ek-radio);
    background: var(--ek-superficie); box-shadow: var(--ek-sombra); }
.ek-mi-tarea > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.ek-mi-tarea h2 { margin: 0; font-size: 1.1rem; }
.ek-mi-tarea > header small { color: var(--ek-texto-suave); }
.ek-mi-tarea-instrucciones { margin: 0; }
.ek-mi-tarea-rubrica summary { cursor: pointer; font-weight: 600; color: var(--ek-primario); min-height: 32px; }
.ek-mi-tarea-rubrica p { margin: .4rem 0 0; white-space: pre-wrap; color: var(--ek-texto-suave); }
.ek-mi-evaluacion { display: grid; gap: .75rem; padding: .9rem; border-radius: var(--ek-radio-chico); background: color-mix(in srgb, var(--ek-primario) 5%, var(--ek-superficie)); }
.ek-mi-evaluacion-nota { display: flex; align-items: center; gap: .6rem; }
.ek-mi-evaluacion-nota strong { font-size: 2rem; line-height: 1; color: var(--ek-titulo); }
.ek-mi-evaluacion-texto { margin: 0 0 .6rem; }
.ek-mi-entrega { padding: .7rem .8rem; border: 1px dashed var(--ek-borde); border-radius: var(--ek-radio-chico); }
.ek-mi-entrega p { margin: .35rem 0 0; white-space: pre-wrap; }
.ek-mi-entrega small { color: var(--ek-texto-suave); }
.ek-mi-entrega-archivo { display: inline-flex; align-items: center; gap: .3rem; margin: .4rem .75rem 0 0; font-weight: 600; }
.ek-mi-entrega-lista { list-style: none; margin: 0; padding: 0; }
.ek-mi-entrega-lista li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ek-adjuntar-compacto { padding: .75rem; }
.ek-mis-notas-clase { display: grid; gap: 1rem; }
.ek-mis-notas-clase .ek-notas-foco-definitiva { justify-self: start; grid-auto-flow: column; align-items: center; gap: .6rem; }
.ek-notas-ficha-notas li .ek-comp-punto { display: inline-block; margin: 0 .3rem 0 0; }
.ek-notas-ficha-actividad { padding-left: 1.2rem !important; font-size: .88rem; color: var(--ek-texto-suave); }
@media (min-width: 700px) {
    .ek-entregas-resumen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ek-opciones-publicar { grid-template-columns: 1fr 1fr; }
    .ek-clases { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .ek-mi-evaluacion { grid-template-columns: auto 1fr; align-items: start; }
    .ek-mi-evaluacion-nota { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 699px) { .ek-entregas-fila .ek-chip-neutro { display: none; } }

/* Desde cada actividad se deja una tarea ya vinculada: su nota va directo a la planilla. */
.ek-plan-etiqueta-enlace, .ek-plan-tarea-nueva { text-decoration: none; }
.ek-plan-etiqueta-enlace:hover { color: var(--ek-primario); }
.ek-plan-tarea-nueva { background: var(--ek-primario-suave); color: var(--ek-primario); }
.ek-plan-tarea-nueva:hover { background: var(--ek-primario); color: var(--ek-superficie); }
.ek-tarea-planilla { display: flex; align-items: center; gap: .35rem; margin: .35rem 0 0; color: var(--ek-exito); font-size: .88rem; font-weight: 600; }
button.ek-plan-tarea-nueva { border: 0; font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; }
.ek-plan-vincular { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .4rem; }
.ek-plan-vincular .ek-input { flex: 1 1 14rem; min-width: 0; }

/* En las entregas: a dónde van las notas en la planilla y el botón para llevarlas. */
.ek-entregas-planilla { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.ek-entregas-planilla-icono { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ek-exito-suave); color: var(--ek-exito); }
.ek-entregas-planilla-icono.pendiente { background: var(--ek-extra-suave); color: var(--ek-extra); }
.ek-entregas-planilla-texto { flex: 1 1 16rem; display: grid; min-width: 0; }
.ek-entregas-planilla-texto strong { color: var(--ek-titulo); }
.ek-entregas-planilla-texto small { color: var(--ek-texto-suave); }
.ek-entregas-planilla-destino { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .5rem; }
.ek-entregas-planilla-destino .ek-input { flex: 1 1 16rem; min-width: 0; }
/* Los cuatro componentes caben a la vista en el teléfono: se parten en dos renglones en vez de desplazarse de lado. */
.ek-tarea-componente { margin-top: .5rem; flex-wrap: wrap; overflow-x: visible; }

/* Horario especial (paro, asamblea): la coordinación lo arma por grupo; docentes y estudiantes ven su día. */
.ek-ausentes { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ek-ausentes legend { font-weight: 700; margin-bottom: .4rem; color: var(--ek-titulo); }
.ek-ausentes-barra { display: grid; gap: .5rem; }
.ek-ausentes-lista { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 22rem; overflow-y: auto; padding: .2rem; }
.ek-ausentes-lista .ek-chip-grupo { min-height: 44px; }
.ek-ausentes-lista small { color: var(--ek-texto-suave); }
.ek-especial-resumen { display: grid; gap: .9rem; }
.ek-especial-resumen .ek-ayuda { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ek-especial-cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.ek-especial-cifras div { display: grid; padding: .6rem .8rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-especial-cifras strong { font-size: 1.4rem; color: var(--ek-titulo); line-height: 1.1; }
.ek-especial-cifras span { font-size: .8rem; color: var(--ek-texto-suave); }
.ek-especial-ausentes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ek-especial-cambio { display: grid; gap: .75rem; padding: .9rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-especial-resumen > .ek-acciones { flex-wrap: wrap; align-items: center; }
.ek-especial-grupos { display: grid; gap: 1rem; margin-top: 1rem; }
.ek-especial-grupo { display: grid; gap: .6rem; align-content: start; }
.ek-especial-grupo h2 { margin: 0; }
.ek-especial-grupo header .ek-ayuda { margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.ek-especial-antes { color: var(--ek-exito); font-weight: 700; }
.ek-especial-horas { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ek-especial-horas li { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: var(--ek-radio-chico); border-left: 4px solid var(--ek-primario); background: var(--ek-superficie-2); }
.ek-especial-horas li.vacia { border-left-color: var(--ek-borde); }
.ek-especial-horas li.cambia { background: color-mix(in srgb, var(--ek-primario) 7%, var(--ek-superficie)); }
.ek-especial-horas li.ek-especial-descanso { grid-template-columns: 48px 1fr; border-left-color: transparent; background: transparent; color: var(--ek-texto-suave); font-size: .85rem; padding-block: .1rem; }
.ek-especial-hora { display: grid; font-weight: 700; font-size: .85rem; }
.ek-especial-hora small { font-weight: 400; color: var(--ek-texto-suave); font-size: .72rem; }
.ek-especial-horas select.ek-input { min-width: 0; width: 100%; }
.ek-especial-clase { display: grid; min-width: 0; }
.ek-especial-clase small { color: var(--ek-texto-suave); }
.ek-especial-clase em { color: var(--ek-texto-suave); }
.ek-dia-especial { margin-bottom: 1rem; border-top: 4px solid var(--ek-acento-marca, var(--ek-primario)); }
.ek-dia-especial h2 { margin: .2rem 0 0; }
.ek-dia-especial-etiqueta { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ek-primario); }
.ek-dia-especial-horas { display: flex; gap: .5rem; flex-wrap: wrap; }
.ek-dia-especial-horas span { padding: .3rem .7rem; border-radius: 99px; background: var(--ek-primario-suave); color: var(--ek-titulo); font-size: .85rem; }
.ek-dia-especial .ek-hoy-lista li.vacia strong { color: var(--ek-texto-suave); font-weight: 600; }
.ek-dia-especial .ek-hoy-lista li.ek-dia-especial-descanso { background: transparent; padding-block: .15rem; }
.ek-dia-especial-pie { margin: .6rem 0 0; }
@media (min-width: 700px) {
    .ek-especial-cifras { grid-template-columns: repeat(4, 1fr); }
    .ek-ausentes-barra { grid-template-columns: minmax(0, 20rem) 1fr; align-items: center; }
}
@media (min-width: 900px) {
    .ek-especial-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
    .ek-especial-grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ek-jornada-unica { display: grid; gap: .6rem; padding: .8rem .9rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-jornada-unica .ek-check { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: start; }
.ek-jornada-unica .ek-segmentos { max-width: 100%; flex-wrap: wrap; }
.ek-jornada-unica p { margin: 0; }
.ek-dia-especial.sin-cambios { border-top-color: var(--ek-exito); }
.ek-dia-especial-igual { display: flex; align-items: center; gap: .4rem; margin: .4rem 0 0; color: var(--ek-exito); }
.ek-dia-especial-igual strong { color: var(--ek-texto); }
.ek-niveles { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ek-niveles legend { font-weight: 700; margin-bottom: .4rem; color: var(--ek-titulo); }
.ek-niveles p { margin: 0; }
.ek-especial-nivel { margin: 1.4rem 0 0; font-size: 1.05rem; color: var(--ek-titulo); display: flex; align-items: baseline; gap: .5rem; }
.ek-especial-nivel small { font-size: .8rem; font-weight: 500; color: var(--ek-texto-suave); }
.ek-especial-nivel + .ek-especial-grupos { margin-top: .6rem; }

/* Estado de las llaves: el nombre y para qué sirve, uno debajo del otro (también en la tarjeta del teléfono). */
.ek-llave-revisada { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; }

/* Cuentas de Google: la elección entre dejar la cuenta que ya tiene o crear la nueva. */
.ek-elegir-cuentas p { margin-bottom: .75rem; }

/* Guías: una tarjeta por asignatura y grado, con su plazo, sus archivos y el formulario para subir otra. */
.ek-guias { display: grid; gap: 1rem; margin-top: 1rem; }
.ek-guia-cabecera { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.ek-guia-cabecera h2 { margin: 0; }
.ek-guia-plazo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ek-guia-lista { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.ek-guia-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .6rem .75rem; border-radius: 10px; background: var(--ek-superficie-2); }
.ek-guia-lista a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; color: var(--ek-primario); text-decoration: none; overflow-wrap: anywhere; }
.ek-guia-lista .ek-ayuda { flex: 1 1 12rem; }
.ek-subir-guia { border-top: 1px solid var(--ek-borde); padding-top: .75rem; }
.ek-filtros-guias { display: grid; gap: .5rem; margin: 1rem 0 .5rem; }
.ek-resumen-guias { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.ek-resumen-guias span { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
@media (min-width: 768px) {
    .ek-guia-cabecera { flex-direction: row; justify-content: space-between; align-items: flex-start; }
    .ek-filtros-guias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Observaciones de los directivos a una guía: el docente las lee debajo de la guía; el directivo, en el seguimiento. */
.ek-guia-observada { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.ek-guia-observada > a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; overflow-wrap: anywhere; }
.ek-guia-observaciones { flex: 1 1 100%; display: grid; gap: .5rem; padding: .6rem .75rem; border-left: 3px solid var(--ek-primario); border-radius: 8px; background: var(--ek-superficie); }
.ek-guia-observacion { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.ek-guia-observacion p { flex: 1 1 100%; margin: 0; white-space: pre-line; }

/* El mismo examen o la misma tarea en varios grupos: la lista de grupos para marcar y los grupos que ya lo tienen. */
.ek-varios-grupos { display: grid; gap: .5rem; }
.ek-varios-grupos h2 { margin: 0; }
.ek-varios-grupos-lista { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.ek-varios-grupos-lista .ek-check { min-height: 44px; }
.ek-varios-grupos-examen { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ek-varios-grupos-examen li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; min-height: 44px; }
.ek-varios-grupos-copiar { display: grid; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--ek-borde); }

/* Calendario del estudiante en el inicio: lista por días en el teléfono, cuadrícula del mes en pantalla grande. */
.ek-cal-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.ek-cal-cabecera h2 { margin: 0; }
.ek-cal-navegacion { display: inline-flex; align-items: center; gap: .25rem; }
.ek-cal-navegacion .ek-btn { min-width: 44px; min-height: 44px; }
.ek-cal-siguiente svg { transform: rotate(180deg); }
.ek-cal-mes { display: none; }
.ek-cal-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ek-cal-lista li { display: flex; gap: .75rem; padding: .5rem; border-radius: 10px; }
.ek-cal-lista li.hoy { background: var(--ek-primario-suave); }
.ek-cal-lista-actividades { display: grid; gap: .25rem; flex: 1; min-width: 0; }
.ek-cal-actividad { display: flex; align-items: flex-start; gap: .4rem; min-height: 44px; padding: .25rem .4rem; border-radius: 8px; color: var(--ek-texto); text-decoration: none; }
.ek-cal-actividad:hover { background: var(--ek-superficie-2); }
.ek-cal-actividad small { display: block; color: var(--ek-texto-suave); }
.ek-cal-actividad > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ek-cal-punto { flex: none; width: .6rem; height: .6rem; margin-top: .4rem; border-radius: 50%; }
.ek-cal-hecha { opacity: .6; }
.ek-cal-hecha > span:last-child strong, .ek-cal-hecha > span:last-child:not(:has(strong)) { text-decoration: line-through; }
.ek-cal-vencida strong, .ek-cal-vencida > span:last-child { color: var(--ek-error); }
.ek-cal-vacio { margin: .5rem 0 0; }
@media (min-width: 768px) {
    .ek-cal-lista { display: none; }
    .ek-cal-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--ek-borde); border: 1px solid var(--ek-borde); border-radius: 10px; overflow: hidden; }
    .ek-cal-dia-semana { padding: .35rem; background: var(--ek-superficie-2); font-size: .75rem; font-weight: 700; text-align: center; color: var(--ek-texto-suave); }
    .ek-cal-celda { min-height: 6.5rem; padding: .3rem; background: var(--ek-superficie); display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
    .ek-cal-celda.fuera { background: var(--ek-superficie-2); color: var(--ek-texto-suave); }
    .ek-cal-celda.hoy .ek-cal-numero { background: var(--ek-primario); color: #fff; border-radius: 99px; padding: 0 .4rem; }
    .ek-cal-numero { align-self: flex-start; font-size: .8rem; font-weight: 700; }
    .ek-cal-celda .ek-cal-actividad { min-height: 0; font-size: .78rem; padding: .1rem .25rem; }
    .ek-cal-celda .ek-cal-actividad > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ek-cal-celda .ek-cal-punto { margin-top: .3rem; }
}

/* Cuentas de Google: quitar el cambio de contraseña pendiente a las cuentas ya creadas del grupo. */
.ek-cambio-contrasena { margin: .25rem 0 .75rem; }

/* Materiales de una tarea: archivos y enlaces que deja el docente. */
.ek-materiales { display: grid; gap: .4rem; margin: .5rem 0 .75rem; }
.ek-materiales-titulo { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ek-texto-suave); }
.ek-materiales-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ek-materiales-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; padding: .25rem .6rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); background: var(--ek-superficie); }
.ek-materiales-lista a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; color: var(--ek-primario); text-decoration: none; overflow-wrap: anywhere; }
.ek-materiales-lista .ek-ayuda { flex: 1 1 8rem; }
.ek-materiales-agregar { padding: .75rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }

/* Tarea en equipo: el recuadro fijo con el equipo, la regla de la entrega y quién entregó. */
.ek-equipo-aviso { display: grid; gap: .45rem; margin: .5rem 0 .75rem; padding: .75rem .9rem; border-radius: var(--ek-radio-chico);
    border: 1px solid color-mix(in srgb, var(--ek-primario) 25%, var(--ek-borde)); border-left: 4px solid var(--ek-primario);
    background: var(--ek-primario-suave); }
.ek-equipo-aviso.sin-equipo { border-left-color: var(--ek-extra); background: var(--ek-extra-suave); border-color: color-mix(in srgb, var(--ek-extra) 25%, var(--ek-borde)); }
.ek-equipo-aviso p { margin: 0; font-size: .92rem; }
.ek-equipo-aviso-cabecera { display: flex; align-items: center; gap: .5rem; color: var(--ek-titulo); }
.ek-equipo-aviso-cabecera .ek-icono { color: var(--ek-primario); }
.ek-equipo-aviso.sin-equipo .ek-equipo-aviso-cabecera .ek-icono { color: var(--ek-extra); }
.ek-equipo-aviso-integrantes { display: flex; flex-wrap: wrap; gap: .3rem; }
.ek-equipo-aviso-integrantes .ek-etiqueta { background: var(--ek-superficie); font-size: .78rem; padding: .15rem .6rem; }
.ek-equipo-aviso-estado { display: flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--ek-exito); }

/* ----- Condiciones del horario: los tres pasos de una relación (asignaturas, clases, condición) ----- */
.ek-lista-simple { margin: .5rem 0; padding-left: 1.25rem; display: grid; gap: .25rem; }
.ek-condicion-form { display: grid; gap: 1rem; }
.ek-condicion-paso { display: grid; gap: .5rem; margin: 0; padding: .75rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); }
.ek-condicion-paso legend { display: flex; align-items: center; gap: .5rem; padding: 0 .25rem; font-weight: 700; color: var(--ek-titulo); }
.ek-condicion-numero { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ek-primario); color: #fff; font-size: .85rem; }
.ek-condicion-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 .75rem; max-height: 16rem; overflow-y: auto; }
.ek-condicion-grupos { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); max-height: none; }
.ek-condicion-sede { margin: .25rem 0 0; font-size: .9rem; }
.ek-condicion-grados { display: flex; flex-wrap: wrap; gap: .4rem; }
.ek-chip-boton { min-height: 44px; padding: .25rem .9rem; border: 1px solid var(--ek-borde); border-radius: 99px; background: var(--ek-superficie); color: var(--ek-texto); font: inherit; font-size: .85rem; cursor: pointer; }
.ek-chip-boton.activo { border-color: var(--ek-primario); background: var(--ek-primario-suave); color: var(--ek-primario); font-weight: 600; }
.ek-condicion-tipos { display: grid; gap: .4rem; }
.ek-condicion-tipo { display: flex; align-items: flex-start; gap: .6rem; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); cursor: pointer; }
.ek-condicion-tipo input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--ek-primario); }
.ek-condicion-tipo small { display: block; color: var(--ek-texto-suave); }
.ek-condicion-tipo.activo { border-color: var(--ek-primario); background: var(--ek-primario-suave); }
.ek-condiciones { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ek-condicion { display: grid; gap: .5rem; align-items: center; }
.ek-condicion.inactiva { opacity: .6; }
.ek-condicion-texto { display: grid; gap: .15rem; min-width: 0; overflow-wrap: anywhere; }
.ek-condicion-texto small { color: var(--ek-texto-suave); }
.ek-condicion-nota { font-style: italic; }
.ek-etiqueta-fuerte { background: var(--ek-primario); color: #fff; }
@media (min-width: 760px) {
    .ek-condicion { grid-template-columns: 1fr auto auto; }
    .ek-condicion-tipos { grid-template-columns: 1fr 1fr; }
}

/* ----- Citaciones de acudientes ----- */
.ek-citacion-form { display: grid; gap: .75rem; }
.ek-citacion-estudiantes { margin: 0; padding: .75rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); display: grid; gap: .25rem; }
.ek-citacion-estudiantes legend { padding: 0 .25rem; font-weight: 700; color: var(--ek-titulo); }
.ek-citacion-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1rem; max-height: 22rem; overflow-y: auto; }
.ek-citacion-estudiante { align-items: flex-start; padding: .25rem 0; }
.ek-citacion-estudiante input { margin-top: .2rem; }
.ek-citacion-estudiante small { display: block; color: var(--ek-texto-suave); }
.ek-citacion-todos { font-weight: 600; }
.ek-citacion-resultado { display: grid; gap: .4rem; }
.ek-citacion-resultado p { margin: 0; }
.ek-citacion-resultado .ek-btn { justify-self: start; }
.ek-citacion-cancelada { opacity: .55; }

/* ----- Crear la evaluación desde un archivo: revisar lo que leyó el asistente ----- */
.ek-examen { display: grid; gap: .75rem; }
/* Recuperación: la casilla recuperada en la planilla, la tarjeta de la evaluación y las etiquetas del estudiante. */
.ek-nota-recuperada { box-shadow: inset 0 0 0 2px var(--ek-acento-marca); }
.ek-nota-recuperada-texto { display: block; font-size: .78rem; }
.ek-nota-con-recuperacion { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.ek-escala-grupo .ek-campo-ancho { grid-column: 1 / -1; }
.ek-escala-grupo .ek-campo-ancho select { width: 100%; max-width: 100%; }
.ek-recuperacion-tarjeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.ek-recuperacion-tarjeta p { margin: 0; display: flex; align-items: flex-start; gap: .4rem; flex: 1 1 320px; }
.ek-mi-recuperacion { display: inline-block; margin: .15rem 0 .25rem; }
.ek-mi-evaluacion-notas { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
/* Tarea por puntos: los puntos numerados con su respuesta, en el formulario del docente, en la clase del estudiante y en el panel de la entrega. */
.ek-puntos { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: punto; }
.ek-puntos > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; counter-increment: punto; }
.ek-puntos > li > div { min-width: 0; }
.ek-puntos .ek-input { width: 100%; }
.ek-puntos > li::before { content: counter(punto); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ek-comp, var(--ek-primario)); color: #fff; font-weight: 700; font-size: .85rem; margin-top: .15rem; }
.ek-puntos-editor > li { align-items: center; }
.ek-puntos-editor > li .ek-input { flex: 1; }
.ek-puntos-editor-fila { display: flex; gap: .4rem; align-items: center; }
.ek-punto-enunciado { margin: 0; white-space: pre-wrap; }
.ek-punto-respuesta { display: grid; gap: .4rem; margin-top: .35rem; }
.ek-punto-respuesta p { margin: 0; padding: .5rem .75rem; background: var(--ek-superficie-2); border-radius: 10px; white-space: pre-wrap; }
.ek-punto-respuesta .ek-ayuda { font-style: italic; }
.ek-punto-adjuntar { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .6rem; color: var(--ek-primario); font-weight: 600; cursor: pointer; }
.ek-punto-adjuntar:hover { text-decoration: underline; }
/* Lo que el estudiante puede usar: fichas a la vista, en la tarjeta de la tarea. */
.ek-recursos { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; font-size: .9rem; color: var(--ek-texto-suave); }
.ek-recursos .ek-etiqueta { background: color-mix(in srgb, var(--ek-comp, var(--ek-primario)) 12%, var(--ek-superficie)); color: var(--ek-texto); }
.ek-recursos-sugeridos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.ek-recursos-sugeridos button { min-height: 32px; padding: 0 .7rem; border: 1px solid var(--ek-borde); border-radius: 999px; background: var(--ek-superficie); color: var(--ek-texto); font-size: .85rem; cursor: pointer; }
.ek-recursos-sugeridos button:hover { border-color: var(--ek-primario); color: var(--ek-primario); }
/* Sustentación: el porcentaje con su signo, las preguntas numeradas y el registro de cada estudiante en el panel de la entrega. */
.ek-campo-porcentaje { display: inline-flex; align-items: center; gap: .35rem; }
.ek-campo-porcentaje .ek-input { width: 5.5rem; }
.ek-sustentacion-peso { align-items: center; }
.ek-sustentacion-estudiante { display: grid; gap: .5rem; padding: .75rem 0; border-top: 1px solid var(--ek-borde); }
.ek-sustentacion-estudiante:first-of-type { border-top: 0; padding-top: 0; }
.ek-sustentacion-preguntas { margin: 0; padding-left: 1.25rem; display: grid; gap: .3rem; font-size: .92rem; }
.ek-sustentacion-registro { padding: 0; }
.ek-mi-sustentacion { display: block; }
.ek-mi-sustentacion p { margin: .4rem 0 0; }
/* La tarea que nació de un archivo: el aviso con el nombre del archivo y la opción de no adjuntarlo. */
.ek-tarea-origen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.ek-tarea-origen > span { display: inline-flex; align-items: flex-start; gap: .4rem; }
.ek-examen .ek-adjuntar.ocupado { opacity: .7; cursor: progress; }
.ek-examen-resumen { margin: 0; }
.ek-examen-preguntas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ek-examen-preguntas > li { display: grid; gap: .4rem; padding: .75rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); background: var(--ek-superficie); }
.ek-examen-preguntas > li.por-confirmar { border-color: var(--ek-primario); }
.ek-examen-preguntas > li.fuera { opacity: .55; }
.ek-examen-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; }
/* El contexto compartido trae tablas como texto, fila por fila: se respetan los renglones. */
.ek-examen-enunciado { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.ek-examen-opciones { display: grid; gap: .1rem; }
.ek-examen-opciones .ek-check { align-items: flex-start; min-height: 44px; }
.ek-examen-opciones .ek-check input { margin-top: .2rem; }
.ek-examen-opciones .correcta { font-weight: 600; color: var(--ek-titulo); }
.ek-examen-vf { width: auto; }
/* Completar: cada espacio es una casilla dentro del texto, con las respuestas que valen («/» separa varias). */
.ek-examen-completar { line-height: 3.1; }
.ek-examen-hueco { display: inline-block; width: auto; max-width: 100%; min-height: 44px; margin: 0 .2rem; padding: .3rem .6rem;
  font-size: 16px; line-height: 1.3; vertical-align: middle; border-style: dashed; border-color: var(--ek-primario); }
/* Relacionar: en el teléfono el elemento va encima de su pareja; en pantalla ancha, en una sola línea. */
.ek-examen-parejas { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: pareja; }
.ek-examen-parejas li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .35rem .5rem; counter-increment: pareja; }
.ek-examen-izquierda { grid-column: 1 / -1; font-weight: 600; color: var(--ek-titulo); overflow-wrap: anywhere; }
.ek-examen-izquierda::before { content: counter(pareja) ". "; color: var(--ek-texto-suave); font-weight: 500; }
.ek-examen-une { color: var(--ek-primario); }
.ek-examen-parejas select { min-height: 44px; font-size: 16px; }
@media (min-width: 760px) {
  .ek-examen-parejas li { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .ek-examen-izquierda { grid-column: auto; }
}
.ek-examen-aviso { display: flex; gap: .35rem; align-items: flex-start; margin: 0; color: var(--ek-error); font-size: .9rem; }

/* ----- Imágenes y tablas en las preguntas ----- */
.ek-pregunta-imagenes { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0; }
.ek-pregunta-imagenes img { max-width: 100%; max-height: 22rem; height: auto; border-radius: var(--ek-radio-chico); border: 1px solid var(--ek-borde); background: #fff; }
.ek-pregunta-imagenes.compacto img { max-height: 6rem; }
.ek-pregunta-tabla-marco { overflow-x: auto; margin: .4rem 0; }
.ek-pregunta-tabla { border-collapse: collapse; font-size: .9rem; }
.ek-pregunta-tabla th, .ek-pregunta-tabla td { border: 1px solid var(--ek-borde); padding: .3rem .6rem; text-align: center; white-space: nowrap; }
.ek-pregunta-tabla th { background: var(--ek-superficie-2); font-weight: 700; }
.ek-opcion-imagen { display: block; max-width: 100%; max-height: 12rem; margin-top: .25rem; border-radius: var(--ek-radio-chico); border: 1px solid var(--ek-borde); background: #fff; }
/* El editor de la tabla en el banco: una casilla por celda, con los botones de filas y columnas. */
.ek-tabla-editor { display: grid; gap: .4rem; }
.ek-tabla-editor table { border-collapse: collapse; }
.ek-tabla-editor td { padding: 1px; }
.ek-tabla-editor .ek-input { min-width: 6rem; padding: .3rem .4rem; min-height: 40px; }
.ek-tabla-editor-acciones { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.ek-imagenes-editor { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.ek-imagen-editable { position: relative; }
.ek-imagen-editable img { max-height: 8rem; max-width: 14rem; border-radius: var(--ek-radio-chico); border: 1px solid var(--ek-borde); background: #fff; }
.ek-imagen-editable .ek-boton-icono { position: absolute; top: 2px; right: 2px; background: var(--ek-superficie); }
.ek-opcion-con-imagen { display: grid; gap: .25rem; flex: 1; min-width: 0; }
.ek-opcion-con-imagen .ek-imagen-editable img { max-height: 6rem; }

/* ----- Selector de carga por pasos: sede, grupo y asignatura ----- */
.ek-selector-carga { display: grid; gap: .75rem; }
@media (min-width: 760px) {
    .ek-selector-carga { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
    /* En la barra de Planeación comparte el renglón con los periodos: los tres campos caben si son más angostos. */
    .ek-plan-filtros .ek-selector-carga { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
}

/* ----- Evaluación vigilada ----- */
.ek-vigilada, .ek-vista-previa { display: flex; gap: .5rem; align-items: flex-start; }
.ek-chip-alerta { background: color-mix(in srgb, var(--ek-error) 14%, var(--ek-superficie)); color: var(--ek-error); }
.ek-reabrir { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ek-reabrir .ek-input { width: 5rem; }

/* ----- Tareas y evaluaciones: la fecha como ficha y la tarjeta con sus etiquetas (colores planos, el del componente o el del estado) ----- */
.ek-fecha-ficha { flex: none; display: grid; justify-items: center; align-content: center; gap: .05rem; min-width: 58px; padding: .4rem .45rem; border-radius: 12px;
    line-height: 1; background: color-mix(in srgb, var(--ek-comp, var(--ek-primario)) 12%, var(--ek-superficie)); color: var(--ek-comp, var(--ek-primario)); }
.ek-fecha-ficha strong { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.ek-fecha-ficha small { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ek-fecha-ficha.vencida { background: var(--ek-error-suave); color: var(--ek-error); }
.ek-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ek-chips .ek-chip-estado { gap: .25rem; }
/* La tarjeta del docente: la ficha a la izquierda, el cuerpo con el título, las etiquetas y las cifras abajo. */
.ek-tarea-tarjeta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .9rem; margin-bottom: .85rem; padding: 1rem;
    border: 1px solid var(--ek-borde); border-left: 4px solid var(--ek-comp, var(--ek-primario)); border-radius: var(--ek-radio); background: var(--ek-superficie); box-shadow: var(--ek-sombra); }
.ek-tarea-cuerpo { display: grid; gap: .6rem; min-width: 0; }
.ek-tarea-cuerpo > header { display: grid; gap: .4rem; }
.ek-tarea-cuerpo h3 { margin: 0; font-size: 1.08rem; color: var(--ek-titulo); overflow-wrap: anywhere; }
.ek-tarea-instrucciones { margin: 0; }
.ek-tarea-planilla-linea { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .86rem; color: var(--ek-texto-suave); }
.ek-tarea-planilla-linea strong { color: var(--ek-texto); }
.ek-tarea-planilla-linea.sin { color: var(--ek-error); }
.ek-tarea-pie { display: grid; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--ek-borde); }
.ek-tarea-cifras { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .88rem; color: var(--ek-texto-suave); }
.ek-tarea-cifras strong { font-size: 1.05rem; color: var(--ek-titulo); }
.ek-tarea-cifras .ek-insignia-cuenta { margin-left: 0; }
.ek-tarea-pie .ek-acciones { margin: 0; }
/* La lista de evaluaciones del docente: la ficha toma el color del estado. */
.ek-evaluacion-tarjeta .ek-fecha-ficha { background: var(--ek-estado-suave); color: var(--ek-estado); }
.ek-evaluacion-tarjeta.borrador .ek-fecha-ficha, .ek-evaluacion-tarjeta.cerrada .ek-fecha-ficha { background: var(--ek-superficie-2); color: var(--ek-texto-suave); }
/* La clase del estudiante: la ficha junto al título; en una evaluación, con el color del momento. */
.ek-mi-tarea > header { align-items: flex-start; }
.ek-mi-tarea-titulo { flex: 1 1 200px; min-width: 0; }
.ek-mi-tarea-titulo h2 { overflow-wrap: anywhere; }
.ek-mi-evaluacion-linea .ek-fecha-ficha-momento { background: var(--ek-superficie-2); color: var(--ek-texto-suave); }
.ek-mi-evaluacion-abierta .ek-fecha-ficha-momento { background: var(--ek-exito-suave); color: var(--ek-exito); }
.ek-mi-evaluacion-proxima .ek-fecha-ficha-momento { background: var(--ek-info-suave); color: var(--ek-info); }
@media (max-width: 759px) {
    .ek-mi-tarea > header { flex-wrap: wrap; }
    .ek-mi-tarea > header > .ek-chip-estado, .ek-mi-tarea > header > .ek-mi-evaluacion-notas { order: 3; }
}
@media (min-width: 760px) {
    .ek-tarea-pie { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
    .ek-tarea-pie .ek-acciones { justify-content: flex-end; }
}



/* =====================================================================
   Eduka · refinamiento premium institucional
   Capa visual aditiva: conserva los componentes, permisos y flujos actuales.
   ===================================================================== */
:root {
    --ek-radio: 16px;
    --ek-radio-chico: 10px;
    --ek-sombra: 0 2px 8px rgb(15 31 68 / 5%), 0 1px 2px rgb(15 31 68 / 4%);
}

.ek-contenido {
    max-width: 1440px;
}

.ek-menu-cabecera {
    padding: 1.1rem 1rem 1rem;
    border-bottom: 1px solid var(--ek-menu-borde);
}

.ek-menu-marca {
    min-width: 0;
}

.ek-marca-nombre {
    letter-spacing: -.035em;
    font-size: 1.12rem;
}

.ek-menu-anio {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: .2rem;
    padding: .12rem .45rem;
    border: 1px solid var(--ek-menu-borde);
    border-radius: 999px;
    font-size: .7rem;
    letter-spacing: .02em;
}

.ek-buscar {
    border: 1px solid var(--ek-menu-borde);
    border-radius: 11px;
    background: rgb(255 255 255 / 5%);
    transition: background var(--ek-transicion), border-color var(--ek-transicion), transform var(--ek-transicion);
}

.ek-buscar:hover {
    background: rgb(255 255 255 / 10%);
    border-color: rgb(255 255 255 / 24%);
}

.ek-menu-item,
.ek-grupo-cabecera {
    border-radius: 10px;
    transition: color var(--ek-transicion), background var(--ek-transicion), transform var(--ek-transicion);
}

.ek-menu-item:hover,
.ek-grupo-cabecera:hover {
    background: var(--ek-menu-hover);
}

.ek-menu-item.activo {
    background: var(--ek-menu-activo);
    font-weight: 650;
}

.ek-grupo-cabecera {
    letter-spacing: .025em;
}

.ek-menu-enlaces {
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 25%) transparent;
}

.ek-bienvenida {
    position: relative;
    overflow: hidden;
    align-items: center;
    min-height: 150px;
    padding: clamp(1.25rem, 3vw, 2rem);
    /* Con el menú blanco, el panel toma el tono oscuro del color elegido (como la capa SerturBookings), plano, sin degradados. */
    border: 1px solid var(--ek-c-menu);
    border-left: 4px solid var(--ek-acento-marca);
    border-radius: 18px;
    background: var(--ek-c-menu);
    box-shadow: 0 10px 26px rgb(15 31 68 / 9%);
}

.ek-bienvenida > div {
    position: relative;
    z-index: 1;
}

.ek-bienvenida-saludo {
    margin-bottom: .45rem;
    color: rgb(255 255 255 / 82%);
    font-size: .92rem;
    font-weight: 550;
    letter-spacing: .01em;
}

.ek-bienvenida h1 {
    max-width: 820px;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1.18;
}

.ek-bienvenida-sub {
    margin-top: .65rem;
    font-size: .9rem;
}

.ek-chip {
    position: relative;
    z-index: 1;
    padding: .4rem .8rem;
    background: rgb(255 255 255 / 14%);
    font-size: .76rem;
    letter-spacing: .025em;
}

.ek-rejilla {
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 245px), 1fr));
}

.ek-tarjeta {
    border-radius: 15px;
    box-shadow: var(--ek-sombra);
    transition: border-color var(--ek-transicion), box-shadow var(--ek-transicion), transform var(--ek-transicion);
}

.ek-tarjeta-enlace {
    position: relative;
    min-height: 172px;
    padding: 1.25rem;
}

.ek-tarjeta-enlace > .ek-icono,
.ek-tarjeta-pronto > .ek-icono {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 10px;
    margin-bottom: .9rem;
    border-radius: 13px;
    color: var(--ek-primario);
    background: var(--ek-primario-suave);
}

.ek-tarjeta-enlace h2,
.ek-tarjeta-pronto h2 {
    margin-bottom: .45rem;
    letter-spacing: -.015em;
}

.ek-tarjeta-enlace p,
.ek-tarjeta-pronto p {
    font-size: .9rem;
    line-height: 1.6;
}

.ek-tarjeta-enlace:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ek-primario) 45%, var(--ek-borde));
    box-shadow: 0 10px 24px rgb(15 31 68 / 8%);
}

.ek-tarjeta-pronto {
    min-height: 172px;
    padding: 1.25rem;
    border-radius: 15px;
}

.ek-accesos-cabecera {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: .75rem;
    margin: 1.8rem 0 .85rem;
}

.ek-accesos-cabecera h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: -.02em;
}

.ek-accesos-cabecera p {
    margin: .2rem 0 0;
    color: var(--ek-texto-suave);
    font-size: .86rem;
}

.ek-paleta {
    border: 1px solid var(--ek-borde);
    border-radius: 16px;
    box-shadow: 0 18px 55px rgb(0 0 0 / 18%);
}

.ek-paleta-cabecera {
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--ek-borde);
}

@media (min-width: 900px) {
    .ek-contenido {
        padding: 2rem clamp(2rem, 3vw, 3.25rem) 3rem;
    }
}

@media (max-width: 599px) {
    .ek-bienvenida {
        min-height: 0;
        align-items: flex-start;
        padding: 1.25rem;
    }

    .ek-bienvenida h1 {
        font-size: 1.35rem;
    }

    .ek-chip {
        max-width: 112px;
        white-space: normal;
        text-align: center;
    }

    .ek-accesos-cabecera {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ek-tarjeta,
    .ek-tarjeta-enlace,
    .ek-menu-item,
    .ek-grupo-cabecera,
    .ek-buscar {
        transition: none !important;
    }
}


/* =====================================================================
   Eduka · espacio del estudiante
   Refinamiento exclusivamente visual; no altera rutas ni permisos.
   ===================================================================== */
.ek-grupo-estudiante {
    margin: .65rem .55rem 1rem;
    padding: .55rem;
    border: 1px solid color-mix(in srgb, var(--ek-menu-texto-fuerte) 12%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--ek-menu-texto-fuerte) 4%, transparent);
}

.ek-grupo-estudiante > .ek-grupo-cabecera {
    min-height: 42px;
    padding: .55rem .65rem;
    margin-bottom: .35rem;
    border-radius: 10px;
    color: var(--ek-menu-texto-fuerte);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ek-grupo-estudiante > .ek-grupo-cabecera .ek-grupo-icono {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: var(--ek-c-acento);
    background: color-mix(in srgb, var(--ek-c-acento) 14%, transparent);
}

.ek-grupo-estudiante .ek-grupo-interior {
    gap: .28rem;
}

.ek-grupo-estudiante .ek-menu-item {
    position: relative;
    min-height: 44px;
    padding: .65rem .7rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .91rem;
    font-weight: 550;
}

.ek-grupo-estudiante .ek-menu-item > .ek-icono {
    width: 20px;
    height: 20px;
    opacity: .86;
}

.ek-grupo-estudiante .ek-menu-item:hover {
    background: color-mix(in srgb, var(--ek-menu-texto-fuerte) 8%, transparent);
}

.ek-grupo-estudiante .ek-menu-item.activo {
    border-color: color-mix(in srgb, var(--ek-c-acento) 28%, transparent);
    background: color-mix(in srgb, var(--ek-c-acento) 12%, transparent);
    color: var(--ek-menu-texto-fuerte);
    box-shadow: inset 3px 0 0 var(--ek-c-acento);
}

.ek-grupo-estudiante .ek-menu-item.activo > .ek-icono {
    color: var(--ek-c-acento);
    opacity: 1;
}

.ek-grupo-estudiante .ek-menu-pronto {
    opacity: .65;
    border-style: dashed;
    border-color: var(--ek-menu-borde);
}

.ek-grupo-estudiante .ek-insignia {
    margin-left: auto;
    padding: .16rem .45rem;
    border: 1px solid var(--ek-menu-borde);
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 650;
    letter-spacing: .02em;
}

@media (max-width: 759px) {
    .ek-grupo-estudiante {
        margin-inline: .4rem;
    }

    .ek-grupo-estudiante .ek-menu-item {
        min-height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ek-grupo-estudiante .ek-menu-item {
        transition: none;
    }
}

/* =====================================================================
   Editor de texto con formato (TinyMCE) y el texto que produce
   El editor trae su piel «oxide» (clara u oscura según el tema); aquí solo se acomoda al borde, al foco y a los tamaños
   táctiles de Eduka. La hoja de adentro lleva 16 px (content_style en eduka.js), que evitan el zoom del iPhone.
   ===================================================================== */
.ek-editor { min-height: 280px; }
.ek-editor .tox-tinymce { border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); transition: border-color var(--ek-transicion), box-shadow var(--ek-transicion); }
.ek-editor:focus-within .tox-tinymce:not(.tox-fullscreen) { border-color: var(--ek-primario); box-shadow: 0 0 0 4px var(--ek-primario-suave); }
.ek-editor .tox .tox-toolbar, .ek-editor .tox .tox-toolbar__overflow, .ek-editor .tox .tox-toolbar__primary { background-image: none; border-bottom: 1px solid var(--ek-borde); }
.ek-editor .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) { border-right-color: var(--ek-borde); }
.ek-editor .tox .tox-toolbar__group { padding: 0 4px; }
.ek-editor .tox .tox-tbtn { height: 40px; width: 40px; margin: 2px 1px; border-radius: 8px; }
.ek-editor .tox .tox-tbtn--select { width: auto; }
.ek-editor .tox .tox-tbtn:hover, .ek-editor .tox .tox-tbtn--enabled, .ek-editor .tox .tox-tbtn--enabled:hover { background: var(--ek-primario-suave); color: var(--ek-primario); }
.ek-editor .tox .tox-tbtn--enabled svg, .ek-editor .tox .tox-tbtn:hover svg { fill: var(--ek-primario); }
.ek-editor .tox .tox-statusbar { border-top-color: var(--ek-borde); }
.ek-editor .tox .tox-edit-area::before { border-color: transparent; }
.tox .tox-dialog { font-family: inherit; }
.tox .tox-button { font-family: inherit; }
@media (min-width: 760px) {
    .ek-editor .tox .tox-tbtn { height: 34px; width: 34px; }
    .ek-editor .tox .tox-tbtn--select { width: auto; }
}

/* El texto con formato ya guardado, donde se lee (la tarjeta de la tarea, la clase del estudiante). */
/* Una tabla más ancha que la pantalla del teléfono se desplaza dentro del texto, sin romper la página. */
.ek-texto-enriquecido { line-height: 1.55; overflow-wrap: anywhere; overflow-x: auto; }
.ek-texto-enriquecido > :first-child { margin-top: 0; }
.ek-texto-enriquecido > :last-child { margin-bottom: 0; }
.ek-texto-enriquecido p, .ek-texto-enriquecido blockquote, .ek-texto-enriquecido pre { margin: 0 0 .5rem; }
.ek-texto-enriquecido h1, .ek-texto-enriquecido h2, .ek-texto-enriquecido h3, .ek-texto-enriquecido h4 { margin: .7rem 0 .3rem; color: var(--ek-titulo); line-height: 1.25; }
.ek-texto-enriquecido h1 { font-size: 1.25rem; }
.ek-texto-enriquecido h2 { font-size: 1.1rem; }
.ek-texto-enriquecido h3 { font-size: 1rem; }
.ek-texto-enriquecido h4 { font-size: .95rem; }
.ek-texto-enriquecido ol, .ek-texto-enriquecido ul { margin: 0 0 .5rem; padding-left: 1.5rem; }
.ek-texto-enriquecido li { margin: .15rem 0; }
.ek-texto-enriquecido blockquote { border-left: 3px solid var(--ek-borde); padding-left: .8rem; color: var(--ek-texto-suave); }
.ek-texto-enriquecido pre { padding: .6rem .8rem; border-radius: 8px; background: color-mix(in srgb, var(--ek-texto) 6%, var(--ek-superficie)); overflow-x: auto; font-size: .9em; }
.ek-texto-enriquecido a { color: var(--ek-primario); text-decoration: underline; }
.ek-texto-enriquecido hr { border: 0; border-top: 1px solid var(--ek-borde); margin: .8rem 0; }
.ek-texto-enriquecido img { max-width: 100%; height: auto; border-radius: 8px; }
.ek-texto-enriquecido table { border-collapse: collapse; margin: 0 0 .6rem; font-size: .95em; }
.ek-texto-enriquecido td, .ek-texto-enriquecido th { border: 1px solid var(--ek-borde); padding: .3rem .5rem; vertical-align: top; }
.ek-texto-enriquecido th { background: color-mix(in srgb, var(--ek-texto) 5%, var(--ek-superficie)); font-weight: 600; }

/* =====================================================================
   Formulario de la evaluación: los dos tiempos, en cajas aparte
   La ventana (abre y cierra, con fecha y hora) y la duración de cada intento (minutos) se confundían en una sola línea.
   ===================================================================== */
.ek-tiempos { border: 0; padding: 0; margin: 0 0 1rem; }
.ek-tiempos > legend { font-weight: 600; color: var(--ek-titulo); margin-bottom: .5rem; }
.ek-tiempos-cajas { display: grid; gap: .8rem; }
.ek-tiempos-caja { padding: .9rem 1rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); background: color-mix(in srgb, var(--ek-texto) 2%, var(--ek-superficie)); }
.ek-tiempos-caja > h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .15rem; font-size: .95rem; color: var(--ek-titulo); }
.ek-tiempos-caja > h3 .ek-icono { color: var(--ek-primario); }
.ek-tiempos-caja > .ek-ayuda { margin: 0 0 .7rem; }
.ek-tiempos-caja .ek-formulario-linea { margin-bottom: 0; }
.ek-tiempos-duracion { display: grid; gap: .6rem; }
.ek-tiempos-duracion .ek-campo { margin: 0; max-width: 220px; }
.ek-tiempos-error { display: flex; align-items: center; gap: .35rem; margin: .5rem 0 0; color: var(--ek-error); font-size: .9rem; font-weight: 600; }
.ek-tiempos-resumen { display: flex; align-items: flex-start; gap: .45rem; margin: .7rem 0 0; padding: .6rem .8rem; border-radius: var(--ek-radio-chico); background: color-mix(in srgb, var(--ek-primario) 8%, var(--ek-superficie)); color: var(--ek-texto); font-size: .92rem; line-height: 1.45; }
.ek-tiempos-resumen .ek-icono { flex: none; margin-top: .15rem; color: var(--ek-primario); }
@media (min-width: 760px) {
    .ek-tiempos-cajas { grid-template-columns: 3fr 2fr; }
}

/* Anular un intento: el motivo en línea, y el botón en rojo para que no se confunda con «Reabrir». */
.ek-anular .ek-input { min-width: 220px; }
.ek-btn-texto-peligro { color: var(--ek-error); }
.ek-btn-texto-peligro:hover { background: color-mix(in srgb, var(--ek-error) 10%, transparent); }
.ek-anulado { color: var(--ek-error); }
.ek-aviso-alerta { background: color-mix(in srgb, var(--ek-error) 9%, var(--ek-superficie)); border-color: color-mix(in srgb, var(--ek-error) 30%, transparent); color: var(--ek-texto); }
.ek-mi-anulado { margin: 0; }

/* =====================================================================
   Asistencia: las clases del día, la lista con cuatro estados y el resumen del periodo
   En el teléfono cada estudiante es una fila con los cuatro botones (letras); en escritorio, con el nombre del estado.
   ===================================================================== */
.ek-asistencia-dia { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.ek-asistencia-dia label { font-weight: 600; color: var(--ek-titulo); }
.ek-asistencia-dia .ek-input { width: auto; }
.ek-asistencia-dia .ek-ayuda::first-letter { text-transform: uppercase; }
.ek-clases-lista { display: grid; gap: .6rem; }
.ek-clase-lista { display: flex; align-items: center; gap: .8rem; min-height: 64px; padding: .7rem .9rem; border: 1px solid var(--ek-borde); border-left: 5px solid var(--ek-clase, var(--ek-primario)); border-radius: var(--ek-radio); background: var(--ek-superficie); box-shadow: var(--ek-sombra); color: inherit; text-decoration: none; }
.ek-clase-lista:hover { border-color: var(--ek-primario); border-left-color: var(--ek-clase, var(--ek-primario)); }
.ek-clase-lista-hora { flex: none; display: grid; justify-items: center; min-width: 52px; font-weight: 700; color: var(--ek-titulo); }
.ek-clase-lista-hora small { font-weight: 500; color: var(--ek-texto-suave); font-size: .75rem; }
.ek-clase-lista-texto { flex: 1; display: grid; min-width: 0; }
.ek-clase-lista-texto strong { color: var(--ek-titulo); }
.ek-clase-lista-texto small { color: var(--ek-texto-suave); }
.ek-lista-cabecera { display: grid; gap: .6rem; margin-bottom: .8rem; }
.ek-lista-cabecera h2 { margin: .2rem 0 .1rem; }
.ek-lista-cabecera .ek-acciones { justify-content: flex-start; flex-wrap: wrap; }
.ek-lista-estudiantes { list-style: none; margin: 0; padding: 0; display: grid; }
.ek-lista-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .8rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--ek-borde); }
.ek-lista-fila:first-child { border-top: 0; }
.ek-lista-nombre { display: grid; min-width: 0; }
.ek-lista-nombre strong { color: var(--ek-titulo); }
.ek-lista-estados { overflow: visible; }
.ek-lista-estados button { min-width: 44px; min-height: 44px; justify-content: center; padding: .3rem .5rem; font-weight: 700; }
.ek-lista-estado-texto { display: none; }
.ek-lista-estados button.ek-estado-falla { background: var(--ek-error); border-color: var(--ek-error); color: #fff; }
.ek-lista-estados button.ek-estado-retardo { background: var(--ek-extra); border-color: var(--ek-extra); color: #fff; }
.ek-lista-estados button.ek-estado-excusa { background: var(--ek-info, #0e7490); border-color: var(--ek-info, #0e7490); color: #fff; }
.ek-lista-observacion { grid-column: 1 / -1; }
.ek-lista-falla .ek-lista-nombre strong { color: var(--ek-error); }
.ek-lista-acciones { margin-top: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.ek-asistencia-resumen .ek-fila-titulo { flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.ek-asistencia-resumen .ek-acciones { flex-wrap: wrap; align-items: center; }
.ek-asistencia-alerta td:first-child, .ek-asistencia-alerta strong { color: var(--ek-error); }
.ek-hoy-lista { margin-left: auto; }
.ek-mi-asistencia { display: grid; gap: .8rem; margin-top: 1rem; }
.ek-mi-asistencia h2 { margin: 0; font-size: 1.05rem; }
.ek-mi-asistencia-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; margin: 0; }
.ek-mi-asistencia-cifras div { display: grid; padding: .5rem .7rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-mi-asistencia-cifras dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ek-texto-suave); }
.ek-mi-asistencia-cifras dd { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--ek-titulo); }
.ek-mi-asistencia-cifras div.alerta dd { color: var(--ek-error); }
.ek-mi-asistencia-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ek-mi-asistencia-lista li { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; }
.ek-mi-asistencia-lista li span::first-letter { text-transform: uppercase; }
@media (min-width: 760px) {
    .ek-lista-cabecera { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .ek-lista-estado-texto { display: inline; }
    .ek-lista-estados button { min-width: 0; padding: .3rem .8rem; }
    .ek-lista-fila { grid-template-columns: minmax(0, 1fr) auto minmax(200px, 320px); }
    .ek-lista-observacion { grid-column: auto; }
    .ek-clases-lista { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
.ek-asistencia-resumen td small.ek-bloque { display: block; margin-top: .15rem; }

/* =====================================================================
   Tablero del docente: lo que le toca, al entrar
   ===================================================================== */
.ek-tablero { display: grid; gap: .9rem; }
.ek-tablero .ek-fila-titulo { margin: 0; }
.ek-tablero-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ek-tablero-cifra { display: grid; gap: .1rem; padding: .65rem .8rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); color: var(--ek-texto-suave); text-decoration: none; }
.ek-tablero-cifra strong { font-size: 1.5rem; line-height: 1.1; color: var(--ek-titulo); }
.ek-tablero-cifra span { font-size: .8rem; }
.ek-tablero-cifra.con { background: var(--ek-primario-suave); color: var(--ek-primario); }
.ek-tablero-cifra.con strong { color: var(--ek-primario); }
.ek-tablero-cifra.urgente { background: var(--ek-error-suave); color: var(--ek-error); }
.ek-tablero-cifra.urgente strong { color: var(--ek-error); }
.ek-tablero-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ek-tablero-item { display: flex; align-items: center; gap: .7rem; min-height: 56px; padding: .55rem .7rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); color: inherit; text-decoration: none; }
.ek-tablero-item:hover { border-color: var(--ek-primario); }
.ek-tablero-item.urgente { border-color: color-mix(in srgb, var(--ek-error) 40%, transparent); background: color-mix(in srgb, var(--ek-error) 5%, var(--ek-superficie)); }
.ek-tablero-icono { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ek-primario-suave); color: var(--ek-primario); }
.ek-tablero-icono.ek-tablero-listas { background: var(--ek-error-suave); color: var(--ek-error); }
.ek-tablero-icono.ek-tablero-recuperaciones { background: var(--ek-extra-suave); color: var(--ek-extra); }
.ek-tablero-icono.ek-tablero-guias, .ek-tablero-icono.ek-tablero-planillas { background: var(--ek-exito-suave); color: var(--ek-exito); }
.ek-tablero-texto { flex: 1; display: grid; min-width: 0; }
.ek-tablero-texto strong { color: var(--ek-titulo); }
.ek-tablero-texto small { color: var(--ek-texto-suave); overflow-wrap: anywhere; }
.ek-tablero-flecha { flex: none; transform: rotate(180deg); color: var(--ek-texto-suave); }
@media (min-width: 760px) {
    .ek-tablero-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =====================================================================
   Observador del estudiante y comunicados
   ===================================================================== */
.ek-observador-grupo { display: grid; gap: .4rem; margin-bottom: 1rem; }
.ek-observador-grupo label { font-weight: 600; color: var(--ek-titulo); }
.ek-observador-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ek-observador-item { display: flex; align-items: center; gap: .8rem; min-height: 60px; padding: .6rem .9rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); background: var(--ek-superficie); box-shadow: var(--ek-sombra); color: inherit; text-decoration: none; }
.ek-observador-item:hover { border-color: var(--ek-primario); }
.ek-observador-item-texto { flex: 1; display: grid; min-width: 0; }
.ek-observador-item-texto strong { color: var(--ek-titulo); }
.ek-observador-item-texto small { color: var(--ek-texto-suave); }
.ek-observador { display: grid; gap: 1rem; }
.ek-observador-cabecera { display: grid; gap: .6rem; }
.ek-observador-persona { display: flex; align-items: center; gap: .8rem; }
.ek-observador-persona h2 { margin: 0; }
.ek-observador-form { padding: 1rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); background: color-mix(in srgb, var(--ek-primario) 4%, var(--ek-superficie)); }
.ek-observador-form h3 { margin: 0 0 .6rem; }
.ek-observador-tipos { flex-wrap: wrap; overflow: visible; margin-bottom: .8rem; }
.ek-observador-linea { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ek-anotacion { --ek-anotacion: var(--ek-primario); padding: .8rem 1rem; border: 1px solid var(--ek-borde); border-left: 5px solid var(--ek-anotacion); border-radius: var(--ek-radio); background: var(--ek-superficie); }
.ek-anotacion-1 { --ek-anotacion: var(--ek-primario); }
.ek-anotacion-2 { --ek-anotacion: var(--ek-error); }
.ek-anotacion-3 { --ek-anotacion: var(--ek-exito); }
.ek-anotacion-4 { --ek-anotacion: var(--ek-extra); }
.ek-anotacion-5 { --ek-anotacion: var(--ek-texto-suave); }
.ek-anotacion-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-bottom: .4rem; }
.ek-anotacion-cabecera strong::first-letter { text-transform: uppercase; }
.ek-anotacion-tipo { background: color-mix(in srgb, var(--ek-anotacion) 14%, var(--ek-superficie)); color: var(--ek-anotacion); }
.ek-observador-tipos button.activo.ek-anotacion-2 { background: var(--ek-error); border-color: var(--ek-error); }
.ek-observador-tipos button.activo.ek-anotacion-3 { background: var(--ek-exito); border-color: var(--ek-exito); }
.ek-observador-tipos button.activo.ek-anotacion-4 { background: var(--ek-extra); border-color: var(--ek-extra); }
.ek-anotacion p { margin: 0 0 .3rem; white-space: pre-wrap; }
.ek-anotacion-compromiso { padding: .5rem .7rem; border-radius: var(--ek-radio-chico); background: var(--ek-extra-suave); }
.ek-anotacion-descargo { padding: .5rem .7rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-observador-descargo { display: grid; gap: .5rem; margin-top: .4rem; }
.ek-seccion-observador { padding-top: .4rem; }
.ek-comunicados { display: grid; gap: .8rem; }
.ek-comunicado header { display: grid; gap: .2rem; margin-bottom: .4rem; }
.ek-comunicado header strong { color: var(--ek-titulo); font-size: 1.02rem; }
.ek-comunicado-texto { margin: 0; white-space: pre-wrap; }
.ek-comunicados-recientes { display: grid; gap: .8rem; }
.ek-comunicados-recientes .ek-comunicado { padding: .7rem .9rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); }
@media (min-width: 760px) {
    .ek-observador-cabecera { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
}

/* =====================================================================
   Estadísticas de la planilla
   ===================================================================== */
.ek-estadisticas { display: grid; gap: 1rem; }
.ek-estadisticas-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ek-estadisticas-cifras > div { display: grid; gap: .1rem; padding: .65rem .8rem; border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-estadisticas-cifras strong { font-size: 1.5rem; line-height: 1.1; color: var(--ek-titulo); }
.ek-estadisticas-cifras span { font-size: .8rem; color: var(--ek-texto-suave); }
.ek-estadisticas-cifras > div.alerta strong { color: var(--ek-error); }
.ek-estadisticas-dist { display: flex; flex-wrap: wrap; gap: .3rem; align-content: start; }
.ek-estadisticas-barra { display: flex; height: 8px; width: 100%; max-width: 160px; border-radius: 99px; overflow: hidden; background: var(--ek-superficie-2); }
.ek-estadisticas-barra i { display: block; height: 100%; }
.ek-estadisticas-barra .ek-desempeno-bajo { background: var(--ek-error); }
.ek-estadisticas-barra .ek-desempeno-basico { background: var(--ek-extra); }
.ek-estadisticas-barra .ek-desempeno-alto { background: var(--ek-primario); }
.ek-estadisticas-barra .ek-desempeno-superior { background: var(--ek-exito); }
.ek-estadisticas-alerta td:first-child { color: var(--ek-error); }
@media (min-width: 760px) { .ek-estadisticas-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =====================================================================
   Tema plano: la revisión de diseño de octubre de 2026. Etiquetas sólidas (sin borde ni fondo pastel con letra lavada),
   letras oscuras, el color en los títulos de sección y en las cifras, tarjetas blancas con un solo borde gris (se quitan los
   bordes laterales de color) y pestañas activas en azul marino. Poppins pasa a los títulos y Source Sans 3 al cuerpo. El
   menú lateral queda como estaba: sus variables y su letra no cambian aquí. Esta capa va de última y refina las anteriores.
   ===================================================================== */
:root {
    --ek-fondo: #f4f6fa;
    --ek-superficie-2: #f4f6fa;
    --ek-texto: #141b2d;
    --ek-texto-suave: #5b6475;
    --ek-borde: #e3e7ee;
    --ek-borde-fuerte: #c8cdd8;
    --ek-exito: #0b7a40;
    --ek-error: #c62828;
    --ek-info: #1f5fd0;
    --ek-extra: #a35a00;
    --ek-chip-neutro: #3b4453;
    --ek-pestana-activa: var(--ek-titulo);
    --ek-sombra: 0 1px 2px rgb(16 24 40 / 5%);
    --ek-radio: 12px;
    --ek-radio-chico: 8px;
    --ek-fuente-sistema: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ek-fuente: 'Source Sans 3', var(--ek-fuente-sistema);
    --ek-fuente-titulos: 'Poppins', var(--ek-fuente-sistema);
    /* El menú conserva su borde y su letra de antes. */
    --ek-menu-borde: #e6eaf0;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --ek-borde-fuerte: #4a515c;
        --ek-exito: #3dbb77;
        --ek-error: #ef6b6b;
        --ek-info: #6ea3f2;
        --ek-chip-neutro: #5b6475;
        --ek-pestana-activa: var(--ek-primario);
    }
}

:root[data-tema="oscuro"] {
    --ek-borde-fuerte: #4a515c;
    --ek-exito: #3dbb77;
    --ek-error: #ef6b6b;
    --ek-info: #6ea3f2;
    --ek-chip-neutro: #5b6475;
    --ek-pestana-activa: var(--ek-primario);
}

/* El menú lateral y la barra del teléfono no cambian de letra. */
.ek-lateral, .ek-barra-movil { font-family: var(--ek-fuente-sistema); }

/* ----- Títulos: Poppins semibold; el de la página en marino sin barra, los de sección en el color principal ----- */
h1, h2, h3 { font-family: var(--ek-fuente-titulos); letter-spacing: 0; }
h1 { font-size: 1.6rem; font-weight: 600; }
h2 { font-weight: 600; color: var(--ek-primario); }
h3 { font-weight: 600; color: var(--ek-titulo); }
.ek-encabezado h1::after { display: none; }
.ek-encabezado p { font-size: 1rem; }
.ek-tarjeta h2 { color: var(--ek-primario); }
/* Una etiqueta pequeña en mayúsculas sobre un título: color principal, nunca gris lavado. */
.ek-sobretitulo { display: block; margin-bottom: .2rem; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ek-primario); }

/* ----- Tarjetas: blancas, un solo borde gris, sin borde lateral de color ----- */
.ek-tarjeta { border-radius: var(--ek-radio); border-color: var(--ek-borde); box-shadow: var(--ek-sombra); }
.ek-tarjeta:hover { box-shadow: var(--ek-sombra); transform: none; }
.ek-tarea-tarjeta, .ek-clase-lista, .ek-anotacion, .ek-citaciones > li, .ek-lecturas li, .ek-plan-estado, .ek-plan-estado.lista, .ek-plan-estado.completa,
.ek-equipo-aviso, .ek-mejorar-propuesta, .ek-especial-horas li, .ek-guia-observaciones, .ek-pregunta-banco.ajena, .ek-ruta-tipo, .ek-repetidas {
    border-left-width: 1px; border-left-color: var(--ek-borde); border-left-style: solid;
}
.ek-evento { border-left: 1px solid var(--ek-borde); }
.ek-equipo-aviso { border-color: var(--ek-borde); background: var(--ek-superficie); }
.ek-mejorar-propuesta { border-color: var(--ek-borde); }
.ek-plan-componente { border-top-width: 1px; border-top-color: var(--ek-borde); }
.ek-clase-tarjeta { border-top-width: 1px; border-top-color: var(--ek-borde); border-radius: var(--ek-radio); }
.ek-clase-tarjeta:hover { border-color: var(--ek-borde-fuerte); box-shadow: var(--ek-sombra); transform: none; }
/* El color que antes iba en el borde ahora va en el título. */
.ek-tarea-cuerpo h3 { color: var(--ek-comp, var(--ek-titulo)); }
.ek-plan-componente h2 { color: var(--ek-comp, var(--ek-primario)); }
.ek-clase-lista strong, .ek-clase-tarjeta-texto strong { color: var(--ek-clase, var(--ek-tono, var(--ek-titulo))); }
.ek-anotacion h3, .ek-anotacion strong:first-child { color: var(--ek-anotacion, var(--ek-titulo)); }

/* ----- Etiquetas y estados: sólidas con letra blanca; los estados junto a una cifra, en texto de color ----- */
.ek-chip-estado, .ek-etiqueta, .ek-insignia-cuenta, .ek-clase-estado, .ek-desempeno, .ek-evaluacion-estado, .ek-horario-estado, .ek-mi-evaluacion-momento,
.ek-marca-vencido, .ek-chip-ahora, .ek-chip-sugerido {
    border-radius: 6px; border: 0; font-weight: 700; letter-spacing: 0;
}
.ek-chip-estado { padding: .25rem .6rem; font-size: .76rem; }
.ek-etiqueta { padding: .1rem .5rem; font-size: .72rem; }
.ek-chip-crear, .ek-etiqueta-proyecto, .ek-etiqueta-acudiente, .ek-estado-caso-3, .ek-clase-estado, .ek-desempeno-superior { background: var(--ek-exito); color: #fff; }
.ek-chip-actualizar, .ek-estado-caso-1, .ek-tipo-1 { background: var(--ek-info); color: #fff; }
.ek-chip-error, .ek-chip-alerta, .ek-tipo-3, .ek-marca-vencido, .ek-desempeno-bajo { background: var(--ek-error); color: #fff; }
.ek-chip-tramite, .ek-chip-extra, .ek-insignia-cuenta, .ek-estado-caso-2, .ek-tipo-2, .ek-clase-estado.pendiente, .ek-desempeno-basico { background: var(--ek-extra); color: #fff; }
:root[data-tema="oscuro"] .ek-tipo-2 { color: #fff; }
.ek-etiqueta, .ek-etiqueta-fuerte, .ek-estado-caso-0, .ek-chip-comunidad, .ek-desempeno-alto { background: var(--ek-primario); color: #fff; }
.ek-chip-neutro, .ek-chip-pendiente { background: var(--ek-chip-neutro); color: #fff; }
.ek-evaluacion-estado, .ek-horario-estado { background: var(--ek-estado); color: #fff; }
.ek-evaluacion-tarjeta.borrador .ek-evaluacion-estado, .ek-evaluacion-tarjeta.cerrada .ek-evaluacion-estado,
.ek-horario-nombrado:not(.publicado):not(.con-borrador) .ek-horario-estado { background: var(--ek-chip-neutro); color: #fff; }
.ek-mi-evaluacion-abierta .ek-mi-evaluacion-momento { background: var(--ek-exito); color: #fff; }
.ek-mi-evaluacion-proxima .ek-mi-evaluacion-momento { background: var(--ek-info); color: #fff; }
/* La ficha de la fecha: sólida, con el color del componente o del estado. */
.ek-fecha-ficha { border-radius: var(--ek-radio-chico); background: var(--ek-comp, var(--ek-primario)); color: #fff; }
.ek-fecha-ficha strong { font-family: var(--ek-fuente-titulos); font-weight: 700; letter-spacing: 0; }
.ek-fecha-ficha.vencida { background: var(--ek-error); color: #fff; }
.ek-evaluacion-tarjeta .ek-fecha-ficha { background: var(--ek-estado); color: #fff; }
.ek-evaluacion-tarjeta.borrador .ek-fecha-ficha, .ek-evaluacion-tarjeta.cerrada .ek-fecha-ficha { background: var(--ek-chip-neutro); color: #fff; }
/* Los íconos en círculo de color: sólidos, con el trazo blanco. */
.ek-plan-estado-icono, .ek-plan-estado.lista .ek-plan-estado-icono, .ek-plan-estado.completa .ek-plan-estado-icono,
.ek-estado-asistente-icono, .ek-entregas-planilla-icono, .ek-horarios-proponer-icono, .ek-evaluacion-icono,
.ek-evaluacion-tarjeta.borrador .ek-evaluacion-icono, .ek-evaluacion-tarjeta.cerrada .ek-evaluacion-icono, .ek-rubrica-numero, .ek-paso-listo .ek-paso-numero, .ek-paso-enprogreso .ek-paso-numero { color: #fff; }
.ek-plan-estado-icono { background: var(--ek-extra); }
.ek-plan-estado.lista .ek-plan-estado-icono { background: var(--ek-primario); }
.ek-plan-estado.completa .ek-plan-estado-icono, .ek-estado-asistente-icono, .ek-entregas-planilla-icono, .ek-paso-listo .ek-paso-numero { background: var(--ek-exito); }
.ek-estado-asistente-icono.apagado { background: var(--ek-chip-neutro); }
.ek-horarios-proponer-icono, .ek-rubrica-numero, .ek-evaluacion-tarjeta.borrador .ek-evaluacion-icono, .ek-evaluacion-tarjeta.cerrada .ek-evaluacion-icono { background: var(--ek-primario); }
.ek-evaluacion-icono { background: var(--ek-estado); }
.ek-paso-enprogreso .ek-paso-numero { background: var(--ek-extra); }
/* Las cifras del tablero: fondo gris claro, la cifra en color y la leyenda oscura. */
.ek-tablero-cifra, .ek-tablero-cifra.con, .ek-tablero-cifra.urgente { background: var(--ek-superficie-2); color: var(--ek-texto-suave); }
.ek-tablero-cifra strong { font-family: var(--ek-fuente-titulos); font-weight: 700; }
.ek-tablero-cifra.con strong { color: var(--ek-primario); }
.ek-tablero-cifra.urgente strong { color: var(--ek-error); }
/* Avisos: fondo suave con letra oscura; el color lo da el borde y el ícono. */
.ek-aviso-error, .ek-aviso-exito, .ek-aviso-info { color: var(--ek-texto); }
.ek-aviso-error .ek-icono { color: var(--ek-error); }
.ek-aviso-exito .ek-icono { color: var(--ek-exito); }
.ek-aviso-info .ek-icono { color: var(--ek-info); }
.ek-aviso-error strong { color: var(--ek-error); }
.ek-aviso-exito strong { color: var(--ek-exito); }
/* Las cabeceras de la planilla: gris claro con el texto en color. */
.ek-notas-tabla thead tr:first-child th.ek-notas-componente { background: var(--ek-superficie-2); color: var(--ek-primario); }
.ek-notas-tabla th { font-family: var(--ek-fuente); }
.ek-nota-baja, .ek-nota-baja-texto { font-weight: 700; }

/* ----- Pestañas: píldoras rectas, la activa en azul marino con letra blanca ----- */
.ek-segmentos button, .ek-segmentos a, .ek-clase-pestanas button, .ek-saltos a {
    border-radius: var(--ek-radio-chico); border: 1px solid transparent; background: transparent; color: var(--ek-texto); font-weight: 600; box-shadow: none;
}
.ek-segmentos button:hover, .ek-segmentos a:hover, .ek-clase-pestanas button:hover, .ek-saltos a:hover { background: var(--ek-superficie-2); color: var(--ek-texto); border-color: transparent; }
.ek-segmentos button.activo, .ek-segmentos a.activo, .ek-clase-pestanas button.activo, .ek-saltos a.activo,
.ek-segmentos button.activo:hover, .ek-segmentos a.activo:hover, .ek-clase-pestanas button.activo:hover, .ek-saltos a.activo:hover {
    background: var(--ek-pestana-activa); border-color: var(--ek-pestana-activa); color: #fff; box-shadow: none;
}
.ek-segmentos button.ek-alerta { color: var(--ek-error); }
.ek-segmentos button span { background: var(--ek-superficie-2); color: var(--ek-texto); }
.ek-segmentos button.activo span { background: rgb(255 255 255 / 22%); color: #fff; }
.ek-clase-pestanas { border-radius: var(--ek-radio); }
.ek-saltos a { border-color: var(--ek-borde); background: var(--ek-superficie); color: var(--ek-texto); }

/* ----- Botones: primario sólido sin sombra, secundario blanco con letra oscura, de texto solo color ----- */
.ek-btn { border-radius: var(--ek-radio-chico); font-weight: 700; }
.ek-btn-primario { box-shadow: none; }
.ek-btn-secundario { border-color: var(--ek-borde-fuerte); box-shadow: none; color: var(--ek-texto); }
.ek-btn-secundario:hover { background: var(--ek-superficie-2); border-color: var(--ek-texto-suave); }
.ek-btn-texto:hover { background: var(--ek-superficie-2); }
.ek-input { border-radius: var(--ek-radio-chico); color: var(--ek-texto); }

/* ----- Módulo del estudiante: la cabecera de la clase en blanco; el color de la asignatura va en la etiqueta y las cifras ----- */
.ek-clase-hero { padding: 1.1rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); background: var(--ek-superficie); color: var(--ek-texto); box-shadow: var(--ek-sombra); }
.ek-clase-hero h1 { color: var(--ek-titulo); }
.ek-clase-hero p { color: var(--ek-texto-suave); }
.ek-clase-hero-sep { opacity: 1; }
.ek-clase-volver { background: var(--ek-superficie-2); color: var(--ek-tono, var(--ek-primario)); }
.ek-clase-volver:hover { background: var(--ek-borde); }
.ek-clase-cifra { border-radius: var(--ek-radio-chico); background: var(--ek-superficie-2); }
.ek-clase-cifra dt { color: var(--ek-texto-suave); }
.ek-clase-cifra dd { font-family: var(--ek-fuente-titulos); font-weight: 700; letter-spacing: 0; color: var(--ek-tono, var(--ek-primario)); }
.ek-clase-cifra small { color: var(--ek-texto-suave); }
.ek-clase-cifra .ek-desempeno { background: var(--ek-tono, var(--ek-primario)); color: #fff; }
.ek-clase-inicial { border-radius: var(--ek-radio-chico); font-family: var(--ek-fuente-titulos); font-weight: 700; letter-spacing: 0; }
.ek-clase-ir { color: var(--ek-tono, var(--ek-primario)); }

/* ----- Cifras grandes en Poppins, sin estrechar las letras ----- */
.ek-estadisticas-cifras strong, .ek-tarea-cifras strong, .ek-inclusion-cifra strong, .ek-comunidad-fecha strong { font-family: var(--ek-fuente-titulos); font-weight: 700; letter-spacing: 0; }

/* ----- Tema plano: lo que quedó pastel tras la primera pasada ----- */
.ek-plan-peso { border-radius: 6px; background: var(--ek-comp, var(--ek-primario)); color: #fff; font-weight: 700; }
.ek-plan-cuenta, .ek-plan-cuenta.cumple { padding: 0; background: transparent; color: var(--ek-error); font-weight: 700; }
.ek-plan-cuenta.cumple { color: var(--ek-exito); }
.ek-plan-etiqueta { border-radius: 6px; background: var(--ek-superficie-2); color: var(--ek-texto); }
.ek-plan-tarea-nueva, button.ek-plan-tarea-nueva { background: transparent; color: var(--ek-primario); font-weight: 700; }
.ek-plan-tarea-nueva:hover, button.ek-plan-tarea-nueva:hover { background: var(--ek-superficie-2); color: var(--ek-primario); }
.ek-bienvenida { border-left: 1px solid var(--ek-c-menu); border-radius: var(--ek-radio); }
.ek-tablero-item.urgente { border-color: var(--ek-borde); background: var(--ek-superficie); }
.ek-tablero-item.urgente .ek-tablero-texto strong { color: var(--ek-error); }
.ek-tablero-icono { background: var(--ek-primario); color: #fff; }
.ek-tablero-icono.ek-tablero-listas { background: var(--ek-error); color: #fff; }
.ek-tablero-icono.ek-tablero-recuperaciones { background: var(--ek-extra); color: #fff; }
.ek-tablero-icono.ek-tablero-guias, .ek-tablero-icono.ek-tablero-planillas { background: var(--ek-exito); color: #fff; }
.ek-entregas-planilla-icono.pendiente { background: var(--ek-extra); color: #fff; }
.ek-mi-tarea { border-top-width: 1px; border-top-color: var(--ek-borde); }
.ek-mi-tarea h2 { color: var(--ek-comp, var(--ek-primario)); }
.ek-retro-observaciones li::before { background: var(--ek-error); color: #fff; }
.ek-retro-mejorar { background: var(--ek-superficie-2); }
.ek-estadisticas-dist .ek-desempeno { color: #fff; }
/* La recuperación de una actividad a mano, en la ficha del estudiante de la planilla. */
.ek-ficha-recuperacion { flex-wrap: wrap; align-items: flex-start; }
.ek-ficha-recuperacion > span { display: grid; gap: .1rem; min-width: 0; }
.ek-ficha-recuperacion-estado { display: block; }
.ek-ficha-recuperar { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.ek-ficha-recuperar .ek-nota { width: 5rem; }
.ek-notas-ficha-notas small.ek-desempeno { color: #fff; }
/* La tarjeta del examen: la columna de la ficha de fecha toma el ancho de la ficha (antes medía 44 px, de cuando era un ícono, y la ficha se montaba sobre el título). */
.ek-evaluacion-tarjeta { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
/* Lo que se abre desde un aviso o el calendario se resalta un momento para encontrarlo en la lista. */
@keyframes ek-destacar { from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ek-primario) 55%, transparent); } to { box-shadow: 0 0 0 4px transparent; } }
.ek-destacado { animation: ek-destacar 2.5s ease-out; scroll-margin-top: 5rem; }
/* La autoevaluación del Ser: cada criterio con su casilla; en la ficha de la planilla, solo lectura. */
.ek-autoevaluacion-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; margin-bottom: .75rem; }
.ek-autoevaluacion-cabecera h2 { margin: 0 0 .25rem; }
.ek-autoevaluacion-cabecera p { margin: 0; }
.ek-autoevaluacion-criterios { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ek-autoevaluacion-criterios li { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; align-items: center; gap: .6rem; padding: .6rem .75rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); }
.ek-autoevaluacion-criterios label { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--ek-texto); cursor: pointer; }
.ek-autoevaluacion-numero { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ek-extra); color: #fff; font-size: .78rem; font-weight: 700; }
.ek-autoevaluacion-criterios .ek-nota { width: 100%; text-align: center; font-weight: 700; }
.ek-autoevaluacion-lectura li { grid-template-columns: minmax(0, 1fr) auto; padding: .45rem .6rem; font-size: .9rem; }
.ek-autoevaluacion-lectura strong { font-family: var(--ek-fuente-titulos); }
.ek-autoevaluacion-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin-top: .85rem; }
.ek-autoevaluacion-promedio { font-size: 1rem; }
.ek-autoevaluacion-promedio strong { font-family: var(--ek-fuente-titulos); font-size: 1.35rem; color: var(--ek-primario); margin-left: .25rem; }
.ek-autoevaluacion-promedio small { color: var(--ek-texto-suave); }
.ek-autoevaluacion-exito { color: var(--ek-exito); font-weight: 600; }
.ek-criterios-texto { font-size: .95rem; line-height: 1.45; }
/* La cabecera de la clase: la próxima clase y las fallas junto a la nota, lo por entregar y lo abierto. */
.ek-clase-hero-proxima { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .35rem 0 0; font-size: .92rem; color: var(--ek-texto); }
.ek-clase-hero-proxima strong { color: var(--ek-tono, var(--ek-primario)); }
.ek-clase-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ek-clase-cifra-alerta dd { color: var(--ek-error); }
@media (min-width: 720px) { .ek-clase-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Consolidado anual: una tabla ancha que se desplaza a lo ancho en el teléfono, con el nombre fijo a la izquierda. */
.ek-consolidado-grupo { display: grid; gap: .4rem; margin-bottom: 1rem; }
.ek-consolidado-grupo label { font-weight: 600; color: var(--ek-titulo); }
.ek-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio); background: var(--ek-superficie); }
.ek-consolidado { min-width: 100%; border-collapse: collapse; }
.ek-consolidado th, .ek-consolidado td { white-space: nowrap; text-align: center; padding: .5rem .6rem; }
.ek-consolidado .ek-consolidado-nombre { text-align: left; position: sticky; left: 0; background: var(--ek-superficie); z-index: 1; min-width: 11rem; max-width: 14rem; white-space: normal; }
.ek-consolidado thead th { position: sticky; top: 0; background: var(--ek-superficie); z-index: 2; }
.ek-consolidado thead th.ek-consolidado-nombre { z-index: 3; }
.ek-consolidado-asig span { display: inline-block; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.ek-consolidado-celda strong { font-family: var(--ek-fuente-titulos, inherit); }
.ek-consolidado-alerta .ek-consolidado-nombre { color: var(--ek-error); font-weight: 600; }

/* Planes de mejoramiento: la lista de quienes perdieron y el detalle del plan. */
.ek-planes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ek-plan-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.ek-plan-item-texto { display: grid; gap: .15rem; min-width: 0; }
.ek-plan-item-texto strong { color: var(--ek-titulo); }
.ek-plan-asignatura { padding: .8rem 0; border-top: 1px solid var(--ek-borde); }
.ek-plan-asignatura header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.ek-plan-asignatura h3 { margin: 0; font-size: 1.05rem; color: var(--ek-titulo); }
.ek-plan-perdidas { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .3rem; }
.ek-plan-perdidas li { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem .6rem; background: var(--ek-fondo); border-radius: 8px; }
.ek-plan-recuperacion { margin: .4rem 0 0; font-size: .95rem; }
.ek-plan-texto { white-space: pre-line; margin: 0 0 .8rem; }
.ek-mi-plan { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ek-mi-plan h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: .4rem; }

/* Plan de estudios: las asignaturas en lista, con el color como un punto y no como un cuadro grande */
.ek-asignaturas-lista td strong { font-weight: 600; }
.ek-asignatura-nombre { display: inline-flex; align-items: center; gap: .5rem; }
.ek-asignatura-punto { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--ek-clase); flex: none; }

/* Carga académica: lo que no cabe en la fila (bloques, salón, extras) en una línea pequeña bajo el nombre; se edita en la ventana. */
.ek-carga-resumen { display: block; font-size: .78rem; font-weight: 400; color: var(--ek-texto-suave); margin-top: .1rem; }
.ek-vacio-compacto { padding: 1.5rem 1rem; }
.ek-editor-asignacion .ek-cajon-nombre { display: inline-flex; align-items: center; gap: .5rem; }
.ek-distribucion { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ek-distribucion legend { font-weight: 600; font-size: .85rem; padding: 0; margin-bottom: .2rem; }
.ek-distribucion .ek-ayuda { margin: 0; }
.ek-distribucion-opciones { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.ek-distribucion-opcion {
    display: flex; flex-direction: column; gap: .1rem; min-height: 44px; padding: .55rem .7rem;
    border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); background: var(--ek-superficie); cursor: pointer;
}
.ek-distribucion-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.ek-distribucion-opcion strong { font-size: 1rem; }
.ek-distribucion-opcion small { font-size: .78rem; color: var(--ek-texto-suave); line-height: 1.3; }
.ek-distribucion-opcion.activa { border-color: var(--ek-primario); box-shadow: inset 0 0 0 1px var(--ek-primario); }
.ek-distribucion-opcion.activa strong { color: var(--ek-primario); }
.ek-distribucion-opcion:focus-within { outline: 2px solid var(--ek-acento-marca); outline-offset: 2px; }
.ek-editor-quitar { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--ek-borde); }
.ek-editor-quitar p { margin: 0 0 .5rem; font-size: .9rem; }

/* Plan de estudios: horas, bloques y peso. En el teléfono el nombre va arriba y debajo los tres datos. */
.ek-plan-fila { grid-template-columns: 72px minmax(0, 1fr) 96px; }
.ek-plan-fila .ek-carga-nombre { grid-column: 1 / -1; }
.ek-plan-bloques { min-width: 0; }
.ek-plan-grados-archivo { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ek-plan-grados-archivo li { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .75rem; border: 1px solid var(--ek-borde); border-radius: var(--ek-radio-chico); background: var(--ek-superficie); }
.ek-plan-grados-archivo span { font-size: .85rem; color: var(--ek-texto-suave); }
.ek-importacion-subtitulo { margin: 1rem 0 .5rem; font-size: 1rem; }
@media (min-width: 760px) {
    .ek-plan-titulos, .ek-plan-fila { grid-template-columns: minmax(0, 1fr) 80px 150px 110px; }
    .ek-plan-fila .ek-carga-nombre { grid-column: auto; }
}

/* Calendario: copiar periodos de otro calendario o de otro año. */
.ek-copiar-calendario { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin-top: .75rem; }
.ek-copiar-calendario .ek-campo { flex: 1 1 220px; margin: 0; }
/* La columna de peso del plan de estudios comparte nombre con la etiqueta de peso de Planeación: aquí es texto, no etiqueta. */
.ek-plan-fila .ek-plan-peso { padding: 0; border-radius: 0; background: none; color: var(--ek-texto-suave); font-weight: 400; }

/* Auditoría: módulo y búsqueda lado a lado en pantallas anchas. */
.ek-auditoria-filtros { display: grid; gap: .75rem; }
@media (min-width: 760px) { .ek-auditoria-filtros { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }