@import url('/fuentes/fuentes.css');

/* ══ Sistema de diseño · dirección «Cancha» ═════════════════════════════════
   Los nombres son los del sistema, no los del color: --qj-accion no es «verde»,
   y el día que cambie el verde no habrá que renombrar nada. */
:root {
    /* Marca */
    --qj-accion: #00C46A;          /* fondo de acción y de «juegas». Nunca como texto */
    --qj-accion-texto: #00713F;    /* el verde que sí se puede leer sobre claro */
    --qj-accion-sobre-oscuro: #6EF0AE;
    --qj-degradado: linear-gradient(120deg, #1BE07E, #00C9A0, #1C7FD6);

    /* Texto */
    --qj-tinta: #0A1435;           /* texto principal y fondos de cabecera */
    --qj-texto: #41526A;
    --qj-apagado: #5B6B7C;         /* secundario y «cerrado» */
    --qj-tenue: #7A8899;

    /* Estados. Ninguno se usa solo: siempre con forma o texto */
    --qj-espera: #B25A00;          /* el más frágil en contraste: no aclararlo */
    --qj-espera-fondo: #FDF3E7;
    --qj-error: #C4271F;
    --qj-error-fondo: #FCEFEE;
    --qj-info: #0F5FA6;
    --qj-exito-fondo: #E6F7EF;

    /* Superficies */
    --qj-fondo: #F2F5F4;
    --qj-superficie: #FFFFFF;
    --qj-borde: #E1E7E4;
    --qj-borde-fuerte: #C7D6E4;

    /* Tipos */
    --qj-titulares: 'Bricolage Grotesque', system-ui, sans-serif;
    --qj-texto-fuente: 'Instrument Sans', system-ui, sans-serif;

    /* Espaciado, base 4 */
    --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
    --e6: 24px; --e8: 32px; --e12: 48px; --e20: 80px;

    /* Radios */
    --r-chip: 6px; --r-campo: 10px; --r-boton: 12px;
    --r-tarjeta: 16px; --r-heroe: 20px; --r-redondo: 999px;

    /* Elevación */
    --s1: 0 1px 2px rgba(10, 20, 53, .06);
    --s2: 0 4px 12px rgba(10, 20, 53, .10);
    --s3: 0 18px 45px -28px rgba(10, 20, 53, .45);

    /* Movimiento */
    --t-control: 120ms; --t-entrada: 200ms; --t-celebracion: 600ms;

    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--qj-texto-fuente);
    font-size: 17px;                 /* densidad de web; el panel baja a 14 */
    background-color: var(--qj-fondo);
    color: var(--qj-tinta);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--qj-titulares);
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
}

/* Todo importe y toda hora: en una columna los dígitos tienen que caer alineados. */
.cifra, .numero, td.numero, .importe, time { font-variant-numeric: tabular-nums; }

/* El foco es un contorno de 3 px separado 2. Nunca outline:none sin sustituto. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--qj-accion-texto);
    outline-offset: 2px;
    border-radius: var(--r-chip);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.pagina {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Cabecera de las páginas de utilidad: invitación, «tus partidos», nueva
   contraseña y la entrada al panel. La portada trae la suya. */
.cabecera {
    display: flex;
    align-items: center;
    gap: var(--e4);
    padding: var(--e3) var(--e6);
    background: var(--qj-superficie);
    border-bottom: 1px solid var(--qj-borde);
}

/* El logotipo entero lleva el nombre en tinta horneado, así que solo vale sobre
   fondo claro. Donde el fondo es oscuro va la marca sola, que no lleva texto. */
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { display: block; height: 34px; width: auto; }

.pie-marca-simbolo { height: 18px; width: auto; vertical-align: -3px; margin-right: 2px; }

.cabecera-acciones { margin-left: auto; }

/* En la cabecera el botón es un botón, no una barra de lado a lado. */
.cabecera-acciones .boton {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0 var(--e4);
    height: 40px;
    font-size: 15px;
}

.contenido {
    flex: 1;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--e6) var(--e4) var(--e12);
}

/* Una lista de sitios a los que entrar quiere ancho; una invitación se lee mejor
   estrecha. El :has deja que lo pida la página en vez de imponerlo el layout. */
.contenido:has(.panel-lista) { max-width: 1120px; padding: var(--e8) var(--e6) var(--e12); }

.pie {
    padding: 1.5rem;
    text-align: center;
    color: var(--qj-apagado);
    font-size: 0.85rem;
    border-top: 1px solid var(--qj-borde);
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.pie a {
    color: var(--qj-apagado);
}

.tarjeta {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    margin-bottom: 1rem;
}

h1 {
    font-size: 1.9rem;
    margin: 0 0 0.5rem;
}

h2 {
    font-size: 1.2rem;
    margin: 0 0 0.75rem;
}

.secundario {
    color: var(--qj-apagado);
    font-size: 0.95rem;
}

/* Los botones viven todos en el bloque de más abajo. Aquí había una segunda
   definición que el navegador descartaba por venir antes, y arreglar esta no
   cambiaba nada en pantalla: el rastro de haber crecido por capas. */

.etiqueta {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: var(--qj-accion);
}

.etiqueta-aviso {
    background: var(--qj-espera);
}

.etiqueta-error {
    background: var(--qj-error);
}

.lista-jugadores {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-jugadores li {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--qj-borde);
    display: flex;
    gap: 0.75rem;
}

.lista-jugadores li:last-child {
    border-bottom: none;
}

.puesto {
    color: var(--qj-apagado);
    min-width: 1.75rem;
}

.aviso {
    padding: 1rem;
    border-radius: 12px;
    background: var(--qj-espera-fondo);
    color: var(--qj-espera);
    margin-bottom: 1rem;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.campo {
    display: block;
    width: 100%;
    padding: 0.8rem 1rem;
    margin-bottom: 0.7rem;
    border: 1px solid var(--qj-borde);
    border-radius: 12px;
    font-size: 1rem;
    background: #fff;
    color: var(--qj-tinta);
}

.campo:focus {
    outline: 2px solid var(--qj-accion);
    outline-offset: 1px;
}

/* ══ Panel de gestión ══════════════════════════════════════════════════════
   Herramienta de trabajo, no escaparate: cero animación entre quien atiende y su
   tarea. La navegación va a un lado y no arriba, porque son diez secciones y en
   una barra horizontal no caben sin encogerse hasta no poder leerse. */

.panel { display: flex; min-height: 100vh; background: var(--qj-fondo); }

.saltar {
    position: absolute;
    left: -9999px;
    z-index: 10;
    padding: var(--e2) var(--e4);
    background: var(--qj-tinta);
    color: #fff;
    border-radius: 0 0 var(--r-campo) 0;
}
.saltar:focus { left: 0; }

.panel-lateral-nav {
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: 212px;
    flex: none;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    padding: 18px 0;
    background: var(--qj-tinta);
    color: #fff;
}

.panel-club {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px 18px;
    margin-bottom: var(--e3);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.panel-logo { width: 32px; height: 32px; flex: none; border-radius: 9px; background: #fff; }

/* Un logo real casi nunca es cuadrado. `contain` lo mete entero sin recortarlo, y dejarle
   crecer a lo ancho evita que un escudo apaisado quede diminuto dentro de un cuadrado.
   Las iniciales, que sí son un cuadro de color, se quedan con la regla de arriba. */
img.panel-logo { width: auto; max-width: 52px; object-fit: contain; }

.panel-iniciales {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--qj-degradado);
    color: #04220F;
    font-size: 13px;
    font-weight: 800;
}

.panel-club-nombre {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-nav { display: flex; flex-direction: column; }

.panel-nav a {
    padding: 9px 18px;
    border-left: 3px solid transparent;
    color: #C7D6E4;
    text-decoration: none;
    font-size: 14px;
}

.panel-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.panel-nav a.active {
    background: rgba(110, 240, 174, .14);
    border-left-color: var(--qj-accion-sobre-oscuro);
    color: #fff;
    font-weight: 700;
}

.panel-salir { margin-top: auto; padding: 0 var(--e3); }

.panel-firma { display: block; padding: var(--e3) 18px 0; opacity: .55; }
.panel-firma img { display: block; height: 20px; width: auto; }
.panel-firma:hover { opacity: 1; }
.panel .panel-salir button.enlace { color: #9FB3C8; }
.panel .panel-salir button.enlace:hover { color: #fff; }

.panel-contenido { flex: 1; min-width: 0; max-width: 1400px; padding: 28px 32px 64px; }
.panel-contenido h1 { font-size: 26px; margin: 0 0 6px; }

/* En un portátil pequeño la barra pasa arriba: 212 px de menos son dos columnas
   más de agenda. */
@media (max-width: 900px) {
    .panel { flex-direction: column; }
    .panel-lateral-nav { width: auto; height: auto; position: static; padding: var(--e3) 0; }
    .panel-nav { flex-direction: row; overflow-x: auto; }
    .panel-nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
    .panel-nav a.active { border-left: none; border-bottom-color: var(--qj-accion-sobre-oscuro); }
    .panel-salir { margin: 0 0 0 auto; }
    .panel-firma { display: none; }
    .panel-contenido { padding: var(--e4); }
}

/* La entrada al panel se define más abajo, con su tarjeta. La lista de centros ya
   no comparte esta anchura: es una rejilla de sitios a los que entrar. */
.panel-acceso form, .formulario { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.panel-acceso label, .formulario label { font-size: 13px; font-weight: 600; color: var(--qj-tinta); }
.formulario label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.panel-acceso input, .formulario input, .barra input, .importador textarea {
    padding: 12px; border: 1.5px solid var(--qj-borde); border-radius: 12px;
    font-size: 15px; font-family: inherit; background: #fff;
}

.panel-acceso input:focus, .formulario input:focus, .importador textarea:focus {
    outline: none; border-color: var(--qj-accion);
}

/* Antes esto pintaba de verde CUALQUIER botón dentro del panel, y las casillas de
   la agenda son botones: el día entero salía del color de acción. Ahora solo
   alcanza a los botones sueltos, no a los que son parte de un componente. */
.panel button:not(.celda):not(.enlace):not(.chip),
.panel-acceso button {
    padding: 12px 20px; border: 0; border-radius: 12px;
    background: var(--qj-accion); color: var(--qj-tinta); font-size: 15px; font-weight: 600;
    cursor: pointer; font-family: inherit;
}

.panel button:not(.celda):not(.enlace):not(.chip):hover,
.panel-acceso button:hover { background: #00B25F; }

.panel button.secundario {
    background: var(--qj-superficie); color: var(--qj-tinta); border: 1.5px solid var(--qj-borde-fuerte);
}
.panel button.secundario:hover { background: var(--qj-superficie); border-color: var(--qj-tinta); }

.panel button.enlace, .panel-lista button.enlace {
    background: none; color: var(--qj-apagado); padding: 8px; font-weight: 400;
}

.centros { list-style: none; padding: 0; margin: 20px 0; }
.centros a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px; margin-bottom: 10px; background: #fff; border-radius: 14px;
    text-decoration: none; color: var(--qj-tinta); box-shadow: 0 2px 10px rgb(15 23 42 / 5%);
}
.centros a:hover { box-shadow: 0 4px 16px rgb(15 23 42 / 10%); }

.tarjetas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.tarjeta {
    flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px;
    padding: 20px; background: #fff; border-radius: 16px; text-decoration: none;
    color: var(--qj-tinta); box-shadow: 0 2px 10px rgb(15 23 42 / 5%);
}
.tarjeta.apagada { opacity: .45; }
.cifra { font-size: 28px; font-weight: 700; }

.barra { display: flex; gap: 10px; margin: 20px 0; }
.barra input { flex: 1; }

.tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; }
.tabla th {
    text-align: left; padding: 12px 16px; background: var(--qj-fondo);
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--qj-tenue);
}
.tabla td { padding: 13px 16px; border-top: 1px solid var(--qj-borde); font-size: 15px; }

/* La columna de acciones no aporta información: se queda estrecha y a la derecha,
   para que el nombre y el correo se lleven el ancho. */
.tabla td.acciones-fila { width: 1%; white-space: nowrap; text-align: right; }
.tabla tr:hover td { background: var(--qj-fondo); }

/* Las observaciones van bajo el nombre, en pequeño y recortadas: son un recordatorio
   del mostrador, no una columna más. Enteras se leen al editar y en el title. */
.nota-ficha {
    display: block; margin-top: 2px; max-width: 34ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; color: var(--qj-apagado);
}

/* La ficha se abre dentro de la propia tabla, así que ocupa el ancho de la fila
   y se distingue con fondo y un filo a la izquierda. */
.fila-editando > td { background: var(--qj-fondo); border-left: 3px solid var(--qj-accion); padding: 18px 16px; }
.fila-editando .observaciones { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; margin-top: 12px; }
.fila-editando .observaciones input {
    padding: 10px; border: 1.5px solid var(--qj-borde); border-radius: 10px;
    font-size: 15px; font-family: inherit; background: #fff; font-weight: 400;
}
.fila-editando .apagado { font-size: 13px; margin: 12px 0 0; }
.fila-editando .acciones { display: flex; gap: 10px; margin-top: 16px; }
.fila-editando .error { margin: 0 0 12px; }

.importador { background: #fff; border-radius: 16px; padding: 20px; margin-bottom: 20px; }
.importador textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 13px; }
.importador .acciones { display: flex; gap: 10px; margin-top: 12px; }
.resumen-importacion { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--qj-borde); }
.incidencias { font-size: 14px; color: var(--qj-espera); margin: 8px 0 0; padding-left: 20px; }

.aviso {
    background: var(--qj-espera-fondo); color: var(--qj-espera); padding: 14px 16px;
    border-radius: 12px; margin: 20px 0; font-size: 15px;
}
.aviso a { color: var(--qj-espera); }

/* ══ Cobro desde la agenda ═════════════════════════════════════════════════
   Va dentro de la ficha lateral de la reserva: el mostrador cobra mirando la
   misma pantalla donde ve la pista y la hora, sin cambiar de sitio. */
.cobro { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--qj-borde); }
.cobro h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--qj-tenue); }
.cobro .error { margin: 0 0 10px; }

/* Lo que falta por cobrar es el dato que se busca de un vistazo. */
.cobro .pendiente { margin: 0 0 12px; font-size: 15px; }
.cobro .pendiente strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.cobro .pagada { margin: 0; font-size: 15px; font-weight: 600; color: var(--qj-accion-texto); }

.linea-cobro { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.linea-cobro label { display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; font-weight: 600; }
.linea-cobro input, .linea-cobro select {
    padding: 10px; border: 1.5px solid var(--qj-borde); border-radius: 10px;
    font-size: 15px; font-family: inherit; background: #fff; font-weight: 400;
}
.linea-cobro input { font-variant-numeric: tabular-nums; }
.cobro .acciones { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* Un suspendido tiene que cantar en la lista sin leerla entera. */
.marca-suspendido {
    display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
    background: var(--qj-error-fondo); color: var(--qj-error);
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    vertical-align: middle;
}

.bloqueo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--qj-borde); }
.bloqueo label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.bloqueo input {
    padding: 10px; border: 1.5px solid var(--qj-borde); border-radius: 10px;
    font-size: 15px; font-family: inherit; background: #fff; font-weight: 400;
}
.bloqueo .apagado { font-size: 13px; margin: 8px 0 12px; }
.bloqueo .suspendido { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--qj-error); }

/* La vista previa del logo en Datos: caja fija, imagen entera dentro. Sin esto la
   proporción la imponían los atributos width/height del propio <img> y un logo
   apaisado salía estirado. */
.logo-vista {
    width: auto; height: auto; max-width: 220px; max-height: 120px;
    object-fit: contain; border-radius: 12px; background: #fff;
}

/* Lo que hay guardado de los datos bancarios. Se enseña antes del formulario para que
   nadie se quede con la duda de si se guardó. */
.guardado-banco {
    display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
    margin: 0 0 18px; padding: 14px 16px;
    background: var(--qj-fondo); border-radius: 12px;
}
.guardado-banco dt { font-size: 12px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--qj-tenue); align-self: center; }
.guardado-banco dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums;
    word-break: break-all; }

/* ══ Caja: cobros y devoluciones ══════════════════════════════════════════ */
.acciones-caja { display: flex; gap: 10px; margin: 22px 0 0; flex-wrap: wrap; }
.formulario-caja { background: #fff; border-radius: 16px; padding: 20px; margin-top: 16px; }
.formulario-caja h2 { margin-top: 0; }
.formulario-caja .buscador { display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.formulario-caja .buscador input, .formulario-caja .acciones { font-weight: 400; }
.formulario-caja .buscador input {
    padding: 10px; border: 1.5px solid var(--qj-borde); border-radius: 10px;
    font-size: 15px; font-family: inherit;
}
.formulario-caja .acciones { display: flex; gap: 10px; margin-top: 16px; }

/* Los candidatos de la búsqueda: se elige uno y se queda marcado. */
.candidatos { list-style: none; margin: 0 0 14px; padding: 0; display: flex;
    flex-direction: column; gap: 6px; }
.candidatos button {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    width: 100%; padding: 10px 12px; text-align: left;
    background: var(--qj-fondo); border: 1.5px solid transparent; border-radius: 10px;
    font-family: inherit; font-size: 14px; color: var(--qj-tinta); cursor: pointer;
}
.candidatos button.elegido { border-color: var(--qj-accion); background: #fff; }

.linea-devolucion { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.linea-devolucion input {
    padding: 7px 10px; border: 1.5px solid var(--qj-borde); border-radius: 8px;
    font-size: 14px; font-family: inherit; min-width: 150px;
}

/* ══ Clases dirigidas ══════════════════════════════════════════════════════
   Una tarjeta por clase. Lo que se busca de un vistazo es si queda sitio, así que
   la ocupación va a la derecha y en grande. */
.clases { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

.clase { background: #fff; border-radius: 16px; overflow: hidden; }
.clase > header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 18px 20px; cursor: pointer;
}
.clase > header:hover { background: var(--qj-fondo); }
.clase.abierta > header { border-bottom: 1px solid var(--qj-borde); }
.clase h2 { margin: 0 0 4px; font-size: 17px; }
.clase h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--qj-tenue); }
.clase p { margin: 0; font-size: 14px; }

.clase .ocupacion { display: flex; flex-direction: column; align-items: flex-end;
    gap: 2px; flex: none; text-align: right; }
.clase .ocupacion .cifra { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.clase .ocupacion .apagado { font-size: 12px; }

.detalle-clase { padding: 20px; }
.sin-programar { background: var(--qj-fondo); border-radius: 12px; padding: 16px; margin-bottom: 18px; }
.sin-programar p { margin: 0 0 12px; font-size: 14px; }

.columnas-clase { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }

/* Los de la lista de espera se apagan: están apuntados, pero no entran salvo que alguien caiga. */
.inscritos { list-style: none; margin: 0; padding: 0; counter-reset: puesto; }
.inscritos li { display: flex; align-items: center; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid var(--qj-borde); font-size: 15px; }
.inscritos li > span:first-child { flex: 1; min-width: 0; }
.inscritos li.en-espera { opacity: .65; }
.inscritos li.en-espera > span:first-child::before { content: "· "; }

.sesiones { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.sesiones li { display: flex; align-items: center; gap: 10px; padding: 7px 0;
    border-bottom: 1px solid var(--qj-borde); font-size: 14px; }
.sesiones li > span:first-child { flex: 1; text-transform: capitalize; }
.sesiones li.cancelada { text-decoration: line-through; opacity: .5; }

.apuntar { margin-top: 16px; }
.apuntar label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.apuntar input {
    padding: 10px; border: 1.5px solid var(--qj-borde); border-radius: 10px;
    font-size: 15px; font-family: inherit; font-weight: 400;
}

.pasar-lista { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--qj-borde); }
.asistentes { list-style: none; margin: 0; padding: 0; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
.asistentes label { display: flex; align-items: center; gap: 9px; padding: 8px 0;
    font-size: 15px; cursor: pointer; }

.dias-semana { border: none; margin: 0 0 14px; padding: 0; display: flex;
    flex-wrap: wrap; gap: 14px; }
.dias-semana legend { padding: 0 0 8px; font-size: 13px; font-weight: 600; }
.dias-semana .dia { display: flex; align-items: center; gap: 6px; font-size: 14px; }

.vinculacion { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--qj-borde); }
.vinculacion p { margin: 0 0 8px; font-size: 14px; }

/* El código se dicta en voz alta: grande, espaciado y en monoespaciada, para no
   confundir un carácter al leerlo. */
.vinculacion .codigo {
    font-family: ui-monospace, monospace; font-size: 30px; font-weight: 700;
    letter-spacing: 6px; margin: 4px 0 8px; user-select: all;
}

.apagado { color: var(--qj-apagado); }
.error { color: var(--qj-error); font-size: 15px; }
.exito { color: var(--qj-accion-texto); font-size: 15px; font-weight: 600; }

/* ══ Agenda ════════════════════════════════════════════════════════════════
   Una columna por pista y las horas en filas, como la agenda de papel que
   sustituye. El mostrador la tiene abierta todo el día: prima la densidad sobre
   el aire, y con más de doce pistas las columnas se estrechan y la rejilla se
   desplaza en horizontal con la columna de horas fija. */

.barra h1 { margin: 0; flex: 1; }
.navegacion-dia { display: flex; gap: var(--e2); align-items: center; }
.navegacion-dia input { padding: 6px 10px; }

.agenda-cabecera {
    display: flex;
    align-items: center;
    gap: var(--e3);
    flex-wrap: wrap;
    padding-bottom: var(--e3);
    margin-bottom: var(--e4);
    border-bottom: 1px solid var(--qj-borde);
}
.agenda-cabecera h1 { margin: 0; font-size: 24px; }
.agenda-fecha { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.agenda-acciones { display: flex; align-items: center; gap: var(--e2); margin-left: auto; }

.rejilla {
    --fila: 34px;
    display: flex;
    background: var(--qj-superficie);
    border: 1px solid var(--qj-borde);
    border-radius: var(--r-tarjeta);
    overflow-x: auto;
}

/* La columna de horas no se va con el desplazamiento: sin ella, a la tercera pista
   ya no sabes qué hora estás mirando. */
.rejilla-horas {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 58px;
    flex: none;
    padding-top: 56px;
    background: var(--qj-superficie);
    border-right: 1px solid var(--qj-borde);
}

.rejilla-hora {
    height: var(--fila);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-right: var(--e2);
    font-size: 12px;
    color: #A3AFBA;
    font-variant-numeric: tabular-nums;
}
.rejilla-hora.en-punto { font-weight: 700; color: var(--qj-tenue); }

.rejilla-pistas { display: flex; flex: 1; min-width: 0; }

.cesped { display: flex; flex-direction: column; }

/* Lo que es el mismo césped va dentro de la misma caja: tres columnas hermanas son
   un campo, no tres pistas. */
.cesped:not(.suelto) {
    margin: 0 10px;
    border: 2px solid var(--qj-tinta);
    border-radius: var(--r-campo);
    overflow: hidden;
    background: #F7FAF9;
}

.cesped-cinta {
    height: 26px;
    display: flex;
    align-items: center;
    gap: var(--e2);
    padding: 0 10px;
    background: var(--qj-tinta);
    color: #fff;
    white-space: nowrap;
}
.cesped-cinta-vacia { background: none; padding: 0; }
.cesped-nombre { font-size: 12px; font-weight: 700; }
.cesped-aclaracion { font-size: 10px; font-weight: 600; color: #9FB3C8; }

.cesped-columnas { display: flex; flex: 1; min-width: 0; }

.columna { display: flex; flex-direction: column; flex: 1 1 104px; min-width: 64px; }

.columna-nombre {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-bottom: 2px solid var(--qj-tinta);
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cesped:not(.suelto) .columna-nombre { background: #EEF3F1; }

/* Las rayas horizontales son la rejilla: una línea por paso, sin un elemento por
   celda. Doce pistas por veintiocho medias horas serían 336 divs para nada. */
.columna-cuerpo {
    position: relative;
    border-right: 1px solid #EDF1EF;
    background: repeating-linear-gradient(var(--qj-superficie) 0 calc(var(--fila) - 1px), #EDF1EF calc(var(--fila) - 1px) var(--fila));
}
.cesped:not(.suelto) .columna-cuerpo {
    background: repeating-linear-gradient(#F7FAF9 0 calc(var(--fila) - 1px), #E7EDEA calc(var(--fila) - 1px) var(--fila));
}
.cesped-columnas .columna:last-child .columna-cuerpo { border-right: none; }

/* Las casillas de la agenda son botones para que se puedan pulsar con el teclado,
   pero no se parecen en nada a un botón: son la rejilla. */
.panel .celda, .celda {
    position: absolute;
    left: 2px;
    right: 2px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 5px 7px;
    border: none;
    border-radius: 5px;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    overflow: hidden;
}

.panel .celda-vendida, .celda-vendida { background: var(--qj-tinta); color: #fff; cursor: pointer; }
.celda-vendida:hover { background: #142150; }

/* Vendida y «ya no se puede vender» no son lo mismo: una la has cobrado y la otra
   la has perdido. Se distinguen por relleno y aspa, no por color. */
.celda-tachada {
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
    border: 1.5px dashed var(--qj-tinta);
    background: repeating-linear-gradient(-45deg, rgba(10, 20, 53, .09) 0 5px, rgba(10, 20, 53, 0) 5px 11px);
    color: var(--qj-tinta);
    font-size: 10px;
    font-weight: 700;
    padding: 5px 6px;
}
.celda-tachada .aspa { flex: none; }

.celda-cerrada {
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border-bottom: 1px dotted #8C98A4;
    background: repeating-linear-gradient(-45deg, #F2F5F4 0 8px, #E7ECEA 8px 16px);
    color: var(--qj-apagado);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

/* Lo que ya pasó: ni venta ni pérdida. Se apaga y se calla. */
.celda-pasada { left: 0; right: 0; border-radius: 0; background: rgba(10, 20, 53, .035); }

/* Un hueco libre es un hueco: se ve el fondo de la rejilla. La hora solo se
   insinúa, y el color aparece al pasar por encima, que es cuando se está
   decidiendo vender. */
.panel .celda-libre, .celda-libre {
    background: none;
    color: var(--qj-tenue);
    cursor: pointer;
    justify-content: center;
    padding: 0;
}
.celda-libre .celda-hora { font-size: 10px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--t-control); }
.panel .celda-libre:hover, .celda-libre:hover {
    background: var(--qj-exito-fondo);
    box-shadow: inset 0 0 0 2px var(--qj-accion-texto);
    color: var(--qj-accion-texto);
}
.celda-libre:hover .celda-hora, .celda-libre:focus-visible .celda-hora { opacity: 1; font-weight: 700; }

.celda-detalle { font-weight: 600; opacity: .85; }

.m-vendida { background: var(--qj-tinta); }
.m-tachada {
    border: 1.5px dashed var(--qj-tinta);
    background: repeating-linear-gradient(-45deg, rgba(10, 20, 53, .12) 0 4px, rgba(10, 20, 53, 0) 4px 9px);
}
.m-hueco { border: 1px solid var(--qj-borde); background: var(--qj-superficie); }

/* El panel de la reserva. Antes ocupaba todo el alto de la ventana y tapaba
   media agenda; ahora es una tarjeta anclada abajo a la derecha, del tamaño de
   lo que tiene dentro, que es poco: un nombre, un importe y una acción. */
.panel-lateral {
    position: fixed;
    right: var(--e6);
    bottom: var(--e6);
    z-index: 30;
    width: min(340px, calc(100vw - 2 * var(--e6)));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: var(--e4);
    background: var(--qj-superficie);
    border: 1px solid var(--qj-borde);
    border-radius: var(--r-tarjeta);
    box-shadow: var(--s3), var(--s2);
}

.cabecera-lateral {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--e3);
    margin-bottom: var(--e3);
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--qj-borde);
}
.cabecera-lateral strong { font-family: var(--qj-titulares); font-size: 17px; line-height: 1.25; }
.panel-lateral label { display: block; margin: var(--e3) 0 var(--e1); font-size: 13px; font-weight: 700; }
.panel-lateral select { width: 100%; }
.panel-lateral .boton, .panel-lateral button:not(.enlace) { width: 100%; margin-top: var(--e3); }

@media (max-width: 620px) {
    .panel-lateral { right: var(--e3); left: var(--e3); bottom: var(--e3); width: auto; }
}
.panel button.destructivo { background: var(--qj-error); }
.panel button.destructivo:hover { background: var(--qj-error); }

.formulario-ancho { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.formulario-ancho label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.formulario-ancho input, .formulario-ancho select {
    padding: 10px; border: 1.5px solid var(--qj-borde); border-radius: 10px;
    font-size: 15px; font-family: inherit; background: #fff;
}

.dias { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.dia { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; }

/* Caja */
.aviso.descuadre { background: var(--qj-error-fondo); color: var(--qj-error); }
.aviso.descuadre a { color: var(--qj-error); }
.tabla tr.anulacion td { text-decoration: line-through; opacity: .6; }
.boton-enlace {
    display: inline-flex; align-items: center; padding: 12px 20px;
    border-radius: 12px; background: #fff; border: 1.5px solid var(--qj-borde);
    color: var(--qj-tinta); text-decoration: none; font-size: 15px; font-weight: 600;
}


/* Cerrada se apaga entera: no es una pista que puedas vender, y tiene que
   distinguirse de un vistazo de una que está libre. */
.pista.cerrada { border-left-color: var(--qj-borde-fuerte); background: var(--qj-fondo); }
.pista.cerrada h2, .pista.cerrada .estado { color: var(--qj-tenue); }

/* ── Recibos domiciliados ──────────────────────────────────────────────────
   Bloques separados porque son tres tareas distintas —repasar lo pendiente,
   generar la remesa y consultar los mandatos— y mezclarlas en una tabla
   larga hace que se pulse «Generar» sin haber mirado lo de arriba. */
.bloque {
    margin: 24px 0;
    padding-top: 20px;
    border-top: 1px solid var(--qj-borde);
}

.bloque h2 { margin: 0 0 12px; font-size: 1.05rem; }
.bloque table { width: 100%; border-collapse: collapse; }
.bloque th, .bloque td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--qj-fondo); }
.bloque th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--qj-apagado); }

/* Los importes en columna, alineados a la derecha: es como se cuadra una
   lista de dinero de un vistazo. */
.numero { text-align: right; font-variant-numeric: tabular-nums; }
.bloque th.numero, .bloque td.numero { text-align: right; }

.ok {
    background: var(--qj-exito-fondo);
    border: 1px solid var(--qj-accion-sobre-oscuro);
    color: var(--qj-accion-texto);
    border-radius: 8px;
    padding: 10px 14px;
}

/* Días de la semana del horario: casillas en línea, que es como se lee un cuadrante. */
.dias { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; }
.dia { display: flex; align-items: center; gap: 6px; font-size: .92rem; }
.dia input { margin: 0; }

details.bloque > summary { cursor: pointer; padding: 4px 0; }
details.bloque > summary::marker { color: var(--qj-apagado); }

/* ══ Portada corporativa ═══════════════════════════════════════════════════
   La única superficie donde el impacto visual es el objetivo. Todo el
   movimiento es transform y opacity: cualquier otra propiedad animada obliga al
   navegador a recalcular el diseño y se nota en un móvil modesto. Con
   prefers-reduced-motion el movimiento desaparece, no se atenúa. */

@keyframes qj-flotar { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, -28px, 0) scale(1.06); } }
@keyframes qj-entrar { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }

.mancha { animation: qj-flotar 9s ease-in-out infinite alternate; will-change: transform; }
.entra { animation: qj-entrar .5s cubic-bezier(.2, .7, .3, 1) both; }
.levanta { transition: transform var(--t-entrada) cubic-bezier(.2, .7, .3, 1); }
.levanta:hover { transform: translate3d(0, -5px, 0); }

@media (prefers-reduced-motion: reduce) {
    .mancha, .entra, .levanta {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Cabecera ── */
.cabecera-web {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--e6);
    padding: var(--e3) var(--e8);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--qj-borde);
}

.marca-web { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-web img { display: block; height: 38px; width: auto; }

/* Sobre tinta, la marca sola más el nombre puesto en texto: el logotipo entero
   se perdería, porque su nombre va en navy. */
.marca-web-oscuro {
    font-family: var(--qj-titulares);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
}
.marca-web-oscuro img { height: 26px; }

.menu-web { display: flex; gap: var(--e6); font-size: 15px; font-weight: 600; }
.menu-web a { color: var(--qj-texto); text-decoration: none; }
.menu-web a:hover { color: var(--qj-tinta); }

.acciones-web { display: flex; align-items: center; gap: var(--e3); margin-left: auto; }

.boton-accion, .boton-contorno, .boton-fantasma {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border-radius: var(--r-boton);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.boton-accion { background: var(--qj-accion); color: #04220F; }
.boton-accion:hover { background: var(--qj-accion-sobre-oscuro); }
.boton-contorno { border: 2px solid currentColor; color: var(--qj-tinta); }
.boton-fantasma { color: var(--qj-accion-texto); }
.grande { height: 58px; padding: 0 28px; font-size: 17px; border-radius: 14px; }

/* ── Héroe ── */
.heroe {
    position: relative;
    overflow: hidden;
    background: var(--qj-tinta);
    color: #fff;
    padding: var(--e20) var(--e8) 96px;
}

.heroe-fondo { position: absolute; inset: 0; pointer-events: none; }
.mancha { position: absolute; border-radius: 50%; }
.mancha-verde {
    width: 620px; height: 620px; top: -220px; right: -120px;
    background: radial-gradient(circle at 35% 35%, rgba(27, 224, 126, .5), rgba(27, 224, 126, 0) 62%);
}
.mancha-azul {
    width: 520px; height: 520px; bottom: -260px; left: 80px;
    background: radial-gradient(circle at 50% 50%, rgba(28, 127, 214, .4), rgba(28, 127, 214, 0) 62%);
    animation-delay: -4.5s;
}

.heroe-dentro {
    position: relative;
    display: flex;
    gap: var(--e12);
    align-items: center;
    max-width: 1340px;
    margin: 0 auto;
}

.heroe-texto { flex: 1 1 560px; display: flex; flex-direction: column; gap: var(--e6); min-width: 0; }

.pildora {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    height: 34px;
    padding: 0 14px;
    border: 1.5px solid rgba(110, 240, 174, .45);
    border-radius: var(--r-redondo);
    color: var(--qj-accion-sobre-oscuro);
    font-size: 13px;
    font-weight: 700;
}
.punto { width: 7px; height: 7px; border-radius: 50%; background: #1BE07E; }

.heroe h1 {
    margin: 0;
    font-size: clamp(38px, 5.4vw, 70px);
    letter-spacing: -.042em;
    line-height: .98;
}

.heroe .entradilla { margin: 0; max-width: 540px; font-size: 20px; line-height: 1.5; color: #C7D6E4; }
.heroe-botones { display: flex; gap: var(--e3); flex-wrap: wrap; }
.heroe .boton-contorno { color: #fff; border-color: rgba(255, 255, 255, .38); }

/* ── La muestra del panel ── */
.muestra-panel {
    flex: 1 1 480px;
    min-width: 0;
    border-radius: var(--r-heroe);
    overflow: hidden;
    background: var(--qj-superficie);
    color: var(--qj-tinta);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7);
    animation-delay: .12s;
}

.muestra-barra { padding: var(--e2) var(--e4); background: #EDF1EF; border-bottom: 1px solid var(--qj-borde); }
.muestra-url { font-size: 11px; color: var(--qj-tenue); }
.muestra-cuerpo { padding: var(--e4); display: flex; flex-direction: column; gap: 6px; }

.muestra-titulo { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e1); }
.muestra-titulo strong { font-family: var(--qj-titulares); font-size: 17px; }
.muestra-reloj {
    padding: 2px 9px;
    border-radius: var(--r-redondo);
    background: var(--qj-tinta);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.muestra-nota { font-size: 11px; color: var(--qj-tenue); }

.muestra-fila { display: flex; align-items: center; gap: var(--e2); }
.muestra-pista { width: 66px; flex: none; font-size: 12px; font-weight: 700; }

.muestra-barra-dia {
    display: flex;
    flex: 1;
    height: 26px;
    border: 1px solid var(--qj-borde);
    border-radius: var(--r-chip);
    overflow: hidden;
}

.muestra-tramo {
    display: flex;
    align-items: center;
    padding: 0 5px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
}
.muestra-tramo.m-ocupada { background: var(--qj-tinta); color: #fff; }
.muestra-tramo.m-libre { color: var(--qj-accion-texto); }
.muestra-tramo.m-cerrada {
    background: repeating-linear-gradient(-45deg, #F2F5F4 0 6px, #E7ECEA 6px 12px);
    color: var(--qj-apagado);
}

.muestra-leyenda { display: flex; gap: var(--e3); margin-top: var(--e1); font-size: 11px; color: var(--qj-apagado); }
.muestra-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.muestra-color { width: 16px; height: 9px; border-radius: 2px; }
.muestra-color.m-libre { border: 1.5px solid var(--qj-accion-texto); }
.muestra-color.m-ocupada { background: var(--qj-tinta); }
.muestra-color.m-cerrada { background: repeating-linear-gradient(-45deg, #F2F5F4 0 4px, #E7ECEA 4px 8px); }

/* ── Franjas ── */
.franja { max-width: 980px; margin: 0 auto; padding: var(--e20) var(--e6) 0; }
.franja h2 { font-size: clamp(28px, 3.6vw, 40px); margin: var(--e2) 0 var(--e4); }
.franja p { color: var(--qj-texto); max-width: 68ch; }
.franja .entradilla { font-size: 19px; }

.antetitulo {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--qj-accion-texto);
}

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e4); margin: var(--e6) 0 0; }
.datos div { padding: var(--e4); border-left: 3px solid var(--qj-accion); }
.datos dt { font-family: var(--qj-titulares); font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.datos dd { margin: var(--e1) 0 0; font-size: 14px; color: var(--qj-apagado); }

.lista-comprobada { list-style: none; padding: 0; margin: var(--e4) 0 0; display: grid; gap: var(--e2); }
.lista-comprobada li { position: relative; padding-left: var(--e6); color: var(--qj-texto); }
.lista-comprobada li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--qj-accion);
}

.tiendas { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e6); }

/* ── Garantías ── */
.garantias { max-width: 1180px; }
.rejilla-garantias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--e4);
    margin-top: var(--e8);
}

.garantia {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    padding: var(--e6);
    border: 1px solid var(--qj-borde);
    border-radius: var(--r-tarjeta);
    background: var(--qj-superficie);
}
.garantia h3 { margin: 0; font-size: 21px; }
.garantia-numero { font-family: var(--qj-titulares); font-size: 13px; font-weight: 800; color: var(--qj-accion-texto); }
.garantia-como { margin-top: auto; padding-top: var(--e3); font-size: 13px; color: var(--qj-tenue); border-top: 1px solid var(--qj-borde); }

.caso { padding: var(--e3); border-radius: var(--r-campo); background: var(--qj-fondo); }
.caso-titulo {
    margin: 0 0 var(--e1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--qj-espera);
}
.caso p { margin: 0; font-size: 14px; }

/* ── Preguntas ── */
.acordeon { margin-top: var(--e6); border-top: 1px solid var(--qj-borde); }
.acordeon details { border-bottom: 1px solid var(--qj-borde); }
.acordeon summary {
    display: flex;
    justify-content: space-between;
    gap: var(--e4);
    padding: var(--e4) 0;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; color: var(--qj-accion-texto); font-size: 22px; line-height: 1; }
.acordeon details[open] summary::after { content: "−"; }
.acordeon p { margin: 0 0 var(--e4); }

/* ── Cierre y pie ── */
.cierre { max-width: 980px; margin: var(--e20) auto 0; padding: var(--e12) var(--e6); text-align: center; }
.cierre h2 { font-size: clamp(28px, 4vw, 44px); margin: 0 0 var(--e3); }
.cierre p { color: var(--qj-texto); }
.cierre .heroe-botones { justify-content: center; margin-top: var(--e6); }

.pie-web { margin-top: var(--e20); padding: var(--e12) var(--e8) var(--e6); background: var(--qj-tinta); color: #C7D6E4; }
.pie-dentro {
    display: grid;
    grid-template-columns: 2fr repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--e8);
    max-width: 1180px;
    margin: 0 auto;
}

.pie-marca p { max-width: 34ch; font-size: 14px; }
.pie-web nav { display: flex; flex-direction: column; gap: var(--e2); }
.pie-titulo { margin: 0 0 var(--e1); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7A8899; }
.pie-web nav a { color: #C7D6E4; text-decoration: none; font-size: 14px; }
.pie-web nav a:hover { color: #fff; }
.pie-fino { max-width: 1180px; margin: var(--e8) auto 0; padding-top: var(--e4); border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }

@media (max-width: 860px) {
    .cabecera-web { gap: var(--e3); padding: var(--e3) var(--e4); flex-wrap: wrap; }
    .menu-web { order: 3; width: 100%; overflow-x: auto; gap: var(--e4); }
    .heroe { padding: var(--e12) var(--e4) var(--e8); }
    .heroe-dentro { flex-direction: column; align-items: stretch; gap: var(--e8); }
    .franja { padding-top: var(--e12); padding-left: var(--e4); padding-right: var(--e4); }
    .pie-web { padding: var(--e8) var(--e4) var(--e4); }
}

/* ══ Densidad del panel ════════════════════════════════════════════════════
   7 sobre 10: apretado para que quepan doce pistas, no tanto como para pinchar
   mal con el ratón. La web va a 17 px y el panel a 14: son contextos distintos
   —medio minuto frente a ocho horas— y compartir tamaño perjudica a los dos. */
.panel {
    font-size: 14px;
    line-height: 1.45;
    background: var(--qj-fondo);
    min-height: 100vh;
}

.panel h1 { font-size: 24px; margin: 0 0 var(--e1); }
.panel h2 { font-size: 17px; font-weight: 700; }
.panel h3 { font-size: 15px; font-weight: 700; }
.panel .apagado { font-size: 13px; }

/* Cabecera oscura: separa la herramienta del contenido y ancla la vista. */
.panel-cabecera {
    display: flex;
    align-items: center;
    gap: var(--e4);
    height: 56px;
    padding: 0 var(--e4);
    background: var(--qj-tinta);
    border-bottom: none;
}
.panel-cabecera .marca { color: #fff; font-family: var(--qj-titulares); font-size: 17px; }

.panel-nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.panel-nav a {
    padding: 7px 12px;
    border-radius: var(--r-chip);
    color: #A3AFBA;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--t-control) ease, color var(--t-control) ease;
}
.panel-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* La pestaña activa no se distingue solo por color: lleva fondo y peso 700. */
.panel-nav a.active {
    background: var(--qj-accion-sobre-oscuro);
    color: var(--qj-tinta);
    font-weight: 700;
}

.panel-contenido { max-width: 1180px; margin: 0 auto; padding: var(--e6) var(--e4) var(--e20); }

/* Filas de 38 px: la altura a la que caben doce pistas sin que falle el ratón. */
.panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.panel th {
    height: 30px;
    padding: 0 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--qj-tenue);
    border-bottom: 1px solid var(--qj-borde);
}
.panel td { height: 38px; padding: 0 12px; border-bottom: 1px solid var(--qj-borde); }
.panel tbody tr:hover { background: var(--qj-fondo); }

.panel .boton, .panel button:not(.enlace) { height: 34px; padding: 0 14px; font-size: 13px; }
.panel input, .panel select { height: 34px; font-size: 13px; }
.panel .bloque { margin: var(--e6) 0; padding-top: var(--e4); }
.panel .tarjeta { padding: var(--e4); border-radius: var(--r-tarjeta); }
.panel .cifra { font-size: 26px; font-weight: 800; font-family: var(--qj-titulares); }

/* ══ Botones · reposo, hover, foco, activo, cargando, desactivado ══════════ */
.boton, button:not(.enlace) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    height: 42px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--r-boton);
    font-family: var(--qj-texto-fuente);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-control) ease, border-color var(--t-control) ease,
                transform var(--t-control) ease;
}
.boton:active, button:not(.enlace):active { transform: translateY(1px); }

/* En la invitación, «tus partidos» y la nueva contraseña hay una acción por
   tarjeta y se pulsa con el pulgar: ahí el botón ocupa el ancho. */
.contenido .tarjeta .boton { width: 100%; margin-top: var(--e2); }

/* El verde vivo nunca lleva texto blanco: en blanco no llega a 4,5:1. */
.boton-primario, button[type="submit"]:not(.enlace) {
    background: var(--qj-accion);
    color: var(--qj-tinta);
}
.boton-primario:hover, button[type="submit"]:not(.enlace):hover { background: #00B25F; }

.boton-secundario {
    background: var(--qj-superficie);
    color: var(--qj-tinta);
    border-color: var(--qj-borde);
}
.boton-secundario:hover { border-color: var(--qj-accion-texto); }

.boton-destructivo { background: var(--qj-error); color: #fff; }
.boton-destructivo:hover { background: #A81E17; }

.boton-terciario, .enlace {
    background: none;
    border: none;
    color: var(--qj-accion-texto);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Sobre verde el contorno de foco es tinta; sobre blanco, verde profundo. */
.boton-primario:focus-visible { outline-color: var(--qj-tinta); }

/* Desactivado y cargando se distinguen: uno no se puede pulsar, el otro ya lo has
   pulsado. Y el ancho no cambia al cargar, para que nada salte de sitio. */
.boton:disabled, button:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}
.boton[aria-busy="true"], button[aria-busy="true"] { cursor: progress; opacity: .8; }

/* ══ Campos ═══════════════════════════════════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    background: var(--qj-superficie);
    border: 1px solid var(--qj-borde);
    border-radius: var(--r-campo);
    font-family: var(--qj-texto-fuente);
    font-size: 15px;
    color: var(--qj-tinta);
    transition: border-color var(--t-control) ease;
}
input:hover, select:hover { border-color: var(--qj-borde-fuerte); }
input::placeholder { color: var(--qj-tenue); }
input:disabled, select:disabled { background: var(--qj-fondo); color: var(--qj-tenue); cursor: not-allowed; }

/* Windows en modo oscuro pinta los select a su manera si no se fija el color. */
select { background-color: var(--qj-superficie); color: var(--qj-tinta); }

input[aria-invalid="true"] { border-color: var(--qj-error); }

label { display: block; font-size: 13px; font-weight: 600; color: var(--qj-texto); margin-bottom: var(--e1); }

/* ══ Avisos ═══════════════════════════════════════════════════════════════
   Nunca solo color: cada uno lleva su forma y su texto. */
.aviso, .error, .exito, .ok {
    border-radius: var(--r-campo);
    padding: 12px 14px;
    font-size: 14px;
    border-left: 4px solid;
}
.aviso { background: var(--qj-espera-fondo); border-left-color: var(--qj-espera); color: var(--qj-tinta); }
.error { background: var(--qj-error-fondo); border-left-color: var(--qj-error); color: var(--qj-error); font-weight: 600; }
.exito, .ok { background: var(--qj-exito-fondo); border-left-color: var(--qj-accion-texto); color: var(--qj-accion-texto); font-weight: 600; }

/* ══ «Ahora mismo» ═════════════════════════════════════════════════════════
   Una tarjeta por pista y, en grande, en qué estado está AHORA. Antes era una
   línea de tiempo del día entero: buena para planificar, mala para lo que se
   pregunta en el mostrador con un cliente delante —«¿tienes algo libre?»—.
   Catorce horas de barra no se leen desde tres metros; una palabra sí. */

.ahora-cabecera {
    display: flex;
    align-items: baseline;
    gap: var(--e3);
    flex-wrap: wrap;
    padding-bottom: var(--e3);
    margin-bottom: var(--e6);
    border-bottom: 1px solid var(--qj-borde);
}
.ahora-cabecera h1 { margin: 0; }

.reloj {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 var(--e3);
    border-radius: var(--r-redondo);
    background: var(--qj-tinta);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.ahora-cuenta { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--qj-apagado); }

.ahora-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--e3);
}

.pista {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    padding: var(--e4);
    background: var(--qj-superficie);
    border: 1px solid var(--qj-borde);
    border-left: 5px solid var(--qj-borde-fuerte);
    border-radius: var(--r-tarjeta);
}

.pista header { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--e1); }
.pista h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--qj-texto-fuente);
    letter-spacing: 0;
    color: var(--qj-apagado);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pista-mitades { font-size: 11px; font-weight: 600; color: var(--qj-espera); }

/* Lo único que se lee desde lejos. Por eso es lo más grande de la tarjeta. */
.pista-estado {
    margin: 0;
    font-family: var(--qj-titulares);
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.pista-detalle { margin: 0; font-size: 14px; color: var(--qj-apagado); min-height: 2.6em; }

/* Los cuatro estados, cada uno con su color y su franja lateral. El color no
   trabaja solo: la palabra dice lo mismo. */
.pista-libre { border-left-color: var(--qj-accion); }
.pista-libre .pista-estado { color: var(--qj-accion-texto); }

.pista-media { border-left-color: var(--qj-espera); background: var(--qj-espera-fondo); }
.pista-media .pista-estado { color: var(--qj-espera); }
.pista-media .pista-detalle { color: var(--qj-espera); font-weight: 600; }

.pista-ocupada { border-left-color: var(--qj-tinta); }
.pista-ocupada .pista-estado { color: var(--qj-tinta); }

.pista-cerrada { background: var(--qj-fondo); }
.pista-cerrada .pista-estado { color: var(--qj-tenue); }

/* El día entero, en fino y sin una palabra. Responde a la segunda pregunta
   —«¿y luego?»— sin estorbar a la primera. */
.pista-dia {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--e2);
    border-radius: 3px;
    overflow: hidden;
}
.pista-carril { position: relative; display: block; height: 8px; background: var(--qj-raya, #EDF1EF); }
.pista-trozo { position: absolute; top: 0; bottom: 0; }
.pista-trozo.t-ocupada { background: var(--qj-tinta); }
.pista-trozo.t-libre { background: var(--qj-accion); opacity: .28; }
.pista-trozo.t-cerrada { background: repeating-linear-gradient(-45deg, #E7ECEA 0 3px, #F2F5F4 3px 6px); }

.pista-ahora { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--qj-error); z-index: 2; }

.pista footer {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--qj-tenue);
    font-variant-numeric: tabular-nums;
}

/* La leyenda de colores ya no hace falta arriba: cada tarjeta dice su estado con
   todas las letras. Se queda para la agenda, que sí la usa. */
.ahora-cabecera .leyenda { display: none; }

/* ══ Resumen · el camino del club nuevo ════════════════════════════════════
   Un club recién creado no tiene nada y cada paso depende del anterior. Se
   enseña el camino entero —hecho y por hacer— en vez de un aviso amarillo con
   el siguiente: lo primero que pregunta un club nuevo es cuánto le falta. */
.resumen-cabecera { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.resumen-cabecera h1 { margin: 0; }

.camino { border: 2px solid var(--qj-tinta); border-radius: var(--r-tarjeta); overflow: hidden; margin-bottom: var(--e6); }

.camino-cinta {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    background: var(--qj-tinta);
    color: #fff;
    font-size: 16px;
}
.camino-cuenta { margin-left: auto; font-size: 14px; color: #C7D6E4; font-variant-numeric: tabular-nums; }

.camino-pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--qj-borde);
}

.paso { display: flex; flex-direction: column; gap: 6px; padding: var(--e4); background: #F7F8F9; }
.paso-hecho { background: var(--qj-exito-fondo); }
.paso-toca { background: var(--qj-superficie); border-top: 3px solid var(--qj-tinta); }

.paso-nombre { font-size: 15px; font-weight: 700; color: var(--qj-apagado); }
.paso-hecho .paso-nombre, .paso-toca .paso-nombre { color: var(--qj-tinta); }
.paso-detalle { font-size: 13px; color: var(--qj-tenue); }
.paso-hecho .paso-detalle, .paso-toca .paso-detalle { color: var(--qj-apagado); }
.paso .boton { align-self: flex-start; width: auto; margin: var(--e1) 0 0; padding: 0 var(--e4); height: 38px; display: inline-flex; align-items: center; font-size: 14px; }

/* Hecho, en marcha y sin empezar se distinguen por forma además de por color:
   relleno, contorno grueso y contorno de puntos. */
.hito { width: 22px; height: 22px; border-radius: 50%; border: 2px dashed #A3AFBA; }
.hito-hecho {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--qj-accion);
    color: #04220F;
    font-size: 12px;
    font-weight: 800;
}
.hito-toca { border: 3px solid var(--qj-tinta); background: var(--qj-superficie); }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e3); }

.tarjeta-cifra {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    padding: var(--e4);
    border: 1px solid var(--qj-borde);
    border-radius: var(--r-boton);
    background: var(--qj-superficie);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--t-control), box-shadow var(--t-control);
}
.tarjeta-cifra:hover { border-color: var(--qj-tinta); box-shadow: var(--s1); }

.tarjeta-cifra .rotulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--qj-tenue);
}
.tarjeta-cifra .cifra {
    font-family: var(--qj-titulares);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
}

/* Aviso de que se está dentro de un club siendo personal de Quien Juega. Va sobre ámbar y
   no sobre rojo: no es un error, es un recordatorio de dónde estás. */
.cinta-personal {
    margin: 0 0 var(--e4);
    padding: var(--e3) var(--e4);
    border-left: 4px solid var(--qj-espera);
    border-radius: 0 var(--r-campo) var(--r-campo) 0;
    background: var(--qj-espera-fondo);
    color: var(--qj-espera);
    font-size: 14px;
}

/* ══ Entrar al panel ═══════════════════════════════════════════════════════
   Una sola tarjeta centrada. Es la puerta del club: no tiene que competir con
   nada, solo dejar claro dónde se escribe. */
.panel-acceso {
    max-width: 420px;
    margin: var(--e20) auto;
    padding: var(--e8);
    background: var(--qj-superficie);
    border: 1px solid var(--qj-borde);
    border-radius: var(--r-tarjeta);
    box-shadow: var(--s2);
}

.acceso-marca { display: block; height: 46px; width: auto; margin: 0 0 var(--e6); }
.panel-acceso h1 { font-size: 28px; margin: 0 0 var(--e2); }
.panel-acceso > p { color: var(--qj-apagado); margin: 0; }
.panel-acceso form { gap: var(--e1); }
.panel-acceso label { margin-top: var(--e3); }
.panel-acceso button { margin-top: var(--e4); }

@media (max-width: 520px) {
    .panel-acceso { margin: var(--e6) var(--e4); padding: var(--e6); }
}

/* ══ Lista de centros ══════════════════════════════════════════════════════
   La ve el personal de Quien Juega con todos los clubes, y un gerente con el
   suyo. En los dos casos es una lista de sitios a los que entrar. */
.panel-lista { max-width: none; width: 100%; margin: 0; padding: 0; }

.lista-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e4);
    flex-wrap: wrap;
    padding-bottom: var(--e4);
    margin-bottom: var(--e6);
    border-bottom: 2px solid var(--qj-tinta);
}
.lista-cabecera h1 { font-size: 34px; margin: 0 0 var(--e1); }
.lista-cabecera p { margin: 0; color: var(--qj-apagado); }

.lista-vacia {
    padding: var(--e12) var(--e6);
    margin-bottom: var(--e6);
    border: 1.5px dashed var(--qj-borde-fuerte);
    border-radius: var(--r-tarjeta);
    text-align: center;
}
.lista-vacia p { margin: 0; color: var(--qj-apagado); }

.centros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--e3);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--e8);
}

.centros a {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    height: 100%;
    padding: var(--e4);
    background: var(--qj-superficie);
    border: 1px solid var(--qj-borde);
    border-radius: var(--r-tarjeta);
    text-decoration: none;
    color: var(--qj-tinta);
    transition: border-color var(--t-control), box-shadow var(--t-control);
}
.centros a:hover { border-color: var(--qj-tinta); box-shadow: var(--s1); }
.centros strong { font-size: 17px; }

/* ── Alta de un centro ── */
.alta-centro {
    padding: var(--e6);
    background: var(--qj-superficie);
    border: 1px solid var(--qj-borde);
    border-radius: var(--r-tarjeta);
}
.alta-centro h2 { font-size: 20px; margin: 0 0 var(--e2); }
.alta-centro > p { color: var(--qj-apagado); font-size: 14px; margin: 0 0 var(--e4); }

.alta-campos { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--e3); align-items: end; }
.alta-campos label { display: flex; flex-direction: column; gap: var(--e1); font-size: 13px; font-weight: 700; }
.alta-campos input {
    padding: 11px 12px;
    border: 1.5px solid var(--qj-borde-fuerte);
    border-radius: var(--r-campo);
    font: inherit;
    font-size: 15px;
    background: var(--qj-superficie);
    color: var(--qj-tinta);
}
.alta-campos input:focus { outline: none; border-color: var(--qj-tinta); }
.alta-campos button { white-space: nowrap; }

.salir { margin: 0; flex: none; }

/* Salir no es destruir nada, así que va en contorno y no en rojo. Pero es un
   botón: como enlace subrayado se perdía al final de la página. */
.panel-lista .salir button.enlace {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 20px;
    border: 1.5px solid var(--qj-borde-fuerte);
    border-radius: var(--r-boton);
    background: var(--qj-superficie);
    color: var(--qj-apagado);
    font-weight: 700;
    text-decoration: none;
}
.panel-lista .salir button.enlace:hover { border-color: var(--qj-tinta); color: var(--qj-tinta); }

@media (max-width: 620px) {
    .alta-campos { grid-template-columns: 1fr; }
    .alta-campos button { width: 100%; }
}