/* Rejilla NDNS — la forma del cartel de clases y talleres, como componente.
 *
 * Sólo tokens de ndns-tokens.css: la web y el cartel comparten paleta exacta
 * (ink, crema, mostaza, terracota, agave); lo que cambia es la FORMA. La web
 * es neo-brutal (bordes de 3px, sombras duras, esquinas deformes) y el cartel
 * es suave y plano (celdas redondeadas, sin borde, bloques de color sobre
 * verde).
 *
 * Por eso la rejilla va DENTRO de un panel brutal: el contraste entre el borde
 * duro de afuera y las celdas suaves de adentro se lee como un cartel
 * enmarcado y no como un parche.
 *
 * Se usan los tokens `-fixed` a propósito: la rejilla mantiene el verde y el
 * crema del cartel también en modo oscuro, como los mantiene un impreso.
 *
 * Consumidores: /reservas (primero), y después /cartelera y /clases.
 */

/* El verde es el HUECO entre noches, no la superficie de todas. Antes era una
   plancha continua y con 19 noches nadie veía dónde acababa una y empezaba la
   siguiente: todo estaba encima de lo mismo. Ahora cada noche es una tarjeta
   crema y el verde se ve entre ellas, como en el cartel — sólo que ahí la
   celda era una hora y aquí es la noche entera. */
/* ⚠ `hidden` es un ATRIBUTO, y cualquier `display` en la regla base le gana al
   `display:none` de la hoja del navegador. En esta página ya mordió dos veces:
   el aviso de boletos salía siempre, y "Ver las otras N noches" no escondía
   nada — las noches decían `hidden=true` y se dibujaban enteras.
   Cada vez que una clase de aquí reciba un `display`, tiene que entrar en esta
   lista. */
.rejilla__noche[hidden],
.rejilla__mas[hidden],
.rejilla__cambiar[hidden],
.rejilla__celda[hidden],
.rejilla__horas[hidden] { display: none; }

.rejilla {
    background: var(--ndns-agave-fill);
    border-radius: 20px;
    padding: 12px;
    display: grid;
    gap: 12px;
}

/* Una noche. En celular es un renglón compacto: el flyer chico a la izquierda,
   el día y el título a su derecha, y los bloques debajo a todo lo ancho.
   El flyer NO va a ancho completo: con ~18 noches próximas cada una ocuparía
   una pantalla y la página sería peor que el carrusel que sustituye. */
.rejilla__noche {
    background: var(--ndns-cream-fixed);
    border-radius: 18px;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 76px) minmax(0, 1fr);
    grid-template-areas:
        "flyer dia"
        "flyer titulo"
        "flyer cuando";
    gap: 8px 10px;
    align-content: start;
    align-items: center;
    min-width: 0;
}

/* Cada hijo necesita su sitio: los que quedaban sin área se auto-colocaban y
   en una tarjeta sin flyer las horas salían ANTES del título. */
.rejilla__noche > .rejilla__flyer { grid-area: flyer; align-self: start; }
.rejilla__noche > .rejilla__dia { grid-area: dia; }
.rejilla__noche > .rejilla__titulo { grid-area: titulo; }
.rejilla__noche > .rejilla__cuando { grid-area: cuando; }
/* Lo que va debajo, a lo ancho de las dos columnas y en orden de marcado. */
.rejilla__noche > .rejilla__tambien,
.rejilla__noche > .rejilla__horas,
.rejilla__noche > .rejilla__celda { grid-column: 1 / -1; }

/* Una noche sin flyer no debe dejar la columna vacía. */
.rejilla__noche:not(:has(.rejilla__flyer)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "dia" "titulo" "cuando";
}

.rejilla__dia { grid-area: dia; }
.rejilla__noche > .rejilla__titulo { grid-area: titulo; }
.rejilla__noche > .rejilla__cuando { grid-area: cuando; }
/* Todo lo que sigue al título (bloques, horas, celda de boleto) cae al área
   de abajo, que ocupa las dos columnas. */
.rejilla__noche > .rejilla__pregunta,
.rejilla__noche > .rejilla__horas,
.rejilla__noche > .rejilla__celda { grid-column: 1 / -1; }

/* Una noche sin flyer no debe dejar la columna vacía. */
.rejilla__noche:not(:has(.rejilla__flyer)) {
    grid-template-columns: 1fr;
    grid-template-areas: "dia" "titulo" "cuando" "bloques";
}

.rejilla__dia {
    background: var(--ndns-ink-fixed);
    color: var(--ndns-cream-fixed);
    border-radius: 20px;
    padding: 8px 12px;
    text-align: center;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .78rem;
}

.rejilla__flyer {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* Los carteles de NDNS son 1080x1920 y ponen fecha, hora y precio arriba:
       anclar el recorte arriba salva el título en todos los casos. */
    object-position: top center;
    border-radius: 18px;
    display: block;
}

.rejilla__titulo {
    margin: 0;
    color: var(--ndns-ink-fixed);
    font-weight: 700;
    line-height: 1.2;
}

/* La hora del show, como dato bajo el título. Es contexto, no algo que elegir:
   la mostaza queda para señalar, no para etiquetar una categoría. */
/* La mostaza sobre el verde da 2.78:1 y no pasa AA. Metida en una píldora de
   tinta da 8.29:1 y conserva el acento. */
.rejilla__cuando {
    margin: 0;
    justify-self: start;
    background: var(--ndns-ink-fixed);
    color: var(--ndns-mustard-fill);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
    padding: 2px 8px;
    border-radius: 12px;
}

/* Lo demás que pasa esa noche (un partido, una clase). */
.rejilla__tambien {
    margin: 0;
    color: var(--ndns-ink-fixed);
    opacity: .72;
    font-size: .78rem;
    line-height: 1.3;
}

/* Botón para desplegar el resto de las noches. */
.rejilla__mas {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    min-height: 48px;
    background: var(--ndns-cream);
    color: var(--ndns-ink);
    border: var(--nb-border);
    box-shadow: var(--nb-shadow-md);
    border-radius: var(--nb-r2);
    font-weight: 800;
    cursor: pointer;
}

/* Las horas dentro de un bloque: varias por renglón, que es como se tocan. */
.rejilla__horas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.rejilla__celda {
    border-radius: 18px;
    padding: 10px 14px;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* objetivo táctil */
}

.rejilla__celda { position: relative; }
.rejilla__celda input { position: absolute; opacity: 0; pointer-events: none; }

/* "Otra": abre un reloj para pedir 6:30 o 9:15. */
/* "Otra" se distingue de las horas fijas por el borde punteado, no por color:
   hace lo mismo que ellas, sólo que pidiendo la hora. */
.rejilla__celda--otra {
    background: transparent;
    color: var(--ndns-ink-fixed);
    box-shadow: inset 0 0 0 2px var(--ndns-ink-fixed);
    border: 2px dashed transparent;
    opacity: .75;
}
.rejilla__celda--otra:has(input:checked) {
    background: var(--ndns-cream-fixed);
    color: var(--ndns-ink-fixed);
}
.rejilla__reloj {
    flex: 1 1 100%;
    min-height: 48px;
    border-radius: 18px;
    border: none;
    padding: 8px 12px;
    font-size: 16px; /* menos de 16 y iOS hace zoom */
    font-weight: 700;
}

/* Dentro de una tarjeta crema, una celda crema no se ve. Borde de tinta. */
.rejilla__celda--llena {
    background: transparent;
    color: var(--ndns-ink-fixed);
    box-shadow: inset 0 0 0 2px var(--ndns-ink-fixed);
}

.rejilla__celda--vacia {
    background: transparent;
    color: var(--ndns-ink-fixed);
    opacity: .5;
    cursor: default;
}

/* Elegida: se invierte a tinta, que es el contraste más fuerte disponible sin
   introducir un color. */
.rejilla__celda--llena:has(input:checked) {
    background: var(--ndns-ink-fixed);
    color: var(--ndns-cream-fixed);
}

/* Doble aro: el aro de tinta da 2.98:1 contra el verde y el de crema
   desaparece sobre la celda crema. Juntos funcionan sobre los dos. */
.rejilla__celda:has(input:focus-visible) {
    outline: 3px solid var(--ndns-ink-fixed);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--ndns-cream-fixed);
}

/* La hora en que arranca la noche va subrayada, no con un punto: un punto rojo
   junto a una hora se lee como "agotado". El dato ya está escrito arriba
   ("Arranca 9 pm") y el `aria-label` de la celda lo dice también, así que esto
   es refuerzo visual, no el único canal. */
.rejilla__celda--show span {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* La noche con boleto no se reserva: se compra. Se marca con terracota, que en
   la marca ya significa "esto es otra cosa". */
/* Esa noche se compra, no se reserva: una tira de la misma altura que una
   celda de hora, no una tarjeta que compita con el resto. El borde de 3px que
   tenía era gramática del lenguaje brutal de afuera metida dentro del cartel. */
/* Sobre crema, el aro terracota desaparecía. Relleno sólido: además dice de
   un golpe que esa noche es otra cosa — se compra, no se reserva. */
.rejilla__celda--boleto {
    /* El terracota normal con texto crema da 3.60:1 y no pasa AA. El profundo
       da 5.79:1 y encima se lee más serio, que para "esto se compra" ayuda. */
    background: var(--ndns-terracotta-deep-fixed);
    color: var(--ndns-cream-fixed);
    text-decoration: none;
    gap: 8px;
    justify-self: start;
    padding: 8px 16px;
}

.rejilla__celda--boleto .rejilla__sello { color: var(--ndns-cream-fixed); opacity: .85; }

.rejilla__celda--boleto:focus-visible {
    outline: 3px solid var(--ndns-ink-fixed);
    box-shadow: 0 0 0 6px var(--ndns-cream-fixed);
}

.rejilla__sello {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ndns-terracotta-deep-fixed);
}

/* A partir de 900px la rejilla se endereza a la forma del cartel: días en
   columnas. Abajo de eso serían ~78px por columna, que no alcanzan ni para el
   flyer ni para el texto — y esta página es de celular primero. */
@media (min-width: 900px) {
    /* `auto-fit` y NO `grid-auto-flow: column`: con flujo por columnas, cinco
       noches fuerzan 5×150px y la rejilla se sale del panel que la contiene
       (medido: se salían SÁB y DOM). Así se acomodan las que quepan y el
       resto baja de renglón, que además aguanta las ~18 noches de prod. */
    .rejilla--noches {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        align-items: start;
    }
    /* En columnas la tarjeta se endereza: día, flyer, título, hora.
       Se probó `subgrid` para alinear las bandas entre tarjetas vecinas y NO
       sirve aquí: exige un número fijo de filas, y estas tarjetas tienen filas
       opcionales (la línea de "también esa noche" sólo aparece en algunas).
       Con el span fijo, las horas se montaban encima del título en la tarjeta
       sin flyer. Alinear entre vecinas queda pendiente. */
    .rejilla--noches .rejilla__noche {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "dia" "flyer" "titulo" "cuando";
    }
    /* Sin flyer NO se reserva su fila: quedaba vacía y las horas, que se
       auto-colocan, caían ahí — encima del título. */
    .rejilla--noches .rejilla__noche:not(:has(.rejilla__flyer)) {
        grid-template-areas: "dia" "titulo" "cuando";
    }
    .rejilla--noches .rejilla__titulo { text-align: center; }
}

/* Estado invalido: si el cliente manda sin elegir hora, "Falta: hora" tiene
   que apuntar a algo que se vea. La rejilla ES el selector de hora. */
.form-group.is-invalid .rejilla {
    box-shadow: 0 0 0 3px var(--ndns-terracotta-fill);
}

/* Una celda apagada tiene que verse apagada: sin esto se veia identica a las
   demas y al tocarla no pasaba nada. */
.rejilla__celda--llena:has(input:disabled) {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Colapsar al elegir ─────────────────────────────────────────────── */
.rejilla__cambiar {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    min-height: 44px;
    background: transparent;
    color: var(--ndns-cream-fixed);
    border: 2px solid var(--ndns-cream-fixed);
    border-radius: 18px;
    font-weight: 700;
    cursor: pointer;
}