/* =============================================================================
   ESCUELA DE TENIS — Hoja de estilos del submodulo
   -----------------------------------------------------------------------------
   Los tokens de esta hoja NO son inventados: estan tomados de la interfaz real
   de MISQUAD (tenis.misquad.es, css/styles.css) para que el modulo sea
   indistinguible del resto de la plataforma.

     Tipografia .......... "Open Sans", 13px base
     Fondo aplicacion .... #EDEFF0        Texto ............... #454545
     Sidebar ............. #2D3349        Sidebar hover ....... #272C40
     Acento navegacion ... #0F9DEA        Titulo de seccion ... #1A2B3C (28px/700/uppercase)
     Cabecera tabla ...... #2C3348 (11px/700/uppercase, texto blanco)
     Verde accion ........ #76AB3C / borde #6EA038   (.btn-success)
     Azul informativo .... #4FB5DD                    (.label-info)
     Ambar aviso ......... #F69F00 / borde #E79500    (.btn-warning)
     Amarillo de alerta .. #FCFC03  (CMYK 0/0/99/1, solo .esc-ambar)
     Navy etiqueta ....... #292F43                    (.label-primary)
     Borde de control .... #DBE0E4        Radio ............... 3px controles / 4px etiquetas

   Esta hoja se carga DESPUES de css/styles.css (via incluircss) y solo anade.
   NO define menu lateral ni cabecera: los pone iSQUAD (includes/menu.php desde
   las tablas misquad_menu_*, e includes/cabecera_dinamica.php segun el rol).
   Tampoco reescribe clases de Bootstrap/plataforma, para no afectar al resto
   de pantallas.
============================================================================= */

:root {
    --esc-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --esc-fs: 13px;

    --esc-bg: #EDEFF0;
    --esc-surface: #FFFFFF;
    --esc-text: #454545;
    --esc-text-soft: #7A8290;

    --esc-navy: #2D3349;
    --esc-navy-dark: #272C40;
    --esc-navy-darker: #252A3C;
    --esc-navy-head: #2C3348;
    --esc-navy-label: #292F43;

    --esc-title: #1A2B3C;
    --esc-accent: #0F9DEA;

    --esc-green: #76AB3C;
    --esc-green-border: #6EA038;
    --esc-info: #4FB5DD;
    --esc-warning: #F69F00;
    --esc-warning-border: #E79500;

    /* Amarillo de ALERTA: CMYK 0/0/99/1. Amarillo puro, deliberadamente
       distinto del ambar de arriba, que es el de .btn-warning de la
       plataforma y se lee como naranja. Solo lo usa .esc-ambar, es decir,
       solo las alertas: bordes, arrastres y avisos siguen en ambar. */
    --esc-alerta: #FCFC03;
    --esc-danger: #D9534F;

    --esc-border: #DBE0E4;
    --esc-border-soft: #EBEEF1;

    --esc-radius: 3px;
    --esc-radius-label: 4px;
    /* El mismo token que el KIT (--mq-radio-modal): las emergentes no llevan
       el radio de 3 de los controles. La escuela no carga el kit —se sirve
       sola desde index_escuela.php— asi que el valor se repite aqui. */
    --esc-radius-modal: 14px;
    --esc-sidebar-w: 300px;          /* ancho real de .app-sidebar en MISQUAD */

    --esc-shadow: 0 1px 2px rgba(45, 51, 73, .08);
    --esc-shadow-lift: 0 6px 18px rgba(45, 51, 73, .18);
}

/* Cualquier `display` declarado por clase en esta hoja gana al [hidden] del
   user-agent, que solo aporta `display:none` de agente. Se le devuelve la
   prioridad una vez para todo el modulo, en lugar de ir parcheando selector a
   selector cada vez que se oculta algo desde JavaScript. */

[class^="esc-"][hidden],
[class*=" esc-"][hidden] {
    display: none !important;
}

/* =============================================================================
   1. LOGIN
============================================================================= */

/* La imagen de fondo no va en el contenedor: va en una capa FIJA que cubre
   siempre el viewport entero. Asi en el navegador del telefono se ve igual
   que en la app instalada: el contenedor de la plataforma mide el 100% de la
   pantalla y, cuando la tarjeta es mas alta, lo que sobresale quedaba sobre
   el blanco del body; y en iOS `background-attachment: fixed` no existe. La
   imagen llega por la variable --esc-login-imagen (estilo en linea). */
.esc-login-fondo {
    position: relative;
    z-index: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--esc-navy);
}

.esc-login-fondo::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--esc-login-imagen);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.esc-login-box .app-login-box-title .title {
    color: var(--esc-title);
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.esc-login-box .app-login-box-title .subtitle {
    color: var(--esc-text-soft);
}

/* Avisos ---------------------------------------------------------------- */

.esc-alerta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 15px;
    padding: 10px 12px;
    border-radius: var(--esc-radius);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

.esc-alerta--error {
    background: #FDEDEC;
    border: 1px solid #F2C4C1;
    color: #A33B37;
}

.esc-alerta--info {
    background: #EAF6FC;
    border: 1px solid #C4E4F3;
    color: #1F6F94;
}

/* Campo de contrasena con boton de ver/ocultar --------------------------- */

.esc-campo-password {
    position: relative;
}

.esc-campo-password .form-control {
    padding-right: 38px;
}

.esc-ver-password {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 30px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--esc-text-soft);
    cursor: pointer;
}

.esc-ver-password:hover {
    color: var(--esc-accent);
}

/* Boton entrar con estado de carga --------------------------------------- */

.esc-btn-entrar {
    position: relative;
}

.esc-btn-entrar .esc-spinner {
    display: none;
}

.esc-btn-entrar.is-cargando .esc-btn-texto {
    visibility: hidden;
}

.esc-btn-entrar.is-cargando .esc-spinner {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #FFF;
    border-radius: 50%;
    animation: esc-girar .6s linear infinite;
}

@keyframes esc-girar {
    to { transform: rotate(360deg); }
}

.esc-login-nota {
    margin: 14px 0 0;
    color: var(--esc-text-soft);
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
}

/* Dos notas seguidas (la del WFS y la marca): mas juntas entre si. */
.esc-login-nota + .esc-login-nota {
    margin-top: 6px;
}

/* La marca, comun a todos los accesos: centrada, enlaces del mismo tono. */
.esc-login-nota--marca {
    text-align: center;
}
.esc-login-nota--marca a {
    color: var(--esc-text-soft);
    font-weight: 600;
}
.esc-login-nota--marca a:hover {
    color: var(--esc-accent);
}

/* =============================================================================
   2. INTEGRACION CON EL LAYOUT DE iSQUAD
   -----------------------------------------------------------------------------
   El menu lateral (.app-sidebar + includes/menu.php, alimentado por las tablas
   misquad_menu_* de iSQUAD) y la cabecera (includes/cabecera_dinamica.php) los
   pone la plataforma: aqui NO se redefinen. Esta hoja solo estiliza el
   contenido que el modulo mete dentro de .app-content > .container.
============================================================================= */

/* La cabecera de entrenadores trae un selector de equipo y categoria que no
   pinta nada en la escuela: aqui no se trabaja por equipos, y ocupaba una
   banda entera diciendo "Nada Seleccionado".

   Se ocultan SOLO sus dos bloques de contenido, no el contenedor
   #subcabecera: dentro vive tambien .modal_streaming, y un modal dentro de un
   display:none no se puede abrir. El contenedor se queda, sin alto ni borde.

   No se toca includes/cabecera_entrenadores.php, que lo usan las demas
   pantallas de entrenador; esta hoja solo se carga en las del modulo, asi que
   el cambio no sale de aqui. */

#subcabecera > .pull-left,
#subcabecera > .pull-right {
    display: none;
}

#subcabecera {
    min-height: 0;
    padding: 0;
    border: 0;
}

/* Titulo de seccion: mismo tratamiento que .titulo_crud de la plataforma. */

.container .titulo_crud {
    color: var(--esc-title);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1;
    text-transform: uppercase;
}

.esc-titulo {
    /* Equivalente a .titulo_crud, que en la plataforma esta definido por
       pagina; aqui se declara una vez para todas las vistas del modulo.
       float:none + width:100% son obligatorios: css/styles.css hace flotar
       los h1 dentro de .container, y un titulo flotado empuja la barra de
       controles fuera del contenedor (queda con width 0 a la derecha). */
    float: none;
    clear: both;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--esc-title);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1;
    text-transform: uppercase;
}

.esc-titulo .fa,
.esc-titulo .fas {
    color: var(--esc-accent);
    font-size: 22px;
}

.esc-panel {
    margin-bottom: 20px;
    padding: 18px;
    background: var(--esc-surface);
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    box-shadow: var(--esc-shadow);
}

.esc-panel__cabecera {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: -18px -18px 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--esc-border-soft);
}

.esc-panel__titulo {
    margin: 0;
    color: var(--esc-title);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* Controles: se usan .btn / .form-control / .label de la plataforma. Aqui solo
   el foco de los controles dentro del modulo, para marcar el acento azul. */

.container .form-control:focus {
    border-color: var(--esc-accent);
    box-shadow: 0 0 0 2px rgba(15, 157, 234, .15);
}

/* =============================================================================
   3. MATRIZ SEMANAL (rejilla dia x franja x pista)
============================================================================= */

.esc-matriz-barra {
    clear: both;
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.esc-matriz-barra__campo {
    display: flex;
    flex-direction: column;
}

/* Toggle de fin de semana ------------------------------------------------ */

.esc-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.esc-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;          /* accesible: sigue siendo enfocable y anunciable */
}

.esc-switch__pista {
    position: relative;
    flex: none;
    width: 34px;
    height: 18px;
    border-radius: 9px;
    background: #C3CBD3;
    transition: background .15s ease;
}

.esc-switch__pista::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}

.esc-switch input:checked + .esc-switch__pista {
    background: var(--esc-green);
}

.esc-switch input:checked + .esc-switch__pista::after {
    transform: translateX(16px);
}

.esc-switch input:focus-visible + .esc-switch__pista {
    box-shadow: 0 0 0 2px rgba(15, 157, 234, .35);
}

.esc-switch__texto {
    color: var(--esc-text);
    font-size: 12px;
    white-space: nowrap;
}

/* Aviso de sesiones de fin de semana ocultas ----------------------------- */

.esc-aviso-finde {
    align-items: center;
}

.esc-aviso-finde__accion {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #1F6F94;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

/* La leyenda baja a su propia linea y se queda pegada a la IZQUIERDA. El
   ::before con flex-basis:100% es lo que fuerza el salto sin meter un div
   vacio en el HTML. Lo que se anada despues con un order mayor cae a su
   derecha, en esa misma linea, que es el sitio reservado para los proximos
   interruptores. */

.esc-matriz-barra::before {
    content: "";
    flex-basis: 100%;
    order: 98;
}

/* Los interruptores de la barra caen a la derecha de la leyenda, en su misma
   linea: es el hueco que queda libre bajo los controles. */

.esc-matriz-barra__interruptor {
    order: 100;
    display: flex;
    align-items: center;
}

.esc-matriz-barra__interruptor .esc-switch__texto {
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-matriz-leyenda {
    order: 99;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-right: auto;
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-matriz-leyenda i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 2px;
    vertical-align: -1px;
}

.esc-matriz-envoltorio {
    overflow-x: auto;
    background: var(--esc-surface);
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    box-shadow: var(--esc-shadow);
}

.esc-matriz {
    display: grid;
    /* 1 columna de horas + 7 dias; se fija por JS segun los dias visibles */
    grid-template-columns: 90px repeat(7, minmax(190px, 1fr));
    min-width: 1180px;
}

/* Cabeceras -------------------------------------------------------------- */

.esc-matriz__cab {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 10px 18px;
    background: var(--esc-navy-head);
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-matriz__cab--finde {
    background: #3A4257;   /* mismo tono que la cabecera, un punto mas claro */
}

.esc-matriz__cab--hora {
    left: 0;
    z-index: 4;
    text-align: center;
}

.esc-matriz__hora {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    background: #F4F6F7;
    border-right: 1px solid var(--esc-border);
    border-bottom: 1px solid var(--esc-border-soft);
    color: var(--esc-title);
    font-size: 11px;
    font-weight: 700;
}

/* Contenedor de la celda dia x franja: apila una subcelda por pista ------ */

.esc-matriz__dia {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--esc-border-soft);
    border-bottom: 1px solid var(--esc-border-soft);
}

.esc-matriz__dia > .esc-celda {
    flex: 1;
    border-right: 0;
}

.esc-matriz__dia > .esc-celda + .esc-celda {
    border-top: 1px dashed var(--esc-border);
}

.esc-matriz__dia > .esc-celda:last-child {
    border-bottom: 0;
}

/* CADA FRANJA, DISTINTA DE LA DE AL LADO
   -------------------------------------------------------------------------
   Con siete dias en pantalla y la hora solo en la columna de la izquierda,
   seguir una fila con la vista hasta el domingo es justo donde se cuelan los
   errores: se lee el hueco de las 18:00 y se esta mirando el de las 19:00.
   Todas las franjas se separaban con la misma raya clarita que separa las
   pistas dentro de una franja, asi que no habia nada que dijera donde acaba
   una hora y empieza la siguiente.

   Tres cosas, de menos a mas:

   1. La raya de abajo de la franja deja de ser la clarita y pasa a ser la
      normal. Sigue siendo 1px —no parte la rejilla en trozos— pero ya no se
      confunde con la de dentro.

   2. Una franja de cada dos, con la hora en gris mas oscuro. Es la escalera
      por la que se baja contando, y contar de dos en dos es mas facil.

   3. La que tiene el raton encima, encendida entera. Eso esta mas abajo.
   ------------------------------------------------------------------------- */

.esc-matriz__hora,
.esc-matriz__dia {
    border-bottom: 1px solid var(--esc-border);
}

.esc-matriz__hora.es-franja-alterna {
    background: #E9EDEF;
}

/* LA FRANJA QUE TIENE EL RATON ENCIMA

   UN VELO POR ENCIMA, NO UN FONDO NI UN RECUADRO
   ----------------------------------------------
   Cambiar el fondo no vale: el de cada celda ya esta diciendo si quedan
   plazas, si esta completa o si hay torneo, y ademas las celdas vacias lo
   llevan en un rayado diagonal que ningun color de fondo tapa.

   Recuadrar la fila tampoco: dos lineas finas arriba y abajo se leian como
   una caja seleccionada —algo que se va a editar— y no como "estas aqui".

   Asi que va una lamina translucida por ENCIMA de toda la fila. El azul del
   modulo al 8% no esconde nada de lo que hay debajo, se ve igual sobre
   blanco que sobre el morado de una competicion, y no compite con ningun
   otro color de la pantalla porque no reemplaza ninguno.

   pointer-events:none es imprescindible: sin eso la lamina se queda entre el
   raton y las tarjetas, y dejarian de poder arrastrarse.

   LA HORA, EN AZUL CLARO CON SU BARRA
   -----------------------------------
   No en azul macizo: es una celda pequeña y en solido gritaba mas que la
   fila entera, que es lo que se quiere mirar. Con la barra de 3px a la
   izquierda basta para anclar la fila, y como la columna de horas es sticky
   se queda a la vista aunque la rejilla este desplazada a la derecha. */

.esc-matriz__hora.es-fila-activa {
    background: #E6F4FC;
    box-shadow: inset 3px 0 0 var(--esc-accent);
    color: var(--esc-accent);
}

.esc-matriz__dia.es-fila-activa,
.esc-celda.es-fila-activa {
    position: relative;
}

.esc-matriz__dia.es-fila-activa::after,
.esc-celda.es-fila-activa::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Por debajo de las tarjetas de clase, que se suben a 1. La lamina se
       queda para el hueco vacio de la celda —que es donde hace falta saber
       en que franja se esta— y las tarjetas se leen con sus colores
       limpios, sin un azul encima que les cambia el tono: ahi el color no
       es decoracion, dice si quedan plazas o si esta completa. */
    z-index: 0;
    pointer-events: none;
    background: rgba(15, 157, 234, .08);
}

/* Las tarjetas, por encima de la lamina de la franja. Ya estaban en
   position:relative por la chapa del nivel; solo les faltaba decir a que
   altura. */
.esc-grupo {
    z-index: 1;
}

/* Celda ------------------------------------------------------------------ */

/* La celda aprieta contra la tarjeta a proposito.

   Con 7px por arriba y 8px por los lados, una clase sola dejaba un marco de
   hueco alrededor mas grande que el propio aire de la tarjeta: parecia que
   sobraba sitio justo donde no sobra: una matriz de siete dias por doce horas
   se mide en cuantas filas caben de una vez sin hacer scroll. El hueco que
   queda es el justo para que dos clases en la misma celda no se toquen. */
.esc-celda {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 44px;
    padding: 3px 4px;
    border-right: 1px solid var(--esc-border-soft);
    border-bottom: 1px solid var(--esc-border-soft);
    transition: background .12s ease, box-shadow .12s ease;
}

.esc-celda--vacia {
    background: repeating-linear-gradient(
        45deg,
        #FAFBFC,
        #FAFBFC 7px,
        #F3F5F7 7px,
        #F3F5F7 14px
    );
}

.esc-celda__pista {
    color: var(--esc-text-soft);
    font-size: 10px;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-celda--sin-franja {
    min-height: 44px;
    opacity: .55;
}

/* Estados de drag & drop ------------------------------------------------- */

.esc-celda.is-destino {
    background: #EAF6FC;
    box-shadow: inset 0 0 0 2px var(--esc-accent);
}

.esc-celda.is-destino-ok {
    background: #EFF6E7;
    box-shadow: inset 0 0 0 2px var(--esc-green);
}

.esc-celda.is-destino-aviso {
    background: #FEF5E6;
    box-shadow: inset 0 0 0 2px var(--esc-warning);
}

.esc-celda.is-destino-bloqueado {
    background: #FDEDEC;
    box-shadow: inset 0 0 0 2px var(--esc-danger);
    cursor: not-allowed;
}

/* Los mismos estados de destino aplican a la tarjeta de grupo, que recibe
   alumnos arrastrados desde otras celdas. */

.esc-grupo.is-destino {
    box-shadow: 0 0 0 2px var(--esc-accent);
}

.esc-grupo.is-destino-ok {
    background: #F4FAEC;
    box-shadow: 0 0 0 2px var(--esc-green);
}

.esc-grupo.is-destino-aviso {
    background: #FEF8EE;
    box-shadow: 0 0 0 2px var(--esc-warning);
}

.esc-grupo.is-destino-bloqueado {
    background: #FDF3F2;
    box-shadow: 0 0 0 2px var(--esc-danger);
    cursor: not-allowed;
}

/* Tarjeta de grupo -------------------------------------------------------
   Dos señales, cada una en su sitio, sin pisarse:

     FONDO        -> ocupacion: azul mientras queden plazas, verde con el
                     aforo completo y rojo si esta excedido.
     BARRA IZQDA. -> nivel, del color de escuela_nivel, igual que su chapa.
                     La pone el JavaScript; el color de aqui solo se ve
                     cuando el grupo no tiene nivel asignado.

   El contador "3/6" va en neutro: si tambien se coloreara, serian tres
   señales de color en una tarjeta de dos centimetros. */

.esc-grupo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 26px 7px 10px;
    background: #FFF;
    border: 1px solid var(--esc-border);
    border-left: 4px solid var(--esc-border);
    border-radius: var(--esc-radius);
    box-shadow: var(--esc-shadow);
    cursor: grab;
}

/* Ocupacion ------------------------------------------------------------- */

.esc-grupo.es-completo {
    background: #EAF4DF;
    border-color: #C3DFA6;
}

.esc-grupo.es-excedido {
    background: #FBE3E2;
    border-color: #F0BFBD;
}

.esc-grupo.es-con-plazas {
    background: #E6F4FC;
    border-color: #BCDFF2;
}

/* Sin nivel asignado no hay color que poner en la barra: se queda gris. */
.esc-grupo {
    border-left-color: #C9D2DA;
}

.esc-grupo:active {
    cursor: grabbing;
}

.esc-grupo.es-ajeno {
    cursor: default;
}

.esc-grupo.is-arrastrando {
    opacity: .45;
    box-shadow: var(--esc-shadow-lift);
}

.esc-grupo__nombre {
    flex: 1;
    overflow: hidden;
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-grupo__cuenta {
    flex: none;
    padding: 1px 6px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .7);
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* Icono de ficha: aparece al pasar el raton por la tarjeta */

.esc-grupo__lupa {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: none;
    padding: 2px 4px;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .9);
    color: var(--esc-text-soft);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.esc-grupo:hover .esc-grupo__lupa,
.esc-grupo__lupa:focus-visible {
    display: block;
}

.esc-grupo__lupa:hover {
    color: var(--esc-accent);
}

/* Panel de resumen al pasar el raton --------------------------------------
   Cuelga del <body> en position:fixed, no de la celda: el contenedor de la
   rejilla tiene overflow-x:auto y lo recortaria. Sigue abierto mientras el
   raton esta encima, para poder arrastrar los alumnos desde el.

   Va en oscuro a proposito: flota sobre la rejilla, que es blanca, y en claro
   se confundia con las celdas que tiene detras. */

.esc-resumen {
    position: fixed;
    z-index: 1050;
    display: none;
    width: 580px;
    max-width: 92vw;
    max-height: 60vh;
    overflow-y: auto;
    padding: 11px 12px;
    background: var(--esc-navy-head);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--esc-radius);
    box-shadow: 0 10px 26px rgba(26, 43, 60, .45);
    color: #E7ECF2;
}

.esc-resumen.is-visible {
    display: block;
}

/* En informacion reducida solo hay tres columnas estrechas: el panel no
   necesita ni la mitad de ancho. */
.esc-resumen.is-reducida {
    width: 280px;
}

.esc-resumen__nivel {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
}

/* La ocupacion, pegada al extremo derecho de la linea del nivel. */

.esc-resumen__cuenta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
    padding-left: 12px;
    white-space: nowrap;
}

.esc-resumen__cuenta-txt {
    color: #8B9BB0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.esc-resumen__cuenta-num {
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
}

.esc-resumen__cuenta.is-excedido .esc-resumen__cuenta-num {
    color: #FF8A85;
}

.esc-resumen__nivel.is-sin-nivel {
    color: #8B9BB0;
    font-weight: 600;
    font-style: italic;
}

/* Interruptores del panel: alineados al extremo derecho ------------------- */

.esc-resumen__interruptores {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 8px;
}

.esc-resumen__interruptores .esc-switch__texto {
    color: #C3CEDC;
    font-size: 10px;
}

.esc-resumen__interruptores .esc-switch__pista {
    background: rgba(255, 255, 255, .25);
}

/* Version pequeña del interruptor (un 35% menos que el de la barra). */

.esc-switch--mini {
    height: auto;
    gap: 6px;
}

.esc-switch--mini .esc-switch__pista {
    width: 22px;
    height: 12px;
    border-radius: 6px;
}

.esc-switch--mini .esc-switch__pista::after {
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
}

.esc-switch--mini input:checked + .esc-switch__pista::after {
    transform: translateX(10px);
}

/* El bloque de identidad del grupo: alias de título y, debajo, el nombre
   completo cuando es distinto. La raya cierra el bloque entero. */
.esc-resumen__grupo {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.esc-resumen__grupo-alias {
    color: #FFF;
    font-size: 13px;
    font-weight: 700;
}

.esc-resumen__grupo-nombre {
    margin-top: 1px;
    color: #A3AFC6;
    font-size: 11px;
}

.esc-resumen__monitor {
    color: #FFF;
    font-size: 11px;
    font-weight: 600;
}

.esc-resumen__monitor .ph {
    margin-right: 4px;
    color: var(--esc-accent);
}

.esc-resumen__titulo {
    margin: 9px 0 7px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #9FB0C4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-resumen__titulo.is-excedido {
    color: #FF8A85;
}

.esc-resumen__vacio {
    color: #8B9BB0;
    font-size: 11px;
    font-style: italic;
}

/* Las fichas de alumno, dentro del panel, en su version oscura ------------ */

.esc-resumen .esc-alumno {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #E7ECF2;
}

/* El gris de "sin informacion" tiene que leerse sobre el panel oscuro. */
.esc-resumen .esc-alumno__pago,
.esc-resumen .esc-alumno__pago.es-sin-datos {
    background: rgba(255, 255, 255, .28);
}

.esc-resumen .esc-alumno__pago.es-debe {
    background: #FF6B66;
}

.esc-resumen .esc-alumno__pago.es-al-dia {
    background: #8CC63F;
}

.esc-resumen .esc-alumno:hover {
    background: rgba(15, 157, 234, .28);
    border-color: var(--esc-accent);
}

.esc-resumen .esc-alumno.is-seleccionado {
    background: var(--esc-accent);
    border-color: var(--esc-accent);
    color: #FFF;
}

.esc-resumen .esc-alumno.is-prueba {
    border-color: var(--esc-warning);
}

/* Ficha del grupo (modal) ------------------------------------------------- */

.esc-ficha {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 14px;
    margin: 0;
}

.esc-ficha dt {
    color: var(--esc-text-soft);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.esc-ficha dd {
    margin: 0;
    font-weight: 600;
}

.esc-ficha__titulo {
    margin: 14px 0 6px;
    padding-top: 10px;
    border-top: 1px solid var(--esc-border-soft);
    color: var(--esc-text-soft);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.esc-ficha__alumnos {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.7;
}

/* Conmutador semana / dia -------------------------------------------------- */

/* El selector de vista es un mando como los demas de la barra, y se pinta como
   ellos: mismo alto, mismo borde, mismo radio y la misma raya entre botones.
   Con 30px de alto y otro radio se leia como una pieza aparte, cuando es lo
   mismo que el mando de semana o el de dia: un grupo de controles que van
   juntos. */
.esc-vista {
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    gap: 1px;
    border: 1px solid #AEB8C2;
    border-radius: 8px;
    background: var(--esc-border);   /* lo que se ve por el hueco: la raya */
    overflow: hidden;
}

.esc-vista__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    border: 0;
    background: #FFF;
    color: var(--esc-text);
    font-family: var(--esc-font);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.esc-vista__btn + .esc-vista__btn {
    border-left: 1px solid var(--esc-border);
}

.esc-vista__btn:hover {
    background: #F4F6F7;
}

/* La vista elegida, en el azul del modulo y no en el azul marino de las
   cabeceras. El marino es el color de lo que ENMARCA —la cabecera de la tabla,
   la banda del grupo— y aqui lo que hay es una eleccion: el azul del modulo es
   el que dice "esto esta encendido" en el resto de la pantalla, y usar otro
   obligaba a aprenderse un segundo idioma para lo mismo.

   UN PASO MAS OSCURO QUE EL ACCENT, Y NO POR GUSTO

   El #0F9DEA de la casa con el texto en blanco da 2,99:1, y esto es una
   palabra de doce pixeles que hay que leer: por debajo de 4,5 no se lee, se
   adivina. #0A76B0 es el mismo azul un paso mas abajo y da 4,96:1. Sigue
   siendo azul del modulo —al lado de una chapa accent se ve que son familia—
   pero con la palabra encima legible, que es para lo que esta.

   El borde del conmutador va del mismo azul para que los dos botones parezcan
   una pieza y no uno encendido dentro de una caja gris. */
.esc-vista:has(.is-activa) {
    border-color: #0A76B0;
    background: #0A76B0;
}

.esc-vista__btn.is-activa {
    background: #0A76B0;
    color: #FFF;
}

.esc-vista__btn.is-activa:hover {
    background: #096492;
}

/* Listado de alumnos ------------------------------------------------------
   Rejilla, no <table>: cada fila tiene que poder arrastrarse a otro grupo y
   un <tr> no se arrastra bien entre contenedores.

   Las columnas van repartidas segun lo que ocupa cada dato, no a partes
   iguales: los apellidos suelen ser dos y necesitan mas sitio que el nombre;
   la edad son dos digitos; el telefono tiene ancho fijo conocido. Cabecera y
   filas comparten la misma plantilla, asi que quedan alineadas en vertical. */

.esc-alumnos {
    --esc-cols-alumno: 0.8fr 1.25fr 32px 88px minmax(0, 1.6fr) 10px;
}

/* Reducida: nombre e inicial juntos en una columna, y la edad. */
.esc-alumnos.es-reducida {
    --esc-cols-alumno: minmax(0, 1fr) 32px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.esc-alumnos__cab,
.esc-alumno {
    display: grid;
    grid-template-columns: var(--esc-cols-alumno);
    gap: 7px;
    align-items: center;
}

.esc-alumnos__cab {
    /* Las filas llevan borde de 1px; sin compensarlo aqui, la cabecera queda
       desplazada un pixel respecto a las columnas que titula. */
    padding: 0 8px 4px;
    color: #8B9BB0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.esc-alumno {
    padding: 5px 7px;
    border: 1px solid var(--esc-border);
    border-radius: 4px;
    background: #F7F9FA;
    color: var(--esc-text);
    font-size: 11px;
    cursor: grab;
    user-select: none;
}

.esc-alumno:active {
    cursor: grabbing;
}

/* Sin arrastre, la fila no debe invitar a agarrarla. */
.esc-alumno.es-fijo,
.esc-alumno.es-fijo:active {
    cursor: default;
}

/* Cada celda recorta por su cuenta: sin esto una columna con un email largo
   ensancha toda la rejilla y descuadra las filas entre si. */
.esc-alumno > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-alumno__nombre {
    font-weight: 700;
}

/* El calendario (temporada) al lado de «Alumnos de la escuela»: un
   desplegable que se vea como tal, aunque de momento tenga una sola opcion. */
.esc-alu-temporada {
    height: 26px;
    max-width: 420px;
    margin: 0 4px;
    padding: 0 26px 0 10px;
    border: 1px solid #C9D3E3;
    border-radius: 5px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231F2D4A' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center;
    -webkit-appearance: none;
    appearance: none;
    color: #1F2D4A;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    cursor: pointer;
}
.esc-alu-temporada:hover,
.esc-alu-temporada:focus { border-color: #0F9DEA; outline: 0; }
/* Temporada pasada (desde el selector de arriba): en ambar, para que se note */
.esc-alu-temporada.es-anterior { border-color: #F59E0B; background-color: #FFFBEB; color: #92400E; }

.esc-alumno__edad {
    text-align: center;
}

/* El primer apellido va dentro de la misma celda que el nombre, separado por
   un respiro, no en columna propia. */
.esc-alumno__apellido1 {
    margin-left: 5px;
    font-weight: 400;
    opacity: .85;
}

/* En reducida el nombre es una celda con dos trozos: hay que recortar el
   conjunto, no cada trozo por su cuenta. */
.esc-alumno.es-reducida .esc-alumno__nombre {
    display: block;
}

.esc-alumno__tel,
.esc-alumno__email {
    opacity: .85;
}

/* El email es un enlace mailto dentro de una fila arrastrable. */

a.esc-alumno__email {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.esc-alumno__email:hover,
a.esc-alumno__email:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.esc-resumen a.esc-alumno__email:hover,
.esc-resumen a.esc-alumno__email:focus-visible {
    color: #7FD2FF;
}

.esc-alumno.is-seleccionado a.esc-alumno__email:hover {
    color: #FFF;
}

.esc-alumno.is-seleccionado {
    background: var(--esc-accent);
    border-color: var(--esc-accent);
    color: #FFF;
}

.esc-alumno.is-arrastrando {
    opacity: .45;
}

.esc-alumno.is-prueba {
    border-style: dashed;
    border-color: var(--esc-warning);
}

/* Estado de pago: rojo debe, verde al dia, gris si no consta ------------- */

.esc-alumno__pago {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C9D2DA;
}

.esc-alumno__pago.es-debe {
    background: var(--esc-danger);
}

.esc-alumno__pago.es-al-dia {
    background: var(--esc-green);
}

.esc-alumno__pago.es-sin-datos {
    background: #C9D2DA;
}

/* Barra de seleccion multiple ------------------------------------------- */

.esc-seleccion {
    position: fixed;
    left: calc(var(--esc-sidebar-w) + 20px);
    bottom: 20px;
    z-index: 1040;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--esc-navy);
    border-radius: var(--esc-radius);
    box-shadow: var(--esc-shadow-lift);
    color: #FFF;
    font-size: 12px;
}

.esc-seleccion.is-visible {
    display: flex;
}

.esc-seleccion__contador {
    padding: 3px 9px;
    border-radius: 10px;
    background: var(--esc-accent);
    font-weight: 700;
}

.esc-seleccion__limpiar {
    border: 0;
    background: none;
    color: #9FB3C8;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
}

/* =============================================================================
   4. CARGA, TOASTS Y MODALES
============================================================================= */

.esc-cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: var(--esc-text-soft);
    font-size: 12px;
}

.esc-cargando::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid var(--esc-border);
    border-top-color: var(--esc-accent);
    border-radius: 50%;
    animation: esc-girar .6s linear infinite;
}

/* Cuando la busqueda ha TERMINADO y no hay nada que enseñar, el mismo hueco
   dice por que. Sin la rueda: girando para siempre al lado de un texto que
   dice que no hay datos, parece que sigue buscando y que la pantalla se ha
   quedado colgada. */
.esc-cargando.es-fin::before {
    content: "\e2ce";   /* ph-info */
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    animation: none;
    font-family: "Phosphor" !important;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.esc-matriz-envoltorio.is-ocupado {
    position: relative;
    pointer-events: none;
}

.esc-matriz-envoltorio.is-ocupado::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .55);
}

/* Por encima del modal (1070) a proposito. Un aviso es lo que explica por que
   algo no se ha guardado, y si sale detras del velo del modal no se lee: se
   quedaba la ficha abierta sin decir que pasaba. */
.esc-toasts {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 340px;
}

.esc-toast {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-left: 4px solid var(--esc-accent);
    border-radius: var(--esc-radius);
    background: #FFF;
    box-shadow: var(--esc-shadow-lift);
    color: var(--esc-text);
    font-size: 12px;
    font-weight: 600;
    animation: esc-entrar .18s ease;
}

.esc-toast--ok    { border-left-color: var(--esc-green); }
.esc-toast--error { border-left-color: var(--esc-danger); }
.esc-toast--aviso { border-left-color: var(--esc-warning); }

.esc-toast.is-saliendo {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity .2s ease, transform .2s ease;
}

@keyframes esc-entrar {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Modal de confirmacion --------------------------------------------------- */

.esc-modal {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;

    /* DESENFOCADO DETRAS. La ventana del grupo ocupa casi toda la pantalla y
       lo que asoma por los bordes —el dia entero, doce tarjetas— compite con
       lo que se ha venido a hacer. Con el fondo desenfocado sigue estando
       —se ve que hay una pantalla debajo y se sabe a donde se vuelve— pero
       deja de leerse. */
    background: rgba(26, 43, 60, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.esc-modal.is-visible {
    display: flex;
}

/* La caja nunca pasa del alto de la ventana y lo que rueda es el CUERPO: la
   cabecera y el pie se quedan donde se les ve, que es donde esta el boton de
   cerrar.

   Sin esto, un modal con una lista larga —los alumnos sin tarifa— crecia por
   debajo del borde de la pantalla y no habia forma de llegar al final ni de
   cerrarlo sin el teclado. */
.esc-modal__caja {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 40px);
    background: #FFF;
    border-radius: var(--esc-radius-modal);
    box-shadow: var(--esc-shadow-lift);
    overflow: hidden;
}

.esc-modal__cab,
.esc-modal__pie {
    flex: none;
}

/* Tres anchos, y los pide quien abre la ficha en vez de deducirse del
   contenido con un `:has()`.

   Con `:has()` la caja cambiaba de ancho al llegar el contenido —una ficha que
   pide sus datos al servidor lo inyecta despues—, y los hijos ya colocados con
   el ancho viejo no se recolocaban: la rejilla se quedaba a 0 y las columnas
   se pintaban fuera del modal. Sabiendo el ancho de entrada no hay un segundo
   reparto. */
.esc-modal__caja.es-media { max-width: min(780px, 94vw); }
.esc-modal__caja.es-ancha { max-width: min(860px, 94vw); }
.esc-modal__caja.es-extra { max-width: min(1040px, 96vw); }

/* La revision del calendario. Ancha porque cada fila lleva tres columnas —de
   quien es la clase, con que choca y que se hace con ella— y en 860 la del
   medio se partia en tres lineas. */
.esc-modal__caja.es-revision { max-width: min(1280px, 96vw); }
/* Cuatro columnas con contenido de verdad dentro (el test fisico trae su
   selector de niveles y el deportivo sus bloques): necesita la pantalla.

   El tope de arriba solo manda en un monitor muy grande; en uno normal quien
   manda es el 99vw. Por eso, ademas de subirlo, la ficha de cuatro columnas
   recorta el marco que la rodea —el hueco del velo y el acolchado del cuerpo—
   mas abajo: ese ancho no se ve y en cambio lo necesitan las columnas. */
.esc-modal__caja.es-completa { max-width: min(2400px, 99vw); }

.esc-modal__cab {
    padding: 14px 18px;
    background: var(--esc-navy-head);
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-modal__cuerpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    font-size: 13px;
    line-height: 1.5;
}

.esc-modal__pie {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--esc-border-soft);
    background: #FAFBFC;
}

/* =============================================================================
   5. RESPONSIVE
============================================================================= */

@media (max-width: 1024px) {
    /* Con el menu de iSQUAD plegado, la barra de seleccion ocupa todo el ancho. */
    .esc-seleccion {
        left: 16px;
        right: 16px;
    }
}

@media (max-width: 640px) {
    .esc-titulo {
        font-size: 1.3rem;
    }
}

/* =============================================================================
   6. NIVELADO DE GRUPOS
============================================================================= */

.esc-niveles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
    align-items: start;
}

.esc-niveles__form {
    position: sticky;
    top: 76px;
}

.esc-niveles__fila {
    display: grid;
    grid-template-columns: 1fr 96px;
    gap: 12px;
    align-items: start;
}

/* css/styles.css hace flotar los .form-group. Dentro de este formulario hay
   que anularlo: con los hijos flotados, la fila de dos columnas colapsaba a
   ancho 0 y se iba al borde derecho del panel.
   Y los hijos de un grid llevan min-width:auto, que impide que encojan por
   debajo de su contenido. */
.esc-niveles__form .form-group {
    float: none;
    width: 100%;
}

.esc-niveles__fila {
    clear: both;
}

.esc-niveles__fila > * {
    min-width: 0;
}

.esc-niveles__fila .form-control {
    width: 100%;
}

.esc-niveles__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.esc-ayuda {
    display: block;
    margin-top: 4px;
    color: var(--esc-text-soft);
    font-size: 11px;
}

/* Tabla ------------------------------------------------------------------- */

.esc-tabla {
    width: 100%;
    border-collapse: collapse;
}

.esc-tabla thead th {
    padding: 10px 12px;
    background: var(--esc-navy-head);
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-align: left;
    text-transform: uppercase;
}

.esc-tabla tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--esc-border-soft);
    vertical-align: middle;
}

.esc-tabla tbody tr.is-inactivo {
    opacity: .5;
}

.esc-tabla__nombre {
    font-weight: 700;
}

.esc-tabla__num {
    text-align: center;
}

.esc-tabla__vacio {
    color: var(--esc-text-soft);
    font-style: italic;
    text-align: center;
}

.esc-tabla__acciones {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

.esc-tabla__acciones .btn {
    padding: 3px 9px;
}

.esc-muestra {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 4px;
    vertical-align: middle;
}

/* Selector de color ------------------------------------------------------- */

.esc-color {
    display: flex;
    gap: 8px;
    align-items: center;
}

.esc-color input[type="color"] {
    flex: none;
    width: 42px;
    height: 30px;
    padding: 2px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FFF;
    cursor: pointer;
}

/* Tarjeta de ejemplo: mismo tratamiento que en la matriz ------------------- */

.esc-vista-previa {
    margin: 4px 0 14px;
    padding: 14px;
    background: repeating-linear-gradient(45deg, #FAFBFC, #FAFBFC 7px, #F3F5F7 7px, #F3F5F7 14px);
    border: 1px solid var(--esc-border-soft);
    border-radius: var(--esc-radius);
}

.esc-vista-previa .esc-grupo {
    cursor: default;
}

@media (max-width: 1100px) {
    .esc-niveles {
        grid-template-columns: minmax(0, 1fr);
    }

    .esc-niveles__form {
        position: static;
    }
}

/* Reordenar el nivelado arrastrando las filas ----------------------------- */

.esc-tabla__tirador {
    width: 26px;
    color: var(--esc-text-soft);
    text-align: center;
}

.esc-tabla__tirador .ph {
    cursor: grab;
    font-size: 15px;
}

.esc-tabla__tirador .ph:active {
    cursor: grabbing;
}

.esc-tabla tbody tr.is-arrastrando {
    opacity: .4;
}

/* La linea marca si se va a soltar por encima o por debajo de la fila. Se usa
   box-shadow y no border para no descuadrar la altura de la fila al entrar. */
.esc-tabla tbody tr.is-sobre-arriba td {
    box-shadow: inset 0 2px 0 0 var(--esc-accent);
}

.esc-tabla tbody tr.is-sobre-abajo td {
    box-shadow: inset 0 -2px 0 0 var(--esc-accent);
}

/* Distintivo (GR)n -------------------------------------------------------
   El fondo lo pone el JavaScript con el color del nivel; aqui solo la forma.
   El texto va en blanco con una sombra suave para que se lea igual sobre un
   color claro que sobre uno oscuro, sin tener que calcular contraste. */

.esc-codigo {
    display: inline-block;
    flex: none;
    min-width: 38px;
    margin-right: 5px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--esc-navy-label);
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

/* =============================================================================
   7. PANTALLA DE GRUPOS
============================================================================= */

.esc-grupos-barra {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    clear: both;
    width: 100%;
    margin-bottom: 16px;
}

/* Buscar + los dos filtros, en un solo mando. El buscador se lleva el hueco
   que sobre; los desplegables, lo justo de su texto. */
.esc-grupos-campo-filtros {
    flex: 1 1 480px;
    min-width: 280px;
}

.esc-grupos-filtros {
    display: flex;
    width: 100%;
}

.esc-grupos-filtros > #esc-grupos-buscar {
    flex: 1 1 auto;
    min-width: 140px;
}

.esc-grupos-filtros > select {
    flex: 0 0 auto;
}

.esc-grupos__vacio,
.esc-grupos__aviso {
    padding: 10px 14px;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-style: italic;
}

.esc-grupos__aviso {
    background: #FEF8EE;
    border-left: 3px solid var(--esc-warning);
    font-style: normal;
}

/* Bloque de nivel ---------------------------------------------------------- */

.esc-nivel-bloque {
    margin-bottom: 18px;
}

.esc-nivel-bloque__cab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #2C3349;   /* el azul del sidebar, el más claro de sus dos tonos */
    border-radius: var(--esc-radius) var(--esc-radius) 0 0;
    color: #FFF;
}

.esc-nivel-bloque__nombre {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-nivel-bloque__cuenta,
.esc-nivel-bloque__aforo {
    color: rgba(255, 255, 255, .85);
    font-size: 11px;
}

.esc-nivel-bloque__aforo {
    margin-left: auto;
}

/* Grupo plegable ----------------------------------------------------------- */

.esc-grupo-caja {
    margin-bottom: 1px;
    background: var(--esc-surface);
    border: 1px solid var(--esc-border);
    border-left: 4px solid #C9D2DA;
    transition: box-shadow .15s ease;
}

/* Cabecera en REJILLA: cada dato en su columna, igual en todos los grupos.
   Con una fila flexible cada grupo colocaba sus piezas donde le cabia y no
   habia forma de comparar dos filas de un vistazo. */

.esc-grupo-caja__cab {
    display: grid;
    grid-template-columns:
        34px                 /* lapiz de editar   */
        minmax(0, 1fr)       /* flecha y nombre   */
        var(--esc-alias, 72px)  /* alias: lo mide el JS con el mas largo que
                                   haya, para que salgan enteros y alineados */
        54px                 /* nivel             */
        52px                 /* dias              */
        56px                 /* ocupacion         */
        minmax(0, 0.9fr)     /* monitor           */
        34px                 /* lapiz de monitor  */
        34px;                /* agenda del grupo  */
    align-items: center;
    gap: 6px;
    padding: 0 12px 0 0;
}

.esc-grupo-caja__cab > * {
    min-width: 0;
}

/* Celdas que solo centran su contenido, tengan algo o no. */
.esc-grupo-caja__celda {
    display: flex;
    align-items: center;
    justify-content: center;
}

.esc-grupo-caja__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 6px 10px 0;
    border: 0;
    background: none;
    color: var(--esc-text);
    font-family: var(--esc-font);
    text-align: left;
    cursor: pointer;
}

.esc-grupo-caja__toggle:hover {
    background: #F7F9FA;
}

.esc-grupo-caja__nombre {
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-grupo-caja__alias {
    justify-self: center;
    overflow: hidden;
    max-width: 100%;
    padding: 1px 7px;
    border-radius: 9px;
    background: #EEF1F4;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dias por semana previstos, junto al nivel. */

.esc-grupo-caja__dias {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: help;
    padding: 1px 7px;
    border-radius: 9px;
    background: #EEF1F4;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
}

/* Previstos y colocados no cuadran. Sobre fondo claro quien tiene que ser
   amarillo es el relleno; el texto va oscuro o no se lee. */
.esc-grupo-caja__dias.es-descuadrado {
    background: var(--esc-alerta);
    color: #4A4200;
}

.esc-grupo-caja__dias.es-descuadrado > .ph {
    /* Sobre el amarillo no hace falta recortarlo. */
    text-shadow: none;
}

/* AVISO EN AMARILLO --------------------------------------------------------
   Todo lo que avise en amarillo lleva esta clase, y con ella las tres cosas
   que hacen falta para que un aviso sirva: el color, el parpadeo que lo hace
   mirar, y un data-ayuda que diga POR QUE avisa. Un triangulo amarillo que no
   explica nada solo consigue que se ignore.

   El parpadeo va en el icono de dentro y no en el contenedor: la burbuja de
   ayuda es un ::after del contenedor y parpadearia con el, y un texto que se
   desvanece mientras lo lees no hay quien lo lea. El aviso llama la atencion;
   lo que explica el aviso se esta quieto. */

.esc-ambar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--esc-alerta);
    cursor: help;
}

.esc-ambar > .ph,
.esc-ambar > .esc-triangulo {
    animation: esc-parpadeo 1.4s ease-in-out infinite;
}

/* El triangulo va RELLENO (ph-fill), no de contorno: un amarillo puro en una
   linea de 1px no se ve sobre blanco, y macizo se ve de sobra sin tener que
   apagarle el color con sombras.

   La admiracion del icono relleno es un hueco, o sea que se veria del color
   del fondo. Se pinta encima una negra: va dentro del icono, asi que parpadea
   con el en vez de quedarse flotando. */
.esc-triangulo {
    position: relative;
    /* Contorno gris: el text-shadow se dibuja DETRAS del glifo, asi que ocho
       copias a 1px hacen de borde sin comerse el amarillo de dentro. */
    text-shadow:
         0   -1px 0 #9AA3AD,  1px -1px 0 #9AA3AD,
         1px  0   0 #9AA3AD,  1px  1px 0 #9AA3AD,
         0    1px 0 #9AA3AD, -1px  1px 0 #9AA3AD,
        -1px  0   0 #9AA3AD, -1px -1px 0 #9AA3AD;
}

.esc-triangulo::after {
    content: '!';
    /* La admiracion no lleva contorno: es negra sobre amarillo y se ve sola. */
    text-shadow: none;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* La admiracion del triangulo no esta centrada: cae bajo el vertice. */
    padding-top: .18em;
    color: #000;
    font-family: var(--esc-font);
    font-size: .58em;
    font-weight: 700;
    line-height: 1;
}

@keyframes esc-parpadeo {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

/* Para quien haya pedido al sistema que no se muevan las cosas, el aviso se
   queda fijo: sigue viendose, sigue explicandose. */
@media (prefers-reduced-motion: reduce) {
    .esc-ambar > .ph,
    .esc-ambar > .esc-triangulo {
        animation: none;
    }
}

/* Alumnos en el grupo sin ningun dia: ocupan plaza y no van a clase. */
.esc-grupo-caja__alerta {
    margin-left: 2px;
    font-size: 20px;
}

/* Grupo sin dias por semana definidos: en blanco pasaba por "esta bien". */
.esc-grupo-caja__falta {
    font-size: 20px;
}

.esc-grupo-caja__cuenta {
    padding: 1px 7px;
    border-radius: 9px;
    background: #EEF1F4;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
}

.esc-grupo-caja__cuenta.es-completo {
    background: var(--esc-green);
    color: #FFF;
}

.esc-grupo-caja__cuenta.es-excedido {
    background: var(--esc-danger);
    color: #FFF;
}

.esc-grupo-caja__monitor-txt {
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-grupo-caja__monitor-txt.es-vacio {
    font-style: italic;
    opacity: .75;
}

/* Lapiz de asignar monitor: mismo tratamiento que la X de quitar alumno. */

.esc-grupo-caja__lapiz {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--esc-border);
    border-radius: 4px;
    background: #FFF;
    color: var(--esc-text-soft);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.esc-grupo-caja__lapiz:hover,
.esc-grupo-caja__lapiz:focus-visible {
    background: var(--esc-accent);
    border-color: var(--esc-accent);
    color: #FFF;
}

/* El calendario del grupo, al final de la fila: como el lápiz pero redondo,
   para que se lea como "otra cosa" y no como un tercer editar. */
.esc-grupo-caja__agenda {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--esc-border);
    border-radius: 50%;
    background: #FFF;
    color: var(--esc-text-soft);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.esc-grupo-caja__agenda:hover,
.esc-grupo-caja__agenda:focus-visible {
    background: var(--esc-accent);
    border-color: var(--esc-accent);
    color: #FFF;
}

/* En el modal de la agenda, cuando es de un grupo: el nombre del grupo en vez
   del selector de "qué clases". */
.esc-agenda__grupo-nombre {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--esc-radius);
    background: var(--esc-border-soft);
    color: var(--esc-title);
    font-weight: 700;
}

.esc-monitor-form .esc-label {
    display: block;
    margin-bottom: 5px;
    color: var(--esc-text-soft);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.esc-monitor-form .form-control {
    width: 100%;
}

/* Tabla de entrenadores x dias -------------------------------------------- */
/* Reutiliza .esc-alumnos / .esc-alumno del listado de alumnos: es la misma
   forma de trabajar y no debe verse distinta. Aqui solo lo que cambia. */

.esc-monitor-sel {
    width: 100%;
    height: 26px;
    padding: 2px 6px;
    font-size: 12px;
}

.esc-monitor-mas {
    margin-top: 8px;
}

/* Formulario de grupo: campos a la izquierda, rejilla de dias a la derecha. */

.esc-grupo-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 20px;
    align-items: start;
}

.esc-grupo-form > * {
    min-width: 0;
}

/* Solo hay rejilla al editar; al crear, los campos ocupan todo el ancho. */
.esc-grupo-form__campos:only-child {
    grid-column: 1 / -1;
}

.esc-grupo-nuevo__campo {
    margin-bottom: 12px;
}

/* Mini-matriz de dias y horas ---------------------------------------------- */

/* Todas las pistas del club, en columnas. Con scroll cuando no caben: un club
   con doce pistas no puede estirar el modal doce rejillas hacia abajo. */
.esc-minipistas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
    align-items: start;
    max-height: 58vh;
    margin-top: 4px;
    overflow-y: auto;
    /* Sitio para que la barra de scroll no se coma el borde de la ultima
       columna. */
    padding-right: 4px;
}

/* Una seccion por pista: el nombre y debajo su rejilla de dias y horas. */
.esc-minipista {
    min-width: 0;
}

.esc-minipista__nombre {
    padding: 4px 8px;
    border-radius: var(--esc-radius) var(--esc-radius) 0 0;
    background: #E8EDF2;
    color: var(--esc-title);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.esc-minimatriz {
    display: grid;
    grid-template-columns: var(--esc-cols-mini);
    gap: 1px;
    border: 1px solid var(--esc-border);
    border-top: 0;
    border-radius: 0 0 var(--esc-radius) var(--esc-radius);
    background: var(--esc-border-soft);
    /* Sin recorte: la burbuja de ayuda de cada celda sale fuera de la rejilla
       y con overflow:hidden no se veia nada. */
    overflow: visible;
}

.esc-minimatriz__cab {
    padding: 5px 0;
    background: var(--esc-navy-head);
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.esc-minimatriz__hora {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 4px;
    background: #F4F6F7;
    color: var(--esc-title);
    font-size: 10px;
    font-weight: 700;
}

.esc-minimatriz__celda {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    background: #FFF;
    cursor: help;
}

.esc-minimatriz__celda input {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

.esc-minimatriz__celda input:disabled {
    cursor: not-allowed;
}

/* Sin pista a esa hora ese dia: no hay nada que marcar. */
.esc-minimatriz__celda.es-sin-franja {
    background: repeating-linear-gradient(45deg,
        #FAFBFC, #FAFBFC 5px, #F1F3F5 5px, #F1F3F5 10px);
}

/* La tiene otro grupo: no se puede marcar, y lleva la etiqueta de su nivel. */
.esc-minimatriz__celda.es-ocupada {
    background: #F4F6F8;
}

/* La que va a quedarse este grupo. */
.esc-minimatriz__celda.es-elegida {
    background: #E6F4FC;
}

/* Etiqueta (GR)n del grupo que ocupa la celda, con el color de su nivel. */
.esc-minichapa {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--esc-text-soft);
    color: #FFF;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* La burbuja de estas celdas va en coordenadas de pantalla, no pegada a la
   celda: la caja de las pistas tiene scroll y lo que se sale de una caja con
   scroll se recorta. Las coordenadas las pone colocarAyuda() en grupos.js. */
.esc-minimatriz__celda[data-ayuda]::after {
    position: fixed;
    top: var(--esc-ayuda-y, 0);
    left: var(--esc-ayuda-x, 0);
    width: 210px;
    transform: none;
}

.esc-minimatriz__aviso {
    margin-top: 7px;
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-minimatriz__aviso.es-error {
    color: var(--esc-danger);
    font-weight: 600;
}

.esc-minimatriz__aviso.es-pendiente {
    color: #8A5A00;
}

.esc-minimatriz__aviso.es-ok {
    color: #4A7A1E;
}

/* Con la rejilla dentro, el modal necesita bastante mas sitio. */
.esc-modal__caja:has(.esc-grupo-form__rejilla) {
    max-width: 1180px;
}

/* Con la rejilla dentro, los campos no necesitan la mitad del ancho. */
.esc-grupo-form:has(.esc-grupo-form__rejilla) {
    grid-template-columns: 320px minmax(0, 1fr);
}

@media (max-width: 820px) {
    .esc-grupo-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

.esc-grupo-nuevo__campo .form-control {
    width: 100%;
}

/* Con la tabla dentro, el modal necesita mas sitio que para un mensaje. */
.esc-modal__caja:has(.esc-monitor-tabla-caja) {
    max-width: 560px;
}

.esc-monitor-form__fila {
    display: grid;
    grid-template-columns: 78px 1fr 160px;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.esc-monitor-form__fila > * {
    min-width: 0;
}

.esc-monitor-form__dia {
    font-size: 12px;
    font-weight: 700;
}

.esc-monitor-form__detalle {
    overflow: hidden;
    color: var(--esc-text-soft);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-monitor-form__atajo {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--esc-border-soft);
}

.esc-monitor-form__atajo > * {
    min-width: 0;
}

.esc-grupo-caja__cuerpo {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--esc-border-soft);
}

/* Destino de un arrastre */

.esc-grupo-caja.is-destino {
    box-shadow: inset 0 0 0 2px var(--esc-accent);
    background: #EAF6FC;
}

/* Foco: velo que difumina todo menos el grupo abierto ---------------------- */

.esc-velo {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(26, 43, 60, .35);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* La tarjeta abierta y la columna se suben por encima del velo. El resto de
   la pantalla queda debajo y difuminado. */
.esc-grupo-caja.is-abierto {
    position: relative;
    z-index: 1036;
    border-color: var(--esc-accent);
    box-shadow: 0 10px 30px rgba(26, 43, 60, .28);
}

/* Quitar del grupo --------------------------------------------------------- */

.esc-alumno__quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--esc-border);
    border-radius: 4px;
    background: #FFF;
    color: var(--esc-text-soft);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.esc-alumno__quitar:hover,
.esc-alumno__quitar:focus-visible {
    background: var(--esc-danger);
    border-color: var(--esc-danger);
    color: #FFF;
}

/* Columnas de dia dentro del grupo ---------------------------------------- */

.esc-alumnos__dia {
    text-align: center;
}

.esc-alumno__dia {
    display: flex;
    align-items: center;
    justify-content: center;
}

.esc-alumno__dia input {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
}

.esc-alumno__dia input:disabled {
    cursor: not-allowed;
    opacity: .5;
}

/* Columna lateral de alumnos ---------------------------------------------- */

.esc-cajon {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: 560px;
    max-width: 94vw;
    background: var(--esc-navy-head);
    box-shadow: -8px 0 26px rgba(26, 43, 60, .35);
    color: #E7ECF2;
}

.esc-cajon__cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.esc-cajon__titulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-cajon__cerrar {
    margin-left: auto;
    padding: 2px 6px;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    color: #E7ECF2;
    cursor: pointer;
}

.esc-cajon__cerrar:hover {
    background: rgba(255, 255, 255, .18);
}

.esc-cajon__filtros {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 14px;
}

/* Los controles de la plataforma son claros; dentro del cajon oscuro hay que
   darles su version o se ven como parches blancos. */

.esc-cajon .form-control {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .16);
    color: #E7ECF2;
}

.esc-cajon .form-control::placeholder {
    color: #8B9BB0;
}

.esc-cajon .form-control:focus {
    border-color: var(--esc-accent);
}

/* El desplegable nativo pinta su lista con el color del sistema: las opciones
   se fuerzan a claro para que se lean al abrirlo. */
.esc-cajon select.form-control option {
    background: #FFF;
    color: var(--esc-text);
}

.esc-cajon__pie .btn {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: #E7ECF2;
}

.esc-cajon__pie .btn:hover {
    background: rgba(255, 255, 255, .16);
}

.esc-cajon__filtros .esc-switch__texto {
    color: #C3CEDC;
    font-size: 10px;
    white-space: normal;
}

.esc-cajon__filtros .esc-switch__pista {
    background: rgba(255, 255, 255, .25);
}

.esc-cajon__selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.esc-cajon__conayuda {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.esc-cajon__conayuda .form-control {
    flex: 1;
    min-width: 0;
}

.esc-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: transparent;
    color: #9FB0C4;
    font-size: 11px;
    cursor: help;
}

.esc-info:hover,
.esc-info:focus-visible {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}

/* Burbuja de ayuda propia en vez del tooltip nativo: sale al instante, se
   coloca donde queremos y no tapa la tabla como hacia el del navegador.

   Vale para cualquier elemento con data-ayuda, no solo para .esc-info: es el
   mismo gesto en toda la pantalla y no deberia verse distinto. */

[data-ayuda] {
    position: relative;
}

[data-ayuda]::after {
    content: attr(data-ayuda);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 1060;
    display: none;
    width: 270px;
    max-width: 70vw;
    padding: 8px 10px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, .16);
    /* Quien quiera puede darle color a la franja de la izquierda: es la unica
       forma de meter un color en la burbuja, porque el contenido es texto puro
       (content: attr) y ahi no cabe una chapa. */
    border-left: 3px solid var(--esc-ayuda-color, rgba(255, 255, 255, .16));
    border-radius: var(--esc-radius);
    background: #1F2637;
    box-shadow: var(--esc-shadow-lift);
    color: #E7ECF2;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    /* pre-line y no normal: asi un data-ayuda con varios datos puede ponerlos
       uno por linea. Los textos de una sola linea no se ven afectados. */
    white-space: pre-line;
}

[data-ayuda]:hover::after,
[data-ayuda]:focus-visible::after {
    display: block;
}

/* Al mostrar la burbuja, el propio elemento se pone por encima de sus hermanos.
   Sin esto, un data-ayuda que despliega el tooltip hacia abajo (una fila de una
   lista) queda tapado por las filas siguientes, que pintan después: el z-index
   del ::after solo cuenta dentro del contexto de apilado de su elemento, así que
   hay que elevar también el elemento. */
[data-ayuda]:hover,
[data-ayuda]:focus-visible,
[data-ayuda]:focus-within {
    z-index: 1060;
}

/* En la mini-matriz lo que recibe el foco es la casilla, no la celda que
   lleva el data-ayuda: sin esto, quien navega con el teclado no veria de
   quien es la pista. Solo con el teclado (:focus-visible): al pulsar la
   casilla con el raton el foco se queda en ella y la burbuja se quedaba fija,
   tapando el boton de Guardar. */
.esc-minimatriz__celda[data-ayuda]:has(:focus-visible)::after {
    display: block;
}

/* Icono de la inscripcion, a la izquierda del nombre en la tabla del grupo.
   Es el mismo circulo que .esc-info, pero la tabla del grupo va sobre fondo
   claro y alli un borde blanco translucido no se ve. */
/* Mas especifico que `.esc-alumno > span`, que recorta todas las celdas para
   que un email largo no descuadre la rejilla: aqui ese recorte se llevaria por
   delante la burbuja de ayuda, que sale fuera de la celda. */
.esc-alumno > .esc-alumno__info {
    overflow: visible;
}

.esc-alumno__info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    border: 1px solid #C3CDDA;
    border-radius: 50%;
    background: transparent;
    color: #7A8290;
    font-size: 10px;
    line-height: 1;
    cursor: help;
}

.esc-alumno__info:hover,
.esc-alumno__info:focus-visible {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}

/* Sin inscripcion: se deja, pero apagado. */
.esc-alumno__info.es-vacio {
    border-color: #E2E8F0;
    color: #C3CDDA;
}

/* En las primeras filas la burbuja se saldria por arriba del grupo; abajo
   siempre cabe, que es donde la pone el estilo general. Aqui solo se evita
   que se salga por la izquierda al ser la primera columna. */
.esc-alumno__info::after {
    left: 0;
    transform: none;
}

/* Pegada al borde derecho del cajon, la burbuja se saldria de pantalla. */
.esc-cajon__selects > div:last-child .esc-info::after {
    left: auto;
    right: 0;
    transform: none;
}

.esc-cajon__selects > * {
    min-width: 0;
}

.esc-cajon__ayuda {
    margin: 0;
    padding: 0 14px 10px;
    color: #8B9BB0;
    font-size: 11px;
    font-style: italic;
}

.esc-cajon__lista {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px 14px;
}

.esc-cajon__pie {
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.esc-cajon__pie .btn {
    width: 100%;
}

/* Ficha arrastrable de alumno --------------------------------------------- */

/* Las filas del cajon usan la misma rejilla que el resto de listados, pero el
   cajon es oscuro y .esc-alumno viene con tema claro: hay que darles su
   version oscura o el texto queda ilegible. */

.esc-cajon .esc-alumnos__cab {
    color: #8B9BB0;
}

.esc-cajon .esc-alumno {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #E7ECF2;
}

.esc-cajon .esc-alumno:hover {
    border-color: var(--esc-accent);
}

.esc-ficha-alumno {
    cursor: grab;
    user-select: none;
}

.esc-ficha-alumno:active {
    cursor: grabbing;
}

.esc-ficha-alumno:hover {
    border-color: var(--esc-accent);
}

/* Ya esta en algun grupo: otro color, nunca escondido, porque un alumno puede
   entrenar en varios grupos y ocultarlo impediria llevarlo a un segundo.
   El ambar va bajo, solo como tinte: sobre el panel oscuro subirlo mas deja el
   texto sin contraste. */
.esc-cajon .esc-alumno.es-asignado {
    background: rgba(246, 159, 0, .14);
    border-color: rgba(246, 159, 0, .55);
    color: #FFE3B3;
}

.esc-cajon .esc-alumno.is-seleccionado {
    background: var(--esc-accent);
    border-color: var(--esc-accent);
    color: #FFF;
}

.esc-ficha-alumno.is-arrastrando {
    opacity: .45;
}

/* Pestañas del cajon ------------------------------------------------------ */

.esc-cajon__pestanas {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.esc-cajon__libres {
    margin-left: auto;
    padding-left: 10px;
}

.esc-cajon__libres .esc-switch__texto {
    color: #8B9BB0;
    font-size: 10px;
    white-space: nowrap;
}

.esc-cajon__libres .esc-switch__pista {
    background: rgba(255, 255, 255, .25);
}

.esc-cajon__pestana {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: #8B9BB0;
    font-family: var(--esc-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    cursor: pointer;
}

.esc-cajon__pestana:hover {
    color: #E7ECF2;
}

.esc-cajon__pestana.is-activa {
    border-bottom-color: var(--esc-accent);
    color: #FFF;
}

.esc-cajon__pestana-n {
    padding: 1px 6px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .12);
    font-size: 10px;
}

.esc-cajon__pestana.is-activa .esc-cajon__pestana-n {
    background: var(--esc-accent);
}

/* Dias pedidos y dias colocados -------------------------------------------
   Naranja mientras le falte algun dia de los que pidio, verde cuando ya los
   tiene todos. Es el estado que decide tambien en que pestaña cae. */

.esc-alumno__diascelda {
    display: flex;
    align-items: center;
    justify-content: center;
}

.esc-diascuenta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* Tres estados, de peor a mejor. Sin ninguno asignado, rojo; a medias,
   amarillo (lleva ademas .esc-ambar, que le pone el parpadeo y la
   explicacion); con todos los que pidio, verde.

   Los tres van MACIZOS, sin transparencia. Estas chapas viven en el panel
   oscuro y, ademas, la fila de quien ya esta en un grupo va tintada de ambar:
   un tinte encima de otro tinte no destaca, y el que peor lo llevaba era el
   amarillo de alerta, que es justo el que tiene que verse. Macizo, el color
   es el mismo caiga en la fila que caiga. */

.esc-diascuenta.es-ninguno {
    background: var(--esc-danger);
    color: #FFF;
    cursor: help;
}

/* Sobre amarillo macizo, el texto en amarillo no se leeria: va oscuro. */
.esc-diascuenta.es-a-medias {
    background: var(--esc-alerta);
    color: #4A4200;
}

.esc-diascuenta.es-completo {
    background: var(--esc-green);
    color: #FFF;
    cursor: help;
}

/* Mas dias de los que pidio. Ni verde ni rojo: ninguno de los dos lo cuenta.
   Verde diria que esta bien y rojo que falta algo, y lo que pasa es otra cosa,
   asi que tiene color propio. */
.esc-diascuenta.es-pasado {
    background: #7A4BD3;
    color: #FFF;
    cursor: help;
}

/* La chapa lleva al grupo del alumno cuando ya esta en alguno: alli es donde
   se le marcan los dias. */
.esc-diascuenta.es-pulsable {
    cursor: pointer;
}

.esc-diascuenta.es-pulsable:hover,
.esc-diascuenta.es-pulsable:focus-visible {
    outline: 1px solid rgba(255, 255, 255, .45);
    outline-offset: 1px;
}

/* Las filas del alumno seleccionado en la columna, en todos los grupos donde
   aparezca. Se queda puesta mientras siga seleccionado y no se apaga sola: un
   destello de tres segundos se pierde en cuanto apartas la vista, y quien esta
   en dos grupos obliga a mirar dos listas de filas iguales.

   Es el mismo azul con el que la columna marca al seleccionado, para que se
   entienda que hablan del mismo alumno. */
.esc-alumno.es-senalado {
    background: #E6F4FC;
    box-shadow: inset 3px 0 0 var(--esc-accent);
}

/* Al pasar por encima, la fila normal se aclara; la señalada conserva su
   color, que es lo que se ha venido a buscar. */
.esc-alumno.es-senalado:hover {
    background: #DCEEFA;
}

/* Predileccion de dias: el que ya tiene cubierto, en verde. */

.esc-alumno__prefdias {
    display: flex;
    gap: 3px;
    justify-content: center;
}

.esc-diachip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .12);
    font-size: 9px;
    font-weight: 700;
}

.esc-diachip.es-cubierto {
    background: #6FA82F;
    color: #FFF;
}

/* Nivel al que se apunto: chapa de color mas nombre, en una sola celda. */

.esc-alumno__nivel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
}

.esc-alumno__nivel > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-alumno__nivel .es-vacio {
    font-style: italic;
    opacity: .6;
}

/* Cabecera que ordena al pulsarla ---------------------------------------- */

.esc-alumnos__orden {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.esc-alumnos__orden:hover {
    color: #FFF;
    text-decoration: underline;
}

.esc-alumnos__orden.is-activa {
    color: #FFF;
}

/* Con la columna abierta, el contenido deja sitio para que no quede debajo. */
body.esc-con-cajon .app-content .container {
    padding-right: 575px;
}

@media (max-width: 1200px) {
    body.esc-con-cajon .app-content .container {
        padding-right: 15px;
    }
}

/* Inscripciones ------------------------------------------------------------ */

/* Las pestañas de estado nacieron en el cajon oscuro; aqui van sobre el fondo
   claro de la pagina y necesitan sus propios colores. */
.esc-ins-pestanas {
    margin: 0 0 10px;
    padding: 0;
    border-bottom: 1px solid var(--esc-border);
}

.esc-ins-pestanas .esc-cajon__pestana {
    color: var(--esc-text-soft);
}

.esc-ins-pestanas .esc-cajon__pestana.is-activa {
    border-bottom-color: var(--esc-accent);
    color: var(--esc-title);
}

.esc-ins-pestanas .esc-cajon__cuenta {
    background: var(--esc-border-soft);
    color: var(--esc-text-soft);
}

.esc-ins-pestanas .esc-cajon__pestana.is-activa .esc-cajon__cuenta {
    background: var(--esc-accent);
    color: #FFF;
}

/* Una inscripcion anulada se sigue viendo, apagada: explica por que ese
   deportista esta en los grupos en los que este. */
.esc-alumno.es-anulada {
    opacity: .5;
}

.esc-alumno.es-anulada .esc-alumno__nombre,
.esc-alumno.es-anulada .esc-alumno__apellidos {
    text-decoration: line-through;
}

.esc-ins-sinnivel {
    color: var(--esc-text-soft);
    font-size: 11px;
    font-style: italic;
}

.esc-ins-obs {
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-ins-acciones {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

/* Formulario: los dias, como una fila de casillas cuadradas. */
.esc-ins-dias {
    display: flex;
    gap: 5px;
}

.esc-ins-dia {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 5px 0;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FFF;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.esc-ins-dia:hover {
    border-color: var(--esc-accent);
}

/* El :has marca el dia entero, no solo la casilla: el objetivo de pulsar es
   el recuadro. */
.esc-ins-dia:has(input:checked) {
    border-color: var(--esc-accent);
    background: #E6F4FC;
    color: var(--esc-title);
}

.esc-ins-dia input {
    margin: 0;
    cursor: pointer;
}

.esc-ins-form .form-control {
    width: 100%;
}

/* Elegir deportista: por nombre o por email. */
.esc-ins-modos {
    margin-bottom: 6px;
}

.esc-ins-email {
    display: flex;
    gap: 6px;
}

.esc-ins-email .form-control {
    flex: 1;
    min-width: 0;
}

/* El aviso del hallazgo por email reutiliza los colores de la mini-matriz, y
   ahi es una linea suelta; aqui necesita separarse del campo. */
.esc-ins-form .esc-minimatriz__aviso {
    margin-top: 6px;
}



/* =============================================================================
   8. PISTAS Y HORARIOS

   Dos bloques: los banners de las pistas que el club tiene en Instalaciones, y
   el calendario semanal de la pista abierta.

   El calendario es un CAJON LATERAL fijo por la derecha, no un panel debajo:
   debajo obligaba a bajar la pagina en cada banner y a subir otra vez para
   cambiar de pista. Al lado, la lista se queda quieta y solo cambia el cajon.

   Dentro del cajon rueda solo la rejilla: la barra de configuracion y la de
   guardar van fijas arriba y abajo, que es lo que evita el scroll de ida y
   vuelta.

   Las casillas no llevan check: la casilla entera es el control y se pulsa o
   se arrastra el raton por encima para pintar un rectangulo de horas de una
   pasada (ver habilitarArrastre() en calendario_slots.js). Como la rejilla ya es una caja con scroll, la burbuja de ayuda de
   cada casilla se recortaria contra su borde: por eso va en position:fixed con
   las coordenadas que le pone colocarAyuda() en calendario_slots.js, igual que
   en la mini-matriz de grupos.
============================================================================= */

/* Banners de las pistas --------------------------------------------------- */

.esc-pistas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    align-items: start;
    margin-bottom: 20px;
}

/* Nombre de la instalacion: rompe la cuadricula y abre grupo de pistas. Un
   club con varias sedes llama "Pista 1" a una de cada una, asi que sin este
   encabezado no se sabria de cual se habla. */
.esc-pistas__instalacion {
    display: flex;
    align-items: center;
    gap: 7px;
    grid-column: 1 / -1;
    margin: 6px 0 -4px;
    color: var(--esc-title);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.esc-pistas__instalacion .ph {
    color: var(--esc-accent);
    font-size: 15px;
}

.esc-pista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--esc-surface);
    border: 1px solid var(--esc-border);
    /* La franja de color de la izquierda es el estado del horario: verde si la
       pista ya se puede usar para clases, ambar si todavia no. */
    border-left: 3px solid var(--esc-green);
    border-radius: var(--esc-radius);
    box-shadow: var(--esc-shadow);
}

.esc-pista.es-sin-horario {
    border-left-color: var(--esc-warning);
}

/* La pista cuyo calendario esta abierto debajo. */
.esc-pista.is-abierta {
    border-color: var(--esc-accent);
    box-shadow: 0 0 0 2px rgba(15, 157, 234, .18), var(--esc-shadow);
}

.esc-pista__cab {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.esc-pista__nombre {
    color: var(--esc-title);
    font-size: 14px;
    font-weight: 700;
}

.esc-pista__estado {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: var(--esc-radius-label);
    background: #FDF3E0;
    color: #8A5A00;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.esc-pista__estado.es-ok {
    background: #EDF5E4;
    color: #4A7A1E;
}

/* Sin horario es una ALERTA y no un dato mas: la pista no sale ni en la matriz
   ni al dar dias a un grupo, o sea que para la escuela no existe. Lleva el
   triangulo parpadeante del modulo, el mismo de los descuadres de Grupos. */
.esc-pista__estado.es-alerta {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    border: 1px solid var(--esc-warning-border);
    background: #FDF3E0;
    color: #8A5A00;
}

.esc-pista__estado.es-alerta .esc-triangulo {
    font-size: 12px;
}

/* Fuera de las clases a proposito: ni verde ni alerta, gris y callada. */
.esc-pista__estado.es-fuera {
    background: #ECEFF2;
    color: #6B7683;
}

/* Y la tarjeta entera apagada, para distinguirla de un vistazo de las que si
   son de la escuela. */
/* Una pista fuera de las clases se APAGA ENTERA.

   No basta con bajarle la opacidad: la ficha esta llena de distintivos de
   color —el terreno en teja o en verde, la modalidad, el estado— y esos
   colores siguen llamando igual. Con grayscale se van todos de una vez, sin
   tener que ir apagando cada chapa por su cuenta y sin que se escape la
   proxima que se añada.

   El fondo baja a un gris de verdad y no a un blanco sucio: puesta al lado de
   una pista activa, la diferencia tiene que verse desde lejos. */
.esc-pista.es-no-clases {
    border-color: #AEB8C2;
    border-left-color: #8A96A3;
    background: #DCE1E6;
    filter: grayscale(1);
}

.esc-pista.es-no-clases .esc-pista__nombre,
.esc-pista.es-no-clases .esc-rasgo,
.esc-pista.es-no-clases .esc-pista__modalidad {
    opacity: .78;
}

.esc-pista.es-no-clases .esc-pista__rasgos.es-principales {
    background: #CFD6DD;
}

/* El boton tambien. En blanco parecia el unico elemento vivo de la tarjeta y
   se leia como la accion principal de la pantalla, cuando lo que dice es
   justo que esta pista no cuenta. */
.esc-pista.es-no-clases .esc-pista__calendario {
    border-color: #6B7684;
    background: #6B7684;
    color: #FFF;
}

.esc-pista.es-no-clases .esc-pista__calendario:hover {
    background: #5A646F;
    color: #FFF;
}

/* Para que modalidad vale la pista -----------------------------------------

   Va sola, en su linea y con mas peso que el resto de la ficha: es lo que
   decide si la clase puede darse en esa pista. */

.esc-pista__modalidad {
    display: flex;
}

.esc-modalidad {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--esc-radius-label);
    background: var(--esc-navy-label);
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-modalidad .ph {
    font-size: 14px;
}

/* Sin rellenar en Instalaciones. En ambar y no en gris: no es un dato que
   sobre, es uno que falta. */
.esc-modalidad.es-sin-dato {
    background: #FDF3E0;
    border: 1px solid #F0D9A8;
    color: #8A5A00;
    font-weight: 600;
    text-transform: none;
}

/* Caracteristicas de la ficha de la pista, en chapas ---------------------- */

/* Cuantas pistas se ponen a disposicion de la escuela, de cuantas tiene el
   club. Va en linea con la "i" que lo explica y, si hay filtros puestos, con
   la cuenta de las que se estan viendo. */
.esc-pistas__cuenta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 7px;
    color: var(--esc-text-soft);
    font-size: 12px;
    white-space: nowrap;
}

/* El quebrado es el dato, no el rotulo: se lee antes que el texto que lleva
   al lado. */
.esc-pistas__cuenta-num {
    color: var(--esc-text);
    font-size: 14px;
    font-weight: 700;
}

.esc-pistas__cuenta-filtro {
    padding-left: 8px;
    border-left: 1px solid var(--esc-border);
    opacity: .85;
}

/* Pegada al borde derecho de la barra, la burbuja se saldria de pantalla. */
.esc-pistas__cuenta .esc-info::after {
    left: auto;
    right: 0;
    transform: none;
}

.esc-pista__caracteristicas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.esc-pista__rasgos {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* La primera fila, la que dice si la pista sirve: suelo, si esta al aire libre
   y como se ilumina. Va sobre una banda que cruza la tarjeta de lado a lado
   —los margenes negativos se comen el relleno de la tarjeta— para que se lea
   antes que el resto sin tener que buscarla. */
.esc-pista__rasgos.es-principales {
    margin: 0 -14px;
    padding: 8px 14px;
    border-top: 1px solid #E3E9EF;
    border-bottom: 1px solid #E3E9EF;
    background: #F2F6F9;
}

.esc-rasgo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 7px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius-label);
    background: #F7F9FA;
    color: var(--esc-text);
    font-size: 11px;
}

.esc-rasgo > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-rasgo .ph {
    color: var(--esc-text-soft);
    font-size: 13px;
}

/* El terreno es la superficie de verdad: se le da algo mas de peso que a la
   marca o al aforo, que van detras a titulo informativo. */
.esc-rasgo--terreno {
    font-weight: 600;
}

/* La muestra del color del maestro (tipo_superficie.color). El color va aqui y
   en el borde, nunca en el fondo: los del maestro son saturados y el texto del
   modulo no se leeria encima. */
.esc-rasgo__color {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Las de si o no solo se pintan cuando la pista LAS TIENE, asi que se marcan
   en verde: son una ventaja de la pista, no un dato mas. */
.esc-rasgo.es-si {
    border-color: #CFE3B8;
    background: #F2F8EA;
    color: #4A7A1E;
}

.esc-rasgo.es-si .ph {
    color: #6FA82F;
}

.esc-pista__rasgos-vacio {
    color: var(--esc-text-soft);
    font-size: 11px;
    font-style: italic;
}

.esc-pista__pie {
    display: flex;
    margin-top: auto;
}

/* El boton dice el estado por su color: verde si el horario esta puesto, rojo
   si falta y blanco si la pista esta fuera de las clases, que entonces no
   falta nada. */
.esc-pista__calendario.es-listo {
    border-color: var(--esc-green-border);
    background: var(--esc-green);
    color: #FFF;
}

.esc-pista__calendario.es-falta {
    border-color: #C0392B;
    background: var(--esc-danger);
    color: #FFF;
}

/* Gris oscuro, no blanco: lo que hace este boton es volver a meter la pista en
   las clases, no es la accion de siempre. */
.esc-pista__calendario.es-fuera {
    border-color: #6B7684;
    background: #6B7684;
    color: #FFF;
    font-weight: 400;
}

.esc-pista__calendario.es-listo:hover,
.esc-pista__calendario.es-falta:hover {
    filter: brightness(1.07);
    color: #FFF;
}

/* El icono, blanco en los tres estados. Los tres fondos son oscuros —verde,
   rojo y gris— y el icono heredaba un color propio que sobre ninguno de ellos
   se veia. */
.esc-pista__calendario .ph {
    color: #FFF;
}

/* El interruptor de si la pista es de la escuela, arriba del cajon. */
.esc-horario__destino {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--esc-border-soft);
    background: #FAFBFC;
}

.esc-horario__destino .esc-ayuda {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
}

.esc-pista__calendario {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
}

.esc-pista__calendario .ph {
    color: var(--esc-accent);
    font-size: 16px;
}

/* Calendario semanal de una pista: cajon lateral -------------------------- */

.esc-horario {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: 760px;
    max-width: 96vw;
    background: var(--esc-surface);
    box-shadow: -8px 0 26px rgba(26, 43, 60, .35);
}

/* Cabecera oscura, la misma que la columna de alumnos de la matriz: es lo que
   hace que los dos cajones del modulo se lean como el mismo elemento aunque el
   cuerpo de este sea claro. */
.esc-horario__cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    background: var(--esc-navy-head);
    color: #E7ECF2;
}

.esc-horario__cab .ph {
    font-size: 16px;
    opacity: .8;
}

.esc-horario__titulo {
    margin: 0;
    overflow: hidden;
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.esc-horario__cerrar {
    margin-left: auto;
    padding: 2px 7px;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    color: #E7ECF2;
    cursor: pointer;
}

.esc-horario__cerrar:hover {
    background: rgba(255, 255, 255, .18);
}

/* Con el cajon abierto el contenido deja sitio para no quedarse debajo. Mismo
   recurso que body.esc-con-cajon en la matriz. */
body.esc-con-horario .app-content .container {
    padding-right: 790px;
}

@media (max-width: 1500px) {
    /* Ya no cabe la lista en varias columnas al lado del cajon: se deja que el
       cajon se superponga y la lista siga entera debajo. */
    body.esc-con-horario .app-content .container {
        padding-right: 15px;
    }
}

.esc-horario__config {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--esc-border);
    background: #F7F9FA;
}

.esc-horario__campo {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.esc-horario__campo label {
    margin: 0;
    color: var(--esc-title);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* css/styles.css hace flotar los controles de formulario de la plataforma;
   dentro de esta barra hay que anularlo o las columnas colapsan a ancho 0. */
.esc-horario__campo .form-control {
    float: none;
    width: auto;
    min-width: 150px;
}

.esc-horario__resumen {
    margin-left: auto;
    padding: 6px 10px;
    border-radius: var(--esc-radius);
    background: #F4F6F7;
    color: var(--esc-text-soft);
    font-size: 12px;
}

.esc-horario__resumen.es-sucio {
    background: #FDF3E0;
    color: #8A5A00;
}

.esc-horario__resumen strong {
    color: var(--esc-title);
}

.esc-horario__pendiente {
    font-weight: 700;
}

/* La rejilla: horas en filas, los siete dias en columnas ------------------ */

/* La unica parte del cajon con scroll. flex:1 le da todo el alto que sobra
   entre la barra de arriba y la de abajo, y min-height:0 es obligatorio: sin
   el, un hijo de flex no encoge por debajo de su contenido y las 56 filas
   empujarian la barra de guardar fuera de la pantalla. */
.esc-horario__rejilla {
    flex: 1;
    min-height: 0;
    /* Sin relleno arriba: la cabecera de dias se pega al borde de esta caja
       (position:sticky) y con relleno superior quedaria un hueco por el que se
       verian pasar las filas por encima de ella. El aire de arriba lo pone el
       margen de la tabla, que si puede irse con el scroll. */
    padding: 0 14px 14px;
    overflow: auto;
}

.esc-horario__tabla {
    display: grid;
    grid-template-columns: var(--esc-cols-horario);
    gap: 1px;
    margin-top: 14px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: var(--esc-border-soft);
    /* Sin recorte: las burbujas de ayuda de las casillas salen de la rejilla. */
    overflow: visible;
}

/* La cabecera se queda pegada arriba al rodar la rejilla: con paso de 15
   minutos son 56 filas, y sin ella no se sabria en que dia se esta marcando.
   Son celdas de un grid, asi que sticky funciona sobre cada una. */
.esc-horario__esquina,
.esc-horario__dia {
    position: sticky;
    top: 0;
    z-index: 2;
}

.esc-horario__esquina {
    background: var(--esc-navy-head);
}

/* Cabecera de dia y de hora: son BOTONES, porque pulsarlas abre o cierra la
   columna o la fila entera.

   Con paso de 15 minutos un dia son 56 casillas, y marcarlas de una en una no
   es trabajo de nadie.

   Se llaman __dia y no __cab: __cab es la cabecera oscura del cajon, y con el
   mismo nombre esta regla se la comia —se la ponia en columna y centrada, con
   el aspa debajo del titulo— ademas de dejar el boton del dia sin forma de
   distinguirse de ella al buscarlo en el DOM. */

.esc-horario__dia,
.esc-horario__hora {
    padding: 0;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.esc-horario__dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 6px 2px;
    background: var(--esc-navy-head);
    color: #FFF;
}

.esc-horario__dia:hover {
    background: var(--esc-navy-dark);
}

.esc-horario__dia.es-finde {
    background: #3A4160;
}

.esc-horario__dia-abrev {
    font-size: 12px;
    font-weight: 700;
}

.esc-horario__dia-nombre {
    font-size: 9px;
    letter-spacing: .3px;
    opacity: .75;
    text-transform: uppercase;
}

.esc-horario__hora {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F4F6F7;
    color: var(--esc-title);
    font-size: 10px;
    font-weight: 700;
}

.esc-horario__hora:hover {
    background: #E6EDF2;
    color: var(--esc-accent);
}

.esc-horario__celda {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0;
    border: 0;
    background: #FFF;
    color: var(--esc-accent);
    font: inherit;
    cursor: help;
}

/* Las editables son la casilla entera, sin check dentro: se pulsan o se
   arrastra el raton por encima. Sin seleccion de texto, que al arrastrar
   pintaria de azul media rejilla. */
.esc-horario__celda.es-editable {
    cursor: pointer;
    user-select: none;
}

.esc-horario__celda.es-editable:hover {
    background: #EDF4F9;
    box-shadow: inset 0 0 0 1px var(--esc-accent);
}

.esc-horario__celda.es-editable:focus-visible {
    outline: 2px solid var(--esc-accent);
    outline-offset: -2px;
}

/* La marca de abierta. Un fondo azul y ya esta no distingue bien una casilla
   abierta de una que solo tiene el raton encima. */
.esc-horario__celda .ph-check {
    font-size: 13px;
    font-weight: 700;
}

/* Sabado y domingo, en un tono aparte: la mayoria de escuelas no dan clase el
   fin de semana y asi no se confunde una columna vacia con un olvido. */
.esc-horario__celda.es-finde {
    background: #FBFCFD;
}

/* Abierta a clase. */
.esc-horario__celda.es-abierta {
    background: #D5EBF9;
}

.esc-horario__celda.es-abierta:hover {
    background: #C4E2F5;
}

/* Con un grupo dentro. Se puede cerrar como cualquier otra —manda esta
   pantalla—, pero se pinta aparte: en verde mientras siga abierta, con la
   etiqueta del nivel del grupo en lugar del check. */
.esc-horario__celda.es-grupo.es-abierta,
.esc-horario__celda.es-grupo.es-abierta:hover {
    background: #E3F0D4;
}

/* Y en ambar rayado cuando se ha desmarcado: esa hora tenia clase puesta y se
   esta quitando. Sin este aviso, una franja con grupo cerrada por error se ve
   igual que cualquier hueco vacio y nadie lo nota hasta abrir la matriz. */
.esc-horario__celda.es-grupo:not(.es-abierta) {
    background: repeating-linear-gradient(45deg,
        #FDF3E0, #FDF3E0 5px, #F7E6C8 5px, #F7E6C8 10px);
    box-shadow: inset 0 0 0 1px #E9C67A;
}

/* La pisa una franja de otra duracion: se edita cambiando el paso. */
.esc-horario__celda.es-bloqueada {
    background: repeating-linear-gradient(45deg,
        #FAFBFC, #FAFBFC 5px, #F1F3F5 5px, #F1F3F5 10px);
    color: var(--esc-text-soft);
}

.esc-horario__celda.es-bloqueada .ph {
    font-size: 12px;
}

/* Lo que recibe el foco es la casilla, no el <span> que lleva el data-ayuda:
   sin esto, quien navega con el teclado no veria de quien es la franja. */
.esc-horario__celda[data-ayuda]:focus-within::after {
    display: block;
}

/* La rejilla tiene scroll y lo que se sale de una caja con scroll se recorta:
   la burbuja va en coordenadas de pantalla, no pegada a la casilla. Se las
   pone colocarAyuda() en calendario_slots.js. */
.esc-horario__celda[data-ayuda]::after,
.esc-horario__dia[data-ayuda]::after,
.esc-horario__hora[data-ayuda]::after {
    position: fixed;
    top: var(--esc-ayuda-y, 0);
    left: var(--esc-ayuda-x, 0);
    width: 230px;
    transform: none;
    /* La burbuja no recibe raton. El arrastre busca la casilla que hay bajo el
       puntero con elementFromPoint, y una burbuja abierta tapa a las vecinas:
       sin esto, arrastrar sobre una casilla con la ayuda desplegada devolvia la
       casilla de la burbuja y el gesto se saltaba las de debajo. */
    pointer-events: none;
}

/* Y mientras se arrastra no se asoma ninguna: una burbuja siguiendo al puntero
   por la rejilla tapa justo lo que se esta pintando. */
.esc-horario__rejilla.is-pintando .esc-horario__celda[data-ayuda]::after {
    display: none;
}

/* Pie: leyenda y acciones ------------------------------------------------- */

.esc-horario__pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--esc-border);
    background: #F7F9FA;
}

.esc-horario__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-horario__leyenda span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.esc-muestra {
    width: 12px;
    height: 12px;
    border: 1px solid var(--esc-border);
    border-radius: 2px;
}

.esc-muestra.es-abierta   { background: #D5EBF9; }
.esc-muestra.es-grupo     { background: #E3F0D4; }
.esc-muestra.es-bloqueada {
    background: repeating-linear-gradient(45deg,
        #FAFBFC, #FAFBFC 4px, #F1F3F5 4px, #F1F3F5 8px);
}

.esc-horario__acciones {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Panel de «Copiar horario a otras pistas» (acción en lote), dentro del cajón. */
.esc-horario__copia {
    border-top: 1px solid var(--esc-border);
    padding: 12px 16px;
    background: #F6F8FA;
}
.esc-horario__copia-cab {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 2px; color: var(--esc-title); font-size: 14px;
}
.esc-horario__copia-cerrar {
    border: 0; background: none; cursor: pointer; color: var(--esc-text-soft); font-size: 16px; line-height: 1;
}
.esc-horario__copia-todas { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 6px; font-weight: 700; font-size: 13px; cursor: pointer; }
.esc-horario__copia-lista {
    max-height: 190px; overflow: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px;
    margin-bottom: 10px; padding: 6px 8px; border: 1px solid var(--esc-border); border-radius: 8px; background: #fff;
}
/* Cada pista en UNA sola línea: si el nombre no cabe, se recorta con «…». */
.esc-horario__copia-item {
    display: block; font-size: 13px; padding: 3px 0; cursor: pointer; color: var(--esc-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.esc-horario__copia-item input { vertical-align: middle; margin-right: 7px; }
.esc-horario__copia-acc { display: flex; justify-content: flex-end; gap: 8px; }

/* La rejilla de siete dias no baja de este ancho: por debajo las casillas se
   quedan en nada y no se acierta a marcarlas. El scroll horizontal ya lo tiene
   .esc-horario__rejilla, asi que la tabla se desplaza dentro del cajon. */
.esc-horario__tabla {
    min-width: 600px;
}

/* En un cajon estrecho el resumen y los botones ya no pueden ir empujados a la
   derecha: caen debajo, alineados con el resto. */
@media (max-width: 900px) {
    .esc-horario__resumen,
    .esc-horario__acciones {
        margin-left: 0;
    }
}

/* Alumnos ------------------------------------------------------------------ */

/* Doce columnas no caben en una pantalla estrecha. Antes que aplastar las
   celdas hasta que no se lea ninguna, la tabla se desplaza en horizontal. */
.esc-tabla-ancha {
    overflow-x: auto;
    /* Un contenedor que desplaza en horizontal recorta TAMBIEN en vertical
       (asi lo resuelve la cascada: si un eje deja de ser visible, el otro pasa
       a auto), y la burbuja de ayuda de las ultimas filas sale por debajo de
       la tabla. El hueco se lo damos por dentro, con padding, y se lo quitamos
       por fuera con el margen negativo: la burbuja tiene donde pintarse y la
       pagina no gana un claro de cien pixeles. */
    padding-bottom: 120px;
    margin-bottom: -114px;
}

/* La rejilla de .esc-alumnos nacio dentro del cajon oscuro. Aqui vive sobre el
   fondo claro de la pagina y a lo ancho de toda ella: hay que separarle las
   filas y darle un ancho minimo por debajo del cual se desplaza en vez de
   encogerse. */
.esc-alumnos--clases {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 1180px;
}

/* La cabecera, delimitada. Suelta sobre el fondo se leia como texto flotando
   encima de la lista y no como la cabecera de una tabla. El relleno lateral es
   1px menor que el de las filas para compensar su borde, y asi cada titulo cae
   justo sobre su columna. */
.esc-alumnos--clases .esc-alumnos__cab {
    margin-bottom: 3px;
    padding: 6px 7px 7px;
    border: 1px solid #C9D3DD;
    border-radius: var(--esc-radius);
    background: #FFF;
}

/* La fila por la que va el raton: en una tabla larga y de muchas columnas, el
   ojo se va de linea al cruzar de un lado a otro. */
.esc-alumnos--clases .esc-alumno:hover {
    border-color: #C2D2DF;
    background: #EDF3F8;
}

.esc-alumno__sexo {
    color: var(--esc-text-soft);
    font-weight: 700;
    text-align: center;
}

/* La cabecera ordenable se aclara al pasar por encima porque en el cajon el
   fondo es oscuro; sobre blanco hay que oscurecerla. */
.esc-alumnos--clases .esc-alumnos__orden:hover,
.esc-alumnos--clases .esc-alumnos__orden.is-activa {
    color: var(--esc-title);
}

/* Lo mismo con las iniciales de los dias: su fondo es un blanco translucido
   pensado para el cajon, que sobre la pagina no se ve. */
.esc-alumnos--clases .esc-diachip {
    background: var(--esc-border-soft);
    color: var(--esc-text-soft);
}

/* Verde = ese dia tiene clase. Es el mismo verde que usa la columna lateral
   para los dias ya cubiertos, para que signifiquen lo mismo en las dos
   pantallas. */
.esc-alumnos--clases .esc-diachip.es-cubierto,
.esc-alumnos--clases .esc-diachip.es-concedido {
    background: #6FA82F;
    color: #FFF;
}

/* Quien no esta en ningun grupo, señalado en el margen: es el que hay que
   colocar, y con la lista entera delante se pierde. */
.esc-alumno.es-sin-clase {
    box-shadow: inset 3px 0 0 var(--esc-danger);
}

/* Las clases que tiene: una chapa por grupo, y las que no quepan en la linea
   bajan a la siguiente. Recortarlas escondería grupos suyos. */
.esc-alumno__clases {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

/* `.esc-alumno > span` recorta todas las celdas para que un dato largo no
   descuadre la rejilla. Las que llevan ayuda tienen que dejarla salir: la
   burbuja se pinta fuera de la celda y, recortada, no se ve nada. Mismo
   remedio que ya usa .esc-alumno__info en la tabla del grupo. */
.esc-alumnos--clases .esc-alumno > .esc-alumno__nivel,
.esc-alumnos--clases .esc-alumno > .esc-alumno__diascelda,
.esc-alumnos--clases .esc-alumno > .esc-alumno__prefdias,
.esc-alumnos--clases .esc-alumno > .esc-alumno__clases,
.esc-alumnos--clases .esc-alumno > .esc-alumno__cifra {
    overflow: visible;
}

.esc-alumno__clases .esc-codigo {
    margin-right: 0;
}

/* Cada chapa lleva a su grupo, que es donde se le puede cambiar algo. */
.esc-clase-chapa {
    color: #FFF;
    cursor: pointer;
    text-decoration: none;
}

.esc-clase-chapa:hover,
.esc-clase-chapa:focus-visible {
    color: #FFF;
    outline: 1px solid rgba(0, 0, 0, .3);
    outline-offset: 1px;
    text-decoration: none;
}

/* En el grupo pero sin ningun dia marcado: ocupa plaza y no va a clase. Va
   hueca, no tachada: el grupo es real, lo que falta son los dias. */
.esc-clase-chapa.es-sin-dias {
    background: transparent !important;
    border: 1px dashed var(--esc-danger);
    color: var(--esc-danger);
    text-shadow: none;
}

/* Cifras de la parte derecha (dias, horas). Centradas bajo su titulo y con
   cursor de ayuda: el desglose esta en la burbuja. */
.esc-alumno__cifra {
    display: flex;
    justify-content: center;
}

.esc-cifra {
    cursor: help;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.esc-cifra.es-cero {
    color: var(--esc-danger);
}

.esc-cifra.es-fuerte {
    color: var(--esc-title);
}

/* Dato que todavia no se puede calcular. Apagado y en cursiva, para que no se
   lea como un cero. */
.esc-cifra.es-pendiente {
    color: var(--esc-text-soft);
    cursor: help;
    font-style: italic;
    font-weight: 400;
}

.esc-alu-mas {
    margin-top: 10px;
}

/* Inscripciones: pedido frente a entregado ---------------------------------- */

/* Banda que separa las dos mitades de la tabla. Sin ella, el nivel que pidio y
   el del grupo donde acabo son dos chapas iguales una al lado de la otra. */
/* Cabecera ordenable.
   Sin estas reglas es un <button> pelado, es decir, una caja gris con borde y
   texto de 13px en medio de una cabecera de 9px en mayusculas: cada columna
   con un aspecto distinto segun se pudiera ordenar por ella o no. Hereda todo
   de la cabecera y solo añade el gesto. */
.esc-orden {
    display: inline-flex;
    max-width: 100%;
    padding: 0;
    gap: 4px;
    align-items: center;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.esc-orden:hover,
.esc-orden:focus-visible {
    color: var(--esc-title);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

/* Por la que se esta ordenando: en oscuro y con su flecha. */
.esc-orden.is-activa {
    color: var(--esc-title);
}

.esc-orden .ph {
    font-size: 11px;
}

/* El gap tiene que ser el mismo que el de .esc-alumnos__cab y .esc-alumno: con
   gap 0 las pistas de la rejilla caen en otro sitio y las bandas quedaban
   desplazadas respecto a las columnas que titulan. Una banda que ocupa varias
   columnas cubre tambien los huecos de en medio, asi que no se parte. */
.esc-ins-bandas {
    display: grid;
    grid-template-columns: var(--esc-cols-alumno);
    gap: 7px;
    padding: 0 7px;
    border-bottom: 1px solid #E3E9EF;
}

.esc-ins-banda {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Dos colores y no uno gris: lo que pide y lo que tiene son las dos mitades de
   la pantalla, y el ambar es ya el color de "esto lo pidio el deportista" en el
   resto del modulo. */
.esc-ins-banda.es-pide {
    background: #FBEDD8;
    color: #8A5A00;
}

.esc-ins-banda.es-tiene {
    background: #E1EEF7;
    color: #1E5E86;
}

/* La banda vacia de la izquierda lleva dentro el interruptor de la informacion
   ampliada: esta justo encima de las columnas que gobierna. El texto vuelve a
   caja baja, que las bandas van en mayusculas y un interruptor asi no se lee. */
.esc-ins-banda.es-vacia {
    display: flex;
    align-items: center;
    padding-top: 1px;
    padding-bottom: 1px;
}

.esc-ins-banda.es-vacia .esc-ins-ampliada {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* La ultima columna no es ni lo que pide ni lo que tiene: es el boton de
   colocarlo. Sin fondo quedaba un hueco blanco al final de la banda azul como
   si a esta le faltara un trozo. */
.esc-ins-banda.es-acciones {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EDEFF3;
    color: #8B9BB0;
    font-size: 12px;
}

/* La cabecera entera —las dos bandas de color y los nombres de columna— dentro
   de un recuadro. Sueltas sobre el fondo se leian como dos adornos flotando
   encima de la lista en vez de como la cabecera de una tabla. */
.esc-ins-cabecera {
    margin-bottom: 6px;
    overflow: hidden;
    border: 1px solid #C9D3DD;
    border-radius: var(--esc-radius);
    background: #FFF;
}

/* El recuadro mete 1px por la izquierda; se le descuenta al relleno para que
   los nombres sigan cayendo sobre su columna y no un pixel a la derecha. */
.esc-ins-tabla .esc-alumnos__cab {
    padding: 5px 7px 6px;
}

/* La linea vertical va en la primera columna de cada banda y baja por toda la
   tabla: es lo que hace que las dos mitades se lean como dos bloques. Cada una
   del color de su banda, para que se vea de donde baja. */
.esc-ins-tabla .esc-ins-corte {
    box-shadow: inset 2px 0 0 #D3DAE3;
    padding-left: 8px;
}

.esc-ins-tabla .esc-ins-corte.es-pide {
    box-shadow: inset 2px 0 0 #E7C48C;
}

.esc-ins-tabla .esc-ins-corte.es-tiene {
    box-shadow: inset 2px 0 0 #A9CCE4;
}

.esc-ins-pedidos {
    color: var(--esc-title);
    font-weight: 700;
    text-align: center;
}

/* Los grupos en los que esta, uno detras de otro. */
.esc-ins-grupos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.esc-ins-grupo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 1px 6px 1px 2px;
    border: 1px solid var(--esc-border);
    border-radius: 9px;
    background: #FFF;
    cursor: help;
    font-size: 11px;
}

/* En un grupo de otro nivel del que pidio. No es un error, pero es lo primero
   que se mira al revisar un reparto. */
.esc-ins-grupo.es-otro-nivel {
    border-color: var(--esc-warning-border);
    background: #FEF8EE;
}

/* Un dia que le han dado sin haberlo pedido. */
.esc-diachip.es-nopedido {
    border-color: var(--esc-warning-border);
    background: #FEF3E2;
    color: #8A5A00;
}

/* Modal de meter en un grupo ------------------------------------------------ */

/* Tres columnas: lo que pidio, el grupo que se esta mirando y lo que ya tiene.
   Las de los lados son de consulta y no cambian de ancho; la del medio es donde
   se trabaja, asi que es la que se lleva lo que sobre. */
/* La del medio es donde se trabaja, pero no se lleva todo lo que sobra: la de
   la derecha tiene que caber tres o cuatro tarjetas con dia, hora y pista sin
   recortar nada, asi que crecen las dos y en proporcion. */
.esc-ins-asignar {
    display: grid;
    grid-template-columns: 280px minmax(0, 1.5fr) minmax(340px, 1fr);
    gap: 22px;
    align-items: start;
}

.esc-ins-asignar > * {
    min-width: 0;
}

/* Aqui se decide donde va a entrenar alguien mirando tres cosas a la vez, y
   apretarlas en el ancho de un modal de confirmar las vuelve ilegibles: se le
   da casi toda la pantalla. */
.esc-modal__caja:has(.esc-ins-asignar) {
    max-width: min(1560px, 96vw);
}

/* Modal «Nueva inscripción»: el selector de deportista en columnas pide más
   ancho, así que la caja crece cuando lo contiene. */
.esc-modal__caja:has(.esc-ins-selds) {
    max-width: min(920px, 96vw);
}

/* Listado de deportistas en columnas (nombre, apellidos, edad, email, tel). */
.esc-ins-selds__lista {
    margin-top: 8px;
    max-height: 340px;
    overflow: auto;
    border: 1px solid var(--esc-border);
    border-radius: 8px;
    background: #fff;
}
.esc-ins-selds.es-cargando,
.esc-ins-selds__lista.es-cargando { opacity: .6; }
.esc-ins-selds__fila {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(110px, 1.2fr) 46px minmax(150px, 1.6fr) 104px;
    gap: 10px;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid var(--esc-border-soft);
    font-size: 13px;
    cursor: pointer;
}
.esc-ins-selds__fila:last-child { border-bottom: 0; }
.esc-ins-selds__fila > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esc-ins-selds__fila.es-cab {
    position: sticky; top: 0; z-index: 1;
    background: #F4F7FA; color: var(--esc-text-soft);
    font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
    cursor: default;
}
.esc-ins-selds__fila:not(.es-cab):hover { background: #F6FAFD; }
.esc-ins-selds__fila.es-sel { background: #EAF4FC; box-shadow: inset 3px 0 0 var(--esc-accent); }
.esc-ins-selds__email { color: var(--esc-accent); }
.esc-ins-selds__vacio { padding: 20px 14px; text-align: center; color: var(--esc-text-soft); font-size: 13px; }

/* Con el calendario arriba y tres columnas debajo, el dialogo pide toda la
   altura que haya. En vez de descontar a ojo la cabecera y el pie, la caja se
   estira hasta el alto de la ventana y el cuerpo se queda con lo que sobre:
   asi no hay numero magico que se quede corto al cambiar de pantalla. */
.esc-modal:has(.esc-ins-asignar) {
    padding: 12px;
}

.esc-modal__caja:has(.esc-ins-asignar) {
    display: flex;
    max-height: calc(100vh - 24px);
    flex-direction: column;
}

.esc-modal__caja:has(.esc-ins-asignar) .esc-modal__cuerpo {
    min-height: 0;
    flex: 1;
    padding: 14px 16px;
    overflow-y: auto;
}

/* La cabecera y el pie no se van con el scroll: el boton de cerrar tiene que
   estar siempre donde se le ve. */
.esc-modal__caja:has(.esc-ins-asignar) .esc-modal__cab,
.esc-modal__caja:has(.esc-ins-asignar) .esc-modal__pie {
    flex: none;
}

.esc-modal__caja:has(.esc-ins-asignar) .esc-modal__pie {
    align-items: center;
    padding: 8px 16px;
}

/* El calendario va arriba, cruzando las tres columnas: son siete dias y en el
   ancho de una columna no se leen, y de paso hace de resumen de lo que se esta
   decidiendo debajo. */
.esc-ins-asignar__semana {
    grid-column: 1 / -1;
    margin-bottom: 2px;
}

@media (max-width: 1240px) {
    .esc-ins-asignar {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    /* Lo que tiene asignado pasa debajo, a lo ancho de las dos. */
    .esc-ins-asignar > *:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .esc-ins-asignar {
        grid-template-columns: minmax(0, 1fr);
    }
}

.esc-ins-peticion {
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FAFBFC;
}

.esc-ins-peticion__linea {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
}

.esc-ins-peticion__linea:last-child {
    margin-bottom: 0;
}

.esc-ins-peticion__clave {
    min-width: 62px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

/* La fila por la que va el raton. En una tabla de 40 filas y 10 columnas, el
   ojo se va de linea al cruzar de un lado a otro: esto la sujeta. */
.esc-ins-tabla .esc-alumno:hover {
    border-color: #C2D2DF;
    background: #EDF3F8;
}

/* Las dos columnas que compara cada desajuste, marcadas mientras el filtro
   este encendido. El filtro solo dice "estos no cuadran"; esto dice EN QUE.
   Se marca tambien la cabecera, que es lo que hace que se lean como pareja. */
.esc-ins-tabla [data-col].es-marcada {
    /* outline y no box-shadow: la primera columna de cada banda ya gasta el
       box-shadow en su linea vertical, y se pisarian. */
    background: #FDF1F1;
    outline: 1px solid #EFBAB5;
    outline-offset: -1px;
}

/* En las filas, la banda va de arriba abajo y sin cortes.
   Las filas se tocan, pero cada una lleva 5px de relleno y 1px de borde que la
   celda no ocupaba: teñida celda a celda, la columna salia a rayas. La celda
   se estira y se come esos 6px por arriba y por abajo, asi que la banda de una
   fila enlaza con la de la siguiente. */
.esc-ins-tabla .esc-alumno > [data-col].es-marcada {
    align-self: stretch;
    margin: -6px 0;
    padding: 6px 0;
}

/* Y el contenido se queda donde estaba: al estirar la celda dejaria de estar
   centrado y subiria a lo alto en las filas de dos y tres lineas.

   El :not() no es un adorno: la tira de dias y la lista de grupos son <span>
   con su propio display (grid y flex con wrap). Sin excluirlos, este flex les
   pisaba el suyo y los siete dias dejaban de ocupar un septimo cada uno: se
   apretaban a la izquierda en cuanto se encendia el filtro. */
.esc-ins-tabla .esc-alumno > span[data-col].es-marcada:not(.esc-semana):not(.esc-ins-grupos) {
    display: flex;
    align-items: center;
}

.esc-ins-tabla .esc-alumno > .esc-semana[data-col].es-marcada,
.esc-ins-tabla .esc-alumno > .esc-ins-grupos[data-col].es-marcada {
    align-content: center;
}

/* Las dos que iban centradas lo siguen estando: con flex, text-align ya no
   pinta nada. */
.esc-ins-tabla .esc-alumno > [data-col="diassem"].es-marcada,
.esc-ins-tabla .esc-alumno > [data-col="puestos"].es-marcada {
    justify-content: center;
}

/* Botones de desajuste: se encienden y se apagan, y pueden ir varios ------- */

.esc-desajustes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
}

/* -------------------------------------------------------------------------
   MANDO: varios controles que son la misma pregunta, en una sola caja

   Un borde para todos y una raya entre ellos. Se usa cuando dos o mas
   controles se miran y se usan juntos —los tres filtros de pistas, los tres
   desajustes de Inscripciones—: con su borde cada uno, se leen como acciones
   sin relacion y hay que pararse a decidir cual toca.

   La raya NO es un border de cada hijo, es un hueco de 1px del flex por el que
   se ve el fondo del mando. Asi, cuando un control se esconde —el filtro de
   iluminacion en un club sin esa dato—, su raya se va con el y no queda una
   linea suelta contra el borde.
   ------------------------------------------------------------------------- */

.esc-mando {
    display: inline-flex;
    align-items: stretch;
    gap: 1px;
    border: 1px solid #AEB8C2;
    border-radius: 8px;
    height: 40px;                    /* el alto de un .form-control de la barra */
    background: var(--esc-border);   /* lo que se ve por los huecos: la raya */
    overflow: hidden;                /* redondea las esquinas de los extremos */
}

/* Dentro pierden el suyo: el borde es el del mando. El alto tambien lo pone el
   mando, para que la caja entera mida lo mismo que un control suelto de la
   barra y no sobresalga 2px por arriba y por abajo.

   El ancho pasa a ser el de su contenido: un .form-control vale el 100% de
   donde este, y tres al 100% dentro del mando lo dejaban mas ancho que los tres
   desplegables sueltos, que es justo lo contrario de compactarlos. */
.esc-mando > .form-control,
.esc-mando > .btn {
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Las flechas de "semana anterior / siguiente": el mismo alto que la fecha que
   llevan en medio y el ancho justo del icono. El fondo gris de .btn-default
   partiria el mando en tres franjas, asi que van en blanco y solo se pintan al
   pasar por encima, como los botones de los otros mandos. */
.esc-mando > .esc-mando__flecha {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #FFF;
    color: var(--esc-text-soft);
}

.esc-mando > .esc-mando__flecha:hover,
.esc-mando > .esc-mando__flecha:focus {
    background: #F6F8FA;
    color: var(--esc-text);
}

/* El foco, en dos partes.

   El aro azul del modulo es un box-shadow POR FUERA del control, y el mando
   recorta lo que se salga para poder redondear sus esquinas: puesto en el
   desplegable no se veria. Un outline tampoco vale, porque la plataforma trae
   un `body * { outline: none !important }` que se los come todos.

   Asi que el aro se lo pone el mando entero —su sombra es suya y no la recorta
   nadie— y el desplegable que tiene el foco se marca por dentro, para que quien
   va con el tabulador sepa en cual de los tres esta. */
.esc-mando:focus-within {
    border-color: var(--esc-accent);
    box-shadow: 0 0 0 2px rgba(15, 157, 234, .15);
}

.esc-mando > .form-control:focus {
    box-shadow: inset 0 0 0 2px var(--esc-accent);
}

/* El [hidden] de un filtro sin datos tiene que ganarle al display que traen
   los .form-control de la plataforma. */
.esc-mando > [hidden] {
    display: none;
}

/* Los tres, en un solo mando. Mismo gesto que los tres listados de Tarifas y
   cuotas: un borde para los tres y una raya entre ellos. Son la misma pregunta
   —que no cuadra— mirada por nivel, por dias y por horas, y se encienden a la
   vez; con su propio borde cada uno se leia como un filtro independiente y
   entre los tres se llevaban media barra. */
.esc-desajustes__mando {
    display: flex;
    align-items: stretch;
    border: 1px solid #AEB8C2;
    border-radius: 8px;
    background: #FFF;
    overflow: hidden;
}

/* Dentro del mando pierden el suyo: el borde es el del grupo. */
.esc-desajustes__mando .esc-desajuste {
    border: 0;
    border-right: 1px solid var(--esc-border);
    border-radius: 0;
}

.esc-desajustes__mando .esc-desajuste:last-child {
    border-right: 0;
}

/* Sin borde propio, el fondo es lo unico que dice si esta encendido o solo
   señalado con el raton: por eso el hover tambien lo cambia. */
.esc-desajustes__mando .esc-desajuste:hover {
    background: #F6F8FA;
}

.esc-desajustes__mando .esc-desajuste.is-activa,
.esc-desajustes__mando .esc-desajuste.is-activa:hover {
    background: #FBEDD8;
}

.esc-desajustes__solo {
    margin-left: 4px;
}

/* A dos lineas. Es la frase mas larga de la barra y en una sola se llevaba un
   cuarto de ella para decir algo que se entiende igual partido; ademas empujaba
   "Nueva inscripcion" contra el borde de la pantalla. */
.esc-desajustes__solo .esc-switch__texto {
    max-width: 110px;   /* cabe "Ocultar columnas" y no "...no": parte donde toca */
    line-height: 1.2;
    white-space: normal;
}

.esc-desajuste {
    height: 34px;          /* el alto de los .form-control de al lado */
    padding: 0 10px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FFF;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.esc-desajuste:hover {
    border-color: #B9C5D2;
    color: var(--esc-text);
}

/* Encendido en ambar, que es el color de "esto no cuadra con lo que pidio" en
   toda la pantalla. */
.esc-desajuste.is-activa {
    border-color: var(--esc-warning-border);
    background: #FBEDD8;
    color: #8A5A00;
}

/* Grupo de chicos o de chicas. No se pinta nada cuando es mixto, que es lo
   normal: una chapa en cada fila diciendo "mixto" seria ruido en toda la
   pantalla. */
.esc-grupo-caja__sexo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 50%;
    cursor: help;
    font-size: 9px;
    font-weight: 700;
}

.esc-grupo-caja__sexo.es-masculino {
    background: #DCE9F3;
    color: #2A5C80;
}

.esc-grupo-caja__sexo.es-femenino {
    background: #EFE4F7;
    color: #6A4A8C;
}

/* Entrenadores y profesores -------------------------------------------------- */

.esc-pro-origenes {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

.esc-pro-origen {
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: help;
    font-size: 10px;
    font-weight: 700;
}

/* Tres colores porque son tres cosas distintas: quien puede entrar a la
   plataforma, quien tiene el titulo y a quien ha apuntado el club. */
.esc-pro-origen.es-licencia {
    border-color: #A9CCE4;
    background: #E1EEF7;
    color: #1E5E86;
}

.esc-pro-origen.es-titulacion {
    border-color: #C3D9A8;
    background: #EAF4DF;
    color: #4A7A1E;
}

.esc-pro-origen.es-alta {
    border-color: var(--esc-warning-border);
    background: #FBEDD8;
    color: #8A5A00;
}

.esc-pro-titulos {
    overflow: hidden;
    color: var(--esc-text-soft);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La ficha de quien sale al buscar por email, antes de darlo de alta. */
.esc-pro-ficha {
    margin: 8px 0;
    min-height: 4px;
}

.esc-pro-ficha__nombre {
    color: var(--esc-title);
    font-size: 13px;
    font-weight: 700;
}

.esc-pro-ficha__dato {
    color: var(--esc-text-soft);
    font-size: 12px;
}

.esc-pro-ficha__no {
    padding: 8px 10px;
    border: 1px solid var(--esc-warning-border);
    border-radius: var(--esc-radius);
    background: #FEF8EE;
    color: #8A5A00;
    font-size: 12px;
}

/* La escuela en numeros ----------------------------------------------------- */

/* Hechas a mano y no con una libreria: son seis graficas de barras de las que
   se leen de un vistazo, y meter un motor de graficos entero en el modulo para
   esto seria cargar cien veces su peso en cada pantalla. */
.esc-graficas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.esc-grafica {
    display: flex;
    flex-direction: column;
    padding: 12px 14px 10px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FFF;
}

.esc-grafica__titulo {
    margin: 0 0 10px;
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-grafica__cuerpo {
    flex: 1;
}

.esc-grafica__pie {
    margin: 8px 0 0;
    color: var(--esc-text-soft);
    font-size: 10px;
    line-height: 1.35;
}

/* Barras verticales -------------------------------------------------------- */

.esc-grafica__barras {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    justify-content: space-between;
}

.esc-grafica__col {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    min-width: 0;
}

/* El alto fijo es lo que hace comparables las columnas entre si: sin el, cada
   una se estiraria a lo que le pidiera su contenido. */
.esc-grafica__par {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 84px;
    padding-top: 12px;   /* sitio para el numero que va encima de la barra */
}

.esc-grafica__barra {
    position: relative;
    width: 100%;
    max-width: 16px;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: #7FA9C9;
}

.esc-grafica__barra.es-serie2 {
    background: #2C3348;
}

/* A cero se queda la linea de base: una barra invisible haria pensar que falta
   el dato, y no es lo mismo cero que no saberlo. */
.esc-grafica__barra.es-cero {
    background: var(--esc-border);
}

.esc-grafica__barra .esc-grafica__n {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 700;
}

.esc-grafica__etiqueta {
    overflow: hidden;
    max-width: 100%;
    color: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Barras horizontales ------------------------------------------------------ */

.esc-grafica__filas {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.esc-grafica__fila {
    display: grid;
    grid-template-columns: minmax(0, 96px) minmax(0, 1fr) 28px;
    gap: 8px;
    align-items: center;
    font-size: 11px;
}

.esc-grafica__nombre {
    overflow: hidden;
    color: var(--esc-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-grafica__pista {
    height: 12px;
    border-radius: 6px;
    background: var(--esc-border-soft);
}

.esc-grafica__relleno {
    display: block;
    min-width: 3px;
    height: 100%;
    border-radius: 6px;
    background: #7FA9C9;
}

.esc-grafica__relleno.es-verde { background: var(--esc-green); }
.esc-grafica__relleno.es-ambar { background: var(--esc-warning); }
.esc-grafica__relleno.es-rojo  { background: var(--esc-danger); }
.esc-grafica__relleno.es-gris  { background: #C9D2DA; }

/* La fila entera lleva la ayuda, asi que tiene que poder anclarla. */
.esc-grafica__fila[data-ayuda] {
    cursor: help;
}

.esc-grafica__fila .esc-grafica__n {
    color: var(--esc-title);
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

/* Barra repartida ---------------------------------------------------------- */

.esc-grafica__apilada {
    display: flex;
    overflow: hidden;
    height: 26px;
    border-radius: var(--esc-radius);
    background: var(--esc-border-soft);
}

.esc-grafica__parte {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2px;
}

.esc-grafica__parte .esc-grafica__n {
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
}

.esc-grafica__vacio {
    display: flex;
    align-items: center;
    padding-left: 8px;
    color: var(--esc-text-soft);
    font-size: 11px;
}

/* Anillo ------------------------------------------------------------------- */

.esc-grafica__circular {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.esc-grafica__rueda {
    position: relative;
    width: 132px;
    max-width: 100%;
}

.esc-grafica__anillo {
    display: block;
    width: 100%;
    /* El trazo se dibuja desde las doce y en sentido horario, que es por donde
       se empieza a leer un reloj. */
    transform: rotate(-90deg);
}

.esc-grafica__gajo {
    fill: none;
    stroke: #A9B4C2;
    stroke-width: 16;
}

.esc-grafica__gajo.es-fondo {
    stroke: var(--esc-border-soft);
}

.esc-grafica__gajo.es-azul    { stroke: #4F86B0; }
.esc-grafica__gajo.es-violeta { stroke: #8A6FBF; }
/* El naranja de la plataforma, el mismo de --esc-warning. */
.esc-grafica__gajo.es-naranja { stroke: var(--esc-warning); }
.esc-grafica__gajo.es-verde   { stroke: var(--esc-green); }
.esc-grafica__gajo.es-ambar   { stroke: var(--esc-warning); }
.esc-grafica__gajo.es-rojo    { stroke: var(--esc-danger); }
.esc-grafica__gajo.es-gris    { stroke: #A9B4C2; }

/* El total, en el hueco: es el numero que hace falta para entender los
   porcentajes de alrededor. */
.esc-grafica__centro {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inset: 0;
    pointer-events: none;
}

.esc-grafica__centro-n {
    color: var(--esc-title);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.esc-grafica__centro-txt {
    color: var(--esc-text-soft);
    font-size: 10px;
}

/* Leyenda y tonos ---------------------------------------------------------- */

.esc-grafica__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 8px;
}

.esc-grafica__clave {
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--esc-text-soft);
    font-size: 10px;
}

.esc-grafica__muestra {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #7FA9C9;
}

.esc-grafica__muestra.es-serie2 { background: #2C3348; }
.esc-grafica__muestra.es-azul,
.esc-grafica__parte.es-azul     { background: #4F86B0; }
.esc-grafica__muestra.es-violeta,
.esc-grafica__parte.es-violeta  { background: #8A6FBF; }
.esc-grafica__muestra.es-naranja,
.esc-grafica__parte.es-naranja  { background: var(--esc-warning); }
.esc-grafica__muestra.es-verde,
.esc-grafica__parte.es-verde    { background: var(--esc-green); }
.esc-grafica__muestra.es-ambar,
.esc-grafica__parte.es-ambar    { background: var(--esc-warning); }
.esc-grafica__muestra.es-rojo,
.esc-grafica__parte.es-rojo     { background: var(--esc-danger); }
.esc-grafica__muestra.es-gris,
.esc-grafica__parte.es-gris     { background: #A9B4C2; }

/* Paginador del listado ----------------------------------------------------- */

.esc-paginador {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--esc-border-soft);
}

.esc-paginador__cuenta {
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-paginador__nav {
    display: flex;
    gap: 3px;
    align-items: center;
}

.esc-paginador__btn {
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FFF;
    color: var(--esc-text);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.esc-paginador__btn:hover:not([disabled]) {
    border-color: #B9C5D2;
    background: #F2F6F9;
}

/* La pagina en la que se esta. Va en oscuro y no solo con el borde: con veinte
   botones iguales, un borde de un gris distinto no se encuentra. */
.esc-paginador__btn.is-activa {
    border-color: var(--esc-navy-head);
    background: var(--esc-navy-head);
    color: #FFF;
    cursor: default;
}

.esc-paginador__btn[disabled] {
    opacity: .4;
    cursor: default;
}

.esc-paginador__salto {
    padding: 0 2px;
    color: var(--esc-text-soft);
    font-size: 11px;
}

/* Leyenda de los colores. Vive en el pie del modal, en la linea del boton de
   cerrar, y empuja el boton a su sitio con el margen automatico. */
.esc-ins-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    margin-right: auto;
}

.esc-ins-leyenda__linea {
    display: flex;
    gap: 7px;
    align-items: center;
    color: var(--esc-text-soft);
    font-size: 11px;
    line-height: 1.35;
}

/* La misma leyenda, cuando va debajo del listado en vez de en el pie de un
   modal: ahi no hay boton al que empujar, pero si hace falta separarla. */
.esc-ins-leyenda--pantalla {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--esc-border-soft);
}

/* El cuadradito de color es una chapa de dia sin letra, para que el color sea
   exactamente el mismo que el de los dias y no una copia que se desvie. */
.esc-ins-leyenda .esc-diachip {
    flex: none;
    border: 1px solid transparent;
}

/* Lo anotado a mano al apuntarlo, debajo de la ficha de lo que pidio. */
.esc-ins-observa {
    margin-top: 12px;
}

/* Quien lo va a leer. Va siempre a la vista y no en una burbuja: de eso
   depende lo que se escriba, y se decide antes de escribir. */
.esc-ins-observa__quien {
    margin: 1px 0 4px;
    color: var(--esc-text-soft);
    font-size: 10px;
    line-height: 1.3;
}

.esc-ins-observa__cab {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
}

.esc-ins-observa__cab .esc-label {
    margin: 0;
}

.esc-ins-observa__campo {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    resize: vertical;
}

.esc-ins-observa__botones {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.esc-ins-observa__texto {
    padding: 8px 10px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FAFBFC;
    font-size: 12px;
    line-height: 1.45;
    /* Se respetan los saltos de linea que escribiera quien lo apunto: una nota
       de tres renglones no es lo mismo leida en un parrafo corrido. */
    white-space: pre-line;
}

.esc-ins-observa__texto.es-vacio {
    color: var(--esc-text-soft);
    font-style: italic;
}

.esc-ins-fichagrupo {
    padding: 14px 16px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FFF;
}

.esc-ins-fichagrupo__cab {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--esc-border-soft);
}

.esc-ins-fichagrupo__nombre {
    color: var(--esc-title);
    font-size: 14px;
    font-weight: 700;
}

.esc-ins-fichagrupo__titulo {
    margin: 10px 0 5px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.esc-ins-sesiones {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.esc-ins-sesion {
    display: grid;
    grid-template-columns: 24px 90px 110px minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: var(--esc-radius);
    background: #F7F9FB;
    font-size: 12px;
}

.esc-ins-sesion > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-ins-sesion__dia {
    font-weight: 700;
}

.esc-ins-sesion__pista,
.esc-ins-sesion__monitor {
    color: var(--esc-text-soft);
}

/* Una sesion que se puede marcar y desmarcar. La fila entera es la etiqueta de
   la casilla: el blanco de un checkbox suelto es demasiado pequeño para una
   lista que se repasa entera. */
.esc-ins-sesion.es-elegible {
    grid-template-columns: 16px 24px 90px 110px minmax(0, 1fr) minmax(0, 1.1fr);
    margin: 0;
    cursor: pointer;
    font-weight: 400;
}

.esc-ins-sesion.es-elegible:hover {
    background: #EDF3F8;
}

.esc-ins-sesion.es-elegible input {
    margin: 0;
}

/* Un dia al que NO va. Se deja a la vista, apagado, en vez de esconderlo: el
   grupo entrena ese dia y eso hay que seguir viendolo. */
.esc-ins-sesion.es-fuera {
    opacity: .45;
}

/* Una hora que se pisa con otra clase suya. No se esconde ni se prohibe
   marcarla: se pinta en rojo y se dice con que choca, porque a veces hay que
   dejar la agenda un momento inconsistente para poder ordenarla. */
.esc-ins-sesion.es-choca {
    background: #FDF1F1;
    box-shadow: inset 2px 0 0 var(--esc-danger);
}

.esc-diachip.es-choque {
    border-color: var(--esc-danger);
    background: #FBE3E1;
    color: #9B2C20;
}

.esc-ins-nota.es-choca {
    color: #9B2C20;
    font-weight: 700;
}

.esc-ins-fichagrupo__pista {
    margin: 0 0 6px;
    color: var(--esc-text-soft);
    font-size: 11px;
}

/* El pie de la columna del medio: avisos y el boton que guarda ---------------- */

.esc-ins-acciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    margin-top: 10px;
}

.esc-ins-nota {
    color: var(--esc-text-soft);
    font-size: 11px;
    text-align: center;
}

/* Los avisos del servidor, dentro del propio dialogo: el modal es uno solo y
   abrir el de confirmar encima taparia lo que hay que mirar para decidir. */
.esc-ins-avisos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--esc-warning-border);
    border-radius: var(--esc-radius);
    background: #FEF8EE;
}

.esc-ins-avisos__linea {
    color: #8A5A00;
    font-size: 12px;
}

/* Tercera columna: lo que tiene asignado ------------------------------------ */

.esc-ins-tiene {
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FFF;
}

/* La burbuja de ayuda mide 270px y sale centrada bajo lo que la dispara: en
   una columna estrecha y pegada al borde derecho eso la saca fuera del
   dialogo, tapa la propia tarjeta y le mete barra horizontal al cuerpo. Aqui
   se ancla a la derecha para que crezca hacia dentro. */
.esc-ins-tiene [data-ayuda]::after {
    right: 0;
    left: auto;
    width: 250px;
    transform: none;
}

/* El grupo que se esta mirando en la columna del medio, para saber a cual de
   los suyos corresponde lo que hay abierto. */
.esc-ins-tiene.is-mirando {
    border-color: var(--esc-navy-head, #2C4A63);
    box-shadow: 0 0 0 3px rgba(44, 51, 72, .12);
}

.esc-ins-tiene__cab {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
}

.esc-ins-tiene__nombre {
    flex: 1;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: none;
    color: var(--esc-title);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-ins-tiene__nombre:hover {
    text-decoration: underline;
}

.esc-ins-tiene__pista-col {
    margin: 4px 0 8px;
    color: var(--esc-text-soft);
    font-size: 11px;
    line-height: 1.4;
}

.esc-ins-tiene__ojo {
    margin-bottom: 4px;
    color: #8A5A00;
    font-size: 11px;
}

.esc-ins-tiene .esc-semana {
    margin: 2px 0 5px;
}

.esc-ins-tiene__dia {
    display: grid;
    grid-template-columns: 24px 110px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 2px 0;
    font-size: 12px;
}

.esc-ins-tiene__horas {
    font-weight: 700;
}

.esc-ins-tiene__ninguno {
    color: #9B2C20;
    font-size: 11px;
}

.esc-ins-tiene__pista {
    overflow: hidden;
    color: var(--esc-text-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-ins-tiene__quitar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--esc-border-soft);
    font-size: 12px;
}

/* El titulo de la columna y su marcador, en la misma linea. */
.esc-ins-tiene__cabecera {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.esc-ins-tiene__cabecera .esc-label {
    margin: 0;
}

.esc-ins-tiene__cuenta {
    flex: none;
}

/* Calendario de la semana del deportista ------------------------------------ */

/* Rejilla de verdad y no una lista por dia: lo que hay que ver es si dos clases
   caen a la misma hora, y eso solo se ve con las horas alineadas en vertical.
   Las filas son de 15 minutos y las pone el JavaScript, que es quien sabe a que
   hora empieza y acaba la semana de cada uno. */
.esc-ins-semana {
    display: grid;
    grid-template-columns: 52px repeat(7, minmax(0, 1fr));
    gap: 0 4px;
    padding: 8px 12px 12px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FFF;
}

.esc-ins-semana__esquina {
    grid-column: 1;
    grid-row: 1;
}

.esc-ins-semana__diacab {
    grid-row: 1;
    padding-bottom: 6px;
    color: var(--esc-text-soft);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* El dia que dijo que podia venir. Es la mitad de la decision: un bloque en una
   columna apagada es una clase el dia que dijo que NO podia. */
.esc-ins-semana__diacab.es-pedido {
    color: var(--esc-title);
}

.esc-ins-semana__diacab.es-finde {
    font-weight: 400;
}

.esc-ins-semana__col {
    border-radius: 3px;
    background: #FAFBFC;
}

.esc-ins-semana__col.es-pedido {
    background: #F2F7EC;
}

.esc-ins-semana__hora {
    align-self: start;
    margin-top: -6px;
    color: var(--esc-text-soft);
    font-size: 10px;
    text-align: right;
}

.esc-ins-semana__linea {
    align-self: start;
    height: 0;
    border-top: 1px dashed var(--esc-border-soft);
}

/* El corte de las horas sin nada. Va marcado y no en blanco: una rejilla que
   salta de las 11 a las 17 sin decirlo se lee mal. */
.esc-ins-semana__corte {
    align-self: center;
    height: 0;
    margin: 0 -4px;
    border-top: 2px dotted var(--esc-border);
}

.esc-ins-semana__bloque {
    z-index: 1;
    overflow: hidden;
    padding: 2px 5px;
    border: 1px solid var(--esc-border);
    border-left: 3px solid #8B9BB0;
    border-radius: 3px;
    background: #FFF;
    box-shadow: var(--esc-shadow);
    font-size: 10px;
    line-height: 1.25;
}

.esc-ins-semana__horas {
    display: block;
    color: var(--esc-text-soft);
}

.esc-ins-semana__grupo {
    display: block;
    overflow: hidden;
    color: var(--esc-title);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lo marcado arriba y todavia sin guardar: en hueco, para distinguir lo que
   tiene de lo que le estas poniendo. */
.esc-ins-semana__bloque.es-nuevo {
    border-style: dashed;
    border-color: #5CA34A;
    background: #F1F8ED;
}

/* Dos clases a la misma hora. Aqui el color no basta: va tambien escrito
   debajo, en la lista de alertas. */
.esc-ins-semana__bloque.es-choca {
    border-color: var(--esc-danger);
    border-left-color: var(--esc-danger) !important;
    background: #FBE3E1;
}

.esc-ins-semana__alertas {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--esc-danger);
    border-radius: var(--esc-radius);
    background: #FDF1F1;
}

.esc-ins-semana__alerta {
    color: #9B2C20;
    font-size: 12px;
    font-weight: 700;
}

/* La semana entera, siempre los siete dias --------------------------------- */

/* Enseñar solo los dias marcados obliga a leer cada celda. Con los siete fijos,
   cada dia cae siempre en la misma columna y la tabla se lee en vertical sin
   leer ninguna letra. */
.esc-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.esc-semana__dia {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 2px 0;
    border: 1px solid var(--esc-border-soft);
    border-radius: 3px;
    background: #FAFBFC;
    color: #C3CDDA;
    cursor: help;
    font-size: 10px;
    font-weight: 700;
}

.esc-semana__dia.es-on {
    border-color: #9CC97A;
    background: #EAF4DF;
    color: #4A7A1E;
}

/* El grupo entrena ese dia y el alumno NO va. No es lo mismo que un dia en el
   que el grupo no entrena, y con la casilla apagada a secas se confundian: va
   tachado para que se vea que ahi hay clase y que la esta dejando pasar. */
.esc-semana__dia.es-novoy {
    border-style: dashed;
    border-color: #C3CDDA;
    background: #FFF;
    color: #A9B4C2;
    text-decoration: line-through;
}

/* Va ese dia pero no lo habia pedido. */
.esc-semana__dia.es-on.es-nopedido {
    border-color: var(--esc-warning-border);
    background: #FEF3E2;
    color: #8A5A00;
}

/* Circulo de pago, aqui es un boton ---------------------------------------- */

.esc-ins-pago {
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .12);
    cursor: pointer;
}

.esc-ins-pago:hover,
.esc-ins-pago:focus-visible {
    box-shadow: 0 0 0 2px rgba(15, 157, 234, .35);
}

/* Cargos del deportista ---------------------------------------------------- */

.esc-ins-cargos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
}

.esc-ins-cargo {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 84px 88px;
    gap: 8px;
    align-items: center;
    padding: 5px 8px;
    border-radius: var(--esc-radius);
    background: #F7F9FB;
    font-size: 12px;
}

.esc-ins-cargo.es-cab {
    background: var(--esc-navy-head);
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.esc-ins-importe {
    font-weight: 700;
    text-align: right;
}

.esc-ins-estado {
    border-radius: 9px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.esc-ins-estado.es-pendiente { background: var(--esc-danger); color: #FFF; }
.esc-ins-estado.es-facturado { background: var(--esc-info);   color: #FFF; }
.esc-ins-estado.es-pagado    { background: var(--esc-green);  color: #FFF; }
.esc-ins-estado.es-anulado   { background: var(--esc-border); color: var(--esc-text-soft); }

.esc-ins-debe {
    color: var(--esc-danger);
    font-weight: 700;
}

/* =========================================================================
   TARIFAS Y CUOTAS

   La tabla del tarifario. Es una rejilla y no un <table> porque cada fila
   lleva dos alturas en varias columnas (el nombre con su tipo de clase, la
   categoria con los años que se lleva), y eso en una celda de tabla obliga a
   pelearse con el alto de linea.
   ========================================================================= */

.esc-tar-fila {
    display: grid;
    grid-template-columns: 1.4fr 1.9fr .8fr .9fr 1.1fr .9fr 1.4fr .6fr .8fr;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--esc-border);
    background: #fff;
    font-size: 13px;
}

.esc-tar-fila:not(.esc-tar-fila--cabecera):hover {
    background: #F6F8FA;
}

/* La cabecera va en su propia caja, como la de Inscripciones: sin borde la
   tabla empieza en el aire. */
.esc-tar-fila--cabecera {
    border: 1px solid var(--esc-border);
    border-radius: 6px 6px 0 0;
    background: #F1F4F7;
    color: var(--esc-text-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* Retirada: sigue ahi, se lee, pero no compite con las que estan en uso. */
.esc-tar-fila.es-retirada {
    opacity: .55;
    background: #FAFBFC;
}

.esc-tar-fila > span {
    min-width: 0;
}

/* Las columnas de dos alturas: el dato arriba y su matiz debajo. */
.esc-tar-quien,
.esc-tar-edad,
.esc-tar-mes {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.esc-tar-quien small,
.esc-tar-edad small,
.esc-tar-mes small {
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-tar-edad strong {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* El precio y la cuota son los dos numeros que se vienen a mirar: se alinean
   a la derecha para poder compararlos de un vistazo en vertical. */
.esc-tar-precio,
.esc-tar-mes,
.esc-tar-alumnos {
    text-align: right;
}

.esc-tar-mes strong {
    color: var(--esc-text);
    font-size: 15px;
}

.esc-tar-precio {
    font-size: 14px;
    font-weight: 600;
}

.esc-tar-precio.es-vacio {
    color: var(--esc-text-soft);
    font-weight: 400;
}

.esc-tar-pago {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.esc-tar-acciones {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

/* Chapas: la sigla de la categoria y los avisos de la fila. */
/* LA CHAPA DEL MODULO

   Faltaba la regla base: solo estaban los modificadores, asi que una .esc-chapa
   a secas salia como texto pelado —los contadores de las bandas del tarifario,
   el "Retirada" de una tarifa, el "Por defecto" de un tipo—. Es el mismo boton
   pequeño que ya usan el estado de una pista y las etiquetas de los grupos:
   fondo en tinte claro, letra del mismo tono en oscuro y 10px en negrita. */
.esc-chapa {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: var(--esc-radius-label);
    background: #EDF1F5;
    color: #5A6675;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* Retirado o de baja: dicho, pero sin peso. */
.esc-chapa--gris {
    background: #E4E8ED;
    color: #7A8290;
    font-weight: 400;
}

.esc-chapa--sigla {
    background: #EDF1F5;
    color: var(--esc-text-soft);
}

.esc-chapa--aviso {
    background: rgba(246, 159, 0, .16);
    color: #A56A00;
}

/* Las formas de pago, cada una de su color, para reconocerlas sin leerlas. */
.esc-chapa--remesa        { background: rgba(36, 148, 64, .14);  color: #1C7333; }
.esc-chapa--tpv           { background: rgba(37, 110, 190, .14); color: #205290; }
.esc-chapa--transferencia { background: rgba(246, 159, 0, .16);  color: #A56A00; }

/* -------------------------------------------------------------------------
   El formulario de la tarifa, dentro del modal
   ------------------------------------------------------------------------- */

.esc-tar-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.esc-tar-form__campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Los que llevan lista larga o explicacion ocupan las dos columnas: partidos
   por la mitad no se leen. */
/* Los campos marcados van a lo ancho: el nombre porque es largo, la categoria
   porque su lista y su explicacion no caben en media columna, y los pagos
   porque son tres interruptores en fila. */
.esc-tar-form__campo.es-ancho {
    grid-column: 1 / -1;
}

/* Tres por linea y no dos: la primera fila son las tres cosas que DEFINEN la
   tarifa —de que clase es, como se pone el precio y a cuantas horas se
   aplica— y separarlas rompe la idea. */
.esc-tar-form {
    grid-template-columns: repeat(3, 1fr);
}

/* Un campo escondido no debe dejar su hueco: la rejilla se recoloca sola. */
.esc-tar-form__campo[hidden] {
    display: none;
}

/* El modal de confirmar mide 440px y aqui hay doce campos: apretados en esa
   columna el formulario se lee como una lista de la compra. */


.esc-tar-form__campo > label {
    margin: 0;
    color: var(--esc-text);
    font-size: 12px;
    font-weight: 600;
}

.esc-tar-form__campo > small {
    color: var(--esc-text-soft);
    font-size: 11px;
    line-height: 1.4;
}

.esc-tar-form__pagos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 4px;
}

/* Lo que sale al mes con lo que hay escrito. Cierra el formulario porque es la
   comprobacion: el precio por hora suelto no dice si esta bien puesto. */
.esc-tar-form__resumen {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border-radius: 6px;
    background: #F1F4F7;
    color: var(--esc-text);
    font-size: 13px;
}

@media (max-width: 900px) {
    .esc-tar-form {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   La banda de la emision, encima del tarifario

   Manda sobre todas las tarifas —es UNA fecha para toda la escuela—, asi que
   va a lo ancho y por encima de la tabla, no metida como una columna mas.
   ------------------------------------------------------------------------- */

.esc-tar-emision {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid var(--esc-border);
    border-left: 4px solid var(--esc-green-border);
    border-radius: 6px;
    background: #F6F8FA;
}

/* Sin dia elegido el tarifario esta a medias: dice cuanto y como, pero no
   cuando. Se pinta como lo que es, algo que falta. */
.esc-tar-emision.es-sin-decidir {
    border-left-color: var(--esc-warning);
    background: rgba(246, 159, 0, .08);
}

.esc-tar-emision__texto {
    flex: 1;
    min-width: 0;
    color: var(--esc-text);
    font-size: 13px;
    line-height: 1.5;
}

.esc-tar-emision__texto .ph {
    margin-right: 6px;
    color: var(--esc-green-border);
}

.esc-tar-emision.es-sin-decidir .esc-tar-emision__texto .ph {
    color: #A56A00;
}

.esc-tar-emision__control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.esc-tar-emision__control label {
    margin: 0;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Ancho para «Sin decidir», la opción con la que arranca: con 90 px se quedaba en «Sin deci». */
.esc-tar-emision__control select {
    width: 118px;
}

@media (max-width: 760px) {
    .esc-tar-emision {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* -------------------------------------------------------------------------
   El tarifario, plegado por tipo de clase

   Con los tramos de horas cada tipo trae varias filas, y todo abierto a la vez
   son treinta lineas seguidas en las que no se distingue donde empieza cada
   cosa. Plegado se ve el mapa: que tipos hay y cuantas tarifas tiene cada uno.
   ------------------------------------------------------------------------- */

.esc-tar-bloque {
    margin-bottom: 8px;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    overflow: hidden;
    background: #FFF;
    transition: filter .18s ease, opacity .18s ease;
}

/* Lo que no se esta mirando se difumina y deja de responder. Sigue ahi para no
   perder de vista donde se estaba, pero no compite por la atencion. */
.esc-tar-bloque.es-difuminado {
    filter: blur(2px);
    opacity: .45;
    pointer-events: none;
    user-select: none;
}

.esc-tar-bloque.es-retirado .esc-tar-banda {
    opacity: .7;
}

/* La banda ES el interruptor: se pulsa entera, no un triangulito de 10px. */
.esc-tar-banda {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    background: #E9EEF3;
    color: var(--esc-title);
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .4px;
    cursor: pointer;
}

.esc-tar-banda:hover {
    background: #DFE7EE;
}

.esc-tar-bloque.es-abierto .esc-tar-banda {
    border-bottom: 1px solid var(--esc-border);
    border-radius: 5px 5px 0 0;
    background: var(--esc-navy-head);
    color: #FFF;
}

/* Abierto, el bloque deja de recortar.
   El `overflow: hidden` esta para que la banda de color no se salga por las
   esquinas redondeadas, y hace falta mientras esta cerrado. Abierto, ademas
   recortaba las burbujas de ayuda de los botones de cada fila: con una sola
   tarifa el bloque mide poco mas que la fila y la burbuja, que sale por DEBAJO,
   se quedaba cortada a media altura.

   Con la banda redondeada por su cuenta, las esquinas siguen bien sin recortar:
   lo unico de color es ella, y lo demas es blanco sobre blanco. */
.esc-tar-bloque.es-abierto {
    overflow: visible;
}

.esc-tar-bloque.es-abierto .esc-tar-banda .esc-chapa {
    background: rgba(255, 255, 255, .16);
    color: #FFF;
}

/* Lo de fuera: cuantas tarifas hay dentro. A la derecha del todo, que es donde
   se busca un contador. */
.esc-tar-banda__cuenta {
    display: flex;
    gap: 6px;
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
}

.esc-tar-bloque__dentro {
    border-top: 0;
}

/* Dentro de un bloque, la ultima fila no necesita raya: ya la pone el borde. */
.esc-tar-bloque__dentro .esc-tar-fila:last-child {
    border-bottom: 0;
}

.esc-tar-horas,
.esc-tar-modo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.esc-tar-modo small {
    color: var(--esc-text-soft);
    font-size: 11px;
}

/* Un importe estimado no es un importe: se dice, y se dice donde se lee la
   cifra, no en una nota al pie que nadie baja a mirar. */
.esc-tar-mes small.es-estimado {
    align-self: flex-end;
    padding: 1px 6px;
    border-radius: 9px;
    background: rgba(246, 159, 0, .16);
    color: #A56A00;
    cursor: help;
}

/* -------------------------------------------------------------------------
   Maestro de tipos de clase, en el cajon lateral
   ------------------------------------------------------------------------- */

.esc-tipos__ayuda {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--esc-border);
}

.esc-tipos__lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 16px;
}

.esc-tipos__fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--esc-border);
}

.esc-tipos__fila.es-retirado {
    opacity: .55;
}

.esc-tipos__fila[draggable="true"] { cursor: grab; }
.esc-tipos__fila.es-arrastrando { opacity: .45; }
.esc-tipos__fila.es-sobre { box-shadow: inset 0 2px 0 0 var(--esc-accent, #0F9DEA); }
.esc-tipos__asa { flex: none; color: var(--esc-text-soft, #6A7688); cursor: grab; display: inline-flex; align-items: center; font-size: 16px; }
.esc-tipos__asa:active { cursor: grabbing; }
/* El texto de ayuda dentro de la lista no debe flotar (una regla global de la
   plataforma pone float:left a los <p>): si flota, empuja la primera fila y la
   colapsa a ancho 0. */
.esc-tipos__lista > .esc-ayuda { float: none; width: auto; }

.esc-tipos__fila > input {
    flex: 1;
    min-width: 0;
}

.esc-tipos__uso {
    display: flex;
    flex: none;
    gap: 4px;
}

/* Cuatro filas de texto no necesitan 760px: el cajon del horario los usa para
   una rejilla de casillas, este no. */
.esc-tipos {
    width: 460px;
}

/* El alta, arriba y siempre a la vista. Abajo se quedaba pegada al borde
   inferior de la pantalla —el cajon ocupa toda la altura— con un hueco enorme
   entre ella y los tipos, y no se veia. */
.esc-tipos__alta {
    flex: none;
    padding: 12px 16px;
    border-bottom: 1px solid var(--esc-border);
    background: #F6F8FA;
}

.esc-tipos__alta > label {
    display: block;
    margin: 0 0 4px;
    color: var(--esc-text);
    font-size: 12px;
    font-weight: 600;
}

.esc-tipos__alta-fila {
    display: flex;
    gap: 8px;
}

.esc-tipos__alta-fila > input {
    flex: 1;
    min-width: 0;
}

/* El tipo que sale puesto al crear un grupo. Es uno entre varios, asi que se
   pulsa en vez de marcarse: una casilla por fila daria a entender que se
   pueden marcar dos. */
.esc-tipos__defecto {
    flex: none;
    padding: 2px 8px;
    border: 1px solid var(--esc-border);
    border-radius: 10px;
    background: #FFF;
    color: var(--esc-text-soft);
    font-size: 11px;
    cursor: pointer;
}

.esc-tipos__defecto:hover:not(:disabled) {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}

.esc-tipos__defecto.es-puesto {
    border-color: var(--esc-green-border);
    background: rgba(118, 171, 60, .14);
    color: var(--esc-green-border);
    cursor: default;
}

.esc-tipos__defecto:disabled:not(.es-puesto) {
    opacity: .45;
    cursor: not-allowed;
}

/* Las burbujas del cajon de tipos y de las acciones del tarifario se anclan a
   la DERECHA. El cajon esta pegado al borde de la pantalla y las acciones son
   la ultima columna de la tabla: centradas se salen, y el navegador las vuelca
   hacia dentro tapando el control de al lado, que es justo el que se iba a
   pulsar. */
.esc-tipos__fila [data-ayuda]::after,
.esc-tar-acciones [data-ayuda]::after {
    left: auto;
    right: 0;
    transform: none;
}

/* Un boton deshabilitado no recibe :hover en todos los navegadores, asi que su
   burbuja no saldria. El que esta puesto por defecto ya lo dice en su propio
   rotulo, pero se deja el puntero de ayuda para que se note que hay algo. */
.esc-tipos__defecto:disabled {
    pointer-events: auto;
    cursor: help;
}

.esc-tipos__defecto.es-puesto:disabled {
    cursor: default;
}

/* -------------------------------------------------------------------------
   Simulador mensual

   El tarifario dice lo que cuesta cada cosa; esto dice lo que entra. Va en
   ficha y no en la propia pantalla porque no se mira todos los dias: se mira
   cuando hay que hacer un presupuesto.
   ------------------------------------------------------------------------- */



.esc-sim__resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-bottom: 16px;
}

.esc-sim__dato {
    flex: 1;
    min-width: 150px;
    padding: 12px 14px;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    background: #F6F8FA;
}

.esc-sim__dato strong {
    display: block;
    color: var(--esc-title);
    font-size: 20px;
    line-height: 1.2;
}

.esc-sim__dato small {
    display: block;
    margin-top: 2px;
    color: var(--esc-text-soft);
    font-size: 11px;
    line-height: 1.35;
}

/* La cifra que se viene a ver. */
.esc-sim__dato.es-total {
    border-color: var(--esc-green-border);
    background: rgba(118, 171, 60, .12);
}

.esc-sim__dato.es-total strong {
    color: var(--esc-green-border);
    font-size: 24px;
}

/* Lo que se deja de ingresar por lo pactado. Se enseña aparte del total a
   proposito: escondido dentro no se puede presupuestar. */
.esc-sim__dato.es-descuento strong {
    color: var(--esc-warning-border);
}

.esc-sim__tabla {
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    overflow: hidden;
}

.esc-sim__fila {
    display: grid;
    grid-template-columns: 1.6fr 1.2fr 1.2fr .8fr .7fr .9fr;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--esc-border);
    font-size: 13px;
}

.esc-sim__fila:last-child {
    border-bottom: 0;
}

.esc-sim__fila--cabecera {
    background: #F1F4F7;
    color: var(--esc-text-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-sim__fila--pie {
    background: #F1F4F7;
    font-weight: 700;
}

/* Una tarifa que no usa nadie no se esconde: saber cual esta de sobra es tan
   util como saber cual da mas. */
.esc-sim__fila.es-vacia {
    color: var(--esc-text-soft);
}

.esc-sim__fila > span:nth-child(5),
.esc-sim__fila > span:nth-child(6) {
    text-align: right;
}

.esc-sim__sinprecio,
.esc-sim__formas {
    margin-top: 16px;
}

.esc-sim__sinprecio h3,
.esc-sim__formas h3 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
}

/* Alumnos con clase y sin precio. En rojo porque cada uno es dinero que no se
   va a cobrar sin que nadie se entere. */
.esc-sim__sinprecio h3 {
    color: var(--esc-danger);
}

/* El titulo es el interruptor: el numero es lo que se viene a saber y los
   nombres solo hacen falta cuando se va a arreglar. */
.esc-sim__sinprecio h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.esc-sim__sinprecio-lista {
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
}

.esc-sim__sinprecio-lista[hidden] {
    display: none;
}

.esc-sim__sinprecio-fila {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--esc-border);
    font-size: 13px;
}

.esc-sim__sinprecio-fila:last-child {
    border-bottom: 0;
}

.esc-sim__sinprecio-fila small {
    color: var(--esc-text-soft);
    font-size: 11px;
}

/* El 100% por el mismo motivo que .esc-eco__dos: sin el, la caja se queda a 0
   de ancho y las cuatro cifras se apilan desbordando por la derecha. */
.esc-sim__formas-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.esc-sim__forma {
    flex: 1;
    min-width: 130px;
    padding: 10px 12px;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
}

.esc-sim__forma strong {
    display: block;
    font-size: 16px;
}

.esc-sim__forma small {
    display: block;
    color: var(--esc-text-soft);
    font-size: 11px;
}

/* Lo que no tiene forma de pago no se puede cobrar el dia de la emision. */
.esc-sim__forma.es-sin {
    border-color: var(--esc-warning);
    background: rgba(246, 159, 0, .08);
}

.esc-sim__sinprecio-ver {
    margin-left: auto;
    color: var(--esc-text-soft);
    font-size: 11px;
    font-weight: 400;
}

/* El numero de alumnos de una tarifa: se pulsa para ver quienes son. El numero
   es lo que se viene a saber; los nombres, solo cuando hay que ir a mirar a
   alguien. */
.esc-sim__alumnos {
    text-align: right;
}

.esc-sim__alumnos-num {
    padding: 1px 8px;
    border: 1px solid var(--esc-border);
    border-radius: 10px;
    background: #FFF;
    color: var(--esc-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.esc-sim__alumnos-num:hover {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}

.esc-sim__alumnos-num.es-abierto {
    border-color: var(--esc-accent);
    background: var(--esc-accent);
    color: #FFF;
}

/* La lista cuelga de su fila, sangrada y sobre fondo distinto: asi se ve que
   es el detalle de esa tarifa y no una fila mas de la tabla. */
.esc-sim__quienes {
    padding: 4px 12px 8px 24px;
    border-bottom: 1px solid var(--esc-border);
    background: #F6F8FA;
}

.esc-sim__quienes[hidden] {
    display: none;
}

.esc-sim__quienes-fila {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1.3fr .6fr .7fr;
    gap: 10px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid var(--esc-border);
    font-size: 12px;
}

.esc-sim__quienes-fila:last-child {
    border-bottom: 0;
}

.esc-sim__quienes-quien small {
    margin-left: 6px;
    color: var(--esc-text-soft);
}

.esc-sim__quienes-grupo,
.esc-sim__quienes-dias {
    color: var(--esc-text-soft);
}

.esc-sim__quienes-horas,
.esc-sim__quienes-importe {
    text-align: right;
}

/* La burbuja del numero se ancla a la derecha: la columna esta pegada al borde
   de la tabla y centrada se saldria. */
.esc-sim__alumnos [data-ayuda]::after {
    left: auto;
    right: 0;
    transform: none;
}

/* -------------------------------------------------------------------------
   El cuadrado de color del tipo de clase

   Cuadrado y no redondo a proposito: el circulo de color ya significa otra
   cosa en el modulo —el estado de pago del alumno— y dos redondeles de
   colores distintos en la misma fila se leen como lo mismo.
   ------------------------------------------------------------------------- */

.esc-cuadro {
    display: inline-block;
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    vertical-align: -1px;
}

/* El selector de color del maestro. Los navegadores le ponen un borde y un
   relleno propios que lo dejan como un boton gris con un hilo de color: se
   deja solo el color, que es lo que hay que ver. */
.esc-tipos__color {
    flex: none;
    width: 34px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    background: #FFF;
    cursor: pointer;
}

.esc-tipos__color::-webkit-color-swatch-wrapper { padding: 0; }
.esc-tipos__color::-webkit-color-swatch { border: 0; border-radius: 4px; }
.esc-tipos__color::-moz-color-swatch    { border: 0; border-radius: 4px; }

.esc-tipos__color:disabled {
    cursor: default;
    opacity: .6;
}

/* El contador de alumnos del simulador va DENTRO del cuadrado del tipo: dice
   de un vistazo cuantos son y de que tipo. */
.esc-sim__alumnos-num {
    width: auto;
    min-width: 26px;
    height: auto;
    padding: 2px 8px;
    border: 0;
    border-radius: 4px;
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.esc-sim__alumnos-num:hover {
    filter: brightness(1.12);
}

.esc-sim__alumnos-num.es-abierto {
    box-shadow: 0 0 0 2px rgba(26, 43, 60, .35);
}

.esc-sim__tipo {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.esc-sim__tipo > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Alumnos sin tarifa

   Es una lista de trabajo, no un informe: se agrupa por motivo porque cada
   motivo se arregla de una forma y en un sitio distinto.
   ------------------------------------------------------------------------- */



.esc-sint__grupo {
    margin-top: 16px;
}

.esc-sint__grupo h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
}

/* Los tres primeros motivos son fallos del tarifario; el cuarto —todavia sin
   clase— no lo es, y no tiene por que alarmar. */
.esc-sint__grupo h3.es-grave {
    color: var(--esc-danger);
}

.esc-sint__cuenta {
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--esc-text-soft);
    color: #FFF;
    font-size: 12px;
    text-align: center;
}

.esc-sint__grupo h3.es-grave .esc-sint__cuenta {
    background: var(--esc-danger);
}

.esc-sint__grupo > .esc-ayuda {
    margin: 0 0 8px;
}

.esc-sint__lista {
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    overflow: hidden;
}

.esc-sint__fila {
    display: grid;
    grid-template-columns: 1.4fr 1.1fr 1.2fr 1.3fr 32px;
    gap: 10px;
    align-items: baseline;
    padding: 7px 12px;
    border-bottom: 1px solid var(--esc-border);
    font-size: 12px;
}

.esc-sint__fila:last-child {
    border-bottom: 0;
}

.esc-sint__tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.esc-sint__tipo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--esc-text-soft);
}

/* -------------------------------------------------------------------------
   Ficha economica de un alumno

   En dos mitades: lo que le corresponde por el tarifario y lo que se le cobra
   de verdad. Sin la primera, un descuento es un numero sin contexto.
   ------------------------------------------------------------------------- */



.esc-eco__quien {
    width: 100%;
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
}

/* POR QUE TODO ESTO LLEVA width: 100%
   ------------------------------------
   En estas fichas, un contenedor flex o grid con `width: auto` se queda a 0 de
   ancho y su contenido se pinta fuera de la caja. Se comprobo a fondo: sin
   margenes, sin padding, sin float, en LTR, con el padre midiendo 403 px... y
   aun asi el hijo mide 0; ponerle `width: 100%` le devuelve los 403.

   Es una rareza del motor, no de estas reglas. En un navegador que resuelva
   bien el `auto`, el `100%` da exactamente lo mismo, asi que no cuesta nada
   dejarlo puesto y evita una pantalla rota. */
.esc-eco__dos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    width: 100%;
}

.esc-eco__mitad,
.esc-eco__campo,
.esc-eco__final {
    width: 100%;
}

.esc-eco__mitad h4 {
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--esc-border);
    color: var(--esc-text-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-eco__linea {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--esc-border);
    font-size: 13px;
}

.esc-eco__linea-que small {
    display: block;
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-eco__linea-importe {
    flex: none;
    font-weight: 600;
}

.esc-eco__linea--total {
    border-bottom: 0;
    font-weight: 700;
}

.esc-eco__campo {
    margin-bottom: 10px;
}

.esc-eco__campo[hidden] {
    display: none;
}

.esc-eco__campo > label {
    display: block;
    margin: 0 0 3px;
    color: var(--esc-text);
    font-size: 12px;
    font-weight: 600;
}

.esc-eco__campo > small {
    display: block;
    margin-top: 3px;
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-eco__banco {
    padding: 7px 10px;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    background: #F6F8FA;
    font-family: monospace;
    font-size: 13px;
}

/* Sin cuenta no se le puede pasar la remesa: se dice aqui y no solo al
   guardar. */
.esc-eco__banco.es-sin {
    border-color: var(--esc-warning);
    background: rgba(246, 159, 0, .08);
    color: #A56A00;
    font-family: inherit;
}

/* La casilla que cierra la ficha: sea cual sea el modo, este es el numero que
   va al recibo. */
.esc-eco__final {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--esc-green-border);
    border-radius: 6px;
    background: rgba(118, 171, 60, .12);
}

.esc-eco__final small {
    display: block;
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-eco__final strong {
    color: var(--esc-green-border);
    font-size: 20px;
}

@media (max-width: 760px) {
    .esc-eco__dos {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   Alumnos y tarifas

   Los tres filtros son la misma lista mirada de tres maneras: todos, los que
   tienen precio pactado y los que no tienen ninguno. Se edita desde aqui con
   el lapicero, sin salir a buscar a nadie.
   ------------------------------------------------------------------------- */

.esc-alt__barra {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
}

.esc-alt__filtro {
    padding: 5px 12px;
    border: 1px solid var(--esc-border);
    border-radius: 14px;
    background: #FFF;
    color: var(--esc-text-soft);
    font-size: 12px;
    cursor: pointer;
}

.esc-alt__filtro:hover {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}

.esc-alt__filtro.es-puesto {
    border-color: var(--esc-accent);
    background: var(--esc-accent);
    color: #FFF;
}

.esc-alt__totales {
    margin-left: auto;
    text-align: right;
}

.esc-alt__totales strong {
    display: block;
    color: var(--esc-green-border);
    font-size: 17px;
}

.esc-alt__totales small {
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-alt__lista {
    width: 100%;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    overflow: hidden;
}

.esc-alt__fila {
    display: grid;
    grid-template-columns: 1.4fr 1.5fr .6fr .8fr 1fr .9fr .8fr 32px;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 7px 12px;
    border-bottom: 1px solid var(--esc-border);
    font-size: 12px;
}

.esc-alt__fila:last-child {
    border-bottom: 0;
}

.esc-alt__fila--cabecera {
    background: #F1F4F7;
    color: var(--esc-text-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* Quien no tiene precio: no se esconde, se marca. Es el que hay que mirar. */
.esc-alt__fila.es-sin {
    background: rgba(217, 83, 79, .06);
}

.esc-alt__clases {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.esc-alt__clases small {
    overflow: hidden;
    color: var(--esc-text-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-alt__precio {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.esc-alt__precio small {
    overflow: hidden;
    color: var(--esc-text-soft);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-alt__paga {
    display: flex;
    flex-direction: column;
    text-align: right;
}

/* El tarifario ha cambiado desde que se pacto ese precio: se dice donde se
   lee la cifra, no en una nota al pie. */
.esc-alt__paga small.es-cambiado {
    color: var(--esc-warning-border);
    font-size: 10px;
    cursor: help;
}

.esc-alt__pago.es-sin {
    color: var(--esc-warning-border);
}

/* Las burbujas de la ultima columna, ancladas a la derecha. */
.esc-alt__fila [data-ayuda]::after,
.esc-sint__fila [data-ayuda]::after {
    left: auto;
    right: 0;
    transform: none;
}

/* -------------------------------------------------------------------------
   Los tres listados de alumnos, en su propia caja

   Son el mismo listado mirado de tres maneras, asi que se leen como un grupo.
   Sueltos entre los demas botones de la barra parecian tres acciones sin
   relacion y habia que pararse a decidir cual abre que. Con la caja y el
   rotulo se sabe de que van los tres antes de leerlos.
   ------------------------------------------------------------------------- */

.esc-tar-listados {
    display: flex;
    align-items: stretch;
    align-self: flex-end;
    border: 1px solid #AEB8C2;
    border-radius: 8px;
    background: #FFF;
    overflow: hidden;
}

/* El rotulo dice de que va el grupo sin repetirlo en cada boton: por eso los
   botones son "Sin tarifa" y no "Alumnos sin tarifa". */
.esc-tar-listados__rotulo {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-right: 1px solid var(--esc-border);
    background: #F1F4F7;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* Los tres botones pierden su propio borde y su redondeo: el borde es el del
   grupo, uno solo alrededor de los tres. Con el suyo cada uno se leia como una
   accion aparte, que es justo lo contrario de lo que son.

   Entre ellos queda una raya de separacion, como en un mando de varios
   botones: se distinguen, pero no dejan de ser el mismo mando. */
.esc-tar-listados .btn {
    margin: 0;
    border: 0;
    border-right: 1px solid var(--esc-border);
    border-radius: 0;
    background: #FFF;
    box-shadow: none;
}

.esc-tar-listados .btn:last-child {
    border-right: 0;
}

.esc-tar-listados .btn:hover {
    background: #F6F8FA;
}

@media (max-width: 1100px) {
    .esc-tar-listados {
        flex-wrap: wrap;
    }
}

/* El numero del boton, en vez de un icono. Es la razon de abrirlo: un 29 en
   "Sin tarifa" hace que se abra y un 0 ahorra el viaje, mientras que un icono
   solo repite lo que ya dice el rotulo. */
.esc-tar-listados__n {
    display: inline-block;
    min-width: 20px;
    margin-right: 4px;
    padding: 1px 5px;
    border-radius: var(--esc-radius-label);
    background: var(--esc-navy-head);
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* Nada que mirar: se apaga en vez de desaparecer, porque saber que hay cero es
   justo lo que se venia a saber. */
.esc-tar-listados__n.es-cero {
    background: #E4E8ED;
    color: #9AA3AF;
}

/* Alumnos sin tarifa: el unico dato de esta pantalla que significa que alguien
   esta entrenando y no se le va a cobrar. Lleva el mismo ambar que parpadea
   que los demas avisos del modulo, y su data-ayuda dice por que avisa: un
   numero amarillo que no explica nada solo consigue que se ignore. */
.esc-tar-listados__n.es-alerta {
    background: var(--esc-alerta);
    color: #1A2B3C;
    animation: esc-parpadeo 1.4s ease-in-out infinite;
    cursor: help;
}

/* Precios pactados: no es un problema, pero son excepciones y conviene que se
   note que las hay. */
.esc-tar-listados__n.es-azul {
    background: var(--esc-accent);
    color: #FFF;
}

/* La burbuja del numero se ancla a la izquierda: el mando esta al principio de
   la barra y centrada se saldria por ese lado. */
.esc-tar-listados [data-ayuda]::after {
    left: 0;
    transform: none;
}

/* Quien haya pedido al sistema que no se muevan las cosas ve el aviso fijo:
   sigue viendose y sigue explicandose. */
@media (prefers-reduced-motion: reduce) {
    .esc-tar-listados__n.es-alerta {
        animation: none;
    }
}

/* -------------------------------------------------------------------------
   Buscador, filtros por columna y orden, en Alumnos y tarifas
   ------------------------------------------------------------------------- */

.esc-alt__buscar {
    width: 240px;
    height: 30px;
    margin-left: 10px;
    font-size: 12px;
}

/* La cabecera ordena: el titulo ES el boton, no un triangulito de 8px al lado
   que hay que acertar. */
.esc-alt__orden {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.esc-alt__orden:hover {
    color: var(--esc-accent);
}

.esc-alt__orden .ph {
    opacity: .4;
    font-size: 11px;
}

.esc-alt__orden.es-puesto {
    color: var(--esc-accent);
}

.esc-alt__orden.es-puesto .ph {
    opacity: 1;
}

/* La fila de filtros, pegada bajo la cabecera y sin el peso de una fila de
   datos: es un control, no contenido. */
.esc-alt__fila--filtros {
    padding-top: 5px;
    padding-bottom: 5px;
    background: #F8FAFB;
}

.esc-alt__fila--filtros input,
.esc-alt__fila--filtros select {
    width: 100%;
    height: 26px;
    padding: 2px 6px;
    font-size: 11px;
}

/* El aviso dentro de la ficha economica. No usa `.esc-ambar`, que es el
   contenedor inline-flex del triangulo que parpadea y aqui aplastaba el texto
   en una linea. */
.esc-eco__aviso {
    width: 100%;
    margin: 8px 0 0;
    padding: 7px 10px;
    border-radius: 6px;
    background: rgba(246, 159, 0, .12);
    color: #8A5A00;
    font-size: 11px;
    line-height: 1.4;
}

/* Los filtros de dentro del listado usan el mismo codigo de colores que los
   botones de la barra: ambar para lo que hay que arreglar y azul para las
   excepciones. Con otro tono habria que aprenderselo dos veces. */
.esc-alt__filtro.es-alerta {
    border-color: #D9B400;
    background: var(--esc-alerta);
    color: #1A2B3C;
    font-weight: 700;
}

.esc-alt__filtro.es-alerta.es-puesto {
    box-shadow: inset 0 0 0 2px #1A2B3C;
}

.esc-alt__filtro.es-azul {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
    font-weight: 700;
}

.esc-alt__filtro.es-azul.es-puesto {
    background: var(--esc-accent);
    color: #FFF;
}

/* =============================================================================
   CALENDARIO GENERAL

   Doce meses de un año natural. La rejilla sale en blanco y lo que se ve
   pintado es exactamente lo que el club ha pintado.
============================================================================= */

/* El area a la que aplica el calendario abierto. No es un campo que se toque
   aqui: es lo que explica por que la paleta ofrece unos tipos y no otros. */
.esc-cal-aplicacion {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--esc-border);
    border-radius: 8px;
    background: #F1F4F7;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* A dos lineas, como el de Inscripciones: es la frase mas larga de la barra. Con las dos clases: la hoja
   comun del kit (css/misquad/escritorio.css, que va despues) pone .esc-switch__texto en una sola linea y,
   a 1.200 px, «Todo el año de un vistazo» se montaba encima de «Ver los retirados». */
.esc-switch__texto.esc-cal-retirados__texto {
    max-width: 96px;
    line-height: 1.2;
    white-space: normal;
}

/* -------------------------------------------------------------------------
   LA PALETA

   Pegada arriba mientras se baja por los doce meses: se pinta con ella, y
   tener que subir a enero para cambiar de tipo convierte cada cambio en dos
   viajes.
   ------------------------------------------------------------------------- */

.esc-cal-paleta {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    width: 100%;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid var(--esc-border);
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 1px 4px rgba(26, 43, 60, .10);
}

.esc-cal-paleta__rotulo {
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.esc-cal-paleta__tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.esc-cal-paleta__tipo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FFF;
    color: var(--esc-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.esc-cal-paleta__tipo:hover {
    border-color: #B9C5D2;
}

/* El elegido se nota en el borde y en el peso, no en el fondo: el fondo de
   cada chapa ya lo usa su propio cuadro de color y pintarlo entero taparia
   justo lo que distingue un tipo de otro. */
.esc-cal-paleta__tipo.is-activa {
    border-color: var(--esc-accent);
    box-shadow: 0 0 0 2px rgba(15, 157, 234, .18);
}

.esc-cal-paleta__color {
    width: 14px;
    height: 14px;
    flex: none;
    border: 1px solid rgba(26, 43, 60, .25);
    border-radius: 3px;
}

/* La goma no tiene color propio: se dibuja como un cuadro vacio con una raya,
   que es lo que significa dejar el dia en blanco. */
.esc-cal-paleta__color.es-goma {
    background:
        linear-gradient(to bottom right,
            transparent calc(50% - 1px), #C0392B calc(50% - 1px),
            #C0392B calc(50% + 1px), transparent calc(50% + 1px)),
        #FFF;
}

.esc-cal-paleta__ayuda {
    margin-left: auto;
    color: var(--esc-text-soft);
    font-size: 11px;
    font-style: italic;
}

/* -------------------------------------------------------------------------
   LOS DOCE MESES
   ------------------------------------------------------------------------- */

.esc-cal-ano {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
    width: 100%;
}

.esc-cal-mes {
    padding: 10px 12px 12px;
    border: 1px solid var(--esc-border);
    border-radius: 8px;
    background: #FFF;
}

.esc-cal-mes__titulo {
    margin: 0 0 8px;
    color: var(--esc-navy-head);
    font-size: 13px;
    font-weight: 700;
}

.esc-cal-mes__rejilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    width: 100%;
}

.esc-cal-mes__dow {
    padding-bottom: 2px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

/* -------------------------------------------------------------------------
   EL DIA

   Un cuadrado con su numero dentro y nada mas. Cuadrado de verdad
   (aspect-ratio) para que doce meses con 28, 30 y 31 dias tengan todos la
   misma pinta: con la altura libre, febrero salia con las casillas mas altas
   que las de enero.
   ------------------------------------------------------------------------- */

.esc-cal-dia {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--esc-border);
    border-radius: 3px;
    background: #FFF;
    color: var(--esc-text);
    font-size: 11px;
    line-height: 1;
    user-select: none;
}

/* Los huecos de antes del dia 1: ocupan sitio para que el 1 caiga en su dia de
   la semana, pero no son un dia y no se pintan ni se pulsan. */
.esc-cal-dia.es-hueco {
    border-color: transparent;
    background: transparent;
    pointer-events: none;
}

/* Sabado y domingo, distintos sin ser un tipo de dia: son lo que mas se busca
   al leer un calendario, y no es algo que el club decida. */
.esc-cal-dia.es-finde {
    background: #F4F6F8;
    color: var(--esc-text-soft);
}

/* Ya pintado: el color y el contraste del numero los pone el JS, porque salen
   del tipo de dia y el club los elige. */
.esc-cal-dia.es-pintado {
    border-color: rgba(26, 43, 60, .2);
    font-weight: 700;
}

/* Solo con un tipo elegido en la paleta la rejilla invita a pulsarla: sin
   nada elegido el calendario esta para mirarlo. */
.esc-cal-ano.es-pintable .esc-cal-dia:not(.es-hueco) {
    cursor: pointer;
}

.esc-cal-ano.es-pintable .esc-cal-dia:not(.es-hueco):hover {
    border-color: var(--esc-accent);
    box-shadow: inset 0 0 0 1px var(--esc-accent);
}

/* Durante el arrastre se apaga el hover: con el raton pulsado el cursor pasa
   por decenas de casillas y el resalte parpadeando por todo el mes distrae de
   lo que se esta pintando. */
.esc-cal-ano.is-pintando .esc-cal-dia:hover {
    box-shadow: none;
}

.esc-cal-ano.is-pintando {
    cursor: crosshair;
}

.esc-cal-vacio {
    padding: 24px 16px;
    border: 1px dashed var(--esc-border);
    border-radius: 8px;
    color: var(--esc-text-soft);
    font-size: 13px;
    text-align: center;
}

/* -------------------------------------------------------------------------
   FORMULARIOS DEL CALENDARIO Y DEL TIPO DE DIA
   ------------------------------------------------------------------------- */

.esc-cal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.esc-cal-form__campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.esc-cal-form__campo > label {
    margin: 0;
    color: var(--esc-text);
    font-size: 12px;
    font-weight: 600;
}

.esc-cal-form__fila {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.esc-cal-form__fila > .form-control {
    flex: 1;
    min-width: 0;
}

.esc-cal-form__fila > .esc-tipos__color {
    flex: none;
}

.esc-cal-form__a {
    flex: none;
    color: var(--esc-text-soft);
    font-size: 12px;
}

.esc-cal-form__aplicaciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.esc-cal-form__aplicacion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FFF;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.esc-cal-form__aplicacion input {
    margin: 0;
}

/* -------------------------------------------------------------------------
   EL CAJON DE TIPOS DE DIA

   Cada fila dice mas que la de tipos de clase —horario y areas— asi que el
   nombre y su detalle van apilados y las acciones al final.
   ------------------------------------------------------------------------- */

.esc-cal-tipo__color {
    width: 18px;
    height: 18px;
    flex: none;
    border: 1px solid rgba(26, 43, 60, .25);
    border-radius: 3px;
}

.esc-cal-tipo__texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.esc-cal-tipo__texto > strong {
    font-size: 13px;
}

.esc-cal-tipo__detalle {
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-cal-tipo__acciones {
    display: flex;
    flex: none;
    gap: 4px;
}

/* El alta del cajon de tipos de dia es un boton y no una fila de campos: el
   formulario tiene horario y areas, y eso no cabe en una linea. */
.esc-cal-tipos .esc-tipos__alta,
.esc-cal-lista .esc-tipos__alta {
    display: flex;
}

.esc-cal-tipos .esc-tipos__alta > .btn,
.esc-cal-lista .esc-tipos__alta > .btn {
    width: 100%;
}

/* Dia fuera de la temporada del calendario. No es "sin pintar todavia": es que
   ese dia no pertenece al curso y pintarlo no contaria para nada. Rayado y no
   solo gris, para que no se confunda con el gris del fin de semana. */
.esc-cal-dia.es-fuera {
    border-color: #ECEFF2;
    background:
        repeating-linear-gradient(45deg,
            #FAFBFC, #FAFBFC 3px, #F1F3F5 3px, #F1F3F5 6px);
    color: #C3CAD1;
    cursor: default;
}

.esc-cal-ano.es-pintable .esc-cal-dia.es-fuera:hover {
    border-color: #ECEFF2;
    box-shadow: none;
}

/* Cual de los calendarios de un area manda. Mismo gesto que el "por defecto" de
   los tipos de clase: se pulsa para ponerlo, y cuando ya lo es, lo dice y deja
   de poder pulsarse. */
.esc-cal-base {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--esc-border);
    border-radius: 8px;
    background: #FFF;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.esc-cal-base:hover:not(:disabled) {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}

.esc-cal-base.es-puesto {
    border-color: var(--esc-green-border);
    background: rgba(118, 171, 60, .14);
    color: var(--esc-green-border);
    cursor: default;
}

/* Un boton deshabilitado no recibe :hover en todos los navegadores, asi que su
   burbuja no saldria. Se le devuelve el puntero para que se note que explica
   algo. */
.esc-cal-base:disabled {
    pointer-events: auto;
    cursor: help;
}

/* Temporada sin definir en un calendario de escuela: las horas se estan
   contando sobre un curso supuesto, y eso acaba en un recibo. Mismo ambar que
   parpadea que el resto de avisos del modulo. */
.esc-cal-temporada-aviso,
#esc-cal-temporada.es-avisa {
    border-color: var(--esc-warning-border);
    background: #FBEDD8;
    color: #8A5A00;
    animation: esc-parpadeo 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    #esc-cal-temporada.es-avisa {
        animation: none;
    }
}

/* -------------------------------------------------------------------------
   LA MATRIZ, CON EL CALENDARIO PUESTO

   La rejilla ofrece huecos donde poner clase, y hay dias en los que no se
   puede: el 25 de diciembre no hay escuela por muy abierta que este la pista
   en su horario. El motivo va escrito en la cabecera y no en un tooltip,
   porque tiene que verse antes de intentar colocar un grupo ahi.
   ------------------------------------------------------------------------- */

.esc-matriz__cab--cerrado {
    background: #4A5866;
    color: #FFF;
}

.esc-matriz__cab--reducido {
    background: #8A5A00;
    color: #FFF;
}

.esc-matriz__cab-nota {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    opacity: .85;
    text-transform: none;
}

/* La celda de un dia sin clase. Rayada y no solo gris: el gris ya significa
   "vacia" en esta rejilla, y esto no es lo mismo —una celda vacia se puede
   llenar y esta no—. */
.esc-celda--cerrada {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 4px 6px;
    border: 1px dashed #C3CAD1;
    border-radius: var(--esc-radius);
    background:
        repeating-linear-gradient(45deg,
            #F7F8FA, #F7F8FA 4px, #EDEFF2 4px, #EDEFF2 8px);
    color: #78838F;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    cursor: not-allowed;
}

/* Fuera de la temporada: se avisa, no se bloquea. Gris y sin alarma, porque no
   es un problema —en septiembre se colocan los grupos del curso que empieza—
   sino un dato: lo que pase ese dia no cuenta para las horas de esta temporada. */
.esc-matriz__cab--fuera .esc-matriz__cab-nota {
    opacity: .7;
    font-style: italic;
}

/* Celda de un dia sin clase que ADEMAS tiene grupos puestos. El aviso se
   encoge para dejarlos ver: lo que ya esta colocado no se esconde nunca, y
   aqui menos que nunca, porque son justo los grupos que hay que mover. */
.esc-celda--cerrada.es-con-grupos {
    min-height: 0;
    margin-bottom: 4px;
    padding: 2px 6px;
}

/* Los grupos de un dia sin clase se apagan: siguen ahi y se pueden tocar, pero
   no se leen como una clase que se vaya a dar. */
.esc-matriz__dia.es-sin-clase .esc-celda:not(.esc-celda--cerrada) {
    opacity: .6;
}

/* El lapicero del calendario: solo el icono, cuadrado y del alto de los demas
   controles de la barra. Lleva el nombre del calendario justo al lado, que
   dice mejor que ninguna palabra que es lo que se va a editar. */
.esc-cal-lapiz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
}

/* Cuanto dura el calendario abierto. Se lee, no se toca: se define en su ficha.
   Misma chapa que el area, porque son la misma clase de dato. */
.esc-cal-temporada {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--esc-border);
    border-radius: 8px;
    background: #F1F4F7;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

/* Sin temporada en un calendario de escuela: las horas se cuentan sobre un
   curso supuesto, y eso acaba en un recibo. */
.esc-cal-temporada.es-avisa {
    border-color: var(--esc-warning-border);
    background: #FBEDD8;
    color: #8A5A00;
    animation: esc-parpadeo 1.4s ease-in-out infinite;
}

/* Lo mismo dentro de la ficha, en la ayuda de las fechas. */
.esc-cal-form__campo .esc-ayuda.es-avisa {
    color: #8A5A00;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .esc-cal-temporada.es-avisa {
        animation: none;
    }
}

/* -------------------------------------------------------------------------
   LOS DOS MANDOS DEL CALENDARIO

   Solo el icono, cuadrados y del alto de los demas controles de la barra.
   Llevan el nombre del calendario justo al lado, que dice mejor que ninguna
   palabra sobre que actuan.

   El color los separa: azul el que cambia lo que ya hay, verde el que crea.
   Es el mismo reparto que en el resto del modulo, donde el verde es siempre el
   alta.
   ------------------------------------------------------------------------- */

.esc-cal-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #FFF;
    font-size: 16px;
    cursor: pointer;
}

.esc-cal-icono.es-azul {
    background: var(--esc-accent);
    border-color: var(--esc-accent);
}

.esc-cal-icono.es-verde {
    background: var(--esc-green-border);
    border-color: var(--esc-green-border);
}

/* Se oscurecen al pasar por encima en vez de cambiar de color: con solo un
   icono dentro, un cambio de tono es lo unico que se nota sin leer nada. */
.esc-cal-icono:hover {
    filter: brightness(.92);
}

.esc-cal-icono:focus-visible {
    box-shadow: 0 0 0 3px rgba(15, 157, 234, .30);
}

/* Botones violeta de la barra (calendarios y tipos de día): engranaje + texto,
   fuente blanca. Mismo aspecto los dos, para que se lean como un par. */
.esc-btn-violeta {
    background: #FF00CA;
    border: 1px solid #FF00CA;
    color: #FFF;
    font-weight: 600;
    padding-left: 12px;
    padding-right: 12px;
}
.esc-btn-violeta:hover,
.esc-btn-violeta:focus {
    background: #D600A8;
    border-color: #D600A8;
    color: #FFF;
}
.esc-btn-violeta .ph { margin-right: 4px; }

/* Las burbujas de estos dos se anclan a la IZQUIERDA: estan al principio de la
   barra y centradas se saldrian por ese lado. */
.esc-cal-icono[data-ayuda]::after {
    left: 0;
    transform: none;
}

/* Un area que ya tiene calendario. Sale en la lista, apagada y diciendo por
   quien: esconderla dejaria al club preguntandose por que no aparece. */
.esc-cal-form select option:disabled {
    color: #9AA3AF;
}

/* Horas de la temporada: la cifra y, debajo, de donde sale.
   La letra pequeña no es un adorno. El mismo alumno tiene un total distinto
   segun lo que el club haya pintado en el calendario, y sin decir cuantos dias
   se han descontado no hay manera de saber si un numero raro viene de un
   festivo mal puesto o del reparto de grupos. */
.esc-alumno__temporada {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    line-height: 1.15;
}

.esc-alumno__temporada-nota {
    color: var(--esc-text-soft);
    font-size: 10px;
    white-space: nowrap;
    cursor: help;
}

/* -------------------------------------------------------------------------
   DIAS QUE NO PINTA NADIE

   Las competiciones que el club organiza llegan solas al calendario de
   competicion: son fechas que ya estan dadas a la federacion. Se marcan con
   una esquina y no con un fondo, para que el club pueda pintar encima y se
   sigan viendo las dos cosas: la de la federacion y la suya.
   ------------------------------------------------------------------------- */

.esc-cal-dia.es-automatico {
    position: relative;
    border-color: #B9A0D6;
    cursor: help;
}

.esc-cal-dia.es-automatico::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 7px 7px 0;
    border-style: solid;
    border-color: transparent #8e44ad transparent transparent;
}

/* Pintado a mano ADEMAS de tener competicion: la esquina se ve igual, porque
   el color de fondo es del club y la esquina es de la federacion. */
.esc-cal-dia.es-automatico.es-pintado {
    border-color: rgba(26, 43, 60, .2);
}

/* -------------------------------------------------------------------------
   EL CAJON DE CALENDARIOS, Y SU PRIORIDAD

   El orden de la lista es la importancia, de mas a menos. No es decorativo:
   cuando dos calendarios dicen cosas distintas del mismo dia, gana el de mas
   arriba, y por eso el puesto va delante y en grande.
   ------------------------------------------------------------------------- */

.esc-cal-lista__fila {
    cursor: default;
}

.esc-cal-lista__fila[draggable="true"] {
    cursor: grab;
}

.esc-cal-lista__fila.is-arrastrando {
    opacity: .45;
    cursor: grabbing;
}

/* El que se esta mirando en la rejilla. Sin esto, con tres calendarios
   parecidos hay que leer el nombre del selector para saber cual es cual. */
.esc-cal-lista__fila.es-abierto {
    background: rgba(15, 157, 234, .07);
    box-shadow: inset 3px 0 0 var(--esc-accent);
}

/* El puesto: el dato que se viene a mirar y a cambiar. Sin el, la lista parece
   un orden cualquiera en vez de una prioridad. */
.esc-cal-lista__puesto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: var(--esc-navy-head);
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
}

.esc-cal-lista__fila.es-retirado .esc-cal-lista__puesto {
    background: #E4E8ED;
    color: #9AA3AF;
}

.esc-cal-lista__epigrafe {
    margin: 14px 0 4px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* Este cajon lleva filas de dos lineas y tres botones: con 460px el nombre se
   parte por la mitad. */
.esc-cal-lista {
    width: 520px;
}

/* -------------------------------------------------------------------------
   COMPETICIONES EN LA MATRIZ

   Una competicion del club no cierra el club: se lleva las pistas que el club
   declaro al pedirla, y en las demas se sigue dando clase. Por eso se marca
   pista a pista y con su propio color, distinto del gris de "cerrado": son
   cosas distintas y se arreglan en sitios distintos.
   ------------------------------------------------------------------------- */

.esc-matriz__cab--competicion {
    background: #8E44AD;
    color: #FFF;
}

.esc-celda--competicion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    margin-bottom: 4px;
    padding: 3px 6px;
    border: 1px solid #B9A0D6;
    border-radius: var(--esc-radius);
    background: rgba(142, 68, 173, .12);
    color: #6B2E86;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    cursor: help;

    /* El nombre de un torneo no cabe en una celda de la rejilla. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La pista, a la IZQUIERDA como en las tarjetas de grupo: así la columna de
   pistas se sigue igual en toda la rejilla, esté la celda ocupada por una
   clase o por una competición. El nombre del torneo, al lado. */
.esc-celda--competicion.es-con-pista {
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
    text-align: left;
    white-space: nowrap;
}

.esc-celda--competicion-pista {
    flex: none;
    max-width: 62px;
    overflow: hidden;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .85;
}

.esc-celda--competicion-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   EL ASA DE ARRASTRE

   Sin ella, que una lista se pueda reordenar arrastrando no se ve: hay que
   adivinarlo o leerlo en la ayuda. Con el asa delante se entiende antes de
   intentarlo, y por eso va la primera de la fila.
   ------------------------------------------------------------------------- */

.esc-cal-lista__asa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 28px;
    flex: none;
    /* Un pelín separada de la izquierda para no montarse sobre la barra de
       color de la fila abierta (box-shadow inset de 3px). */
    margin-left: 4px;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    background: #EEF2F6;
    color: #6B7684;
    font-size: 15px;
    cursor: grab;
}

/* El asa está pegada al borde izquierdo del cajón, así que su tooltip no puede
   ir centrado (se saldría por la izquierda y se cortaría): se ancla al borde
   izquierdo del asa y crece hacia la derecha, hacia dentro del cajón. */
.esc-cal-lista__asa[data-ayuda]::after {
    left: 0;
    transform: none;
    width: 240px;
    max-width: calc(100vw - 40px);
}

.esc-cal-lista__asa.es-apagada {
    opacity: .35;
    border-color: transparent;
    background: transparent;
    cursor: default;
}

.esc-cal-lista__asa:not(.es-apagada):hover,
.esc-cal-lista__fila:hover .esc-cal-lista__asa:not(.es-apagada) {
    border-color: var(--esc-accent);
    background: #EAF4FC;
    color: var(--esc-accent);
}

.esc-cal-lista__asa-leyenda {
    color: #AEB8C2;
    font-size: 14px;
    vertical-align: -2px;
}

/* -------------------------------------------------------------------------
   LAS CONTRADICCIONES

   Sale SIEMPRE, tambien a cero. Un contador que solo aparece cuando hay
   problema no se busca cuando no esta, y entonces no se sabe si es que no hay
   nada o si es que nadie ha mirado.
   ------------------------------------------------------------------------- */

.esc-cal-avisos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--esc-border);
    border-radius: 8px;
    background: #FFF;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.esc-cal-avisos__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 5px;
    border-radius: var(--esc-radius-label);
    background: #E4E8ED;
    color: #9AA3AF;
    font-size: 11px;
    font-weight: 700;
}

.esc-cal-avisos.es-ok {
    border-color: var(--esc-green-border);
    color: var(--esc-green-border);
}

.esc-cal-avisos.es-ok .esc-cal-avisos__n {
    background: rgba(118, 171, 60, .18);
    color: var(--esc-green-border);
}

/* Lo que no cuadra lleva el ambar que parpadea del resto del modulo: son
   clases que el dia que llegue no van a tener donde darse. */
.esc-cal-avisos.es-alerta {
    border-color: var(--esc-warning-border);
    background: #FBEDD8;
    color: #8A5A00;
}

.esc-cal-avisos.es-alerta .esc-cal-avisos__n {
    background: var(--esc-alerta);
    color: #1A2B3C;
    animation: esc-parpadeo 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .esc-cal-avisos.es-alerta .esc-cal-avisos__n {
        animation: none;
    }
}

.esc-cal-avisos__caja {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.esc-cal-aviso {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--esc-border);
    border-left: 3px solid var(--esc-warning-border);
    border-radius: 8px;
    background: #FFF;
}

.esc-cal-aviso__cab {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.esc-cal-aviso__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 6px;
    border-radius: var(--esc-radius-label);
    background: var(--esc-alerta);
    color: #1A2B3C;
    font-size: 11px;
    font-weight: 700;
}

.esc-cal-aviso__detalle {
    margin: 0 0 10px;
    color: var(--esc-text-soft);
    font-size: 12px;
}

.esc-cal-aviso__lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.esc-cal-aviso__fila {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 0;
    border-top: 1px solid var(--esc-border);
}

.esc-cal-aviso__grupo {
    flex: none;
    min-width: 150px;
    font-size: 13px;
    font-weight: 600;
}

.esc-cal-aviso__que {
    flex: 1;
    min-width: 0;
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-cal-aviso__accion {
    flex: none;
    padding: 3px 10px;
    font-size: 11px;
}

/* -------------------------------------------------------------------------
   RESOLVER: mover la clase, o dejar dicho que ese dia no hay
   ------------------------------------------------------------------------- */

.esc-cal-resolver {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.esc-cal-resolver__fila {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid var(--esc-border);
}

.esc-cal-resolver__fila.es-resuelta {
    opacity: .6;
}

.esc-cal-resolver__cuando {
    flex: none;
    min-width: 150px;
    font-size: 12px;
    font-weight: 600;
}

.esc-cal-resolver__pista {
    flex: none;
    min-width: 70px;
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-cal-resolver__acciones {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.esc-cal-resolver__acciones .form-control {
    width: auto;
    min-width: 120px;
}

/* Sin pistas libres se dice por que, en vez de dejar un hueco donde deberia
   haber un desplegable. */
.esc-cal-resolver__nada {
    color: #8A5A00;
    font-size: 11px;
    font-style: italic;
}

.esc-cal-resolver__hecho {
    color: var(--esc-green-border);
    font-size: 11px;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   CLASES MOVIDAS O ANULADAS ESTA SEMANA

   Sin decirlo en la propia tarjeta, la de la pista nueva parece la de siempre
   y la anulada parece que se da. Son las dos lecturas que hay que evitar.
   ------------------------------------------------------------------------- */

.esc-grupo__traslado {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    cursor: help;
}

.esc-grupo.es-movida {
    border-left-color: #8E44AD !important;
}

.esc-grupo.es-movida .esc-grupo__traslado {
    color: #6B2E86;
}

/* La anulada se apaga: sigue a la vista —hay que poder deshacerlo— pero no se
   lee como una clase que se vaya a dar. */
.esc-grupo.es-anulada {
    opacity: .55;
}

.esc-grupo.es-anulada .esc-grupo__traslado {
    color: #8A5A00;
}

/* Clase que choca con un torneo: se dice en la propia tarjeta y se resuelve
   ahi mismo. La revision del calendario da la lista del curso entero, que es
   lo que hace falta cuando llega una competicion nueva; mirando una semana, lo
   que se quiere es arreglar ESTA clase sin salir de aqui. */
.esc-grupo.es-choca {
    border-left-color: #8E44AD !important;
    box-shadow: inset 0 0 0 1px rgba(142, 68, 173, .35);
}

/* En ambar y parpadeando, como el resto de avisos del modulo.
   El morado decia "esto va de competiciones", que ya lo dice la celda de al
   lado; lo que hay que decir aqui es otra cosa: esta clase se queda sin sitio y
   hay que decidir algo. Es el mismo ambar que el triangulo de "sin tarifa", y
   por la misma razon: son alumnos que el dia que llegue no van a tener clase. */
/* El aviso de choque es un triángulo de alerta, igual que los demás de la
   escuela. Se pulsa para resolverlo, pero se lee como lo que es: una alerta.
   Va al final de la tarjeta, empujado a la derecha. */
.esc-grupo__resolver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--esc-alerta);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.esc-grupo__resolver > .esc-triangulo {
    animation: esc-parpadeo 1.4s ease-in-out infinite;
}

.esc-grupo__resolver:hover {
    transform: scale(1.12);
}

.esc-grupo__resolver:hover > .esc-triangulo {
    animation: none;
}

/* Quien haya pedido al sistema que no se muevan las cosas lo ve fijo: sigue
   viendose y sigue siendo ambar. */
@media (prefers-reduced-motion: reduce) {
    .esc-grupo__resolver > .esc-triangulo {
        animation: none;
    }
}

/* -------------------------------------------------------------------------
   LA VISTA MEZCLADA

   Pintar solo al ganador perdia lo que hace util mirarlos juntos: un dia en
   el que el lectivo dice "festivo" y el de competicion dice "torneo" salia
   igual que uno del que solo habla uno. La raya de abajo lo dice, con el
   color de cada calendario.
   ------------------------------------------------------------------------- */

.esc-cal-dia.es-varios {
    position: relative;
    padding-bottom: 3px;
}

.esc-cal-dia__tira {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    display: flex;
    height: 3px;
    gap: 1px;
    border-radius: 2px;
    overflow: hidden;
}

.esc-cal-dia__tira > i {
    flex: 1;
}

/* La leyenda ocupa el sitio de la paleta: ahi no se pinta, pero la barra no se
   queda vacia. Sin ella la rejilla es una cuadricula de colores que hay que ir
   descubriendo con el raton. */
.esc-cal-paleta.es-leyenda .esc-cal-paleta__tipos {
    gap: 8px;
}

.esc-cal-leyenda {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--esc-border);
    border-radius: 20px;
    background: #FFF;
    font-size: 12px;
    font-weight: 600;
    cursor: help;
}

/* El numero es el puesto en la prioridad, que es lo que decide quien gana el
   dia. Va dentro de la chapa porque sin el la leyenda seria una lista de
   nombres y el orden no significaria nada. */
.esc-cal-leyenda__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--esc-navy-head);
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
}

/* El area, en el borde: es lo que dice de que va cada calendario sin leerlo. */
.esc-cal-leyenda.es-general     { border-color: #1A2B3C; }
.esc-cal-leyenda.es-escuela     { border-color: #0F9DEA; }
.esc-cal-leyenda.es-competicion { border-color: #8E44AD; }
.esc-cal-leyenda.es-reservas    { border-color: #76AB3C; }

/* -------------------------------------------------------------------------
   EL CALENDARIO GENERAL, DE FONDO

   Los dias de clase se asignan en el calendario de escuela, pero no a ciegas:
   si el 25 de diciembre el club esta cerrado, poner clase ese dia es una
   contradiccion que hay que ver ANTES de pintarla.

   Es una capa de referencia: se ve y no se toca. Va en una raya a la
   izquierda para no competir con el color del propio dia, que es lo que se
   esta pintando.
   ------------------------------------------------------------------------- */

.esc-cal-dia.es-fondo {
    position: relative;
}

.esc-cal-dia.es-fondo::before {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 0;
    width: 3px;
    border-radius: 2px 0 0 2px;
    background: var(--esc-fondo, #1A2B3C);
}

/* Cerrado en el general es mas que una referencia: ahi no puede haber clase.
   Se raya el cuadrado entero, que es la misma manera de decir "aqui no" que en
   los dias fuera de temporada. */
.esc-cal-dia.es-fondo-cerrado:not(.es-pintado) {
    background:
        repeating-linear-gradient(45deg,
            #FFF, #FFF 3px, #EDEFF2 3px, #EDEFF2 6px);
    color: #9AA3AF;
}

/* El calendario general va siempre el primero y no se arrastra: no es una
   preferencia del club, es la instalacion. Lleva chincheta en vez de asa, que
   es la manera de decir "esto no se mueve" sin tener que leerlo. */
.esc-cal-lista__fila.es-fijo {
    background: #F1F4F7;
    cursor: default;
}

.esc-cal-lista__fila.es-fijo .esc-cal-lista__puesto {
    background: #1A2B3C;
}

/* "Actual": volver a la semana de hoy. Es el sitio del que mas se sale y al que
   mas se vuelve —se mira enero para colocar un grupo y luego hace falta la
   semana que viene— y sin el hay que acordarse de la fecha o contar flechazos.

   Apagado cuando ya estas en ella: asi ademas dice DONDE estas, y eso se ve sin
   leer la fecha. */
.esc-semana-hoy {
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.esc-mando > .esc-semana-hoy {
    background: #FFF;
    color: var(--esc-accent);
}

.esc-mando > .esc-semana-hoy:hover {
    background: #F6F8FA;
}

/* Apagado cuando ya estas en la semana de hoy. Sin tocar el grosor: cambiarlo
   ensancha el texto y mueve el mando entero. */
.esc-mando > .esc-semana-hoy.es-aqui {
    color: var(--esc-text-soft);
    cursor: default;
}

/* El aviso de «lo que no cuadra» de la matriz era propio —esc-matriz-alerta,
   ambar y parpadeando— y contaba los choques de la semana o del dia que
   estuvieras mirando. Ahora las dos pantallas llevan el del calendario
   general, .esc-cal-avisos, con la cuenta de la temporada: el mismo club tenia
   dos numeros distintos de problemas segun por donde entrase. */

/* La marca de traslado se pulsa para deshacerlo: sin eso, mover o anular una
   clase era una decision de un solo sentido. */
.esc-grupo__traslado {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.esc-grupo__traslado:hover {
    text-decoration: underline;
}

/* =============================================================================
   EL AÑO ENTERO DE UN VISTAZO

   Doce meses en tamaño normal no caben en una pantalla, y el calendario se
   mira para COMPARAR: cuando cae Semana Santa contra el puente de mayo,
   cuantas semanas seguidas quedan limpias, si el torneo de marzo pisa las
   vacaciones. Comparar dos cosas que no estan a la vez delante no se compara,
   se recuerda, y recordar doce meses no lo hace nadie.

   Todo encoge menos lo que hay que poder leer: el numero del dia sigue
   legible y los colores son los mismos. Lo que se va es el aire.
============================================================================= */

.esc-cal-ano.es-compacto {
    /* Seis columnas fijas y dos filas: es el reparto que deja los doce meses
       mas cuadrados en una pantalla ancha. Con auto-fill el ultimo mes se
       quedaba solo en una tercera fila segun el ancho. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.esc-cal-ano.es-compacto .esc-cal-mes {
    padding: 6px 7px 7px;
    border-radius: 5px;
}

.esc-cal-ano.es-compacto .esc-cal-mes__titulo {
    margin: 0 0 4px;
    font-size: 11px;
}

.esc-cal-ano.es-compacto .esc-cal-mes__rejilla {
    gap: 1px;
}

.esc-cal-ano.es-compacto .esc-cal-mes__dow {
    padding-bottom: 1px;
    font-size: 8px;
}

/* Se deja de forzar el cuadrado. El aspect-ratio es lo que da la pinta de
   calendario en tamaño normal, pero aqui es justo lo que lo hace alto: con
   seis semanas, cada milimetro de ancho son seis de alto. */
.esc-cal-ano.es-compacto .esc-cal-dia {
    aspect-ratio: auto;
    height: 16px;
    border-radius: 2px;
    font-size: 9px;
    line-height: 1;
}

/* La raya del calendario general y la esquina de competicion encogen con el
   resto: a este tamaño, las de antes se comian el numero del dia. */
.esc-cal-ano.es-compacto .esc-cal-dia.es-fondo::before {
    width: 2px;
}

.esc-cal-ano.es-compacto .esc-cal-dia.es-automatico::after {
    border-width: 0 5px 5px 0;
}

.esc-cal-ano.es-compacto .esc-cal-dia__tira {
    height: 2px;
}

.esc-cal-ano.es-compacto .esc-cal-dia.es-varios {
    padding-bottom: 2px;
}

/* A partir de aqui no caben seis: se pasa a cuatro y a dos, que siguen siendo
   divisores de doce y dejan la rejilla completa. */
@media (max-width: 1200px) {
    .esc-cal-ano.es-compacto {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .esc-cal-ano.es-compacto {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* -------------------------------------------------------------------------
   A QUIEN AFECTA EL CHOQUE

   Mover una clase o dejarla sin dar no es mover una casilla: hay gente detras
   a la que hay que avisar. Con el nombre del grupo solo habria que cerrar el
   dialogo, buscar el grupo y mirar quien esta dentro, y para entonces ya se ha
   decidido.
   ------------------------------------------------------------------------- */

.esc-choque-ficha {
    width: 100%;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--esc-border);
}

.esc-choque-ficha__cab {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.esc-choque-ficha__cab > strong {
    font-size: 14px;
}

.esc-choque-ficha__donde {
    color: var(--esc-text-soft);
    font-size: 12px;
}

.esc-choque-ficha__monitor {
    margin: 4px 0 0;
    color: var(--esc-text-soft);
    font-size: 12px;
}

.esc-choque-ficha__rotulo {
    margin: 12px 0 6px;
    font-size: 12px;
    font-weight: 600;
}

.esc-choque-ficha__lista {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Una fila por alumno, en columnas fijas: leidas en vertical, los telefonos y
   los emails se comparan de un vistazo en vez de tener que buscarlos en cada
   linea. */
.esc-choque-ficha__alumno {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 68px minmax(0, 1fr) minmax(0, 1.6fr);
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-top: 1px solid var(--esc-border);
    font-size: 12px;
}

.esc-choque-ficha__nombre {
    font-weight: 600;
}

.esc-choque-ficha__edad {
    color: var(--esc-text-soft);
    font-size: 11px;
}

/* Pulsables: en cuanto se decide, lo siguiente es avisar. */
.esc-choque-ficha__contacto {
    overflow: hidden;
    color: var(--esc-accent);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-choque-ficha__contacto.es-falta {
    color: #B0B7BE;
    font-style: italic;
}

@media (max-width: 700px) {
    .esc-choque-ficha__alumno {
        grid-template-columns: minmax(0, 1fr) 60px;
    }
}

/* =============================================================================
   RESOLVER UN CHOQUE: A QUIEN LE AFECTA Y DONDE CABE

   Partida en dos. A la izquierda quien esta en esa clase —hay gente detras a
   la que hay que avisar— y a la derecha donde cabe, que es la decision.

   La de la derecha es una semana en miniatura y no una lista de pistas: cuando
   el torneo se lleva todas las pistas del martes no hay nada que elegir ese
   dia, y la salida esta en otro. Verlo es lo que evita que la unica respuesta
   sea anular la clase.
============================================================================= */

.esc-resolver2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    width: 100%;
}

.esc-resolver2__quien,
.esc-resolver2__donde {
    min-width: 0;
}

.esc-resolver2__donde {
    padding-left: 20px;
    border-left: 1px solid var(--esc-border);
}

.esc-resolver2__rotulo {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
}

.esc-resolver2__pie {
    display: inline-flex;
    gap: 8px;
}

/* Anular no es el camino corto: es la salida cuando no hay otra. Va en gris y
   separado del verde, para que no se pulse por inercia. */
.esc-resolver2__anular {
    color: #8A5A00;
}

/* -------------------------------------------------------------------------
   LA SEMANA EN MINIATURA
   ------------------------------------------------------------------------- */

.esc-huecos {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
}

.esc-huecos__dia {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
    padding: 5px 3px;
    border: 1px solid var(--esc-border);
    border-radius: 5px;
    background: #FFF;
}

/* El dia del que se sale, marcado: es el punto de referencia de todo lo demas. */
.esc-huecos__dia.es-hoy {
    border-color: var(--esc-accent);
    box-shadow: inset 0 0 0 1px var(--esc-accent);
}

.esc-huecos__dia.es-cerrado {
    background:
        repeating-linear-gradient(45deg,
            #FAFBFC, #FAFBFC 3px, #F1F3F5 3px, #F1F3F5 6px);
}

.esc-huecos__cab {
    color: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-align: center;
    text-transform: uppercase;
    cursor: help;
}

.esc-huecos__num {
    margin-bottom: 3px;
    color: var(--esc-text);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.esc-huecos__nada {
    color: #9AA3AF;
    font-size: 9px;
    font-style: italic;
    line-height: 1.15;
    text-align: center;
}

/* Cada pista libre, pulsable. El nombre entero no cabe en una septima parte del
   ancho, asi que se recorta y el titulo lo dice: lo que hay que distinguir es
   cual de las que hay, y para eso llega. */
.esc-huecos__pista {
    overflow: hidden;
    padding: 3px 4px;
    border: 1px solid var(--esc-green-border);
    border-radius: 3px;
    background: rgba(118, 171, 60, .12);
    color: #4A7A1F;
    font-size: 9px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.esc-huecos__pista:hover {
    background: rgba(118, 171, 60, .25);
}

.esc-huecos__pista.is-elegido {
    background: var(--esc-green-border);
    color: #FFF;
}

@media (max-width: 900px) {
    .esc-resolver2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .esc-resolver2__donde {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--esc-border);
        padding-top: 16px;
    }
}

/* El otro nombre del grupo —alias o nombre, el que no se este enseñando—. Sirve
   para reconocerlo en los listados, que usan el alias. */
.esc-choque-ficha__otro {
    color: var(--esc-text-soft);
    font-size: 11px;
}

/* -------------------------------------------------------------------------
   EL CONTROL QUE SE ESTA MANEJANDO

   En vista de dia se conduce con el desplegable de dia y en vista de semana
   con el de semana. Cual de los dos manda ahora mismo se ve antes por el color
   que leyendo cual esta encendido en "Vista".
   ------------------------------------------------------------------------- */

select.form-control.es-mandando {
    border-color: var(--esc-danger);
    background: var(--esc-danger);
    color: #FFF;
}

select.form-control.es-mandando option {
    background: #FFF;
    color: var(--esc-text);
    font-weight: 400;
}

/* La raya que separa los botones de un mando es un hueco de 1px por el que se
   ve el FONDO del mando. Al ponerse rojo, ese hueco pasaba a ser rojo sobre
   rojo y las separaciones desaparecian: "Actual" se fundia con sus flechas.
   El fondo del hueco se aclara para que las rayas vuelvan a verse. */
.esc-mando.es-mandando {
    border-color: var(--esc-danger);
    background: rgba(255, 255, 255, .55);
}

/* Sin cambiar el grosor de la letra: la negrita ensancha el texto, y con ella
   el mando crecia tres pixeles al activarse y empujaba a su vecino. Tres
   pixeles no se ven, pero el salto si. El rojo ya dice cual manda. */
.esc-mando.es-mandando > .form-control,
.esc-mando.es-mandando > .btn {
    background: var(--esc-danger);
    color: #FFF;
}

/* El input de fecha trae su propio icono de calendario, que en azul oscuro
   sobre rojo no se ve. */
.esc-mando.es-mandando > input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.esc-mando.es-mandando > .btn:hover {
    background: #A93226;
}

.esc-mando.es-mandando > .esc-semana-hoy.es-aqui {
    color: rgba(255, 255, 255, .7);
}

/* La semana que se esta mirando en el buscador de huecos, con sus flechas.
   Sin ellas, la unica alternativa a la semana de la clase era anularla. */
.esc-huecos__semana {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.esc-huecos__semana-texto {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

.esc-huecos__flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    padding: 0;
    border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FFF;
    color: var(--esc-text-soft);
    cursor: pointer;
}

.esc-huecos__flecha:hover:not(:disabled) {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}

/* Al final del curso no hay semana siguiente que mirar: no hay clase que dar
   ahi, asi que la flecha se apaga en vez de llevar a una semana vacia. */
.esc-huecos__flecha:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* Semana y dia, en el centro de la barra: son el mando con el que se conduce
   la pantalla. Envoltorio con auto a los DOS lados, para que queden centrados
   de verdad y no "empujados hasta la mitad", que es lo que pasa apoyandolos en
   un solo auto. */
.esc-matriz-barra__centro {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1100px) {
    .esc-matriz-barra__centro {
        margin-left: 0;
        margin-right: 0;
    }
}

/* -------------------------------------------------------------------------
   LOS SIETE DIAS, A LA VISTA

   Un desplegable obliga a abrirlo para saber que dia se esta mirando y a
   abrirlo otra vez para cambiarlo. Con los siete delante, el dia se ve y se
   cambia de un golpe, y ademas se ve la semana entera: donde cae el sabado,
   cuantos quedan.
   ------------------------------------------------------------------------- */

.esc-dias {
    display: flex;
    align-items: stretch;
    gap: 1px;
    background: var(--esc-border);
}

.esc-dias__dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 30px;
    padding: 0 4px;
    border: 0;
    background: #F1F4F7;
    color: #78838F;
    font-family: var(--esc-font);
    line-height: 1.05;
    cursor: pointer;
}

.esc-dias__dia:hover:not(.es-elegido) {
    background: #E4E9EE;
    color: var(--esc-text);
}

/* El elegido en verde: es el unico dato que hay que leer de un golpe —cual de
   los siete se esta mirando— y el verde lo dice sin numero ni texto. */
.esc-dias__dia.es-elegido {
    background: var(--esc-green-border);
    color: #FFF;
    cursor: default;
}

.esc-dias__letra {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
}

.esc-dias__num {
    font-size: 12px;
    font-weight: 700;
}

/* El <select> sigue ahi y sigue siendo el que guarda el dia: se esconde a la
   vista pero no del teclado ni de un lector de pantalla. */
.esc-dias__oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* El mando que NO manda ahora mismo. Se queda en su sitio —la barra no cambia
   de forma al cambiar de vista, que obligaba a volver a buscar donde estaba
   cada cosa— pero apagado: sigue ahi, se puede usar, y no compite. */
.esc-mando.es-apagado {
    opacity: .6;
}

.esc-mando.es-apagado:hover {
    opacity: 1;
}

/* -------------------------------------------------------------------------
   QUE LA BARRA NO SE MUEVA

   Lo que aparece y desaparece empuja a todo lo que tiene al lado, y una
   pantalla en la que los controles cambian de sitio segun lo que estes
   mirando se siente endeble: hay que volver a buscar cada cosa.

   Asi que nada se esconde. Lo que no aplica ahora mismo se apaga, y lo que
   cambia de texto reserva su sitio.
   ------------------------------------------------------------------------- */

/* El ancho del aviso lo fija su texto mas largo, no el de ahora: sin esto,
   pasar de "5 cosas que no cuadran" a "Todo cuadra" corria de sitio lo que
   tuviera al lado cada vez que bajaba la cuenta. */
.esc-matriz-barra .esc-cal-avisos {
    min-width: 172px;
    justify-content: center;
}

/* El interruptor de fin de semana en vista de dia: se queda donde estaba, pero
   apagado y sin poder pulsarse. Uno que se puede pulsar y no hace nada es peor
   que uno apagado. */
.esc-matriz-barra__interruptor.es-apagado {
    opacity: .4;
}

.esc-matriz-barra__interruptor.es-apagado .esc-switch {
    cursor: not-allowed;
}

/* =============================================================================
   LA SEMANA ENTERA SIN BAJAR LA PAGINA

   La matriz se mira para COMPARAR —donde hay hueco el jueves si muevo esto del
   martes, que pistas quedan libres a las 18:00— y comparar dos cosas que no
   estan a la vez delante no se compara, se recuerda. Con scroll, media semana
   esta siempre fuera.

   Encoge lo que se puede encoger y NO esconde nada. Los huecos libres son las
   dianas del arrastre: esconderlos ahorraria la mitad del alto de un golpe y
   dejaria la pantalla sin sitio donde soltar, que es para lo que se usa.
============================================================================= */

.esc-matriz.es-compacta .esc-celda {
    gap: 3px;
    min-height: 0;
    padding: 3px 5px;
}

/* El hueco libre se queda —hay que poder soltar ahi— pero en una tira: su
   nombre de pista y nada mas. Es la mitad del alto de la rejilla. */
.esc-matriz.es-compacta .esc-celda--vacia {
    min-height: 0;
    padding: 1px 5px;
}

.esc-matriz.es-compacta .esc-celda__pista {
    font-size: 9px;
    line-height: 1.2;
}

.esc-matriz.es-compacta .esc-grupo {
    padding: 2px 5px;
    font-size: 10px;
    line-height: 1.15;
}

.esc-matriz.es-compacta .esc-grupo__traslado,
.esc-matriz.es-compacta .esc-grupo__resolver {
    width: 16px;
    height: 16px;
    font-size: 13px;
}

.esc-matriz.es-compacta .esc-celda--cerrada,
.esc-matriz.es-compacta .esc-celda--competicion {
    min-height: 0;
    margin-bottom: 2px;
    padding: 1px 4px;
    font-size: 8px;
}

.esc-matriz.es-compacta .esc-matriz__hora {
    padding: 3px 6px;
    font-size: 10px;
}

.esc-matriz.es-compacta .esc-matriz__cab {
    padding: 4px 6px;
    font-size: 10px;
}

.esc-matriz.es-compacta .esc-matriz__cab-nota {
    font-size: 8px;
}

/* La pista, dentro de la tarjeta. Fuera ocupaba una linea entera encima de
   cada una para decir lo mismo, y con veinte pistas eso son veinte lineas por
   celda solo de rotulos.

   En gris y antes que el nivel: es el sitio, no el que. En las celdas VACIAS
   el nombre se queda fuera, porque ahi es lo unico que hay y es lo que dice a
   que pista estas soltando. */
.esc-grupo__pista {
    flex: none;
    max-width: 62px;
    overflow: hidden;
    color: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Los huecos libres de una celda, juntos en una tira.

   Cada celda apila una subcelda por pista: con tres no pasa nada, con
   veinticinco la rejilla se va a miles de pixeles y el modo compacto no
   arregla nada, porque el problema no es el alto de cada fila sino cuantas
   hay. Lo que ocupa sitio sin decir nada son los huecos LIBRES: lo que se
   viene a ver es donde hay clase. */
.esc-libres {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.esc-libres__tira {
    width: 100%;
    padding: 2px 5px;
    border: 1px dashed var(--esc-border);
    border-radius: var(--esc-radius);
    background: #FAFBFC;
    color: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.esc-libres__tira:hover {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}

/* Abierta, la tira se queda arriba como rotulo de lo que ha desplegado. */
.esc-libres.es-abierta .esc-libres__tira {
    border-style: solid;
    background: #F1F4F7;
}

/* -------------------------------------------------------------------------
   SIN SCROLL DE VERDAD: TAMBIEN LO DE ALREDEDOR

   Encoger solo la rejilla no quitaba el scroll. En una pantalla de 720px de
   alto, la barra se lleva 218 —se envuelve en dos filas porque el desplegable
   de instalacion mide 350px el solo— y la ayuda del pie otros tantos. Lo que
   sobra no estaba solo en la rejilla.
   ------------------------------------------------------------------------- */

/* Los desplegables de filtro, a su sitio.

   Sueltos miden lo que mida su opcion MAS LARGA, no la elegida: el de
   instalacion pide 350px por "CLUB DE TENIS JUAN CARLOS FERRERO DE VILLENA",
   que son 44 caracteres que casi nunca estan en pantalla. Eso solo partia la
   barra en dos filas.

   El tope son 180px porque es lo que necesita el texto que SI se lee casi
   siempre: "Todas las instalaciones" mide 139 con la fuente de la barra, mas
   los 20 del relleno y los 20 de la flecha del desplegable. Los otros dos
   piden menos que eso por su cuenta —136 y 153— y el tope ni los roza.

   Elegida una instalacion de nombre largo si se recorta, y ahi el recorte es
   el mal menor: se acaba de elegir, se sabe cual es, y el desplegable abierto
   la sigue enseñando entera. */
body.es-matriz-compacta .esc-matriz-barra .esc-mando > .form-control {
    max-width: 180px;
}

/* El aviso deja de reservar tanto: en compacto lo que importa es que quepa
   todo. Sigue reservando sitio —para que bajar la cuenta no mueva lo de al
   lado— pero menos. */
body.es-matriz-compacta .esc-matriz-barra .esc-cal-avisos {
    min-width: 138px;
    padding: 0 8px;
    font-size: 11px;
}

/* Todo lo de la barra, una pizca mas estrecho. Es lo que hace que los mandos
   quepan en UNA fila de 40px en vez de dos: en una pantalla de 1280 se pasaban
   por unos 150px, y dos filas de 40 son 80px que salen del calendario. */
body.es-matriz-compacta .esc-matriz-barra .esc-mando > .btn,
body.es-matriz-compacta .esc-matriz-barra .esc-vista__btn {
    padding: 0 8px;
}

body.es-matriz-compacta .esc-dias__dia {
    min-width: 24px;
    padding: 0 2px;
}

body.es-matriz-compacta .esc-matriz-barra__interruptor .esc-switch__texto {
    font-size: 9px;
    max-width: 92px;
    line-height: 1.15;
    white-space: normal;
}

/* Los rotulos de encima de cada control: en compacto se van. Lo que hay debajo
   se entiende solo —una fecha, unos dias, dos botones de vista— y cada rotulo
   son 17px por toda la barra. */
body.es-matriz-compacta .esc-matriz-barra__campo > label {
    display: none;
}

body.es-matriz-compacta .esc-matriz-barra {
    gap: 8px;
    margin-bottom: 8px;
}

/* La leyenda de colores y la ayuda del pie: se quedan, mas pequeñas. Son las
   dos cosas que explican la pantalla, y quitarlas para ganar sitio deja a
   quien entra por primera vez sin saber que significa cada color. */
body.es-matriz-compacta .esc-matriz-leyenda {
    gap: 10px;
    font-size: 10px;
}

body.es-matriz-compacta .esc-tabla-ancha + .esc-ayuda,
body.es-matriz-compacta .esc-matriz + .esc-ayuda {
    margin-top: 6px;
    font-size: 10px;
}

body.es-matriz-compacta .esc-titulo {
    margin-bottom: 8px;
}

/* Los interruptores, mas juntos y mas pequeños: son cuatro y se envolvian en
   dos filas, que son 56px de barra para cuatro palabras. */
body.es-matriz-compacta .esc-matriz-barra__interruptor .esc-switch__texto {
    font-size: 10px;
}

body.es-matriz-compacta .esc-matriz-barra__interruptor {
    gap: 4px;
}

body.es-matriz-compacta .esc-matriz-leyenda {
    margin-right: 10px;
}

/* La fila vacia de una pista sin clase: el nombre y nada mas. Es la que se
   repite —una por pista y por franja— asi que cada pixel que se le quita se
   multiplica por todas. */
.esc-matriz.es-compacta .esc-celda--vacia {
    padding: 0 5px;
}

.esc-matriz.es-compacta .esc-celda--vacia .esc-celda__pista {
    font-size: 8px;
    line-height: 1.5;
}

.esc-matriz.es-compacta .esc-matriz__dia > .esc-celda + .esc-celda {
    border-top-style: dotted;
}

/* Y la tarjeta, al minimo que sigue siendo legible y agarrable. */
.esc-matriz.es-compacta .esc-grupo {
    gap: 4px;
    padding: 1px 4px;
    min-height: 18px;
}

/* -------------------------------------------------------------------------
   LA REJILLA OCUPA LO QUE QUEDA, NI MAS NI MENOS

   El alto no se escribe aqui: lo mide el JS mirando donde empieza la rejilla y
   donde acaba la ventana. Cualquier numero escrito a mano es correcto en un
   monitor y falso en el siguiente, y ademas depende de si la barra se envuelve
   en una fila o en dos, que a su vez depende del ancho.

   Las filas se reparten ese alto a partes iguales. Si a alguna celda no le
   llega, esa celda se desplaza por dentro: la pagina no.
   ------------------------------------------------------------------------- */

.esc-matriz.es-compacta {
    height: var(--esc-alto-rejilla, auto);

    /* La primera fila es la cabecera y se queda con lo suyo; las demas se
       reparten lo que sobre. minmax(0, 1fr) y no 1fr a secas: sin el minimo a
       cero, una fila con mucho contenido se niega a encoger y devuelve el
       scroll. */
    grid-auto-rows: minmax(0, 1fr);
}

.esc-matriz.es-compacta > .esc-matriz__cab {
    align-self: start;
}

.esc-matriz.es-compacta .esc-matriz__dia,
.esc-matriz.es-compacta .esc-celda {
    min-height: 0;
}

/* Lo que no quepa en una celda se desplaza DENTRO de ella. Es el unico sitio
   donde queda scroll, y es el correcto: afecta a la celda que se ha pasado, no
   a la pantalla entera. */
.esc-matriz.es-compacta .esc-matriz__dia {
    overflow-y: auto;
}

/* EL AVISO, AL FINAL DE LA SEGUNDA FILA

   Arriba se llevaba 127px de la fila de selectores, y en una pantalla de 1.280
   eso bastaba para tirar abajo al mando de vista: 48px de calendario por un
   aviso que casi siempre dice que todo va bien.

   Abajo no le quita sitio a nadie —esa fila la ocupan la leyenda y tres
   interruptores, y sobra hueco a la derecha— y se sigue viendo igual, porque
   lo que lo hace visible no es donde esta sino que es ambar y parpadea.

   101 para ir despues de los interruptores (100) y de la leyenda (99). */
#esc-matriz-alerta-campo {
    order: 101;
    justify-content: center;   /* el campo es una columna sin rotulo */
}

/* -------------------------------------------------------------------------
   LA AYUDA DEL PIE, EN UN BOTON REDONDO

   Eran cuatro lineas de texto gris debajo de la rejilla. Se leen UNA vez
   —como se arrastra una tarjeta— y despues se quedaban ahi todos los dias
   ocupando cuarenta pixeles de calendario. En un circulo siguen estando, a
   un raton de distancia, y el pie pasa de 40px a 22.
   ------------------------------------------------------------------------- */

.esc-matriz-pie {
    margin: 6px 0 0;
    line-height: 1;
}

.esc-ayuda-redonda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--esc-border);
    border-radius: 50%;
    background: #FFF;
    color: var(--esc-text-soft);
    font-size: 13px;
    line-height: 1;
    cursor: help;
}

.esc-ayuda-redonda:hover,
.esc-ayuda-redonda:focus-visible {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}

/* La burbuja del pie, HACIA ARRIBA y anclada por la IZQUIERDA. La usan la
   matriz semanal y el banco de entrenamientos, donde la ayuda es lo ultimo de
   la pantalla: abajo no hay sitio donde pintarla y quedaria cortada por el
   canto de la ventana. Y anclada a la izquierda porque de serie se centra
   sobre el elemento, y sobre una redonda de 22px pegada al margen izquierdo
   la burbuja se saldria de la pagina. */
.esc-ayuda-pie[data-ayuda]::after {
    top: auto;
    bottom: calc(100% + 8px);
    left: 0;
    width: 340px;
    transform: none;
}

/* LA AYUDA, EN LA BANDA DE CADA NIVEL

   Encima de un color que cambia con el nivel, en blancos y transparencias:
   la redonda gris con borde gris de antes desaparecia sobre el celeste de
   iniciacion. */
.esc-ayuda-nivel {
    flex: none;
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .16);
    color: #FFF;
    text-shadow: none;
}

.esc-ayuda-nivel:hover,
.esc-ayuda-nivel:focus-visible {
    border-color: #FFF;
    background: rgba(255, 255, 255, .32);
    color: #FFF;
}

/* La burbuja, mas ancha de lo normal —son tres frases— y anclada por la
   IZQUIERDA: de serie se centra sobre el elemento, y sobre una redonda de
   22px eso la deja sobresaliendo por los dos lados. */
.esc-ayuda-nivel[data-ayuda]::after {
    left: 0;
    width: 340px;
    transform: none;
}

/* LAS COLUMNAS DE LA BANDA, SEPARADAS

   Los titulos van seguidos en la misma banda oscura y no habia nada entre
   ellos: con tres columnas se adivina donde acaba uno y empieza el siguiente,
   con las veinticinco pistas que tiene dadas de alta un club mediano, no. Y
   en la vista de semana pasa lo mismo en cuanto un dia lleva debajo el nombre
   de una competicion.

   Una raya blanca al 20%: sobre el azul oscuro de la banda se ve, y sobre el
   morado de un dia con competicion tambien, que es el otro fondo que puede
   tener esta misma celda.

   Con el adyacente y no con una clase: asi vale para las dos vistas —pistas
   en una, dias en la otra— y la primera columna no lleva raya a su izquierda,
   que ahi no separa nada. */
.esc-matriz__cab + .esc-matriz__cab {
    border-left: 1px solid rgba(255, 255, 255, .2);
}

/* -------------------------------------------------------------------------
   EL AVISO DE LA BARRA ABRE LA LISTA ENTERA

   Decia cuantas clases se quedan sin pista, pero para resolverlas habia que
   ir buscandolas por la rejilla una a una; y las del fin de semana, con el
   filtro puesto, no estaban en ninguna parte. Ahora se pulsa y salen todas.

   El puntero pasa de "help" a "pointer": ya no es solo un rotulo con burbuja,
   se pulsa. La burbuja sigue, diciendo lo mismo de siempre.
   ------------------------------------------------------------------------- */


/* La lista. Una fila por clase, separadas por una raya tenue: son cosas del
   mismo tipo y lo que hay que ver de un golpe es cuantas hay, no cada una
   metida en su propia caja. */

.esc-avisos__fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 2px;
}

.esc-avisos__fila + .esc-avisos__fila {
    border-top: 1px solid var(--esc-border-soft);
}

.esc-avisos__que {
    flex: 1;
    min-width: 0;
}

.esc-avisos__grupo {
    color: var(--esc-title);
    font-size: 13px;
    font-weight: 700;
}

.esc-avisos__cuando {
    color: var(--esc-text);
    font-size: 12px;
}

.esc-avisos__por {
    color: var(--esc-text-soft);
    font-size: 11px;
}

/* El boton es el MISMO que lleva la tarjeta en la rejilla —misma clase, mismo
   texto, mismo aviso, mismo ambar parpadeando— porque es la misma decision.

   Lo que cambia es el tamaño: en la tarjeta es una banda de 9px que ocupa el
   ancho entero porque ahi no cabe otra cosa, y aqui hay sitio para un boton
   normal que no se encoge aunque el nombre del grupo sea largo. */
.esc-avisos .esc-grupo__resolver {
    flex: none;
    width: auto;
    margin-top: 0;
    padding: 7px 12px;
    font-size: 11px;
}

/* =============================================================================
   ASIGNACION DIARIA DE EJERCICIOS

   Un dia a la izquierda —los grupos que dan clase— y el banco a la derecha.
   Se arrastra de un lado al otro.

   La pantalla entera esta montada sobre una idea: lo que se mira son DOCE
   tarjetas a la vez, no una. Todo lo que se repite doce veces —la banda de
   color, los cuatro datos, la barra de minutos— tiene que leerse de un
   vistazo y sin estorbar al de al lado.
============================================================================= */

.esc-asig-barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

/* Los siete dias de la semana en la que se esta.

   Cuadrados y no un desplegable: se ve donde cae el fin de semana, cuantos
   quedan, y se salta a otro dia de un clic. Es el mismo gesto que la matriz. */

.esc-asig-semana {
    display: flex;
    gap: 4px;
}

.esc-asig-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--esc-border);
    border-radius: 8px;
    background: #FFF;
    color: var(--esc-text-soft);
    line-height: 1.1;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.esc-asig-dia:hover {
    border-color: var(--esc-accent);
    transform: translateY(-1px);
}

.esc-asig-dia__letra {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.esc-asig-dia__num {
    font-size: 13px;
    font-weight: 700;
}

/* Hoy se marca con un punto, no con color: el color esta reservado para decir
   cual se esta mirando, y dos colores compitiendo no dicen ninguna de las dos
   cosas. */
.esc-asig-dia.is-hoy::after {
    content: '';
    width: 4px;
    height: 4px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--esc-accent);
}

.esc-asig-dia.is-activo {
    border-color: var(--esc-danger);
    background: var(--esc-danger);
    color: #FFF;
}

.esc-asig-dia.is-activo.is-hoy::after {
    background: #FFF;
}

/* El anillo: cuantos grupos del dia llevan algo preparado.

   Un anillo y no un numero suelto porque lo que importa no es el dato, es lo
   que FALTA: media vuelta sin pintar se ve desde la otra punta de la mesa, y
   "3 de 7" hay que leerlo. El relleno es un conic-gradient gobernado por una
   variable, asi que animarlo es cambiar un porcentaje. */

.esc-asig-marcador {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--esc-text-soft);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.esc-asig-marcador__anillo {
    --esc-anillo: 0%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: conic-gradient(var(--esc-accent) var(--esc-anillo),
                               var(--esc-border-soft) 0);
    color: var(--esc-title);
    font-size: 11px;
    font-weight: 700;
    transition: background .35s ease;
}

.esc-asig-marcador__anillo::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    border-radius: 50%;
    background: #FFF;
}

.esc-asig-marcador__anillo span {
    position: relative;
}

.esc-asig-marcador__anillo.es-lleno {
    background: conic-gradient(var(--esc-green) 100%, var(--esc-green) 0);
    color: var(--esc-green);
}

/* -------------------------------------------------------------------------
   EL REPARTO: GRUPOS A LA IZQUIERDA, BANCO A LA DERECHA
   ------------------------------------------------------------------------- */

/* EL CUERPO SE LLEVA LA FILA ENTERA

   Antes esto era una rejilla de dos columnas con el banco clavado a la
   derecha, y el banco se llevaba 340px TODO el rato: tambien mientras se
   ordenaba una sesion, se leia una tarjeta o se plegaban niveles, que es la
   mayor parte del tiempo. Ahora los dos bancos viven en un cajon que se abre
   cuando se va a coger algo, y las tarjetas se quedan con el ancho entero
   —que a 1.280px es la diferencia entre tres tarjetas por fila y cuatro—. */

.esc-asig {
    display: block;
}

@media (max-width: 1100px) {
    .esc-asig {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Las tarjetas se reparten solas por el ancho que haya. Sin numero de columnas
   fijo: en un portatil caben dos y en la pantalla del despacho cuatro, y en
   las dos tiene que verse el dia entero sin bajar. */
/* LAS FILAS DE NIVEL

   Un martes de escuela son doce o quince tarjetas, y no se trabaja en todas a
   la vez: se prepara "lo de los peques" y despues "lo del grupo de
   competicion". Cada nivel es un bloque con su fila de color arriba, y la fila
   se pliega: lo que no se esta tocando deja de ocupar pantalla sin dejar de
   estar.

   Plegado, la fila sigue diciendo lo que hay debajo —entrenadores, grupos y
   deportistas— y sigue teniendo su boton de lote, asi que se le puede poner
   trabajo a un nivel entero sin desplegarlo. */

.esc-asig-niveles {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.esc-asig-nivel-bloque {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.esc-asig-nivel-fila {
    --esc-nivel: #8E9BA8;
    display: flex;
    align-items: stretch;
    border-radius: 10px;
    /* SIN overflow: hidden. Recortaba las esquinas de los dos unicos hijos
       —plegar y LOTE—, pero tambien el globo de la ayuda que ahora vive
       dentro: se veia la mitad de arriba y nada mas. Las esquinas se las
       redondea cada hijo por su lado. */
    background: #8E9BA8;
    color: #FFF;
    box-shadow: var(--esc-shadow);
}

/* Todo lo que se lee va dentro del boton: la fila entera es la zona pulsable
   y no hay que apuntar a una flecha de diez pixeles. */
.esc-asig-nivel-plegar {
    flex: 1;
    border-radius: 10px 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    /* El blanco sobre los colores claros del maestro de niveles se queda justo
       de contraste; la sombra lo asienta sin oscurecer la fila. */
    text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
}

.esc-asig-nivel-plegar:hover {
    background: rgba(255, 255, 255, .12);
}

.esc-asig-nivel-plegar:focus-visible {
    outline: 2px solid #FFF;
    outline-offset: -3px;
}

.esc-asig-nivel-flecha {
    font-size: 14px;
    transition: transform .16s ease;
}

.esc-asig-nivel-bloque.es-plegado .esc-asig-nivel-flecha {
    transform: rotate(-90deg);
}

.esc-asig-nivel-nombre {
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.esc-asig-nivel-cuentas {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-left: auto;
    padding-left: 12px;
    font-size: 11px;
}

.esc-asig-nivel-cuenta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.esc-asig-nivel-cuenta .ph {
    opacity: .8;
}

.esc-asig-nivel-cuenta strong {
    font-weight: 700;
}

/* Plegado: las tarjetas se van, la fila se queda. */
.esc-asig-nivel-bloque.es-plegado .esc-asig-grupos {
    display: none;
}

/* EL BOTON DE LOTE, A LA DERECHA DEL TODO

   Separado del resto de la fila por su propia raya y con la lupa delante: es
   la misma puerta que la de la tarjeta —se entra a montar una sesion— solo que
   la que se monta aqui cae en todos los grupos que cuelgan de la fila. */
/* EN BLANCO MACIZO, SIEMPRE.

   Estaba en blanco al 16% sobre la banda de color: sobre un nivel oscuro se
   adivinaba y sobre uno claro desaparecia. Un boton no puede depender del
   color que el club le haya puesto a un nivel para verse.

   Blanco solido con texto oscuro: se ve igual sobre los seis colores del
   maestro, y ademas es el unico elemento macizo de la fila, asi que se
   encuentra sin buscarlo. */
.esc-asig-lote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    border: 0;
    border-radius: 0 10px 10px 0;
    border-left: 1px solid rgba(255, 255, 255, .38);
    background: #FFF;
    color: var(--esc-title);
    text-shadow: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .12s ease;
}

.esc-asig-lote .ph {
    font-size: 15px;
}

.esc-asig-lote:hover {
    background: #F1F8FD;
    color: var(--esc-accent);
}

.esc-asig-lote:focus-visible {
    outline: 2px solid #FFF;
    outline-offset: -3px;
}

.esc-asig-grupos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-content: start;
    gap: 12px;
}

.esc-asig-tarjeta {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--esc-border);
    border-radius: 12px;
    background: #FFF;
    box-shadow: var(--esc-shadow);
    overflow: hidden;
    transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}

.esc-asig-tarjeta:hover {
    box-shadow: var(--esc-shadow-lift);
}

.esc-asig-tarjeta.is-elegida {
    border-color: var(--esc-accent);
    box-shadow: 0 0 0 2px rgba(15, 157, 234, .18), var(--esc-shadow-lift);
}

/* LA BANDA DE NIVEL, DE LADO A LADO

   El nivel es lo que se busca con la vista cuando hay doce tarjetas en
   pantalla: "¿donde estan los de iniciacion?". En una chapa pequeña dentro del
   titulo habia que ir leyendo tarjeta por tarjeta; en una franja de borde a
   borde se barre la pantalla de un golpe y los grupos del mismo nivel se leen
   como filas del mismo color.

   Dentro van las dos cosas: el (GR)n, que sale del ORDEN del nivel y dice si
   va por delante o por detras de otro, y el nombre que le haya puesto el club.
   El codigo se separa con una raya translucida en vez de con otro color: sobre
   una franja de color, un segundo color es ruido. */

.esc-asig-banda {
    --esc-nivel: #8E9BA8;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 4px 10px;
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    /* El texto blanco sobre los colores mas claros del maestro de niveles
       —un celeste, un ambar— se queda justo de contraste; la sombra lo asienta
       sin oscurecer la franja. */
    text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
}

.esc-asig-banda__gr {
    padding-right: 8px;
    border-right: 1px solid rgba(255, 255, 255, .45);
}

.esc-asig-banda__nombre {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-asig-tarjeta__cab {
    --esc-nivel: #8E9BA8;
    position: relative;
    padding: 12px 12px 10px;
    background: linear-gradient(to bottom,
                color-mix(in srgb, var(--esc-nivel) 9%, #FFF), #FFF);
}

/* color-mix no lo entienden todos los navegadores; sin el, fondo blanco y la
   banda de arriba sigue diciendo el nivel. */
@supports not (background: color-mix(in srgb, red 9%, #FFF)) {
    .esc-asig-tarjeta__cab {
        background: #FFF;
    }
}

.esc-asig-tarjeta__titulo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    /* El hueco de LAS DOS lupas, que viven en la esquina de la cabecera: su
       sangria + las dos + el aire entre ellas + el aire hasta el nombre. La
       casilla de marcar ya no esta aqui: se fue a la banda de nivel.

       El hueco se lo hace el titulo y no un position absolute suelto: asi un
       nombre largo se envuelve por debajo de las lupas en vez de pasarles por
       encima. */
    padding-left: calc(10px + 2 * var(--esc-lupa) + 12px);
}

.esc-asig-tarjeta__nombre {
    color: var(--esc-title);
    font-size: 14px;
    font-weight: 700;
}

.esc-asig-chapa {
    padding: 2px 7px;
    border-radius: 20px;
    color: #FFF;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-asig-tarjeta__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 6px;
}

.esc-asig-dato {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--esc-text-soft);
    font-size: 11px;
    white-space: nowrap;
}

.esc-asig-dato .ph {
    font-size: 13px;
    opacity: .7;
}

/* La casilla de marcar, arriba a la derecha y discreta: se usa solo cuando se
   quiere repartir a varios, y el resto del tiempo no tiene que competir con
   el nombre del grupo. */
.esc-asig-marca {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    cursor: pointer;
}

.esc-asig-marca input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.esc-asig-marca span {
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid var(--esc-border);
    border-radius: 5px;
    background: #FFF;
    transition: background .12s ease, border-color .12s ease;
}

.esc-asig-marca input:checked + span {
    border-color: var(--esc-accent);
    background: var(--esc-accent);
}

.esc-asig-marca input:checked + span::after {
    content: '';
    display: block;
    width: 4px;
    height: 8px;
    margin: 2px auto 0;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.esc-asig-marca input:focus-visible + span {
    box-shadow: 0 0 0 2px rgba(15, 157, 234, .25);
}

/* LA CASILLA DENTRO DE LA BANDA

   En la esquina de la cabecera cada casilla caia a una altura distinta segun
   lo que midiera la tarjeta de al lado. En la banda quedan todas en la misma
   columna y a la misma altura: marcar seis grupos es bajar en linea recta.

   Sobre color, la casilla vacia va en blanco translucido y la marcada en
   blanco macizo con el gancho del color del nivel: al reves —gancho blanco
   sobre fondo blanco— no se veria. */

.esc-asig-marca.es-banda {
    position: static;
    display: flex;
    align-items: center;
}

.esc-asig-marca.es-banda span {
    width: 16px;
    height: 16px;
    border-color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .22);
}

.esc-asig-marca.es-banda input:checked + span {
    border-color: #FFF;
    background: #FFF;
}

.esc-asig-marca.es-banda input:checked + span::after {
    width: 3px;
    height: 7px;
    margin-top: 1px;
    border-color: var(--esc-nivel);
}

.esc-asig-marca.es-banda input:focus-visible + span {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}

.esc-asig-tarjeta__choque {
    padding: 6px 12px;
    background: var(--esc-alerta);
    color: #1A2B3C;
    font-size: 10px;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   LA SESION: LAS LINEAS DE EJERCICIO
   ------------------------------------------------------------------------- */

.esc-asig-sesion {
    flex: 1;
    min-height: 62px;
    padding: 6px;
    border-top: 1px solid var(--esc-border-soft);
    transition: background .12s ease, box-shadow .12s ease;
}

/* Al arrastrar un ejercicio por encima, la caja entera se ofrece. Un borde
   punteado y no un color de fondo: el fondo lo usa la tarjeta para otras
   cosas y dos avisos de fondo a la vez no se distinguen. */
.esc-asig-sesion.is-destino {
    background: #EAF6FC;
    box-shadow: inset 0 0 0 2px var(--esc-accent);
}

.esc-asig-sesion__vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border: 1px dashed var(--esc-border);
    border-radius: 8px;
    color: var(--esc-text-soft);
    font-size: 11px;
}

/* CADA EJERCICIO, UNA PIEZA

   Eran lineas blancas sobre fondo blanco, pegadas unas a otras y sin nada que
   dijera donde acaba una y empieza la siguiente: con cinco ejercicios puestos,
   los minutos de uno parecian los del de arriba.

   Con su borde y su aire cada una se ve como lo que es, una pieza suelta que
   ademas se coge y se cambia de sitio. */
.esc-asig-linea {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 4px 4px 2px;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    background: #FFF;
    cursor: grab;
}

.esc-asig-linea + .esc-asig-linea {
    margin-top: 4px;
}

/* Azul al pasar por encima, como todo lo que se puede coger en el modulo. La
   raya de "aqui va a caer" es otra cosa y se sigue distinguiendo: va por un
   solo borde y de dos pixeles. */
.esc-asig-linea:hover {
    border-color: var(--esc-accent);
    background: #F6F8FA;
}

.esc-asig-linea.is-arrastrando {
    opacity: .4;
}

/* Donde va a caer la linea que se arrastra: una raya azul por el borde por el
   que ha entrado el raton. Es lo unico que hace falta saber. */
.esc-asig-linea.es-antes {
    box-shadow: inset 0 2px 0 var(--esc-accent);
}

.esc-asig-linea.es-despues {
    box-shadow: inset 0 -2px 0 var(--esc-accent);
}

/* EL ASA, QUE SE VEA

   Iba en el gris de los bordes —#DBE0E4 sobre blanco, un contraste de 1,25:1—
   y solo se encendia al pasar el raton por encima: para saber que se puede
   agarrar habia que pasar antes por encima, y para eso hay que sospechar que
   hay algo. En una tablet, donde no existe el "pasar por encima", no aparecia
   nunca.

   Ahora es lo mismo que el asa del taller: una cajita con su borde, siempre
   visible y del gris del texto flojo, que sobre blanco da 4,2:1. Y con
   superficie: 20x30 se agarra con el dedo, catorce pixeles de icono suelto
   no. */
.esc-asig-linea__asa {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    align-self: stretch;
    min-height: 26px;
    border: 1px solid #CFD6DC;
    border-radius: 5px;
    background: #EBEFF3;
    color: #5B6573;
    font-size: 14px;
    cursor: grab;
}

.esc-asig-linea:hover .esc-asig-linea__asa {
    border-color: var(--esc-accent);
    background: #FFF;
    color: var(--esc-accent);
}

.esc-asig-linea__asa:active {
    cursor: grabbing;
}


.esc-asig-linea__n {
    flex: none;
    width: 16px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

/* La lupa a la izquierda del nombre: dice "esto se abre". Siempre visible en
   el azul del acento —que es el color de lo pulsable en el modulo— y con
   superficie suficiente para el dedo. Se enciende del todo al pasar por
   encima de la linea. */
.esc-asig-linea__lupa {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--esc-accent);
    font-size: 13px;
    cursor: pointer;
    opacity: .75;
}

.esc-asig-linea:hover .esc-asig-linea__lupa,
.esc-asig-linea__lupa:hover {
    opacity: 1;
    background: #EAF4FC;
}

.esc-asig-linea__nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-asig-atr {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Los tres numeros de la linea. Se editan aqui mismo: son tres campos de dos
   cifras, y abrir una ventana para escribir "3" es mas gesto del que ahorra. */
.esc-asig-num {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    margin: 0;
    color: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 600;
}

.esc-asig-num input {
    width: 24px;
    padding: 1px 2px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--esc-title);
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.esc-asig-num input:hover {
    border-color: var(--esc-border);
}

.esc-asig-num input:focus {
    border-color: var(--esc-accent);
    background: #FFF;
    outline: none;
}

.esc-asig-linea__quitar {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--esc-border);
    cursor: pointer;
}

.esc-asig-linea:hover .esc-asig-linea__quitar {
    color: var(--esc-text-soft);
}

.esc-asig-linea__quitar:hover {
    background: #FDEDEC;
    color: var(--esc-danger);
}

/* -------------------------------------------------------------------------
   EL PIE: MINUTOS PUESTOS FRENTE A LO QUE DURA LA CLASE

   Es el dato que dice si la sesion esta terminada. Un monitor no piensa
   "llevo cuatro ejercicios", piensa "me faltan diez minutos".
   ------------------------------------------------------------------------- */

/* LOS MINUTOS Y LAS ACCIONES, DENTRO DE LA BANDA DE COLOR

   Estaban en un pie propio al final de la tarjeta. Ahi "cuanto llevo puesto"
   queda a media pantalla del grupo al que pertenece en cuanto la sesion tiene
   ocho lineas, y es justo lo que se mira mientras se le va poniendo.

   Encima de un color que cambia con el nivel no valen los grises: todo se
   dibuja con blancos y transparencias, que se leen igual sobre el celeste de
   iniciacion que sobre el granate de competicion. */

/* LA LINEA DE LOS MINUTOS: ABAJO, DE LADO A LADO Y DEL COLOR DEL NIVEL.

   Era un trozo de barra de cuarenta pixeles metido entre la casilla y los
   botones: habia que mirarla de cerca para saber si la clase iba por la mitad
   o por el final.

   Ahora cruza el banner entero por su canto de abajo. Es la unica linea
   horizontal de la tarjeta, asi que se lee desde el otro lado de la pista, y
   ademas hace de remate entre la banda de color y el cuerpo blanco.

   Sobre carril blanco y rellena con el color del nivel —el mismo de la banda
   de arriba—: lo que se llena es la clase de ESTE grupo, y el color lo dice
   sin escribirlo. */
/* EL PIE DE LA TARJETA: la linea del tiempo y su cuenta.

   Del color del nivel, el mismo de la banda de arriba, asi que la tarjeta
   queda enmarcada: color arriba, color abajo y el trabajo en medio.

   Y cada cosa en su sitio: la banda de arriba es lo que se HACE —marcar,
   copiar, trasladar, guardar, vaciar— y esto es lo que HAY, cuanto llevas
   puesto de lo que dura la clase. Estaban las dos en la misma fila,
   peleandose por el ancho. */
.esc-asig-banda__pie {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;      /* pegado abajo aunque la tarjeta crezca */
    padding: 6px 10px;
    background: var(--esc-nivel, #8E9BA8);
    color: #FFF;
    /* El mismo texto en versalitas que la banda de arriba: son las dos tapas
       de lo mismo. */
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
}

.esc-asig-barra-min {
    flex: 1;
    min-width: 40px;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .22);
    overflow: hidden;
}

.esc-asig-barra-min span {
    display: block;
    height: 100%;
    background: #FFF;
    transition: width .3s ease;
}

/* Pasarse de minutos se dice en rojo sobre el carril blanco: ahi si se
   distingue de cualquier color de nivel. */
/* Pasarse de minutos, en el amarillo de alerta: sobre la franja oscura del pie
   se distingue de cualquier color de nivel. */
.esc-asig-barra-min.es-pasado span {
    background: var(--esc-alerta);
}

.esc-asig-tarjeta__min {
    flex: none;
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.esc-asig-tarjeta__min.es-pasado {
    color: var(--esc-alerta);
}

/* El de guardar va en icono y no en palabra: la banda ya tiene dos acciones
   con letra, y un disquete se reconoce sin leerlo. El nombre entero esta en su
   title, que es donde se mira cuando no se esta seguro. */
.esc-asig-tarjeta__accion.es-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    padding: 2px 0;
    font-size: 12px;
}

/* stretch y no center: el de icono mide lo que mide su disquete —18px— y al
   lado de los de texto, de 26, quedaba hundido en la fila. */
.esc-asig-tarjeta__acciones {
    align-items: stretch;
}

/* Las acciones, juntas y pegadas a la derecha: si la tarjeta es estrecha bajan
   todas a la vez en vez de dejarse una sola colgando. */
.esc-asig-tarjeta__acciones {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

/* Sin versalitas, al reves que el resto de la banda: "COPIAR DE HACE 7 DÍAS"
   ocupa un tercio de la tarjeta y deja a la barra de minutos sin sitio. */
/* Lo mismo que el LOTE y por lo mismo: blanco macizo. En blanco al 16% sobre
   la banda de color, estas tres se veian o no segun el nivel del grupo. */
.esc-asig-tarjeta__accion {
    flex: none;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 5px;
    background: #FFF;
    color: var(--esc-title);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-shadow: none;
    text-transform: none;
    cursor: pointer;
}

.esc-asig-tarjeta__accion:hover {
    background: #F1F8FD;
    color: var(--esc-accent);
}

/* -------------------------------------------------------------------------
   EL BANCO

   Pegado arriba mientras se baja por los grupos: se arrastra DESDE aqui, y
   una columna que se va con el scroll obliga a subir a por cada ejercicio.
   ------------------------------------------------------------------------- */

/* EL CAJON LATERAL

   Los dos bancos se abren aqui. Por encima de la pantalla, pegado a la
   derecha, y SIN VELO DETRAS a proposito: desde el banco se arrastra hasta las
   tarjetas, y un velo que atrapa el raton acabaria con lo unico que tiene que
   seguir funcionando con el cajon abierto. Lo de debajo sigue vivo; el cajon
   es una herramienta que se saca, no una ventana que interrumpe.

   Por debajo del modal (1070) y por encima de todo lo demas: si se abre el
   taller, el taller manda. */

.esc-cajon {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: min(400px, 92vw);
    border-left: 1px solid var(--esc-border);
    background: #FFF;
    box-shadow: -10px 0 30px rgba(26, 43, 60, .18);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform .22s ease, visibility .22s;
}

.esc-cajon.is-abierto {
    transform: none;
    visibility: visible;
}

.esc-cajon__cab {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 12px 14px;
    background: var(--esc-navy-head);
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.esc-cajon__cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .14);
    color: #FFF;
    font-size: 14px;
    cursor: pointer;
}

.esc-cajon__cerrar:hover {
    background: rgba(255, 255, 255, .3);
}

/* Los dos botones que los abren. Encendidos mientras su cajon esta abierto,
   que si no no hay forma de saber cual de los dos se esta mirando. */
.esc-asig-bancos .btn.es-abierto {
    border-color: var(--esc-accent);
    background: var(--esc-accent);
    color: #FFF;
}

.esc-asig-banco {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    background: #FFF;
    overflow: hidden;
}

.esc-asig-banco__cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: var(--esc-navy-head);
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.esc-asig-banco__cuenta {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .18);
    font-size: 10px;
}

.esc-asig-banco__buscar {
    position: relative;
    padding: 10px 12px 6px;
}

.esc-asig-banco__buscar .ph {
    position: absolute;
    top: 50%;
    left: 22px;
    margin-top: -4px;
    color: var(--esc-text-soft);
    font-size: 14px;
    pointer-events: none;
}

.esc-asig-banco__buscar input {
    padding-left: 30px;
}

/* El area en pastillas: son tres, se ven las tres, y se cambia de una a otra
   de un clic. En desplegable habria que abrirlo para saber cual esta puesta. */

.esc-asig-areas {
    display: flex;
    gap: 4px;
    padding: 0 12px 8px;
}

.esc-asig-area {
    flex: 1;
    padding: 4px 2px;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    background: #FFF;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.esc-asig-area:hover {
    border-color: var(--esc-accent);
}

.esc-asig-area.is-activa {
    border-color: var(--esc-accent);
    background: var(--esc-accent);
    color: #FFF;
}

.esc-asig-filtros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 0 12px 10px;
}

.esc-asig-filtros .form-control {
    height: 30px;
    padding: 0 6px;
    font-size: 11px;
}

/* Cuando hay grupos marcados el banco cambia de modo, y se dice aqui: pegado
   a los botones que lo hacen, no en un aviso al otro lado de la pantalla. */
.esc-asig-destino {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #EAF6FC;
    border-top: 1px solid #BCDFF2;
    border-bottom: 1px solid #BCDFF2;
    color: var(--esc-accent);
    font-size: 11px;
    font-weight: 700;
}

.esc-asig-destino__soltar {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.esc-asig-lista {
    flex: 1;
    padding: 8px 10px 12px;
    overflow-y: auto;
}

/* Cada ejercicio. La raya de la izquierda dice el area de un vistazo: no hace
   falta leer para saber si es de pista o de gimnasio. */

.esc-asig-ej {
    position: relative;
    margin-bottom: 6px;
    padding: 8px 32px 8px 10px;
    border: 1px solid var(--esc-border-soft);
    border-left: 3px solid var(--esc-border);
    border-radius: 8px;
    background: #FFF;
    cursor: grab;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.esc-asig-ej:hover {
    border-color: var(--esc-border);
    box-shadow: var(--esc-shadow);
    transform: translateY(-1px);
}

.esc-asig-ej.is-arrastrando {
    opacity: .4;
}

.esc-asig-ej.es-deportivo { border-left-color: var(--esc-green); }
.esc-asig-ej.es-fisico    { border-left-color: var(--esc-accent); }
.esc-asig-ej.es-otros     { border-left-color: #B9A0D6; }

.esc-asig-ej__cab {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.esc-asig-ej__nombre {
    flex: 1;
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.esc-asig-ej__objetivo {
    margin-top: 2px;
    overflow: hidden;
    color: var(--esc-text-soft);
    font-size: 10px;
    line-height: 1.3;
    /* Dos lineas y corta: el objetivo situa, pero el banco tiene que poder
       recorrerse, y con cinco lineas por ejercicio caben cuatro en pantalla. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.esc-asig-ej__pie {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 5px;
}

.esc-asig-etiqueta {
    padding: 1px 6px;
    border: 1px solid var(--esc-border);
    border-radius: 20px;
    color: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 600;
}

.esc-asig-ej__autor {
    margin-top: 4px;
    color: var(--esc-text-soft);
    font-size: 9px;
    font-style: italic;
    opacity: .8;
}

.esc-asig-ej__mas {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    background: #FFF;
    color: var(--esc-text-soft);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.esc-asig-ej__mas:hover {
    border-color: var(--esc-accent);
    background: var(--esc-accent);
    color: #FFF;
}

/* En modo reparto el + deja de ser "elige uno" y pasa a ser "a todos estos".
   Cambia de significado, asi que cambia de aspecto. */
.esc-asig-lista.es-reparto .esc-asig-ej__mas {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}

/* Mientras se arrastra un ejercicio, las tarjetas se levantan un poco: dice
   sin palabras que son ellas las que reciben. */
body.es-asig-arrastrando .esc-asig-sesion {
    background: #F6F8FA;
    box-shadow: inset 0 0 0 1px var(--esc-border);
}

.esc-asig-vacio {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 34px 20px;
    border: 1px dashed var(--esc-border);
    border-radius: 12px;
    color: var(--esc-text-soft);
    font-size: 12px;
    text-align: center;
}

.esc-asig-vacio .ph {
    font-size: 28px;
    opacity: .45;
}

.esc-asig-vacio strong {
    color: var(--esc-title);
    font-size: 13px;
}

.esc-asig-pie {
    margin: 10px 0 0;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .esc-asig-dia,
    .esc-asig-ej,
    .esc-asig-tarjeta,
    .esc-asig-barra-min span,
    .esc-asig-marcador__anillo {
        transition: none;
    }
}

/* =============================================================================
   EL TALLER: UN GRUPO A FONDO

   La tarjeta del dia sirve para repartir rapido; preparar de verdad la sesion
   de un grupo es otra cosa. Tres columnas, en el orden en que se trabaja:
   quien esta -> que hay en el banco -> que le pongo.
============================================================================= */

/* La caja del taller ocupa casi todo: aqui no se lee un dato, se trabaja un
   rato largo, y cada centimetro que se le quita a la ventana es un ejercicio
   menos a la vista y un scroll mas.

   Y mas alta que las demas fichas —20px de margen en vez de 40— por lo mismo:
   lo que gana de alto va entero a las tres listas. */
.esc-modal__caja.es-taller {
    max-width: min(1660px, 98vw);
    max-height: calc(100vh - 20px);
}

/* LA LUPA, EN LA ESQUINA Y EN AZUL

   Es la puerta de la pantalla: dentro esta quien compone el grupo y todo lo
   que se le puede poner. En gris y pegada al nombre pasaba por adorno del
   titulo; en la esquina de arriba a la izquierda esta siempre en el mismo
   sitio en las doce tarjetas —se encuentra sin mirar— y el azul del modulo
   dice que se pulsa.

   El hueco se lo hace el propio titulo con su sangria, no un position
   absolute suelto: asi un nombre largo se envuelve por debajo de la lupa en
   vez de pasarle por encima. */

/* EL TAMAÑO DE LA LUPA, EN UN SOLO SITIO

   De el salen tres cosas: lo que mide, donde empieza la segunda y cuanta
   sangria necesita el titulo para no pasarles por encima. Estaban las tres a
   mano y con numeros distintos, asi que en tableta —donde los botones crecen a
   40— la segunda lupa se montaba encima de la primera y el nombre del grupo
   encima de las dos. */
.esc-asig-tarjeta__cab {
    --esc-lupa: 28px;
}

.esc-asig-lupa {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--esc-lupa);
    height: var(--esc-lupa);
    padding: 0;
    border: 1px solid var(--esc-accent);
    border-radius: 8px;
    background: var(--esc-accent);
    color: #FFF;
    font-size: 15px;
    cursor: pointer;
    transition: filter .12s ease, box-shadow .12s ease;
}

/* Se oscurece al pasar por encima en vez de cambiar de color: con solo un
   icono dentro, un cambio de tono es lo unico que se nota sin leer nada. Es
   el mismo gesto que los iconos de Calendario general. */
.esc-asig-lupa:hover {
    filter: brightness(.92);
}

.esc-asig-lupa:focus-visible {
    box-shadow: 0 0 0 3px rgba(15, 157, 234, .30);
}

/* Dos lados: a la izquierda de quien es la clase, a la derecha de que va lo
   que se le ha puesto. */
.esc-taller__cab {
    --esc-nivel: #8E9BA8;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #E4E9EE;
    border-left: 5px solid var(--esc-nivel);
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 1px 2px rgba(26, 43, 60, .06),
                0 10px 24px -18px rgba(26, 43, 60, .45);
    margin-bottom: 14px;
}

.esc-taller__titulo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.esc-taller__nombre {
    color: var(--esc-title);
    font-size: 16px;
    font-weight: 700;
}

.esc-taller__cab .esc-asig-tarjeta__meta {
    margin-top: 6px;
}

/* EL REPARTO DEL ANCHO

   Los tres no valen lo mismo. La columna del CENTRO es donde se trabaja: se
   recorre el banco, se lee el objetivo de cada ejercicio y se comparan unos
   con otros, asi que se lleva la mayor parte y sus fichas se reparten en
   varias columnas para ver muchas de golpe.

   La de la derecha tambien necesita sitio, pero alli solo se ORDENA lo que ya
   se ha elegido: le basta con que quepa el nombre y sus etiquetas.

   Y la de deportistas es la mas estrecha a proposito: un nombre y una edad no
   dan para mas, y todo lo que se lleve de mas se lo quita al banco. */
/* =============================================================================
   LA VENTANA DEL GRUPO: MARCAR LOS ESPACIOS

   Era todo blanco sobre blanco con una raya finisima entre medias: tres
   columnas, la cabecera y la grafica se tocaban sin que nada dijera donde
   acababa una cosa y empezaba la otra.

   Lo que las separa ahora es EL FONDO. La ventana pasa a tener un gris muy
   suave —el mismo de la aplicacion— y cada bloque es una ficha blanca encima,
   con su sombra. No hace falta pintar mas rayas: lo blanco es el contenido y
   lo gris es el aire.
============================================================================= */

.esc-modal__caja:has(.esc-taller) .esc-modal__cuerpo {
    padding: 16px;
    background: #EFF2F5;
}

.esc-taller__cols {
    display: grid;
    grid-template-columns: 240px minmax(0, 1.75fr) minmax(0, 1.05fr);
    align-items: stretch;
    gap: 14px;
}

@media (max-width: 1000px) {
    .esc-taller__cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

.esc-taller__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #E4E9EE;
    border-radius: 12px;
    background: #FFF;

    /* Dos sombras: una pegada, que dibuja el canto, y otra larga y muy floja
       que levanta la ficha del fondo. Con una sola o se ve el borde o se ve el
       relieve, pero no las dos cosas. */
    box-shadow: 0 1px 2px rgba(26, 43, 60, .06),
                0 10px 24px -18px rgba(26, 43, 60, .45);
    overflow: hidden;
}

/* El rotulo de cada columna: una banda con su icono, su nombre en versalitas
   espaciadas y su cuenta a la derecha. Es lo que convierte tres listas en tres
   sitios con nombre. */
.esc-taller__rotulo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid #ECF0F3;
    background: linear-gradient(180deg, #FFF 0%, #F7F9FB 100%);
    color: var(--esc-title);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.esc-taller__rotulo .ph {
    font-size: 14px;
    color: var(--esc-text-soft);
}

.esc-taller__rotulo-txt {
    flex: 1;
}

.esc-taller__rotulo-n {
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--esc-border-soft);
    color: var(--esc-text-soft);
    font-size: 9px;
    letter-spacing: 0;
    text-transform: none;
}

/* --- 1/3 Deportistas ----------------------------------------------------- */

/* El rango de edades, lo primero. Es lo que condiciona la sesion: de 7 a 9 se
   trabaja de una manera y de 7 a 14, de otra. */
.esc-taller__edades {
    padding: 7px 10px;
    border-bottom: 1px solid var(--esc-border-soft);
    background: #EAF6FC;
    color: var(--esc-accent);
    font-size: 11px;
    font-weight: 700;
}

/* Las tres listas crecen con la ventana en vez de llevar un alto fijo: el
   sitio que gana la caja al hacerse mas alta tiene que ir a parar aqui, que es
   lo unico que se recorre. El minimo evita que en un portatil bajo se queden
   en una rendija de dos filas. */
.esc-taller__alumnos {
    flex: 1;
    min-height: 200px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

/* LA CAPA QUE PREGUNTA

   Misma caja que las demas capas, con pie de botones. Los campos en columna y
   anchos: esto se rellena tambien desde una tablet, y un campo estrecho al
   lado de un parrafo es un campo que hay que apuntar con el dedo. */

.esc-detalle__caja.es-pregunta {
    max-width: min(560px, 94vw);
}

.esc-detalle__cuerpo.es-pregunta {
    display: block;
}

.esc-pregunta__texto {
    margin: 0 0 14px;
    color: var(--esc-text-soft);
    font-size: 13px;
    line-height: 1.55;
}

.esc-form-ent {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.esc-form-ent label {
    display: block;
    width: 100%;
    margin: 0;
    font-weight: 400;
}

.esc-form-ent label > span {
    display: block;
    margin-bottom: 4px;
    color: var(--esc-title);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* Alto de dedo, no de raton: el entrenador rellena esto desde la tablet, de
   pie y al lado de la pista. */
.esc-form-ent .form-control {
    width: 100%;
    min-height: 40px;
    font-size: 14px;
}

/* EL NOMBRE ES EL CAMPO. Es por lo que se va a encontrar dentro de tres meses
   entre cuarenta entrenamientos; el nivel y las observaciones se rellenan si
   apetece. */
.esc-form-ent label.es-principal > span {
    color: var(--esc-accent);
}

.esc-form-ent label.es-principal .form-control {
    min-height: 46px;
    border-color: var(--esc-accent);
    font-size: 16px;
    font-weight: 600;
}

/* LO QUE SE GUARDA, ARRIBA DEL TODO

   Al abrir la ventana la sesion queda detras del velo y deja de verse, que es
   justo lo que se estaba mirando. Sin esto hay que fiarse de la memoria para
   saber si son seis ejercicios o siete. */
.esc-form-ent__resumen {
    padding: 10px 12px;
    border: 1px solid var(--esc-border);
    border-left: 3px solid var(--esc-accent);
    border-radius: 8px;
    background: var(--esc-bg);
}

.esc-form-ent__cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.esc-form-ent__chapa {
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--esc-accent);
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-form-ent__chapa.es-min {
    background: var(--esc-navy-head);
}

/* Lo que no se sabe no se pinta como un dato mas: los que no tienen minutos se
   dicen en ambar, que es el color de "ojo con esto" en el modulo. */
.esc-form-ent__chapa.es-aviso {
    background: var(--esc-warning);
}

.esc-form-ent__lista {
    margin: 8px 0 0;
    padding-left: 20px;
    max-height: 132px;
    overflow-y: auto;
    color: var(--esc-text);
    font-size: 12px;
    line-height: 1.7;
}

.esc-form-ent__lista li::marker {
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
}

/* El icono del titulo de una pregunta: una ventana que guarda y otra que borra
   no pueden entrar igual. */
/* En la misma linea que el titulo: el h2 va flotado por la plataforma, asi que
   el icono se quedaba solo en el renglon de arriba. */
.esc-detalle__titulo:has(.esc-pregunta__icono) {
    display: flex;
    align-items: center;
    gap: 9px;
}

.esc-detalle__titulo:has(.esc-pregunta__icono) h2 {
    float: none;
    width: auto;
    margin: 0;
}

.esc-pregunta__icono {
    flex: none;
    color: var(--esc-accent);
    font-size: 20px;
}

.esc-form-ent textarea.form-control {
    min-height: 84px;
    resize: vertical;
}

.esc-detalle__pie {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex: none;
    padding: 12px 18px;
    border-top: 1px solid var(--esc-border-soft);
    background: #FAFBFC;
}

.esc-detalle__pie .btn {
    min-height: 40px;
    padding-right: 18px;
    padding-left: 18px;
}

/* LA PANTALLA DEL BANCO DE ENTRENAMIENTOS

   Tarjetas anchas en rejilla: aqui no se elige a toda prisa, se repasa lo que
   hay. Los botones de accion van abajo, grandes y con texto: esta pantalla
   tambien se toca desde la tablet, y un icono suelto de 14px no se acierta con
   el dedo. */

.esc-benc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-content: start;
    gap: 14px;
}

.esc-benc-tarjeta {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--esc-border);
    border-radius: 12px;
    background: #FFF;
    box-shadow: var(--esc-shadow);
    overflow: hidden;
}

.esc-benc-tarjeta__cuerpo {
    flex: 1;
    padding: 12px;
}

.esc-benc-tarjeta__nombre {
    color: var(--esc-title);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.esc-benc-tarjeta__pie {
    display: flex;
    border-top: 1px solid var(--esc-border-soft);
}

.esc-benc-accion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-height: 44px;
    padding: 8px 6px;
    border: 0;
    background: #FAFBFC;
    color: var(--esc-text-soft);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.esc-benc-accion + .esc-benc-accion {
    border-left: 1px solid var(--esc-border-soft);
}

.esc-benc-accion:hover {
    background: #EAF6FC;
    color: var(--esc-accent);
}

.esc-benc-accion .ph {
    font-size: 15px;
}

.esc-ent-buscador {
    flex: 1;
    max-width: 640px;
}

/* El buscador se come el hueco que sobre del mando: si no, el mando se estira
   hasta su tope y deja un trozo de su propio fondo a la vista, que parece un
   control roto. */
.esc-ent-buscador input[type="search"] {
    flex: 1 1 240px;
    min-width: 160px;
    max-width: none;
}

.esc-ent-buscador select {
    flex: 0 0 auto;
}

/* EL BANCO DE ENTRENAMIENTOS

   La tarjeta de un entrenamiento se parece a la de un ejercicio a proposito
   —se arrastra igual y tiene el mismo + — pero dice otra cosa: cuantas piezas
   lleva dentro y cuanto dura. El nombre manda, porque es lo unico que se va a
   recordar de el dentro de tres meses. */

.esc-asig-ent {
    position: relative;
    padding: 9px 40px 9px 11px;
    border: 1px solid var(--esc-border);
    border-radius: 10px;
    background: #FFF;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.esc-asig-ent + .esc-asig-ent {
    margin-top: 8px;
}

.esc-asig-ent:hover {
    border-color: var(--esc-accent);
    box-shadow: var(--esc-shadow);
}

.esc-asig-ent.is-arrastrando {
    opacity: .5;
}

.esc-asig-ent__cab {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* La lupa arriba a la izquierda del nombre: dice "pulsa aqui y veras los
   ejercicios que lleva". En el azul de acento del modulo, con superficie para
   el dedo, y encendida del todo al pasar por encima de la tarjeta. */
.esc-asig-ent__lupa {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #EAF4FC;
    color: var(--esc-accent);
    font-size: 14px;
    cursor: pointer;
    opacity: .85;
}

.esc-asig-ent:hover .esc-asig-ent__lupa,
.esc-asig-ent__lupa:hover {
    opacity: 1;
    background: var(--esc-accent);
    color: #FFF;
}

.esc-asig-ent__nombre {
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 700;
}

/* "Cualquier nivel" no es un hueco sin rellenar: es lo que mas se reutiliza.
   Se dice en hueco y en gris para que no compita con los niveles de verdad. */
.esc-asig-ent__libre {
    padding: 1px 7px;
    border: 1px dashed var(--esc-border);
    border-radius: 20px;
    color: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
}

.esc-asig-ent__obs {
    margin-top: 5px;
    color: var(--esc-text-soft);
    font-size: 11px;
    line-height: 1.45;
}

.esc-asig-ent .esc-asig-ej__mas {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* La ficha: los ejercicios a la izquierda —que es lo que se viene a ver— y a
   la derecha lo que rodea al entrenamiento. */
.esc-detalle__cuerpo.es-entrenamiento {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 18px;
}

@media (max-width: 900px) {
    .esc-detalle__cuerpo.es-entrenamiento {
        grid-template-columns: minmax(0, 1fr);
    }
}

.esc-taller__sesion.es-ficha {
    max-height: none;
    padding: 0;
    /* En la ficha el contenedor no vive dentro del flex del taller, así que el
       `flex: 1` de la lista lo dejaba en ancho 0 y no se veía ningún ejercicio.
       Aquí es un bloque normal que llena el modal. */
    flex: none;
    width: 100%;
    min-height: 0;
}

/* Los numeros guardados, en una etiqueta que no compite con las de material y
   dificultad: son de otra clase de dato —lo que hay que hacer, no lo que es—. */
.esc-asig-etiqueta.es-numeros {
    border-style: dashed;
    font-weight: 700;
}

/* LA COLUMNA DEL CENTRO, CON DOS FUENTES

   Piezas sueltas o sesiones enteras, en el mismo hueco y a un clic. Si los
   entrenamientos vivieran solo en el cajon de la pantalla, para poner uno
   habria que cerrar la ventana en la que se esta trabajando. */

.esc-alumno__pestanas.es-taller {
    margin-bottom: 8px;
}

.esc-taller__fuente {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    gap: 8px;
}

/* Los entrenamientos no van en rejilla: cada uno lleva nombre largo,
   observaciones y tres datos, y en dos columnas no cabe nada legible. */
.esc-taller__banco.es-entrenamientos {
    display: block;
}

/* EL LOTE

   La misma ventana del taller con la columna de la izquierda cambiada de
   papel: donde estaba "quien esta en el grupo" esta "a que grupos le cae".
   Cada uno con su casilla, porque lo normal es que vayan todos y lo raro es
   dejar a uno fuera. */

/* CADA GRUPO, UNA FICHA

   Eran filas blancas separadas por una raya finisima: con cinco grupos no se
   sabia donde acababa uno, y la hora de este parecia la del de arriba. Ahora
   cada uno tiene su caja, su aire y el color de su nivel por el canto
   izquierdo —el mismo que el de la fila de fuera, para saber sin leer de quien
   es esta lista. */
.esc-taller__grupo {
    --esc-nivel: #8E9BA8;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--esc-border);
    border-left: 3px solid var(--esc-nivel);
    border-radius: 8px;
    background: #FFF;
    font-weight: 400;
    cursor: pointer;
    transition: opacity .12s ease, border-color .12s ease, background .12s ease;
}

.esc-taller__grupo + .esc-taller__grupo {
    margin-top: 6px;
}

.esc-taller__grupo:hover {
    border-color: var(--esc-accent);
    border-left-color: var(--esc-nivel);
    background: var(--esc-bg);
}

/* El (GR)n, en macizo con el color del nivel: es el mismo distintivo que
   llevan las tarjetas y la fila de fuera, y aqui hace de icono. */
.esc-taller__grupo-linea {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.esc-taller__grupo-gr {
    flex: none;
    padding: 1px 6px;
    border-radius: 4px;
    color: #FFF;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    /* El blanco sobre los colores mas claros del maestro se queda justo de
       contraste; la sombra lo asienta sin oscurecer la chapa. */
    text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
}

/* Desmarcado no se esconde ni se tacha: se apaga. Sigue estando, y se ve de un
   vistazo cuantos se estan dejando fuera. */
/* EL QUE NO ESTA MARCADO SE VE IGUAL DE BIEN.

   Estaba al 50% de opacidad, y sobre la ropa oscura un grupo sin marcar se
   volvia invisible: parecia que la columna estaba vacia. Lo mismo que pasaba
   con los botones apagados.

   Lo que dice si entra o no es LA CASILLA, no que se pueda leer o no. Sin
   marcar solo pierde el fondo —se queda hueco— y el nombre sigue igual de
   legible. */
.esc-taller__grupo.es-fuera {
    background: transparent;
    opacity: 1;
}

.esc-taller__grupo.es-fuera .esc-taller__grupo-nombre {
    font-weight: 600;
}

.esc-taller__grupo-txt {
    min-width: 0;
    flex: 1;
}

.esc-taller__grupo-nombre {
    min-width: 0;
    overflow: hidden;
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-taller__grupo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 3px;
}

.esc-taller__grupo-tiene {
    margin-top: 3px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-style: italic;
}

.esc-taller__grupo-aviso {
    margin-top: 3px;
    color: #A0522D;
    font-size: 10px;
    font-weight: 600;
}

.esc-asig-marca.es-lote {
    position: static;
    display: flex;
    align-items: center;
    margin-top: 2px;
}

/* El pie del lote: un solo boton, y a la izquierda del "Cerrar" del modal.
   Dice siempre cuantos ejercicios y a cuantos grupos, asi que ocupa lo que
   necesite. */
.esc-taller__pie {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-right: auto;
}

.esc-taller__pie .btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* La linea del lote no lleva series ni repeticiones —eso es de cada sesion—,
   asi que respira menos que la del taller. */
.esc-taller__linea.es-lote {
    align-items: center;
}

.esc-taller__alumno {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
}

.esc-taller__alumno + .esc-taller__alumno {
    border-top: 1px solid var(--esc-border-soft);
}

.esc-taller__inicial {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
}

.esc-taller__alumno-txt {
    min-width: 0;
    flex: 1;
}

.esc-taller__alumno-nombre {
    overflow: hidden;
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-taller__prueba {
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 20px;
    background: var(--esc-alerta);
    color: #1A2B3C;
    font-size: 9px;
    font-weight: 700;
}

.esc-taller__alumno-datos {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}

.esc-taller__edad {
    color: var(--esc-text-soft);
    font-size: 11px;
}

.esc-taller__nivel {
    padding: 0 6px;
    border: 1px solid var(--esc-border);
    border-radius: 20px;
    color: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 700;
}

/* Una flecha cuando el nivel del alumno no es el del grupo. No esta mal —a
   veces es a proposito— pero quien prepara la clase tiene que verlo: un (GR)3
   en un grupo (GR)2 es exactamente quien se aburre. */
.esc-taller__nivel.es-arriba::after { content: ' ▲'; }
.esc-taller__nivel.es-abajo::after  { content: ' ▼'; }

/* --- 2/3 El banco -------------------------------------------------------- */

.esc-taller__buscar {
    margin: 8px 10px 6px;
    width: auto;
}

.esc-asig-areas.es-taller,
.esc-asig-filtros.es-taller {
    padding: 0 10px 8px;
}

.esc-taller__banco {
    flex: 1;
    min-height: 200px;
    max-height: calc(100vh - 380px);
    padding: 0 10px 10px;
    overflow-y: auto;

    /* Las fichas del banco, en rejilla. Con la columna ancha caben dos o tres
       a lo ancho, y ver nueve ejercicios de golpe en vez de tres es lo que
       permite compararlos sin subir y bajar. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    align-content: start;
    gap: 6px;
}

/* En rejilla el margen de la ficha sobra: lo pone el gap. */
.esc-taller__banco .esc-asig-ej {
    margin-bottom: 0;
}

/* Los mensajes de "no hay nada" y el tope ocupan la fila entera. */
.esc-taller__banco > .esc-taller__vacio,
.esc-taller__banco > .esc-ayuda,
.esc-taller__banco > .esc-cargando,
.esc-taller__banco > .esc-eco__aviso {
    grid-column: 1 / -1;
}

/* Lo que ya esta puesto se marca, no se esconde: repetir un ejercicio en la
   misma sesion puede ser a proposito; repetirlo sin darse cuenta, no. */
.esc-asig-ej.es-puesto {
    background: #F4F9F0;
    border-color: var(--esc-green-border);
}

.esc-asig-ej.es-puesto::before {
    content: 'ya en la sesión';
    position: absolute;
    right: 34px;
    bottom: 7px;
    color: var(--esc-green-border);
    font-size: 9px;
    font-weight: 700;
}

/* --- 3/3 La sesion ------------------------------------------------------- */

/* LOS AVIOS, EN LA CABECERA Y PEGADOS A LAS CIFRAS

   Con que dificultad se trabaja, que material hay que sacar del almacen y de
   que tipo es lo montado. Estaban en la columna de la sesion, encima de los
   ejercicios, y ahi se leian cuando ya se estaba montando; esto se mira ANTES
   de bajar a la pista, asi que va donde se mira primero.

   El margen automatico lo lleva ESTE bloque y no la tabla de cifras: asi los
   dos viajan juntos al lado derecho de la cabecera, con los avios a la
   izquierda de los numeros. Si el automatico se quedara en las cifras, los
   avios se pegarian al nombre del grupo y quedaria un boquete en medio. */
.esc-taller__avios {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    padding: 6px 14px 6px 0;
}

.esc-taller__avios-fila {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.esc-taller__avios-fila + .esc-taller__avios-fila {
    margin-top: 5px;
}

.esc-taller__avios-rot {
    flex: none;
    width: 62px;
    color: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.esc-taller__avios-nada {
    color: var(--esc-text-soft);
    font-size: 10px;
    font-style: italic;
}

.esc-taller__pastilla {
    padding: 1px 7px;
    border: 1px solid var(--esc-border);
    border-radius: 20px;
    color: var(--esc-text);
    font-size: 10px;
    font-weight: 600;
}

/* EL SCROLL DE LAS COLUMNAS, ESTRECHO

   Mismo criterio que en el puesto de mando, con los grises de aqui: el del
   sistema mide el doble y se ve antes que lo que hay dentro de la columna.
   Dos formas de decirlo porque hay dos motores; Firefox solo entiende
   scrollbar-width, y puesto a los dos gana sobre el ::-webkit y deja la barra
   en dos pixeles, imposible de agarrar. */
@supports not selector(::-webkit-scrollbar) {

    .esc-taller__col,
    .esc-taller__sesion,
    .esc-taller__alumnos,
    .esc-taller__banco {
        scrollbar-width: thin;
        scrollbar-color: #C3CBD3 transparent;
    }
}

.esc-taller__col::-webkit-scrollbar,
.esc-taller__sesion::-webkit-scrollbar,
.esc-taller__alumnos::-webkit-scrollbar,
.esc-taller__banco::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.esc-taller__col::-webkit-scrollbar-track,
.esc-taller__sesion::-webkit-scrollbar-track,
.esc-taller__alumnos::-webkit-scrollbar-track,
.esc-taller__banco::-webkit-scrollbar-track {
    background: transparent;
}

.esc-taller__col::-webkit-scrollbar-thumb,
.esc-taller__sesion::-webkit-scrollbar-thumb,
.esc-taller__alumnos::-webkit-scrollbar-thumb,
.esc-taller__banco::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #C3CBD3;
}

.esc-taller__col::-webkit-scrollbar-thumb:hover,
.esc-taller__sesion::-webkit-scrollbar-thumb:hover,
.esc-taller__alumnos::-webkit-scrollbar-thumb:hover,
.esc-taller__banco::-webkit-scrollbar-thumb:hover {
    background: #A6B1BC;
}

/* Y el de la ventana entera, el del canto derecho. */
.esc-modal__cuerpo::-webkit-scrollbar {
    width: 6px;
}

.esc-modal__cuerpo::-webkit-scrollbar-track {
    background: transparent;
}

.esc-modal__cuerpo::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #C3CBD3;
}

.esc-taller__sesion {
    flex: 1;
    min-height: 200px;
    max-height: calc(100vh - 360px);
    padding: 6px;
    overflow-y: auto;
    transition: background .12s ease, box-shadow .12s ease;
}

.esc-taller__sesion.is-destino {
    background: #EAF6FC;
    box-shadow: inset 0 0 0 2px var(--esc-accent);
}

/* CADA EJERCICIO DEL ENTRENAMIENTO, UNA FICHA

   Con la misma cara que los grupos de la primera columna: caja, borde y aire.
   Un entrenamiento es un CONJUNTO de piezas en un orden, y con las lineas
   pegadas unas a otras no se veia cuantas piezas hay ni donde acaba cada una
   —las etiquetas de una parecian las de la de arriba—. Y estas ademas se
   cogen y se cambian de sitio: una pieza suelta se ve que se puede coger. */
.esc-taller__linea {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 7px 4px 7px 6px;
    border: 1px solid var(--esc-border);
    border-radius: 8px;
    background: #FFF;
    transition: border-color .12s ease, background .12s ease;
}

.esc-taller__linea + .esc-taller__linea {
    margin-top: 6px;
}

.esc-taller__linea:hover {
    border-color: var(--esc-accent);
    background: var(--esc-bg);
}

.esc-taller__linea.is-arrastrando {
    opacity: .4;
}

.esc-taller__linea.es-antes {
    box-shadow: inset 0 2px 0 var(--esc-accent);
}

.esc-taller__linea.es-despues {
    box-shadow: inset 0 -2px 0 var(--esc-accent);
}

.esc-taller__linea-n {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--esc-border-soft);
    color: var(--esc-title);
    font-size: 10px;
    font-weight: 700;
}

.esc-taller__linea-txt {
    flex: 1;
    min-width: 0;
}

.esc-taller__linea-cab {
    display: flex;
    align-items: center;
    gap: 5px;
}

.esc-taller__linea-nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* LAS ETIQUETAS Y LOS NUMEROS, EN LA MISMA FILA.

   Los numeros ocupaban un renglon entero para si: con ocho ejercicios en la
   sesion, ocho renglones de alto que no dicen nada nuevo. Las etiquetas no
   llenan la fila ni de lejos, asi que caben a su derecha y la linea pasa de
   tres alturas a dos.

   Si un dia no cupieran —un material con nombre largo—, los numeros bajan
   solos: se envuelve, no se recorta. */
.esc-taller__linea-fila {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 3px;
}

.esc-taller__linea-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
    gap: 3px;
}

.esc-taller__linea-nums {
    display: flex;
    flex: none;
    gap: 8px;
    margin-left: auto;
}

.esc-taller__quitar {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--esc-border);
    cursor: pointer;
}

.esc-taller__linea:hover .esc-taller__quitar {
    color: var(--esc-text-soft);
}

.esc-taller__quitar:hover {
    background: #FDEDEC;
    color: var(--esc-danger);
}

/* EL ASA, A LA DERECHA Y SIEMPRE VISIBLE

   En la tarjeta pequeña el orden casi no se toca; aqui es la mitad del trabajo
   —calentar, tecnica, juego, vuelta a la calma— y tiene que VERSE que se puede
   mover, sin tener que descubrirlo probando. Por eso no se esconde hasta el
   hover y por eso lleva su propio fondo: es un agarradero, no un adorno. */
.esc-taller__asa {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 28px;
    border: 1px solid var(--esc-border-soft);
    border-radius: 5px;
    background: #FAFBFC;
    color: var(--esc-text-soft);
    font-size: 14px;
    cursor: grab;
}

.esc-taller__linea:hover .esc-taller__asa {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}

.esc-taller__asa:active {
    cursor: grabbing;
}

.esc-taller__vacio {
    padding: 22px 14px;
    color: var(--esc-text-soft);
    font-size: 11px;
    text-align: center;
}

/* EL NIVEL, EN DOS CHAPAS PEGADAS

   El nombre lo pone el club —"Escuela", "Avanzado"— y dice a que suena el
   grupo; el (GR)n sale del ORDEN del nivel y dice si va por delante o por
   detras de otro, que es lo que hace falta para saber a quien se le puede
   poner que. Con el nombre solo, dos clubes vecinos no se entienden.

   El codigo va macizo y el nombre en hueco, los dos del color del nivel: se
   leen como una sola cosa sin repetir el color dos veces a toda potencia. */

.esc-asig-nivel {
    display: inline-flex;
    align-items: stretch;
    border-radius: 20px;
    overflow: hidden;
}

.esc-asig-nivel__gr {
    padding: 2px 7px;
    border-radius: 20px 0 0 20px;
    color: #FFF;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2px;
}

.esc-asig-nivel__nombre {
    padding: 2px 8px 2px 7px;
    border: 1px solid;
    border-left: 0;
    border-radius: 0 20px 20px 0;
    background: #FFF;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* Sin codigo —un nivel sin orden— el nombre se redondea entero por su cuenta. */
.esc-asig-nivel__gr:only-child {
    border-radius: 20px;
}

.esc-asig-nivel__nombre:only-child {
    border-left: 1px solid;
    border-radius: 20px;
}

/* =============================================================================
   LA FICHA DEL EJERCICIO

   En la tarjeta del banco caben el nombre y tres etiquetas, y con eso no se
   decide nada: para saber si un ejercicio vale para un grupo hay que leer como
   se hace, para que sirve y que precauciones tiene.

   Capa propia y no la ventana modal del modulo: el modulo tiene UNA, y abrir
   esta con ella se llevaria por delante el taller que hay debajo. Va a 1080,
   por encima de los 1070 del modal, y al cerrarse deja el taller como estaba.
============================================================================= */

.esc-detalle {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(26, 43, 60, .55);
}

/* UNA EMERGENTE SOBRE OTRA: SE APAGA LO DE DEBAJO

   Solo cuando debajo hay otra ventana abierta. Esta capa se abre tanto desde
   la pantalla —y entonces detras esta la pantalla, que conviene seguir
   situando— como desde el taller, que ya es una ventana llena de columnas,
   listas y colores; ahi el velo flojo dejaba leer todo lo de atras y la vista
   se iba sola.

   Velo oscuro Y desenfoque: el oscuro baja el contraste y el desenfoque se
   lleva las formas, asi que lo de debajo queda como un fondo y no como
   informacion. Se sigue viendo que hay algo —no se ha ido a otro sitio, se ha
   abierto algo encima— pero no se puede leer. */
.esc-detalle.es-sobre-modal {
    background: rgba(12, 22, 32, .8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.esc-detalle__caja {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(980px, 96vw);
    max-height: calc(100vh - 40px);
    border-radius: 12px;
    background: #FFF;
    box-shadow: var(--esc-shadow-lift);
    overflow: hidden;
}

.esc-detalle__cab {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-top: 4px solid var(--esc-border);
    background: #F6F8FA;
}

/* La raya de arriba dice el area, igual que la de la ficha del banco: se
   reconoce que es el mismo ejercicio que se acaba de pulsar. */
.esc-detalle__cab.es-deportivo { border-top-color: var(--esc-green); }
.esc-detalle__cab.es-fisico    { border-top-color: var(--esc-accent); }
.esc-detalle__cab.es-otros     { border-top-color: #B9A0D6; }

.esc-detalle__titulo {
    flex: 1;
    min-width: 0;
}

/* css/styles.css de la plataforma hace flotar los titulos —y TAMBIEN los
   parrafos: `p { float: left; width: 100% }`— dentro de .container. Flotando,
   el h2 dejaba la caja de las chapas con cero de ancho y la mandaba al borde
   derecho encima del aspa; y un parrafo flotado empujaba al bloque siguiente a
   su lado, que se quedaba con cero de ancho. Aqui no hay nada alrededor de que
   flotar. */
.esc-detalle h2,
.esc-detalle h3,
.esc-detalle p {
    float: none;
    clear: both;
    width: auto;
}

.esc-detalle__nombre {
    margin: 0;
    color: var(--esc-title);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.esc-detalle__chapas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.esc-detalle__atr {
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
}

.esc-detalle__cerrar {
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--esc-border);
    border-radius: 8px;
    background: #FFF;
    color: var(--esc-text-soft);
    cursor: pointer;
}

.esc-detalle__cerrar:hover {
    border-color: var(--esc-danger);
    color: var(--esc-danger);
}

.esc-detalle__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
}

@media (max-width: 820px) {
    .esc-detalle__cuerpo {
        grid-template-columns: minmax(0, 1fr);
    }
}

.esc-detalle__bloque + .esc-detalle__bloque {
    margin-top: 14px;
}

.esc-detalle__rot {
    margin: 0 0 3px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.esc-detalle__texto {
    margin: 0;
    color: var(--esc-text);
    font-size: 13px;
    line-height: 1.55;
    /* Los saltos de linea del banco se respetan: ahi se escriben los pasos uno
       debajo de otro y en un parrafo corrido no se entiende nada. */
    white-space: pre-line;
}

/* Las precauciones no son un parrafo mas: son lo que puede acabar en lesion. */
.esc-detalle__bloque.es-aviso {
    padding: 8px 10px;
    border-left: 3px solid var(--esc-warning);
    border-radius: 0 8px 8px 0;
    background: #FEF8EE;
}

/* Lo que se ha decidido para ESTE grupo, arriba del todo y en su caja.

   El ejercicio es del banco y es de todos; esto es de esta clase. Cambiar aqui
   los minutos no cambia el ejercicio para nadie mas, y eso tiene que quedar
   claro al mirarlo, no descubrirse despues. */
.esc-detalle__grupo {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #BCDFF2;
    border-radius: 10px;
    background: #EAF6FC;
}

.esc-detalle__grupo-rot {
    margin-bottom: 8px;
    color: var(--esc-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.esc-detalle__nums {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.esc-detalle__num {
    flex: 1;
    margin: 0;
}

.esc-detalle__num span {
    display: block;
    color: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-detalle__num input {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    background: #FFF;
    color: var(--esc-title);
    font-size: 13px;
    font-weight: 700;
}

.esc-detalle__obs-rot > span {
    display: block;
    margin-bottom: 3px;
    color: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-detalle__obs-rot {
    display: block;
    margin: 0;
}

.esc-detalle__obs {
    width: 100%;
    font-size: 12px;
    resize: vertical;
}

.esc-detalle__grupo-pie {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.esc-detalle__cuenta {
    flex: 1;
    color: var(--esc-text-soft);
    font-size: 10px;
}

/* --- La columna del lado: imagenes, video y ficha tecnica ---------------- */

.esc-detalle__media img {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    border: 1px solid var(--esc-border-soft);
    border-radius: 8px;
}

/* El marco del video guarda la proporcion 16:9 sin saber lo que mide: el
   iframe se estira a lo que haya. */
.esc-detalle__video {
    position: relative;
    margin-bottom: 8px;
    padding-top: 56.25%;
    border-radius: 8px;
    background: #1F2637;
    overflow: hidden;
}

.esc-detalle__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.esc-detalle__enlace {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 7px 9px;
    border: 1px solid var(--esc-border-soft);
    border-radius: 8px;
    color: var(--esc-accent);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.esc-detalle__enlace:hover {
    border-color: var(--esc-accent);
    background: #F6FBFE;
}

.esc-detalle__tecnica {
    margin-top: 10px;
    border: 1px solid var(--esc-border-soft);
    border-radius: 10px;
    overflow: hidden;
}

.esc-detalle__tecnica-fila {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
}

.esc-detalle__tecnica-fila:nth-child(odd) {
    background: #FAFBFC;
}

.esc-detalle__tecnica-rot {
    flex: none;
    width: 96px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-detalle__tecnica-val {
    flex: 1;
    color: var(--esc-text);
    font-size: 12px;
}

/* Lo que se puede pulsar se nota con el puntero: en una pantalla llena de
   cosas arrastrables, saber cual ademas se abre no puede ser a base de probar. */
.es-pulsable {
    cursor: pointer;
}

.esc-asig-ej.es-pulsable:hover .esc-asig-ej__nombre,
.esc-asig-linea__nombre.es-pulsable:hover,
.esc-taller__linea-cab.es-pulsable:hover .esc-taller__linea-nombre {
    color: var(--esc-accent);
    text-decoration: underline;
}

/* =============================================================================
   LA FICHA DEL DEPORTISTA

   Quien prepara la sesion tiene delante una lista de nombres, y un nombre no
   dice si el crio lleva cuatro años o empezo en octubre, si viene subiendo de
   nivel o lleva dos temporadas estancado, ni que se le dijo la semana pasada.
   Todo eso cambia lo que se le pone hoy.
============================================================================= */

.esc-detalle__caja.es-alumno {
    max-width: min(1120px, 96vw);
}

/* LA CABECERA DEL DEPORTISTA

   Es la portada de su ficha y se mira entera de un vistazo: foto grande, su
   nombre, y debajo en pastillas lo que hace falta saber antes de hablar con el
   o con su familia. Sobre fondo oscuro para que la foto y el nombre pesen: lo
   de debajo son datos, esto es una persona. */
.esc-alumno__cab {
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(135deg, #1A2B3C 0%, #2C3348 100%);
}

.esc-alumno__cab .esc-detalle__nombre {
    color: #FFF;
    font-size: 19px;
    letter-spacing: .2px;
}

/* El aspa, sobre el fondo oscuro: sin fondo propio. Con el blanco que trae de
   serie quedaba un cuadrado blanco con una equis blanca dentro. */
.esc-alumno__cab .esc-detalle__cerrar {
    border-color: rgba(255, 255, 255, .35);
    background: transparent;
    color: #FFF;
}

.esc-alumno__cab .esc-detalle__cerrar:hover {
    border-color: #FFF;
    background: rgba(255, 255, 255, .14);
    color: #FFF;
}

.esc-alumno__foto {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border: 3px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background: var(--esc-navy-head);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.esc-alumno__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La inicial vive DEBAJO de la foto, no en su lugar: si la imagen no carga
   —una ruta vieja, una foto borrada— se cae la etiqueta y queda esto, que es
   mejor que el icono de imagen rota del navegador. */
.esc-alumno__inicial {
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
}

.esc-alumno__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}

.esc-alumno__dato {
    color: var(--esc-text-soft);
    font-size: 12px;
}

/* Cada dato en su pastilla con su icono: en una linea corrida —"12 años · En
   el club desde septiembre"— todo pesa lo mismo y no se distingue un dato de
   otro sin leerlo entero. */
.esc-alumno__pastilla {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    color: #E8EDF5;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.esc-alumno__pastilla .ph {
    font-size: 13px;
    opacity: .85;
}

/* La que lleva explicacion se marca: un dato CALCULADO —la categoria— no puede
   parecer un dato guardado. */
.esc-alumno__pastilla.es-ayuda {
    border-style: dashed;
    cursor: help;
}

/* Las chapas de nivel de la cabecera, sobre el fondo oscuro. */
.esc-alumno__cab .esc-detalle__chapas {
    margin-top: 7px;
}

.esc-alumno__cab .esc-asig-nivel__nombre {
    border-color: rgba(255, 255, 255, .45);
    color: #FFF;
}

.esc-detalle__cuerpo.es-alumno {
    grid-template-columns: 300px minmax(0, 1fr);
}

@media (max-width: 880px) {
    .esc-detalle__cuerpo.es-alumno {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Cada bloque, una ficha con su borde: eran secciones seguidas separadas solo
   por aire, y "Quien es", "Como localizarle" y "Sus clases" se leian como una
   lista larga en vez de como tres cosas distintas. */
.esc-alumno__bloque {
    padding: 12px;
    border: 1px solid var(--esc-border);
    border-radius: 10px;
    background: #FFF;
}

.esc-alumno__bloque + .esc-alumno__bloque {
    margin-top: 10px;
}

.esc-alumno__bloque .esc-detalle__rot {
    margin-top: 0;
}

.esc-detalle__tecnica-val.es-enlace {
    color: var(--esc-accent);
    overflow-wrap: anywhere;
}

.esc-detalle__tecnica-val.es-enlace:hover {
    text-decoration: underline;
}

.esc-alumno__clase {
    padding: 7px 10px;
    border: 1px solid var(--esc-border);
    border-left: 3px solid var(--esc-nivel, #8E9BA8);
    border-radius: 8px;
}

.esc-alumno__clase + .esc-alumno__clase {
    margin-top: 5px;
}

.esc-alumno__clase-grupo {
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 700;
}

.esc-alumno__clase-cuando {
    color: var(--esc-text-soft);
    font-size: 11px;
}

/* --- SU CARGA ------------------------------------------------------------

   Cuantos minutos lleva encima y como se reparten. Barras y no numeros
   sueltos: "40% deportivo, 12% fisico" se compara de un vistazo y dos numeros
   con porcentajes hay que leerlos y restarlos. */

.esc-alumno__carga-total {
    margin-bottom: 8px;
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 700;
}

.esc-alumno__carga + .esc-alumno__carga {
    margin-top: 10px;
}

.esc-alumno__carga-rot {
    margin-bottom: 4px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-alumno__carga-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: help;
}

.esc-alumno__carga-fila + .esc-alumno__carga-fila {
    margin-top: 4px;
}

.esc-alumno__carga-nom {
    flex: none;
    width: 92px;
    overflow: hidden;
    color: var(--esc-text);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-alumno__carga-pista {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--esc-border-soft);
    overflow: hidden;
}

.esc-alumno__carga-pista span {
    display: block;
    height: 100%;
}

.esc-alumno__carga-n {
    flex: none;
    width: 34px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}


/* --- El grafico de evolucion --------------------------------------------- */

.esc-alumno__grafico {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 4px;
}

.esc-alumno__grafico-nivel {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2px;
}

.esc-alumno__grafico-año {
    fill: var(--esc-text-soft);
    font-size: 9px;
    font-weight: 600;
}

/* --- Lo que ha hecho y lo que tiene pendiente ---------------------------- */

.esc-alumno__pestanas {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--esc-border-soft);
}

.esc-alumno__pestana {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.esc-alumno__pestana:hover {
    color: var(--esc-title);
}

.esc-alumno__pestana.is-activa {
    border-bottom-color: var(--esc-accent);
    color: var(--esc-accent);
}

.esc-alumno__pestana-n {
    padding: 0 6px;
    border-radius: 20px;
    background: var(--esc-border-soft);
    color: var(--esc-text-soft);
    font-size: 10px;
}

.esc-alumno__pestana.is-activa .esc-alumno__pestana-n {
    background: #EAF6FC;
    color: var(--esc-accent);
}

/* La fecha de la sesion, pegajosa: bajando por seis meses de trabajo hay que
   poder saber en todo momento de que dia es lo que se esta leyendo. */
.esc-alumno__dia {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 10px 0 4px;
    padding: 4px 0;
    background: #FFF;
    color: var(--esc-title);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.esc-alumno__dia:first-child {
    margin-top: 0;
}

.esc-alumno__hecho {
    padding: 7px 10px;
    border-left: 2px solid var(--esc-border-soft);
}

.esc-alumno__hecho-cab {
    display: flex;
    align-items: center;
    gap: 6px;
}

.esc-alumno__hecho-nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-alumno__hecho-nombre.es-pulsable:hover {
    color: var(--esc-accent);
    text-decoration: underline;
}

.esc-alumno__hecho-nums {
    flex: none;
    color: var(--esc-text-soft);
    font-size: 11px;
    font-weight: 700;
}

/* LAS DOS VOCES

   Lo que el entrenador anoto y lo que el deportista conteste desde su app son
   cosas distintas, asi que se ven distintas y llevan su nombre delante: leer
   "le costo el revés" sin saber quien lo dijo no es lo mismo si lo dice quien
   mira desde fuera o quien lo estaba haciendo. */

.esc-alumno__nota {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
}

.esc-alumno__nota.es-entrenador {
    background: #F1F4F7;
    color: var(--esc-text);
}

.esc-alumno__nota.es-deportista {
    background: #EAF6FC;
    color: #1A3C4F;
}

.esc-alumno__nota-quien {
    flex: none;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    opacity: .65;
}

.esc-alumno__nota-txt {
    flex: 1;
}

/* EL RESUMEN DE LO TRABAJADO

   Cuatro numeros y una fecha, arriba del todo. Es lo que se mira antes de
   entrar en nada, y el ultimo —de cuando es lo ultimo que hizo— es el que mas
   dice: mucho trabajo y la ultima sesion de hace dos meses es alguien que se
   ha ido. */

.esc-alumno__resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.esc-alumno__cifra {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 10px;
    border: 1px solid var(--esc-border-soft);
    border-radius: 8px;
    background: #FAFBFC;
    color: var(--esc-text-soft);
    font-size: 10px;
    line-height: 1.2;
}

.esc-alumno__cifra strong {
    color: var(--esc-title);
    font-size: 16px;
    font-weight: 700;
}

/* UN BLOQUE DE SESION

   Lo que se dio de una tirada. Con sello lleva el nombre del entrenamiento y
   se marca con el color del modulo; sin el se dice "Trabajo suelto" y se deja
   en gris, que es exactamente lo que es. */

.esc-alumno__bloque {
    margin-bottom: 10px;
    border: 1px solid var(--esc-border-soft);
    border-left: 3px solid var(--esc-border);
    border-radius: 8px;
    overflow: hidden;
}

.esc-alumno__bloque.es-entrenamiento {
    border-left-color: var(--esc-accent);
}

.esc-alumno__bloque-cab {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px 10px;
    background: #F6F8FA;
    border-bottom: 1px solid var(--esc-border-soft);
}

.esc-alumno__bloque-nombre {
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 700;
}

.esc-alumno__bloque-grupo,
.esc-alumno__bloque-n {
    color: var(--esc-text-soft);
    font-size: 10px;
}

.esc-alumno__bloque-n {
    margin-left: auto;
    white-space: nowrap;
}

/* UN EJERCICIO CON TODAS SUS VECES

   Plegado de entrada: la lista se recorre buscando un nombre, y con todas las
   veces desplegadas de golpe no se recorre nada. */

.esc-alumno__ejercicio {
    border: 1px solid var(--esc-border-soft);
    border-radius: 8px;
    margin-bottom: 6px;
    overflow: hidden;
}

.esc-alumno__ejercicio.es-abierto {
    border-color: var(--esc-accent);
}

.esc-alumno__ejercicio-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    background: #FFF;
    text-align: left;
    cursor: pointer;
}

.esc-alumno__ejercicio-cab:hover {
    background: #F6FBFE;
}

.esc-alumno__ejercicio-flecha {
    flex: none;
    color: var(--esc-text-soft);
    transition: transform .16s ease;
}

.esc-alumno__ejercicio.es-abierto .esc-alumno__ejercicio-flecha {
    transform: rotate(90deg);
}

.esc-alumno__ejercicio-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.esc-alumno__ejercicio-nombre {
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 600;
}

.esc-alumno__ejercicio-veces {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
    color: var(--esc-text-soft);
    font-size: 10px;
    text-align: right;
}

.esc-alumno__ejercicio-veces strong {
    color: var(--esc-accent);
    font-size: 12px;
}

.esc-alumno__ejercicio-veces-lista {
    padding: 6px 10px 8px;
    border-top: 1px solid var(--esc-border-soft);
    background: #FAFBFC;
}

.esc-alumno__vez + .esc-alumno__vez {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--esc-border-soft);
}

.esc-alumno__vez-cab {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.esc-alumno__vez-fecha {
    color: var(--esc-title);
    font-size: 11px;
    font-weight: 700;
}

.esc-alumno__vez-grupo {
    color: var(--esc-text-soft);
    font-size: 10px;
}

.esc-alumno__ejercicio-veces-lista .esc-benc-accion {
    margin-top: 8px;
    border: 1px solid var(--esc-border-soft);
    border-radius: 8px;
}

/* Lo que todavia no existe se dice, no se disimula: una pantalla que enseña un
   sitio vacio sin explicar por que parece rota. */
.esc-alumno__pendiente {
    margin-top: 8px;
    padding: 5px 10px;
    border: 1px dashed var(--esc-border);
    border-radius: 20px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-align: center;
    text-transform: uppercase;
}

.esc-taller__alumno.es-pulsable:hover {
    background: #F6FBFE;
}

.esc-taller__alumno.es-pulsable:hover .esc-taller__alumno-nombre {
    color: var(--esc-accent);
}

.esc-taller__alumno:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--esc-accent);
}

/* =============================================================================
   LA TABLET DEL ENTRENADOR

   El entrenador no prepara esto sentado: lo lleva a la pista en una tablet, de
   pie, con la mano ocupada y mirando de reojo. Ahi un icono de catorce pixeles
   no se acierta, y fallar un boton no es una molestia: es agacharse a repetirlo
   mientras doce crios esperan.

   POR QUE `pointer: coarse` Y NO UN ANCHO
   ---------------------------------------
   El ancho no dice como se toca: una tablet apaisada mide lo mismo que un
   portatil pequeño, y un movil en horizontal mide menos que los dos. Lo que
   cambia el tamaño que hace falta es el DEDO, y eso es exactamente lo que
   contesta `pointer: coarse`. Asi la misma pantalla sirve para los dos sin
   pedirle a nadie que elija un modo: densa con raton, gruesa con dedo.

   La regla es la misma en todo el modulo: 44 pixeles de lado para cualquier
   cosa que se pulse, que es el minimo por debajo del cual se falla. Lo que no
   se pulsa —textos, etiquetas, chapas— no se toca: agrandarlo todo solo
   consigue que quepa la mitad y haya que desplazar el doble.
============================================================================= */

@media (pointer: coarse) {

    /* Los mandos de la barra: dia, filtros, vistas. Son los que mas se tocan y
       los que peor se acertaban, porque van pegados unos a otros. */
    .esc-mando .btn,
    .esc-mando .form-control,
    .esc-asig-bancos .btn,
    .esc-benc-accion,
    .esc-asig-tarjeta__accion,
    .esc-alumno__pestana,
    .esc-asig-area,
    .esc-asig-dia {
        min-height: 44px;
        font-size: 13px;
    }

    .esc-asig-area,
    .esc-asig-dia {
        padding-right: 12px;
        padding-left: 12px;
    }

    /* Las dos lupas del grupo crecen cambiando su medida, que es de donde
       salen tambien su colocacion y la sangria del titulo. */
    .esc-asig-tarjeta__cab {
        --esc-lupa: 40px;
    }

    .esc-asig-lupa {
        font-size: 18px;
    }

    /* Los demas botones redondos: el + del banco, el aspa de quitar y el asa
       de arrastre. */
    .esc-asig-ej__mas,
    .esc-taller__quitar,
    .esc-taller__asa,
    .esc-cajon__cerrar,
    .esc-detalle__cerrar,
    .esc-ayuda-redonda {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .esc-asig-lote {
        min-height: 44px;
        padding: 0 18px;
        font-size: 12px;
    }

    /* Las casillas de marcar grupos. Se marcan en barrido —"estos cuatro si,
       estos dos no"— y con 16px el dedo marca el de al lado. La zona pulsable
       crece; el cuadrado dibujado solo un poco, que si no la tira de color se
       convierte en una franja. */
    .esc-asig-marca {
        padding: 11px;
        margin: -11px;
    }

    .esc-asig-marca span {
        width: 20px;
        height: 20px;
    }

    .esc-asig-marca.es-banda span,
    .esc-asig-marca.es-lote span {
        width: 20px;
        height: 20px;
    }

    .esc-asig-marca input:checked + span::after {
        width: 5px;
        height: 10px;
        margin-top: 2px;
    }

    /* Las lineas de una sesion se arrastran para ordenarlas, y con el dedo hay
       que poder cogerlas sin apuntar. */
    .esc-taller__linea,
    .esc-asig-linea {
        min-height: 48px;
    }

    /* Los numeros de serie, repeticiones y minutos se escriben en la pista.
       Un campo de 40px de ancho con el teclado del sistema encima no se ve. */
    .esc-taller__linea-nums input,
    .esc-asig-num input {
        min-height: 36px;
        font-size: 14px;
    }

    /* El cajon de los bancos, mas ancho: de lo que se saca de ahi se arrastra,
       y arrastrar con el dedo por un canal estrecho es soltar donde no era. */
    .esc-cajon {
        width: min(520px, 96vw);
    }

    /* Las fichas del banco, mas altas y con su + mas separado del cuerpo, que
       es el fallo tipico: querer abrir la ficha y ponerlo sin querer. */
    .esc-asig-ej,
    .esc-asig-ent {
        padding-right: 52px;
    }
}

/* =============================================================================
   EL PUESTO DE MANDO (la segunda lupa)

   La misma tarea que la lupa normal, vista de otra manera: la de al lado
   ordena una lista; esta enseña de QUE va la sesion mientras se monta.

   POR QUE OSCURO
   --------------
   No por moda. Aqui lo que manda son las barras, la tela de araña y los
   colores de las fases, y sobre blanco esos colores compiten con el fondo:
   sobre oscuro el color ES el dato. Ademas se usa a pie de pista, donde una
   pantalla encendida del todo deslumbra.

   Y OSCURO DE CASA, NO NEGRO

   Los tonos salen del menu de la plataforma —el fondo de sus items para el
   suelo, el del menu para los paneles, su linea para los bordes—. Con el casi
   negro de antes, abrir una de estas ventanas era caerse en un agujero: la
   pantalla de debajo y esta no se parecian en nada. Con los azules del menu
   sigue siendo otro sitio, pero de la misma casa.

   El oscuro vive solo aqui dentro: el resto del modulo sigue en claro, que es
   donde se trabaja sentado y con mucho texto.
============================================================================= */

.esc-hud {
    --esc-hud-fondo: #272C40;
    --esc-hud-caja: #2D3349;
    --esc-hud-linea: #3C4363;
    --esc-hud-texto: #E8EDF5;
    --esc-hud-suave: #A3AFC6;

    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: -16px;
    padding: 14px;
    background: var(--esc-hud-fondo);
    color: var(--esc-hud-texto);
}

/* La ventana entera se pone oscura: un modal blanco con un cuerpo negro
   dentro se lee como un error de pintado. */
.esc-modal__caja:has(.esc-hud) {
    background: #272C40;
}

.esc-modal__caja:has(.esc-hud) .esc-modal__cab,
.esc-modal__caja:has(.esc-hud) .esc-modal__pie {
    background: #232838;
    border-color: #3C4363;
    color: #E8EDF5;
}

.esc-modal__caja:has(.esc-hud) .esc-modal__cab h2,
.esc-modal__caja:has(.esc-hud) #esc-modal-titulo {
    color: #E8EDF5;
}

/* --- La barra de contexto ------------------------------------------------ */

.esc-hud__barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid var(--esc-hud-linea);
    border-radius: 10px;
    background: var(--esc-hud-caja);
}

.esc-hud__quien {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.esc-hud__grupo {
    font-size: 15px;
    font-weight: 700;
}

.esc-hud__chapa {
    padding: 2px 8px;
    border-radius: 20px;
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.esc-hud__dato,
.esc-hud__rot {
    color: var(--esc-hud-suave);
    font-size: 11px;
}

.esc-hud__mirar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.esc-hud .form-control {
    border-color: var(--esc-hud-linea);
    background: #232838;
    color: var(--esc-hud-texto);
}

.esc-hud .form-control::placeholder {
    color: #62717F;
}

/* El reloj de la clase: lo puesto contra lo que dura. Se mira cada vez que se
   añade algo, asi que va arriba y no se mueve. */
.esc-hud__reloj {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.esc-hud__reloj-n {
    font-size: 14px;
    font-weight: 700;
}

.esc-hud__reloj-barra {
    position: relative;
    width: 120px;
    height: 6px;
    border-radius: 3px;
    background: #232838;
    overflow: hidden;
}

.esc-hud__reloj-barra span {
    display: block;
    height: 100%;
    background: #16A085;
}

.esc-hud__reloj.es-pasado .esc-hud__reloj-barra span {
    background: #D9534F;
}

.esc-hud__reloj-txt {
    color: var(--esc-hud-suave);
    font-size: 10px;
}

/* =============================================================================
   LA LINEA DEL TIEMPO DE LA SESION

   La sesion estirada sobre los minutos de la clase: cada ejercicio un tramo
   del ancho que le toca y del color de su fase. Va a lo ancho de la ventana y
   encima de las tres columnas porque contesta "como va la clase", que se mira
   antes que el detalle de nada.
============================================================================= */

.esc-hud__tiempo {
    /* Los tonos oscuros, repetidos aqui: este bloque tambien vive en el pie de
       la lupa azul, donde no hay ningun .esc-hud por encima que los defina. */
    --esc-hud-linea: #3C4363;
    --esc-hud-texto: #E8EDF5;
    --esc-hud-suave: #A3AFC6;

    margin-bottom: 10px;
    padding: 10px 12px 6px;
    border: 1px solid var(--esc-hud-linea);
    border-radius: 10px;
    background: var(--esc-hud-caja);
}

.esc-hud__tiempo-aviso {
    color: #E8A33D;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
}

/* LA CURVA DE ESFUERZO

   Encima de los tramos y compartiendo con ellos el eje del tiempo: lo que esta
   alto en la curva cae justo sobre el ejercicio que lo provoca.

   En escalones y no suavizada: un ejercicio va a su intensidad de principio a
   fin, y una curva redondeada sugeriria una subida progresiva que no pasa. */
/* El nombre .esc-hud__curva ya estaba cogido por las barras de las ocho
   semanas de la telemetria: esto es otra cosa y se llama de otra manera. */
.esc-esfuerzo {
    margin-top: 8px;
}

/* EL EJE VA ENCIMA DEL LIENZO, NO AL LADO.

   Al lado empujaria la curva unos pixeles a la derecha y dejaria de caer sobre
   su ejercicio en la barra de abajo: las dos comparten el eje del tiempo y un
   pico tiene que quedar justo encima del ejercicio que lo provoca. Los numeros
   son minusculos y flotan sobre el borde izquierdo, que es donde no hay nada
   que tapar. */
.esc-esfuerzo__marco {
    position: relative;
}

.esc-esfuerzo__eje {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.esc-esfuerzo__eje-n {
    color: var(--esc-hud-suave);
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    opacity: .75;
}

.esc-esfuerzo__svg {
    display: block;
    width: 100%;
    height: 88px;
}

/* La linea de intensidad: el borde de arriba del esfuerzo, sin las bajadas al
   suelo que cierran el area. Es la que se sigue con el dedo. */
/* Mas gruesa y en blanco con halo: encima de un relleno azul, una linea azul
   de dos pixeles se confunde con su propio relleno. En blanco se ve siempre, y
   el halo la despega del fondo cuando pasa por encima de una banda clara. */
/* TRAZO FINO Y SIN SOMBRA.

   Lo que separa una linea de otra es el COLOR y el tipo de raya, no el grosor
   ni el relieve. Con trazos gordos y sombra, cuatro lineas en ochenta pixeles
   de alto se pisan entre ellas y el dibujo se emborrona; finas y limpias, cada
   una se sigue hasta el final.

   Dos pixeles DE PANTALLA: el lienzo esta estirado a lo ancho, y sin
   non-scaling-stroke la misma linea saldria finisima en un monitor grande y
   gorda en uno pequeño. */
.esc-esfuerzo__linea {
    fill: none;
    stroke: #FFF;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Sobre fondo claro, el azul fuerte del modulo: el blanco desapareceria. */
.esc-hud__tiempo.es-claro .esc-esfuerzo__linea {
    stroke: #0F9DEA;
}

.esc-esfuerzo__linea.es-estimada {
    stroke: #8E9BA8;
    stroke-dasharray: 5 4;
}

/* LA MEDIA DE LA SESION, de lado a lado.

   Es la raya contra la que se compara todo lo demas —"este ejercicio va por
   encima de la media de hoy"—, asi que tiene que verse cruzando el dibujo
   entero, tambien por encima del relleno. A un pixel y medio se perdia entre
   las verticales del reloj.

   A rayas largas y en ambar: es una referencia, no un dato medido; la linea
   continua es la del esfuerzo de verdad. */
.esc-esfuerzo__media {
    stroke: #F69F00;
    stroke-width: 1.4;
    stroke-dasharray: 8 5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__media {
    stroke: #E07B00;
}

/* EL ASPA DE LA CABECERA. Cerrar vive abajo del todo, y en una ficha de tres
   columnas eso son dos pantallas de scroll para salir. */
.esc-modal__cab {
    padding-right: 48px;
}

/* Colgada de la caja, no de la cabecera: la cabecera es el mismo nodo que el
   titulo y cada pantalla lo reescribe entero. */
.esc-modal__caja {
    position: relative;
}

.esc-modal__aspa {
    position: absolute;
    top: 9px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 7px;
    background: transparent;
    color: #FFF;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.esc-modal__aspa:hover {
    border-color: #FFF;
    background: rgba(255, 255, 255, .16);
}

@media (pointer: coarse) {

    .esc-modal__aspa {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}


/* EL RESUMEN DEL ENTRENAMIENTO, EN LA CABECERA

   A la izquierda esta de quien es la clase; aqui, de que va lo que se le ha
   puesto. Dos columnas porque son dos preguntas: de cuantas piezas consta y
   como se reparten —eso se cuenta— y cuanto aprieta el conjunto —eso se
   calcula—. La segunda va en otro tono para que no se confundan. */
.esc-taller__resumen {
    position: relative;
    flex: none;
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 18px;
    margin-left: auto;
    padding: 8px 12px 8px 14px;
    border-left: 1px solid var(--esc-border);
}

/* Cuando los avios van delante, son ELLOS los que empujan el bloque al lado
   derecho; la tabla se pega a ellos y la raya de separacion es la suya. */
.esc-taller__avios + .esc-taller__resumen {
    margin-left: 0;
}

.esc-taller__resumen-celda {
    display: flex;
    align-items: baseline;
    gap: 6px;
    justify-content: space-between;
    min-width: 108px;
}

.esc-taller__resumen-rot {
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.esc-taller__resumen-n {
    color: var(--esc-title);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* Lo calculado, en el azul del modulo: no es lo mismo contar seis ejercicios
   que estimar una carga, y el color lo dice sin tener que explicarlo. */
.esc-taller__resumen-celda.es-calculo .esc-taller__resumen-n {
    color: var(--esc-accent);
}

.esc-taller__resumen-i {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    font-size: 10px;
}

.esc-taller__resumen-i[data-ayuda]::after {
    left: auto;
    right: 0;
    width: 340px;
    transform: none;
}

@media (max-width: 1100px) {

    .esc-taller__resumen {
        margin-left: 0;
        border-left: 0;
        padding-left: 0;
    }
}

/* LA FATIGA ACUMULADA, EN VERDE FLUOR.

   Tiene que distinguirse a la primera de las otras tres: el esfuerzo va en
   azul, la media en ambar y los huecos en gris. El verde fluor no se parece a
   ninguno y ademas dice lo que es —algo que se enciende y va subiendo—.

   Con sombra oscura detras SIEMPRE, tambien sobre fondo claro: un fluor sobre
   blanco brilla tanto que se difumina, y la sombra le devuelve el canto. */
.esc-esfuerzo__fatiga {
    fill: none;
    stroke: #39FF6A;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 7 4;
    vector-effect: non-scaling-stroke;
}

/* Sobre blanco, un verde un punto mas cerrado: el fluor puro se difumina. */
.esc-hud__tiempo.es-claro .esc-esfuerzo__fatiga {
    stroke: #12C551;
}

.esc-esfuerzo__muestra.es-fatiga {
    border-top: 2px dashed #39FF6A;
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__muestra.es-fatiga {
    border-top-color: #18E05A;
}

/* LA LEYENDA DEL DIBUJO. Tres trazos distintos y ninguno decia su nombre. */
.esc-esfuerzo__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 6px;
}

.esc-esfuerzo__leyenda-it {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--esc-hud-suave);
    font-size: 10px;
    font-weight: 600;
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__leyenda-it {
    color: var(--esc-text-soft);
}

.esc-esfuerzo__muestra {
    display: inline-block;
    width: 20px;
    height: 0;
    border-top: 2px solid #FFF;
    border-radius: 2px;
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__muestra.es-linea {
    border-top-color: #0F9DEA;
}

.esc-esfuerzo__muestra.es-media {
    border-top: 2px dashed #F69F00;
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__muestra.es-media {
    border-top-color: #E07B00;
}

/* El hueco no es una linea: es el suelo del dibujo, asi que se enseña como un
   bloque bajito y no como un trazo. */
.esc-esfuerzo__muestra.es-hueco {
    height: 8px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 2px;
    background: rgba(255, 255, 255, .10);
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__muestra.es-hueco {
    border-color: var(--esc-border);
    background: var(--esc-bg);
}

/* EL CORTE ENTRE EJERCICIOS. Mas fuerte que las verticales del reloj, porque
   dice otra cosa: aquellas marcan el minuto y esta marca de quien es lo que
   hay a cada lado. Sube desde la misma raya que separa los tramos de la barra
   y cruza la curva entera. */
.esc-esfuerzo__corte {
    stroke: rgba(255, 255, 255, .30);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__corte {
    stroke: rgba(26, 43, 60, .30);
}

/* Las verticales del tiempo, en los mismos minutos que la regla de abajo. */
.esc-esfuerzo__vertical {
    stroke: rgba(255, 255, 255, .12);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    vector-effect: non-scaling-stroke;
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__vertical {
    stroke: rgba(26, 43, 60, .12);
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__eje-n {
    color: var(--esc-text-soft);
}

/* Con las lineas finas, el relleno recupera su papel: es el que da el volumen
   del esfuerzo, y las lineas dibujan el borde. */
.esc-esfuerzo__area {
    fill: url(#esc-curva-tinta);
    stroke: none;
    opacity: .9;
}

/* La franja de cada ejercicio, del color de su fase y muy apagada: deja ver de
   un golpe que este pico es de este ejercicio y no del de al lado. */
.esc-esfuerzo__banda {
    fill: #FFF;
    opacity: .05;
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__banda {
    fill: #1A2B3C;
    opacity: .04;
}

/* El punto de cada pico. El viewBox esta estirado a lo ancho, asi que el
   circulo saldria ovalado; con el radio en pixeles de pantalla vuelve a ser
   redondo pase lo que pase con el ancho. */
.esc-esfuerzo__punto {
    fill: #FFF;
    stroke: #0F9DEA;
    stroke-width: 2;
    r: 2.5px;
    vector-effect: non-scaling-stroke;
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__punto {
    fill: #FFF;
}

.esc-esfuerzo__guia {
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

.esc-esfuerzo__pie,
.esc-esfuerzo__vacia {
    margin-top: 2px;
    color: var(--esc-hud-suave);
    font-size: 10px;
}

.esc-esfuerzo__pie.es-ayuda {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__guia {
    stroke: rgba(26, 43, 60, .14);
}

.esc-hud__tiempo.es-claro .esc-esfuerzo__pie,
.esc-hud__tiempo.es-claro .esc-esfuerzo__vacia {
    color: var(--esc-text-soft);
}

.esc-hud__tiempo-pista {
    display: flex;
    align-items: stretch;
    height: 46px;
    margin-top: 6px;
    border-radius: 6px;
    background: #232838;
    overflow: hidden;
}

.esc-hud__tramo {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0 6px;
    border-right: 1px solid rgba(0, 0, 0, .35);
    color: #FFF;
    font-size: 10px;
    overflow: hidden;
    cursor: default;
}

.esc-hud__tramo-n {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .30);
    font-size: 9px;
    font-weight: 700;
}

.esc-hud__tramo-txt {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Los minutos, pegados al canto derecho de su tramo: ahi es donde acaba, y es
   donde el ojo los busca al comparar con la regla. */
.esc-hud__tramo-min {
    flex: none;
    margin-left: auto;
    padding-left: 6px;
    font-size: 10px;
    font-weight: 700;
    opacity: .85;
}

/* Lo que se sale de la hora: sigue estando —alguien lo puso— pero rayado, para
   que se vea que cae fuera de la clase. */
.esc-hud__tramo.es-fuera {
    background-image: repeating-linear-gradient(45deg,
        rgba(0, 0, 0, .28) 0 6px, transparent 6px 12px);
}

/* Lo que queda por repartir: hueco y no relleno, que es lo que es. */
.esc-hud__tramo.es-libre {
    border-right: 0;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--esc-hud-linea);
    color: var(--esc-hud-suave);
}

/* LOS HITOS. Una marca cada diez minutos con su hora, y la del final de la
   clase en blanco: es la unica que significa algo por si misma. */
.esc-hud__regla {
    position: relative;
    height: 18px;
    margin-top: 2px;
}

.esc-hud__hito {
    position: absolute;
    top: 0;
    width: 0;
}

.esc-hud__hito::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 5px;
    background: var(--esc-hud-linea);
}

.esc-hud__hito-txt {
    position: absolute;
    top: 6px;
    left: 0;
    transform: translateX(-50%);
    color: var(--esc-hud-suave);
    font-size: 9px;
    white-space: nowrap;
}

.esc-hud__hito.es-final::before {
    height: 8px;
    background: var(--esc-hud-texto);
}

.esc-hud__hito.es-final .esc-hud__hito-txt {
    color: var(--esc-hud-texto);
    font-weight: 700;
}


/* LA MISMA LINEA, EN CLARO, PARA LA LUPA AZUL

   La pregunta es la misma en las dos pantallas —como va la clase— y la
   respuesta no puede tener dos formas segun por donde se entre. Solo cambian
   los colores, que alli el fondo es oscuro y aqui blanco. */
.esc-hud__tiempo.es-claro {
    padding: 12px 14px 8px;
    border: 1px solid #E4E9EE;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 1px 2px rgba(26, 43, 60, .06),
                0 10px 24px -18px rgba(26, 43, 60, .45);
}

.esc-hud__tiempo.es-claro .esc-hud__rotulo {
    color: var(--esc-text-soft);
}

.esc-hud__tiempo.es-claro .esc-hud__tiempo-pista {
    background: var(--esc-border-soft);
}

.esc-hud__tiempo.es-claro .esc-hud__tramo.es-libre {
    box-shadow: inset 0 0 0 1px var(--esc-border);
    color: var(--esc-text-soft);
}

.esc-hud__tiempo.es-claro .esc-hud__hito::before {
    background: var(--esc-border);
}

.esc-hud__tiempo.es-claro .esc-hud__hito-txt {
    color: var(--esc-text-soft);
}

.esc-hud__tiempo.es-claro .esc-hud__hito.es-final::before {
    background: var(--esc-title);
}

.esc-hud__tiempo.es-claro .esc-hud__hito.es-final .esc-hud__hito-txt {
    color: var(--esc-title);
}

.esc-hud__tiempo.es-claro .esc-hud__vacio {
    color: var(--esc-text-soft);
    font-size: 11px;
}


/* --- Las tres columnas ---------------------------------------------------- */

.esc-hud__cols {
    display: grid;
    grid-template-columns: 300px minmax(0, 1.5fr) 320px;
    gap: 12px;
    align-items: start;
}

@media (max-width: 1280px) {
    .esc-hud__cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

.esc-hud__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 220px);
    padding: 10px;
    border: 1px solid var(--esc-hud-linea);
    border-radius: 10px;
    background: var(--esc-hud-caja);
    overflow-y: auto;
}

/* EL SCROLL, DEL COLOR DE LA PANTALLA

   El del sistema viene gris claro y ancho: sobre el panel oscuro es una franja
   blanca pegada al canto que se ve antes que lo que hay dentro. Estrecho y en
   los grises de la propia pantalla se usa igual y no llama.

   Va en las tres columnas y no solo en la ultima: cualquiera de ellas puede
   crecer —el banco con cien ejercicios, la sesion con veinte lineas— y un
   scroll oscuro y otro blanco en la misma ventana seria peor que dos blancos.

   Y en el de la ventana entera, el del canto derecho: es el mas largo de los
   cuatro y el que mas cantaba.

   Dos formas de decirlo porque hay dos motores. Chrome y Safari entienden
   ::-webkit-scrollbar, y ahi se pide 6px exactos. Firefox solo entiende
   scrollbar-width, que no es una medida sino un "estrecho" a su manera; se le
   da solo a el, porque puesto a los dos gana sobre el ::-webkit y deja la
   barra en dos pixeles, imposible de agarrar con el raton. */
@supports not selector(::-webkit-scrollbar) {

    .esc-hud__col,
    .esc-modal__caja:has(.esc-hud) .esc-modal__cuerpo {
        scrollbar-width: thin;
        scrollbar-color: #454D6F transparent;
    }
}

.esc-hud__col::-webkit-scrollbar,
.esc-modal__caja:has(.esc-hud) .esc-modal__cuerpo::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.esc-hud__col::-webkit-scrollbar-track,
.esc-modal__caja:has(.esc-hud) .esc-modal__cuerpo::-webkit-scrollbar-track {
    background: transparent;
}

.esc-hud__col::-webkit-scrollbar-thumb,
.esc-modal__caja:has(.esc-hud) .esc-modal__cuerpo::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #454D6F;
}

.esc-hud__col::-webkit-scrollbar-thumb:hover,
.esc-modal__caja:has(.esc-hud) .esc-modal__cuerpo::-webkit-scrollbar-thumb:hover {
    background: #5A6489;
}

.esc-hud__rotulo {
    color: var(--esc-hud-suave);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.esc-hud__rotulo.es-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.esc-hud__accion {
    padding: 6px 10px;
    border: 1px solid var(--esc-accent);
    border-radius: 6px;
    background: transparent;
    color: var(--esc-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: pointer;
}

.esc-hud__accion:hover {
    background: var(--esc-accent);
    color: #FFF;
}

.esc-hud__vacio,
.esc-hud__hueco {
    padding: 10px;
    border: 1px dashed var(--esc-hud-linea);
    border-radius: 8px;
    color: var(--esc-hud-suave);
    font-size: 11px;
    line-height: 1.5;
}

/* --- El banco ------------------------------------------------------------- */

.esc-hud__facetas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.esc-hud__faceta {
    --esc-fase: #8E9BA8;
    padding: 5px 9px;
    border: 1px solid var(--esc-hud-linea);
    border-radius: 20px;
    background: transparent;
    color: var(--esc-hud-suave);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

.esc-hud__faceta.is-activa {
    border-color: var(--esc-fase);
    background: var(--esc-fase);
    color: #0D1319;
}

.esc-hud__lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.esc-hud__ej {
    --esc-fase: #8E9BA8;
    position: relative;
    padding: 8px 40px 8px 10px;
    border: 1px solid var(--esc-hud-linea);
    border-left: 3px solid var(--esc-fase);
    border-radius: 8px;
    background: #2A2F45;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.esc-hud__ej:hover {
    background: #2A2F45;
    border-color: var(--esc-fase);
}

.esc-hud__ej.is-arrastrando {
    opacity: .45;
}

.esc-hud__ej-cab {
    display: flex;
    align-items: center;
    gap: 6px;
}

.esc-hud__ej-fase {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--esc-fase);
    color: #0D1319;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.esc-hud__ej-nombre {
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-hud__ej-pie {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 5px;
}

.esc-hud__ej-tag {
    padding: 1px 6px;
    border: 1px solid var(--esc-hud-linea);
    border-radius: 20px;
    color: var(--esc-hud-suave);
    font-size: 9px;
}

/* Lo que se sabe de verdad de ese ejercicio aqui: cuando lo hizo el grupo, o
   cuantas veces lo ha hecho el deportista que se este mirando. */
.esc-hud__ej-historia {
    color: #6F8AA5;
    font-size: 9px;
    font-style: italic;
}

.esc-hud__ej-mas {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--esc-accent);
    border-radius: 6px;
    background: transparent;
    color: var(--esc-accent);
    cursor: pointer;
}

.esc-hud__ej-mas:hover {
    background: var(--esc-accent);
    color: #FFF;
}

/* --- El constructor por fases --------------------------------------------- */

.esc-hud__fase {
    --esc-fase: #8E9BA8;
    border: 1px solid var(--esc-hud-linea);
    border-radius: 8px;
    overflow: hidden;
}

.esc-hud__fase-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #2A2F45;
    border-bottom: 1px solid var(--esc-hud-linea);
}

.esc-hud__fase-clave {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--esc-fase);
    color: #0D1319;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.esc-hud__fase-nombre {
    font-size: 12px;
    font-weight: 700;
}

.esc-hud__fase-n {
    margin-left: auto;
    color: var(--esc-hud-suave);
    font-size: 10px;
}

.esc-hud__fase-caja {
    min-height: 54px;
    padding: 6px;
    transition: background .12s ease, box-shadow .12s ease;
}

.esc-hud__fase-caja.is-destino {
    background: rgba(15, 157, 234, .12);
    box-shadow: inset 0 0 0 2px var(--esc-accent);
}

.esc-hud__fase-pista {
    padding: 6px;
    color: var(--esc-hud-suave);
    font-size: 10px;
    font-style: italic;
}

.esc-hud__linea {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
}

.esc-hud__linea + .esc-hud__linea {
    margin-top: 4px;
    border-top: 1px solid var(--esc-hud-linea);
}

.esc-hud__linea-txt {
    flex: 1;
    min-width: 0;
}

.esc-hud__linea-nombre {
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.esc-hud__linea-nombre:hover {
    color: var(--esc-accent);
}

.esc-hud__linea-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 4px;
}

.esc-hud__linea-nums {
    display: flex;
    gap: 4px;
}

.esc-hud__linea-nums .esc-asig-num {
    border-color: var(--esc-hud-linea);
    background: #232838;
}

.esc-hud__linea-nums input {
    color: var(--esc-hud-texto);
}

.esc-hud__quitar {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--esc-hud-suave);
    cursor: pointer;
}

.esc-hud__quitar:hover {
    background: rgba(217, 83, 79, .2);
    color: #F4A6A4;
}

/* --- La telemetria -------------------------------------------------------- */

.esc-hud__apilada {
    display: flex;
    height: 10px;
    border-radius: 5px;
    background: #232838;
    overflow: hidden;
}

.esc-hud__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 6px;
}

.esc-hud__leyenda-x {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--esc-hud-suave);
    font-size: 10px;
}

.esc-hud__leyenda-x i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: currentColor;
}

.esc-hud__leyenda-x.es-hoy i    { background: #0F9DEA; }
.esc-hud__leyenda-x.es-antes i  { background: #4A5A6B; }

.esc-hud__svg {
    width: 100%;
    height: auto;
}

.esc-hud__reja {
    fill: none;
    stroke: #3C4363;
    stroke-width: 1;
}

.esc-hud__area {
    stroke-width: 1.5;
}

.esc-hud__area.es-antes {
    fill: rgba(74, 90, 107, .45);
    stroke: #4A5A6B;
}

.esc-hud__area.es-hoy {
    fill: rgba(15, 157, 234, .30);
    stroke: #0F9DEA;
}

.esc-hud__eje {
    fill: #A3AFC6;
    font-size: 9px;
}

.esc-hud__barra {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.esc-hud__barra-rot {
    flex: none;
    width: 92px;
    overflow: hidden;
    color: var(--esc-hud-suave);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-hud__barra-pista {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: #232838;
    overflow: hidden;
}

.esc-hud__barra-pista i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #0F9DEA, #16A085);
}

.esc-hud__barra-n {
    flex: none;
    width: 18px;
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}

.esc-hud__curva {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 84px;
}

.esc-hud__semana {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
    height: 100%;
}

.esc-hud__semana i {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #0F9DEA, #14608F);
}

.esc-hud__semana-rot {
    margin-top: 4px;
    color: var(--esc-hud-suave);
    font-size: 8px;
}

.esc-hud__aviso {
    padding: 8px 10px;
    border-radius: 8px;
    border-left: 3px solid #4A5A6B;
    background: #2A2F45;
    color: var(--esc-hud-texto);
    font-size: 11px;
    line-height: 1.45;
}

.esc-hud__aviso.es-aviso {
    border-left-color: #E8A33D;
}

/* La segunda lupa, al lado de la primera y con otro icono: misma esquina, otra
   forma de trabajar.

   EN AMBAR, el de .btn-warning de la plataforma, y no en negro: en negro
   parecia el boton apagado de la primera —el mismo cuadrado, el mismo sitio, y
   el gris se lee como "este no toca ahora"—. Con dos colores vivos se ven dos
   puertas y no una puerta con su sombra. */
.esc-asig-lupa.es-mando {
    left: calc(10px + var(--esc-lupa) + 6px);
    border-color: var(--esc-warning-border);
    background: var(--esc-warning);
}

/* Se oscurece como la primera, que es el gesto del modulo. */
.esc-asig-lupa.es-mando:hover {
    filter: brightness(.92);
}


/* =============================================================================
   EL VELO DE LOS DESPLEGABLES

   Mientras hay una lista abierta, todo lo demas se apaga un punto. La lista la
   dibuja el sistema por encima de la pagina, asi que el velo no la tapa: solo
   quita ruido de detras y la deja recortada.

   Un velo por encima y no un `filter` sobre la pagina: el filter convierte al
   contenedor en marco de referencia de todo lo que lleve dentro en posicion
   fija —el cajon de los bancos, los modales— y los descoloca mientras dura.

   Cubre todo: pantallas, emergentes, cajones y capas, porque es un velo sobre
   la ventana entera y no sobre una caja concreta.
============================================================================= */

body.es-eligiendo::after {
    content: '';
    position: fixed;
    inset: 0;

    /* Por encima de todo lo del modulo —modales en 1070, capas en 1080— y muy
       por debajo de la lista del sistema, que no vive en la pagina. */
    z-index: 2000000;

    background: rgba(26, 43, 60, .05);
    -webkit-backdrop-filter: blur(1.2px) brightness(.97);
    backdrop-filter: blur(1.2px) brightness(.97);

    /* No atrapa el raton: el clic tiene que llegar al desplegable. */
    pointer-events: none;
}

/* Los navegadores que no saben de backdrop-filter se quedan con el velo a
   secas, que ya separa lo suficiente. */
@supports not (backdrop-filter: blur(1px)) {
    body.es-eligiendo::after {
        background: rgba(26, 43, 60, .10);
    }
}


/* LA PIZARRA DEL EJERCICIO, EN LA FICHA

   La pista se pinta con pizarra.css, la misma que en el banco. Aqui solo el
   hueco donde va: ancho entero de la columna, porque un dibujo de pista
   pequeño no se lee, y con el borde redondeado del resto de bloques. */
.esc-detalle__pizarra {
    margin-top: 6px;
    border-radius: 10px;
    overflow: hidden;
}


/* =============================================================================
   LLEVARLO A LOS PROXIMOS DIAS

   Va debajo del lote, en la misma columna: se monta la sesion y, ahi mismo, se
   dice cuantas veces mas se va a dar. En otra pestaña seria un sitio al que
   hay que acordarse de ir.

   Los nueve cuadrados son un mando de los de siempre, pero de los que admiten
   varios a la vez: aqui no se elige UNA opcion, se marcan las que hagan falta
   y se puede saltar la 1 y la 2 para quedarse con la 3.
============================================================================= */

/* GUARDARLO Y PONERLO, uno al lado del otro y repartiendose el ancho: son dos
   destinos del mismo trabajo —el banco o la pista— y ninguno manda sobre el
   otro. A la misma altura aunque a uno le quepa mas texto que al otro. */
.esc-lote-acciones {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
}

.esc-lote-acciones .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
}

/* EL COLOR HACE DE NOMBRE CORTO. Azul el banco, naranja la pista, verde los
   proximos dias; y el mismo color en la columna y en el pie, que son el mismo
   boton puesto dos veces. */
.btn.esc-boton-azul {
    border-color: var(--esc-accent);
    background: var(--esc-accent);
    color: #FFF;
}

.btn.esc-boton-azul:hover,
.btn.esc-boton-azul:focus {
    border-color: var(--esc-accent);
    background: var(--esc-accent);
    color: #FFF;
    filter: brightness(.92);
}

/* UN BOTON APAGADO SIGUE SIENDO UN BOTON.

   Estaban al 50% de opacidad, asi que con el lote vacio los seis se quedaban
   en un fantasma palido sobre fondo blanco y parecia que no estaban: "se han
   perdido los botones" era esto, no un fallo de codigo.

   Ahora se apagan cambiando de ROPA y no de transparencia: gris macizo con su
   borde. Se ve perfectamente que hay un boton, se lee lo que dice —que ademas
   explica por que no se puede pulsar todavia, "monta el lote para poder
   ponerlo"— y se distingue del que si se puede pulsar sin ninguna duda. */
.esc-taller .btn[disabled],
.esc-modal__pie .btn[disabled] {
    border-color: #D5DCE3 !important;
    background: #E9EDF1 !important;
    background-image: none !important;
    color: #8A96A3 !important;
    opacity: 1;
    box-shadow: none;
    cursor: not-allowed;
}

/* En la ropa oscura, el mismo criterio con sus grises. */
.esc-taller.es-oscuro .btn[disabled],
.esc-modal__caja:has(.esc-taller.es-oscuro) .esc-modal__pie .btn[disabled] {
    border-color: #3F4766 !important;
    background: #333A55 !important;
    color: #74839366 !important;
    color: #748393 !important;
}

.esc-llevar {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--esc-border);
    border-radius: 10px;
    background: var(--esc-surface);
}

.esc-llevar__cab {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.esc-llevar__rot {
    color: var(--esc-title);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* La burbuja, anclada a la izquierda y ancha: son cuatro frases y la columna
   es estrecha. */
.esc-llevar__i[data-ayuda]::after {
    left: 0;
    width: 320px;
    transform: none;
}

.esc-llevar__nums {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 9px;
}

.esc-llevar__n {
    flex: 1;
    min-width: 30px;
    padding: 6px 0;
    border: 1px solid var(--esc-border);
    border-radius: 7px;
    background: #FFF;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.esc-llevar__n:hover {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}

.esc-llevar__n.is-activa {
    border-color: var(--esc-accent);
    background: var(--esc-accent);
    color: #FFF;
}

.esc-llevar__ir {
    width: 100%;
    font-size: 11px;
}

/* A QUE GRUPOS, en la pregunta del transporte. Cada uno con las fechas que le
   van a tocar: un "3" no es una decision hasta que dice "jueves 8". */
.esc-llevar__grupos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

/* El aire lo pone el gap de la lista; la fila trae el suyo de la columna del
   lote y sumarian el doble. */
.esc-llevar__grupos .esc-taller__grupo + .esc-taller__grupo {
    margin-top: 0;
}

/* La fila del transporte es la MISMA que la del lote —.esc-taller__grupo—, con
   su chapa de nivel, su hora y su entrenador: se esta decidiendo lo mismo, a
   quien se le manda el trabajo, y no tiene sentido que se vea de dos maneras.
   Aqui solo va lo que esta fila tiene de mas: los dias que le tocan. */
.esc-llevar__dias {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--esc-border);
    color: var(--esc-title);
    font-size: 11px;
    font-weight: 600;
}

.esc-llevar__dias.es-aviso {
    color: var(--esc-warning-border);
}

@media (pointer: coarse) {

    .esc-lote-acciones .btn {
        min-height: 46px;
        font-size: 12px;
    }

    .esc-llevar__n {
        min-width: 40px;
        padding: 11px 0;
        font-size: 14px;
    }

    .esc-llevar__ir {
        min-height: 44px;
        font-size: 13px;
    }
}


/* =============================================================================
   LA LUPA AZUL, EN OSCURO — PRUEBA

   La misma ropa que el puesto de mando: fondo #272C40, fichas #2D3349 y lineas
   #3C4363. Es una prueba para comparar las dos y quedarse con una; todo cuelga
   de `.esc-taller.es-oscuro`, asi que quitando esa clase en abrirTaller vuelve
   la de siempre y este bloque se puede borrar entero.

   POR QUE PUEDE QUEDAR MEJOR: la pantalla es un tablero de trabajo que se mira
   una hora seguida y de noche, con la luz de la pista al lado. En oscuro, lo
   que brilla es el contenido —las chapas de color, la grafica, los nombres— y
   no el fondo.
============================================================================= */

.esc-taller.es-oscuro {
    --esc-hud-fondo: #272C40;
    --esc-hud-caja: #2D3349;
    --esc-hud-linea: #3C4363;
    --esc-hud-texto: #E8EDF5;
    --esc-hud-suave: #A3AFC6;
}

.esc-modal__caja:has(.esc-taller.es-oscuro) {
    background: #272C40;
}

.esc-modal__caja:has(.esc-taller.es-oscuro) .esc-modal__cuerpo {
    background: #272C40;
    color: #E8EDF5;
}

.esc-modal__caja:has(.esc-taller.es-oscuro) .esc-modal__cab,
.esc-modal__caja:has(.esc-taller.es-oscuro) .esc-modal__pie {
    border-color: #3C4363;
    background: #2A2F45;
    color: #E8EDF5;
}

/* --- La cabecera del grupo y su resumen ---------------------------------- */

.esc-taller.es-oscuro .esc-taller__cab {
    border-color: #3C4363;
    background: #2D3349;
    box-shadow: none;
}

.esc-taller.es-oscuro .esc-taller__nombre,
.esc-taller.es-oscuro .esc-taller__resumen-n {
    color: #E8EDF5;
}

.esc-taller.es-oscuro .esc-asig-dato,
.esc-taller.es-oscuro .esc-taller__edades,
.esc-taller.es-oscuro .esc-taller__resumen-rot {
    color: #A3AFC6;
}

.esc-taller.es-oscuro .esc-taller__resumen {
    border-left-color: #3C4363;
}

.esc-taller.es-oscuro .esc-taller__avios-rot,
.esc-taller.es-oscuro .esc-taller__avios-nada {
    color: #A3AFC6;
}

/* Las pastillas de los avios, en oscuro. Las de dificultad traen su color de
   la base y se leen; las de tipo y material no traen ninguno y se quedaban con
   el texto oscuro de la version clara dentro de un borde blanco: se veia la
   pastilla y no lo que ponia. */
.esc-taller.es-oscuro .esc-taller__pastilla {
    border-color: #6E7896;
    color: #D2DAE8;
}

.esc-taller.es-oscuro .esc-taller__resumen-celda.es-calculo .esc-taller__resumen-n {
    color: #48B9F5;
}

/* --- Las tres columnas ---------------------------------------------------- */

.esc-taller.es-oscuro .esc-taller__col {
    border-color: #3C4363;
    background: #2D3349;
    box-shadow: none;
}

.esc-taller.es-oscuro .esc-taller__rotulo {
    border-bottom-color: #3C4363;
    background: linear-gradient(180deg, #333A55 0%, #2D3349 100%);
    color: #E8EDF5;
}

.esc-taller.es-oscuro .esc-taller__rotulo .ph,
.esc-taller.es-oscuro .esc-taller__rotulo-txt {
    color: #A3AFC6;
}

/* --- Las fichas de dentro: alumnos, banco y sesion ------------------------ */

.esc-taller.es-oscuro .esc-taller__alumno,
.esc-taller.es-oscuro .esc-taller__grupo,
.esc-taller.es-oscuro .esc-taller__linea,
.esc-taller.es-oscuro .esc-asig-ej {
    border-color: #3C4363;
    background: #333A55;
    color: #E8EDF5;
}

.esc-taller.es-oscuro .esc-taller__alumno:hover,
.esc-taller.es-oscuro .esc-taller__grupo:hover,
.esc-taller.es-oscuro .esc-taller__linea:hover,
.esc-taller.es-oscuro .esc-asig-ej:hover {
    border-color: #48B9F5;
    background: #333A55;
}

.esc-taller.es-oscuro .esc-taller__alumno-nombre,
.esc-taller.es-oscuro .esc-taller__grupo-nombre,
.esc-taller.es-oscuro .esc-taller__linea-nombre,
.esc-taller.es-oscuro .esc-asig-ej__nombre {
    color: #E8EDF5;
}

.esc-taller.es-oscuro .esc-taller__alumno-datos,
.esc-taller.es-oscuro .esc-taller__grupo-meta,
.esc-taller.es-oscuro .esc-asig-ej__meta,
.esc-taller.es-oscuro .esc-taller__vacio,
.esc-taller.es-oscuro .esc-ayuda {
    color: #A3AFC6;
}

.esc-taller.es-oscuro .esc-taller__linea-n {
    background: #3C4363;
    color: #E8EDF5;
}

/* Las etiquetas en hueco: sobre oscuro, el borde gris claro desaparece. */
.esc-taller.es-oscuro .esc-asig-etiqueta {
    border-color: #454D6F;
    color: #B6C0D4;
}

/* --- Lo que se escribe --------------------------------------------------- */

.esc-taller.es-oscuro .form-control {
    border-color: #3C4363;
    background: #2A2F45;
    color: #E8EDF5;
}

.esc-taller.es-oscuro .form-control::placeholder {
    color: #6C7C8E;
}

.esc-taller.es-oscuro .esc-asig-num__sufijo {
    color: #A3AFC6;
}

/* Las pestañas y las pastillas de area */
.esc-taller.es-oscuro .esc-taller__pestana,
.esc-taller.es-oscuro .esc-asig-area {
    border-color: #3C4363;
    background: #333A55;
    color: #B6C0D4;
}

.esc-taller.es-oscuro .esc-taller__pestana.is-activa,
.esc-taller.es-oscuro .esc-asig-area.is-activa {
    border-color: #0F9DEA;
    background: #0F9DEA;
    color: #FFF;
}

/* --- El buscador y los botones redondos ---------------------------------- */

/* LOS MANDOS DE CADA LINEA DE LA SESION, QUE SE VEAN

   El asa, la X y las tres cifras —series, repeticiones, minutos— salian
   apagados sobre el panel: el asa en gris sobre gris, la X casi del color del
   fondo, y las cifras en el azul marino de la version clara, que sobre este
   fondo es oscuro sobre oscuro. Se sabia que habia algo; no se leia.

   Mismo criterio que el «+» del banco: el signo en blanco y un borde claro
   que lo recorta del panel. La X lleva el mismo borde pero se pone roja al
   pasar por encima, que es lo que avisa de que quita. */
.esc-taller.es-oscuro .esc-taller__asa {
    border: 1.5px solid #A3AFC6;
    background: #3C4363;
    color: #FFF;
}

.esc-taller.es-oscuro .esc-taller__linea:hover .esc-taller__asa {
    border-color: #0F9DEA;
    background: #0F9DEA;
    color: #FFF;
}

.esc-taller.es-oscuro .esc-taller__quitar {
    border: 1.5px solid #6E7896;
    background: transparent;
    color: #FFF;
}

.esc-taller.es-oscuro .esc-taller__quitar:hover {
    border-color: #E0655A;
    background: rgba(224, 101, 90, .18);
    color: #FFB3AC;
}

/* Las cifras: en blanco lo escrito y en gris claro la raya de lo que falta,
   para que "2 × 3 rep 12 min" se lea y el "– rep" se note que esta vacio. */
.esc-taller.es-oscuro .esc-asig-num input,
.esc-hud .esc-asig-num input {
    color: #FFF;
}

.esc-taller.es-oscuro .esc-asig-num input::placeholder,
.esc-hud .esc-asig-num input::placeholder {
    color: #A3AFC6;
    opacity: 1;
}

.esc-taller.es-oscuro .esc-asig-num input:hover,
.esc-hud .esc-asig-num input:hover {
    border-color: #5A6489;
}

.esc-taller.es-oscuro .esc-asig-num input:focus,
.esc-hud .esc-asig-num input:focus {
    border-color: #0F9DEA;
    background: #2A2F45;
}

/* EL «+» DE LAS TARJETAS DEL BANCO, QUE SE VEA

   Iba en gris claro sobre un cuadro casi del color de la tarjeta, con un
   borde que apenas se distinguia de ella: se sabia que habia algo en la
   esquina, pero no que era un boton. Y es el gesto principal de la columna
   —poner este ejercicio en la sesion—.

   Ahora el signo en blanco y un borde claro que lo recorta de la tarjeta.
   Lo mismo en el puesto de mando, que tiene su propio «+» y el mismo
   problema: dos «+» que hacen lo mismo tienen que verse igual. */
.esc-taller.es-oscuro .esc-asig-ej__mas,
.esc-hud__ej-mas {
    border: 1.5px solid #A3AFC6;
    background: #3C4363;
    color: #FFF;
    font-size: 15px;
    font-weight: 700;
}

.esc-taller.es-oscuro .esc-asig-ej__mas .ph,
.esc-hud__ej-mas .ph {
    color: #FFF;
}

.esc-taller.es-oscuro .esc-asig-ej__mas:hover,
.esc-hud__ej-mas:hover {
    border-color: #0F9DEA;
    background: #0F9DEA;
    color: #FFF;
}

/* El scroll, con los grises de esta ropa y no con los de la clara. */
.esc-taller.es-oscuro .esc-taller__col::-webkit-scrollbar-thumb,
.esc-taller.es-oscuro .esc-taller__sesion::-webkit-scrollbar-thumb,
.esc-taller.es-oscuro .esc-taller__alumnos::-webkit-scrollbar-thumb,
.esc-taller.es-oscuro .esc-taller__banco::-webkit-scrollbar-thumb {
    background: #454D6F;
}

/* --- Lo que le faltaba al LOTE en oscuro -------------------------------- */

.esc-taller.es-oscuro .esc-taller__edades,
.esc-taller.es-oscuro .esc-taller__vacio,
.esc-taller.es-oscuro .esc-asig-banco__cuenta {
    color: #A3AFC6;
}

/* Las dos cajas de la tercera columna: el transporte y su mando de cuadrados. */
.esc-taller.es-oscuro .esc-llevar {
    border-color: #3C4363;
    background: #333A55;
}

.esc-taller.es-oscuro .esc-llevar__rot {
    color: #E8EDF5;
}

.esc-taller.es-oscuro .esc-llevar__n {
    border-color: #454D6F;
    background: #2D3349;
    color: #B6C0D4;
}

.esc-taller.es-oscuro .esc-llevar__n:hover {
    border-color: #48B9F5;
    color: #48B9F5;
}

.esc-taller.es-oscuro .esc-llevar__n.is-activa {
    border-color: #0F9DEA;
    background: #0F9DEA;
    color: #FFF;
}

/* La caja donde se sueltan los ejercicios del lote. */
.esc-taller.es-oscuro .esc-taller__sesion.is-destino {
    background: #2C3A63;
    box-shadow: inset 0 0 0 2px #48B9F5;
}

/* Los grupos de la primera columna y su casilla. */
.esc-taller.es-oscuro .esc-taller__grupo.es-fuera {
    background: transparent;
}

.esc-taller.es-oscuro .esc-asig-marca span {
    border-color: #454D6F;
    background: #2A2F45;
}

/* Los filtros y las pastillas de area del banco. */
.esc-taller.es-oscuro .esc-asig-filtros .form-control,
.esc-taller.es-oscuro .esc-asig-banco__buscar .form-control {
    border-color: #3C4363;
    background: #2A2F45;
    color: #E8EDF5;
}

.esc-taller.es-oscuro .esc-asig-banco__buscar .ph {
    color: #6C7C8E;
}

/* El aviso de "a que grupos" y los rotulos sueltos. */
.esc-taller.es-oscuro .esc-asig-destino {
    border-color: #3C4363;
    background: #333A55;
    color: #B6C0D4;
}

/* La pregunta que sale encima —guardar, transportar— tambien va oscura, que
   sale de esta ventana. */
.esc-modal__caja:has(.esc-taller.es-oscuro) ~ .esc-capa .esc-detalle,
body:has(.esc-taller.es-oscuro) .esc-capa .esc-detalle {
    background: #2D3349;
    color: #E8EDF5;
}

body:has(.esc-taller.es-oscuro) .esc-capa .esc-detalle__cab,
body:has(.esc-taller.es-oscuro) .esc-capa .esc-detalle__pie {
    border-color: #3C4363;
    background: #2A2F45;
}

body:has(.esc-taller.es-oscuro) .esc-capa .esc-detalle__nombre,
body:has(.esc-taller.es-oscuro) .esc-capa h2 {
    color: #E8EDF5;
}

body:has(.esc-taller.es-oscuro) .esc-capa .esc-pregunta__texto,
body:has(.esc-taller.es-oscuro) .esc-capa .esc-form-ent label > span {
    color: #B6C0D4;
}

body:has(.esc-taller.es-oscuro) .esc-capa .form-control {
    border-color: #3C4363;
    background: #2A2F45;
    color: #E8EDF5;
}

body:has(.esc-taller.es-oscuro) .esc-capa .esc-form-ent__resumen,
body:has(.esc-taller.es-oscuro) .esc-capa .esc-taller__grupo {
    border-color: #3C4363;
    background: #333A55;
}

body:has(.esc-taller.es-oscuro) .esc-capa .esc-form-ent__reloj-n,
body:has(.esc-taller.es-oscuro) .esc-capa .esc-form-ent__lista {
    color: #E8EDF5;
}

/* --- Lo ultimo que quedaba en claro ------------------------------------- */

/* La chapa hueca del nivel, la tira de explicacion, la cuenta del rotulo, el
   resumen de la cabecera y las redondas de ayuda: eran los cinco sitios donde
   todavia asomaba el fondo blanco. */
.esc-taller.es-oscuro .esc-asig-nivel__nombre {
    border-color: #454D6F;
    background: transparent;
}

.esc-taller.es-oscuro .esc-taller__edades {
    border-color: #3C4363;
    background: #2D3349;
    color: #B6C0D4;
}

.esc-taller.es-oscuro .esc-taller__rotulo-n {
    background: #3C4363;
    color: #B6C0D4;
}

.esc-taller.es-oscuro .esc-taller__resumen,
.esc-taller.es-oscuro .esc-taller__avios {
    background: transparent;
}

.esc-taller.es-oscuro .esc-ayuda-redonda {
    border-color: #454D6F;
    background: #333A55;
    color: #B6C0D4;
}

.esc-taller.es-oscuro .esc-ayuda-redonda:hover,
.esc-taller.es-oscuro .esc-ayuda-redonda:focus-visible {
    border-color: #48B9F5;
    color: #48B9F5;
}

/* Y el "Cerrar" del pie, que es el btn-default de la plataforma. */
.esc-modal__caja:has(.esc-taller.es-oscuro) .esc-modal__pie .btn-default {
    border-color: #454D6F;
    background: #333A55;
    color: #D2DAE8;
}

.esc-modal__caja:has(.esc-taller.es-oscuro) .esc-modal__pie .btn-default:hover {
    border-color: #48B9F5;
    background: #333A55;
    color: #48B9F5;
}

/* Las tres de la sesion de un grupo: caben en una fila y se reparten el ancho
   de la columna, como las del lote. */
.esc-lote-acciones.es-sesion .btn {
    flex: 1 1 0;
    padding: 7px 6px;
    font-size: 11px;
}

.esc-taller.es-oscuro .esc-lote-acciones.es-sesion {
    border-top: 1px solid #3C4363;
    margin-top: 10px;
    padding-top: 10px;
}


/* =============================================================================
   MODO TRASLADAR

   Lo que se traslada ya esta decidido —es lo que el grupo tiene puesto—, asi
   que el banco de ejercicios del centro no pinta nada. Se apaga con un velo en
   vez de quitarlo: si alguien quiere añadir un ejercicio suelto antes de
   trasladar, sigue ahi; solo hay que pasar el raton por encima.
============================================================================= */

.esc-taller.es-trasladando .esc-taller__col.es-banco {
    position: relative;
    filter: blur(1.5px) grayscale(.55);
    opacity: .45;
    transition: filter .2s ease, opacity .2s ease;
}

.esc-taller.es-trasladando .esc-taller__col.es-banco:hover,
.esc-taller.es-trasladando .esc-taller__col.es-banco:focus-within {
    filter: none;
    opacity: 1;
}

/* Las dos columnas que SI hay que tocar, marcadas: es lo contrario del velo y
   hace falta, porque en una pantalla de tres columnas apagar una no basta
   para saber cual es la primera. */
.esc-taller.es-trasladando .esc-taller__col.es-alumnos,
.esc-taller.es-trasladando .esc-taller__col.es-sesion {
    box-shadow: 0 0 0 2px rgba(15, 157, 234, .45),
                0 10px 24px -18px rgba(26, 43, 60, .45);
}

/* --- La guia que sale al entrar ----------------------------------------- */

.esc-traslado-guia {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.esc-traslado-guia__fila {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--esc-border);
    border-left: 3px solid var(--esc-accent);
    border-radius: 8px;
    background: var(--esc-bg);
}

.esc-traslado-guia__fila .ph {
    flex: none;
    margin-top: 1px;
    color: var(--esc-accent);
    font-size: 20px;
}

.esc-traslado-guia__rot {
    color: var(--esc-title);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-traslado-guia__txt {
    margin-top: 2px;
    color: var(--esc-text);
    font-size: 12px;
    line-height: 1.5;
}

/* En la ropa oscura, sus grises. */
.esc-taller.es-oscuro ~ * .esc-traslado-guia__fila,
body:has(.esc-taller.es-oscuro) .esc-traslado-guia__fila {
    border-color: #3C4363;
    background: #333A55;
}

body:has(.esc-taller.es-oscuro) .esc-traslado-guia__rot {
    color: #E8EDF5;
}

body:has(.esc-taller.es-oscuro) .esc-traslado-guia__txt {
    color: #B6C0D4;
}

/* El corte entre un nivel y el siguiente en la lista de grupos del traslado.
   Con los doce grupos de un martes, una lista corrida obliga a leer nombre por
   nombre para saber cual es de peques y cual de adultos. */
.esc-taller__nivel-corte {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--esc-border);
}

.esc-taller__nivel-corte:first-child {
    margin-top: 0;
}

.esc-taller__nivel-corte-txt {
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.esc-taller.es-oscuro .esc-taller__nivel-corte {
    border-bottom-color: #3C4363;
}

.esc-taller.es-oscuro .esc-taller__nivel-corte-txt {
    color: #A3AFC6;
}


/* =============================================================================
   TRASLADAR: TRES PREGUNTAS, TRES COLUMNAS

   Que se lleva, a quien y cuando. En el orden en que se piensan y pesando lo
   mismo: ninguna es un rincon de otra.

   Va en la ropa oscura del modulo, como la lupa y el lote.
============================================================================= */

.esc-traslado {
    --esc-hud-linea: #3C4363;
    --esc-hud-texto: #E8EDF5;
    --esc-hud-suave: #A3AFC6;
}

.esc-modal__caja:has(.esc-traslado) {
    background: #272C40;
}

.esc-modal__caja:has(.esc-traslado) .esc-modal__cuerpo {
    background: #272C40;
    color: #E8EDF5;
}

.esc-modal__caja:has(.esc-traslado) .esc-modal__cab,
.esc-modal__caja:has(.esc-traslado) .esc-modal__pie {
    border-color: #3C4363;
    background: #2A2F45;
    color: #E8EDF5;
}

.esc-modal__caja:has(.esc-traslado) .esc-modal__pie .btn-default {
    border-color: #454D6F;
    background: #333A55;
    color: #D2DAE8;
}

.esc-traslado__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .9fr);
    gap: 14px;
    align-items: start;
}

@media (max-width: 1100px) {
    .esc-traslado__cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

.esc-traslado__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #3C4363;
    border-radius: 12px;
    background: #2D3349;
    overflow: hidden;
}

.esc-traslado__cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid #3C4363;
    background: linear-gradient(180deg, #333A55 0%, #2D3349 100%);
    color: #E8EDF5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.esc-traslado__cab .ph {
    color: #A3AFC6;
    font-size: 15px;
}

.esc-traslado__cab-txt {
    flex: 1;
    min-width: 0;
}

.esc-traslado__cab-n {
    flex: none;
    padding: 2px 8px;
    border-radius: 20px;
    background: #3C4363;
    color: #B6C0D4;
    font-size: 10px;
    letter-spacing: .3px;
}

.esc-traslado__lista {
    max-height: calc(100vh - 320px);
    padding: 10px;
    overflow-y: auto;
}

/* --- Una fila marcable, la misma en las tres columnas ------------------- */

.esc-traslado__fila {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #3C4363;
    border-radius: 8px;
    background: transparent;
    color: #E8EDF5;
    font-weight: 400;
    cursor: pointer;
}

.esc-traslado__fila + .esc-traslado__fila {
    margin-top: 6px;
}

.esc-traslado__fila:hover {
    border-color: #48B9F5;
}

/* Marcada: fondo y filo azul. No se apaga lo no marcado —eso las volvia
   invisibles sobre oscuro—, se enciende lo marcado. */
.esc-traslado__fila.es-marcada {
    border-color: #0F9DEA;
    background: #2C3A63;
}

/* El grupo del que sale: se puede marcar, pero se avisa de que ya lo tiene. */
.esc-traslado__fila.es-origen .esc-traslado__fila-meta {
    color: #E8A33D;
}

.esc-traslado__fila-txt {
    min-width: 0;
}

.esc-traslado__fila-nombre {
    color: #E8EDF5;
    font-size: 12px;
    font-weight: 700;
}

.esc-traslado__fila-meta {
    margin-top: 2px;
    color: #A3AFC6;
    font-size: 11px;
}

/* --- Los niveles plegables de la columna de grupos ---------------------- */

.esc-traslado__nivel {
    border: 1px solid #3C4363;
    border-left: 3px solid var(--esc-nivel, #8E9BA8);
    border-radius: 8px;
    overflow: hidden;
}

.esc-traslado__nivel + .esc-traslado__nivel {
    margin-top: 8px;
}

.esc-traslado__nivel-fila {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    background: #333A55;
}

.esc-traslado__nivel-abrir {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #E8EDF5;
    text-align: left;
    cursor: pointer;
}

.esc-traslado__nivel-flecha {
    flex: none;
    color: #A3AFC6;
    font-size: 13px;
    transition: transform .16s ease;
}

.esc-traslado__nivel.es-plegado .esc-traslado__nivel-flecha {
    transform: rotate(-90deg);
}

.esc-traslado__nivel-nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.esc-traslado__nivel-cuenta {
    flex: none;
    color: #A3AFC6;
    font-size: 10px;
    font-weight: 700;
}

.esc-traslado__nivel-cuenta.es-marcado {
    color: #48B9F5;
}

.esc-traslado__nivel-grupos {
    padding: 8px 10px;
}

.esc-traslado__nivel.es-plegado .esc-traslado__nivel-grupos {
    display: none;
}

/* --- La columna de los dias -------------------------------------------- */

.esc-traslado__cuando {
    padding: 12px;
}

.esc-traslado__pista {
    margin-bottom: 10px;
    color: #A3AFC6;
    font-size: 11px;
    line-height: 1.5;
}

.esc-traslado__dias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.esc-traslado__dia {
    flex: 1 0 auto;
    min-width: 38px;
    padding: 9px 10px;
    border: 1px solid #454D6F;
    border-radius: 8px;
    background: #2D3349;
    color: #B6C0D4;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.esc-traslado__dia:hover {
    border-color: #48B9F5;
    color: #48B9F5;
}

.esc-traslado__dia.is-activa {
    border-color: #0F9DEA;
    background: #0F9DEA;
    color: #FFF;
}

/* Hoy y Todas ocupan fila entera: no son un numero mas, son los dos atajos. */
.esc-traslado__dia.es-hoy,
.esc-traslado__dia.es-todas {
    flex: 1 0 100%;
}

.esc-traslado__dia.es-todas.is-activa {
    border-color: #76AB3C;
    background: #76AB3C;
}

/* La casilla a medias: el nivel con dos de cuatro marcados. */
.esc-asig-marca.es-media span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 2px;
    margin: -1px 0 0 -4px;
    border-radius: 1px;
    background: #0F9DEA;
}

@media (pointer: coarse) {

    .esc-traslado__dia {
        min-height: 46px;
        font-size: 14px;
    }
}

/* El grupo que hoy no da clase: se puede elegir igual —sus proximas clases
   valen—, pero se dice, que "Hoy" a ese no le llega. */
.esc-traslado__fila.es-sin-hoy .esc-traslado__fila-meta {
    color: #6C7C8E;
}

/* EL QUE YA ESTA PUESTO, EN VERDE.

   En la ropa oscura, el verde palido de la ropa clara se lo comia el fondo de
   la ficha: el ejercicio que ya esta en la sesion se veia igual que el que no,
   y de eso se trata —saber de un vistazo lo que ya le has puesto sin bajar a
   leer la columna de la derecha—.

   Verde macizo y su borde, que gana al fondo normal de la ficha. Y va DESPUES
   del fondo oscuro general, que si no se lo come el orden. */
.esc-taller.es-oscuro .esc-asig-ej.es-puesto,
.esc-taller.es-oscuro .esc-asig-ej.es-puesto:hover {
    border-color: #76AB3C;
    border-left-color: #76AB3C;
    background: #1F3624;
}

.esc-taller.es-oscuro .esc-asig-ej.es-puesto::before {
    color: #A7D97A;
}

.esc-taller.es-oscuro .esc-asig-ej.es-puesto .esc-asig-ej__nombre {
    color: #EAF6E0;
}

/* En claro, un verde que se note: el de antes era casi blanco. */
.esc-asig-ej.es-puesto {
    border-left-color: var(--esc-green-border);
    background: #EAF5E1;
}



/* =============================================================================
   LA FICHA, MAS FINA

   Una ficha se MIRA: cabecera con peso, bloques con aire y cada cosa con su
   sitio. Antes tenia el aspecto de un formulario a medias —media pantalla que
   se lee y un rincon con casillas—, y eso hacia dudar de si habia algo que
   rellenar.
============================================================================= */

/* La cabecera, con el color del area por el canto y el nombre grande. */
.esc-detalle__cab {
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--esc-border-soft);
    background: linear-gradient(180deg, #FFF 0%, #F7F9FB 100%);
}

.esc-detalle__cab.es-deportivo { box-shadow: inset 4px 0 0 var(--esc-green); }
.esc-detalle__cab.es-fisico    { box-shadow: inset 4px 0 0 var(--esc-accent); }
.esc-detalle__cab.es-otros     { box-shadow: inset 4px 0 0 #8E9BA8; }

.esc-detalle__nombre {
    font-size: 20px;
    letter-spacing: .2px;
}

/* Cada bloque, una ficha blanca sobre el gris de la ventana: lo mismo que se
   hizo con la lupa, y por lo mismo —sin fondo, todo se toca—. */
.esc-detalle__cuerpo.es-ficha {
    padding: 16px;
    background: #EFF2F5;
    gap: 14px;
}

.esc-detalle__cuerpo.es-ficha .esc-detalle__bloque,
.esc-detalle__cuerpo.es-ficha .esc-detalle__grupo,
.esc-detalle__cuerpo.es-ficha .esc-detalle__tecnica {
    margin: 0;
    padding: 14px;
    border: 1px solid #E4E9EE;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 1px 2px rgba(26, 43, 60, .06),
                0 10px 24px -18px rgba(26, 43, 60, .45);
}

.esc-detalle__cuerpo.es-ficha .esc-detalle__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.esc-detalle__cuerpo.es-ficha .esc-detalle__rot {
    margin: 0 0 8px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}

/* --- Lo de este grupo, de solo leer ------------------------------------- */

.esc-detalle__cuerpo.es-ficha .esc-detalle__grupo {
    border-left: 3px solid var(--esc-accent);
    background: #F6FBFE;
}

.esc-detalle__grupo-rot {
    margin-bottom: 8px;
    color: var(--esc-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.esc-detalle__nums {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.esc-detalle__num {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 8px 4px;
    border: 1px solid var(--esc-border);
    border-radius: 10px;
    background: #FFF;
}

.esc-detalle__num strong {
    color: var(--esc-title);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.1;
}

.esc-detalle__num span {
    color: var(--esc-text-soft);
    font-size: 10px;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.esc-detalle__obs-leer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--esc-border);
}

.esc-detalle__obs-rot-leer {
    margin-bottom: 3px;
    color: var(--esc-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}


/* =============================================================================
   LA FICHA DEL EJERCICIO: EL ALTA, PERO PARA MIRAR

   Las mismas cuatro columnas del formulario y en el mismo orden. Quien lo dio
   de alta reconoce la pantalla y sabe donde esta cada cosa sin buscarla.

   EN OSCURO, como la lupa y el lote: es la misma ventana de trabajo y no una
   pantalla aparte.
============================================================================= */

.esc-capa .esc-detalle:has(.esc-ficha__cols) {
    background: #272C40;
    color: #E8EDF5;
}

/* CUATRO COLUMNAS PIDEN ANCHO

   Los 980 de una ficha normal repartidos entre cuatro dejaban 200 por columna:
   ahi "Habilidad técnico-coordinativa" ocupa tres lineas de rotulo para un
   dato de una, y la tela de araña y el cuerpo salen de sello.

   A 1720 se iba al otro extremo: la ficha ocupaba la pantalla entera y las
   cuatro columnas quedaban tan separadas que habia que girar la cabeza para
   ir de la primera a la ultima. 1360 es el punto medio: unos 320 por columna,
   que es lo que pide el rotulo mas largo en una sola linea. */
.esc-detalle:has(.esc-ficha__cols) {
    padding: 12px;
}

.esc-detalle__caja:has(.esc-ficha__cols) {
    max-width: min(1360px, 96vw);
    max-height: calc(100vh - 24px);
}

.esc-detalle:has(.esc-ficha__cols) .esc-detalle__cab {
    border-bottom-color: #3C4363;
    background: #2A2F45;
}

.esc-detalle:has(.esc-ficha__cols) .esc-detalle__nombre {
    color: #E8EDF5;
}

.esc-detalle:has(.esc-ficha__cols) .esc-detalle__cerrar {
    border-color: rgba(255, 255, 255, .35);
    background: transparent;
    color: #FFF;
}

.esc-detalle__cuerpo.es-ficha {
    display: block;
    padding: 14px;
    background: #272C40;
}

.esc-ficha__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

/* Las cuatro aguantan hasta que una columna baja de unos 290: por debajo, los
   rotulos de tres palabras ocupan mas que el dato que anuncian. */
@media (max-width: 1250px) {
    .esc-ficha__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .esc-ficha__cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

.esc-ficha__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* El titulo de columna, con su raya azul debajo: es el mismo de las cuatro
   columnas del alta. */
.esc-ficha__col-tit {
    padding-bottom: 6px;
    border-bottom: 2px solid #0F9DEA;
    color: #E8EDF5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.esc-ficha__caja {
    padding: 12px;
    border: 1px solid #3C4363;
    border-radius: 10px;
    background: #2D3349;
}

.esc-ficha__caja-tit {
    margin: 0 0 2px;
    float: none;
    width: auto;
    color: #48B9F5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.esc-ficha__caja-pie {
    float: none;
    width: auto;
    margin: 0 0 8px;
    color: #8E9AB4;
    font-size: 10.5px;
    font-style: italic;
    line-height: 1.4;
}

.esc-ficha__campo + .esc-ficha__campo {
    margin-top: 9px;
}

.esc-ficha__campo-rot {
    display: block;
    margin-bottom: 2px;
    color: #A3AFC6;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.esc-ficha__campo-val {
    color: #E8EDF5;
    font-size: 12.5px;
    line-height: 1.5;
}

/* El nombre del ejercicio, en grande: es el titulo de todo lo demas. */
.esc-ficha__campo.es-titular .esc-ficha__campo-val {
    font-size: 16px;
    font-weight: 700;
}

/* Los textos largos —descripcion, variaciones— respetan sus saltos de linea:
   ahi se escriben los pasos uno debajo de otro. */
.esc-ficha__campo.es-largo .esc-ficha__campo-val {
    white-space: pre-line;
}

.esc-ficha__campo.es-aviso .esc-ficha__campo-val {
    padding: 8px 10px;
    border-left: 3px solid #E8A33D;
    border-radius: 6px;
    background: rgba(232, 163, 61, .10);
    color: #F0C98A;
}

.esc-ficha__chapas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}

.esc-ficha__chapa {
    padding: 3px 8px;
    border: 1px solid #454D6F;
    border-radius: 20px;
    color: #D2DAE8;
    font-size: 10.5px;
    font-weight: 600;
}

.esc-ficha__vacio {
    margin: 0;
    float: none;
    width: auto;
    color: #8E9AB4;
    font-size: 11px;
    font-style: italic;
}

/* --- Las piezas heredadas, en oscuro ------------------------------------ */

.esc-detalle__cuerpo.es-ficha .esc-detalle__grupo {
    padding: 12px;
    border: 1px solid #3C4363;
    border-left: 3px solid #0F9DEA;
    border-radius: 10px;
    background: #2D3349;
    box-shadow: none;
}

.esc-detalle__cuerpo.es-ficha .esc-detalle__num {
    border-color: #3C4363;
    background: #333A55;
}

.esc-detalle__cuerpo.es-ficha .esc-detalle__num strong,
.esc-detalle__cuerpo.es-ficha .esc-ficha__cifra strong {
    color: #E8EDF5;
}

.esc-detalle__cuerpo.es-ficha .esc-detalle__num span,
.esc-detalle__cuerpo.es-ficha .esc-ficha__cifra span {
    color: #A3AFC6;
}

.esc-detalle__cuerpo.es-ficha .esc-ficha__cifra {
    border-color: #3C4363;
    background: #333A55;
}

.esc-detalle__cuerpo.es-ficha .esc-detalle__obs-leer {
    border-top-color: #3C4363;
}

.esc-detalle__cuerpo.es-ficha .esc-detalle__texto {
    color: #D2DAE8;
}

.esc-detalle__cuerpo.es-ficha .esc-detalle__pizarra {
    margin-top: 0;
}

.esc-detalle__cuerpo.es-ficha .esc-asig-etiqueta {
    border-color: #454D6F;
    color: #B6C0D4;
}

/* El cuerpo humano, sobre el panel oscuro: la silueta se aclara para que se
   distinga del fondo, y el musculo encendido manda igual. */
.esc-detalle__cuerpo.es-ficha .ej-col.es-cuerpo {
    border-color: #3C4363;
    background: linear-gradient(180deg, #333A55 0%, #2D3349 100%);
}

.esc-detalle__cuerpo.es-ficha .ej-cuerpo__piel > * {
    fill: #3A4160;
}

/* EL MUSCULO APAGADO SE OSCURECE; EL ENCENDIDO NO SE TOCA

   El :not() no es un adorno: sin el, este selector —tres clases— le gana al
   '.ej-cuerpo__zona.is-activa' de cuerpo.css —dos— y pintaba TAMBIEN los
   musculos del ejercicio del mismo gris que los demas. El dibujo salia
   correcto, con su zona marcada en el DOM, y en pantalla no se encendia
   ninguno: el trabajo estaba hecho y no se veia.

   Lo encendido se queda con su azul y su halo, que sobre este fondo oscuro
   destacan mas todavia que sobre el blanco del alta. */
.esc-detalle__cuerpo.es-ficha .ej-cuerpo__zona:not(.is-activa):not(.es-profunda) {
    fill: #4A5273;
}

.esc-detalle__cuerpo.es-ficha .ej-cuerpo__cara {
    fill: #A3AFC6;
}

.esc-detalle__cuerpo.es-ficha .ej-cuerpo__nota {
    color: #8E9AB4;
}


/* =============================================================================
   LA FICHA: LAS PIEZAS QUE VIENEN DEL ALTA

   Campos en fila, la escalera de intensidades, el perfil de carga con su
   grafico y su tela de araña. Son las mismas piezas del formulario del banco y
   se ven igual; lo unico que cambia es que aqui no se escribe.
============================================================================= */

/* Los campos que en el alta comparten fila (ej-par, ej-trio). El numero de
   columnas lo pone el JS segun cuantos haya, que es lo que hace el alta. */
.esc-ficha__fila {
    display: grid;
    gap: 9px;
    margin-top: 9px;
}

.esc-ficha__fila .esc-ficha__campo + .esc-ficha__campo,
.esc-ficha__fila .esc-ficha__campo {
    margin-top: 0;
}

/* Un campo que nadie relleno. La raya se queda —el hueco en su sitio es lo que
   hace que esta pantalla y la del alta se lean igual— pero apagada, para que
   no compita con lo que si tiene dato. */
.esc-ficha__campo.es-vacio .esc-ficha__campo-val {
    color: #6E7896;
}

.esc-ficha__campo-rot.es-separa {
    margin-top: 12px;
}

/* La cuenta de la duracion, debajo del total: la misma sugerencia que el alta
   deja escrita bajo el campo. */
.esc-ficha__cuenta {
    margin-top: 3px;
    color: #8E9AB4;
    font-size: 10.5px;
    font-style: italic;
}

/* --- La pizarra y las imagenes ----------------------------------------- */

.esc-ficha__pizarra {
    margin-top: 5px;
    border: 1px solid #3C4363;
    border-radius: 8px;
    overflow: hidden;
}

.esc-ficha__pizarra svg {
    display: block;
    width: 100%;
    height: auto;
}

.esc-ficha__imagenes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 6px;
    margin-top: 5px;
}

.esc-ficha__imagenes img {
    width: 100%;
    height: 78px;
    border: 1px solid #3C4363;
    border-radius: 8px;
    object-fit: cover;
}

.esc-ficha__enlaces {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 5px;
}

/* --- La tercera columna: el cuerpo y la carga --------------------------- */

.esc-ficha__col.es-cuerpo .esc-ficha__cuerpo {
    padding: 12px;
    border: 1px solid #3C4363;
    border-radius: 10px;
    background: linear-gradient(180deg, #333A55 0%, #2D3349 100%);
}

.esc-ficha__cuerpo .ej-cuerpo {
    display: block !important;   /* aqui no hay area elegida: se enseña siempre */
    width: 100%;
    height: auto;
}

.esc-ficha__cuerpo-nota {
    margin: 8px 0 0;
    color: #8E9AB4;
    font-size: 10.5px;
    font-style: italic;
    text-align: center;
}

/* El panel de carga: el mismo cuadro que el alta enseña debajo del cuerpo. */
.esc-ficha__carga {
    position: relative;
    padding: 12px;
    border: 1px solid #3C4363;
    border-radius: 10px;
    background: #2D3349;
}

/* La i de ayuda, en la esquina: no ocupa sitio en la fila —va por encima, no
   dentro— y por eso las dos cifras quedan a la misma altura. */
.esc-ficha__info {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid #454D6F;
    border-radius: 50%;
    background: transparent;
    color: #A3AFC6;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.esc-ficha__info:hover {
    border-color: #48B9F5;
    color: #48B9F5;
}

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

.esc-ficha__cifra {
    padding: 8px 10px;
    border: 1px solid #3C4363;
    border-radius: 9px;
    background: #333A55;
}

.esc-ficha__cifra-rot {
    display: block;
    color: #A3AFC6;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.esc-ficha__cifra strong {
    display: block;
    color: #E8EDF5;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}

.esc-ficha__cifra-chapa {
    display: block;
    color: #8E9AB4;
    font-size: 10px;
}

.esc-ficha__cifra.es-trabajo { border-left: 3px solid #7BC043; }
.esc-ficha__cifra.es-densidad { border-left: 3px solid #E8663D; }

.esc-ficha__grafico {
    display: block;
    width: 100%;
    height: 92px;
    margin-top: 10px;
    border-radius: 8px;
    background: #2A2F45;
}

.esc-ficha__leyenda {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    color: #A3AFC6;
    font-size: 10px;
}

.esc-ficha__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.esc-ficha__punto + * { margin-right: 8px; }
.esc-ficha__punto.es-esfuerzo { background: #7BC043; }
.esc-ficha__punto.es-fatiga   { background: #E8663D; }

.esc-ficha__carga-txt {
    margin: 8px 0 0;
    color: #B6C0D4;
    font-size: 11px;
    line-height: 1.45;
}

.esc-ficha__coste,
.esc-ficha__perfil {
    position: relative;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #3C4363;
}

.esc-ficha__coste {
    display: block;
}

.esc-ficha__coste strong {
    display: block;
    color: #7BC043;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.esc-ficha__arana {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 2px;
}

.esc-ficha__arana-eje {
    fill: #A3AFC6;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-ficha__arana-val {
    fill: #E8EDF5;
    font-size: 10px;
    font-weight: 700;
}

/* --- La escalera de intensidades ---------------------------------------- */
/* En el alta son seis mandos por serie y aqui es lo elegido: cada serie a la
   altura que le toque, que es como se lee de un vistazo si el ejercicio sube,
   baja o va plano. */
.esc-ficha__series {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 72px;
    margin-top: 6px;
    padding: 6px 6px 0;
    border-radius: 8px;
    background: #2A2F45;
}

.esc-ficha__serie {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    height: max(26px, var(--alto));
    padding: 3px 2px;
    border-radius: 5px 5px 0 0;
    background: var(--tono);
    color: #FFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

.esc-ficha__serie strong {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
}

.esc-ficha__serie em {
    font-size: 8.5px;
    font-style: normal;
    opacity: .85;
}

/* Los campos de una misma fila alinean sus VALORES, no sus rotulos: "Tiempo/
   serie" ocupa dos lineas y "Nº series" una, y con los rotulos alineados los
   tres numeros quedaban a tres alturas distintas y no se podian comparar. */
.esc-ficha__fila .esc-ficha__campo {
    display: flex;
    flex-direction: column;
}

.esc-ficha__fila .esc-ficha__campo-rot {
    flex: 1 1 auto;
}

/* Un aviso que nadie escribio no es un aviso: sin texto se queda la raya sola,
   sin el recuadro naranja que dice "cuidado con esto". */
.esc-ficha__campo.es-aviso.es-vacio .esc-ficha__campo-val {
    padding: 0;
    border: 0;
    background: none;
    color: #6E7896;
}

/* EL SCROLL DE LA FICHA, ESTRECHO Y DEL COLOR DE LA CASA

   La ficha es oscura entera y la barra del sistema llegaba blanca y del doble
   de ancho: era lo primero que se veia al abrirla, por delante del propio
   ejercicio. Mismo criterio que en el puesto de mando y en el taller —6 px y
   el gris de las lineas— para que la barra se note cuando se busca y no
   cuando no.

   Dos formas de decirlo porque hay dos motores. Chrome y Safari entienden
   ::-webkit-scrollbar, y ahi se piden los 6 px exactos. Firefox solo entiende
   scrollbar-width, que no es una medida sino un "estrecho" a su manera; se le
   da solo a el, porque puesto a los dos gana sobre el ::-webkit y deja la
   barra en dos pixeles, imposible de agarrar con el raton. */
@supports not selector(::-webkit-scrollbar) {

    .esc-detalle__cuerpo.es-ficha,
    .esc-detalle__caja:has(.esc-ficha__cols) {
        scrollbar-width: thin;
        scrollbar-color: #3F4766 transparent;
    }
}

.esc-detalle__cuerpo.es-ficha::-webkit-scrollbar,
.esc-detalle__caja:has(.esc-ficha__cols) ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.esc-detalle__cuerpo.es-ficha::-webkit-scrollbar-track,
.esc-detalle__caja:has(.esc-ficha__cols) ::-webkit-scrollbar-track {
    background: transparent;
}

.esc-detalle__cuerpo.es-ficha::-webkit-scrollbar-thumb,
.esc-detalle__caja:has(.esc-ficha__cols) ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #3F4766;
}

.esc-detalle__cuerpo.es-ficha::-webkit-scrollbar-thumb:hover,
.esc-detalle__caja:has(.esc-ficha__cols) ::-webkit-scrollbar-thumb:hover {
    background: #525B80;
}

/* El pie de la pizarra: el encuadre elegido y cuantos trazos tiene, o que
   esta vacia a proposito. La pista se pinta siempre —como en el alta— y sin
   esta linea una pista en blanco parece algo que no ha terminado de cargar. */
.esc-ficha__pizarra-pie {
    margin-top: 4px;
    color: #8E9AB4;
    font-size: 10.5px;
    font-style: italic;
}


/* =============================================================================
   LAS PISTAS QUE SE RESERVA UNA COMPETICION

   Se abre desde la revision del calendario, con «Resolver», sobre el aviso de
   competiciones que no dijeron donde juegan. Sin ese dato se dan por ocupadas
   TODAS las pistas y esos dias no hay clase en todo el club; aqui se marca
   cuales se lleva el torneo y se escribe en la solicitud de la competicion,
   que es donde vive ese dato.

   CON LAS MISMAS PIEZAS DE LA FICHA DEL EJERCICIO

   El fondo del modulo en oscuro —#272C40— y encima las cajas de la ficha:
   .esc-ficha__caja con su borde #3C4363 sobre #2D3349, el titulo en azul y los
   rotulos en gris. Aqui solo se añade lo que la ficha no tiene: la rejilla de
   pistas. Pintar esta ventana por su cuenta seria una segunda manera de hacer
   lo mismo, y con dos maneras acaban siendo dos cosas que aprender.
============================================================================= */

/* La misma paleta que el resto de lo oscuro del modulo, que son los azules
   del menu de la casa. Se declara aqui porque los tokens viven dentro de
   .esc-hud y esta ventana no cuelga de el.

   El margen negativo come el relleno del cuerpo del modal —18 px— para que el
   color llegue al borde. A medias se veria un marco blanco alrededor y
   parecerian dos ventanas, una dentro de otra. */
.esc-comp {
    --esc-hud-fondo: #272C40;
    --esc-hud-caja:  #2D3349;
    --esc-hud-linea: #3C4363;
    --esc-hud-texto: #E8EDF5;
    --esc-hud-suave: #A3AFC6;

    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: -18px;
    padding: 18px;
    background: var(--esc-hud-fondo);
    color: var(--esc-hud-texto);
}

.esc-modal__caja:has(.esc-comp) {
    background: #272C40;
}

/* Las cajas de la ficha, con los tonos de aqui. La estructura no se toca: es
   la misma pieza y se reconoce igual. */
.esc-comp .esc-ficha__caja {
    border-color: var(--esc-hud-linea);
    background: var(--esc-hud-caja);
}

.esc-comp .esc-ficha__caja-pie {
    color: var(--esc-hud-suave);
}

.esc-comp .esc-ficha__campo-rot {
    color: var(--esc-hud-suave);
}

.esc-comp .esc-ficha__campo-val {
    color: var(--esc-hud-texto);
}

/* La cabecera y el pie del modal, del mismo lado oscuro: el titulo «Pistas
   para …» y el aspa son de ESTA ventana, y en blanco sobre oscuro se leian
   como los de la de debajo. */
.esc-modal__caja:has(.esc-comp) .esc-modal__cab,
.esc-modal__caja:has(.esc-comp) .esc-modal__pie {
    border-color: #3C4363;
    background: #2D3349;
    color: #E8EDF5;
}

.esc-modal__caja:has(.esc-comp) .esc-modal__aspa {
    border-color: rgba(255, 255, 255, .35);
    background: transparent;
    color: #FFF;
}

/* El «Cerrar» del pie es un btn-default de la plataforma, blanco de fabrica:
   sobre este pie oscuro era lo unico que quedaba encendido y se llevaba la
   vista antes que el boton que de verdad hace algo. */
.esc-modal__caja:has(.esc-comp) .esc-modal__pie .btn-default {
    border: 1px solid #454D6F;
    background: #333A55;
    color: #C5D1CD;
}

.esc-modal__caja:has(.esc-comp) .esc-modal__pie .btn-default:hover {
    border-color: #48B9F5;
    color: #48B9F5;
}

/* Dos campos en la misma fila, como los pares de la ficha. */
.esc-comp__fila {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 9px;
}

.esc-comp__fila .esc-ficha__campo {
    margin-top: 0;
}

.esc-comp__cargando {
    margin: 0;
    float: none;
    width: auto;
    color: var(--esc-hud-suave);
    font-size: 11.5px;
}

.esc-comp__aviso {
    margin: 10px 0 0;
    float: none;
    width: auto;
    padding: 10px 12px;
    border-left: 3px solid #E8A33D;
    border-radius: 6px;
    background: rgba(232, 163, 61, .10);
    color: #F0C98A;
    font-size: 12px;
}

/* --- Las pistas ---------------------------------------------------------- */

/* En rejilla y no en lista: veinticinco pistas en columna son un scroll, y en
   rejilla se ven las veinticinco de una vez, que es como se decide "todas
   menos las dos del fondo". */
.esc-comp__pistas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 6px;
    margin-top: 10px;
}

/* El nombre de la instalacion ocupa su propia fila entera: es un encabezado,
   no una pista mas, y en la rejilla sin esto se leia como si lo fuera. Mismo
   rotulo que los campos de la ficha. */
.esc-comp__instalacion {
    grid-column: 1 / -1;
    margin-top: 2px;
    color: var(--esc-hud-suave);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.esc-comp__pista {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--esc-hud-linea);
    border-radius: 8px;
    background: #333A55;
    color: #D2DAE8;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.esc-comp__pista:hover {
    border-color: #48B9F5;
}

/* Marcada = se la lleva el torneo. En naranja y no en verde: lo que se esta
   marcando es una pista que la escuela PIERDE esos dias, y el verde diria lo
   contrario de lo que pasa. */
.esc-comp__pista.es-marcada {
    border-color: #E8A33D;
    background: rgba(232, 163, 61, .14);
    color: #F5D9A8;
}

.esc-comp__check {
    flex: none;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #E8A33D;
    cursor: pointer;
}

.esc-comp__pista-n {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Marcar de golpe, y la cuenta ---------------------------------------- */

.esc-comp__mandos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--esc-hud-linea);
}

.esc-comp__mando {
    padding: 5px 12px;
    border: 1px solid #454D6F;
    border-radius: 7px;
    background: #333A55;
    color: #D2DAE8;
    font-size: 11.5px;
    font-weight: 600;
}

.esc-comp__mando:hover {
    border-color: #48B9F5;
    color: #48B9F5;
}

.esc-comp__cuenta {
    color: var(--esc-hud-suave);
    font-size: 11.5px;
}

/* Ninguna marcada no es un error —hay quien no lo sabe todavia— pero tampoco
   es neutro: es volver a dejar la escuela sin pistas esos dias, y eso se dice. */
.esc-comp__cuenta.es-vacia {
    color: #F0C98A;
}

.esc-comp__pie {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.esc-comp__guardar {
    padding: 9px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--esc-green, #76AB3C);
    color: #FFF;
    font-size: 13px;
    font-weight: 700;
}

.esc-comp__guardar:hover {
    background: #6A9C34;
    color: #FFF;
}

.esc-comp__guardar[disabled] {
    opacity: 1;            /* apagado se ve igual: lo que cambia es que no responde */
    background: #4E6B2C;
}


/* =============================================================================
   LA REVISION DEL CALENDARIO, EN OSCURO

   Los mismos azules del menu que el resto de lo oscuro del modulo. Es una
   ventana de DECIDIR —se abre encima del calendario o de la matriz, se
   resuelve y se cierra—, y el corte de fondo dice que lo de dentro no es lo
   mismo que lo de fuera.

   Cada fila, tres columnas y en este orden: de quien es la clase, con que
   choca y que se hace con ella. Antes iba todo en una linea corrida —"3 días ·
   Pista 11 · MASTER WARRIORS TOUR"— y para saber de que grupo se hablaba habia
   que leerla entera.
============================================================================= */

.esc-cal-avisos__caja {
    --esc-hud-fondo: #272C40;
    --esc-hud-caja:  #2D3349;
    --esc-hud-linea: #3C4363;
    --esc-hud-texto: #E8EDF5;
    --esc-hud-suave: #A3AFC6;

    gap: 14px;
    margin: -18px;
    padding: 18px;
    background: var(--esc-hud-fondo);
    color: var(--esc-hud-texto);
}

.esc-modal__caja:has(.esc-cal-avisos__caja) {
    background: #272C40;
}

.esc-modal__caja:has(.esc-cal-avisos__caja) .esc-modal__cab,
.esc-modal__caja:has(.esc-cal-avisos__caja) .esc-modal__pie {
    border-color: #3C4363;
    background: #2D3349;
    color: #E8EDF5;
}

.esc-modal__caja:has(.esc-cal-avisos__caja) .esc-modal__aspa {
    border-color: rgba(255, 255, 255, .35);
    background: transparent;
    color: #FFF;
}

.esc-modal__caja:has(.esc-cal-avisos__caja) .esc-modal__pie .btn-default {
    border: 1px solid #454D6F;
    background: #333A55;
    color: #C5D1CD;
}

.esc-modal__caja:has(.esc-cal-avisos__caja) .esc-modal__pie .btn-default:hover {
    border-color: #48B9F5;
    color: #48B9F5;
}

/* --- Cada bloque de avisos ---------------------------------------------- */

.esc-cal-avisos__caja .esc-cal-aviso {
    padding: 14px 16px;
    border: 1px solid var(--esc-hud-linea);
    border-left: 3px solid #E8A33D;
    border-radius: 10px;
    background: var(--esc-hud-caja);
}

.esc-cal-avisos__caja .esc-cal-aviso__detalle {
    color: var(--esc-hud-suave);
    line-height: 1.5;
}

.esc-cal-avisos__caja .esc-cal-aviso__cab strong {
    color: var(--esc-hud-texto);
    font-size: 13px;
}

/* --- La fila: quien · contra que · que se hace --------------------------- */

.esc-cal-avisos__caja .esc-cal-aviso__fila {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--esc-hud-linea);
}

.esc-cal-aviso__quien {
    min-width: 0;
}

/* La pista, arriba del todo y en el azul del modulo: en una lista de veinte
   clases lo que se reparte son pistas, y verlas alineadas es lo que deja ver
   que media escuela esta en la misma. */
.esc-cal-aviso__pista {
    color: #48B9F5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.esc-cal-aviso__linea {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
}

/* El (GR)n con el color de su nivel. El texto va en blanco con una sombra
   fina: los colores de nivel los elige el club y los hay claros y oscuros, y
   sin la sombra el codigo desaparece sobre los amarillos. */
.esc-cal-aviso__gr {
    flex: none;
    padding: 2px 7px;
    border-radius: 20px;
    background: #8E9BA8;
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

.esc-cal-avisos__caja .esc-cal-aviso__grupo {
    min-width: 0;
    color: var(--esc-hud-texto);
    font-size: 13.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-cal-aviso__cuando {
    margin-top: 2px;
    color: var(--esc-hud-suave);
    font-size: 11px;
}

/* --- La contradiccion ---------------------------------------------------- */

.esc-cal-aviso__choque {
    min-width: 0;
    padding-left: 14px;
    border-left: 1px dashed var(--esc-hud-linea);
}

.esc-cal-aviso__rot {
    color: var(--esc-hud-suave);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.esc-cal-aviso__contra {
    color: #F0C98A;
    font-size: 12.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cuantos dias choca: es la medida del problema. Uno se mueve y ya esta; seis
   son media temporada de ese grupo. */
.esc-cal-aviso__dias {
    margin-top: 1px;
    color: var(--esc-hud-suave);
    font-size: 11px;
}

/* --- El boton ------------------------------------------------------------ */

.esc-cal-avisos__caja .esc-cal-aviso__accion {
    justify-self: end;
    padding: 7px 14px;
    border: 1px solid #454D6F;
    border-radius: 8px;
    background: #333A55;
    color: #D2DAE8;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.esc-cal-avisos__caja .esc-cal-aviso__accion:hover {
    border-color: #E8A33D;
    background: rgba(232, 163, 61, .14);
    color: #F5D9A8;
}

.esc-cal-avisos__caja .esc-cal-aviso__que {
    color: var(--esc-hud-suave);
    font-size: 11.5px;
}

/* En pantallas estrechas las tres columnas se apilan: partidas en 300px, la
   del medio deja de leerse y el boton se queda colgando. */
@media (max-width: 900px) {

    .esc-cal-avisos__caja .esc-cal-aviso__fila {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .esc-cal-aviso__choque {
        padding-left: 0;
        border-left: 0;
    }

    .esc-cal-avisos__caja .esc-cal-aviso__accion {
        justify-self: start;
    }
}


/* =============================================================================
   MOVER O ANULAR, TAMBIEN EN OSCURO

   Es la continuacion de la revision: se pulsa «Mover o anular» en una fila y se
   abre esto en la misma ventana. Dejarlo en claro convertia una decision en dos
   pantallas distintas, y ademas el salto de fondo hacia parpadear la vista cada
   vez que se entraba y se volvia.
============================================================================= */

.esc-cal-resolver {
    --esc-hud-fondo: #272C40;
    --esc-hud-caja:  #2D3349;
    --esc-hud-linea: #3C4363;
    --esc-hud-texto: #E8EDF5;
    --esc-hud-suave: #A3AFC6;

    margin: -18px;
    padding: 18px;
    background: var(--esc-hud-fondo);
    color: var(--esc-hud-texto);
}

.esc-modal__caja:has(.esc-cal-resolver) {
    background: #272C40;
}

.esc-modal__caja:has(.esc-cal-resolver) .esc-modal__cab,
.esc-modal__caja:has(.esc-cal-resolver) .esc-modal__pie {
    border-color: #3C4363;
    background: #2D3349;
    color: #E8EDF5;
}

.esc-modal__caja:has(.esc-cal-resolver) .esc-modal__aspa {
    border-color: rgba(255, 255, 255, .35);
    background: transparent;
    color: #FFF;
}

.esc-modal__caja:has(.esc-cal-resolver) .esc-modal__pie .btn-default {
    border: 1px solid #454D6F;
    background: #333A55;
    color: #C5D1CD;
}

.esc-cal-resolver__fila {
    padding: 10px 0;
    border-bottom-color: var(--esc-hud-linea);
}

.esc-cal-resolver__cuando {
    color: var(--esc-hud-texto);
}

.esc-cal-resolver__pista {
    color: #48B9F5;
    font-weight: 700;
}

/* El desplegable de pistas libres y los dos botones, del lado oscuro: son de
   fabrica blancos y sobre este fondo se llevaban la vista antes que las filas. */
.esc-cal-resolver .form-control {
    border: 1px solid #454D6F;
    background: #333A55;
    color: #D2DAE8;
    box-shadow: none;
}

.esc-cal-resolver .btn-default {
    border: 1px solid #454D6F;
    background: #333A55;
    color: #D2DAE8;
}

.esc-cal-resolver .btn-default:hover {
    border-color: #E8A33D;
    background: rgba(232, 163, 61, .14);
    color: #F5D9A8;
}

.esc-cal-resolver__nada {
    color: #F0C98A;
}

.esc-cal-resolver__hecho {
    color: #8FD14F;
}

.esc-cal-resolver .esc-ayuda,
.esc-cal-resolver__pista + .esc-cal-resolver__acciones {
    color: var(--esc-hud-suave);
}

/* Cuando no hay a donde mover la clase porque el torneo no dijo que pistas
   usa, la fila trae el boton que lo arregla de raiz. Va en el azul del modulo
   —es lo que hay que pulsar— y el de anular se queda apagado al lado: anular
   una clase es la salida cuando no hay otra, no la primera opcion. */
.esc-cal-resolver .btn-default.es-declarar {
    border-color: #0A76B0;
    background: #0A76B0;
    color: #FFF;
    font-weight: 600;
    white-space: nowrap;
}

.esc-cal-resolver .btn-default.es-declarar:hover {
    border-color: #096492;
    background: #096492;
    color: #FFF;
}

/* El texto que explica por que no hay pistas se queda en su sitio pero sin
   robarle el turno a los botones: se encoge antes que ellos, que son lo que
   hay que poder pulsar. */
.esc-cal-resolver__nada {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 380px;
    line-height: 1.4;
    text-align: right;
}

/* Los botones, enteros siempre: son la salida de la fila y cortados a la
   mitad no son una salida. */
.esc-cal-resolver__acciones .btn {
    flex: none;
    white-space: nowrap;
}

/* El alias del grupo en su tarjeta: la misma chapa gris de la pantalla de
   Grupos, para que se reconozca como la misma cosa. Entero, sin recortar: un
   alias a medias no reconoce a nadie. */
.esc-asig-tarjeta__alias {
    flex: none;
    padding: 1px 8px;
    border-radius: 9px;
    background: #EEF1F4;
    color: var(--esc-title);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}


/* =============================================================================
   LLEVAR EL HORARIO A LA AGENDA

   El icono de calendario de la matriz, y su emergente: que clases y de cuando
   arriba, lo que va a salir en medio —antes de hacer nada se sabe cuantas son
   y si hay alguna con problema— y debajo las cinco salidas en dos bloques,
   llevartelo y enviarlo. En los azules del menu, como el resto de emergentes
   de decidir.
============================================================================= */

/* El boton: cuadrado, del alto de los mandos de la barra y con el mismo
   borde. Solo el icono: el calendario se entiende sin rotulo, y la barra ya va
   llena. */
.esc-agenda-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #AEB8C2;
    border-radius: 8px;
    background: #FFF;
    color: #0A76B0;
    font-size: 20px;
    cursor: pointer;
}

.esc-agenda-boton:hover,
.esc-agenda-boton:focus-visible {
    border-color: #0A76B0;
    background: #0A76B0;
    color: #FFF;
    outline: 0;
}

/* --- La emergente ---------------------------------------------------------- */

.esc-agenda {
    --esc-hud-fondo: #272C40;
    --esc-hud-caja:  #2D3349;
    --esc-hud-linea: #3C4363;
    --esc-hud-texto: #E8EDF5;
    --esc-hud-suave: #A3AFC6;

    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: -18px;
    padding: 18px;
    background: var(--esc-hud-fondo);
    color: var(--esc-hud-texto);
}

.esc-modal__caja:has(.esc-agenda) {
    background: #272C40;
}

.esc-modal__caja:has(.esc-agenda) .esc-modal__cab,
.esc-modal__caja:has(.esc-agenda) .esc-modal__pie {
    border-color: #3C4363;
    background: #2D3349;
    color: #E8EDF5;
}

.esc-modal__caja:has(.esc-agenda) .esc-modal__aspa {
    border-color: rgba(255, 255, 255, .35);
    background: transparent;
    color: #FFF;
}

.esc-modal__caja:has(.esc-agenda) .esc-modal__pie .btn-default {
    border: 1px solid #454D6F;
    background: #333A55;
    color: #C5D1CD;
}

/* --- Que y cuando ---------------------------------------------------------- */

.esc-agenda__mandos {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}

.esc-agenda__mando {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.esc-agenda__rot {
    color: var(--esc-hud-suave);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.esc-agenda__opciones {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--esc-hud-linea);
    border-radius: 10px;
    background: var(--esc-hud-caja);
}

.esc-agenda__opcion {
    padding: 7px 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--esc-hud-suave);
    font-size: 12.5px;
    font-weight: 600;
}

.esc-agenda__opcion:hover {
    color: var(--esc-hud-texto);
}

.esc-agenda__opcion.is-activa {
    background: #0A76B0;
    color: #FFF;
}

/* --- Lo que va a salir ----------------------------------------------------- */

.esc-agenda__resumen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px 18px;
    padding: 14px 16px;
    border: 1px solid var(--esc-hud-linea);
    border-radius: 10px;
    background: var(--esc-hud-caja);
}

.esc-agenda__cifra {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 96px;
    padding-right: 18px;
    border-right: 1px dashed var(--esc-hud-linea);
}

.esc-agenda__cifra strong {
    color: #FFF;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.esc-agenda__cifra span {
    color: var(--esc-hud-suave);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.esc-agenda__datos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.esc-agenda__chapa {
    padding: 2px 10px;
    border: 1px solid #454D6F;
    border-radius: 12px;
    color: #D2DAE8;
    font-size: 11.5px;
    font-weight: 600;
}

.esc-agenda__chapa.es-aviso {
    border-color: #E8A33D;
    background: rgba(232, 163, 61, .12);
    color: #F5D9A8;
    cursor: help;
}

.esc-agenda__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.esc-agenda__clase {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: 12px;
}

.esc-agenda__cuando {
    color: #48B9F5;
    font-weight: 700;
    white-space: nowrap;
}

.esc-agenda__que {
    overflow: hidden;
    color: var(--esc-hud-texto);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esc-agenda__donde {
    grid-column: 2;
    color: var(--esc-hud-suave);
    font-size: 11px;
}

.esc-agenda__clase.es-aviso .esc-agenda__cuando {
    color: #F0C98A;
}

.esc-agenda__mas {
    align-self: center;
    color: var(--esc-hud-suave);
    font-size: 11.5px;
    font-style: italic;
}

.esc-agenda__cargando,
.esc-agenda__aviso {
    grid-column: 1 / -1;
    margin: 0;
    float: none;
    width: auto;
    color: var(--esc-hud-suave);
    font-size: 12px;
}

.esc-agenda__aviso {
    color: #F0C98A;
}

/* --- Las cinco salidas ------------------------------------------------------ */

.esc-agenda__grupos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.esc-agenda__bloque {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.esc-agenda__bloque-tit {
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #0F9DEA;
    color: var(--esc-hud-texto);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.esc-agenda__tarjeta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--esc-hud-linea);
    border-radius: 10px;
    background: var(--esc-hud-caja);
}

.esc-agenda__tarjeta-cab {
    display: flex;
    align-items: center;
    gap: 8px;
}

.esc-agenda__tarjeta-cab .ph {
    color: #48B9F5;
    font-size: 18px;
}

.esc-agenda__tarjeta-cab strong {
    color: var(--esc-hud-texto);
    font-size: 13px;
}

.esc-agenda__texto,
.esc-agenda__nota {
    margin: 0;
    float: none;
    width: auto;
    color: var(--esc-hud-suave);
    font-size: 11.5px;
    line-height: 1.45;
}

.esc-agenda__destinos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.esc-agenda__b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #454D6F;
    border-radius: 8px;
    background: #333A55;
    color: #D2DAE8;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.esc-agenda__b:hover,
.esc-agenda__b:focus {
    border-color: #48B9F5;
    color: #FFF;
    text-decoration: none;
}

.esc-agenda__b.es-principal {
    align-self: flex-start;
    border-color: #0A76B0;
    background: #0A76B0;
    color: #FFF;
}

.esc-agenda__b.es-principal:hover {
    background: #096492;
}

.esc-agenda__b.es-whatsapp {
    border-color: #1FA855;
    background: #1FA855;
    color: #FFF;
}

.esc-agenda__b.es-whatsapp:hover {
    background: #1A9149;
}

.esc-agenda__b:disabled {
    opacity: .6;
}

.esc-agenda__email {
    display: flex;
    gap: 6px;
}

.esc-agenda__input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #454D6F;
    border-radius: 8px;
    background: #232838;
    color: var(--esc-hud-texto);
    font-size: 12.5px;
}

.esc-agenda__input:focus {
    border-color: #48B9F5;
    outline: 0;
}

.esc-agenda__suscripcion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.esc-agenda__revocar {
    padding: 0;
    border: 0;
    background: none;
    color: #F0A89F;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.esc-agenda__revocar.es-seguro {
    color: #FF8A7E;
}

/* Sin clases no hay nada que llevarse: las salidas se ven, pero apagadas. */
.esc-agenda.es-vacia .esc-agenda__grupos {
    opacity: .55;
}

@media (max-width: 900px) {

    .esc-agenda__grupos {
        grid-template-columns: minmax(0, 1fr);
    }

    .esc-agenda__resumen {
        grid-template-columns: minmax(0, 1fr);
    }

    .esc-agenda__cifra {
        grid-row: auto;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        padding: 0;
        border: 0;
    }
}


/* =============================================================================
   EL SCROLL DE LAS CELDAS DE LA MATRIZ, ESTRECHO Y DEL COLOR DEL MENU

   Cada celda de dia con muchas clases hace scroll por dentro, y la barra del
   sistema —gris, de 15 px, en las dos direcciones— se comia media celda y se
   leia antes que las propias clases. Ahora 4 px y en el azul del menu de la
   casa: se ve cuando se busca y no estorba cuando no.

   Dos formas de decirlo porque hay dos motores: a Chrome y Safari los 4 px por
   ::-webkit-scrollbar; a Firefox, que solo entiende scrollbar-width, aparte,
   porque puesto a los dos gana sobre el ::-webkit.
============================================================================= */

@supports not selector(::-webkit-scrollbar) {
    .esc-matriz__dia {
        scrollbar-width: thin;
        scrollbar-color: #2D3349 transparent;
    }
}

.esc-matriz__dia::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.esc-matriz__dia::-webkit-scrollbar-track {
    background: transparent;
}

.esc-matriz__dia::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: #2D3349;
}

.esc-matriz__dia::-webkit-scrollbar-thumb:hover {
    background: #0A76B0;
}

.esc-matriz__dia::-webkit-scrollbar-corner {
    background: transparent;
}

/* --- El QR ------------------------------------------------------------------ */

.esc-agenda__qr {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    padding: 10px;
    border: 1px dashed var(--esc-hud-linea);
    border-radius: 10px;
}

/* El QR sobre blanco y con su margen: sobre el fondo oscuro, invertido, hay
   camaras que no lo leen. */
.esc-agenda__qr-marco {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    padding: 6px;
    border-radius: 8px;
    background: #FFF;
}

.esc-agenda__qr-marco svg {
    display: block;
    width: 100%;
    height: 100%;
}

.esc-agenda__qr-marco .esc-agenda__cargando,
.esc-agenda__qr-marco .esc-agenda__aviso {
    color: #7A8290;
    font-size: 11px;
    text-align: center;
}

.esc-agenda__qr-lado {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.esc-agenda__qr-tit {
    color: var(--esc-hud-texto);
    font-size: 12.5px;
}

.esc-agenda__opciones.es-pequeno {
    align-self: flex-start;
}

.esc-agenda__opciones.es-pequeno .esc-agenda__opcion {
    padding: 4px 12px;
    font-size: 11.5px;
}

/* =============================================================================
   EL CUADRO DE MANDO (dashboard)

   En oscuro, con los tonos del menú, para que se lea como pantalla de control
   y no se confunda con las de gestión (claras). Tres columnas arriba y la
   ocupación de la semana debajo: mapa de calor por horas sobre la densidad por
   día, los dos en la MISMA rejilla para que cada día caiga en su columna.
   ============================================================================= */

.esc-dashboard {
    --d-fondo:  #272C40;
    --d-caja:   #2D3349;
    --d-caja2:  #333A55;
    --d-linea:  #3C4363;
    --d-texto:  #E8EDF5;
    --d-suave:  #A3AFC6;
    --d-acento: #0F9DEA;
    --d-ok:     #35C27A;
    --d-alerta: #F0A63A;

    padding: 18px;
    border-radius: 16px;
    background:
        radial-gradient(1200px 400px at 15% -10%, rgba(15,157,234,.10), transparent 60%),
        var(--d-fondo);
    color: var(--d-texto);
}

.esc-dash-cargando,
.esc-dash-error {
    padding: 40px;
    color: var(--d-suave);
    text-align: center;
}

/* --- Las tres columnas --- */
.esc-dash-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

@media (max-width: 1100px) {
    .esc-dash-cols { grid-template-columns: 1fr; }
}

.esc-dash-panel {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--d-linea);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--d-caja), #2A3049);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.esc-dash-panel__cab {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--d-suave);
}

.esc-dash-panel__cab .ph { font-size: 18px; color: var(--d-acento); }

.esc-dash-panel__tit {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* --- Cifras --- */
.esc-dash-cifra { text-align: center; }
.esc-dash-cifra__n { font-size: 30px; font-weight: 800; line-height: 1; }
.esc-dash-cifra__rot { margin-top: 4px; color: var(--d-suave); font-size: 11px;
    text-transform: uppercase; letter-spacing: .4px; }

.esc-dash-dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--d-linea);
}

/* --- Anillo (donut) --- */
.esc-dash-anillo-caja { display: flex; flex: 1; align-items: center; justify-content: center; gap: 22px; }
.esc-dash-anillo { position: relative; width: 156px; height: 156px; flex: none; }
.esc-dash-anillo__svg { width: 156px; height: 156px; display: block; }
.esc-dash-anillo__arco { transition: stroke-dashoffset .9s cubic-bezier(.22,1,.36,1); }
.esc-dash-anillo__centro {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.esc-dash-anillo__svg { transform: none; }
.esc-dash-anillo__num { font-size: 30px; font-weight: 800; line-height: 1; }
.esc-dash-anillo__pct { color: var(--d-acento); font-size: 12px; font-weight: 700; margin-top: 2px; }

.esc-dash-leyenda { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.esc-dash-leyenda__x { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.esc-dash-leyenda__val { margin-left: auto; font-weight: 700; }
.esc-dash-leyenda__punto { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.esc-dash-leyenda__punto.es-ok { background: var(--d-ok); }
.esc-dash-leyenda__punto.es-alerta { background: var(--d-alerta); }

/* --- Ocupación (filas hoy/semana) --- */
.esc-dash-ocup {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 4px;
}
.esc-dash-ocup + .esc-dash-ocup { border-top: 1px solid var(--d-linea); }
.esc-dash-ocup__q { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.esc-dash-ocup__q .ph { font-size: 17px; color: var(--d-acento); flex: none; }
.esc-dash-ocup__rot { font-size: 13px; font-weight: 600; }
.esc-dash-ocup__nums { display: flex; gap: 8px; }
.esc-dash-ocup__hoy, .esc-dash-ocup__sem {
    display: flex; flex-direction: column; align-items: center;
    min-width: 56px; padding: 6px 4px; border-radius: 10px;
}
.esc-dash-ocup__hoy { background: rgba(15,157,234,.16); }
.esc-dash-ocup__sem { background: rgba(255,255,255,.05); }
.esc-dash-ocup__num { font-size: 19px; font-weight: 800; line-height: 1; }
.esc-dash-ocup__lab { margin-top: 3px; font-size: 9.5px; text-transform: uppercase;
    letter-spacing: .4px; color: var(--d-suave); }

/* --- Facturación --- */
.esc-dash-fact { padding: 12px 0; }
.esc-dash-fact + .esc-dash-fact { border-top: 1px solid var(--d-linea); margin-top: 4px; }
.esc-dash-fact__cab { display: flex; align-items: baseline; gap: 8px; }
.esc-dash-fact__tit { font-size: 13px; font-weight: 700; }
.esc-dash-fact__emit { margin-left: auto; color: var(--d-suave); font-size: 11px; }
.esc-dash-fact__total { font-size: 24px; font-weight: 800; margin: 6px 0 8px; }
.esc-dash-fact__barra { height: 8px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.esc-dash-fact__relleno { height: 100%; border-radius: 6px;
    background: linear-gradient(90deg, var(--d-ok), #22d38a); transition: width .9s cubic-bezier(.22,1,.36,1); min-width: 2px; }
.esc-dash-fact__pie { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px;
    color: var(--d-suave); font-size: 11.5px; }
.esc-dash-fact__aviso { margin-top: 8px; padding: 7px 10px; border-radius: 8px;
    background: rgba(240,166,58,.12); color: #F0C078; font-size: 11px; line-height: 1.4; }

/* --- Ocupación de la semana: la rejilla común --- */
.esc-dash-panel--ancho { margin-bottom: 14px; }

.esc-dash-occ {
    display: grid;
    grid-template-columns: 46px repeat(7, 1fr);
    gap: 3px;
    align-items: stretch;
}

.esc-dash-occ__gutter { }
.esc-dash-occ__gutter.es-dens {
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding: 0 6px 4px 0; color: var(--d-suave); font-size: 10px; text-transform: uppercase;
    letter-spacing: .4px;
}

.esc-dash-occ__dia {
    text-align: center; padding: 2px 0 6px; color: var(--d-suave);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.esc-dash-occ__dia.es-hoy {
    color: #23262F; background: var(--d-alerta); border-radius: 6px;
    margin: 0 3px; padding-bottom: 3px; font-weight: 800;
    box-shadow: 0 0 0 2px rgba(240, 166, 58, .35);
}

.esc-dash-occ__hora {
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 6px; color: var(--d-suave); font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.esc-dash-occ__celda {
    position: relative;
    min-height: 36px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 4px; padding: 2px 7px;
    transition: transform .1s ease;
}
.esc-dash-occ__celda:hover { transform: scale(1.08); z-index: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.esc-dash-occ__celda.es-hoy { box-shadow: inset 0 0 0 2px var(--d-alerta); }
.esc-dash-occ__v { font-size: 15px; font-weight: 800; color: #fff; line-height: 1; }
.esc-dash-occ__par {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    font-size: 9px; font-weight: 700; color: rgba(255,255,255,.92); line-height: 1.2;
    white-space: nowrap;
}

/* La fila de densidad, más alta, con las barras en las mismas columnas. */
.esc-dash-occ__barra-col {
    height: 104px;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    gap: 4px;
    padding: 6px 0 0;
    border-top: 1px solid var(--d-linea);
    margin-top: 4px;
}

/* Los alumnos del día, en una pastilla encima de la barra. */
.esc-dash-occ__usuarios {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px; border-radius: 9px;
    background: rgba(255,255,255,.06);
    color: var(--d-texto); font-size: 10.5px; font-weight: 700;
    white-space: nowrap;
}
.esc-dash-occ__usuarios .ph { font-size: 11px; color: var(--d-suave); }
.esc-dash-occ__barra-col.es-hoy .esc-dash-occ__usuarios { background: rgba(240,166,58,.22); }
.esc-dash-occ__barra {
    width: 62%;
    min-height: 3px;
    border-radius: 5px 5px 0 0;
    transition: height .9s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 -1px 8px rgba(15,157,234,.25);
}
.esc-dash-occ__barra-col.es-hoy .esc-dash-occ__barra { box-shadow: 0 -1px 12px rgba(240,166,58,.55); }

.esc-dash-occ__escala {
    display: flex; align-items: center; gap: 8px; justify-content: flex-end;
    margin-top: 14px; color: var(--d-suave); font-size: 10px;
}
.esc-dash-occ__escala-barra {
    width: 160px; height: 8px; border-radius: 6px;
    background: linear-gradient(90deg,
        rgb(56,189,248), rgb(79,130,246), rgb(124,92,246), rgb(232,74,156));
}

/* =============================================================================
   BANCO DE ENTRENAMIENTOS — listado en OSCURO

   En oscuro para distinguirlo de un vistazo del banco de ejercicios (claro):
   son dos cajones distintos y conviene no confundirlos. Misma idea de listado
   que el de ejercicios, con cabecera de columnas y una fila por entrenamiento.
   ============================================================================= */

.esc-bent-panel {
    --b-fondo:  #272C40;
    --b-caja:   #2D3349;
    --b-caja2:  #333A55;
    /* Las rayas que separan filas y ejercicios: antes (#3C4363) se perdian
       sobre el fondo del panel y la tabla se leia como un bloque. Subidas
       hasta que se ven de un vistazo sin llegar a rayar la pantalla. */
    --b-linea:  #4A5377;
    --b-borde:  #596389;
    --b-texto:  #EEF2F8;
    --b-suave:  #B6C1D4;
    --b-acento: #0F9DEA;

    padding: 14px;
    border-radius: 16px;
    background: var(--b-fondo);
    color: var(--b-texto);
}

/* --- La barra: buscador oscuro + contador --- */
.esc-bent-barra {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.esc-bent-buscador { flex: 1 1 auto; max-width: 640px; }
.esc-bent-buscador.esc-mando {
    border-color: var(--b-borde);
    background: var(--b-linea);
    height: 40px;
}
.esc-bent-panel .esc-mando > .form-control {
    background: var(--b-caja2);
    color: var(--b-texto);
}
.esc-bent-panel .esc-mando > .form-control::placeholder { color: var(--b-suave); }
.esc-bent-panel .esc-mando > select.form-control { color: var(--b-texto); }
.esc-bent-panel .esc-mando > select.form-control option { color: #1A2B3C; }
.esc-bent-buscador.esc-mando:focus-within { border-color: var(--b-acento); }

/* El mando mide 640 px, pero sus dos piezas van con width:auto y no crecen:
   el buscador salia estrujado —con el texto cortado a media palabra— y
   sobraba un trozo de mando vacio a la derecha, que no se entendia que era.
   El buscador se queda con el hueco libre y el desplegable, con lo suyo. */
.esc-bent-buscador > input.form-control  { flex: 1 1 auto; min-width: 140px; }
.esc-bent-buscador > select.form-control { flex: 0 0 auto; width: auto; padding-right: 28px; }

.esc-bent-marcador {
    display: flex; align-items: baseline; gap: 7px;
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 10px;
    background: rgba(15,157,234,.14);
}
.esc-bent-marcador__n { font-size: 20px; font-weight: 800; color: #fff; }
.esc-bent-marcador__txt { color: var(--b-suave); font-size: 11px;
    text-transform: uppercase; letter-spacing: .4px; }

.esc-bent-cargando { padding: 40px; text-align: center; color: var(--b-suave); }

/* --- El listado --- */
.esc-bent {
    border: 1px solid var(--b-linea);
    border-radius: 12px;
    overflow: hidden;
    background: var(--b-caja);
}

.esc-bent__cab,
.esc-bent__fila {
    display: grid;
    grid-template-columns:
        58px minmax(0,1.5fr) minmax(110px,.85fr) 128px minmax(0,1.6fr) 96px 90px 112px 124px;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
}

.esc-bent__cab {
    height: 40px;
    background: #2C3349;
    border-bottom: 1px solid var(--b-linea);
}
.esc-bent__th {
    color: var(--b-suave);
    font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}

.esc-bent__fila {
    min-height: 60px;
    padding-top: 10px; padding-bottom: 10px;
    border-bottom: 1px solid var(--b-linea);
    border-left: 3px solid var(--esc-nivel, #8E9BA8);
    transition: background .12s ease;
}
.esc-bent__fila:last-child { border-bottom: 0; }
.esc-bent__fila:hover { background: rgba(255,255,255,.035); }

.esc-bent__cel { min-width: 0; }

.esc-bent__gr {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 22px; padding: 0 7px;
    border-radius: 6px; color: #fff; font-size: 11px; font-weight: 800;
}
.esc-bent__nada { color: #6C7692; font-size: 12px; font-style: italic; }

.esc-bent__nombre {
    display: block; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.esc-bent__autor {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 3px; color: var(--b-suave); font-size: 11px;
    text-transform: uppercase; letter-spacing: .3px;
}
.esc-bent__autor .ph { font-size: 12px; }

.esc-bent__obs {
    display: -webkit-box; overflow: hidden;
    color: #C3CEDC; font-size: 12.5px; line-height: 1.4;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

.esc-bent__num, .esc-bent__tiempo, .esc-bent__fecha { color: var(--b-texto); }
.esc-bent__num { font-size: 16px; font-weight: 800; }
.esc-bent__num-lab { display: block; color: var(--b-suave); font-size: 10px;
    text-transform: uppercase; letter-spacing: .3px; margin-top: 1px; }
.esc-bent__tiempo {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.esc-bent__tiempo .ph { color: var(--b-acento); font-size: 13px; }
.esc-bent__fecha { color: var(--b-suave); font-size: 12px; }

.esc-bent__cel.es-acc { display: flex; justify-content: flex-end; gap: 6px; }
.esc-bent__accion {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--b-borde); border-radius: 8px;
    background: var(--b-caja2); color: var(--b-suave);
    cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.esc-bent__accion .ph { font-size: 15px; }

/* CADA ACCION, DE SU COLOR
   ------------------------
   El mismo criterio que en el resto de la plataforma, y el color sale del
   propio icono: azul para consultar, ambar para corregir, rojo para retirar.
   Sobre el panel marino van translucidos, que un pastel claro aqui gritaria.
   (Esta pantalla no carga el kit comun —la escuela tiene su hoja desde antes
   que el—, asi que el cuadradito se pinta aqui.) */
.esc-bent__accion:has(.ph-eye),
.esc-bent__accion:has(.ph-magnifying-glass) {
    border-color: rgba(72, 185, 245, .45); background: rgba(72, 185, 245, .16); color: #9BD7FF;
}
.esc-bent__accion:has(.ph-pencil-simple),
.esc-bent__accion:has(.ph-gear-six) {
    border-color: rgba(246, 159, 0, .45); background: rgba(246, 159, 0, .16); color: #F7C66B;
}
.esc-bent__accion:has(.ph-archive),
.esc-bent__accion:has(.ph-trash),
.esc-bent__accion.es-peligro {
    border-color: rgba(224, 83, 63, .45); background: rgba(224, 83, 63, .16); color: #F3A29F;
}
.esc-bent__accion:hover { filter: brightness(1.25); border-color: currentColor; }

/* --- Vacío --- */
.esc-bent-vacio {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 50px 20px; text-align: center;
    border: 1px dashed var(--b-linea); border-radius: 12px; color: var(--b-suave);
}
.esc-bent-vacio .ph { font-size: 34px; color: var(--b-borde); }
.esc-bent-vacio strong { color: var(--b-texto); font-size: 15px; }
.esc-bent-vacio span { max-width: 460px; font-size: 12.5px; line-height: 1.5; }

/* Los scrollbars internos del listado, finos y en tono menú. */
.esc-bent-panel ::-webkit-scrollbar { width: 8px; height: 8px; }
.esc-bent-panel ::-webkit-scrollbar-thumb { background: #454D6F; border-radius: 8px; }
.esc-bent-panel ::-webkit-scrollbar-track { background: transparent; }

/* Entre 900 y 1500 no caben las nueve: lo primero que cede es el texto
   libre de las observaciones, que es lo unico que se puede leer en la ficha. */
@media (max-width: 1500px) and (min-width: 901px) {
    .esc-bent__cab, .esc-bent__fila {
        grid-template-columns:
            58px minmax(0,1.5fr) minmax(100px,.8fr) 120px 92px 86px 104px 118px;
    }
    .esc-bent__cab > .esc-bent__th:nth-child(5),
    .esc-bent__cel.es-obs { display: none; }
}

/* Lo de arriba mira el ancho de la VENTANA, pero la lista vive a la derecha del menú lateral: a 1.200 px
   la caja mide unos 850 y el nombre del entrenamiento se quedaba en 51 px, con «Entrenamiento» montado
   sobre «Autor». Por el ancho de la caja: sin observaciones y, si aún no cabe, sin «Guardado». */
.esc-bent-grupo { container-type: inline-size; }
@container (max-width: 1080px) {
    .esc-bent__cab, .esc-bent__fila {
        grid-template-columns:
            58px minmax(150px,1.6fr) minmax(100px,.8fr) 120px 92px 86px 104px 118px;
    }
    .esc-bent__cab > .esc-bent__th:nth-child(5),
    .esc-bent__cel.es-obs { display: none; }
}
@container (max-width: 960px) {
    .esc-bent__cab, .esc-bent__fila {
        grid-template-columns:
            58px minmax(140px,1.6fr) minmax(90px,.8fr) 110px 86px 80px 118px;
    }
    .esc-bent__cab > .esc-bent__th:nth-child(8),
    .esc-bent__cel.es-fecha { display: none; }
}

@media (max-width: 900px) {
    .esc-bent__cab { display: none; }
    .esc-bent__fila {
        grid-template-columns: 44px 1fr auto;
        grid-auto-rows: auto;
    }
    .esc-bent__cel.es-obs, .esc-bent__cel.es-num, .esc-bent__cel.es-fecha,
    .esc-bent__cel.es-autor, .esc-bent__cel.es-ve { display: none; }
}

/* El contenedor conserva la clase .esc-benc (rejilla de tarjetas de la versión
   anterior): dentro del panel oscuro vuelve a ser un bloque normal. */
.esc-bent-panel .esc-benc {
    display: block;
    grid-template-columns: none;
    gap: 0;
}

/* Banco de entrenamientos agrupado por nivel: cada GR en su contenedor,
   plegado por defecto, con su barra plegable en el azul del menú. */
.esc-bent-grupo {
    margin-bottom: 12px;
    border: 1px solid var(--b-linea);
    border-radius: 12px;
    overflow: hidden;
    background: var(--b-caja);
}
.esc-bent-grupo:last-child { margin-bottom: 0; }

.esc-bent-grupo__cab {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-left: 4px solid var(--esc-nivel, #8E9BA8);
    background: #2C3349;
    color: var(--b-texto);
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}
.esc-bent-grupo__cab:hover { background: #333A55; }

.esc-bent-grupo__flecha { color: var(--b-suave); font-size: 15px; }
.esc-bent-grupo__nombre {
    font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
}
.esc-bent-grupo__cuenta {
    margin-left: auto; color: var(--b-suave); font-size: 11.5px;
}

/* Dentro del grupo, el listado va sin su propio marco: lo pone el contenedor. */
.esc-bent-grupo .esc-bent {
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--b-linea);
}

/* «Crear entrenamiento» en el banco de la escuela: verde, a la derecha. */
.esc-bent-crear {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: #35A65A;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease;
}
.esc-bent-crear:hover { background: #2E9350; }
.esc-bent-crear .ph { font-size: 16px; }

/* Elementos del dashboard que llevan a otra pantalla. */
.esc-dashboard .es-enlace { cursor: pointer; border-radius: 10px; transition: background .12s ease; }
.esc-dashboard .es-enlace:hover { background: rgba(15,157,234,.12); }
.esc-dashboard .esc-dash-leyenda__x.es-enlace { padding: 4px 8px; margin: -4px -8px; }
.esc-dashboard .esc-dash-cifra.es-enlace { padding: 6px 4px; }
.esc-dashboard .es-enlace:focus-visible { outline: 2px solid var(--d-acento); outline-offset: 2px; }

/* El pie de un panel, con su botón a la derecha. */
.esc-dash-panel__pie {
    display: flex; justify-content: flex-end;
    margin-top: auto; padding-top: 14px;
}
.esc-dash-boton {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 10px;
    border: 1px solid var(--d-linea);
    background: rgba(15,157,234,.14); color: var(--d-texto);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.esc-dash-boton:hover { background: var(--d-acento); border-color: var(--d-acento); color: #fff; }
.esc-dash-boton .ph { font-size: 15px; }

/* Cabecera del dashboard: título a la izquierda y el aviso de conflictos a la
   derecha, que solo se enseña si hay algo que no cuadra (como en la matriz). */
.esc-dash-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}
.esc-dash-top .esc-titulo { float: none; margin: 0; }
.esc-dash-avisos-wrap { margin-left: auto; }
.esc-dash-avisos-wrap .esc-cal-avisos:not(.es-alerta) { display: none; }

/* El selector de periodo de cada bloque de facturación. */
.esc-dashboard .esc-dash-fact__cab {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.esc-dash-fact__periodos {
    display: inline-flex;
    margin-left: auto;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255,255,255,.05);
}
.esc-dash-fact__periodo {
    padding: 3px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--d-suave);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.esc-dash-fact__periodo:hover { color: var(--d-texto); }
.esc-dash-fact__periodo.is-activa { background: var(--d-acento); color: #fff; }

.esc-dash-fact__top { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; }
.esc-dash-fact__top .esc-dash-fact__total { margin: 0; }
.esc-dash-fact__top .esc-dash-fact__emit { margin-left: auto; }

/* La media de alumnos por profesor, bajo la cifra. */
.esc-dash-cifra__extra {
    margin-top: 4px;
    color: var(--d-acento);
    font-size: 11px;
    font-weight: 700;
}

/* Radar de alumnos por nivel. */
.esc-dash-radar { display: flex; justify-content: center; align-items: center; flex: 1; padding: 4px 0; }
.esc-dash-radar__svg { width: 268px; height: 248px; max-width: 100%; }

/* Fila de abajo del dashboard: distribución (3 gráficas juntas) a la izquierda
   y el mapa de slots a la derecha. */
.esc-dash-macro {
    display: grid;
    grid-template-columns: minmax(300px, 0.92fr) minmax(0, 2fr);
    gap: 12px;
    align-items: stretch;
}
.esc-dash-macro__der { display: flex; flex-direction: column; gap: 12px; }
.esc-dash-macro__der > .esc-dash-panel--ancho { margin-bottom: 0; flex: 1; }
.esc-dash-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* La distribución reparte sus gráficas para llenar el alto de la columna. */
.esc-dash-macro > .esc-dash-panel { height: 100%; }
.esc-dash-macro .esc-dash-dist { flex: 1; justify-content: stretch; gap: 0; }
.esc-dash-macro .esc-dash-dist__item { flex: 1; justify-content: center; padding: 10px 0; }
.esc-dash-dist__pie { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--d-linea); text-align: center; }
.esc-dash-dist__pie-txt { color: var(--d-suave); font-size: 12px; font-weight: 700; }

@media (max-width: 1100px) {
    .esc-dash-macro { grid-template-columns: 1fr; }
    .esc-dash-cols2 { grid-template-columns: 1fr; }
}

/* Las tres gráficas de distribución, compactas dentro de una columna. */
.esc-dash-dist {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.esc-dash-dist__item { display: flex; flex-direction: column; align-items: center; width: 100%; }
.esc-dash-dist__subtit {
    color: var(--d-suave); font-size: 10.5px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase; margin-bottom: 10px; text-align: center;
}
.esc-dash-dist__item { width: 100%; }
.esc-dash-dist__subtit { margin-bottom: 4px; }
.esc-dash-dist .esc-dash-radar { padding: 0; width: 100%; }
.esc-dash-dist .esc-dash-radar__svg { width: 100%; max-width: 250px; height: auto; }
.esc-dash-dist .esc-dash-anillo,
.esc-dash-dist .esc-dash-anillo__svg { width: 158px; height: 158px; }
.esc-dash-dist .esc-dash-anillo__num { font-size: 26px; }
.esc-dash-dist .esc-dash-anillo__pct { font-size: 11px; }
.esc-dash-dist .esc-dash-anillo-caja { flex-direction: row; justify-content: center; gap: 20px; width: 100%; }
.esc-dash-dist .esc-dash-leyenda { gap: 5px; flex: 0 1 auto; min-width: 110px; }
.esc-dash-dist .esc-dash-leyenda__x { font-size: 11px; }

/* La gráfica de día, al pie del panel de Ocupación. */
.esc-dash-ocup-dia {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--d-linea);
}
.esc-dash-ocup-dia .esc-dash-dist__subtit { text-align: left; margin-bottom: 8px; }
.esc-dash-occ.es-dia { grid-template-columns: 30px repeat(7, 1fr); gap: 2px; }
.esc-dash-occ.es-dia .esc-dash-occ__barra-col { height: 74px; }
.esc-dash-occ.es-dia .esc-dash-occ__usuarios { padding: 1px 5px; font-size: 9.5px; }
.esc-dash-occ.es-dia .esc-dash-occ__dia { font-size: 9.5px; }

/* El mega tooltip de un slot del mapa de ocupación. */
.esc-dash-tip {
    position: fixed; z-index: 4000;
    max-width: 360px; min-width: 230px;
    padding: 12px 14px; border-radius: 12px;
    background: #1E2438; border: 1px solid #454D6F;
    box-shadow: 0 18px 44px rgba(0,0,0,.55);
    color: #E8EDF5; font-size: 12px; pointer-events: none;
}
.esc-dash-tip__cab {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #3C4363;
}
.esc-dash-tip__dia { font-weight: 800; font-size: 13.5px; }
.esc-dash-tip__tot { color: #A3AFC6; font-size: 11px; white-space: nowrap; }
.esc-dash-tip__sec { margin-top: 10px; }
.esc-dash-tip__sec:first-of-type { margin-top: 0; }
.esc-dash-tip__sec-cab { display: flex; align-items: center; gap: 6px; }
.esc-dash-tip__punto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.esc-dash-tip__sec-tit {
    font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    font-size: 10.5px; color: #C3CEDC;
}
.esc-dash-tip__sec-num { margin-left: auto; font-weight: 800; font-size: 12px; }
.esc-dash-tip__lista { margin: 5px 0 0; padding: 0 0 0 15px; }
.esc-dash-tip__lista li { margin: 2px 0; color: #D6DEEA; line-height: 1.35; }
.esc-dash-tip__vacio { color: #6C7692; padding-left: 15px; margin-top: 3px; }

/* Los slots del mapa llevan a la vista de día en la matriz. */
.esc-dash-occ__celda.es-pulsable { cursor: pointer; }
.esc-dash-occ__celda.es-pulsable:hover { transform: scale(1.04); z-index: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

/* Una raya separadora entre gráfica y gráfica de la columna de distribución. */
.esc-dash-dist__item + .esc-dash-dist__item {
    border-top: 1px solid var(--d-linea);
    padding-top: 12px;
}

/* Facturación + los banners de alumnos/profesores en su hueco. */
.esc-dash-colfact { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.esc-dash-colfact > .esc-dash-panel { flex: none; }

.esc-dash-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 90px; }
.esc-dash-banner {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 14px;
    border: 1px solid var(--d-linea); border-radius: 14px;
    background: var(--d-caja2);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.esc-dash-banner:hover { border-color: var(--d-acento); }
.esc-dash-banner__n { font-size: 30px; font-weight: 800; line-height: 1; color: #fff; }
.esc-dash-banner__rot {
    color: var(--d-suave); font-size: 11px; text-align: center;
    text-transform: uppercase; letter-spacing: .3px;
}

/* El botón «Matriz semanal» en la cabecera de Ocupación: pegado a la derecha,
   con el mismo margen lateral que el contenido del panel. */
.esc-dash-boton--cab { margin-left: auto; }
.esc-dash-panel__cab { min-height: 34px; }

/* Con alertas, el hueco de banners pasa a tres, con el triángulo ámbar. */
.esc-dash-banners.es-tres { grid-template-columns: 1fr 1fr 1fr; }
.esc-dash-banner--alerta {
    background: rgba(240,166,58,.14);
    border-color: rgba(240,166,58,.5);
}
.esc-dash-banner--alerta:hover { border-color: var(--d-alerta); }
.esc-dash-banner--alerta .esc-dash-banner__rot { color: #F0C078; }
.esc-dash-banner__tri { font-size: 28px; }

/* El aviso de conflictos vive ahora en el banner; el de la cabecera se oculta. */
.esc-dash-avisos-wrap { display: none; }

/* =====================================================================
   MENSAJES PUSH — preferencias por club + historial
   ===================================================================== */
.esc-push-sub {
    font-size: 15px; font-weight: 700; color: var(--esc-title);
    margin: 22px 0 12px; text-transform: none;
}

/* --- Reservas de pista hechas (listado + anular) --- */
.esc-rh-barra { margin-bottom: 12px; }
.esc-rh-filtros { display: inline-flex; gap: 6px; }
.esc-rh-filtro { border: 1px solid var(--esc-border); background: #fff; color: var(--esc-navy, #2D3349);
    border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.esc-rh-filtro.es-activo { background: var(--esc-accent, #0F9DEA); border-color: var(--esc-accent, #0F9DEA); color: #fff; }
.esc-rh-vacio { color: var(--esc-text-soft, #6A7688); padding: 16px 2px; }
.esc-rh-tabla { display: flex; flex-direction: column; border: 1px solid var(--esc-border); border-radius: 12px; overflow: hidden; }
.esc-rh-fila { display: grid; grid-template-columns: 70px 96px minmax(90px, 1fr) minmax(120px, 1.4fr) 150px 80px 150px 90px;
    gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--esc-border); font-size: 13px; }
.esc-rh-fila:last-child { border-bottom: 0; }
.esc-rh-cab { background: #F5F7FA; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--esc-text-soft, #6A7688); }
.esc-rh-fila.es-anulada { opacity: .6; }
.esc-rh-fecha { font-weight: 700; color: var(--esc-navy, #2D3349); }
.esc-rh-persona { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esc-rh-estado { display: flex; flex-direction: column; gap: 1px; font-weight: 700; }
.esc-rh-estado.es-pagada { color: var(--esc-green, #5E8E2A); }
.esc-rh-estado.es-pendiente { color: #B26A00; }
.esc-rh-estado.es-anulada { color: #C0392B; }
.esc-rh-reembolso { font-size: 10.5px; font-weight: 600; color: #B26A00; }
.esc-rh-acc { text-align: right; }
.esc-rh-anular { padding: 5px 12px; font-size: 12px; }
@media (max-width: 900px) {
    .esc-rh-cab { display: none; }
    .esc-rh-fila { grid-template-columns: 1fr 1fr; gap: 4px 10px; }
    .esc-rh-acc { text-align: left; }
}

/* --- Compositor: enviar un aviso push --- */
.esc-push-comp { border: 1px solid var(--esc-border); border-radius: 12px; padding: 16px; background: var(--esc-surface, #fff);
    display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.esc-push-comp__destino { display: flex; flex-wrap: wrap; gap: 8px; }
.esc-push-dest { border: 1px solid var(--esc-border); background: #fff; color: var(--esc-navy, #2D3349);
    border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.esc-push-dest:hover { border-color: var(--esc-accent, #0F9DEA); }
.esc-push-dest.es-activo { background: var(--esc-accent, #0F9DEA); border-color: var(--esc-accent, #0F9DEA); color: #fff; }
.esc-push-comp__picker { display: flex; flex-direction: column; gap: 8px; }
.esc-push-comp__nota { color: var(--esc-text-soft, #6A7688); font-size: 13px; }
.esc-push-comp__res { display: flex; flex-direction: column; gap: 2px; }
.esc-push-comp__resit { text-align: left; border: 1px solid var(--esc-border); background: #F7F9FB; border-radius: 8px;
    padding: 7px 10px; font-size: 13px; cursor: pointer; }
.esc-push-comp__resit:hover { background: #EAF4FC; border-color: var(--esc-accent, #0F9DEA); }
.esc-push-comp__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.esc-push-comp__chip { display: inline-flex; align-items: center; gap: 6px; background: var(--esc-navy, #2D3349); color: #fff;
    border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12.5px; font-weight: 600; }
.esc-push-comp__chipx { border: 0; background: rgba(255,255,255,.2); color: #fff; border-radius: 50%; width: 18px; height: 18px;
    line-height: 1; cursor: pointer; font-size: 13px; }
.esc-push-comp__grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; }
.esc-push-comp__grupo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--esc-text); cursor: pointer; }

/* --- Compositor + tabla de alumnos, en dos columnas ------------------------ */
.esc-push-fila { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; width: 100%; }
.esc-push-fila .esc-push-comp { flex: 0 1 460px; max-width: 560px; }

.esc-push-tabla {
    flex: 1 1 440px; min-width: 320px;
    display: flex; flex-direction: column;
    border: 1px solid var(--esc-border); border-radius: 12px;
    background: var(--esc-surface, #fff); overflow: hidden;
}
/* Los filtros, todos en una sola fila; se encogen para caber. */
.esc-push-tabla__filtros {
    display: flex; flex-wrap: nowrap; gap: 6px;
    padding: 10px; border-bottom: 1px solid var(--esc-border-soft);
}
.esc-push-tabla__buscar { flex: 1.3 1 0; min-width: 0; }
.esc-push-tabla__sel { flex: 1 1 0; min-width: 0; }
.esc-push-tabla__filtros .form-control { font-size: 12px; padding: 6px 6px; height: auto; }
.esc-push-tabla__scroll { flex: 1 1 auto; overflow: auto; min-height: 0; }

.esc-push-tabla__tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.esc-push-tabla__tbl thead th {
    position: sticky; top: 0; z-index: 1;
    background: #F4F7FA; color: var(--esc-text-soft);
    text-align: left; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px;
    padding: 9px 10px; border-bottom: 1px solid var(--esc-border);
    white-space: nowrap;
}
.esc-push-tabla__tbl tbody td {
    padding: 8px 10px; border-bottom: 1px solid var(--esc-border-soft);
    color: var(--esc-text); vertical-align: middle;
}
.esc-push-tabla__tbl tbody tr:hover { background: #F6FAFD; }
.esc-push-tabla__ck { width: 34px; text-align: center; }
.esc-push-tabla__ck input { width: 16px; height: 16px; cursor: pointer; }
.esc-push-tabla__nom { font-weight: 600; color: var(--esc-title); }
.esc-push-tabla__gru { color: var(--esc-text-soft); }
.esc-push-tabla__nivel {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: #E7ECF1; color: var(--esc-title);
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.esc-push-tabla__vacio { padding: 26px 16px; text-align: center; color: var(--esc-text-soft); font-size: 13px; }
.esc-push-tabla__pie {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px; border-top: 1px solid var(--esc-border-soft);
    color: var(--esc-text-soft); font-size: 12.5px; font-weight: 600;
}
.esc-push-tabla__pager { display: inline-flex; align-items: center; gap: 6px; }
.esc-push-tabla__pager button {
    border: 1px solid var(--esc-border); background: #fff; color: var(--esc-title);
    border-radius: 7px; width: 26px; height: 26px; line-height: 1; cursor: pointer; font-size: 14px;
}
.esc-push-tabla__pager button:hover:not(:disabled) { border-color: var(--esc-accent); color: var(--esc-accent); }
.esc-push-tabla__pager button:disabled { opacity: .4; cursor: default; }
.esc-push-tabla__pager span { min-width: 66px; text-align: center; }

@media (max-width: 900px) {
    .esc-push-fila { flex-direction: column; }
    .esc-push-fila .esc-push-comp { flex: 1 1 auto; max-width: none; }
    .esc-push-tabla { flex: 1 1 auto; height: auto !important; }
    .esc-push-tabla__filtros { flex-wrap: wrap; }
    .esc-push-tabla__scroll { max-height: 420px; }
}
.esc-push-comp__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.esc-push-comp__resumen { color: var(--esc-text-soft, #6A7688); font-size: 12.5px; }

/* --- Interruptores de qué se envía --- */
.esc-push-lista {
    background: var(--esc-surface); border: 1px solid var(--esc-border);
    border-radius: var(--esc-radius); box-shadow: var(--esc-shadow); overflow: hidden;
}
.esc-push-item {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 16px; border-bottom: 1px solid var(--esc-border-soft);
}
.esc-push-item:last-child { border-bottom: 0; }
.esc-push-item__txt { flex: 1; min-width: 0; }
.esc-push-item__tit { font-weight: 700; color: var(--esc-text); }
.esc-push-item__sub { color: var(--esc-text-soft); font-size: 12px; margin-top: 2px; line-height: 1.4; }

/* El interruptor es el componente .esc-switch de siempre (no se redefine aquí:
   redefinirlo rompía TODOS los switches del módulo). Solo el hueco a la
   derecha lo separa del texto. */
.esc-push-item .esc-switch { flex: 0 0 auto; }

/* --- Historial --- */
.esc-push-hist-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.esc-push-hist-filtros { display: inline-flex; gap: 6px; }
.esc-push-filtro {
    border: 1px solid var(--esc-border); background: var(--esc-surface);
    color: var(--esc-text-soft); padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.esc-push-filtro.es-activo { background: var(--esc-navy); border-color: var(--esc-navy); color: #fff; }

.esc-push-hist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.esc-push-vacio { color: var(--esc-text-soft); padding: 18px; text-align: center; }
.esc-push-msg {
    background: var(--esc-surface); border: 1px solid var(--esc-border);
    border-left: 3px solid var(--esc-accent); border-radius: var(--esc-radius);
    padding: 12px 14px; box-shadow: var(--esc-shadow);
}
.esc-push-msg__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.esc-push-msg__tit { font-weight: 700; color: var(--esc-text); }
.esc-push-msg__desc { color: var(--esc-text); font-size: 12.5px; margin-top: 4px; line-height: 1.45; }
.esc-push-msg__pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.esc-push-msg__alumno { font-size: 12px; font-weight: 600; color: var(--esc-navy); }
.esc-push-msg__fecha { font-size: 11.5px; color: var(--esc-text-soft); }
.esc-push-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.esc-push-badge.es-nuevo { background: rgba(15,157,234,.14); color: #0B7BB8; }
.esc-push-badge.es-leido { background: #EDEFF0; color: var(--esc-text-soft); }

/* =====================================================================
   BANCO DE ENTRENAMIENTOS — ojo y ficha del ejercicio
   ===================================================================== */
/* El ojo de cada línea de ejercicio (ficha del entrenamiento). */
.esc-bent__ojo {
    flex: 0 0 auto; margin-left: 8px;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--esc-border); background: var(--esc-surface);
    color: var(--esc-navy); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.esc-bent__ojo:hover { background: var(--esc-navy); border-color: var(--esc-navy); color: #fff; }
.esc-bent__ojo .ph { font-size: 15px; }

/* Volver al entrenamiento desde la ficha del ejercicio. */
.esc-bent__volver { margin-right: auto; }

/* =====================================================================
   CALENDARIO — horario de apertura POR ÁREA en el alta de tipo de día
   ===================================================================== */
.esc-cal-horario {
    display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--esc-border); border-radius: var(--esc-radius);
    padding: 8px; background: var(--esc-surface);
}
.esc-cal-horario__fila {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 2px;
}
.esc-cal-horario__fila.es-todos {
    border-bottom: 1px solid var(--esc-border);
    padding-bottom: 8px; margin-bottom: 2px;
}
.esc-cal-horario__nombre {
    flex: 0 0 92px; font-weight: 700; color: var(--esc-text);
}
.esc-cal-horario__fila.es-todos .esc-cal-horario__nombre { color: var(--esc-navy); }
.esc-cal-horario__modo { flex: 0 0 108px; }
.esc-cal-horario__hora { flex: 0 0 96px; }
.esc-cal-horario__copiar { margin-left: auto; white-space: nowrap; }

/* Slots de reserva generados por área, en el alta de tipo de día */
.esc-cal-horario__fila { flex-wrap: wrap; }
.esc-cal-horario__paso { flex: 0 0 92px; }
.esc-cal-horario__slots {
    flex-basis: 100%;
    display: flex; flex-wrap: wrap; gap: 4px;
    margin: 4px 0 2px 100px;          /* alineado bajo los controles */
    max-height: 104px; overflow-y: auto;
}
.esc-cal-slot {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 3px 2px 7px; border-radius: 4px;
    background: rgba(15,157,234,.12); color: #0B7BB8;
    border: 1px solid rgba(15,157,234,.25);
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.esc-cal-slot__x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; padding: 0; border: 0; border-radius: 3px;
    background: transparent; color: inherit; cursor: pointer; font-size: 11px; opacity: .6;
}
.esc-cal-slot__x:hover { opacity: 1; background: rgba(0,0,0,.08); }
/* Slot cerrado a mano: se ve tachado y apagado, y se puede reabrir. */
.esc-cal-slot.es-cerrado {
    background: #F0F1F3; color: #97A0AC; border-color: #DBE0E4;
}
.esc-cal-slot.es-cerrado .esc-cal-slot__h { text-decoration: line-through; }
.esc-cal-slot__cuenta { align-self: center; color: var(--esc-text-soft); font-size: 11px; margin-left: 4px; }

/* =====================================================================
   TIPO DE DÍA — dos columnas: horario (izq) y franjas por día (der)
   ===================================================================== */
.esc-cal-tipoform { display: flex; gap: 20px; align-items: flex-start; }
.esc-cal-tipoform__izq { flex: 1 1 0; min-width: 0; }
.esc-cal-tipoform__der { flex: 1 1 0; min-width: 0; }
@media (max-width: 860px) {
    .esc-cal-tipoform { flex-direction: column; }
    .esc-cal-tipoform__izq, .esc-cal-tipoform__der { flex-basis: auto; width: 100%; }
}

.esc-cal-franja__area { max-width: 240px; margin: 4px 0 10px; }

.esc-cal-franja__brushes { display: flex; gap: 6px; margin-bottom: 6px; }
.esc-cal-franja__brush {
    padding: 5px 12px; border-radius: 4px; cursor: pointer;
    border: 2px solid transparent; font-weight: 700; font-size: 12px;
}
.esc-cal-franja__brush.es-valle   { background: rgba(53,194,122,.15);  color: #1E7D4B; }
.esc-cal-franja__brush.es-general { background: #E7EBF0;               color: #5A6473; }
.esc-cal-franja__brush.es-pico    { background: rgba(232,102,61,.15);  color: #B34724; }
.esc-cal-franja__brush.es-activo.es-valle   { border-color: #35C27A; }
.esc-cal-franja__brush.es-activo.es-general { border-color: #9AA5B4; }
.esc-cal-franja__brush.es-activo.es-pico    { border-color: #E8663D; }

.esc-cal-franja__grid { overflow-x: auto; margin-top: 8px; user-select: none; padding-bottom: 4px; }
.esc-cal-franja__fila { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; }
.esc-cal-franja__dia { flex: 0 0 40px; font-weight: 700; font-size: 11px; color: var(--esc-text); }
.esc-cal-franja__fila.es-cab .esc-cal-franja__dia { flex-basis: 40px; }
.esc-cal-franja__hora { flex: 0 0 26px; font-size: 8.5px; color: var(--esc-text-soft); text-align: center; }
.esc-cal-franja__slot {
    flex: 0 0 26px; height: 20px; border-radius: 3px; cursor: pointer;
    border: 1px solid rgba(0,0,0,.06);
}
.esc-cal-franja__slot.es-valle   { background: #35C27A; }
.esc-cal-franja__slot.es-general { background: #DDE3EA; }
.esc-cal-franja__slot.es-pico    { background: #E8663D; }

/* Ancho máximo para la ficha de tipo de día a dos columnas */
.esc-modal__caja.es-maxi { max-width: min(1400px, 98vw); }

/* Botones de área (qué área clasificar), estilo etiqueta */
.esc-cal-franja__areas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.esc-cal-franja__areabtn {
    padding: 5px 12px; border-radius: 4px; cursor: pointer;
    border: 2px solid var(--esc-border); background: var(--esc-surface);
    color: var(--esc-text-soft); font-weight: 700; font-size: 12px;
}
.esc-cal-franja__areabtn.es-activo {
    background: rgba(15, 157, 234, .10);
    border-color: var(--esc-accent);
    color: #0B7BB8;
}

/* Rótulos "Tipo de actividad" / "Tramo" delante de cada fila */
.esc-cal-franja__linea { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.esc-cal-franja__rot {
    flex: 0 0 108px; font-size: 11px; font-weight: 700;
    color: var(--esc-text-soft); text-transform: uppercase; letter-spacing: .3px;
}
.esc-cal-franja__linea .esc-cal-franja__areas,
.esc-cal-franja__linea .esc-cal-franja__brushes { margin: 0; }

/* Línea vertical que separa el formulario (izq) de las franjas (der) */
.esc-cal-tipoform__der { border-left: 1px solid var(--esc-border); padding-left: 20px; }

/* Ritmo vertical y estética de la columna de franjas */
.esc-cal-tipoform__der { display: flex; flex-direction: column; }
.esc-cal-tipoform__der > label { margin-bottom: 6px; }
.esc-cal-tipoform__der > .esc-ayuda:first-of-type {
    display: block; margin-bottom: 20px; line-height: 1.55; max-width: 520px;
}
.esc-cal-franja__rot { white-space: nowrap; flex-basis: 130px; }
.esc-cal-franja__linea { margin-bottom: 20px; }
.esc-cal-franja__grid { margin-top: 4px; }
.esc-cal-franja__fila { margin-bottom: 3px; }
.esc-cal-franja__fila.es-cab { margin-bottom: 6px; }

/* Explicación de las franjas, en puntos verticales */
.esc-cal-franja__pasos {
    margin: 8px 0 20px; padding-left: 18px; list-style: disc;
    color: var(--esc-text-soft); font-size: 12px; line-height: 1.5;
}
.esc-cal-franja__pasos li { margin-bottom: 5px; }
.esc-cal-franja__pasos li:last-child { margin-top: 6px; list-style: none; margin-left: -18px; }

/* El recuadro de slots generados, diferenciado del de horas */
.esc-cal-horario__slots {
    background: #EEF3F8;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    padding: 6px 8px;
    margin-left: 0;                 /* ya no hace falta el sangrado */
    margin-top: 6px;
}
.esc-cal-horario__slots:empty { display: none; }

/* Emergente del tipo de día algo más ancha para que quepan bien los slots */
.esc-modal__caja.es-maxi { max-width: min(1520px, 98vw); }

/* Recuadro de slots MÁS diferenciado del de horas */
.esc-cal-horario__slots {
    background: #E8F1FA;
    border: 2px solid #8FBEDF;
    border-radius: 6px;
    padding: 7px 9px;
}

/* Revertir: el recuadro de slots GENERADOS vuelve a como estaba (sin caja) */
.esc-cal-horario__slots {
    background: transparent; border: 0; border-radius: 0; padding: 0;
    margin: 4px 0 2px 100px;
}

/* Diferenciar el SELECTOR DE DURACIÓN del slot («30 min») de los campos de hora */
.esc-cal-horario__paso {
    border: 2px solid var(--esc-accent) !important;
    background: rgba(15, 157, 234, .08) !important;
    color: var(--esc-navy); font-weight: 700;
}

/* Slots generados: fondo suave con borde fino (la versión que gustó) */
.esc-cal-horario__slots {
    background: #EEF3F8;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    padding: 6px 8px;
    margin: 4px 0 2px;
}

/* =====================================================================
   TARIFAS DE RESERVA
   ===================================================================== */
.esc-tarres-barra { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin: 16px 0 20px; }
.esc-tarres-barra__campo { display: flex; flex-direction: column; gap: 4px; }
.esc-tarres-barra__campo label { font-size: 11px; font-weight: 700; color: var(--esc-text-soft); text-transform: uppercase; }
.esc-tarres-barra__campo select { min-width: 230px; }

.esc-tarres-grid { border: 1px solid var(--esc-border); border-radius: var(--esc-radius); overflow: hidden; background: var(--esc-surface); box-shadow: var(--esc-shadow); }
.esc-tarres-grid__fila { display: grid; grid-template-columns: 130px repeat(4, 1fr); align-items: center; border-bottom: 1px solid var(--esc-border-soft); }
.esc-tarres-grid__fila:last-child { border-bottom: 0; }
.esc-tarres-grid__fila.es-cab { background: #F4F7FA; }
.esc-tarres-grid__fila.es-cab span { padding: 9px 8px; text-align: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--esc-text-soft); letter-spacing: .3px; }
.esc-tarres-grid__rot { padding: 10px 12px; font-weight: 700; }
.esc-tarres-grid__rot.es-valle   { color: #1E7D4B; }
.esc-tarres-grid__rot.es-general { color: var(--esc-text); }
.esc-tarres-grid__rot.es-pico    { color: #B34724; }
.esc-tarres-grid__celda { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px; }
.esc-tarres-grid__celda input { width: 72px; text-align: right; }
.esc-tarres-grid__uni { color: var(--esc-text-soft); font-size: 11px; }

.esc-tarres-guardar { margin-top: 14px; }
.esc-tarres-lote { white-space: nowrap; }

.esc-tarres-extras { margin-top: 28px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.esc-tarres-extras h2 { flex-basis: 100%; margin: 0 0 4px; }
.esc-tarres-euro { display: flex; flex-direction: column; gap: 4px; }
.esc-tarres-euro label { font-size: 11px; font-weight: 700; color: var(--esc-text-soft); text-transform: uppercase; }
.esc-tarres-euro input { width: 120px; }
.esc-tarres-euro__uni { display: none; }

.esc-tarres-lotebox { display: flex; flex-direction: column; gap: 6px; text-align: left; margin-top: 8px; }
.esc-tarres-lotebox__pista { font-weight: 600; }

/* Tarifas: tipos de día como botones seleccionables (azul/blanco) */
.esc-tarres-tipos { margin: 0 0 20px; }
.esc-tarres-tipos > label { display: block; font-size: 11px; font-weight: 700; color: var(--esc-text-soft); text-transform: uppercase; margin-bottom: 6px; }
.esc-tarres-tipos__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.esc-tarres-tipobtn {
    padding: 6px 14px; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--esc-border); background: var(--esc-surface);
    color: var(--esc-text); font-weight: 700; font-size: 12.5px;
}
.esc-tarres-tipobtn.es-activo { background: var(--esc-accent); border-color: var(--esc-accent); color: #fff; }

/* Lote: diálogo más ancho y pistas en columnas iguales con tipo y superficie */
.esc-modal__caja:has(.esc-tarres-lotebox) { max-width: min(860px, 94vw); }
.esc-tarres-lotebox__rej {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 4px 24px; margin-top: 10px; max-height: 56vh; overflow-y: auto;
}
.esc-tarres-lotebox__pista {
    display: grid; grid-template-columns: 16px 68px 78px 84px 22px;
    align-items: center; gap: 10px; font-weight: 600; padding: 3px 0;
}
.esc-tarres-lotebox__n { white-space: nowrap; }
.esc-tarres-lotebox__pista .esc-chip { justify-self: start; }
.esc-tarres-lotebox__pista .esc-luz { justify-self: center; }

/* Etiquetas de color: tipo (indoor/outdoor/semi) y superficie */
.esc-chip {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .2px;
    text-align: center; background: #EEF1F4; color: var(--esc-text-soft); white-space: nowrap;
}
.esc-chip--tipo.es-indoor  { background: rgba(217,83,79,.16); color: #C0392B; }
.esc-chip--tipo.es-outdoor { background: rgba(15,157,234,.16); color: #0B7BB8; }
.esc-chip--tipo.es-semi    { background: #E7EBF0; color: #5A6473; }
.esc-chip--sup.es-tierra   { background: rgba(193,68,14,.16);  color: #B24512; }
.esc-chip--sup.es-dura     { background: rgba(37,99,235,.16);  color: #1D4ED8; }
.esc-chip--sup.es-hierba   { background: rgba(53,194,122,.20); color: #1E7D4B; }
.esc-chip.es-vacio { background: #EEF1F4; color: #9AA5B4; }

/* Botones de tipo de día: lápiz de edición y botón "Nuevo" */
.esc-tarres-tipobtn { display: inline-flex; align-items: center; gap: 7px; }
.esc-tarres-tipobtn__ed { opacity: .55; font-size: 12px; cursor: pointer; }
.esc-tarres-tipobtn__ed:hover { opacity: 1; }
.esc-tarres-tipobtn.es-nuevo {
    background: #fff; border-style: dashed; border-color: var(--esc-green); color: var(--esc-green);
}
.esc-tarres-tipobtn.es-nuevo:hover { background: rgba(118,171,60,.08); }

/* Iconos de luz en el lote */
.esc-luz { display: inline-flex; align-items: center; }
.esc-luz .ph { font-size: 15px; }
.esc-luz.es-natural    { color: #F6A700; }
.esc-luz.es-artificial { color: #0B7BB8; }

/* Botón "Tipos de día" (abre el panel) en Tarifas */
.esc-tarres-tipobtn.es-gestion {
    background: #fff; border-style: dashed; border-color: var(--esc-navy); color: var(--esc-navy);
    display: inline-flex; align-items: center; gap: 6px;
}
.esc-tarres-tipobtn.es-gestion:hover { background: rgba(45,51,73,.06); }

/* Panel lateral de tipos de día (cajón derecho compartido) */
.esc-tdp-velo {
    position: fixed; inset: 0; background: rgba(26,43,60,.28);
    opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 1900000;
}
.esc-tdp-velo.es-visible { opacity: 1; pointer-events: auto; }
.esc-tdp {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 92vw);
    background: var(--esc-surface); box-shadow: -8px 0 28px rgba(45,51,73,.18);
    z-index: 1900001; display: flex; flex-direction: column; padding: 16px;
    transform: translateX(100%); transition: transform .2s ease; overflow-y: auto;
}
.esc-tdp.es-visible { transform: translateX(0); }
.esc-tdp__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.esc-tdp__tit { font-size: 16px; font-weight: 800; color: var(--esc-title); margin: 0; }
.esc-tdp__x { border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--esc-text-soft); }
.esc-tdp__nuevo { width: 100%; margin-bottom: 10px; }
.esc-tdp__ver { display: block; font-size: 12px; color: var(--esc-text-soft); margin-bottom: 12px; }
.esc-tdp__lista { display: flex; flex-direction: column; gap: 6px; }
.esc-tdp-tipo {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid var(--esc-border); border-radius: var(--esc-radius); background: var(--esc-surface);
}
.esc-tdp-tipo.es-retirado { opacity: .55; }
.esc-tdp-tipo__color { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; }
.esc-tdp-tipo__txt { flex: 1; min-width: 0; }
.esc-tdp-tipo__nombre { font-weight: 700; color: var(--esc-text); }
.esc-tdp-tipo__detalle { font-size: 11px; color: var(--esc-text-soft); margin-top: 1px; }
.esc-tdp-tipo__acc { display: flex; gap: 4px; }
.esc-tdp-tipo__btn {
    border: 1px solid var(--esc-border); background: #fff; border-radius: 4px; cursor: pointer;
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--esc-navy);
}
.esc-tdp-tipo__btn:hover { background: var(--esc-navy); border-color: var(--esc-navy); color: #fff; }

/* ---------------------------------------------------------------------------
   Enlace público compartido (Inscripciones / Tarifas de reserva)
   --------------------------------------------------------------------------- */
.esc-enlace { display: flex; flex-direction: column; gap: 12px; }
.esc-enlace__ayuda { margin: 0; }
.esc-enlace__cfg { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--esc-border, #E3E9F0); }
.esc-enlace__cfg-tit { font-size: 13px; font-weight: 700; color: var(--esc-navy, #2D3349); margin-bottom: 6px; }
.esc-enlace__cfg-pie { margin-top: 8px; text-align: right; }
.esc-enlace__fila { display: flex; gap: 8px; align-items: stretch; }
.esc-enlace__url {
    flex: 1 1 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--esc-navy);
    background: var(--esc-surface, #fff);
}
.esc-enlace__copiar { white-space: nowrap; }
.esc-enlace__abrir {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--esc-accent, #0F9DEA);
    font-weight: 600; text-decoration: none;
}
.esc-enlace__abrir:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Criterios de reserva
   --------------------------------------------------------------------------- */
.esc-crit-ambito { margin: 14px 0 6px; }
.esc-crit-heredar { margin: 0 0 10px; }
.esc-crit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
    width: 100%;
    max-width: 980px;
}
.esc-crit-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
    width: 100%;
}
.esc-crit-col { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; }
.esc-crit-copiar { margin-top: 12px; }
@media (max-width: 820px) {
    .esc-crit-cols { grid-template-columns: 1fr; }
}
.esc-crit-form.es-deshab { opacity: .6; }
.esc-crit-bloque {
    width: 100%;
    border: 1px solid var(--esc-border, #E3E9F0);
    border-radius: 10px;
    padding: 16px 18px;
    background: var(--esc-surface, #fff);
    box-shadow: 0 1px 2px rgba(20, 30, 50, .04);
}
.esc-crit-bloque .esc-push-sub { margin: 0 0 4px; }
.esc-crit-bloque .esc-ayuda { margin: 0 0 12px; }
.esc-crit-fila { display: flex; flex-wrap: wrap; gap: 16px 20px; width: 100%; }
.esc-crit-campo { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.esc-crit-campo > label { font-size: 12px; font-weight: 600; color: var(--esc-text-soft, #6A7688); }
.esc-crit-campo .form-control { max-width: 200px; }

.esc-crit-max { display: inline-grid; grid-template-columns: 90px 130px 130px; gap: 6px 10px; align-items: center; }
.esc-crit-max__fila { display: contents; }
.esc-crit-max__fila.es-cab > span {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--esc-text-soft, #6A7688); text-align: center; padding-bottom: 2px;
}
.esc-crit-max__rot { font-size: 13px; font-weight: 600; color: var(--esc-navy, #2D3349); }
.esc-crit-max__celda .form-control { width: 100%; text-align: right; }

/* Reordenar tipos de día por arrastre (panel lateral) */
.esc-tdp__pista-ayuda { margin: 0 0 10px; }
.esc-tdp-tipo { cursor: grab; }
.esc-tdp-tipo__asa {
    display: inline-flex; align-items: center; color: var(--esc-text-soft, #6A7688);
    margin-right: 2px; font-size: 16px; cursor: grab;
}
.esc-tdp-tipo.es-arrastrando { opacity: .45; }
.esc-tdp-tipo.es-sobre { box-shadow: inset 0 2px 0 0 var(--esc-accent, #0F9DEA); }

/* Complementos de reserva (modal) */
.esc-modal__caja:has(.esc-tarres-comp) { max-width: min(680px, 96vw); }
.esc-tarres-comp { width: 100%; }
.esc-tarres-comp__tit { margin: 16px 0 8px; font-size: 13px; font-weight: 800; color: var(--esc-navy, #2D3349); }
.esc-tarres-comp__lista { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 8px; width: 100%; }
.esc-tarres-comp__fila { display: flex; gap: 10px; align-items: center; width: 100%; }
.esc-tarres-comp__fila.es-caract { cursor: pointer; padding: 2px 0; }
.esc-tarres-comp__on { width: 16px; height: 16px; flex: none; }
.esc-tarres-comp__etq { flex: 1 1 auto; font-weight: 600; color: var(--esc-navy, #2D3349); }
.esc-tarres-comp__n { flex: 1 1 auto; min-width: 0; }
.esc-tarres-comp__p { width: 110px; flex: none; text-align: right; }
.esc-tarres-comp__x { flex: none; }
.esc-tarres-comp__add { margin-top: 2px; }

/* Configuración del enlace público de inscripción */
.esc-inscfg { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.esc-inscfg__bloque {
    width: 100%;
    border: 1px solid var(--esc-border, #E3E9F0);
    border-radius: 10px; padding: 14px 16px; background: var(--esc-surface, #fff);
}
.esc-inscfg__tit { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--esc-navy, #2D3349); }
.esc-inscfg__check { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 14px; cursor: pointer; width: 100%; }
.esc-inscfg__check input { width: 16px; height: 16px; flex: none; }
.esc-inscfg__campo { display: flex; flex-direction: column; gap: 4px; max-width: 220px; margin-top: 6px; }
.esc-inscfg__campo > label { font-size: 12px; font-weight: 600; color: var(--esc-text-soft, #6A7688); }
.esc-inscfg__guardar { align-self: flex-start; }

/* ---------------------------------------------------------------------------
   Criterios de reserva — página con mapa a la derecha
   --------------------------------------------------------------------------- */
.esc-crit-pagina { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 20px; align-items: start; }
.esc-crit-lado { min-width: 0; }
.esc-crit-mapa { position: sticky; top: 12px; }
@media (max-width: 1100px) { .esc-crit-pagina { grid-template-columns: 1fr; } .esc-crit-mapa { position: static; } }

.esc-mapa-cab .esc-push-sub { margin: 0 0 2px; }
.esc-mapa-cab .esc-ayuda { margin: 0 0 8px; }
.esc-mapa-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; width: 100%; }
.esc-mapa-barra .btn { flex: 0 0 auto; }
.esc-mapa-barra__txt { flex: 1 1 100%; font-size: 12.5px; color: var(--esc-text-soft, #6A7688); }
.esc-mapa-lienzo { height: 480px; border-radius: 10px; border: 1px solid var(--esc-border, #E3E9F0); overflow: hidden; background: #223; }
.leaflet-tooltip.esc-mapa-etq { background: rgba(20, 26, 46, .82); color: #fff; border: 0; box-shadow: none; font-weight: 700; font-size: 11px; padding: 2px 6px; }
.leaflet-tooltip.esc-mapa-etq::before { display: none; }

/* Punto del recinto (mapa): círculo rojo pequeño en vez del pin por defecto */
.esc-mapa-punto { width: 14px; height: 14px; border-radius: 50%; background: #D9534F; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); box-sizing: border-box; cursor: grab; }

/* Panel de pista bajo el mapa: características + foto */
.esc-mapa-pista { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; width: 100%; }
.esc-mapa-sec { width: 100%; border: 1px solid var(--esc-border, #E3E9F0); border-radius: 10px; padding: 12px 14px; background: var(--esc-surface, #fff); }
.esc-mapa-sec__tit { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--esc-navy, #2D3349); }
.esc-mapa-caract { display: flex; flex-wrap: wrap; gap: 8px 16px; width: 100%; margin-bottom: 12px; }
.esc-mapa-caract__it { display: flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
.esc-mapa-caract__it input { width: 15px; height: 15px; }
.esc-mapa-foto { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
.esc-mapa-foto__acc { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }

/* Cursor de cruz mientras se dibuja el recinto */
.esc-mapa-lienzo.es-dibujando,
.esc-mapa-lienzo.es-dibujando .leaflet-grab,
.esc-mapa-lienzo.es-dibujando .leaflet-interactive,
.esc-mapa-lienzo.es-dibujando .leaflet-container { cursor: crosshair !important; }

/* El cajón de Grupos (#esc-cajon) se abre quitando el atributo [hidden], no con
   la clase is-abierto del cajón deslizante de Asignación. Como ambos comparten
   la clase .esc-cajon (que lo deja fuera de pantalla por defecto), aquí se
   muestra explícitamente cuando NO está hidden. */
#esc-cajon:not([hidden]) { transform: none; visibility: visible; }
/* Ese cajón muestra la tabla ancha de «Alumnos del club» (nombre, apellidos,
   edad, sexo, nivel, días, prefiere) y es de TEMA OSCURO. Una segunda definición
   de .esc-cajon (clara, 400px) lo estrechaba y lo pintaba de blanco (dejando el
   texto claro ilegible); por id le devolvemos su ancho y su fondo oscuro. */
#esc-cajon {
    width: min(690px, 96vw);
    /* Mismos azules y degradado que el Dashboard: fondo azul más oscuro
       (#272C40) con un halo de azul acento arriba a la izquierda; así se ve azul
       y no gris. */
    background:
        radial-gradient(900px 340px at 20% -8%, rgba(15, 157, 234, .10), transparent 60%),
        var(--esc-navy-dark);
    color: #E8EDF5;
    border-left: 0;
    box-shadow: -8px 0 26px rgba(26, 43, 60, .35);
}
/* Cabecera y filtros transparentes, para que se vea el degradado del fondo. */
#esc-cajon .esc-cajon__cab,
#esc-cajon .esc-cajon__filtros { background: transparent; }
/* Columna de fecha de inscripción en el cajón de Alumnos del club. */
.esc-alumno__finsc { font-size: 11px; color: var(--d-suave, #A3AFC6); white-space: nowrap; text-align: right; }

/* Reorganización de Tarifas de reserva: título de pista + grupos a la derecha */
.esc-tarres-pista-tit { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; }
.esc-tarres-pista-tit__n { font-size: 20px; font-weight: 800; color: var(--esc-navy, #2D3349); }
.esc-tarres-pista-tit__s { font-size: 13px; color: var(--esc-text-soft, #6A7688); }
.esc-tarres-tipos__der { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.esc-tarres-barra__der { margin-left: auto; }

/* Etiquetas de complementos de la pista (Tarifas) */
.esc-tarres-comp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.esc-tarres-comp-chip { background: rgba(15,157,234,.12); color: var(--esc-accent, #0F9DEA); border: 1px solid rgba(15,157,234,.3);
    border-radius: 8px; padding: 3px 9px; font-size: 12px; font-weight: 600; }

/* Editor rápido de precios de complementos (Tarifas, bajo la tabla) */
.esc-tarres-compedit { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--esc-border, #E3E9F0); }
.esc-tarres-compedit .esc-push-sub { margin: 0 0 2px; }
.esc-tarres-compedit__row { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; margin: 8px 0; }
.esc-tarres-compedit__row > label { flex: 1 1 auto; font-weight: 600; color: var(--esc-navy, #2D3349); }
.esc-tarres-compedit__row .form-control { width: 90px; flex: none; text-align: right; }

/* ---------------------------------------------------------------------------
   Lista de comprobación de reservas
   --------------------------------------------------------------------------- */
.esc-chk-material { border: 1px solid var(--esc-border, #E3E9F0); border-left: 4px solid var(--esc-accent, #0F9DEA);
    border-radius: 10px; padding: 14px 18px; background: var(--esc-surface, #fff); max-width: 760px; margin: 4px 0 18px; }
.esc-chk-material__tit { font-size: 15px; font-weight: 800; color: var(--esc-navy, #2D3349); margin-bottom: 4px; }
.esc-chk-material__txt { color: var(--esc-text-soft, #6A7688); }
.esc-chk-material__lista { float: none; margin: 8px 0 0; padding-left: 20px; list-style: disc; color: var(--esc-text-soft, #6A7688); }
.esc-chk-material__lista li { float: none; list-style: disc; margin: 3px 0; }
.esc-chk-material { overflow: hidden; }
.esc-ichk-solo { max-width: none; width: 100%; }
.esc-ichk-solo .esc-chk-material { max-width: none; }
.esc-ichk-solo .esc-chk-item__desc { margin: 0 0 8px; }
/* Parte superior dividida: material a la izquierda, estado a la derecha. */
.esc-ichk-top { display: flex; gap: 16px; align-items: stretch; margin: 4px 0 14px; }
.esc-ichk-top > .esc-chk-material { flex: 1 1 auto; min-width: 0; margin: 0; }
.esc-ichk-estado { flex: none; width: 40%; max-width: 620px; min-width: 320px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 20px 22px; border-radius: 10px; border: 1px solid; }
.esc-ichk-estado__icono { font-size: 34px; line-height: 1; }
.esc-ichk-estado__logo { height: 26px; width: auto; object-fit: contain; opacity: .9; margin-bottom: 8px; }
.esc-ichk-estado .esc-chk-enhora__tick { width: 58px; height: 58px; margin: 0 auto 6px; }
.esc-ichk-estado__tit { font-size: 17px; font-weight: 800; margin-top: 8px; }
.esc-ichk-estado__txt { font-size: 13px; line-height: 1.45; margin-top: 4px; }
.esc-ichk-estado.es-rojo { border-color: rgba(214,69,65,.40); background: rgba(214,69,65,.08); color: #C0392B; }
.esc-ichk-estado.es-naranja { border-color: rgba(246,167,0,.45); background: rgba(246,167,0,.10); color: #B26A00; }
.esc-ichk-estado.es-verde { border-color: rgba(118,171,60,.45);
    background: linear-gradient(180deg, rgba(118,171,60,.10), rgba(118,171,60,.03)); color: #5E8E2A; }
.esc-ichk-estado.es-verde .esc-ichk-estado__txt { color: var(--esc-text-soft, #6A7688); }
@media (max-width: 760px) { .esc-ichk-top { flex-direction: column; } .esc-ichk-estado { width: 100%; } }
/* En la Lista de comprobación de Reservas el estado va en columna, por encima
   del vídeo: ocupa todo el ancho de su columna. */
.esc-chk-col > .esc-ichk-estado { width: auto; min-width: 0; max-width: none; margin-bottom: 14px; }

/* Menús principales (títulos verdes de sección) en MAYÚSCULAS, para que se lean
   más claros. Solo afecta a las páginas de la escuela (donde se carga este CSS). */
.title.text-green-300 { text-transform: uppercase; }

/* (El resaltado naranja del ítem activo vive en css/menu_buscador.css, para que
   sea igual en toda la plataforma.) */
/* Cada paso: texto a la izquierda y su vídeo a la derecha, mismas alturas. */
.esc-ichk-lista { display: flex; flex-direction: column; gap: 14px; }
.esc-ichk-fila { display: flex; gap: 16px; align-items: stretch; }
.esc-ichk-fila > .esc-chk-item { flex: 1 1 auto; min-width: 0; margin: 0; }
.esc-ichk-video { flex: none; width: 40%; max-width: 620px; min-width: 320px; display: flex; }
.esc-ichk-video__marco { width: 100%; border-radius: 10px; overflow: hidden; background: #000; }
.esc-ichk-video__marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.esc-ichk-video__vacio { width: 100%; display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 16px; border: 1px dashed var(--esc-border, #D8DEE6); border-radius: 10px;
    color: var(--esc-text-soft, #6A7688); font-size: 13px; background: var(--esc-surface, #fff); }
@media (max-width: 760px) {
    .esc-ichk-fila { flex-direction: column; }
    .esc-ichk-video { width: 100%; }
    .esc-ichk-video__marco, .esc-ichk-video__vacio { aspect-ratio: 16 / 9; min-height: 0; }
}
.esc-chk-intro { color: var(--esc-text-soft, #6A7688); margin: 0 0 6px; }
.esc-chk-prog { font-size: 12.5px; font-weight: 700; color: var(--esc-green, #76AB3C); margin-bottom: 12px; }
.esc-chk-lista { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.esc-chk-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
    border: 1px solid var(--esc-border, #E3E9F0); border-radius: 10px; background: var(--esc-surface, #fff); width: 100%; }
.esc-chk-item.es-hecho { border-color: rgba(118,171,60,.5); background: rgba(118,171,60,.06); }
.esc-chk-tick { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--esc-border, #D8DEE6);
    background: #fff; color: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.esc-chk-item.es-hecho .esc-chk-tick { background: var(--esc-green, #76AB3C); border-color: var(--esc-green, #76AB3C); color: #fff; }
.esc-chk-item__cuerpo { flex: 1 1 auto; min-width: 0; }
.esc-chk-item__tit { font-size: 15px; font-weight: 700; color: var(--esc-navy, #2D3349); }
.esc-chk-item.es-hecho .esc-chk-item__tit { text-decoration: line-through; color: var(--esc-text-soft, #6A7688); }
.esc-chk-item__n { color: var(--esc-accent, #0F9DEA); font-weight: 800; }
.esc-chk-item__desc { color: var(--esc-text-soft, #6A7688); font-size: 13.5px; margin-top: 3px; }
.esc-chk-item__ir { display: inline-block; margin-top: 8px; color: var(--esc-accent, #0F9DEA); font-weight: 600; text-decoration: none; font-size: 13px; }
.esc-chk-item__ir:hover { text-decoration: underline; }

/* Checklist con vídeo a la derecha */
.esc-chk-pagina { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1000px) { .esc-chk-pagina { grid-template-columns: 1fr; } }
.esc-chk-col { min-width: 0; }
.esc-chk-video { border: 1px solid var(--esc-border, #E3E9F0); border-radius: 12px; padding: 14px 16px; background: var(--esc-surface, #fff); position: sticky; top: 12px; }
.esc-chk-video__tit { font-size: 14px; font-weight: 800; color: var(--esc-navy, #2D3349); margin-bottom: 10px; }
.esc-chk-video__marco { position: relative; width: 100%; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
.esc-chk-video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.esc-chk-video__vacio { border: 1px dashed var(--esc-border, #D8DEE6); border-radius: 10px; padding: 28px 14px; text-align: center; color: var(--esc-text-soft, #6A7688); font-size: 13px; }
.esc-chk-video__edit { display: flex; gap: 8px; margin-top: 10px; }
.esc-chk-video__edit .form-control { flex: 1 1 auto; min-width: 0; }

/* Enhorabuena: aparece bajo el vídeo cuando todos los pasos están hechos */
.esc-chk-enhora {
    margin-top: 14px; padding: 22px 18px 24px; text-align: center;
    border: 1px solid rgba(118,171,60,.45); border-radius: 12px;
    background: linear-gradient(180deg, rgba(118,171,60,.10), rgba(118,171,60,.03));
    animation: esc-chk-enhora-in .45s ease both;
}
@keyframes esc-chk-enhora-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.esc-chk-enhora__logo { height: 30px; width: auto; object-fit: contain; opacity: .9; margin-bottom: 12px; }
.esc-chk-enhora__tick { width: 66px; height: 66px; margin: 0 auto 10px; }
.esc-chk-enhora__tick svg { width: 100%; height: 100%; }
.esc-chk-enhora__tick circle { stroke: var(--esc-green, #76AB3C); stroke-width: 3; }
.esc-chk-enhora__tick path {
    stroke: var(--esc-green, #76AB3C); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 48; stroke-dashoffset: 48; animation: esc-chk-tick-draw .5s .2s ease forwards;
}
@keyframes esc-chk-tick-draw { to { stroke-dashoffset: 0; } }
.esc-chk-enhora__tit { font-size: 20px; font-weight: 800; color: var(--esc-green, #5E8E2A); }
.esc-chk-enhora__txt { font-size: 14px; color: var(--esc-text-soft, #6A7688); margin-top: 4px; }

/* =============================================================================
   TARIFAS DE RESERVA · con el lenguaje del banco de ejercicios y Seguimiento
   -----------------------------------------------------------------------------
   Ficha blanca redondeada (12px, sombra en dos capas) con cabecera, barra de
   mandos en gris blanquecino, tabla de cabecera clara y pie. Clases esc-tr-*
   propias: las esc-tarres-* las comparte Criterios de reserva.
   ========================================================================== */
.esc-tr-panel {
    margin-bottom: 20px;
    background: #FFF;
    border: 1px solid #E1E6EA;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(45, 51, 73, .05), 0 12px 28px -20px rgba(45, 51, 73, .35);
    overflow: hidden;
    font-family: var(--esc-font);
}
.esc-tr-panel button:not(.esc-rh-franja *),
.esc-tr-panel input:not(.esc-rh-franja *),
.esc-tr-panel select:not(.esc-rh-franja *) { font-family: inherit; }

/* Cabecera */
.esc-tr-panel__cab {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid #EBEEF1;
}
.esc-tr-quien {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}
.esc-tr-titulo {
    color: var(--esc-title);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.esc-tr-cuenta {
    padding: 2px 9px;
    border-radius: 12px;
    background: #EEF1F4;
    color: var(--esc-text-soft);
    font-size: 11.5px;
    font-weight: 700;
}
.esc-tr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.esc-tr-chip {
    padding: 2px 9px;
    border-radius: 5px;
    background: #E3F2FC;
    color: #0A6FA8;
    font-size: 11.5px;
    font-weight: 700;
}
.esc-tr-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

/* Botones de la ficha: 36px y radio 8, como el banco */
.esc-tr-acciones .btn,
.esc-tr-barra .btn,
.esc-tr-pie .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}
.esc-tr-panel .esc-btn-violeta .ph { margin-right: 0; }

/* Secundarios en contorno (idéntico a .ej-b-contorno del banco) */
.btn.esc-tr-contorno {
    border: 1px solid #C9D1D8;
    background: #FFF;
    color: var(--esc-title);
}
.btn.esc-tr-contorno:hover,
.btn.esc-tr-contorno:focus {
    border-color: var(--esc-accent);
    background: #F3FAFE;
    color: #0A76B0;
}
.btn.esc-tr-contorno .ph { color: var(--esc-accent); }

/* Barra de mandos */
.esc-tr-barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid #EDF0F3;
    background: #FAFBFC;
}
.esc-tr-select {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #DBE0E4;
    border-radius: 8px;
    background: #FFF;
    color: var(--esc-text);
    font-size: 13px;
}
.esc-tr-select:focus {
    border-color: var(--esc-accent);
    box-shadow: 0 0 0 3px rgba(15, 157, 234, .15);
    outline: 0;
}
.esc-tr-barra__rot {
    margin-left: 4px;
    color: var(--esc-text-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.esc-tr-hueco { flex: 1; }

/* Tipos de día: mando único, como el selector de áreas del banco */
.esc-tr-mando {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid #DBE0E4;
    border-radius: 9px;
    background: #FFF;
}
.esc-tr-seg {
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.esc-tr-seg:hover { color: var(--esc-title); }
.esc-tr-seg.es-activo { background: #0A76B0; color: #FFF; }

/* Tabla de precios */
.esc-tr-tabla {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
.esc-tr-tabla thead th {
    padding: 11px 14px;
    border-bottom: 1px solid #E1E6EA;
    background: #F4F6F8;
    color: #6B7480;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.esc-tr-tabla tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #EEF1F4;
    background: #FFF;
    color: var(--esc-text);
    font-size: 13px;
    vertical-align: middle;
}
.esc-tr-tabla th + th,
.esc-tr-tabla td + td { border-left: 1px solid #EDF0F3; }
.esc-tr-tabla tbody tr:last-child td { border-bottom: 0; }
.esc-tr-tabla tbody tr:hover td { background: #F7FBFE; }
.esc-tr-tabla th:first-child,
.esc-tr-tabla td:first-child { width: 1%; white-space: nowrap; }

/* Franjas como etiquetas suaves */
.esc-tr-franja {
    display: inline-block;
    min-width: 64px;
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}
.esc-tr-franja.es-valle   { background: #EAF4DE; color: #4E7F1F; }
.esc-tr-franja.es-general { background: #E3F2FC; color: #0A6FA8; }
.esc-tr-franja.es-pico    { background: #FDF3E0; color: #B7791F; }

/* Campo de precio */
.esc-tr-precio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
}
.esc-tr-euro {
    width: 96px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #DBE0E4;
    border-radius: 8px;
    background: #FFF;
    color: var(--esc-title);
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.esc-tr-euro:focus {
    border-color: var(--esc-accent);
    box-shadow: 0 0 0 3px rgba(15, 157, 234, .15);
    outline: 0;
}
.esc-tr-uni {
    color: var(--esc-text-soft);
    font-size: 11.5px;
    font-weight: 600;
}

/* Vacío: centrado, gris y en cursiva, como el banco */
.esc-tr-vacio {
    padding: 40px 14px;
    color: #9AA3AE;
    font-style: italic;
    text-align: center;
}

/* Pie */
.esc-tr-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid #EDF0F3;
    background: #FAFBFC;
}
.esc-tr-pie__info {
    min-width: 0;
    overflow: hidden;
    color: var(--esc-text-soft);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.esc-tr-pie .btn { margin-left: auto; flex: none; }

/* Complementos y grabación, lado a lado */
.esc-tr-dos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}
.esc-tr-dos .esc-tr-panel { margin-bottom: 0; }

.esc-tr-ayuda {
    margin: 0;
    padding: 12px 18px 0;
    color: var(--esc-text-soft);
    font-size: 12px;
}
.esc-tr-lista { padding: 4px 18px 8px; }
.esc-tr-lista__fila {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid #EEF1F4;
    font-weight: 400;
}
.esc-tr-lista__fila:last-child { border-bottom: 0; }
.esc-tr-lista__nom {
    flex: 1;
    color: var(--esc-title);
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 900px) {
    .esc-tr-dos { grid-template-columns: 1fr; }
    .esc-tr-acciones { margin-left: 0; }
}

/* css/styles.css hace flotar los <p> dentro de .container: la ayuda flotaba y
   tapaba la primera fila de la lista (Luz). */
.esc-tr-panel p,
.esc-tr-ayuda {
    float: none;
    clear: both;
    width: auto;
}

/* «Elige pista:» abre la fila: sin el margen izquierdo de las demás etiquetas. */
.esc-tr-barra__rot.es-primero { margin-left: 0; }

/* =============================================================================
   CRITERIOS DE RESERVA · misma ficha que Tarifas (clases esc-tr-*) más los
   ajustes en columnas (esc-crit2-*)
   ========================================================================== */

/* De dónde salen los valores de la pista: propios o heredados */
.esc-crit2-origen {
    padding: 2px 9px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 700;
}
.esc-crit2-origen.es-propios { background: #EAF4DE; color: #4E7F1F; }
.esc-crit2-origen.es-hereda  { background: #FDF3E0; color: #B7791F; }

.esc-tr-barra .esc-crit-heredar { margin: 0; }

/* Tres ajustes en columnas con divisoria sutil */
.esc-crit2-ajustes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid #E1E6EA;
}
.esc-crit2-ajuste {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 16px 18px;
}
.esc-crit2-ajuste + .esc-crit2-ajuste { border-left: 1px solid #EDF0F3; }
.esc-crit2-ajuste__tit {
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.esc-crit2-ajuste__ayuda {
    color: var(--esc-text-soft);
    font-size: 12px;
    line-height: 1.45;
}
.esc-crit2-ajuste__ctrl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 6px;
}

/* Control con su etiqueta pequeña encima */
.esc-crit2-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-weight: 400;
}
.esc-crit2-campo__rot {
    color: var(--esc-text-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.esc-crit2-campo__fila {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.esc-tr-euro.es-hora { width: 110px; text-align: left; }
.esc-tr-select.es-corto { height: 32px; font-size: 13px; }
.btn.esc-crit2-copiar {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Cabecera de la sección de máximos */
.esc-crit2-sec {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px 10px;
}
.esc-crit2-sec__tit {
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.esc-crit2-sec__ayuda { color: var(--esc-text-soft); font-size: 12px; }
.esc-crit2-form .esc-tr-tabla { border-top: 1px solid #E1E6EA; }
.esc-crit2-periodo { color: var(--esc-title); font-weight: 700; }

/* Heredando: los valores se ven, apagados */
.esc-crit2-form.es-deshab input,
.esc-crit2-form.es-deshab select,
.esc-crit2-form.es-deshab .esc-tr-uni { opacity: .55; }

@media (max-width: 1300px) {
    .esc-crit2-ajustes { grid-template-columns: 1fr; }
    .esc-crit2-ajuste + .esc-crit2-ajuste { border-left: 0; border-top: 1px solid #EDF0F3; }
}

/* --- Criterios · el plano de la instalación, como una ficha más ---------- */
.esc-crit-mapa {
    background: #FFF;
    border: 1px solid #E1E6EA;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(45, 51, 73, .05), 0 12px 28px -20px rgba(45, 51, 73, .35);
    overflow: hidden;
    font-family: var(--esc-font);
}
.esc-crit-mapa:empty { display: none; }

.esc-crit-mapa .esc-mapa-cab {
    padding: 12px 18px;
    border-bottom: 1px solid #EBEEF1;
}
/* css/styles.css hace flotar h2 y p dentro de .container: la cabecera medía 0 */
.esc-crit-mapa .esc-mapa-cab .esc-push-sub,
.esc-crit-mapa .esc-mapa-cab .esc-ayuda {
    float: none;
    width: auto;
}
.esc-crit-mapa .esc-mapa-cab .esc-push-sub {
    margin: 0;
    color: var(--esc-title);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.esc-crit-mapa .esc-mapa-cab .esc-ayuda {
    margin: 4px 0 0;
    color: var(--esc-text-soft);
    font-size: 12px;
}
.esc-crit-mapa .esc-mapa-barra {
    margin: 0;
    padding: 10px 18px;
    border-bottom: 1px solid #EDF0F3;
    background: #FAFBFC;
}
.esc-crit-mapa .esc-mapa-barra__txt { font-size: 12px; }
.esc-crit-mapa .esc-mapa-barra .btn {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
}
.esc-crit-mapa .esc-mapa-lienzo { border-radius: 0; }
.esc-crit-mapa .esc-mapa-pista {
    margin: 0;
    padding: 12px 18px;
    border-top: 1px solid #EDF0F3;
    background: #FAFBFC;
    color: var(--esc-text-soft);
    font-size: 12px;
}

/* =============================================================================
   ESTÁNDAR DE BOTONES · «URL pública» y «Lote»
   ----------------------------------------------------------------------------
   - URL pública / Enlace público: azul oscuro (el marino del módulo) con la
     fuente blanca.
   - Lote: naranja con la fuente blanca.
   ========================================================================== */
.btn.esc-btn-url {
    border: 1px solid #2C3348;
    background: #2C3348;
    color: #FFF;
}
.btn.esc-btn-url:hover,
.btn.esc-btn-url:focus {
    border-color: #1F2536;
    background: #1F2536;
    color: #FFF;
}
.btn.esc-btn-url .ph { color: #FFF; }

.btn.esc-btn-lote {
    border: 1px solid #F69F00;
    background: #F69F00;
    color: #FFF;
}
.btn.esc-btn-lote:hover,
.btn.esc-btn-lote:focus {
    border-color: #DD8E00;
    background: #DD8E00;
    color: #FFF;
}
.btn.esc-btn-lote .ph { color: #FFF; }

/* El «Lote» de Asignación diaria (segmento pegado a la cabecera del nivel),
   también en naranja. */
.esc-asig-lote {
    background: #F69F00;
    color: #FFF;
}
.esc-asig-lote:hover {
    background: #DD8E00;
    color: #FFF;
}

/* =============================================================================
   RESERVAS DE PISTA · en la ficha del módulo (esc-tr-*)
   ----------------------------------------------------------------------------
   Los filtros son los de la Matriz semanal (se piden así), solo que dentro de
   la franja gris de la ficha.
   ========================================================================== */
/* La franja NO lleva .esc-tr-barra: su regla de .btn cambiaba los mandos de
   Semana y Día, que deben verse exactamente como en la Matriz semanal. */
.esc-rh-franja {
    display: block;
    padding: 10px 18px 12px;
    border-bottom: 1px solid #EDF0F3;
    background: #FAFBFC;
}
.esc-rh-franja .esc-matriz-barra { margin: 0; }
.esc-rh-cargando { margin: 0; padding: 30px 18px; text-align: center; }

.esc-rh-t td { white-space: nowrap; }
.esc-rh-t .esc-rh-fecha { color: var(--esc-title); font-weight: 700; }
.esc-rh-t .esc-rh-hora { font-variant-numeric: tabular-nums; }
.esc-rh-t .esc-rh-persona {
    max-width: 260px;
    overflow: hidden;
    color: var(--esc-title);
    font-weight: 600;
    text-overflow: ellipsis;
}
.esc-rh-t .esc-rh-importe {
    color: var(--esc-title);
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.esc-rh-t th:nth-child(6) { text-align: right; }
.esc-rh-t td.esc-rh-acc { width: 1%; text-align: right; }

/* Estado como etiqueta suave, como las del banco */
.esc-rh-etq {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}
.esc-rh-etq + .esc-rh-etq { margin-left: 6px; }
.esc-rh-etq.es-pagada    { background: #EAF4DE; color: #4E7F1F; }
.esc-rh-etq.es-pendiente { background: #FDF3E0; color: #B7791F; }
.esc-rh-etq.es-anulada   { background: #FDEDEC; color: #C0392B; }
.esc-rh-etq.es-reembolso { background: #FDF3E0; color: #B7791F; }

/* Anulada: la fila se apaga */
.esc-rh-t tr.es-anulada td { color: #9AA3AE; }
.esc-rh-t tr.es-anulada .esc-rh-fecha,
.esc-rh-t tr.es-anulada .esc-rh-persona,
.esc-rh-t tr.es-anulada .esc-rh-importe { color: #9AA3AE; }

/* «Anular»: botón limpio como las acciones del banco; rojo al pasar */
.esc-rh-anular {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #DBE0E4;
    border-radius: 8px;
    background: #FFF;
    color: #5B6573;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.esc-rh-anular:hover,
.esc-rh-anular:focus {
    border-color: #D9534F;
    background: #FDEDEC;
    color: #D9534F;
}
.esc-rh-anular:disabled { opacity: .5; cursor: default; }

.esc-rh-panel .esc-tr-pie__info { white-space: normal; }

/* =============================================================================
   EMERGENTE DE PISTAS (Lote de Tarifas / Lote de Criterios / Copiar a otras
   pistas): ordenada y con márgenes iguales
   ----------------------------------------------------------------------------
   Ayuda en franja suave arriba, barra con el contador y «Todas / Ninguna», y
   cada pista como tarjeta con las columnas alineadas; la marcada, en azul.
   ========================================================================== */
.esc-modal__caja:has(.esc-tarres-lotebox) { max-width: min(880px, 94vw); }

.esc-tarres-lotebox {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    text-align: left;
    font-family: var(--esc-font);
}

/* La ayuda (css/styles.css hace flotar los <p>: se anula) */
.esc-tarres-lotebox > .esc-ayuda {
    float: none;
    width: auto;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #E3EEF6;
    border-radius: 8px;
    background: #F3FAFE;
    color: var(--esc-title);
    font-size: 13px;
    line-height: 1.45;
}

/* Barra: contador + Todas / Ninguna */
.esc-lote-sel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}
.esc-lote-sel__n {
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 600;
}
.esc-lote-sel__acc { display: inline-flex; gap: 6px; }
.esc-lote-sel__b {
    height: 28px;
    padding: 0 12px;
    border: 1px solid #C9D1D8;
    border-radius: 7px;
    background: #FFF;
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.esc-lote-sel__b:hover,
.esc-lote-sel__b:focus {
    border-color: var(--esc-accent);
    background: #F3FAFE;
    color: #0A76B0;
}

/* Rejilla de tarjetas */
.esc-tarres-lotebox__rej {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 52vh;
    margin: 0;
    padding: 2px 4px 2px 0;
    overflow-y: auto;
}

.esc-tarres-lotebox__pista {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 78px 70px 18px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #EBEEF1;
    border-radius: 8px;
    background: #FFF;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.esc-tarres-lotebox__pista:hover {
    border-color: #C9D1D8;
    background: #FAFBFC;
}
.esc-tarres-lotebox__pista:has(input:checked) {
    border-color: var(--esc-accent);
    background: #F3FAFE;
}
.esc-tarres-lotebox__pista input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #0A76B0;
    cursor: pointer;
}
.esc-tarres-lotebox__n {
    min-width: 0;
    overflow: hidden;
    color: var(--esc-title);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.esc-tarres-lotebox__pista:has(input:checked) .esc-tarres-lotebox__n { color: #0A76B0; }

/* Etiquetas del mismo ancho, para que las columnas queden alineadas */
.esc-tarres-lotebox__pista .esc-chip {
    justify-self: stretch;
    padding: 3px 0;
    border-radius: 5px;
    text-align: center;
}
.esc-tarres-lotebox__pista .esc-luz { justify-self: center; }

@media (max-width: 640px) {
    .esc-tarres-lotebox__rej { grid-template-columns: 1fr; }
}

/* =============================================================================
   MENSAJES PUSH · fuera los bordes de píldora: el estándar del módulo
   ----------------------------------------------------------------------------
   - Pestañas (Personas / Grupos / Todos y Todos / Sin leer / Leídos): mando
     único como el selector de áreas del banco (un borde, 3px de aire,
     segmento activo en #0A76B0).
   - Etiquetas (nivel, «Sin leer», «Leído»): radio 5px, 11px, negrita.
   ========================================================================== */
.esc-push-comp__destino,
.esc-push-hist-filtros {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    align-self: flex-start;
    padding: 3px;
    border: 1px solid #DBE0E4;
    border-radius: 9px;
    background: #FFF;
}

.esc-push-dest,
.esc-push-filtro {
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.esc-push-dest:hover,
.esc-push-filtro:hover { border-color: transparent; color: var(--esc-title); }
.esc-push-dest.es-activo,
.esc-push-filtro.es-activo {
    border-color: transparent;
    background: #0A76B0;
    color: #FFF;
}

.esc-push-tabla__nivel {
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}

.esc-push-badge {
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}
.esc-push-badge.es-nuevo { background: #E3F2FC; color: #0A6FA8; }
.esc-push-badge.es-leido { background: #EEF1F4; color: #6B7480; }

/* =============================================================================
   ALUMNOS · en la ficha del módulo, con la tabla como la del banco
   ----------------------------------------------------------------------------
   Todo acotado a .esc-alu-panel: las clases de la tabla (esc-alumnos,
   esc-alumno, esc-codigo…) las comparten Grupos, Entrenadores, Inscripciones y
   la Matriz, que no deben cambiar.
   ========================================================================== */

/* Buscador con lupa, como el del banco */
.esc-alu-buscar {
    position: relative;
    flex: 1 1 300px;
    max-width: 420px;
    margin: 0;
}
.esc-alu-buscar .ph {
    position: absolute;
    top: 50%;
    left: 12px;
    color: #9AA3AE;
    font-size: 14px;
    transform: translateY(-50%);
}
.esc-alu-buscar input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    border: 1px solid #DBE0E4;
    border-radius: 8px;
    background: #FFF;
    color: var(--esc-text);
    font-size: 13px;
}
.esc-alu-buscar input:focus {
    border-color: var(--esc-accent);
    box-shadow: 0 0 0 3px rgba(15, 157, 234, .15);
    outline: 0;
}

/* Día y grupo en un mando único */
.esc-alu-mando { align-items: center; }
.esc-alu-mando__sel {
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.esc-alu-mando__sel + .esc-alu-mando__sel {
    border-left: 1px solid #EBEEF1;
    border-radius: 0;
}
.esc-alu-mando__sel:focus { background: #F3FAFE; outline: 0; }

.esc-alu-panel .esc-tr-barra .esc-switch { margin: 0; }
.esc-alu-cargando { margin: 0; padding: 30px 18px; text-align: center; }

/* --- La tabla ------------------------------------------------------------- */
.esc-alu-panel .esc-alumnos--clases { gap: 0; }

.esc-alu-panel .esc-alumnos--clases .esc-alumnos__cab {
    margin: 0;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid #E1E6EA;
    border-radius: 0;
    background: #F4F6F8;
    color: #6B7480;
    font-size: 10.5px;
    letter-spacing: .5px;
}

.esc-alu-panel .esc-alumnos--clases .esc-alumno {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid #EEF1F4;
    border-radius: 0;
    background: #FFF;
    font-size: 13px;
}
.esc-alu-panel .esc-alumnos--clases .esc-alumno:hover {
    border-color: #EEF1F4;
    background: #F7FBFE;
}

.esc-alu-panel .esc-alumno__nombre {
    color: var(--esc-title);
    font-weight: 700;
}

/* Grupos: etiquetas como las del banco (radio 5, 11px), con su color de nivel */
.esc-alu-panel .esc-alumno__clases { gap: 4px; }
.esc-alu-panel .esc-alumno__clases .esc-codigo {
    min-width: 0;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    letter-spacing: .2px;
    text-shadow: none;
}

/* Días: casillas algo mayores y del mismo radio */
.esc-alu-panel .esc-alumnos--clases .esc-diachip {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    font-size: 10.5px;
}

/* Cifras: números limpios (otra regla de la ficha del alumno las encajaba) */
.esc-alu-panel .esc-alumno__cifra {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
}
.esc-alu-panel .esc-cifra { font-size: 13px; }

/* --- El paginador, como pie de la ficha ---------------------------------- */
.esc-alu-panel .esc-paginador {
    margin: 0;
    padding: 12px 18px;
    border-top: 1px solid #EDF0F3;
    background: #FAFBFC;
}
.esc-alu-panel .esc-paginador__cuenta {
    color: var(--esc-text-soft);
    font-size: 12px;
}
.esc-alu-panel .esc-paginador__nav { display: inline-flex; gap: 4px; }
.esc-alu-panel .esc-paginador__btn {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #DBE0E4;
    border-radius: 8px;
    background: #FFF;
    color: var(--esc-text);
    font-size: 12px;
    font-weight: 600;
}
.esc-alu-panel .esc-paginador__btn:hover:not(:disabled) {
    border-color: var(--esc-accent);
    color: #0A76B0;
}
.esc-alu-panel .esc-paginador__btn.is-activa {
    border-color: #0A76B0;
    background: #0A76B0;
    color: #FFF;
    opacity: 1;
}
.esc-alu-panel .esc-paginador__btn:disabled:not(.is-activa) { color: #B4BBC4; }

/* Divisorias verticales de la tabla de Alumnos: una capa encima con líneas
   finas de arriba abajo (las pone alumnos.js midiendo la cabecera), del mismo
   color que las del banco. No atrapa el ratón. */
.esc-alu-panel .esc-alumnos--clases { position: relative; }
.esc-alu-divs {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.esc-alu-div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #EDF0F3;
}

/* Un poco de aire a la izquierda, para que nada quede pegado a la divisoria:
   todos los títulos de la cabecera (menos el del icono) y las celdas de texto
   (nombre, apellidos, teléfono, email, clases y h/temporada). Las centradas
   (edad, sexo, cifras, días) no lo necesitan. */
.esc-alu-panel .esc-alumnos--clases .esc-alumnos__cab > :not(:first-child),
.esc-alu-panel .esc-alumnos--clases .esc-alumno > .esc-alumno__nombre,
.esc-alu-panel .esc-alumnos--clases .esc-alumno > .esc-alumno__apellidos,
.esc-alu-panel .esc-alumnos--clases .esc-alumno > .esc-alumno__tel,
.esc-alu-panel .esc-alumnos--clases .esc-alumno > .esc-alumno__email,
.esc-alu-panel .esc-alumnos--clases .esc-alumno > .esc-alumno__clases,
.esc-alu-panel .esc-alumnos--clases .esc-alumno > .esc-alumno__temporada {
    padding-left: 10px;
}

/* Banners de gráficas (solo en Alumnos): redondeados y con la sombra de las
   fichas del módulo. */
.esc-graficas .esc-grafica {
    border: 1px solid #E1E6EA;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(45, 51, 73, .05), 0 12px 28px -20px rgba(45, 51, 73, .35);
}

/* =============================================================================
   GRUPOS · columna lateral «Alumnos del club» con el tema oscuro del módulo
   ----------------------------------------------------------------------------
   Los colores del menú lateral izquierdo (la paleta .esc-hud, «con los azules
   del menú»): fondo #2D3349, líneas #3C4363, texto #E8EDF5 y suave #A3AFC6,
   con el verde del menú como acento. Antes salía casi negro (#272C40) con filas
   grises translúcidas. Acotado a #esc-cajon: Asignación diaria e Inscripciones
   tienen sus propias columnas.
   ========================================================================== */
#esc-cajon {
    border-left: 1px solid #3C4363;
    background: #2D3349;
    color: #E8EDF5;
}

#esc-cajon .esc-cajon__cab,
#esc-cajon .esc-cajon__pestanas,
#esc-cajon .esc-cajon__pie { border-color: #3C4363; }

#esc-cajon .esc-cajon__titulo { color: #FFF; }
#esc-cajon .esc-cajon__titulo .ph { color: #06FF06; }
#esc-cajon .esc-cajon__ayuda { color: #A3AFC6; }

/* Buscador y selects: el fondo algo más hondo del tema, como los campos del menú */
#esc-cajon .form-control {
    border-color: #3C4363;
    background: #272C40;
    color: #E8EDF5;
}
#esc-cajon .form-control::placeholder { color: #A3AFC6; }
#esc-cajon .form-control:focus {
    border-color: #06FF06;
    box-shadow: 0 0 0 2px rgba(6, 255, 6, .15);
}
#esc-cajon select.form-control option { background: #2D3349; color: #E8EDF5; }

/* Pestañas: la activa con el verde del menú */
#esc-cajon .esc-cajon__pestana { color: #A3AFC6; }
#esc-cajon .esc-cajon__pestana:hover { color: #E8EDF5; }
#esc-cajon .esc-cajon__pestana.is-activa {
    border-bottom-color: #06FF06;
    color: #FFF;
}
#esc-cajon .esc-cajon__pestana-n {
    background: rgba(6, 255, 6, .16);
    color: #06FF06;
}
#esc-cajon .esc-cajon__pestana.is-activa .esc-cajon__pestana-n {
    background: #06FF06;
    color: #1A2B3C;
}

/* La tabla de alumnos: filas en el azul del menú, un punto más claras */
#esc-cajon .esc-alumnos__cab { color: #A3AFC6; }
#esc-cajon .esc-alumno:not(.es-asignado):not(.is-seleccionado) {
    border-color: #3C4363;
    background: #333B58;
    color: #E8EDF5;
}
#esc-cajon .esc-alumno:not(.es-asignado):not(.is-seleccionado):hover {
    border-color: #4A5378;
    background: #3A4263;
}

/* «Cargar más» */
#esc-cajon #esc-cajon-mas {
    border-color: #3C4363;
    background: #272C40;
    color: #E8EDF5;
}
#esc-cajon #esc-cajon-mas:hover { border-color: #06FF06; color: #FFF; }

/* Grupos · el círculo de la agenda de cada grupo, en naranja con el icono blanco */
.esc-grupo-caja__agenda {
    border-color: #F69F00;
    background: #F69F00;
    color: #FFF;
}
.esc-grupo-caja__agenda:hover,
.esc-grupo-caja__agenda:focus {
    border-color: #DD8E00;
    background: #DD8E00;
    color: #FFF;
}
.esc-grupo-caja__agenda .ph { color: #FFF; }

/* =============================================================================
   GRUPOS · cada nivel (GR) como una ficha del módulo
   ----------------------------------------------------------------------------
   Ficha blanca redondeada con la cabecera del nivel en oscuro y, a su
   derecha, el resumen: alumnos, barra de plazas ocupadas (en
   su color; en rojo si se pasa) y el aforo por grupo. Los grupos dentro, con
   raya fina. Acotado a #esc-grupos: Entrenadores e Inscripciones también usan
   .esc-nivel-bloque.
   ========================================================================== */
#esc-grupos .esc-nivel-bloque {
    margin-bottom: 18px;
    border: 1px solid #E1E6EA;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 1px 2px rgba(45, 51, 73, .05), 0 12px 28px -20px rgba(45, 51, 73, .35);
}

#esc-grupos .esc-nivel-bloque__cab {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid #3C4363;
    border-radius: 8px 8px 0 0;
    /* Oscura, para que la cabecera del nivel se distinga bien de las filas de
       grupos (blancas). Todo lo de dentro va en claro para que se lea. */
    background: #4A5470;
    color: #FFF;
}

#esc-grupos .esc-nivel-bloque__cab .esc-codigo { margin-right: 0; border-radius: 5px; text-shadow: none; }

#esc-grupos .esc-nivel-bloque__nombre {
    color: var(--esc-title);
    font-size: 14px;
}

#esc-grupos .esc-nivel-bloque__cuenta {
    padding: 2px 9px;
    border-radius: 12px;
    background: #EEF1F4;
    color: var(--esc-text-soft);
    font-size: 11.5px;
    font-weight: 700;
}

/* Resumen a la derecha */
.esc-nivel-bloque__resumen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-left: auto;
}
.esc-nivel-bloque__alumnos {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--esc-text-soft);
    font-size: 12px;
}
.esc-nivel-bloque__alumnos .ph { color: var(--nivel-color, #C9D2DA); font-size: 14px; }
.esc-nivel-bloque__alumnos strong { color: var(--esc-title); font-size: 13px; }

.esc-nivel-bloque__ocup {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.esc-nivel-bloque__barra {
    position: relative;
    width: 130px;
    height: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: #EEF1F4;
}
.esc-nivel-bloque__barra > span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 99px;
    background: var(--nivel-color, #C9D2DA);
}
.esc-nivel-bloque__ocup.es-pasado .esc-nivel-bloque__barra > span { background: #D9534F; }
.esc-nivel-bloque__pct {
    color: var(--esc-title);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.esc-nivel-bloque__ocup.es-pasado .esc-nivel-bloque__pct { color: #C0392B; }

#esc-grupos .esc-nivel-bloque__aforo {
    color: var(--esc-text-soft);
    font-size: 11.5px;
}

/* Los grupos dentro de la ficha: raya fina, sin cajas ni la raya de color
   lateral (ya la lleva la ficha arriba) */
#esc-grupos .esc-nivel-bloque .esc-grupo-caja {
    margin: 0;
    border: 0;
    border-bottom: 1px solid #EEF1F4;
    border-left: 0 !important;
}
#esc-grupos .esc-nivel-bloque .esc-grupo-caja:last-child {
    border-bottom: 0;
    border-radius: 0 0 12px 12px;
}
#esc-grupos .esc-nivel-bloque > .esc-grupos__vacio { padding: 16px 18px; }

/* Contenido de la cabecera del nivel sobre el fondo oscuro: todo en claro */
#esc-grupos .esc-nivel-bloque__nombre { color: #FFF; }
#esc-grupos .esc-nivel-bloque__cuenta {
    background: rgba(255, 255, 255, .16);
    color: #E8EDF5;
}
#esc-grupos .esc-nivel-bloque__cab .esc-codigo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
#esc-grupos .esc-nivel-bloque__alumnos { color: #D5DCE5; }
#esc-grupos .esc-nivel-bloque__alumnos .ph { color: #E8EDF5; }
#esc-grupos .esc-nivel-bloque__alumnos strong { color: #FFF; }
#esc-grupos .esc-nivel-bloque__barra { background: rgba(255, 255, 255, .20); }
#esc-grupos .esc-nivel-bloque__pct { color: #FFF; }
#esc-grupos .esc-nivel-bloque__ocup.es-pasado .esc-nivel-bloque__barra > span { background: #FF6B61; }
#esc-grupos .esc-nivel-bloque__ocup.es-pasado .esc-nivel-bloque__pct { color: #FF9A92; }
#esc-grupos .esc-nivel-bloque__aforo { color: #C5CEDA; }

/* Grupos · las etiquetas con el número de grupos (la de cada nivel y la de la
   cabecera), con el radio estándar de las etiquetas (5px), no en píldora. */
#esc-grupos .esc-nivel-bloque__cuenta,
#esc-grupos-cuenta {
    padding: 2px 8px;
    border-radius: 5px;
}

/* Los contadores junto al título de cada ficha («144 alumnos», «5 reservas»,
   «Outdoor · Tierra»…), con el radio estándar de las etiquetas, no en píldora. */
.esc-tr-cuenta {
    padding: 2px 8px;
    border-radius: 5px;
}

/* Grupos · el «N grupos» junto al nombre del nivel: más pequeño (la mitad
   exacta, 6px, no se leería) y con la letra en blanco. */
#esc-grupos .esc-nivel-bloque__cuenta {
    padding: 1px 6px;
    color: #FFF;
    font-size: 9px;
    line-height: 1.4;
}

/* =============================================================================
   INSCRIPCIONES · la cabecera en la ficha del módulo
   ----------------------------------------------------------------------------
   Estados como mando único con su cuenta dentro (el activo en #0A76B0), y los
   desajustes con el mismo formato de mando (encendido en ámbar: «no cuadra»).
   Acotado a .esc-ins-panel.
   ========================================================================== */
.esc-ins-panel .esc-ins-pestanas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid #DBE0E4;
    border-radius: 9px;
    background: #FFF;
}
.esc-ins-panel .esc-ins-pestanas .esc-cajon__pestana {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    margin: 0;
    padding: 0 10px 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 600;
}
.esc-ins-panel .esc-ins-pestanas .esc-cajon__pestana:hover { color: var(--esc-title); }
.esc-ins-panel .esc-ins-pestanas .esc-cajon__pestana.is-activa {
    border: 0;
    background: #0A76B0;
    color: #FFF;
}
.esc-ins-panel .esc-ins-pestanas .esc-cajon__cuenta {
    min-width: 0;
    padding: 1px 6px;
    border-radius: 4px;
    background: #EEF1F4;
    color: var(--esc-text-soft);
    font-size: 10.5px;
    font-weight: 700;
}
.esc-ins-panel .esc-ins-pestanas .esc-cajon__cuenta:empty { display: none; }
.esc-ins-panel .esc-ins-pestanas .esc-cajon__pestana.is-activa .esc-cajon__cuenta {
    background: rgba(255, 255, 255, .22);
    color: #FFF;
}

/* Desajustes: etiqueta, mando y el interruptor, en línea */
.esc-ins-panel .esc-ins-desajustes { gap: 10px; }
.esc-ins-panel .esc-desajustes__mando {
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid #DBE0E4;
    border-radius: 9px;
}
.esc-ins-panel .esc-desajustes__mando .esc-desajuste {
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--esc-text-soft);
    font-size: 12px;
    font-weight: 600;
}
.esc-ins-panel .esc-desajustes__mando .esc-desajuste:hover {
    background: transparent;
    color: var(--esc-title);
}
.esc-ins-panel .esc-desajustes__mando .esc-desajuste.is-activa,
.esc-ins-panel .esc-desajustes__mando .esc-desajuste.is-activa:hover {
    background: #FDF3E0;
    color: #B7791F;
}
.esc-ins-panel .esc-desajustes__solo { margin: 0; }

/* =============================================================================
   INSCRIPCIONES · la tabla dentro de la ficha, como las del banco
   ----------------------------------------------------------------------------
   OJO con esta tabla: las bandas, los títulos y las filas son rejillas que
   tienen que caer al píxel unas sobre otras. Por eso las tres capas llevan el
   MISMO relleno lateral (14px) y ninguna borde lateral. Y las columnas que
   marca un desajuste se estiran hasta los bordes de la fila (ver abajo): su
   margen negativo depende del relleno y la raya de la fila.
   Acotado a .esc-ins-panel.
   ========================================================================== */

/* La ficha no recorta: las burbujas de ayuda de la tabla tienen que poder
   salir. Las esquinas se redondean a mano en la primera y la última capa. */
.esc-ins-panel { overflow: visible; }
.esc-ins-panel > .esc-tr-panel__cab { border-radius: 11px 11px 0 0; }
.esc-ins-panel .esc-ins-cargando { margin: 0; padding: 30px 18px; text-align: center; }
.esc-ins-panel .esc-ins-lista { margin: 0; }
.esc-ins-panel .esc-ins-lista > .esc-grupos__vacio { padding: 30px 18px; }

/* Cabecera de la tabla: sin recuadro propio (ya está en la ficha) */
.esc-ins-panel .esc-ins-cabecera {
    margin: 0;
    border: 0;
    border-bottom: 1px solid #E1E6EA;
    border-radius: 0;
    background: #F4F6F8;
}
.esc-ins-panel .esc-ins-bandas {
    padding: 0 14px;
    border-bottom: 1px solid #E1E6EA;
    background: #FFF;
}
.esc-ins-panel .esc-ins-tabla .esc-alumnos__cab {
    padding: 10px 14px;
    color: #6B7480;
    font-size: 10.5px;
    letter-spacing: .5px;
}

/* Filas: sin cajas, raya fina y el mismo relleno lateral que la cabecera */
.esc-ins-panel .esc-ins-tabla .esc-alumno {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid #EEF1F4;
    border-radius: 0;
    background: #FFF;
}
.esc-ins-panel .esc-ins-tabla .esc-alumno:hover {
    border-color: #EEF1F4;
    background: #F7FBFE;
}

/* Columnas marcadas por un desajuste: se estiran hasta los bordes de la fila
   para que la banda baje sin cortes. Antes: 5px de relleno + 1px de borde
   arriba y abajo (margin -6px). Ahora: 10px arriba; 10px + 1px de raya abajo. */
.esc-ins-panel .esc-ins-tabla .esc-alumno > [data-col].es-marcada {
    margin-top: -10px;
    margin-bottom: -11px;
    /* Solo arriba y abajo: el relleno izquierdo de la columna se conserva y
       el contenido no salta al encender el desajuste. */
    padding-top: 10px;
    padding-bottom: 11px;
}

/* Divisorias verticales (las pone inscripciones.js midiendo los títulos) */
.esc-ins-panel .esc-ins-tabla { position: relative; }
.esc-ins-divs {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
.esc-ins-div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #EDF0F3;
}
/* Las rayas de color del corte entre «Lo que pidió» y «Lo que tiene», de arriba
   abajo sin cortes. Van en la capa y no en la celda, que no llega al relleno de
   la fila; la celda se queda sin su sombra para no pintarla dos veces. */
.esc-ins-div.es-pide,
.esc-ins-div.es-tiene { width: 2px; z-index: 1; }
.esc-ins-div.es-pide  { background: #E7C48C; }
.esc-ins-div.es-tiene { background: #A9CCE4; }
.esc-ins-panel .esc-ins-tabla .esc-ins-corte,
.esc-ins-panel .esc-ins-tabla .esc-ins-corte.es-pide,
.esc-ins-panel .esc-ins-tabla .esc-ins-corte.es-tiene { box-shadow: none; }

/* El lapicero de la primera columna y el boton de la ultima, centrados en su
   hueco: del borde de la tabla a la divisoria. La columna es de 26px pero el
   hueco suma ademas los 14px del relleno de la fila y medio espacio entre
   columnas; sin mover, quedaban 5px hacia dentro. */
/* Solo en las filas: las divisorias se miden sobre los titulos, y moviendo
   estos se movian ellas tambien. */
.esc-ins-panel .esc-ins-tabla .esc-alumno > [data-col="editar"]  { position: relative; left: -5px; }
.esc-ins-panel .esc-ins-tabla .esc-alumno > [data-col="colocar"] { position: relative; left: 5px; }

/* Las bandas de color sin huecos blancos entre ellas: el naranja llega hasta
   la raya azul, el azul hasta la divisoria de la ultima columna y el gris
   desde ahi hasta el borde de la tabla (se come el relleno de la fila). */
.esc-ins-panel .esc-ins-banda.es-pide     { margin-right: -7px; }
.esc-ins-panel .esc-ins-banda.es-tiene    { margin-right: -3.5px; }
.esc-ins-panel .esc-ins-banda.es-acciones { margin-left: -3.5px; margin-right: -14px; }

/* El paginador, como pie de la ficha */
.esc-ins-panel .esc-paginador {
    margin: 0;
    padding: 12px 18px;
    border-top: 1px solid #EDF0F3;
    border-radius: 0 0 11px 11px;
    background: #FAFBFC;
}
.esc-ins-panel .esc-paginador__cuenta { color: var(--esc-text-soft); font-size: 12px; }
.esc-ins-panel .esc-paginador__nav { display: inline-flex; gap: 4px; }
.esc-ins-panel .esc-paginador__btn {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #DBE0E4;
    border-radius: 8px;
    background: #FFF;
    color: var(--esc-text);
    font-size: 12px;
    font-weight: 600;
}
.esc-ins-panel .esc-paginador__btn:hover:not(:disabled) { border-color: var(--esc-accent); color: #0A76B0; }
.esc-ins-panel .esc-paginador__btn.is-activa {
    border-color: #0A76B0;
    background: #0A76B0;
    color: #FFF;
    opacity: 1;
}
.esc-ins-panel .esc-paginador__btn:disabled:not(.is-activa) { color: #B4BBC4; }

/* --- Cabecera de la tabla fija al hacer scroll ----------------------------- */
/* Se queda arriba (bandas + títulos) para ver siempre qué es cada columna.
   .app lleva overflow-x:hidden / overflow-y:auto, que la convierte en caja de
   scroll y anula el «sticky»; en esta pantalla se cambia por clip, que recorta
   igual sin crear caja de scroll. */
body:has(.esc-ins-panel) .app {
    overflow-x: clip;
    overflow-y: visible;
}
.esc-ins-panel .esc-ins-cabecera {
    position: sticky;
    top: 0;
    z-index: 6;
    box-shadow: 0 6px 10px -8px rgba(45, 51, 73, .35);
}
/* Las líneas de la fila de títulos viajan dentro de la cabecera */
.esc-ins-cabecera .esc-ins-divs.es-titulos { bottom: 0; }

/* --- Aire a la izquierda de cada columna ---------------------------------- */
/* Que nada quede pegado a las divisorias: todos los títulos (menos los de los
   botones de los extremos) y las celdas de texto y de días. Las de corte ya
   llevan su relleno por la raya de color. */
.esc-ins-panel .esc-ins-tabla .esc-alumnos__cab > [data-col]:not([data-col="editar"]):not([data-col="colocar"]):not(.esc-ins-corte):not([data-col="edad"]):not([data-col="sexo"]):not([data-col="pago"]):not([data-col="diassem"]):not([data-col="puestos"]),
.esc-ins-panel .esc-ins-tabla .esc-alumno > [data-col="nombre"],
.esc-ins-panel .esc-ins-tabla .esc-alumno > [data-col="apellidos"],
.esc-ins-panel .esc-ins-tabla .esc-alumno > [data-col="telefono"],
.esc-ins-panel .esc-ins-tabla .esc-alumno > [data-col="email"],
.esc-ins-panel .esc-ins-tabla .esc-alumno > [data-col="diaspuede"],
.esc-ins-panel .esc-ins-tabla .esc-alumno > [data-col="diasva"] {
    padding-left: 10px;
}
.esc-ins-panel .esc-ins-tabla .esc-ins-corte { padding-left: 10px; }

/* Las columnas estrechas con el valor centrado (edad, sexo, €, y los dos
   «Días/sem»): su título, también centrado y sin el aire izquierdo, que si no
   se sale de la columna. */
.esc-ins-panel .esc-ins-tabla .esc-alumnos__cab > [data-col="edad"],
.esc-ins-panel .esc-ins-tabla .esc-alumnos__cab > [data-col="sexo"],
.esc-ins-panel .esc-ins-tabla .esc-alumnos__cab > [data-col="pago"],
.esc-ins-panel .esc-ins-tabla .esc-alumnos__cab > [data-col="diassem"],
.esc-ins-panel .esc-ins-tabla .esc-alumnos__cab > [data-col="puestos"] {
    justify-content: center;
    padding-left: 0;
    text-align: center;
}

/* La información económica (€), centrada bajo su título. */
.esc-ins-panel .esc-ins-tabla .esc-alumno > [data-col="pago"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Los dos «Días/sem» (lo que pide y lo que tiene), centrados bajo su título. */
.esc-ins-panel .esc-ins-tabla .esc-alumno > [data-col="diassem"],
.esc-ins-panel .esc-ins-tabla .esc-alumno > [data-col="puestos"] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    text-align: center;
}

/* ==========================================================================
   CALENDARIO GENERAL · En la ficha del modulo
   Cabecera (titulo + cuantos calendarios + los dos cajones), franja gris con
   el mando unico calendario/año, lo que es el calendario y los interruptores;
   debajo la paleta, pegada arriba, y los doce meses. Todo con .esc-cal-panel
   delante para no tocar nada de fuera.
   ========================================================================== */

/* Sin recorte: la paleta es sticky y un overflow en la ficha la soltaria.
   Por lo mismo el contenedor de la app no puede recortar en vertical. */
.esc-cal-panel { overflow: visible; }
body:has(.esc-cal-panel) .app { overflow-x: clip; overflow-y: visible; }

.esc-cal-panel .esc-tr-barra .esc-switch { margin: 0; }

/* El mando: calendario | ‹ año › */
.esc-cal-panel .esc-cal-mando { align-items: center; flex-wrap: nowrap; }
.esc-cal-panel .esc-cal-mando__cual { max-width: 380px; }
.esc-cal-panel .esc-cal-mando__ano { padding: 0 4px; }
.esc-cal-panel .esc-cal-mando__cual:disabled { color: var(--esc-text-soft); cursor: default; }
.esc-cal-panel .esc-cal-mando__flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6B7480;
    font-size: 13px;
}
.esc-cal-panel .esc-cal-mando__flecha:hover { background: #F3FAFE; color: #0A76B0; }
/* La raya entre el calendario y el año, la misma que entre dos selects */
.esc-cal-panel .esc-cal-mando__cual + .esc-cal-mando__flecha {
    margin-left: 2px;
    border-left: 1px solid #EBEEF1;
    border-radius: 0;
}
.esc-cal-panel .esc-cal-mando__flecha + .esc-alu-mando__sel { border-left: 0; }

/* Lo que es el calendario: etiquetas de lectura, 36px como los mandos */
.esc-cal-panel .esc-cal-aplicacion,
.esc-cal-panel .esc-cal-temporada,
.esc-cal-panel .esc-cal-avisos {
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-color: #DBE0E4;
    border-radius: 8px;
    font-size: 12px;
}
.esc-cal-panel .esc-cal-aplicacion {
    background: #E3F2FC;
    border-color: #C4E2F5;
    color: #0A6FA8;
}
.esc-cal-panel .esc-cal-aplicacion .ph { font-size: 14px; }
.esc-cal-panel .esc-cal-temporada { background: #FFF; color: var(--esc-title); }
.esc-cal-panel .esc-cal-temporada.es-avisa { background: #FBEDD8; color: #8A5A00; }
.esc-cal-panel .esc-cal-temporada-campo { display: inline-flex; }
.esc-cal-panel .esc-cal-avisos__n { border-radius: 5px; }

/* La paleta: una franja blanca de la ficha, debajo de la gris, que se queda
   arriba al bajar por los meses. */
.esc-cal-panel .esc-cal-paleta {
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-bottom: 1px solid #EDF0F3;
    border-radius: 0;
    background: #FFF;
    box-shadow: 0 6px 10px -8px rgba(45, 51, 73, .35);
}
.esc-cal-panel .esc-cal-paleta__rotulo {
    color: var(--esc-text-soft);
    font-size: 10.5px;
    letter-spacing: .4px;
}
.esc-cal-panel .esc-cal-paleta__rotulo::after { content: ":"; }
.esc-cal-panel .esc-cal-paleta__tipo {
    height: 30px;
    padding: 0 10px;
    border-color: #DBE0E4;
    border-radius: 6px;
    color: var(--esc-title);
    font-family: inherit;
}
.esc-cal-panel .esc-cal-paleta__tipo.is-activa {
    border-color: #0A76B0;
    box-shadow: 0 0 0 3px rgba(15, 157, 234, .15);
}
.esc-cal-panel .esc-cal-paleta__color { border-radius: 4px; }

/* Los doce meses, en el cuerpo de la ficha */
.esc-cal-panel .esc-cal-cuerpo { padding: 18px; }
.esc-cal-panel .esc-cal-cuerpo .esc-cargando { padding: 30px 18px; }

/* Cada mes, una fichita con la cabecera clara de las tablas del banco */
.esc-cal-panel .esc-cal-mes {
    overflow: hidden;
    padding: 0 12px 12px;
    border-color: #E1E6EA;
    border-radius: 10px;
}
.esc-cal-panel .esc-cal-mes__titulo {
    margin: 0 -12px 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #E1E6EA;
    background: #F4F6F8;
    color: var(--esc-title);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.esc-cal-panel .esc-cal-mes__dow { color: #6B7480; }
.esc-cal-panel .esc-cal-dia { border-color: #E6EAEE; border-radius: 4px; }

/* Compacto: lo mismo, con menos aire */
.esc-cal-panel .esc-cal-ano.es-compacto .esc-cal-mes { padding: 0 7px 7px; border-radius: 8px; }
.esc-cal-panel .esc-cal-ano.es-compacto .esc-cal-mes__titulo {
    margin: 0 -7px 5px;
    padding: 5px 7px;
    font-size: 10px;
}
.esc-cal-panel .esc-cal-ano.es-compacto .esc-cal-dia { border-radius: 2px; }

/* Con un cajon lateral abierto, nada de la ficha por encima. El boton que lo
   abre se queda con el foco, y la burbuja de ayuda sube a 1060 lo que tiene
   el foco: por encima del cajon (1040), justo donde cae ahora el boton. */
body:has(#esc-cal-cajon-calendarios:not([hidden])) .esc-cal-panel [data-ayuda],
body:has(#esc-cal-cajon:not([hidden])) .esc-cal-panel [data-ayuda] { z-index: auto; }

/* ==========================================================================
   INSCRIPCIONES · Elegir grupo
   En vez del desplegable del navegador, una lista en columnas: nivel, grupo,
   una columna por dia con la hora de la clase, plazas y si ya esta. Arriba lo
   que pidio, en el ambar de «Lo que pide»; en cada hora, verde si es un dia
   que pidio, gris si no lo pidio y rojo si choca con otra clase suya.
   ========================================================================== */
.esc-ins-elector { margin-bottom: 12px; font-family: var(--esc-font); }

.esc-ins-elector__boton {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #DBE0E4;
    border-radius: 8px;
    background: #FFF;
    color: var(--esc-title);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}
.esc-ins-elector__boton:hover { border-color: #B9C5D2; }
.esc-ins-elector__boton:focus-visible {
    border-color: var(--esc-accent);
    box-shadow: 0 0 0 3px rgba(15, 157, 234, .15);
    outline: 0;
}
.esc-ins-elector.is-abierto .esc-ins-elector__boton {
    border-color: #0A76B0;
    border-radius: 8px 8px 0 0;
}
.esc-ins-elector__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esc-ins-elector__nada { color: var(--esc-text-soft); font-weight: 600; }
.esc-ins-elector__flecha { margin-left: auto; color: #6B7480; transition: transform .15s; }
.esc-ins-elector.is-abierto .esc-ins-elector__flecha { transform: rotate(180deg); }

.esc-ins-elector .esc-ins-elector__nivel { min-width: 40px; margin: 0; border-radius: 5px; }

.esc-ins-elector__panel {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #0A76B0;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #FFF;
    box-shadow: 0 12px 28px -18px rgba(45, 51, 73, .45);
}

/* Lo que pidio */
.esc-ins-elector__pide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid #F0DDBF;
    background: #FBEDD8;
}
.esc-ins-elector__rot {
    color: #8A5A00;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.esc-ins-elector__rot::after { content: ":"; }
.esc-ins-elector__diaspide { display: inline-flex; gap: 3px; }
.esc-ins-elector__diapide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #E8A33D;
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
}
.esc-ins-elector__veces { color: #8A5A00; font-size: 12px; font-weight: 700; }
.esc-ins-elector__leyenda {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-left: auto;
    color: #6B7480;
    font-size: 11px;
}
.esc-ins-elector__leyenda > span { display: inline-flex; align-items: center; gap: 5px; }
.esc-ins-elector__muestra { width: 10px; height: 10px; border: 1px solid; border-radius: 3px; }

/* La rejilla: nivel | grupo | L M X J V S D | plazas | ya esta */
.esc-ins-elector__rejilla {
    display: grid;
    grid-template-columns: 48px minmax(110px, 1fr) repeat(7, 44px) 54px 60px;
    align-items: center;
    column-gap: 4px;
    padding: 0 12px;
}
.esc-ins-elector__cab {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 32px;
    border-bottom: 1px solid #E1E6EA;
    background: #F4F6F8;
    color: #6B7480;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.esc-ins-elector__rejilla .es-centro { text-align: center; justify-self: stretch; }
/* Los dias que pidio, en su ambar: son las columnas donde hay que mirar */
.esc-ins-elector__dia {
    justify-self: center;
    width: 26px;
    padding: 2px 0;
    border-radius: 5px;
    text-align: center;
}
.esc-ins-elector__dia.es-pedido { background: #E8A33D; color: #FFF; }

.esc-ins-elector__epigrafe {
    padding: 7px 12px 5px;
    border-bottom: 1px solid #EEF1F4;
    background: #FAFBFC;
    color: #6B7480;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.esc-ins-elector__fila {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-bottom: 1px solid #EEF1F4;
    background: #FFF;
    color: var(--esc-text);
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}
.esc-ins-elector__fila:hover { background: #F3FAFE; }
.esc-ins-elector__fila:focus-visible { outline: 2px solid var(--esc-accent); outline-offset: -2px; }
.esc-ins-elector__fila.is-elegido { background: #E3F2FC; box-shadow: inset 3px 0 0 #0A76B0; }
.esc-ins-elector__grupo {
    overflow: hidden;
    color: var(--esc-title);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cada dia: la hora de la clase, centrada en su columna */
.esc-ins-elector__celda {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
}
.esc-ins-elector__hora {
    width: 42px;
    padding: 2px 0;
    border: 1px solid;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.esc-ins-elector__hora.es-pedido,
.esc-ins-elector__muestra.es-pedido { border-color: #A9CF7E; background: #EAF5DE; color: #3F6E12; }
.esc-ins-elector__hora.es-ofrece,
.esc-ins-elector__muestra.es-ofrece { border-color: #DBE0E4; background: #F4F6F8; color: #6B7480; }
.esc-ins-elector__hora.es-choca,
.esc-ins-elector__muestra.es-choca  { border-color: #EFBAB5; background: #FBE3E1; color: #9B2C20; }

.esc-ins-elector__plazas { font-weight: 700; }
.esc-ins-elector__plazas.es-libre { color: #3F6E12; }
.esc-ins-elector__plazas.es-lleno { color: #C0392B; }

.esc-ins-elector__esta {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    background: #E1EEF7;
    color: #1E5E86;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* Pistas y horarios · lo de debajo de suelo/exterior/luz (pavimento, aforo,
   wifi, electricidad, cobertura) en una sola fila: chapas mas pequeñas y, si
   aun asi no caben, se acorta el texto con puntos en vez de saltar de linea. */
.esc-pista__rasgos:not(.es-principales) {
    flex-wrap: nowrap;
    gap: 3px;
}
/* Todas a su tamaño menos la marca del pavimento, que es la unica de largo
   libre ("12 TS Match Point"): si no cabe, es la que se acorta, y el nombre
   entero sale en su burbuja. */
.esc-pista__rasgos:not(.es-principales) .esc-rasgo {
    flex: 0 0 auto;
    gap: 2px;
    padding: 1px 4px;
    font-size: 9.5px;
}
.esc-pista__rasgos:not(.es-principales) .esc-rasgo .ph { font-size: 10px; }
.esc-pista__rasgos:not(.es-principales) .esc-rasgo:has(> .ph-ruler) { flex: 0 1 auto; min-width: 0; }

/* Pistas y horarios · la ficha de la pista arriba del cajon del horario, bajo
   el nombre: la modalidad y las caracteristicas de su tarjeta. */
.esc-horario__ficha {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--esc-border-soft);
    background: #FFF;
}
.esc-horario__ficha:empty { display: none; }

/* Pistas y horarios · de donde sale el slot de la rejilla: de «Tipos de día»
   (azul claro, informativo) o de un criterio propio de la pista (ambar, con
   el boton para volver al de los tipos). */
.esc-horario__origen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--esc-border-soft);
    background: #EEF6FC;
    color: #1E5E86;
    font-size: 11.5px;
    line-height: 1.35;
}
.esc-horario__origen:empty { display: none; }
.esc-horario__origen > .ph { font-size: 14px; }
.esc-horario__origen.es-propio { background: #FDF3E0; color: #8A5A00; }
.esc-horario__origen-volver {
    margin-left: auto;
    padding: 3px 9px;
    border: 1px solid #E8A33D;
    border-radius: 6px;
    background: #FFF;
    color: #8A5A00;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.esc-horario__origen-volver:hover { background: #F8E2C0; }

/* Pistas y horarios · el pie de cada tarjeta partido: el horario (70 %) y el
   plano (30 %). Cada boton dice su estado por el color: verde hecho, rojo
   falta. */
.esc-pista__pie {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 6px;
}
.esc-pista__pie .esc-pista__calendario { min-width: 0; white-space: normal; line-height: 1.2; }
.esc-pista__plano {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    color: #FFF;
}
.esc-pista__plano .ph { color: #FFF; font-size: 16px; }
.esc-pista__plano.es-listo { border-color: var(--esc-green-border); background: var(--esc-green); }
.esc-pista__plano.es-falta { border-color: #C0392B; background: var(--esc-danger); }
.esc-pista__plano:hover,
.esc-pista__plano:focus { color: #FFF; filter: brightness(1.07); }

/* Sin franja de color a la izquierda mientras la pista no este terminada: el
   estado ya lo dicen los dos botones. */
#esc-pistas .esc-pista,
#esc-pistas .esc-pista.es-sin-horario,
#esc-pistas .esc-pista.es-no-clases { border-left-width: 1px; border-left-color: var(--esc-border); }
#esc-pistas .esc-pista.es-no-clases { border-left-color: #AEB8C2; }

/* Horario puesto y recinto dibujado: la pista esta terminada. Borde verde
   alrededor y la franja de suelo/exterior/luz en verde. */
#esc-pistas .esc-pista.es-completa {
    border-color: var(--esc-green);
    box-shadow: 0 0 0 3px var(--esc-green), var(--esc-shadow);
}
/* Falta una de las dos cosas (horario o plano): naranja. Faltan las dos: rojo. */
#esc-pistas .esc-pista.es-falta-uno {
    border-color: #F69F00;
    box-shadow: 0 0 0 1px #F69F00, var(--esc-shadow);
}
#esc-pistas .esc-pista.es-falta-todo {
    border-color: #C0392B;
    box-shadow: 0 0 0 3px #C0392B, var(--esc-shadow);
}

.esc-pista.es-completa .esc-pista__rasgos.es-principales {
    border-color: #CFE3B8;
    background: #EAF5DE;
}

/* Las tres etiquetas principales (suelo, exterior, luz) se reparten el ancho
   de la tarjeta a partes iguales. */
.esc-pista__rasgos.es-principales { flex-wrap: nowrap; }
.esc-pista__rasgos.es-principales .esc-rasgo {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
}

/* El cajon del plano: el mapa y lo de la pista, con scroll propio */
.esc-plano__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}
.esc-plano__mapa { width: 100%; }

/* Con un cajon abierto, ningun boton de las tarjetas por encima de el: el que
   lo abre se queda con el foco y la burbuja de ayuda lo subia a 1060. */
body.esc-con-horario #esc-pistas [data-ayuda] { z-index: auto; }

/* La tarjeta cuyo cajon esta abierto se sigue viendo señalada en azul por
   encima del color de su estado. */
#esc-pistas .esc-pista.is-abierta {
    border-color: var(--esc-accent);
    box-shadow: 0 0 0 2px rgba(15, 157, 234, .45), var(--esc-shadow);
}

/* La franja de suelo/exterior/luz, del color del borde de la tarjeta: naranja
   si falta una cosa, rojo si faltan las dos (la verde ya esta arriba). */
#esc-pistas .esc-pista.es-falta-uno .esc-pista__rasgos.es-principales {
    border-color: #F6D08A;
    background: #FDF1DC;
}
#esc-pistas .esc-pista.es-falta-todo .esc-pista__rasgos.es-principales {
    border-color: #EFBAB5;
    background: #FBE6E4;
}

/* Pistas y horarios · aviso de rejilla pintada con «Tipos de día» y boton para
   pintarla asi. */
.esc-horario__origen-precarga {
    flex: 1 1 100%;
    font-weight: 700;
}
.esc-horario__origen-pintar {
    margin-left: auto;
    padding: 3px 9px;
    border: 1px solid #7FB6DD;
    border-radius: 6px;
    background: #FFF;
    color: #1E5E86;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.esc-horario__origen-pintar:hover { background: #DDEEF9; }

/* Pistas y horarios · la cabecera en la ficha del modulo */
.esc-pistas-panel .esc-pistas__cuenta { padding-top: 0; font-size: 12px; }
.esc-pistas-panel .esc-pistas__cuenta-num {
    padding: 2px 8px;
    border-radius: 5px;
    background: #EEF1F4;
    color: var(--esc-title);
    font-size: 12px;
}
/* La «i» ya no va pegada al borde derecho: su burbuja, centrada otra vez */
.esc-pistas-panel .esc-pistas__cuenta .esc-info::after { left: 50%; right: auto; transform: translateX(-50%); }
.esc-pistas-panel .esc-tr-mando { flex-wrap: wrap; }
/* El aviso de «Tipos de día», a la altura de los mandos de la franja */
.esc-pistas-panel .esc-pistas-tipos-campo { display: inline-flex; }
.esc-pistas-panel .esc-cal-avisos {
    height: 36px;
    border-radius: 8px;
    font-family: inherit;
}
.esc-pistas-panel .esc-cal-avisos__n { border-radius: 5px; }

/* ==========================================================================
   TARIFAS Y CUOTAS · la cabecera en la ficha del modulo
   Solo la cabecera: la tabla y los bloques por tipo de clase no se tocan.
   ========================================================================== */
.esc-tar-panel .esc-tr-barra .esc-switch { margin: 0; }

/* Los tres listados en el mando unico: numero + texto en cada segmento */
.esc-tar-panel .esc-tar-mando .esc-tr-seg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--esc-title);
}
.esc-tar-panel .esc-tar-mando .esc-tr-seg:hover { background: #F3FAFE; color: #0A76B0; }
.esc-tar-panel .esc-tar-mando .esc-tr-seg + .esc-tr-seg { border-left: 1px solid #EBEEF1; border-radius: 0; }
.esc-tar-panel .esc-tar-listados__n { margin-right: 0; border-radius: 5px; }

/* El dia de emision: la ultima fila de la ficha, sin caja propia */
.esc-tar-panel .esc-tar-emision {
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 0;
    background: #FFF;
}
.esc-tar-panel .esc-tar-emision.es-sin-decidir { background: #FDF3E0; }
.esc-tar-panel .esc-tar-emision__texto { font-size: 12.5px; }
.esc-tar-panel .esc-tar-emision__control select {
    height: 32px;
    border: 1px solid #DBE0E4;
    border-radius: 8px;
}

/* Tarifas y cuotas · cajon de tipos de clase: los retirados abajo, con su
   titulo, separados de los que estan en uso. */
.esc-tipos__epigrafe {
    margin: 4px 0 2px;
    color: var(--esc-text-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.esc-tipos__epigrafe.es-retirados {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--esc-border);
}
.esc-tipos__epigrafe-ayuda {
    margin: 0 0 4px;
    color: var(--esc-text-soft);
    font-size: 11.5px;
}
/* La plataforma pone float:left a los <p>: los titulos no deben flotar o
   descolocan las filas de debajo. */
.esc-tipos__lista > .esc-tipos__epigrafe,
.esc-tipos__lista > .esc-tipos__epigrafe-ayuda { float: none; width: 100%; }
/* La muestra de color, un cuadrado: con 79px de ancho se comia el nombre. */
#esc-tar-cajon .esc-tipos__color {
    flex: none;
    width: 30px;
    height: 30px;
    padding: 2px;
    border: 1px solid var(--esc-border);
    border-radius: 6px;
    background: #FFF;
    cursor: pointer;
}
/* Y el cajon algo mas ancho: con color, dos chapas, «Poner por defecto» y el
   boton de retirar, a 460px los nombres largos no cabian. */
#esc-tar-cajon.esc-tipos { width: 540px; }

/* ==========================================================================
   TARIFAS Y CUOTAS · las filas de cada tipo de clase con el TEMA OSCURO del
   modulo (los colores del menu lateral: fondo #2D3349, lineas #3C4363, texto
   #E8EDF5, suave #A3AFC6) para que se distingan bien de las tablas blancas.
   Todo lo de dentro va en claro para que se lea sobre el oscuro.
   ========================================================================== */
.esc-tar-bloque { border-color: #3C4363; border-radius: 8px; }

.esc-tar-banda {
    background: #3A4263;
    color: #E8EDF5;
}
.esc-tar-banda:hover { background: #4E5880; }
.esc-tar-banda strong { color: #FFF; }
.esc-tar-banda .ph { color: #A3AFC6; }

/* El cuadro del color del tipo, con un filo claro: sobre el oscuro un morado
   o un azul marino se perdian. */
.esc-tar-banda .esc-cuadro {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
}

/* Etiquetas (por defecto, n tarifas, n grupos) en claro translucido */
.esc-tar-banda .esc-chapa {
    border-color: transparent;
    background: rgba(255, 255, 255, .12);
    color: #E8EDF5;
}
.esc-tar-banda .esc-chapa.esc-chapa--gris { background: rgba(255, 255, 255, .08); color: #A3AFC6; }
/* Con grupos y sin tarifa: el ambar sigue siendo ambar, y bien visible */
.esc-tar-banda .esc-chapa.esc-chapa--aviso {
    background: #F69F00;
    color: #FFF;
}

/* Abierto: el mismo oscuro, con el verde del menu a la izquierda para saber
   cual se esta mirando. */
.esc-tar-bloque.es-abierto .esc-tar-banda {
    border-bottom-color: #3C4363;
    border-radius: 7px 7px 0 0;
    background: #3A4263;
    box-shadow: inset 4px 0 0 #06FF06;
}
.esc-tar-bloque.es-abierto .esc-tar-banda .ph { color: #06FF06; }
.esc-tar-bloque.es-retirado .esc-tar-banda { opacity: .6; }

/* ==========================================================================
   ENTRENADORES Y PROFESORES · en la ficha, con la tabla de Alumnos (las
   reglas de .esc-alu-panel); aqui solo lo propio de sus columnas.
   ========================================================================== */
.esc-pro-panel #esc-pro-lista > .esc-grupos__vacio { margin: 0; padding: 30px 18px; }

/* Aire a la izquierda en las columnas propias (de donde sale y titulacion) */
.esc-pro-panel .esc-alumnos--clases .esc-alumno > .esc-pro-origenes,
.esc-pro-panel .esc-alumnos--clases .esc-alumno > .esc-pro-titulos { padding-left: 10px; }

/* Edad, sexo, grupos y el boton de quitar: centrados bajo su titulo */
.esc-pro-panel .esc-alumnos--clases .esc-alumnos__cab > .es-centro { padding-left: 0; text-align: center; }
.esc-pro-panel .esc-alumnos--clases .esc-alumno > .esc-alumno__edad,
.esc-pro-panel .esc-alumnos--clases .esc-alumno > .esc-alumno__sexo,
.esc-pro-panel .esc-alumnos--clases .esc-alumno > .esc-ins-pedidos { text-align: center; }
.esc-pro-panel .esc-alumnos--clases .esc-alumno > :nth-last-child(2),
.esc-pro-panel .esc-alumnos--clases .esc-alumno > :last-child { display: flex; justify-content: center; }

/* El interruptor de activo, al final de cada fila; los no activos, apagados
   (menos el propio interruptor, que es con lo que se vuelven a activar). */
/* Leyenda de encima de las casillas de permisos: de que banco habla cada
   pareja. Los rotulos de columna son solo «Alta» y «Uso», que repetidos cuatro
   veces no dicen de que; esta banda es la que lo aclara. */
.esc-pro-panel .esc-pro-bandas {
    display: grid;
    grid-template-columns: var(--esc-cols-alumno);
    gap: 0 10px;
    margin-bottom: 2px;
}

.esc-pro-panel .esc-pro-banda {
    padding: 3px 6px;
    border-radius: var(--esc-radius) var(--esc-radius) 0 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-align: center;
    text-transform: uppercase;
}

.esc-pro-panel .esc-pro-banda.es-ejercicios {
    background: #EDEFF3;
    color: #5A6472;
}

.esc-pro-panel .esc-pro-banda.es-sesiones {
    background: #E1EEF7;
    color: #1E5E86;
}

/* Las casillas de permisos, como el interruptor de
   activo: centradas en su columna y sin la opacidad del resto de la fila
   cuando el profesor no esta activo, porque ahi es justo donde se ve que estan
   apagadas a proposito. */
.esc-pro-panel .esc-pro-permiso {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.esc-pro-panel .esc-pro-permiso input {
    margin: 0;
    cursor: pointer;
}

.esc-pro-panel .esc-pro-permiso input:disabled {
    cursor: not-allowed;
}

.esc-pro-panel .esc-pro-activo { align-items: center; }
.esc-pro-panel .esc-pro-activo .esc-switch { margin: 0; }
.esc-pro-panel .esc-alumnos--clases .esc-alumno.es-inactivo > :not(.esc-pro-activo):not(.esc-pro-permiso) { opacity: .45; }
.esc-pro-panel .esc-alumnos--clases .esc-alumno.es-inactivo { background: #FAFBFC; }

/* De donde sale: etiquetas como las del banco (radio 5, 11px) */
.esc-pro-panel .esc-pro-origen { padding: 2px 8px; border-radius: 5px; font-size: 11px; }
/* Aqui la primera columna es el nombre (en Alumnos es un icono): su titulo
   lleva el mismo aire que la celda. */
.esc-pro-panel .esc-alumnos--clases .esc-alumnos__cab > :first-child { padding-left: 10px; }

/* ==========================================================================
   NIVELADO DE GRUPOS · la lista y el formulario en fichas del modulo, la
   tabla como las del banco. Sin cambiar como funciona: se sigue arrastrando
   para reordenar y el formulario sale a la derecha.
   ========================================================================== */

/* Sin formulario abierto, la lista ocupa todo el ancho */
.esc-niveles:has(> #esc-nivel-form[hidden]) { grid-template-columns: minmax(0, 1fr); }

.esc-niv-panel.esc-niveles__lista { overflow: visible; }
.esc-niv-panel .esc-tr-tabla thead th:nth-child(4),
.esc-niv-panel .esc-tr-tabla thead th:nth-child(5),
.esc-niv-panel .esc-tr-tabla thead th:nth-child(6),
.esc-niv-panel .esc-tr-tabla tbody td.esc-tabla__num,
.esc-niv-panel .esc-tr-tabla tbody td:nth-child(6) { text-align: center; }
.esc-niv-panel .esc-tr-tabla tbody tr:last-child td { border-bottom: 0; }

/* El tirador: gris, y a la mano */
.esc-niv-panel .esc-tabla__tirador { color: #9AA3AE; text-align: center; }
.esc-niv-panel .esc-tabla__tirador .ph { cursor: grab; font-size: 16px; }

/* Nombre en negrita y la chapa (GR) con radio 5 */
.esc-niv-panel .esc-tabla__nombre { color: var(--esc-title); font-weight: 700; white-space: nowrap; }
.esc-niv-panel .esc-codigo { border-radius: 5px; }

/* Estado: etiqueta suave como las del banco */
.esc-niv-estado {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
}
.esc-niv-estado.es-activo   { background: #EAF5DE; color: #3F6E12; }
.esc-niv-estado.es-inactivo { background: #EEF1F4; color: #6B7480; }

/* Botones de fila: cuadrados de 30px en contorno */
.esc-niv-panel .esc-tabla__acciones { justify-content: center; gap: 6px; }
.esc-niv-panel .esc-tabla__acciones .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #DBE0E4;
    border-radius: 8px;
    background: #FFF;
    color: #6B7480;
}
.esc-niv-panel .esc-tabla__acciones .btn:hover { border-color: var(--esc-accent); color: #0A76B0; }

/* El formulario, dentro de su ficha */
.esc-niv-form { padding: 16px 18px; }
.esc-niv-panel.esc-niveles__form { overflow: visible; }

/* ==========================================================================
   MATRIZ SEMANAL · la cabecera en la ficha del modulo
   La barra de controles va dentro TAL CUAL (sus dos filas, su orden, sus
   mandos y rotulos): solo se le da el fondo gris de la franja de las fichas.
   ========================================================================== */
/* Sin recorte: las burbujas de ayuda y los desplegables salen de la ficha */
.esc-mat-panel { overflow: visible; }

.esc-mat-panel .esc-matriz-barra {
    margin: 0;
    padding: 12px 18px 14px;
    border-radius: 0 0 12px 12px;
    background: #FAFBFC;
}

/* El aviso del fin de semana, como ultima franja de la ficha */
.esc-mat-panel .esc-matriz-barra:has(+ .esc-aviso-finde:not([hidden])) {
    border-bottom: 1px solid #EDF0F3;
    border-radius: 0;
}
.esc-mat-panel .esc-aviso-finde {
    margin: 0;
    border: 0;
    border-radius: 0 0 12px 12px;
}

/* ==========================================================================
   MATRIZ SEMANAL · la rejilla, solo en lo visual (1, 2 y 3)
   No cambia que se ve ni como funciona: arrastre, huecos, tarjetas, hover,
   celdas cerradas, competiciones y destinos quedan igual.
   ========================================================================== */

/* 1. Enmarcada como una ficha del modulo */
.esc-matriz-envoltorio {
    border-color: #E1E6EA;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(45, 51, 73, .05), 0 12px 28px -20px rgba(45, 51, 73, .35);
}

/* 2. Cada hora, un bloque: la raya entre franjas horarias mas marcada y la
      de entre pistas de una misma hora mas suave. */
.esc-matriz .esc-matriz__hora,
.esc-matriz .esc-matriz__dia {
    border-bottom: 1px solid #C9D1D8;
}
.esc-matriz .esc-matriz__dia > .esc-celda + .esc-celda {
    border-top: 1px dashed #E6EAEE;
}

/* 3. Los huecos libres, mas silenciosos: el rayado mas tenue y el nombre de
      la pista en gris mas claro. Se siguen viendo todos, y los estados de
      arrastre y la fila activa los siguen resaltando igual. */
.esc-matriz .esc-celda--vacia:not(.esc-celda--cerrada):not(.esc-celda--competicion):not(.is-destino):not(.is-destino-ok):not(.is-destino-aviso):not(.is-destino-bloqueado) {
    background: repeating-linear-gradient(
        45deg,
        #FDFDFE,
        #FDFDFE 7px,
        #F7F8FA 7px,
        #F7F8FA 14px
    );
}
.esc-matriz .esc-celda--vacia .esc-celda__pista { color: #AEB6C0; }
.esc-matriz:not(.es-compacta) .esc-celda--vacia .esc-celda__pista { font-size: 9.5px; }

/* Matriz semanal · el mando de tamaño de la rejilla, debajo de «Hora»:
   − , una barrita mini y + , en claro sobre la cabecera oscura. */
.esc-matriz__cab--hora {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
}
.esc-mat-zoom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    padding: 0 4px;
}
.esc-mat-zoom__rot {
    color: #FFF;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}
.esc-mat-zoom__barra {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 12px;
    margin: 0;
    padding: 0;
    accent-color: #06FF06;
    cursor: pointer;
}
/* Un email largo no se monta sobre el telefono: se corta con puntos (el
   enlace lleva el email entero). */
.esc-pro-panel .esc-alumnos--clases .esc-alumno > .esc-alumno__email {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* La columna de activo, lo mas estrecha posible: el titulo en pequeño y sin
   espaciado para que quepa sobre el interruptor. */
.esc-pro-panel .esc-alumnos--clases .esc-alumnos__cab > :last-child {
    padding: 0;
    font-size: 9px;
    letter-spacing: 0;
    overflow: visible;
    white-space: nowrap;
}

/* ==========================================================================
   AVISO: CALENDARIO QUE SE ACABA SIN RELEVO (index_escuela.php)
   Franja ambar arriba de todas las pantallas de la escuela, con la cuenta
   atras de dias bien grande. Se cierra hasta mañana.
   ========================================================================== */
.esc-aviso-cal {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid #F0C27A;
    border-left: 4px solid #F69F00;
    border-radius: 10px;
    background: #FDF3E0;
    color: #6B4500;
    font-size: 12.5px;
    line-height: 1.45;
}
.esc-aviso-cal[hidden] { display: none; }
.esc-aviso-cal__cuenta {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 4px 8px;
    border-radius: 8px;
    background: #F69F00;
    color: #FFF;
    line-height: 1;
}
.esc-aviso-cal__cuenta strong { font-size: 24px; font-weight: 800; }
.esc-aviso-cal__cuenta small { margin-top: 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.esc-aviso-cal__cuenta.es-pasado { background: #C0392B; }
.esc-aviso-cal__texto { flex: 1; min-width: 0; }
.btn.esc-aviso-cal__ir {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #F69F00;
    border-radius: 8px;
    background: #FFF;
    color: #8A5A00;
    font-size: 12.5px;
    font-weight: 700;
}
.btn.esc-aviso-cal__ir:hover { background: #F69F00; color: #FFF; }
.esc-aviso-cal__cerrar {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #8A5A00;
    font-size: 15px;
}
.esc-aviso-cal__cerrar:hover { background: rgba(246, 159, 0, .18); }

/* Dashboard: el acceso discreto a la version movil (index_escuela_movil.php) */
.esc-dash-movil {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding: 6px 12px;
    border: 1px solid var(--esc-border);
    border-radius: 999px;
    background: #fff;
    color: #7A8290;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.esc-dash-movil .ph { font-size: 16px; }
.esc-dash-movil:hover { color: var(--esc-accent); border-color: var(--esc-accent); text-decoration: none; }

/* Barra superior de la escuela web: el boton de la app movil (QR e instrucciones) */
.esc-cabecera-vista { display: flex; align-items: center; }
.esc-cabecera-vista .breadcrumb { flex: 1; min-width: 0; }
.esc-app-movil {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    margin-right: 20px;
    padding: 6px 12px;
    border: 1px solid var(--esc-border);
    border-radius: 999px;
    background: #fff;
    color: #7A8290;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.esc-app-movil .ph { font-size: 16px; }
.esc-app-movil:hover { color: var(--esc-accent); border-color: var(--esc-accent); }
.esc-app-modal__cuerpo { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }
.esc-app-modal__qr { text-align: center; }
.esc-app-modal__qr img { display: block; margin: 0 auto 8px; border: 1px solid var(--esc-border); border-radius: 12px; padding: 8px; background: #fff; }
.esc-app-modal__url { font-size: 12px; font-weight: 700; color: var(--esc-navy, #1F2D4A); word-break: break-all; }
.esc-app-modal__qr p { margin: 8px 0 0; color: #7A8290; font-size: 12px; line-height: 1.4; }
.esc-app-modal__bloque { display: flow-root; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--esc-border); border-radius: 12px; }
/* css/styles.css hace flotar los titulos y las listas dentro de .container: aqui
   no, o el bloque no los envuelve y el borde se queda en una pildora vacia. */
#esc-app-modal .esc-app-modal__bloque h4,
#esc-app-modal .esc-app-modal__bloque ol,
#esc-app-modal .esc-app-modal__qr > *,
#esc-app-modal .esc-app-modal__nota { float: none !important; width: auto; }
.esc-app-modal__bloque h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.esc-app-modal__bloque h4 .ph { font-size: 20px; color: var(--esc-accent); }
.esc-app-modal__bloque ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.esc-app-modal__nota { margin: 0; color: #7A8290; font-size: 12px; line-height: 1.4; }
@media (max-width: 760px) { .esc-app-modal__cuerpo { grid-template-columns: 1fr; } }

/* =============================================================================
   Botones al estilo de la PWA (index_escuela_movil.php): caja redondeada de
   esquinas suaves, borde fino, icono y rotulo; al pasar, el borde y el icono
   toman el acento. Los usan «App movil» y «Version movil».
   ============================================================================= */
.esc-dash-botones { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.esc-boton-pwa,
.esc-boton-pwa.esc-dash-movil,
.esc-boton-pwa.esc-app-movil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    padding: 0 14px 0 11px;
    border: 1px solid #DDE4EF;
    border-radius: 14px;
    background: #fff;
    color: #1F2D4A;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: transform .12s, border-color .12s, color .12s, box-shadow .12s;
}
.esc-boton-pwa .ph { font-size: 19px; color: var(--esc-accent); }
.esc-boton-pwa:hover { border-color: var(--esc-accent); color: var(--esc-accent); text-decoration: none; box-shadow: 0 4px 12px -4px rgba(15, 157, 234, .35); }
.esc-boton-pwa:active { transform: scale(.96); }
/* En la barra del rastro, compacto como los botones de rol de «Mis areas»
   (pildora de 24 px): respira por arriba y por abajo dentro de la barra. */
.esc-rastro-botones { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.esc-cabecera-vista .esc-boton-pwa {
    height: 24px;
    margin: 0;
    padding: 0 10px 0 8px;
    gap: 5px;
    border-radius: 999px;
    font-size: 11px;
    box-shadow: none;
}
.esc-cabecera-vista .esc-boton-pwa .ph { font-size: 13px; }
.esc-dash-botones { flex: none; flex-wrap: nowrap; }
.esc-dash-top { flex-wrap: nowrap; }

/* «Mis areas» en la barra del rastro (la escuela lo trae del menu lateral):
   un contenedor propio, a la derecha de «App movil», con las pildoras de rol
   del mismo tamaño y los colores pensados para la barra clara. */
.esc-mis-areas { display: flex; align-items: center; margin-right: 20px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
/* Con muchas areas, las pildoras se desplazan dentro de su hueco; «App movil» no se mueve */
.esc-rastro-botones { flex: none; }
.esc-mis-areas[hidden] { display: none; }
.esc-rastro-botones + .esc-mis-areas { margin-left: 12px; padding-left: 12px; border-left: 1px solid #DDE4EF; }
.esc-cabecera-vista > .esc-rastro-botones:last-child { margin-right: 20px; }
/* Sin caja: la etiqueta y las pildoras sueltas, en una sola linea */
.esc-mis-areas .cr-roles {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    clear: none;
}
.esc-mis-areas .cr-roles__rot { margin: 0; color: #9AA3B2; font-size: 10px; line-height: 1; letter-spacing: .8px; white-space: nowrap; }
.esc-mis-areas .cr-roles__lista { flex-wrap: nowrap; gap: 4px; }
.esc-mis-areas .cr-rol {
    padding: 3px 8px 3px 6px;
    color: color-mix(in srgb, var(--cr-color) 75%, #000) !important;
    background: color-mix(in srgb, var(--cr-color) 12%, #fff);
    opacity: 1;
}
.esc-mis-areas .cr-rol:hover { background: color-mix(in srgb, var(--cr-color) 22%, #fff); }
.esc-mis-areas .cr-rol.es-actual { color: #fff !important; background: var(--cr-color); }


/* El Dashboard sin la linea del titulo: «App movil», «Version movil» y «Mis
   areas» van en la barra del rastro, y el panel sube y ocupa mas pantalla. La
   linea sigue en la pagina (oculta) porque lleva el boton de avisos, que ya
   estaba oculto en el Dashboard y del que tira su codigo. */
.esc-dash-top { display: none !important; }
/* El mismo hueco arriba que a los lados y abajo (los 15 px del contenedor) */
.esc-dashboard { margin-top: 0; }
/* La barra del rastro flota (float: left del tema) a todo lo ancho: el contenido
   empieza debajo. Sin esto, la rejilla del Dashboard, pegada a la barra, se
   encogia a 0 px de ancho para no pisar el flotante y el panel no se veia. */
.esc-cabecera-vista ~ .container { clear: both; }

/* Las etiquetas de «Mis areas» en la barra: sin sombra y del mismo tamaño
   que «App movil» y «Version movil» (pildora de 24 px, letra de 11 px). */
.esc-mis-areas .cr-rol,
.esc-mis-areas .cr-rol.es-actual {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px 0 8px;
    gap: 5px;
    font-size: 11px;
    line-height: 1;
    box-shadow: none;
}
.esc-mis-areas .cr-rol .ph { font-size: 13px; }

/* Grupos · «Copiar los grupos de …» dentro de Nuevo grupo: en ambar, que se vea */
.esc-grupo-form .esc-btn-copiar-grupos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: #F59E0B;
    color: #fff;
    font-weight: 700;
    white-space: normal;
}
.esc-grupo-form .esc-btn-copiar-grupos:hover,
.esc-grupo-form .esc-btn-copiar-grupos:focus { background: #D97706; color: #fff; }


/* Editar calendario: la «i» junto al nombre, con el id del calendario. Sobre la
   ficha clara, el mismo circulo que .esc-info con borde visible (como el de la
   tabla del grupo), y la burbuja hacia la derecha para no salirse de la ficha. */
.esc-cal-form__rotulo-info {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.esc-cal-form__info.esc-info {
    width: 18px;
    height: 18px;
    border-color: #C3CDDA;
    color: #7A8290;
    font-size: 11px;
}
.esc-cal-form__info.esc-info:hover,
.esc-cal-form__info.esc-info:focus-visible {
    border-color: var(--esc-accent);
    color: var(--esc-accent);
}
.esc-cal-form__info.esc-info::after {
    left: 0;
    transform: none;
    font-weight: 400;
}
.esc-cal-form__id {
    padding: 1px 7px;
    border-radius: 10px;
    background: #EEF1F4;
    color: #7A8290;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Grupos · fecha de inicio y de fin del grupo en el formulario y en la fila */
.esc-grupo-form__fechas { display: flex; align-items: center; gap: 6px; width: 100%; }
.esc-grupo-form__fechas .form-control { flex: 1 1 0; min-width: 0; }
.esc-grupo-form__a { color: #6B7A90; font-size: 12px; }
.esc-grupo-caja__fechas {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 5px;
    background: #EEF2FF;
    color: #4338CA;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* Pistas y horarios · etiquetas de los tipos de día de la escuela: cada uno
   tiene su horario en la pista */
.esc-horario__tipos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.esc-horario__tipos-titulo { color: #6B7A90; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; }
.esc-horario__tipo {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border: 1px solid #DDE4EF; border-radius: 999px;
    background: #fff; color: #1F2D4A; font-size: 12px; font-weight: 600; cursor: pointer;
}
.esc-horario__tipo small { color: #6B7A90; font-weight: 400; }
.esc-horario__tipo:hover { border-color: #0F9DEA; }
.esc-horario__tipo.es-activo { border-color: #1F2D4A; background: #1F2D4A; color: #fff; }
.esc-horario__tipo.es-activo small { color: rgba(255,255,255,.75); }
.esc-horario__tipo-punto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }

/* =============================================================================
   Pistas y horarios · horario por tipos de día: una fila por tipo (horario,
   slot, a qué hora empiezan, slots de la pista, «i» con su año) y la semana
   tal como queda, solo para mirar.
   ============================================================================= */
.esc-horario.es-por-tipos .esc-horario__config,
.esc-horario.es-por-tipos .esc-horario__origen,
.esc-horario.es-por-tipos .esc-horario__rejilla,
.esc-horario.es-por-tipos .esc-horario__leyenda,
.esc-horario.es-por-tipos .esc-horario__copia,
.esc-horario.es-por-tipos #esc-horario-copiar,
.esc-horario.es-por-tipos #esc-horario-deshacer { display: none !important; }
.esc-horario.es-por-tipos .esc-horario__tipos { display: block; }

.esc-hpt {
    display: grid;
    grid-template-columns: minmax(150px, 1.3fr) 90px 60px 96px minmax(180px, 3fr) 28px;
    align-items: center;
    border: 1px solid #DDE4EF;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.esc-hpt > * { padding: 8px 10px; border-bottom: 1px solid #EEF2F7; border-left: 1px solid #EEF2F7; min-width: 0; }
.esc-hpt > *:nth-child(6n+1) { border-left: 0; }
.esc-hpt__cab { background: #F6F8FB; color: #6B7A90; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.esc-hpt__tipo { display: flex; align-items: center; gap: 8px; }
.esc-hpt__tipo strong { display: block; font-size: 12.5px; color: #1F2D4A; }
.esc-hpt__tipo small { display: block; color: #6B7A90; font-size: 11px; }
.esc-hpt__dato { font-size: 12.5px; color: #1F2D4A; }
.esc-hpt .esc-hpt__comienzo { height: 30px; padding: 2px 6px; font-size: 12.5px; }
.esc-hpt__slots { display: flex; flex-wrap: wrap; gap: 4px; }
.esc-hpt__slot {
    padding: 2px 7px; border: 1px solid #BFE3FA; border-radius: 5px;
    background: #E8F5FE; color: #0B5E8E; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.esc-hpt__slot:hover { border-color: #0F9DEA; }
.esc-hpt__slot.es-quitado { border-color: #E5E7EB; background: #F3F4F6; color: #9CA3AF; text-decoration: line-through; }
.esc-hpt__info { color: #6B7A90; font-size: 17px; cursor: help; text-align: center; }
.esc-hpt__info:hover, .esc-hpt__info:focus { color: #0F9DEA; outline: 0; }

.esc-hpt__titulo { margin: 14px 0 6px; color: #6B7A90; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.esc-hpt-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.esc-hpt-semana__dia { border: 1px solid #DDE4EF; border-radius: 8px; background: #fff; padding: 6px; min-width: 0; }
.esc-hpt-semana__dia.es-finde { background: #FAFBFD; }
.esc-hpt-semana__cab { font-size: 11px; font-weight: 700; color: #1F2D4A; text-align: center; margin-bottom: 6px; }
.esc-hpt-semana__bloque { border-left: 3px solid #94A3B8; padding: 2px 0 4px 6px; margin-bottom: 6px; }
.esc-hpt-semana__tipo { font-size: 10.5px; font-weight: 700; color: #475569; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esc-hpt-semana__slot { display: block; font-size: 10.5px; color: #1F2D4A; line-height: 1.6; }
.esc-hpt-semana__vacio { display: block; color: #9CA3AF; font-size: 11px; text-align: center; }

.esc-hpt-anio {
    position: fixed; z-index: 3000; max-width: 560px; padding: 10px;
    border: 1px solid #DDE4EF; border-radius: 10px; background: #fff;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
}
.esc-hpt-anio__titulo { font-size: 12px; font-weight: 700; color: #1F2D4A; margin-bottom: 8px; }
.esc-hpt-anio__meses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.esc-hpt-anio__nmes { font-size: 10px; font-weight: 700; color: #6B7A90; text-transform: uppercase; margin-bottom: 2px; }
.esc-hpt-anio__rej { display: grid; grid-template-columns: repeat(7, 16px); gap: 1px; }
.esc-hpt-anio__dia { width: 16px; height: 14px; font-size: 8.5px; line-height: 14px; text-align: center; color: #94A3B8; border-radius: 3px; }
.esc-hpt-anio__dia.es-suyo { color: #fff; font-weight: 700; }
.esc-hpt-anio__dia.es-fuera { color: #E2E8F0; }
.esc-hpt-anio__pie { margin-top: 8px; font-size: 11px; color: #6B7A90; }

@media (max-width: 900px) {
    .esc-hpt { grid-template-columns: 1fr 1fr; }
    .esc-hpt > * { border-left: 0; }
    .esc-hpt__cab { display: none; }
    .esc-hpt-semana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pistas y horarios · sin tipos de día de escuela con horario */
.esc-hpt-vacio { padding: 14px 16px; border: 1px dashed #F59E0B; border-radius: 8px; background: #FFFBEB; color: #78350F; }
.esc-hpt-vacio strong { display: block; margin-bottom: 4px; }
.esc-hpt-vacio p { margin: 0 0 10px; font-size: 12.5px; }

/* Horario por tipos · cabecera de la tabla: todas las celdas a la misma
   altura, en una línea y centradas en vertical, sin huecos blancos */
.esc-hpt { align-items: stretch; }
.esc-hpt > * { display: flex; align-items: center; }
.esc-hpt > .esc-hpt__slots { flex-wrap: wrap; align-content: center; }
.esc-hpt > .esc-hpt__info { justify-content: center; }
.esc-hpt .esc-hpt__cab {
    min-height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
    line-height: 1.2;
    border-bottom: 1px solid #DDE4EF;
}
.esc-hpt__celda-comienzo .esc-hpt__comienzo { width: 100%; }

/* Pistas y horarios · las características de la tarjeta (pavimento, aforo,
   grada, wifi, electricidad, cobertura) nunca se salen de ella: si no caben
   en una línea, pasan a la siguiente. La marca del pavimento, la única de
   largo libre, se acorta con puntos si hace falta. */
.esc-pista__rasgos:not(.es-principales) {
    flex-wrap: wrap;
    row-gap: 3px;
    min-width: 0;
    max-width: 100%;
}
.esc-pista__rasgos:not(.es-principales) .esc-rasgo:has(> .ph-ruler) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pistas y horarios · las características de la tarjeta, SIEMPRE en dos filas
   partidas por el mismo sitio (1: pavimento, aforo, grada · 2: wifi,
   electricidad, 4G, 5G). Cada fila en una línea y con su alto aunque esté
   vacía, para que todas las tarjetas queden iguales. */
.esc-pista__rasgos-filas { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.esc-pista__rasgos-filas .esc-pista__rasgos.es-fila {
    flex-wrap: nowrap;
    gap: 3px;
    min-height: 18px;
    min-width: 0;
    overflow: hidden;
}
.esc-pista__rasgos-filas .esc-pista__rasgos.es-fila .esc-rasgo { flex: 0 0 auto; }
.esc-pista__rasgos-filas .esc-pista__rasgos.es-fila .esc-rasgo:has(> .ph-ruler) {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grupos · con el lateral de alumnos abierto, la tabla se aparta a la
   izquierda exactamente lo que mide el lateral (lo mide grupos.js), para que
   no quede nada debajo. */
body.esc-con-cajon .app-content .container {
    padding-right: calc(var(--esc-cajon-ancho, 560px) + 15px);
}
@media (max-width: 767px) {
    body.esc-con-cajon .app-content .container { padding-right: 15px; }
}

/* Grupos · los niveles arrancan plegados: la cabecera se pulsa para ver sus
   grupos */
.esc-nivel-bloque__cab.es-plegable { cursor: pointer; user-select: none; }
.esc-nivel-bloque__cab.es-plegable:focus { outline: 2px solid rgba(15, 157, 234, .5); outline-offset: -2px; }
.esc-nivel-bloque__flecha { font-size: 14px; opacity: .8; margin-right: 2px; }
.esc-nivel-bloque.es-plegado { margin-bottom: 6px; }

/* Reservas de pista · Nueva reserva (a mano, desde el club) */
.esc-rm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; min-width: min(560px, 86vw); }
.esc-rm__campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.esc-rm__campo[hidden] { display: none; }
.esc-rm__quien { display: flex; gap: 14px; align-items: center; min-height: 34px; }
.esc-rm__quien label { font-weight: 600; display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.esc-rm__dep { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.esc-rm__dep[hidden] { display: none; }
.esc-rm__elegido { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: #E8F5FE; color: #0B5E8E; font-weight: 700; width: fit-content; }
.esc-rm__elegido[hidden] { display: none; }
.esc-rm__quitar { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.esc-rm__resultados { display: flex; flex-direction: column; gap: 3px; max-height: 180px; overflow: auto; }
.esc-rm__resultado { text-align: left; padding: 6px 8px; border: 1px solid #DDE4EF; border-radius: 6px; background: #fff; font-size: 12.5px; cursor: pointer; }
.esc-rm__resultado:hover { border-color: #0F9DEA; }
.esc-rm__extras { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.esc-rm__check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.esc-rm__total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; border-radius: 8px; background: #F6F8FB; }
.esc-rm__total:empty { display: none; }
.esc-rm__total-t { font-size: 18px; color: #1F2D4A; }
.esc-rm__aviso { grid-column: 1 / -1; color: #B42318; font-weight: 600; font-size: 12.5px; }
.esc-rm__aviso:empty { display: none; }
.esc-rm__reservar { grid-column: 1 / -1; justify-self: end; }
.esc-rm > .esc-rm__check { grid-column: 1 / -1; }
@media (max-width: 640px) { .esc-rm { grid-template-columns: 1fr; } }
/* Nueva reserva: el modal a la medida del formulario */
.esc-modal__caja:has(.esc-rm) { width: min(640px, 94vw); max-width: min(640px, 94vw); }
.esc-rm { min-width: 0; }

/* Nueva reserva · MODO KIOSKO (panel táctil). El interruptor va en la cabecera;
   encendido, la ventana ocupa toda la pantalla en tres columnas (cuándo · dónde
   y qué · quién y cobro) y TODO cabe sin scroll: cada columna reparte su alto
   entre sus bloques según sus filas de pads (--kio-filas, lo pone el JS) y las
   filas se encogen si no caben, hasta 76 px como mucho. Letras, huecos y
   rellenos van con el alto de la pantalla (vh). reserva_manual.js, MODO KIOSKO. */
.esc-kio-cab { float: right; display: inline-flex; align-items: center; gap: 8px; margin: -5px -6px -5px 12px; }
.esc-kio-sw { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #FFF; font: inherit; font-size: 11px; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; }
.esc-kio-sw:hover { background: rgba(255, 255, 255, .16); }
.esc-kio-sw .ph { font-size: 15px; }
.esc-kio-sw__pista { position: relative; flex: none; width: 30px; height: 17px; border-radius: 999px; background: rgba(255, 255, 255, .3); transition: background .15s; }
.esc-kio-sw__bola { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #FFF; transition: transform .15s; }
.esc-kio-sw.es-on .esc-kio-sw__pista { background: #7AC943; }
.esc-kio-sw.es-on .esc-kio-sw__bola { transform: translateX(13px); }
.esc-kio-cerrar { display: none; }
/* El botón violeta de Reservas de pista que abre la reserva ya en kiosko */
.btn.esc-rh-kiosko,
.btn.esc-rh-kiosko:focus { border-color: #6F42C1; background: #6F42C1; color: #FFF; }
.btn.esc-rh-kiosko:hover,
.btn.esc-rh-kiosko:active { border-color: #5A32A3; background: #5A32A3; color: #FFF; }

/* La ventana a toda la pantalla, sin pie (Cerrar sube a la cabecera) */
.esc-modal:has(.esc-rm.es-kiosko) { padding: 6px; }
.esc-modal__caja:has(.esc-rm.es-kiosko) { width: calc(100vw - 12px); max-width: calc(100vw - 12px); height: calc(100vh - 12px); max-height: calc(100vh - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-modal__cab { padding: clamp(8px, 1.2vh, 12px) 14px; font-size: 14px; }
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-kio-cab { margin: -6px -4px; }
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-kio-sw,
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-kio-cerrar { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; background: rgba(255, 255, 255, .1); color: #FFF; font: inherit; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-kio-sw .ph,
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-kio-cerrar .ph { font-size: 18px; }
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-kio-sw__pista { width: 40px; height: 22px; }
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-kio-sw__bola { width: 18px; height: 18px; }
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-kio-sw.es-on .esc-kio-sw__bola { transform: translateX(18px); }
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-modal__pie { display: none; }
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-modal__cuerpo { display: flex; padding: clamp(6px, 1vh, 10px); overflow: hidden; }

.esc-rm.es-kiosko { display: flex; flex: 1; width: 100%; min-width: 0; min-height: 0; }
.esc-rm.es-kiosko > :not(.esc-kio) { display: none !important; }
.esc-kio { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr); gap: clamp(8px, 1vw, 14px); min-width: 0; min-height: 0; }
.esc-kio__col { display: flex; flex-direction: column; gap: clamp(4px, .8vh, 8px); min-width: 0; min-height: 0; overflow: hidden; }
.esc-kio__grupo { display: contents; }
/* Cada bloque, su tarjeta: fondo suave, borde, franja de color a la izquierda
   y título con su icono, en el color del bloque (--kio-c), que es también el
   del pad elegido. El marco (título + relleno + borde: 40 px) va en el tope. */
.esc-kio-bloque { --kio-c: #0F9DEA; display: flex; flex-direction: column; flex: var(--kio-filas, 1) 1 0; min-height: 0; max-height: calc(var(--kio-filas, 1) * 76px + (var(--kio-filas, 1) - 1) * 6px + 40px); padding: clamp(4px, .7vh, 8px) clamp(6px, .6vw, 9px) clamp(5px, .8vh, 9px) clamp(9px, .8vw, 12px); border: 1px solid color-mix(in srgb, var(--kio-c) 22%, #E1E7EF); border-left: 4px solid var(--kio-c); border-radius: 12px; background: color-mix(in srgb, var(--kio-c) 6%, #F7F9FC); }
.esc-kio-bloque.es-dias   { --kio-c: #0F9DEA; }
.esc-kio-bloque.es-horas  { --kio-c: #7048E8; }
.esc-kio-bloque.es-dur    { --kio-c: #E8590C; }
.esc-kio-bloque.es-pista  { --kio-c: #2F9E44; }
.esc-kio-bloque.es-mod    { --kio-c: #1098AD; }
.esc-kio-bloque.es-extras { --kio-c: #D6336C; }
.esc-kio-bloque.es-quien  { --kio-c: #4263EB; }
.esc-kio-bloque.es-dep    { --kio-c: #0B7285; }
.esc-kio-bloque.es-cobro  { --kio-c: #5C940D; }
.esc-kio-bloque__tit { display: flex; flex: none; align-items: center; gap: 6px; margin: 0 0 clamp(3px, .5vh, 6px); color: var(--kio-c); font-size: 12px; font-weight: 800; line-height: 18px; letter-spacing: .6px; text-transform: uppercase; }
.esc-kio-bloque__tit .ph { font-size: 17px; }
.esc-kio-bloque .esc-kio-pad.es-activo:not(.es-toggle) { border-color: var(--kio-c); background: var(--kio-c); box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--kio-c) 80%, transparent); }
.esc-kio-pads { flex: 1; display: grid; grid-auto-rows: minmax(0, 1fr); gap: clamp(4px, .6vh, 6px); min-height: 0; }
.esc-kio-pad { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 0; padding: 2px 6px; overflow: hidden; border: 2px solid #DDE4EF; border-radius: 10px; background: #FFF; color: #1A2B3C; font-size: clamp(12px, 1.25vh + .25vw, 17px); font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transition: transform .08s, background .12s, border-color .12s; }
.esc-kio-pad:hover { border-color: #0F9DEA; }
.esc-kio-pad:active { transform: scale(.97); }
.esc-kio-pad__t { display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.esc-kio-pad__s { max-width: 100%; overflow: hidden; color: #6B7480; font-size: clamp(10px, .9vh + .15vw, 12.5px); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.esc-kio-pad.es-activo { border-color: #0F9DEA; background: #0F9DEA; color: #FFF; box-shadow: 0 4px 12px -6px rgba(15, 157, 234, .7); }
.esc-kio-pad.es-activo .esc-kio-pad__s { color: rgba(255, 255, 255, .85); }
.esc-kio-pad.es-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 10px; padding: 2px 12px; text-align: left; }
.esc-kio-pad.es-toggle .ph { grid-row: 1 / span 2; align-self: center; font-size: clamp(20px, 2.6vh, 28px); }
.esc-kio-pad.es-toggle .esc-kio-pad__t,
.esc-kio-pad.es-toggle .esc-kio-pad__s { grid-column: 2; }
.esc-kio-pad.es-toggle .esc-kio-pad__t { -webkit-line-clamp: 1; }
.esc-kio-pad.es-toggle.es-activo { border-color: #6BA539; background: #EAF4DE; color: #2F5512; box-shadow: none; }
.esc-kio-pad.es-toggle.es-activo .esc-kio-pad__s { color: #4E7F1F; }
.esc-kio-pad.es-importe.es-activo { border-color: #0F9DEA; background: #E3F2FC; color: #0A6FA8; }
.esc-kio-pad.es-importe.es-activo .esc-kio-pad__s { color: #0A6FA8; font-size: clamp(13px, 1.4vh, 16px); font-weight: 800; }
.esc-kio-fecha { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.esc-kio-nada { grid-column: 1 / -1; align-self: center; padding: 6px; color: #8A939E; font-size: 14px; font-style: italic; }

/* Columna de quién y cobro: el buscador, el socio y el pie con el total y Reservar */
.esc-kio__dep,
.esc-kio__fin { flex: none; display: flex; flex-direction: column; gap: clamp(4px, .8vh, 8px); }
.esc-kio__dep.esc-kio-bloque { flex: none; max-height: none; gap: clamp(4px, .7vh, 7px); }
.esc-kio__dep[hidden] { display: none; }
.esc-kio__fin { margin-top: auto; }
.esc-kio__socio[hidden] { display: none; }
.esc-kio__socio .esc-kio-pad { width: 100%; height: clamp(40px, 6vh, 58px); }
.esc-kio .esc-rm__dep { position: relative; gap: 0; }
.esc-kio .esc-rm__dep input[type="search"] { height: clamp(40px, 6vh, 58px); padding: 0 14px; border-radius: 10px; font-size: clamp(15px, 1.8vh, 19px); }
.esc-kio .esc-rm__dep > .esc-rm__check { display: none; }
.esc-kio .esc-rm__resultados { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 6; max-height: 55vh; gap: 6px; padding: 6px; border-radius: 12px; background: #FFF; box-shadow: 0 18px 40px -12px rgba(26, 43, 60, .45); }
.esc-kio .esc-rm__resultados:empty { display: none; }
.esc-kio .esc-rm__resultado { flex: none; min-height: 52px; padding: 8px 14px; border-width: 2px; border-radius: 10px; font-size: 15px; }
.esc-kio .esc-rm__elegido { box-sizing: border-box; width: 100%; height: clamp(40px, 6vh, 58px); justify-content: space-between; padding: 0 14px; border-radius: 10px; font-size: clamp(14px, 1.7vh, 18px); }
.esc-kio .esc-rm__quitar { padding: 0 0 0 8px; font-size: 24px; }
.esc-kio .esc-rm__aviso { display: -webkit-box; overflow: hidden; font-size: clamp(12px, 1.4vh, 15px); line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.esc-kio .esc-rm__aviso:empty { display: none; }
.esc-kio .esc-rm__total { align-items: center; padding: clamp(4px, .9vh, 10px) 14px; border-radius: 10px; font-size: clamp(12px, 1.4vh, 15px); }
.esc-kio .esc-rm__total-t { font-size: clamp(20px, 3vh, 30px); }
.esc-kio .esc-rm__reservar { width: 100%; height: clamp(48px, 8vh, 76px); padding: 0; border-radius: 12px; font-size: clamp(18px, 2.6vh, 24px); font-weight: 800; }

/* El teclado del importe, en una capa encima (no ocupa sitio en la columna) */
.esc-kio-tec { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 12px; background: rgba(26, 43, 60, .45); }
.esc-kio-tec[hidden] { display: none; }
.esc-kio-tec__panel { display: flex; flex-direction: column; gap: 8px; width: min(440px, 100%); max-height: 100%; padding: 14px; border-radius: 18px; background: #FFF; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .5); }
.esc-kio-tec__teclas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(44px, 7.5vh, 68px); gap: 6px; min-height: 0; }
.esc-kio-tec__teclas .es-tecla { grid-column: span 2; font-size: clamp(20px, 3vh, 28px); }
.esc-kio-tec__teclas .es-ancho { grid-column: span 3; font-size: clamp(13px, 1.6vh, 16px); }
.esc-kio-tec .es-listo { height: clamp(44px, 7vh, 64px); border-color: #6BA539; background: #6BA539; color: #FFF; font-size: 20px; }
.esc-kio-importe { padding: 8px 16px; border: 2px solid #DDE4EF; border-radius: 12px; background: #F6F8FB; color: #1F2D4A; font-size: clamp(22px, 3.4vh, 32px); font-weight: 800; text-align: right; }
.esc-kio-importe.es-vacio { color: #8A939E; font-size: clamp(16px, 2.2vh, 20px); }

/* El kiosko va en OSCURO, como la app desde la que se abre: fondo navy, tarjetas
   tintadas con el color de cada bloque y pads oscuros; el pad elegido sigue
   macizo en su color. Solo con el modo kiosko encendido: la ventana normal no cambia. */
.esc-modal__caja:has(.esc-rm.es-kiosko) { background: #161B29; color: #E6EBF3; color-scheme: dark; }
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-modal__cab { background: #10141F; border-bottom: 1px solid #2A3247; }
.esc-modal__caja:has(.esc-rm.es-kiosko) .esc-modal__cuerpo { background: #161B29; }
.esc-rm.es-kiosko .esc-kio-bloque { border-color: color-mix(in srgb, var(--kio-c) 30%, #2A3247); background: color-mix(in srgb, var(--kio-c) 9%, #1E2435); }
.esc-rm.es-kiosko .esc-kio-bloque__tit { color: color-mix(in srgb, var(--kio-c) 70%, #FFF); }
.esc-rm.es-kiosko .esc-kio-pad { border-color: #343D55; background: #252C40; color: #E6EBF3; }
.esc-rm.es-kiosko .esc-kio-pad:hover { border-color: color-mix(in srgb, var(--kio-c, #0F9DEA) 70%, #FFF); }
.esc-rm.es-kiosko .esc-kio-pad__s { color: #9AA5B8; }
.esc-rm.es-kiosko .esc-kio-pad.es-activo { color: #FFF; }
.esc-rm.es-kiosko .esc-kio-pad.es-activo .esc-kio-pad__s { color: rgba(255, 255, 255, .85); }
.esc-rm.es-kiosko .esc-kio-pad.es-toggle.es-activo { border-color: #6BA539; background: #263A1C; color: #CDEBB0; }
.esc-rm.es-kiosko .esc-kio-pad.es-toggle.es-activo .esc-kio-pad__s { color: #A5CF7E; }
.esc-rm.es-kiosko .esc-kio-pad.es-importe.es-activo { border-color: #0F9DEA; background: #12324A; color: #8FD0F7; }
.esc-rm.es-kiosko .esc-kio-pad.es-importe.es-activo .esc-kio-pad__s { color: #8FD0F7; }
.esc-rm.es-kiosko .esc-kio-nada { color: #8792A6; }
/* !important: en el teléfono la capa móvil (movil_capa.css) pinta los campos en claro con más peso */
.esc-rm.es-kiosko .esc-rm__dep input[type="search"] { border-color: #343D55 !important; background: #252C40 !important; color: #E6EBF3 !important; }
.esc-rm.es-kiosko .esc-rm__dep input[type="search"]::placeholder { color: #8792A6; }
.esc-rm.es-kiosko .esc-rm__resultados { background: #1E2435; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.esc-rm.es-kiosko .esc-rm__resultado { border-color: #343D55; background: #252C40; color: #E6EBF3; }
.esc-rm.es-kiosko .esc-rm__resultado:hover { border-color: #0F9DEA; }
.esc-rm.es-kiosko .esc-rm__elegido { background: #12324A; color: #8FD0F7; }
.esc-rm.es-kiosko .esc-rm__total { background: #1E2435; color: #C5CDDB; }
.esc-rm.es-kiosko .esc-rm__total-t { color: #FFF; }
.esc-rm.es-kiosko .esc-rm__aviso { color: #FF8A80; }
.esc-rm.es-kiosko .esc-kio-tec { background: rgba(0, 0, 0, .55); }
.esc-rm.es-kiosko .esc-kio-tec__panel { background: #1E2435; }
.esc-rm.es-kiosko .esc-kio-importe { border-color: #343D55; background: #252C40; color: #FFF; }
.esc-rm.es-kiosko .esc-kio-importe.es-vacio { color: #8792A6; }

/* Desde el acceso directo «Reservar pista kiosko» (?kiosko=1): kiosko fijo, sin la barra de arriba (ni título, ni
   interruptor, ni Cerrar) y a toda la pantalla */
.esc-modal:has(.esc-rm.es-fijo) { padding: 0; }
.esc-modal__caja:has(.esc-rm.es-fijo) { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; }
.esc-modal .esc-modal__caja:has(.esc-rm.es-fijo) .esc-modal__cab { display: none; }
/* El botón flotante del login único (cuadraditos, #lnb-boton), por encima de la ventana (z-index 1070); por debajo del
   mapa de ocupación */
html:has(.esc-rm.es-fijo) #lnb-boton { z-index: 1080; }

/* En un teléfono no caben tres columnas: una, con scroll */
@media (max-width: 900px) {
    .esc-modal__caja:has(.esc-rm.es-kiosko) .esc-modal__cuerpo { overflow-y: auto; }
    /* La ventana hace scroll y los bloques no se encogen: sin esto las tres columnas, apiladas, se repartían el alto
       de la pantalla (min-height 0) y se montaban unas encima de otras */
    .esc-modal__caja:has(.esc-rm.es-kiosko) .esc-modal__cuerpo { overflow-x: hidden; }
    .esc-rm.es-kiosko { align-self: flex-start; min-height: auto; }
    .esc-kio { min-height: auto; }
    .esc-kio { grid-template-columns: minmax(0, 1fr); align-content: start; }
    .esc-kio__col { overflow: visible; min-height: auto; }
    .esc-kio__fin { margin-top: 0; }
    /* La cabecera: el título y, en su propia fila, el kiosko y Cerrar (antes flotaban encima del título) */
    .esc-modal__caja:has(.esc-rm.es-kiosko) .esc-modal__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
    .esc-modal__caja:has(.esc-rm.es-kiosko) .esc-kio-cab { float: none; margin: 0 0 0 auto; }
    .esc-modal__caja:has(.esc-rm.es-kiosko) .esc-kio-sw,
    .esc-modal__caja:has(.esc-rm.es-kiosko) .esc-kio-cerrar { height: 34px; padding: 0 10px; font-size: 12px; }
    .esc-kio-bloque { flex: none; max-height: none; }
    .esc-kio-pads { grid-auto-rows: 56px; }
    /* PASO A PASO (reserva_manual.js, aplicarPasos): una sola columna en el orden de elegir (día, hora, pista,
       duración, modalidad, extras, para quién, deportista y cobro); lo que aún no toca no se ve y lo elegido se pliega
       a su título con lo elegido */
    .esc-kio__col { display: contents; }
    .esc-kio [data-paso="es-dias"]  { order: 1; }
    /* Desde el 21-10-2026, la hora antes que la pista (reserva_manual.js, KIO_ORDEN) */
    .esc-kio [data-paso="es-horas"] { order: 2; }
    .esc-kio [data-paso="es-pista"] { order: 3; }
    .esc-kio [data-paso="es-dur"]   { order: 4; }
    .esc-kio [data-paso="es-mod"]   { order: 5; }
    .esc-kio [data-paso="es-extras"] { order: 6; }
    .esc-kio [data-paso="es-quien"] { order: 7; }
    .esc-kio [data-paso="es-dep"]   { order: 8; }
    .esc-kio [data-paso="es-cobro"] { order: 9; }
    .esc-kio__fin { order: 10; }
    .esc-kio .es-oculto { display: none !important; }
    .esc-kio-bloque.es-plegado { cursor: pointer; padding-top: 8px; padding-bottom: 8px; }
    .esc-kio-bloque.es-plegado > :not(.esc-kio-bloque__tit) { display: none !important; }
    .esc-kio-bloque.es-plegado .esc-kio-bloque__tit { margin: 0; }
    .esc-kio-bloque__res { display: inline-flex; flex: 1; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: #E6EBF3; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; }
    .esc-kio-bloque__res .ph { flex: none; font-size: 15px; opacity: .7; }
    .esc-kio-mapa__pista { font-size: 12px; }
}

/* El mapa de ocupación del día (botón «Ocupación» junto a «Día»): una barra por pista con sus tramos */
.esc-kio-mapa-btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; margin-left: auto; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--kio-c) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--kio-c) 14%, transparent); color: inherit; font: inherit; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.esc-kio-mapa-btn .ph { font-size: 15px; }
.esc-kio-bloque__res + .esc-kio-mapa-btn { margin-left: 8px; }
.esc-kio-mapa { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(0, 0, 0, .6); }
.esc-kio-mapa[hidden] { display: none; }
.esc-kio-mapa__panel { display: flex; flex-direction: column; gap: 10px; width: min(1100px, 100%); max-height: 100%; padding: 14px; overflow: hidden; border-radius: 16px; background: #1E2435; color: #E6EBF3; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .6); }
.esc-kio-mapa__cab { display: flex; flex: none; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.esc-kio-mapa__cab .esc-kio-pad { flex: none; height: 38px; margin-left: auto; padding: 0 16px; }
.esc-kio-mapa__cuerpo { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.esc-kio-mapa__fila { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 4px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.esc-kio-mapa__fila:hover { background: rgba(255, 255, 255, .05); }
.esc-kio-mapa__fila.es-horas { cursor: default; padding-top: 0; padding-bottom: 0; }
.esc-kio-mapa__fila.es-horas:hover { background: transparent; }
.esc-kio-mapa__pista { overflow: hidden; font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.esc-kio-mapa__pista small { display: block; overflow: hidden; color: #9AA5B8; font-size: 11px; font-weight: 600; text-overflow: ellipsis; }
.esc-kio-mapa__barra { display: flex; gap: 1px; height: 28px; overflow: hidden; border-radius: 6px; }
.esc-kio-mapa__barra > span { flex: 1 1 0; min-width: 0; }
.esc-kio-mapa__fila.es-horas .esc-kio-mapa__barra { height: auto; overflow: visible; }
.esc-kio-mapa__fila.es-horas .esc-kio-mapa__barra > span { overflow: visible; color: #9AA5B8; font-size: 10px; white-space: nowrap; }
.esc-kio-mapa .es-libre       { background: #2F9E44; }
.esc-kio-mapa .es-reserva     { background: #0F9DEA; }
.esc-kio-mapa .es-clase       { background: #7048E8; }
.esc-kio-mapa .es-competicion { background: #E8590C; }
.esc-kio-mapa .es-otro        { background: #868E96; }
.esc-kio-mapa .es-cerrado,
.esc-kio-mapa .es-pasado      { background: #343D55; }
.esc-kio-mapa__leyenda { display: flex; flex: none; flex-wrap: wrap; gap: 6px 14px; color: #C5CDDB; font-size: 12px; }
.esc-kio-mapa__leyenda i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }

/* Tarifas de reserva · complementos: en qué pistas va cada uno */
.esc-tarres-comp__pistas { position: relative; }
.esc-tarres-comp__pb { white-space: nowrap; font-size: 12px; padding: 4px 8px; }
.esc-tarres-comp__panel {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
    width: 240px; max-height: 260px; overflow: auto; padding: 8px;
    border: 1px solid #DDE4EF; border-radius: 8px; background: #fff;
    box-shadow: 0 10px 24px rgba(16, 24, 40, .16);
}
.esc-tarres-comp__atajos { display: flex; gap: 6px; margin-bottom: 6px; }
.esc-tarres-comp__pista { display: flex; align-items: center; gap: 6px; margin: 0; padding: 3px 0; font-weight: 500; font-size: 12.5px; }

/* Tarifas y cuotas · la emergente de la tarifa en dos: a la izquierda la
   tarifa, a la derecha los descuentos por horas */
.esc-tar-form-dos { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.esc-tar-desc { border-left: 1px solid #E3E9EF; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.esc-tar-desc__tit { font-weight: 700; color: #1F2D4A; font-size: 13.5px; }
.esc-tar-desc__ayuda { color: #6B7A90; font-size: 11.5px; line-height: 1.4; }
.esc-tar-desc__filas { display: flex; flex-direction: column; gap: 8px; }
.esc-tar-desc__fila {
    display: grid; grid-template-columns: 62px minmax(0, 1fr) 22px; align-items: center; gap: 4px 8px;
    padding: 8px 10px; border: 1px solid #DDE4EF; border-radius: 8px; background: #FAFBFD;
}
.esc-tar-desc__h { font-weight: 700; color: #1F2D4A; font-size: 12.5px; }
.esc-tar-desc__mando {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    padding: 3px; border: 1px solid #C9D3E3; border-radius: 7px; background: #fff;
}
.esc-tar-desc__mando .form-control { height: 28px; padding: 2px 6px; font-size: 12.5px; min-width: 0; border: 0; box-shadow: none; }
.esc-tar-desc__pct { width: 64px; flex: 0 0 64px; }
.esc-tar-desc__dir { width: 74px; flex: 0 0 74px; background: #F2F8FD !important; }
.esc-tar-desc__res { flex: 1 1 auto; font-size: 12px; font-weight: 700; color: #0B5E8E; white-space: nowrap; text-align: center; }
.esc-tar-desc__o { color: #9CA3AF; font-size: 11px; }
.esc-tar-desc__fila.es-directo .esc-tar-desc__pct,
.esc-tar-desc__fila.es-directo .esc-tar-desc__res { opacity: .35; }
.esc-tar-desc__total { grid-column: 2 / 4; color: #6B7A90; font-size: 11px; }
.esc-tar-desc__x { border: 0; background: transparent; color: #9CA3AF; cursor: pointer; padding: 0; }
.esc-tar-desc__x:hover { color: #B42318; }
.esc-tar-desc__mas { align-self: flex-start; }
@media (max-width: 900px) {
    .esc-tar-form-dos { grid-template-columns: 1fr; }
    .esc-tar-desc { border-left: 0; padding-left: 0; border-top: 1px solid #E3E9EF; padding-top: 14px; }
}

/* Descuentos por horas · el interruptor de arriba (% o precio de la hora) y
   una sola casilla por fila */
.esc-tar-desc__toggle { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 8px; background: #EEF2F7; gap: 3px; }
.esc-tar-desc__opc { border: 0; background: transparent; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #475569; cursor: pointer; }
.esc-tar-desc__opc.es-activo { background: #1F2D4A; color: #fff; }
.esc-tar-desc__opc:disabled { opacity: .5; cursor: default; }
.esc-tar-desc__inp { width: 82px; flex: 0 0 82px; }
.esc-tar-desc__uni { color: #6B7A90; font-size: 11.5px; font-weight: 700; }
.esc-tar-desc__res { text-align: right; padding-right: 6px; }
.esc-tar-desc__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Tarifas y cuotas · el resumen, con una línea por cada descuento por horas */
.esc-tar-form__resumen-desc { margin-top: 4px; }
.esc-tar-form__resumen-desc > div { margin-top: 3px; }

/* Descuentos por horas · el recuadro blanco solo con lo que se rellena; el
   precio calculado, fuera y a su lado */
.esc-tar-desc__fila { grid-template-columns: 62px auto minmax(0, 1fr) 22px; }
.esc-tar-desc__mando { flex: 0 0 auto; width: auto; }
.esc-tar-desc__fila > .esc-tar-desc__res { text-align: left; padding: 0 0 0 4px; font-size: 12.5px; }
.esc-tar-desc__total { grid-column: 2 / 5; }
.esc-tar-desc__fila > .esc-tar-desc__res { white-space: normal; line-height: 1.3; }

/* Tarifas y cuotas · en la emergente de la tarifa: tipo de clase y cómo se
   calcula en una línea; horas por semana, importe y cuándo se cobra en otra */
.esc-tar-form-dos .esc-tar-form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.esc-tar-form-dos .esc-tar-form > * { grid-column: span 6; }
.esc-tar-form-dos .esc-tar-form__campo.es-mitad { grid-column: span 3; }
.esc-tar-form-dos .esc-tar-form__campo.es-tercio { grid-column: span 2; }

/* =============================================================================
   Económico · horas y facturación de alumnos, mes a mes
   ============================================================================= */
.esc-eco-agrupar { display: inline-flex; padding: 3px; border-radius: 8px; background: #EEF2F7; gap: 3px; }
.esc-eco-agrupar__b { border: 0; background: transparent; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #475569; cursor: pointer; }
.esc-eco-agrupar__b.es-activo { background: #1F2D4A; color: #fff; }
.esc-eco-meses { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; background: #FAFBFC; border-bottom: 1px solid #EEF1F4; }
.esc-eco-mes {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px;
    padding: 6px 10px; border: 1px solid #DDE4EF; border-radius: 8px; background: #fff; cursor: pointer;
}
.esc-eco-mes:hover { border-color: #0F9DEA; }
.esc-eco-mes.es-activo { border-color: #1F2D4A; background: #1F2D4A; color: #fff; }
.esc-eco-mes__n { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; opacity: .8; }
.esc-eco-mes__t { font-size: 12.5px; }
.esc-eco-resumen { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
.esc-eco-resumen__c { flex: 1 1 140px; padding: 10px 12px; border: 1px solid #E1E6EA; border-radius: 10px; background: #fff; }
.esc-eco-resumen__l { display: block; color: #6B7480; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.esc-eco-resumen__v { font-size: 16px; color: #1F2D4A; }
.esc-eco-tabla-wrap { overflow-x: auto; }
.esc-eco-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.esc-eco-tabla th {
    background: #F4F6F8; color: #6B7480; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; text-align: left; padding: 8px 10px; white-space: nowrap;
}
.esc-eco-tabla td { padding: 7px 10px; border-top: 1px solid #EEF1F4; vertical-align: middle; }
.esc-eco-tabla th + th, .esc-eco-tabla td + td { border-left: 1px solid #EDF0F3; }
.esc-eco-tabla .es-num { text-align: right; white-space: nowrap; }
.esc-eco-grupo__fila { cursor: pointer; background: #F8FAFC; }
.esc-eco-grupo__fila:hover { background: #EEF4FB; }
.esc-eco-grupo__fila:focus { outline: 2px solid rgba(15, 157, 234, .5); outline-offset: -2px; }
.esc-eco-grupo__nombre strong { font-size: 13px; color: #1F2D4A; margin-right: 8px; }
.esc-eco-grupo__flecha { margin-right: 6px; color: #6B7480; }
.esc-eco-grupo__cuenta { padding: 1px 7px; border-radius: 5px; background: #E8F5FE; color: #0B5E8E; font-size: 11px; font-weight: 700; }
.esc-eco-grupo__info { color: #6B7480; font-size: 11.5px; }
.esc-eco-grupo__total { font-weight: 800; color: #1F2D4A; }
.esc-eco-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.esc-eco-alumno__n { font-weight: 600; color: #1F2D4A; }
.esc-eco-alumno__dias { color: #475569; font-size: 11.5px; }
.esc-eco-alumno.es-no-factura td { color: #9CA3AF; }
.esc-eco-sin { color: #B42318; font-weight: 600; }
.esc-eco-pie .esc-tr-pie__info { font-size: 11px; line-height: 1.45; }

/* Económico · «Criterio de agrupación:» delante del interruptor */
.esc-eco-panel .esc-tr-acciones { display: flex; align-items: center; gap: 8px; }
.esc-eco-agrupar__rot { color: #6B7480; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }

/* Económico · la pantalla bloqueada mientras se calcula un mes */
.esc-eco-bloqueo {
    position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .35); backdrop-filter: blur(1px); cursor: progress;
}
.esc-eco-bloqueo[hidden] { display: none; }
.esc-eco-bloqueo__caja {
    display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: 12px;
    background: #fff; color: #1F2D4A; font-weight: 700; box-shadow: 0 12px 34px rgba(16, 24, 40, .25);
}
.esc-eco-bloqueo__rueda {
    width: 22px; height: 22px; border-radius: 50%; border: 3px solid #DDE4EF; border-top-color: #0F9DEA;
    animation: esc-eco-gira .8s linear infinite;
}
@keyframes esc-eco-gira { to { transform: rotate(360deg); } }
body.esc-eco-bloqueado { overflow: hidden; }

/* Económico · la gráfica de ingresos del curso */
.esc-eco-grafica { padding: 12px 14px 4px; border-bottom: 1px solid #EEF1F4; }
.esc-eco-grafica__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.esc-eco-grafica__tit { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #6B7480; }
.esc-eco-grafica__tot { font-size: 12px; font-weight: 700; color: #1F2D4A; }
.esc-eco-grafica__svg { display: block; width: 100%; height: auto; max-height: 220px; }
.esc-eco-grafica__rej { stroke: #EEF1F4; stroke-width: 1; }
.esc-eco-grafica__eje { fill: #9CA3AF; font-size: 11px; }
.esc-eco-grafica__area { fill: rgba(15, 157, 234, .10); }
.esc-eco-grafica__linea { fill: none; stroke: #0F9DEA; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.esc-eco-grafica__punto { fill: #fff; stroke: #0F9DEA; stroke-width: 2.5; cursor: pointer; }
.esc-eco-grafica__punto:hover { fill: #0F9DEA; }
.esc-eco-grafica__punto.es-activo { fill: #1F2D4A; stroke: #1F2D4A; }
.esc-eco-grafica__mes { fill: #6B7480; font-size: 11.5px; font-weight: 700; text-transform: uppercase; }
.esc-eco-grafica__mes.es-activo { fill: #1F2D4A; }
.esc-eco-grafica__valor { fill: #1F2D4A; font-size: 12px; font-weight: 800; }

/* Económico · resumen de la escuela (acumulado de sus calendarios) */
.esc-eco-global, .esc-eco-panel, .esc-eco-nota { width: 100%; margin-bottom: 16px; }
.esc-eco-cals { width: 100%; }
.esc-eco-cifras { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #EEF1F4; }
.esc-eco-cifra { flex: 1 1 170px; padding: 10px 12px; border: 1px solid #E1E6EA; border-top: 3px solid #E1E6EA; border-radius: 10px; background: #fff; }
.esc-eco-cifra.es-principal { border-top-color: #0F9DEA; background: #F4FAFE; }
.esc-eco-cifra.es-cal { cursor: pointer; }
.esc-eco-cifra.es-cal:hover { background: #F8FAFC; }
.esc-eco-cifra.es-aviso { border-top-color: #E5484D; background: #FFF6F5; }
.esc-eco-cifra__l { display: block; color: #6B7480; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.esc-eco-cifra__v { display: block; font-size: 19px; color: #1F2D4A; margin-top: 2px; }
.esc-eco-cifra.es-principal .esc-eco-cifra__v { font-size: 22px; }
.esc-eco-cifra__s { display: block; color: #6B7480; font-size: 11px; margin-top: 2px; }
.esc-eco-leyenda { display: inline-flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: #475569; font-weight: 600; }
.esc-eco-leyenda__i { display: inline-flex; align-items: center; }
.esc-eco-leyenda__linea { display: inline-block; width: 18px; height: 0; border-top: 2px dashed #1F2D4A; margin-right: 6px; }
.esc-eco-grafica__col .esc-eco-grafica__hit { fill: transparent; cursor: pointer; }
.esc-eco-grafica__col:hover .esc-eco-grafica__hit { fill: rgba(15, 157, 234, .06); }
.esc-eco-grafica__col.es-activo .esc-eco-grafica__hit { fill: rgba(31, 45, 74, .06); }
.esc-eco-grafica__acum { fill: none; stroke: #1F2D4A; stroke-width: 2; stroke-dasharray: 6 4; }
.esc-eco-grafica__acum-p { fill: #1F2D4A; }
.esc-eco-grafica__eje.es-acum { fill: #1F2D4A; opacity: .6; }
.esc-eco-grafica__banda { fill: #475569; font-size: 11.5px; font-weight: 700; }
.esc-eco-conceptos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; padding: 12px 14px 14px; }
.esc-eco-concepto { min-width: 0; border: 1px solid #E1E6EA; border-radius: 10px; overflow: hidden; background: #fff; }
.esc-eco-concepto__t { margin: 0; padding: 9px 12px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #1F2D4A; background: #F8FAFC; border-bottom: 1px solid #EEF1F4; }
.esc-eco-concepto__n { font-weight: 700; color: #1F2D4A; }
.esc-eco-concepto__a { display: block; color: #6B7480; font-size: 10.5px; }
.esc-eco-concepto__parte { width: 120px; white-space: nowrap; }
.esc-eco-concepto__total td { background: #F8FAFC; font-weight: 800; color: #1F2D4A; }
.esc-eco-barra { display: inline-block; width: 64px; height: 7px; border-radius: 4px; background: #EEF1F4; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.esc-eco-barra__v { display: block; height: 100%; background: #0F9DEA; border-radius: 4px; }
.esc-eco-barra__p { font-size: 11.5px; color: #475569; font-weight: 700; }
.esc-eco-cual { margin-left: 8px; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; background: #E8F5FE; color: #0B5E8E; }
.esc-eco-cual.es-siguiente { background: #EEF7E6; color: #4B7A1E; }
.esc-eco-concepto .esc-eco-tabla-wrap, .esc-eco-global .esc-eco-grafica, .esc-eco-cifras, .esc-eco-conceptos { width: 100%; box-sizing: border-box; }
.esc-eco-conceptos.es-varios { grid-template-columns: 1fr; }
.esc-eco-grafica__mes { font-size: 11px; }

/* Dashboard · el radar de alumnos por nivel con su leyenda al lado */
.esc-dash-dist .esc-dash-radar-caja { align-items: center; }
.esc-dash-dist .esc-dash-radar-caja .esc-dash-radar { width: auto; flex: 0 1 190px; }
.esc-dash-dist .esc-dash-radar-caja .esc-dash-radar__svg { width: 190px; max-width: 100%; }

/* Mensajes push · a quién le llegó cada aviso */
.esc-push-msg__dest summary { cursor: pointer; list-style: revert; }
.esc-push-msg__lista { margin-top: 6px; font-size: 12px; color: var(--esc-text-soft); line-height: 1.5; }

/* Modal · con más de un botón de aceptar (Nuevo grupo: Crear y crear, Crear e
   ir, Crear y cerrar), que quepan: botones más estrechos y, si no, a otra fila. */
.esc-modal__pie:has(.esc-modal__otro) { flex-wrap: wrap; justify-content: flex-end; }
.esc-modal__pie:has(.esc-modal__otro) .btn { flex: 0 0 auto; padding-left: 10px; padding-right: 10px; white-space: nowrap; }

/* Grupos · la chapa del alias ocupa toda su columna: igual en todos los grupos */
.esc-grupo-caja__alias { justify-self: stretch; text-align: center; }

/* Grupos · cabecera de cada nivel en columnas fijas: el nombre, la chapa de
   grupos, los alumnos, la barra y el porcentaje, en el mismo sitio en todos. */
.esc-nivel-bloque__cab .esc-nivel-bloque__nombre { min-width: 130px; }
.esc-nivel-bloque__resumen { flex-wrap: nowrap; }
.esc-nivel-bloque__alumnos { width: 100px; justify-content: flex-end; }
.esc-nivel-bloque__pct { width: 82px; text-align: left; white-space: nowrap; }
.esc-nivel-bloque__aforo { width: 84px; text-align: right; white-space: nowrap; }

/* Inscripción pública · dos columnas: la configuración y los niveles */
.esc-inscfg__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px; width: 100%; align-items: start; }
.esc-inscfg__izq { gap: 16px; }
.esc-inscfg__tabla-wrap { width: 100%; overflow-x: auto; }
.esc-inscfg__tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.esc-inscfg__tabla th { padding: 7px 8px; background: #F8FAFC; color: #6B7480; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; text-align: left; border-bottom: 1px solid #E1E6EA; }
.esc-inscfg__tabla td { padding: 6px 8px; border-top: 1px solid #EEF1F4; vertical-align: middle; }
.esc-inscfg__tabla th + th, .esc-inscfg__tabla td + td { border-left: 1px solid #EDF0F3; }
.esc-inscfg__tabla .form-control { height: 32px; padding: 4px 8px; font-size: 12.5px; min-width: 0; }
.esc-inscfg__tabla td:nth-child(2) { width: 96px; }
.esc-inscfg__tabla td:nth-child(3), .esc-inscfg__tabla td:nth-child(4) { width: 140px; }
.esc-inscfg__tabla td:nth-child(5) { width: 70px; text-align: center; }
.esc-inscfg__nivel { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #1F2D4A; }
.esc-inscfg__estado { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.esc-inscfg__estado.es-abierto { background: #E7F6EC; color: #1E7B3C; }
.esc-inscfg__estado.es-pronto { background: #FFF4E0; color: #8A5A00; }
.esc-inscfg__estado.es-cerrado { background: #FDECEC; color: #B42318; }
.esc-inscfg__aviso { margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; background: #FFF4E0; color: #8A5A00; font-size: 12px; }
@media (max-width: 900px) { .esc-inscfg__cols { grid-template-columns: 1fr; } }
.esc-modal__caja.es-extra:has(.esc-inscfg--dos) { max-width: min(1340px, 96vw); }
.esc-inscfg--dos .esc-inscfg__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.esc-inscfg--dos .esc-enlace__fila { width: 100%; }
.esc-inscfg__tabla td:nth-child(3), .esc-inscfg__tabla td:nth-child(4) { width: 150px; }
.esc-inscfg__tabla td:nth-child(5) { width: 78px; }
.esc-inscfg--dos .esc-inscfg__campo { max-width: none; }
.esc-inscfg--dos .esc-inscfg__campo .form-control { max-width: 220px; }
button.esc-inscfg__estado { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
button.esc-inscfg__estado:hover:not(:disabled) { filter: brightness(.95); box-shadow: 0 0 0 2px rgba(15, 157, 234, .25); }
button.esc-inscfg__estado:disabled { cursor: default; }
.esc-inscfg__tabla td:nth-child(5) { width: 96px; }

/* Inscripción pública · cómo se abre la reserva: programada o a mano */
.esc-inscfg__modo { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.esc-inscfg__modo-rot { color: #6B7480; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.esc-inscfg__modo .esc-ayuda { flex-basis: 100%; margin: 0; }
.esc-inscfg__modo .esc-eco-agrupar__b:disabled { opacity: .5; cursor: not-allowed; }
.esc-inscfg__tabla .form-control:disabled { opacity: .45; }
@media (max-width: 1200px) { .esc-inscfg--dos .esc-inscfg__cols { grid-template-columns: 1fr; } }
.esc-inscfg__tabla.es-manual th:nth-child(3), .esc-inscfg__tabla.es-manual th:nth-child(4),
.esc-inscfg__tabla.es-manual td:nth-child(3), .esc-inscfg__tabla.es-manual td:nth-child(4) { display: none; }

/* Matriz semanal · modo reserva: primero «Reserva» y después la casilla */
.esc-matriz-reservar {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
    border: 1px solid #C9D2DA; border-radius: 8px; background: #fff; color: #1F2D4A;
    font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.esc-matriz-reservar:hover { border-color: #35C27A; }
.esc-matriz-reservar.es-activo { background: #35C27A; border-color: #35C27A; color: #fff; box-shadow: 0 0 0 3px rgba(53, 194, 122, .25); }
body.esc-modo-reserva .esc-matriz .esc-celda[data-campo] { cursor: copy; }
body.esc-modo-reserva .esc-matriz .esc-celda[data-campo]:hover { outline: 2px solid #35C27A; outline-offset: -2px; background: rgba(53, 194, 122, .08); }
body.esc-modo-reserva .esc-matriz { cursor: crosshair; }

/* Matriz semanal · las reservas de pista dentro de su casilla */
.esc-reserva-pista {
    margin: 3px 4px; padding: 4px 7px; border-radius: 6px; border-left: 3px solid #0E9F8E;
    background: #E3F6F3; color: #0B4F47; font-size: 11px; line-height: 1.3; cursor: default;
}
.esc-reserva-pista.es-club { border-left-color: #64748B; background: #EEF1F4; color: #334155; }
.esc-reserva-pista.es-por-cobrar { border-left-style: dashed; }
.esc-reserva-pista__l1 { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-reserva-pista__quien { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-reserva-pista__l3 { opacity: .8; font-size: 10.5px; }
.esc-reserva-pista.es-campeonato { border-left-color: #8E44AD; background: #F3E8FA; color: #4A1D6B; }

/* Lateral «Orden» de las pistas (mismo cajón que «Tipos de día») */
.esc-po__ayuda { margin: 0 0 10px; }
.esc-po__aviso { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #FFF4E0; color: #8A5A00; font-size: 12px; }
.esc-po-pista { align-items: center; }
.esc-po-pista__n { flex: 0 0 auto; min-width: 22px; text-align: center; color: var(--esc-text-soft); font-size: 11px; font-weight: 800; }
.esc-po-pista__flechas { display: inline-flex; gap: 4px; margin-left: auto; flex: 0 0 auto; }
.esc-po-pista__flecha { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--esc-border, #E3E9F0); border-radius: 6px; background: #fff; color: var(--esc-text); cursor: pointer; }
.esc-po-pista__flecha:hover:not(:disabled) { border-color: #7C5CF6; color: #7C5CF6; }
.esc-po-pista__flecha:disabled { opacity: .35; cursor: default; }

/* Grupos · fila «RESERVA»: plaza guardada a favor de alguien, muy a la vista */
.esc-alumno.esc-reserva-plaza {
    background: repeating-linear-gradient(135deg, #FFE8A3 0 10px, #FFDD80 10px 20px) !important;
    border-left: 4px solid #F08C00;
    box-shadow: inset 0 0 0 1px #F5B83D;
    color: #6B3F00;
}
.esc-alumno.esc-reserva-plaza.is-destino { outline: 3px dashed #F08C00; outline-offset: -3px; }
.esc-reserva-plaza__icono { display: flex; align-items: center; justify-content: center; color: #F08C00; font-size: 15px; }
.esc-reserva-plaza__nombre { font-weight: 900; letter-spacing: .6px; color: #A34F00; }
.esc-alumno > .esc-reserva-plaza__quien { grid-column: span 5; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: visible; }
.esc-reserva-plaza__texto { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.esc-reserva-plaza__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid #F08C00; border-radius: 6px; background: #fff; color: #A34F00; font-size: 11px; font-weight: 800; cursor: pointer; }
.esc-reserva-plaza__btn:hover { background: #F08C00; color: #fff; }
.esc-reserva-plaza__btn.es-icono { width: 24px; padding: 0; justify-content: center; }
.esc-reserva-plaza__dia { display: flex; align-items: center; justify-content: center; color: #F08C00; font-size: 15px; font-weight: 900; }
.esc-reserva-plaza__nueva { margin: 8px 0 4px 8px; }
.esc-reserva-plaza__para { margin-bottom: 8px; font-weight: 700; color: #A34F00; }
.esc-reserva-plaza__lista { max-height: 300px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.esc-reserva-plaza__opcion { text-align: left; padding: 7px 10px; border: 1px solid #E3E9F0; border-radius: 6px; background: #fff; font-size: 12.5px; cursor: pointer; }
.esc-reserva-plaza__opcion:hover { border-color: #7C5CF6; }
.esc-reserva-plaza__opcion.es-sel { border-color: #35C27A; background: #EAF8F0; font-weight: 700; }

/* Inscripciones · pestaña «Reservas» (plazas reservadas en los grupos) */
.esc-ins-reservas { width: 100%; }
.esc-ins-reservas__fila td { background: #FFF6E0; }
.esc-ins-reservas__grupo { font-weight: 700; color: #1F2D4A; }
.esc-ins-reservas__marca { display: inline-block; padding: 1px 7px; border-radius: 5px; background: #F08C00; color: #fff; font-size: 10.5px; font-weight: 900; letter-spacing: .5px; }

/* Grupos · cajón «Alumnos del club», pestaña «Reservas» */
.esc-cajon-reservas__ayuda { padding: 6px 12px; font-size: 11.5px; opacity: .8; }
.esc-cajon-reserva {
    display: block; width: calc(100% - 16px); margin: 6px 8px; padding: 9px 11px; text-align: left; cursor: pointer;
    border: 1px solid #F5B83D; border-left: 4px solid #F08C00; border-radius: 8px;
    background: repeating-linear-gradient(135deg, rgba(255,221,128,.22) 0 10px, rgba(255,221,128,.12) 10px 20px);
    color: inherit;
}
.esc-cajon-reserva:hover { border-color: #F08C00; background: rgba(240,140,0,.22); }
.esc-cajon-reserva__cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.esc-cajon-reserva__marca { flex: 0 0 auto; padding: 1px 7px; border-radius: 5px; background: #F08C00; color: #fff; font-size: 10.5px; font-weight: 900; letter-spacing: .5px; }
.esc-cajon-reserva__texto { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esc-cajon-reserva__pie { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11.5px; opacity: .9; min-width: 0; }
.esc-cajon-reserva__grupo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.esc-cajon-reserva__fecha { flex: 0 0 auto; opacity: .7; }
/* «Cargar más» del cajón: oculto cuando el JS lo oculta (un estilo lo forzaba visible) */
#esc-cajon-mas[hidden] { display: none !important; }

/* Mensajes push · grupos de entrenamiento en la tabla de la derecha */
.esc-push-tabla[hidden] { display: none !important; }
.esc-push-g__chapa { display: inline-block; padding: 1px 6px; border-radius: 5px; color: #fff; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.esc-push-g__nombre { font-weight: 700; color: var(--esc-text, #1F2D4A); }
.esc-push-g__alias { font-size: 11px; color: var(--esc-text-soft, #6B7480); }
.esc-push-g__nivel { font-size: 12px; }
.esc-push-g__num { text-align: right; font-weight: 700; }
.esc-push-tabla--grupos tbody tr { cursor: pointer; }
.esc-push-tabla--grupos tbody tr.es-sel td { background: #EAF4FD; }
.esc-push-g__chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.esc-push-g__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border: 1px solid #E3E9F0; border-left: 4px solid #8E9BA8; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 700; color: var(--esc-text, #1F2D4A); }
.esc-push-g__chip .esc-push-comp__chipx { background: transparent; color: #6B7480; border: 0; cursor: pointer; font-size: 15px; line-height: 1; }

/* Dashboard · tooltip del mapa: las clases en lista con la chapa (GR)n de su color */
.esc-dash-tip__lista:has(.esc-dash-tip__clase) { padding-left: 0; list-style: none; }
.esc-dash-tip__clase { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.esc-dash-tip__clase:first-child { border-top: 0; }
.esc-dash-tip__gr { flex: 0 0 auto; min-width: 42px; text-align: center; padding: 1px 6px; border-radius: 5px; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1.5; }
.esc-dash-tip__gr.es-sin { background: rgba(255, 255, 255, .12); color: #A3AFC6; }
.esc-dash-tip__clase-txt { display: flex; flex-direction: column; min-width: 0; }
.esc-dash-tip__grupo { font-weight: 700; color: #F1F5FA; }
.esc-dash-tip__clase-sub { font-size: 11px; color: #A3AFC6; }
/* Tooltip del mapa: cada sección en su línea y su cabecera a lo ancho
   (la de «Reservas» se quedaba con ancho 0, fuera del recuadro) */
.esc-dash-tip__sec { clear: both; width: 100%; }
.esc-dash-tip__sec-cab { width: 100%; box-sizing: border-box; }
.esc-dash-tip__lista, .esc-dash-tip__lista li { float: none; }
.esc-dash-tip::after { content: ''; display: block; clear: both; }

/* Mensajes push · tabla de técnicos y de «Todos» */
.esc-push-tabla--tecnicos tbody tr { cursor: pointer; }
.esc-push-tabla--tecnicos tbody tr.es-sel td { background: #F1ECFE; }
.esc-push-a__tipo { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 800; }
.esc-push-a__tipo.es-alumno { background: #E6F4FC; color: #0B5E8E; }
.esc-push-a__tipo.es-tecnico { background: #F1ECFE; color: #5B3FC4; }
/* Las tablas de grupos, técnicos y «Todos», con alto para trabajar aunque el
   compositor de la izquierda sea bajo */
.esc-push-tabla--grupos, .esc-push-tabla--tecnicos, .esc-push-tabla--todos { min-height: 520px; }
.esc-push-tabla--tecnicos td:nth-child(5) { white-space: nowrap; }

/* Inscripción pública · TRES columnas: configuración, niveles y test de nivel inicial */
.esc-modal__caja.es-extra:has(.esc-inscfg--tres) { max-width: min(1760px, 98vw); }
.esc-inscfg--tres .esc-inscfg__cols { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr) minmax(0, 1.15fr); }
@media (max-width: 1500px) {
    .esc-inscfg--tres .esc-inscfg__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
    .esc-inscfg--tres .esc-cuest { grid-column: 1 / -1; }
}
@media (max-width: 1200px) { .esc-inscfg--tres .esc-inscfg__cols { grid-template-columns: 1fr; } }
.esc-inscfg__tabla td.esc-inscfg__cuest { width: 52px; text-align: center; }

/* El icono de test de cada fila de nivel */
.esc-cuest__nivel {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: 1px solid #C9D2DA; border-radius: 8px;
    background: #fff; color: #8E9BA8; font-size: 16px; cursor: pointer;
}
.esc-cuest__nivel:hover { border-color: #0F9DEA; color: #0F9DEA; }
.esc-cuest__nivel.es-propio { border-color: #7A3FE8; background: #F3EDFD; color: #7A3FE8; }
.esc-cuest__nivel.es-editando { box-shadow: 0 0 0 3px rgba(122, 63, 232, .25); border-color: #7A3FE8; color: #7A3FE8; }
.esc-cuest__n {
    position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: #7A3FE8; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px;
}

/* La columna del test */
.esc-cuest { min-width: 0; }
.esc-cuest__cab { display: flex; align-items: center; gap: 8px; }
.esc-cuest__cab .esc-inscfg__tit { margin-bottom: 0; }
.esc-cuest__info { border-color: #C9D2DA; color: #6B7480; }
.esc-cuest__info[data-ayuda]::after { left: auto; right: -10px; transform: none; width: 340px; }
.esc-cuest__forms { margin: 10px 0 8px; }
.esc-cuest__ctx { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.esc-cuest__chapa { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #F3EDFD; color: #5B2DB8; font-size: 12px; font-weight: 700; }
.esc-cuest__chapa.es-global { background: #EAF5FD; color: #0B6FA8; }
.esc-cuest__enlace { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #0F9DEA; font-size: 12px; font-weight: 700; cursor: pointer; }
.esc-cuest__enlace:hover { text-decoration: underline; }
.esc-cuest__usa { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #F8FAFC; color: #4A5563; font-size: 12.5px; }
.esc-cuest__cuerpo { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.esc-cuest__preg { display: flex; flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #E1E6EA; border-radius: 10px; background: #fff; }
.esc-cuest__preg-top { display: flex; align-items: center; gap: 6px; }
.esc-cuest__num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #1F2D4A; color: #fff; font-size: 11px; font-weight: 800; line-height: 22px; text-align: center; }
.esc-cuest__texto { flex: 1; min-width: 0; height: 32px; font-weight: 700; }
.esc-cuest__acc { flex: none; display: flex; gap: 2px; }
.esc-cuest__ico { width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: #6B7480; cursor: pointer; }
.esc-cuest__ico:hover:not(:disabled) { border-color: #C9D2DA; color: #1F2D4A; }
.esc-cuest__ico:disabled { opacity: .3; cursor: default; }
.esc-cuest__ico.es-quitar:hover { border-color: #F3B4B4; color: #B42318; }
.esc-cuest__preg-fila { display: flex; align-items: center; gap: 10px; padding-left: 28px; }
.esc-cuest__tipo { width: auto; min-width: 0; height: 30px; padding: 2px 8px; font-size: 12px; }
.esc-cuest__obl { margin: 0; font-size: 12px; }
.esc-cuest__ops { display: flex; flex-direction: column; gap: 4px; padding-left: 28px; }
.esc-cuest__op { display: grid; grid-template-columns: minmax(0, 1fr) 70px 26px; gap: 6px; align-items: center; }
.esc-cuest__op.es-cab { color: #8E9BA8; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.esc-cuest__op .form-control { height: 28px; padding: 2px 8px; font-size: 12px; }
.esc-cuest__ayuda { height: 28px; margin-left: 28px; width: calc(100% - 28px); font-size: 12px; }
.esc-cuest__botonera { display: flex; flex-wrap: wrap; gap: 8px; }
.esc-cuest__umbrales { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E1E6EA; }
.esc-cuest__sub { margin-bottom: 8px; color: #6B7480; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.esc-cuest__umbral-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-bottom: 6px; }
.esc-cuest__umbral { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: #1F2D4A; }
.esc-cuest__umbral-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esc-cuest__umbral .form-control { width: 62px; height: 28px; padding: 2px 6px; font-size: 12px; }
.esc-cuest__pct { color: #8E9BA8; }

/* Inscripciones · el test de nivel inicial junto al nivel que pidió */
.esc-ins-test { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0; border: 1px solid; border-radius: 6px; background: #fff; font-size: 14px; cursor: pointer; vertical-align: middle; }
.esc-ins-test.es-pendiente { border-color: #F2C27A; background: #FFF4E0; color: #8A5A00; }
.esc-ins-test.es-evaluado { border-color: #9ED7B3; background: #E7F6EC; color: #1E7B3C; }

/* Test de nivel inicial (assets/test_nivel.js): ficha del alumno e Inscripciones */
.esc-test { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.esc-test__cargando, .esc-test__sin { color: #6B7480; font-size: 12.5px; }
.esc-test__tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.esc-test__tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid #E1E6EA; border-radius: 10px; background: #fff; }
.esc-test__tarjeta.es-escuela { border-color: #D9CCF7; background: #FBF9FF; }
.esc-test__cab { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; color: #1F2D4A; font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.esc-test__cab .ph { font-size: 16px; color: #7A3FE8; }
.esc-test__dato { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.esc-test__k { color: #6B7480; }
.esc-test__v { color: #1F2D4A; font-weight: 700; text-align: right; }
.esc-test__dato.es-decidido { margin-top: 2px; padding-top: 6px; border-top: 1px solid #E8E1F8; }
.esc-test__nivel { display: inline-flex; align-items: center; gap: 4px; }
.esc-test__evaluar { align-self: flex-start; margin-top: 4px; }
.esc-test__det { border: 1px solid #E1E6EA; border-radius: 10px; background: #fff; }
.esc-test__det > summary { padding: 9px 12px; color: #1F2D4A; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.esc-test__resp { border-top: 1px solid #EEF1F4; }
.esc-test__fila { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 54px; gap: 10px; padding: 7px 12px; border-top: 1px solid #EEF1F4; font-size: 12.5px; }
.esc-test__fila:first-child { border-top: 0; }
.esc-test__preg { color: #6B7480; }
.esc-test__res { color: #1F2D4A; font-weight: 700; }
.esc-test__pts { color: #7A3FE8; font-weight: 700; text-align: right; }
.esc-test__obs { margin: 0; padding: 9px 12px; border-top: 1px solid #EEF1F4; color: #4A5563; font-size: 12.5px; white-space: pre-line; }
.esc-test__form { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #D9CCF7; border-radius: 12px; background: #FBF9FF; }
.esc-test__tit { margin: 0; color: #1F2D4A; font-size: 14px; font-weight: 800; }
.esc-test__p { display: flex; flex-direction: column; gap: 6px; }
.esc-test__p-rot { color: #1F2D4A; font-size: 13px; font-weight: 700; }
.esc-test__p-ayuda { color: #6B7480; font-size: 12px; }
.esc-test__ops { display: flex; flex-wrap: wrap; gap: 6px; }
.esc-test__op { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border: 1px solid #D5DCE3; border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.esc-test__op:has(input:checked) { border-color: #7A3FE8; background: #F3EDFD; }
.esc-test__op-pts { color: #8E9BA8; font-size: 10.5px; }
.esc-test__vivo { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #E8E1F8; }
.esc-test__decidir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.esc-test__decidir > label:first-child { display: flex; flex-direction: column; gap: 4px; margin: 0; color: #6B7480; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.esc-test__decidir select { min-width: 240px; }
.esc-test__aplicar { margin: 0 0 6px; font-size: 12.5px; }
.esc-test__pie { display: flex; gap: 8px; }

/* El creador de un ejercicio (UI.autorEjercicio): sale siempre que se usa */
.esc-autor-ej { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; color: #6B7480; font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.esc-autor-ej .ph { font-size: 13px; }
.esc-autor-ej.es-compacto { font-size: 11px; font-weight: 500; }
.esc-asig-linea__nombre .esc-autor-ej { display: flex; margin-top: 1px; }
.esc-taller__linea-cab .esc-autor-ej { flex-basis: 100%; }
.esc-autor-ej__com { margin-left: 5px; padding: 0 6px; border-radius: 999px; background: #E7F6EC; color: #1E7B3C; font-size: 10px; font-weight: 800; }
.ct-res .esc-autor-ej { margin: 2px 0 4px; }

/* =============================================================================
   LAS FASES DE UNA SESION, en la ficha de un entrenamiento del banco
   -----------------------------------------------------------------------------
   Calentamiento, parte principal, parte especifica y vuelta a la calma: la
   misma separacion que se ve al montarlo y la que veran luego el profesor y el
   alumno. El color de cada fase lo pone el JS en linea (--esc-fase).
   ========================================================================== */
.esc-taller__fase {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    padding: 5px 10px;
    border-left: 3px solid var(--esc-fase, #CBD2D9);
    border-radius: 0 6px 6px 0;
    background: #FAFBFC;
    color: #1A2B3C;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.esc-taller__sesion > .esc-taller__fase:first-child { margin-top: 0; }
.esc-taller__fase-c {
    margin-left: auto;
    color: #7A8290;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* =============================================================================
   ASIGNACION DIARIA · EN QUE PARTE DE LA SESION SE ESTA TRABAJANDO
   -----------------------------------------------------------------------------
   En la barra, las cuatro partes: calentamiento, parte principal, parte
   especifica y vuelta a la calma. La encendida dice donde entra lo que se
   suelte en cualquier grupo, asi que se reparte el calentamiento de todo el dia
   de una tirada y luego se cambia. Dentro de cada tarjeta, la sesion sale
   separada por esas partes (solo las que tienen algo: la tarjeta es pequeña) y
   cada linea lleva cuatro puntos para mandarla a otra.

   OJO: esto NO son las fases ATR del ejercicio (la chapa .esc-asig-atr), que
   dicen como es dentro de la planificacion. Son dos cosas y conviven.
   ========================================================================== */
.esc-asig-fases { display: inline-flex; gap: 4px; align-items: center; }

/* Un rotulo delante: con la barra estrecha los botones se quedan en iconos y
   sin el no se sabria que preguntan. */
.esc-asig-fases__rot {
    margin-right: 2px;
    color: #7A8290;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.esc-asig-parte {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--esc-borde, #E3E7EC);
    border-radius: 8px;
    background: #FFF;
    color: #7A8290;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.esc-asig-parte .ph { color: var(--esc-parte); font-size: 15px; }
.esc-asig-parte:hover { border-color: var(--esc-parte); color: #1A2B3C; }
.esc-asig-parte.es-activa {
    border-color: var(--esc-parte);
    background: #FAFBFC;
    background: color-mix(in srgb, var(--esc-parte) 12%, #FFF);
    color: #1A2B3C;
    box-shadow: inset 0 0 0 1px var(--esc-parte);
}
@media (max-width: 1460px) { .esc-asig-parte__n { display: none; } }

/* --- La raya de cada parte dentro de la tarjeta de un grupo --------------- */
.esc-asig-parte-cab {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px;
    padding: 2px 8px;
    border-left: 3px solid var(--esc-parte);
    border-radius: 0 5px 5px 0;
    background: #FAFBFC;
    background: color-mix(in srgb, var(--esc-parte) 8%, #FFF);
    color: #1A2B3C;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.esc-asig-sesion > .esc-asig-parte-cab:first-child { margin-top: 0; }
.esc-asig-parte-cab .ph { color: var(--esc-parte); font-size: 13px; }
.esc-asig-parte-cab__c {
    margin-left: auto;
    color: #7A8290;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* --- Los cuatro puntos de cada linea -------------------------------------- */
.esc-asig-linea__partes { display: flex; flex-direction: column; gap: 3px; margin: 0 6px; flex: 0 0 auto; }
.esc-asig-linea__parte {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid #D5DBE1;
    border-radius: 50%;
    background: #FFF;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .12s;
}
.esc-asig-linea__parte:hover { border-color: var(--esc-parte); transform: scale(1.3); }
.esc-asig-linea__parte.es-activa { border-color: var(--esc-parte); background: var(--esc-parte); }

/* =============================================================================
   BANCO DE ENTRENAMIENTOS · DE QUIEN ES CADA SESION Y HASTA DONDE LLEGA
   -----------------------------------------------------------------------------
   Bajo el nombre va quien la monto y una chapa con su alcance: solo el autor,
   el staff del club o la comunidad entera. Si la sesion es tuya la chapa es un
   boton y la cambias ahi mismo; si es de otro, es solo una chapa, porque una
   sesion es de quien la monta.
   ========================================================================== */
.esc-bent__mia {
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: #E8F3FB;
    color: #0A76B0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.esc-bent__alcance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    padding: 1px 8px 1px 6px;
    border: 1px solid #E3E7EC;
    border-radius: 999px;
    background: #FAFBFC;
    color: #7A8290;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.esc-bent__alcance .ph { font-size: 12px; }
.esc-bent__alcance.es-privada   { border-color: #E3E7EC; background: #F4F5F7; color: #6B7280; }
.esc-bent__alcance.es-club      { border-color: #CFE3F1; background: #EEF6FC; color: #0A76B0; }
.esc-bent__alcance.es-comunidad { border-color: #CDE7D6; background: #EDF7F0; color: #2F7D4F; }

/* La tuya: la chapa es el botón que lo cambia. */
button.esc-bent__alcance.es-mia { cursor: pointer; }
button.esc-bent__alcance.es-mia:hover,
button.esc-bent__alcance.es-mia:focus-visible { filter: brightness(.95); border-color: currentColor; }

/* --- Elegir el alcance, dentro de su ficha -------------------------------- */
.esc-bent__alcances { display: flex; flex-direction: column; gap: 8px; }
.esc-bent__alcances-intro { margin: 0 0 4px; color: #7A8290; font-size: 12.5px; }

.esc-bent__op {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E3E7EC;
    border-radius: 10px;
    background: #FFF;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.esc-bent__op:hover { border-color: #0A76B0; background: #FAFCFE; }
.esc-bent__op.es-activa { border-color: #0A76B0; box-shadow: inset 0 0 0 1px #0A76B0; background: #F5FAFD; }
.esc-bent__op > .ph { flex: 0 0 auto; font-size: 22px; color: #0A76B0; }
.esc-bent__op.es-privada > .ph   { color: #6B7280; }
.esc-bent__op.es-comunidad > .ph { color: #2F7D4F; }
.esc-bent__op-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.esc-bent__op-txt strong { color: #1A2B3C; font-size: 13.5px; }
.esc-bent__op-txt span { color: #7A8290; font-size: 11.5px; line-height: 1.4; }
.esc-bent__op-ahora {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #E8F3FB;
    color: #0A76B0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* --- Autor y «quién la ve», cada uno en su columna ------------------------ */
.esc-bent__cel.es-autor, .esc-bent__cel.es-ve { display: flex; align-items: center; }
.esc-bent__autor.es-mia { color: var(--b-texto, #E8EDF5); font-weight: 700; }

/* Los botones de acción salen del kit (mq-icono): aquí solo el hueco. */
.esc-bent__cel.es-acc { display: flex; gap: 4px; justify-content: flex-end; }

/* Las chapas de «quién la ve», dentro del panel marino: translúcidas y en su
   color, como los botones de acción. Las de fondo claro de más arriba son
   para pantallas en claro. */
.esc-bent-panel .esc-bent__alcance.es-privada {
    border-color: rgba(163, 175, 198, .35); background: rgba(163, 175, 198, .12); color: #C3CBDA;
}
.esc-bent-panel .esc-bent__alcance.es-club {
    border-color: rgba(72, 185, 245, .45); background: rgba(72, 185, 245, .14); color: #9BD7FF;
}
.esc-bent-panel .esc-bent__alcance.es-comunidad {
    border-color: rgba(106, 196, 134, .45); background: rgba(106, 196, 134, .14); color: #9FE0B6;
}
.esc-bent-panel .esc-bent__autor { color: var(--b-suave); font-size: 11.5px; }
.esc-bent-panel .esc-bent__autor.es-mia { color: #E8EDF5; }

/* --- Que se lea de un vistazo quien va con quien -------------------------- */
/* La raya entre filas, un poco mas marcada que las de dentro de una ficha. */
.esc-bent__fila { border-bottom-color: #4A5377; }
/* Y una franja alterna muy suave: con quince sesiones seguidas, el ojo
   necesita algo a lo que agarrarse para no saltar de linea. */
.esc-bent__fila:nth-child(even) { background: rgba(255, 255, 255, .022); }
.esc-bent__fila:hover { background: rgba(255, 255, 255, .06); }

/* La cabecera, separada del cuerpo con una linea de verdad. */
.esc-bent__cab { border-bottom: 2px solid #596389; }
.esc-bent__th { color: #C3CDDE; }

/* Las divisorias verticales entre columnas, como en el Banco de ejercicios:
   finas, y ninguna antes de la primera. */
.esc-bent__cab > .esc-bent__th + .esc-bent__th,
.esc-bent__fila > .esc-bent__cel + .esc-bent__cel {
    border-left: 1px solid rgba(255, 255, 255, .07);
    padding-left: 10px;
    margin-left: -4px;
}

/* Los ejercicios dentro de la ficha de una sesion: la misma raya visible. */
.esc-taller__linea { border-color: #4A5377; }

/* =============================================================================
   EL NIVEL PREVIO DEL DEPORTISTA (Inscripciones)
   -----------------------------------------------------------------------------
   Los dos botones del listado —el cuerpo para el nivel físico y la pelota para
   el deportivo— y la emergente donde se rellenan. Encendidos cuando ya están
   hechos, apagados mientras falten: así se ve de un vistazo a quién le falta.
   ========================================================================== */
/* El titulo que comparten las tres primeras columnas (corregir, nivel fisico
   y nivel deportivo). Son 92 px en total contando los huecos: el texto va
   centrado sobre los tres y parte en dos lineas si no cabe. */
.esc-ins-iniciales {
    text-align: center;
    line-height: 1.1;
    letter-spacing: .2px;
}

/* EL MANDO DE LOS DATOS INICIALES. Una sola caja con tres segmentos —lo que
   pidio, el test fisico y el deportivo—, porque los tres abren la misma ficha
   del deportista y solo cambia por donde la abren. */
.esc-ins-mando {
    justify-self: center;
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--esc-border);
    border-radius: 8px;
    background: #FFF;
    overflow: hidden;
}

.esc-ins-mando__b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--esc-border);
    background: transparent;
    color: var(--esc-text-soft);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.esc-ins-mando__b:first-child { border-left: 0; }

.esc-ins-mando__b:hover,
.esc-ins-mando__b:focus-visible {
    background: var(--esc-accent);
    color: #FFF;
}

.esc-previo { color: var(--esc-text-soft); }
.esc-previo:hover { color: #FFF; }
/* Rellenado = verde, los dos igual: de un vistazo se ve a quien le falta. */
.esc-previo.es-hecho { color: var(--esc-green); }
.esc-previo.es-hecho:hover { color: #FFF; }

.esc-nprev { display: flex; flex-direction: column; gap: 14px; }
.esc-nprev__linea { margin: 0; color: var(--esc-text-soft); font-size: 13px; line-height: 1.45; }
.esc-nprev__nota {
    display: flex; align-items: baseline; gap: 10px; padding: 10px 14px;
    border: 1px solid var(--esc-border); border-radius: 10px; background: var(--esc-bg-soft);
}
.esc-nprev__nota span { color: var(--esc-text-soft); font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.esc-nprev__nota b { font-size: 24px; font-weight: 800; color: var(--esc-title); }
.esc-nprev__nota small { color: var(--esc-text-soft); font-size: 12px; }

.esc-nprev__bloque { display: flex; flex-direction: column; gap: 8px; }
.esc-nprev__btit {
    margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--esc-border);
    color: var(--esc-title); font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
}
.esc-nprev__bloque.es-nivel { padding: 12px 14px; border: 1px solid var(--esc-border); border-radius: 10px; background: var(--esc-bg-soft); }

.esc-nprev__campo { display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; gap: 8px 12px; }
.esc-nprev__campo.es-texto, .esc-nprev__campo.es-opcion { grid-template-columns: minmax(0, 1fr) 190px; }
.esc-nprev__rot { color: var(--esc-text); font-size: 13.5px; font-weight: 600; }
.esc-nprev__ayuda { grid-column: 1 / -1; margin: 0; color: var(--esc-text-soft); font-size: 12px; }
.esc-nprev__bloque.es-nivel .esc-nprev__ayuda { grid-column: auto; }

/* El deslizador de 1 a 5, con el 0 como «sin valorar». */
.esc-nprev__escala { display: flex; align-items: center; gap: 10px; }
.esc-nprev__escala input[type="range"] { flex: 1; min-width: 0; accent-color: #0A76B0; cursor: pointer; }
.esc-nprev__valor {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px;
    border-radius: 8px; background: #0A76B0; color: #FFF; font-size: 13px; font-weight: 800;
}
.esc-nprev__campo.es-sin .esc-nprev__valor { background: var(--esc-border); color: var(--esc-text-soft); }

.esc-nprev__num, .esc-nprev__txt, .esc-nprev__sel {
    width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--esc-border);
    border-radius: 8px; background: var(--esc-bg); color: var(--esc-text); font-size: 13.5px;
}
.esc-nprev__bloque.es-nivel .esc-nprev__sel { max-width: 320px; }
.esc-nprev__si { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
.esc-nprev__si input { width: 17px; height: 17px; accent-color: #4E7F1F; cursor: pointer; }
.esc-nprev__obs {
    width: 100%; padding: 9px 11px; border: 1px solid var(--esc-border); border-radius: 8px;
    background: var(--esc-bg); color: var(--esc-text); font-family: inherit; font-size: 13.5px; resize: vertical;
}
.esc-nprev__pie { margin: 0; color: var(--esc-text-soft); font-size: 12px; }
@media (max-width: 620px) {
    .esc-nprev__campo { grid-template-columns: minmax(0, 1fr); }
}

/* El panel que confecciona las preguntas del nivel deportivo previo. Usa el
   cajón lateral de siempre (.esc-tdp) y añade lo suyo: la lista de preguntas
   y el pie con el botón de guardar, que se queda abajo pase lo que pase. */
.esc-nprev-panel { width: min(520px, 94vw); }
.esc-nprev-panel__lista { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.esc-nprev-panel__pie {
    position: sticky; bottom: -16px; margin: 0 -16px -16px; padding: 12px 16px;
    background: var(--esc-surface); border-top: 1px solid var(--esc-border);
}
.esc-nprev-panel__pie .btn { width: 100%; }

/* Cada apartado, con su nombre arriba y sus preguntas dentro: así se ve lo
   que se está montando igual que luego se verá en la emergente. */
.esc-nprev-bloq {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px; border: 1px solid var(--esc-border); border-radius: 12px; background: var(--esc-bg-soft);
}
.esc-nprev-bloq__cab { display: flex; align-items: center; gap: 6px; }
.esc-nprev-bloq__nom {
    flex: 1; min-width: 0; height: 32px; padding: 0 9px;
    border: 1px solid transparent; border-radius: 7px; background: transparent;
    color: var(--esc-title); font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
}
.esc-nprev-bloq__nom:hover { border-color: var(--esc-border); }
.esc-nprev-bloq__nom:focus { border-color: var(--esc-border); background: var(--esc-bg); text-transform: none; }
.esc-nprev-bloq__mas {
    align-self: flex-start; padding: 4px 10px; border: 1px dashed var(--esc-border); border-radius: 999px;
    background: none; color: var(--esc-text-soft); font-size: 12px; cursor: pointer;
}
.esc-nprev-bloq__mas:hover { color: var(--esc-title); border-color: var(--esc-text-soft); }

.esc-nprev-pre {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px; border: 1px solid var(--esc-border); border-radius: 9px; background: var(--esc-bg);
}
.esc-nprev-pre.es-retirada { opacity: .5; }
.esc-nprev-pre__fila { display: flex; align-items: center; gap: 6px; }
.esc-nprev-pre__fila.es-dos > * { flex: 1 1 0; min-width: 0; }
.esc-nprev-pre__fila.es-extra:empty { display: none; }
.esc-nprev-pre input, .esc-nprev-pre select {
    height: 32px; padding: 0 9px; border: 1px solid var(--esc-border); border-radius: 7px;
    background: var(--esc-bg); color: var(--esc-text); font-size: 13px;
}
.esc-nprev-pre__enun { flex: 1; min-width: 0; font-weight: 600; }
.esc-nprev-pre__op, .esc-nprev-pre__un { width: 100%; }
.esc-nprev-pre__mover { display: flex; gap: 2px; }
.esc-nprev-pre__b {
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
    border: 1px solid var(--esc-border); border-radius: 7px; background: var(--esc-bg);
    color: var(--esc-text-soft); font-size: 13px; cursor: pointer;
}
.esc-nprev-pre__b:hover { color: var(--esc-title); border-color: var(--esc-border-strong, var(--esc-border)); }
.esc-nprev-pre__b.es-quitar:hover { color: #A33B37; border-color: #A33B37; }

/* La chapa del GR? (nivel de grupo orientativo): hueca, para que no se
   confunda con el nivel al que se apuntó, que va en chapa llena. */
.esc-codigo.es-hueca { background: transparent; border: 1.5px solid currentColor; font-weight: 800; }
.esc-alumno__gr { display: flex; align-items: center; }

/* -----------------------------------------------------------------------------
   EL TEST DE ESTADO FÍSICO DENTRO DE LA ESCUELA
   El formulario es el del Entrenador personal y su hoja (club_medico_testfis)
   está escrita con los tokens del kit de MISQUAD. Aquí no están, así que se
   traducen a los de la escuela — solo dentro de esta emergente, sin tocar
   nada más.
-------------------------------------------------------------------------- */
.esc-nprev-test {
    --mq-texto:        var(--esc-text);
    --mq-suave:        var(--esc-text-soft);
    --mq-ficha:        var(--esc-surface);
    --mq-fondo-suave:  #E7EBEF;
    --mq-borde-ficha:  var(--esc-border);
    --mq-borde-fuerte: var(--esc-border);
    --mq-control-borde:var(--esc-border);
    --mq-acento:       #0A76B0;
    --mq-acento-suave: rgba(10, 118, 176, .14);
    --mq-ok-txt:       #4E7F1F;
    --mq-ok-suave:     #EAF4DE;
    --mq-mal-txt:      #A33B37;
    --mq-sombra-ficha: 0 1px 2px rgba(45, 51, 73, .05), 0 12px 28px -20px rgba(45, 51, 73, .35);
    --mq-sombra-alta:  0 6px 18px rgba(45, 51, 73, .18);

    /* Y los del Entrenador personal, que son otros: la fecha, las marcas, las
       observaciones y el boton de guardar son suyos (.cep-campo, .cep-btn) y
       los tokens --cep-* solo existen dentro de #cep o de SU emergente. Aqui
       no hay ninguno de los dos, asi que sin esto el borde y el fondo de cada
       campo se quedaban invalidos y las cajas no se veian. */
    --cep-texto:       var(--esc-text);
    --cep-suave:       var(--esc-text-soft);
    --cep-borde:       var(--esc-border);
    --cep-ficha:       var(--esc-surface);
    --cep-control:     #F2F5F7;
    --cep-acento:      #0A76B0;
    --cep-acento-suave:rgba(10, 118, 176, .14);
    --cep-ok:          #4E7F1F;
    --cep-aviso:       #B06A0A;
    --cep-mal:         #A33B37;
    --cep-radio:       14px;
}
/* La plataforma hace flotar los <p>, <ul> y titulares de toda la página, y el
   formulario del test viene de un área que lo anula dentro de SU contenedor.
   Aquí hay que volver a decirlo: sin esto, la fila de baterías se coloca «al
   lado» del párrafo flotado, se queda sin ancho y se sale por la derecha. */
.esc-nprev-test p, .esc-nprev-test ul, .esc-nprev-test ol,
.esc-nprev-test h2, .esc-nprev-test h3, .esc-nprev-test h4 { float: none; }
.esc-nprev-test .tf-bats, .esc-nprev-test .tf-form { clear: both; width: 100%; }
.esc-nprev-test * { box-sizing: border-box; }

/* Las baterías, más estrechas: en la emergente no caben las del área. */
.esc-nprev-test .tf-bats { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px; }
.esc-nprev-test .tf-bat { padding: 11px; border-radius: 12px; }
.esc-nprev-test .tf-bat .ph { font-size: 20px; }
.esc-nprev-test .tf-bat strong { font-size: 13.5px; }
.esc-nprev-test .cep-ficha { margin: 0; padding: 0; border: 0; background: none; }

/* CONTRASTE: el cuerpo de la emergente, gris; cada cuadro, blanco con su
   borde y su sombra. Con todo blanco sobre blanco las fichas de cada prueba
   no se separaban del fondo y no se veia donde empezaba una y acababa otra. */
#esc-modal-cuerpo:has(.esc-nprev-test) { background: #E2E7EB; }

.esc-nprev-test .tf-fprueba,
.esc-nprev-test .tf-bat,
.esc-nprev-test .tf-previa,
.esc-nprev-test .tf-cat-prueba {
    border-color: #BCC8D4;
    background: var(--esc-surface);
    box-shadow: var(--esc-shadow);
}

.esc-nprev-test .tf-previa { box-shadow: 0 -4px 14px rgba(45, 51, 73, .10); }

.esc-nprev-test .cep-campo input,
.esc-nprev-test .cep-campo textarea,
.esc-nprev-test .cep-campo select,
.esc-nprev-test .tf-fprueba__campos input { border-color: #C3CDD8; }

/* El de guardar, verde como todos los de guardar de la escuela. */
.esc-nprev-test .cep-btn.es-verde {
    border-color: var(--esc-green-border);
    background: var(--esc-green);
    color: #FFF;
}

/* =====================================================================
   INSCRIPCIONES · LA FICHA COMPLETA DE UN DEPORTISTA (cuatro columnas)
   ---------------------------------------------------------------------
   Lo que pidio al inscribirse (editable), el formulario que contesto, el
   test fisico y el test deportivo inicial, uno al lado de otro. Se abre
   desde los tres iconos de la fila; el que la abre pone el foco en SU
   columna y las demas salen con un velo, que se quita con el interruptor
   de arriba o pulsando la propia columna.
   ===================================================================== */
.esc-ficha4 { display: flex; flex-direction: column; gap: 14px; }

/* Todo el ancho que no sea columna, al minimo: el velo de fuera, el acolchado
   del cuerpo del modal y el hueco de la barra de cerrar. Son unos 60px que se
   reparten entre las cuatro. */
.esc-modal:has(.esc-ficha4) { padding: 8px; }
.esc-modal__caja:has(.esc-ficha4) .esc-modal__cuerpo { padding: 12px; }

.esc-ficha4__barra {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--esc-borde, #E3E7EC);
}
.esc-ficha4__quien { font-size: 14px; font-weight: 700; }

/* El interruptor del velo */
.esc-ficha4__sw { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; cursor: pointer; }
.esc-ficha4__sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.esc-ficha4__pista {
    position: relative; display: inline-block; width: 36px; height: 20px;
    border-radius: 20px; background: #CED4DA; transition: background .2s ease;
}
.esc-ficha4__pista::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #FFFFFF; transition: transform .2s ease;
}
.esc-ficha4__sw input:checked + .esc-ficha4__pista { background: var(--esc-verde, #12B886); }
.esc-ficha4__sw input:checked + .esc-ficha4__pista::after { transform: translateX(16px); }
.esc-ficha4__swtxt { color: var(--esc-suave, #7A8290); font-size: 12.5px; }

/* Las cuatro columnas */
.esc-ficha4__cols {
    display: grid; grid-template-columns: repeat(4, minmax(400px, 1fr)); gap: 14px;
    align-items: start;
}
/* Si la ventana no da para los cuatro, la ficha se desplaza en horizontal.
   Es preferible a estrujar las columnas: con menos de 380px el test fisico y
   el deportivo parten las palabras y sacan su propia barra de scroll. */
.esc-ficha4 { overflow-x: auto; }
.esc-ficha4__col {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    border: 1px solid var(--esc-borde, #E3E7EC); border-radius: 12px;
    background: #FFFFFF; overflow: hidden;
}
.esc-ficha4__cab {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-bottom: 1px solid var(--esc-raya, #EEF1F4);
    background: var(--esc-fondo, #F6F8FA);
}
.esc-ficha4__cab h4 { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; }
.esc-ficha4__cab .ph { color: var(--esc-suave, #7A8290); font-size: 16px; }

/* EL CANDADO DE LA COLUMNA, al otro extremo del titulo. Cerrado es el estado
   normal: la ficha se abre para leerla. Abierto se tine de verde —el mismo
   verde de guardar— para que de un vistazo se vea cual de las cuatro esta
   suelta. */
.esc-ficha4__llave {
    flex: none; margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    border: 1px solid var(--esc-borde, #E3E7EC); border-radius: 50%;
    background: #FFFFFF; color: var(--esc-suave, #7A8290);
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.esc-ficha4__llave .ph { font-size: 15px; color: inherit; }
.esc-ficha4__llave:hover { border-color: var(--esc-suave, #7A8290); color: var(--esc-texto, #1A2B3C); }
.esc-ficha4__llave.es-abierta {
    border-color: var(--esc-green-border, #2FBF7E);
    background: var(--esc-green, #3DF59E);
    color: #103A28;
}
.esc-ficha4__col.es-abierta { border-color: var(--esc-green-border, #2FBF7E); }
.esc-ficha4__col.es-abierta .esc-ficha4__cab { background: rgba(61, 245, 158, .12); }

/* Cerrada, la primera columna ensena sus campos pero apagados: se lee cada
   cosa donde se grabo, sin que parezca que se puede escribir. */
.esc-ins-form.es-bloqueada { opacity: .9; }
.esc-ins-form.es-bloqueada input,
.esc-ins-form.es-bloqueada select,
.esc-ins-form.es-bloqueada textarea {
    border-color: var(--esc-raya, #EEF1F4) !important;
    background: var(--esc-fondo, #F6F8FA) !important;
    color: var(--esc-texto, #1A2B3C) !important;
    cursor: default;
}
.esc-ins-form.es-bloqueada label { cursor: default; }

/* Las opciones de una pregunta de varias respuestas, al corregirla. */
.esc-ficha4__ops { display: flex; flex-direction: column; gap: 6px; }
.esc-ficha4__op {
    display: flex; align-items: center; gap: 8px;
    margin: 0; font-size: 12.5px; font-weight: 400; cursor: pointer;
}
.esc-ficha4__op input { margin: 0; }
.esc-ficha4__cuerpo { padding: 16px 18px; max-height: 74vh; overflow-y: auto; overflow-x: hidden; }
.esc-ficha4__pie { display: flex; justify-content: flex-end; margin-top: 12px; }

/* Las columnas de resultado: una fila por cosa preguntada, con lo contestado
   a la derecha. Se lee en diagonal, que es para lo que se abre esta ficha. */
.esc-ficha4__dato {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--esc-raya, #F4F6F8);
    font-size: 12.5px;
}
.esc-ficha4__dato:last-of-type { border-bottom: 0; }
.esc-ficha4__dato b { flex: 1; min-width: 0; font-weight: 600; }
.esc-ficha4__dato span { flex: 0 1 auto; color: var(--esc-suave, #5F6773); text-align: right; }

.esc-ficha4__resumen {
    margin-top: 12px; padding: 10px 12px; border-radius: 8px;
    background: #E8F5E9; color: #2B8A3E; font-size: 12.5px; text-align: center;
}
.esc-ficha4__resumen b { font-weight: 800; }
.esc-ficha4__resumen small { display: block; margin-top: 4px; color: #5F6773; font-size: 11.5px; }
.esc-ficha4__sin { color: var(--esc-suave, #7A8290); font-size: 12.5px; }

/* El velo: tapa la columna que no se ha pedido, sin esconderla del todo */
.esc-ficha4__velo {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: rgba(246, 248, 250, .92);
    color: var(--esc-suave, #7A8290); font-size: 22px; cursor: pointer;
    transition: opacity .2s ease;
}
.esc-ficha4__velo:hover { background: rgba(246, 248, 250, .85); color: var(--esc-texto, #1A2B3C); }
.esc-ficha4__col.es-foco .esc-ficha4__velo,
.esc-ficha4.es-sin-velo .esc-ficha4__velo { display: none; }

/* Por debajo de 1700px no caben cuatro columnas legibles: dos y dos. */
@media (max-width: 1700px) {
    .esc-ficha4__cols { grid-template-columns: repeat(2, minmax(400px, 1fr)); }
}
@media (max-width: 900px) {
    .esc-ficha4__cols { grid-template-columns: minmax(0, 1fr); }
    .esc-ficha4__cuerpo { max-height: none; }
}

/* -----------------------------------------------------------------------------
   BANCO DE SESIONES · el nivel abierto y la fila sobre la que esta el raton
   Va al final del fichero a proposito: manda sobre los hover de mas arriba.
-------------------------------------------------------------------------- */

/* El nivel desplegado, del color de su propio GR. */
.esc-bent-grupo.is-abierto > .esc-bent-grupo__cab {
    background: var(--esc-nivel, #FF00CA);
    color: #FFF;
}
.esc-bent-grupo.is-abierto > .esc-bent-grupo__cab .esc-bent-grupo__flecha,
.esc-bent-grupo.is-abierto > .esc-bent-grupo__cab .esc-bent-grupo__cuenta {
    color: rgba(255, 255, 255, .9);
}

/* La chapa, al reves: fondo blanco y la letra del color del nivel. */
.esc-bent-grupo.is-abierto > .esc-bent-grupo__cab .esc-bent__gr {
    background: #FFF !important;
    color: var(--esc-nivel, #FF00CA);
}

/* Y la fila de titulos, del mismo color. */
.esc-bent-grupo.is-abierto .esc-bent__cab {
    background: var(--esc-nivel, #FF00CA);
    border-bottom-color: rgba(255, 255, 255, .35);
}
.esc-bent-grupo.is-abierto .esc-bent__cab .esc-bent__th { color: #FFF; }

/* LOS NIVELES DE COLOR CLARO
   Diez de los diecinueve —amarillo, verde, naranja…— no admiten letra
   blanca encima. Ahi la letra va oscura y la chapa se invierte al reves:
   fondo oscuro y el nombre del nivel en su color. Quien decide cual es
   claro es colorClaro() en banco_entrenamientos.js. */
.esc-bent-grupo.is-abierto.es-color-claro > .esc-bent-grupo__cab,
.esc-bent-grupo.is-abierto.es-color-claro > .esc-bent-grupo__cab .esc-bent-grupo__flecha,
.esc-bent-grupo.is-abierto.es-color-claro > .esc-bent-grupo__cab .esc-bent-grupo__cuenta,
.esc-bent-grupo.is-abierto.es-color-claro .esc-bent__cab .esc-bent__th {
    color: #10243A;
}
.esc-bent-grupo.is-abierto.es-color-claro .esc-bent__cab {
    border-bottom-color: rgba(16, 36, 58, .35);
}
.esc-bent-grupo.is-abierto.es-color-claro > .esc-bent-grupo__cab .esc-bent__gr {
    background: #10243A !important;
}

/* LA FILA POR LA QUE PASA EL RATON · verde fluor
   Al ser un fondo claro, TODO lo de la fila tiene que cambiar de color: las
   chapas, el alcance y los cuatro iconos de accion estan pensados para fondo
   oscuro y encima del verde se perderian. Por eso aqui va, ademas del fondo,
   el texto y los iconos en oscuro, y los botones con un fondo propio tenue
   para que sigan leyendose como botones. */
.esc-bent .esc-bent__fila:hover,
.esc-bent__fila:nth-child(even):hover {
    background: #B6FF00;
    color: #12230A;
}

/* Todo el texto de la fila, oscuro. */
.esc-bent .esc-bent__fila:hover .esc-bent__cel,
.esc-bent .esc-bent__fila:hover .esc-bent__nombre,
.esc-bent .esc-bent__fila:hover .esc-bent__autor,
.esc-bent .esc-bent__fila:hover .esc-bent__autor .ph,
.esc-bent .esc-bent__fila:hover .esc-bent__obs,
.esc-bent .esc-bent__fila:hover .esc-bent__num,
.esc-bent .esc-bent__fila:hover .esc-bent__num-lab,
.esc-bent .esc-bent__fila:hover .esc-bent__tiempo,
.esc-bent .esc-bent__fila:hover .esc-bent__tiempo .ph,
.esc-bent .esc-bent__fila:hover .esc-bent__fecha {
    color: #12230A;
}

/* El alcance y los cuatro iconos: fondo claro y dibujo oscuro, cada uno
   conservando su color (azul el de ver, ambar el de corregir, rojo el de
   retirar) pero en version oscura para que se vea sobre el verde. */
.esc-bent .esc-bent__fila:hover .esc-bent__alcance,
.esc-bent .esc-bent__fila:hover .esc-bent__alcance .ph,
.esc-bent .esc-bent__fila:hover .esc-bent__alcance span {
    background: rgba(255, 255, 255, .55);
    color: #12230A;
}
.esc-bent .esc-bent__fila:hover .esc-bent__accion {
    background: rgba(255, 255, 255, .6);
    color: #12230A;
}
.esc-bent .esc-bent__fila:hover .esc-bent__accion .ph { color: inherit; }
.esc-bent .esc-bent__fila:hover .esc-bent__accion:nth-child(3) { color: #8A5A00; }
.esc-bent .esc-bent__fila:hover .esc-bent__accion:nth-child(4) { color: #A02214; }
.esc-bent .esc-bent__fila:hover .esc-bent__accion:hover {
    background: #FFF;
}

/* La chapa del nivel, en negativo: su color sobre oscuro. En amarillo o en
   verde no se distinguiria del fondo de la fila. */
.esc-bent .esc-bent__fila:hover .esc-bent__gr {
    background: #12230A !important;
    color: var(--esc-nivel, #FFF);
}

/* Las burbujas de los cuatro iconos de acciones: van en la ultima columna,
   asi que se alinean por su borde derecho —centradas se saldrian de la
   pantalla— y se ajustan al texto, que es corto. */
.esc-bent__accion[data-ayuda]::after {
    left: auto;
    right: 0;
    width: auto;
    max-width: 240px;
    transform: none;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   FICHA DE UNA SESION · las cuatro partes, perfiladas
   La cabecera de cada parte era una franja casi blanca con una rayita de
   color: no se distinguia una parte de otra. Ahora cada una lleva su color
   en solido, con su icono, y los ejercicios que cuelgan van marcados con ese
   mismo color por la izquierda.
-------------------------------------------------------------------------- */
.esc-taller__sesion.es-ficha .esc-taller__fase {
    margin: 20px 0 8px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--esc-fase, #8E9BA8);
    color: #FFF;
    font-size: 11.5px;
    box-shadow: 0 2px 6px rgba(26, 43, 60, .18);
}
.esc-taller__sesion.es-ficha > .esc-taller__fase:first-child { margin-top: 0; }
.esc-taller__sesion.es-ficha .esc-taller__fase-i { font-size: 15px; }
.esc-taller__sesion.es-ficha .esc-taller__fase-t { font-weight: 800; letter-spacing: .5px; }
.esc-taller__sesion.es-ficha .esc-taller__fase-c {
    margin-left: auto;
    color: rgba(255, 255, 255, .92);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* Los ejercicios de la parte: raya de su color y un poco metidos, para que
   se lean como un bloque y no como una lista suelta. */
.esc-taller__sesion.es-ficha .esc-taller__linea.es-de-fase {
    margin-left: 10px;
    border-left: 3px solid var(--esc-fase, #CBD2D9);
}

/* -----------------------------------------------------------------------------
   BANCO DE SESIONES · el rango de duracion (dos pelotitas sobre una barra)
   Son dos input range superpuestos: el de abajo mueve el minimo y el de
   arriba el maximo. Los inputs van transparentes y sin raton —solo sus
   pelotitas lo reciben—, y lo que se ve (la pista gris y el tramo elegido)
   son dos span debajo.
-------------------------------------------------------------------------- */
.esc-bent-rango {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--b-borde, #4A5377);
    border-radius: 8px;
    background: var(--b-caja2, #333A55);
}
.esc-bent-rango[hidden] { display: none; }
.esc-bent-rango.es-filtrando { border-color: #B6FF00; }

.esc-bent-rango__et {
    color: var(--b-suave, #B6C1D4);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase;
    white-space: nowrap;
}

.esc-bent-rango__barra {
    position: relative;
    width: 150px;
    height: 18px;
    flex: 0 0 auto;
}

.esc-bent-rango__pista,
.esc-bent-rango__sel {
    position: absolute;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 999px;
    pointer-events: none;
}
.esc-bent-rango__pista { left: 0; right: 0; background: rgba(255, 255, 255, .18); }
.esc-bent-rango__sel   { background: #B6FF00; }

/* Los dos controles, encima y transparentes. */
.esc-bent-rango__barra input[type="range"] {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    pointer-events: none;      /* la barra no, solo las pelotitas */
    -webkit-appearance: none;
    appearance: none;
}
.esc-bent-rango__barra input[type="range"]:focus { outline: none; }

.esc-bent-rango__barra input[type="range"]::-webkit-slider-runnable-track {
    height: 18px; background: none; border: 0;
}
.esc-bent-rango__barra input[type="range"]::-moz-range-track {
    height: 18px; background: none; border: 0;
}

.esc-bent-rango__barra input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px; height: 14px;
    margin-top: 2px;
    border: 2px solid #1F2637;
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    cursor: grab;
    pointer-events: auto;
}
.esc-bent-rango__barra input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px;
    border: 2px solid #1F2637;
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    cursor: grab;
    pointer-events: auto;
}
.esc-bent-rango__barra input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.esc-bent-rango__barra input[type="range"]:focus-visible::-webkit-slider-thumb {
    border-color: #B6FF00;
}

.esc-bent-rango__txt {
    min-width: 76px;
    color: var(--b-texto, #EEF2F8);
    font-size: 12px; font-weight: 700;
    white-space: nowrap;
}

.esc-bent-rango__quitar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--b-texto, #EEF2F8);
    cursor: pointer;
}
.esc-bent-rango__quitar:hover { background: #B6FF00; color: #12230A; }
.esc-bent-rango__quitar[hidden] { display: none; }

/* En pantallas estrechas el rango se va a su propia linea. */
@media (max-width: 1100px) {
    .esc-bent-barra { flex-wrap: wrap; }
    .esc-bent-rango { order: 3; }
}
/* Y también cuando lo estrecho es la caja (el menú lateral le quita sitio): a 1.200 px de ventana la
   barra no partía y el buscador se quedaba en 209 px, cortando «Cualquier nivel» en «Cualquie». */
.esc-bent-panel { container-type: inline-size; }
@container (max-width: 980px) {
    .esc-bent-barra { flex-wrap: wrap; }
    .esc-bent-rango { order: 3; }
    .esc-bent-buscador { flex: 1 1 360px; }
}

/* El cuerpo de la emergente de una sesion, en gris: las cajas de cada
   ejercicio son blancas y sobre fondo blanco no se despegaban. */
#esc-modal-cuerpo:has(.esc-taller__sesion.es-ficha) { background: #D6DCE2; }

#esc-modal-cuerpo:has(.esc-taller__sesion.es-ficha) .esc-taller__linea {
    background: #FFF;
    border-color: #B9C3CD;
    box-shadow: 0 1px 2px rgba(45, 51, 73, .10);
}

/* De donde viene la sesion, en el mismo verde que la fila destacada del
   listado: es lo que dice de que planificacion sale y con que codigo. */
.esc-bent-ficha__de {
    display: inline-block;
    margin: 0 0 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #B6FF00;
    color: #12230A;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
}