/* =====================================================================
   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); }

/* =====================================================================
   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%; }
.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-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; }
.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; }

@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); }
.ek-marca-inclusion.con-texto { width: auto; height: auto; padding: .3rem .7rem .3rem .45rem; font-size: .82rem; font-weight: 600; }
.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; }
}

/* =====================================================================
   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; }

.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-fila { grid-template-columns: minmax(0, 1fr) 72px 96px; }
.ek-plan-fila .ek-carga-nombre { grid-column: auto; }
.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-plan-titulos, .ek-plan-fila { grid-template-columns: minmax(0, 1fr) 80px 110px; }
    .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-campo:nth-child(2), .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-campo:nth-child(2) { 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-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); }

/* Mis clases (estudiante). */
.ek-clases { display: grid; gap: .6rem; }
.ek-mi-clase { display: flex; align-items: center; gap: .8rem; min-height: 64px; padding: .7rem 1rem; 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-mi-clase:hover { border-color: var(--ek-primario); }
.ek-mi-clase-inicial { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ek-primario-suave); color: var(--ek-primario); font-weight: 800; font-size: 1.1rem; }
.ek-mi-clase-texto { flex: 1; display: grid; min-width: 0; }
.ek-mi-clase-texto strong { color: var(--ek-titulo); }
.ek-mi-clase-texto small { color: var(--ek-texto-suave); }
.ek-mi-clase-barra { display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: space-between; margin-bottom: 1rem; }
.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; white-space: pre-wrap; }
.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; }
.ek-tarea-componente { margin-top: .5rem; }