/**
 * Componentes reutilizables: botones, tarjetas, formularios, badges.
 * Todos los targets interactivos respetan --target-tactil-min (44px).
 */

/* ---- Botones --------------------------------------------------------------
   Rectos, como los recortes de papel de los afiches: sin píldoras ni sombras.
   Cada fondo del sitio tiene su botón primario (papel → rojo institucional,
   rojo cartel → crema, negro → rojo cartel), así nunca hay que adivinar
   qué contraste funciona dónde. */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: var(--target-tactil-min);
    padding: 0.8em 1.45em;
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.15;
    border-radius: var(--radio-borde);
    border: 2px solid transparent;
    text-align: center;
    cursor: pointer;
    transition: background var(--transicion-rapida), color var(--transicion-rapida),
                border-color var(--transicion-rapida), transform var(--transicion-rapida);
}

.boton:active { transform: translateY(1px); }

.boton:focus-visible {
    outline: 3px solid var(--color-texto);
    outline-offset: 3px;
}

.tema-oscuro .boton:focus-visible,
.tema-rojo .boton:focus-visible {
    outline-color: var(--color-crema);
}

.boton--primario { background: var(--color-rojo); color: #fff; }
.boton--primario:hover { background: var(--color-rojo-oscuro); }

/* Sobre negro el institucional se apaga: ahí el primario es el rojo cartel. */
.tema-oscuro .boton--primario,
.boton--rojo-cartel { background: var(--color-rojo-cartel); color: var(--color-crema); }
.tema-oscuro .boton--primario:hover,
.boton--rojo-cartel:hover { background: #a80303; }

.boton--secundario {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}
.boton--secundario:hover { background: rgba(26, 23, 21, 0.07); }
.tema-oscuro .boton--secundario:hover,
.tema-rojo .boton--secundario:hover { background: rgba(239, 231, 220, 0.12); }

/* Sobre el campo rojo: crema lleno como acción principal... */
.boton--crema { background: var(--color-crema); color: var(--color-rojo-oscuro); }
.boton--crema:hover { background: #fff; }

/* ...y contorno crema para las secundarias. */
.boton--contorno {
    background: transparent;
    border-color: rgba(239, 231, 220, 0.75);
    color: var(--color-crema);
}
.boton--contorno:hover {
    background: rgba(239, 231, 220, 0.12);
    border-color: var(--color-crema);
}

.boton--negro { background: var(--color-negro); color: var(--color-crema); }
.boton--negro:hover { background: #2a2622; }

.boton--ancho-completo { width: 100%; }

/* En pantallas táctiles mantiene los 44px; solo se compacta en escritorio
   con mouse, donde el dedo no es la medida. */
.boton--pequeno {
    padding: 0.55em 1.1em;
    font-size: var(--texto-xs);
}

@media (min-width: 1024px) and (pointer: fine) {
    .boton--pequeno { min-height: 38px; }
}

/* Función agotada: el botón sigue en su lugar para que la fila no cambie de
   forma, pero se ve y se anuncia inactivo. */
.boton--deshabilitado,
.boton--deshabilitado:hover {
    background: transparent;
    border-color: var(--color-borde);
    color: var(--color-texto-tenue);
    cursor: not-allowed;
    transform: none;
}

/* Enlace de retorno ("← Volver a …"). Necesita área táctil propia. */
.enlace-volver {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-tactil-min);
    font-size: var(--texto-sm);
    font-weight: 600;
}

/* Enlace de sección ("Toda la programación →"). La flecha se desplaza al
   pasar el mouse: la única microinteracción del texto corrido. */
.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-height: var(--target-tactil-min);
    font-size: var(--texto-sm);
    font-weight: 600;
    color: var(--color-acento);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    white-space: nowrap;
}

.enlace-flecha::after {
    content: '→';
    transition: transform var(--transicion-rapida);
}

.enlace-flecha:hover::after { transform: translateX(4px); }

.enlace-flecha:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ---- Tarjetas --------------------------------------------------------------- */
.tarjeta {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transicion-normal), transform var(--transicion-normal);
}

/* Toda la tarjeta es zona táctil: el enlace del título se estira sobre ella.
   Resuelve el target de 44px sin inflar la tipografía del titular. */
.tarjeta__titulo a::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Los controles del pie quedan por encima del área estirada para conservar
   su propio destino (reservar, consultar). */
.tarjeta__pie {
    position: relative;
    z-index: 1;
}

.tarjeta:hover {
    box-shadow: var(--sombra-md);
}

/* Hoy casi ninguna película tiene afiche cargado, así que este envoltorio
   se ve vacío la mayor parte del tiempo. En vez de dejar un rectángulo
   negro que parece un error de carga, el fondo es un fotograma: perforación
   de película a los costados y una veladura cálida al centro. Cuando el
   cliente suba el afiche, la imagen lo tapa por completo. */
.tarjeta__imagen-envoltorio {
    position: relative;
    aspect-ratio: 2 / 3;
    background: var(--color-negro-suave);
    overflow: hidden;
}

.tarjeta__imagen-envoltorio::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Perforaciones: dos columnas de rectángulos redondeados. */
        repeating-linear-gradient(
            to bottom,
            transparent 0 14px,
            rgba(244, 239, 231, 0.16) 14px 30px,
            transparent 30px 44px
        ),
        linear-gradient(150deg, rgba(155, 22, 23, 0.32), transparent 62%);
    background-size: 9px 44px, 100% 100%;
    background-position: left 7px top, center;
    background-repeat: repeat-y, no-repeat;
    /* La segunda tira se dibuja con un borde derecho del mismo patrón. */
    box-shadow: inset -16px 0 0 -7px transparent;
}

.tarjeta__imagen-envoltorio::after {
    content: '';
    position: absolute;
    inset-block: 0;
    right: 7px;
    width: 9px;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 14px,
        rgba(244, 239, 231, 0.16) 14px 30px,
        transparent 30px 44px
    );
}

/* Con afiche real, la imagen va por encima de las perforaciones. */
.tarjeta__imagen-envoltorio img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarjeta__imagen-envoltorio--horizontal {
    aspect-ratio: 16 / 10;
}

.tarjeta__cuerpo {
    padding: var(--espacio-md);
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    flex: 1;
}

.tarjeta__categoria {
    font-size: var(--texto-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mayus);
    color: var(--color-acento);
}

.tarjeta__titulo {
    font-family: var(--fuente-titulos);
    font-size: var(--texto-md);
    line-height: 1.2;
}

.tarjeta__meta {
    font-family: var(--fuente-detalle);
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
}

.tarjeta__texto {
    font-size: var(--texto-sm);
    color: var(--color-texto-tenue);
}

.tarjeta__pie {
    margin-top: auto;
    padding-top: var(--espacio-xs);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-sm);
    flex-wrap: wrap;
}

.tarjeta__pie a:not(.boton) {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-tactil-min);
    font-weight: 600;
    font-size: var(--texto-sm);
}

/* ---- Badges de estado (cupos, agotado, etc.) -------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--texto-xs);
    font-weight: 700;
    padding: 0.3em 0.7em;
    border-radius: 999px;
}

.badge--disponible { background: #e4efe6; color: var(--color-exito); }
.badge--pocos       { background: #fbeadd; color: #a35318; }
.badge--agotado      { background: #f4dede; color: var(--color-error); }
.badge--liberada     { background: #e9e4f7; color: #5b4b9c; }

/* ---- Formularios -------------------------------------------------------------
   font-size >= 16px en inputs: evita el zoom automático de iOS al enfocar. */
.campo {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    margin-bottom: var(--espacio-md);
}

.campo__fila {
    display: grid;
    gap: var(--espacio-md);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .campo__fila--2 {
        grid-template-columns: 1fr 1fr;
    }
}

.campo label {
    font-size: var(--texto-sm);
    font-weight: 600;
}

.campo .requerido {
    color: var(--color-rojo);
}

.campo input,
.campo textarea,
.campo select {
    min-height: var(--target-tactil-min);
    font-size: 16px; /* explícito: nunca menos de 16px, sin depender de --texto-base */
    padding: 0.7em 0.9em;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde-md);
    background: #fff;
    color: var(--color-texto);
    width: 100%;
}

.campo select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b6259'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.19l3.71-3.96a.75.75 0 111.08 1.04l-4.25 4.53a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9em center;
    background-size: 1.1em;
    padding-right: 2.5em;
}

.campo textarea {
    min-height: 140px;
    resize: vertical;
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
    border-color: var(--color-acento);
}

.campo__ayuda {
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
}

.campo__error {
    font-size: var(--texto-xs);
    color: var(--color-error);
    font-weight: 600;
}

.campo--con-error input,
.campo--con-error textarea,
.campo--con-error select {
    border-color: var(--color-error);
}

/* ---- Alertas / mensajes flash --------------------------------------------- */
/* Barra de color a la izquierda en vez de caja teñida por los cuatro lados:
   marca el estado sin competir con el fondo de papel. */
.alerta {
    padding: var(--espacio-sm) var(--espacio-md);
    border-radius: var(--radio-borde-md);
    font-size: var(--texto-sm);
    margin-bottom: var(--espacio-md);
    border: 1px solid transparent;
    border-left-width: 3px;
}

.alerta--ok    { background: #e8efe6; color: #245531; border-color: #b9d9c1; border-left-color: var(--color-exito); }
.alerta--error { background: #f7e6e3; color: #7a231c; border-color: #eab8b3; border-left-color: var(--color-error); }

/* El informativo era un gris azulado (#eef1f5) heredado de un tema neutro:
   sobre el papel cálido del sitio se veía como un recorte de otra página.
   Ahora es el mismo papel, un punto más oscuro, con el acento de la casa. */
.alerta--info  { background: var(--color-papel-oscuro); color: #4a4139; border-color: var(--color-borde); border-left-color: var(--color-acento); }

/* ==========================================================================
   Componentes de la identidad de campaña
   ========================================================================== */

/* ---- Estado de cupos --------------------------------------------------------
   Cuadrado de color + texto, no solo color: se entiende en blanco y negro y
   por quien no distingue rojo de verde. */
.cupo {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.cupo::before {
    content: '';
    width: 0.62em;
    height: 0.62em;
    flex-shrink: 0;
    background: currentColor;
}

.cupo--disponible { color: var(--color-exito); }
.cupo--pocos      { color: var(--color-alerta); }
.cupo--agotado    { color: var(--color-error); }
.cupo--agotado::before { background: transparent; border: 2px solid currentColor; }

.tema-oscuro .cupo--disponible { color: #8fd19e; }
.tema-oscuro .cupo--pocos      { color: #f0b46a; }
.tema-oscuro .cupo--agotado    { color: #f2a19a; }

/* Las vistas antiguas usan .badge: se alinea al mismo lenguaje. */
.badge--disponible { background: #e3ede2; color: var(--color-exito); }
.badge--pocos      { background: #f6e6cf; color: var(--color-alerta); }
.badge--agotado    { background: #f4dedb; color: var(--color-error); }
.badge { border-radius: var(--radio-borde); }

/* ---- Afiche ----------------------------------------------------------------- */
.afiche {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--color-negro-suave);
}

.afiche__imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Afiche tipográfico de respaldo: campo de color, sol en la esquina y el
   título en la grotesca de cartel, anclado abajo como en los afiches. */
.afiche--tipografico {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5em;
    padding: clamp(1rem, 0.6rem + 2vw, 1.75rem);
    color: var(--color-crema);
}

.afiche--rojo  { background: var(--color-rojo-cartel); }
.afiche--negro { background: var(--color-negro-suave); }

.afiche__sol {
    position: absolute;
    top: -12%;
    right: -14%;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-crema);
}

.afiche--negro .afiche__sol { background: var(--color-rojo-cartel); }

/* Losa oscura detrás del título: el mismo bloque rectangular del afiche
   "¡MUY PRONTO!", en el rojo institucional. */
.afiche--rojo::before {
    content: '';
    position: absolute;
    left: 0;
    right: 32%;
    top: 28%;
    bottom: 34%;
    background: var(--color-rojo);
    z-index: -1;
}

.afiche__titulo {
    position: relative;
    font-family: var(--fuente-cartel);
    font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
    line-height: 0.95;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.afiche__pie {
    position: relative;
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-mayus);
    text-transform: uppercase;
    opacity: 0.92;
}

/* ---- Lista de funciones -------------------------------------------------- */
.lista-funciones {
    border-top: var(--regla-fuerte);
}

.funcion-item {
    position: relative;
    display: grid;
    grid-template-columns: 4.25rem 1fr;
    gap: var(--espacio-sm) var(--espacio-md);
    padding-block: var(--espacio-md);
    border-bottom: var(--regla);
    transition: background var(--transicion-rapida);
}

.funcion-item__fecha {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5em 0.25em;
    background: var(--color-negro);
    color: var(--color-crema);
    line-height: 1;
    text-transform: uppercase;
    align-self: start;
}

.funcion-item__semana,
.funcion-item__mes {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.funcion-item__dia {
    font-family: var(--fuente-cartel);
    font-size: 2.2rem;
    margin-block: 0.12em;
}

.funcion-item__titulo {
    font-size: var(--texto-md);
    margin-bottom: 0.2em;
}

/* Todo el cuerpo de la fila lleva a la ficha; el botón de reservar queda
   por encima con su propio destino. */
.funcion-item__titulo a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.funcion-item__titulo a:focus-visible {
    outline: none;
}

.funcion-item:has(.funcion-item__titulo a:focus-visible) {
    outline: 3px solid var(--color-texto);
    outline-offset: 2px;
}

.funcion-item__datos {
    font-size: var(--texto-sm);
    font-weight: 500;
}

.funcion-item__ficha {
    font-family: var(--fuente-detalle);
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
}

.funcion-item__nota {
    margin-top: 0.4em;
    font-size: var(--texto-xs);
    color: var(--color-acento);
    font-weight: 600;
}

/* En móvil la zona de acceso ocupa todo el ancho bajo el texto. */
.funcion-item__acceso {
    grid-column: 1 / -1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-xs) var(--espacio-md);
}

.funcion-item__hora {
    font-weight: 600;
    font-size: var(--texto-sm);
}

.funcion-item__acceso .boton {
    margin-left: auto;
}

.funcion-item--agotada .funcion-item__titulo,
.funcion-item--agotada .funcion-item__datos {
    color: var(--color-texto-tenue);
}

@media (hover: hover) {
    .funcion-item:hover { background: rgba(26, 23, 21, 0.035); }
}

@media (min-width: 768px) {
    .funcion-item {
        grid-template-columns: 5rem 1fr auto;
        align-items: center;
        padding-inline: var(--espacio-xs);
    }

    .funcion-item__acceso {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
    }

    .funcion-item__acceso .boton {
        margin-left: 0;
    }

    .funcion-item__dia { font-size: 2.6rem; }
}

/* ---- Tarjeta de actividad ------------------------------------------------ */
.grilla-actividades {
    display: grid;
    gap: var(--espacio-lg) var(--espacio-md);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .grilla-actividades { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grilla-actividades { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta-actividad {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-sm);
}

.tarjeta-actividad__medio {
    overflow: hidden;
}

/* En tarjetas de actividad el afiche va apaisado: son talleres, no
   películas, y así la grilla no se estira hacia abajo. */
.tarjeta-actividad__medio .afiche {
    aspect-ratio: 4 / 3;
    transition: transform var(--transicion-normal);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .tarjeta-actividad:hover .tarjeta-actividad__medio .afiche {
        transform: scale(1.03);
    }
}

.tarjeta-actividad__categoria {
    font-size: var(--texto-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mayus);
    color: var(--color-acento);
}

/* El cuerpo ocupa el alto sobrante de la tarjeta para que los botones
   queden todos a la misma altura en la fila, tengan los datos una o dos
   líneas. */
.tarjeta-actividad__cuerpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-sm);
}

.tarjeta-actividad__titulo {
    font-size: var(--texto-lg);
    line-height: 1.2;
}

/* En la grilla de varias columnas los títulos se reservan dos líneas: uno
   de una línea junto a otro de dos desalineaba los datos de toda la fila. */
@media (min-width: 640px) {
    .tarjeta-actividad__titulo {
        min-height: 2.4em;
    }
}

.tarjeta-actividad__titulo a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.tarjeta-actividad__titulo a:focus-visible { outline: none; }

.tarjeta-actividad:has(.tarjeta-actividad__titulo a:focus-visible) {
    outline: 3px solid var(--color-acento);
    outline-offset: 6px;
}

.tarjeta-actividad__acciones {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-sm) var(--espacio-md);
    margin-top: auto;
}

/* ---- Datos rápidos (cuándo / duración / cupos / valor) ------------------- */
.datos-rapidos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-xs) var(--espacio-md);
    padding-block: var(--espacio-sm);
    border-block: var(--regla);
}

.datos-rapidos dt {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mayus);
    color: var(--color-texto-tenue);
}

.datos-rapidos dd {
    font-size: var(--texto-sm);
    font-weight: 500;
}