/* ==========================================================================
   IndieCinema — Identidad Visual y Sistema de Diseño (IC-44)
   Paleta cinematográfica, escala tipográfica armónica y diseño responsive
   desde celular (360 px) hasta escritorio ancho (1440 px), en CSS vanilla.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES DE DISEÑO (DESIGN TOKENS) EN :ROOT
   Centralizan los valores de la identidad visual de la Entrega 1.
   -------------------------------------------------------------------------- */
:root {
  /* ── 1.1 Paleta de Superficies y Fondos Cinematográficos (Identidad E1) ── */
  /* Fondo principal (#17141C): Tinta oscura profunda */
  --color-fondo: #17141C;
  /* Fondo alternativo (#1e1a24): tono sutilmente más claro para contraste por capas */
  --color-fondo-alt: #1e1a24;
  /* Superficie base (#241f2c): para tarjetas, modales y barras de navegación */
  --color-superficie: #241f2c;
  /* Superficie elevada (#2d2737): empleada en inputs, menús flotantes y cajas de contenido */
  --color-superficie-elevada: #2d2737;
  /* Superficie interactiva (#383144): utilizada para estados activos y selecciones */
  --color-superficie-interactiva: #383144;
  /* Fondo hover: blanco al 6% para realces tenues en elementos clicables */
  --color-superficie-hover: rgba(255, 255, 255, 0.06);

  /* ── 1.2 Paleta de Bordes y Divisores ─────────────────────────────────── */
  /* Borde tenue: crema al 10% para delimitar contenedores sin generar cortes visuales duros */
  --color-borde: rgba(251, 244, 231, 0.10);
  /* Alias de compatibilidad para superficies y bordes interiores */
  --color-superficie-borde: rgba(251, 244, 231, 0.10);
  /* Borde medio: crema al 18% para estados hover y separadores visibles */
  --color-borde-medio: rgba(251, 244, 231, 0.18);
  /* Borde fuerte: crema al 30% para inputs enfocados y tarjetas seleccionadas */
  --color-borde-fuerte: rgba(251, 244, 231, 0.30);

  /* ── 1.3 Colores de Marca y Acento de Roles (E1) ─────────────────────── */
  /* Ámbar (#F0A63B): color insignia de IndieCinema, entradas, claqueta y organizadores */
  --color-primario: #F0A63B;
  /* Ámbar oscurecido (#D8922C): tono de interacción para :hover y :active en botones primarios */
  --color-primario-hover: #D8922C;
  /* Ámbar suave: ámbar al 15% para fondos de enlaces activos e insignias */
  --color-primario-suave: rgba(240, 166, 59, 0.15);

  /* Carmesí cine (#e11d48): color de butacas clásicas, marquesinas y nivel de Administrador */
  --color-acento: #e11d48;
  /* Carmesí oscuro (#be123c): hover de elementos de acento y acciones críticas */
  --color-acento-hover: #be123c;
  /* Carmesí suave (#e11d4826): fondo de insignias de rol de administrador */
  --color-acento-suave: rgba(225, 29, 72, 0.15);

  /* Índigo celuloide (#6366f1): color distintivo del rol de Moderador y revisiones */
  --color-moderador: #6366f1;
  /* Índigo hover (#4f46e5): hover para controles de moderación */
  --color-moderador-hover: #4f46e5;
  /* Índigo suave (#6366f126): fondo de insignias de moderador */
  --color-moderador-suave: rgba(99, 102, 241, 0.15);

  /* ── 1.4 Texto y Contraste de Lectura (WCAG 2.1 AAA) ──────────────────── */
  /* Texto principal (#FBF4E7): Crema sobre fondo oscuro */
  --color-texto: #FBF4E7;
  /* Texto secundario (#D4C9B8): crema suave para descripciones, metadatos y subtítulos */
  --color-texto-secundario: #D4C9B8;
  /* Texto atenuado (#8C8478): crema apagado para placeholders, iconos pasivos y pies de página */
  --color-texto-apagado: #8C8478;
  /* Texto inverso (#17141C): Tinta para lectura sobre botones con fondo primario ámbar */
  --color-texto-inverso: #17141C;
  /* Texto de máximo contraste y realce visual en blanco puro */
  --color-texto-brillante: #FFFFFF;
  /* Alias de compatibilidad para texto atenuado equivalente a texto apagado */
  --color-texto-atenuado: var(--color-texto-apagado);

  /* ── 1.5 Colores de Estado del Sistema ────────────────────────────────── */
  /* Éxito (#10b981): verde esmeralda para operaciones exitosas y cupos disponibles */
  --color-exito: #10b981;
  /* Advertencia (#F0A63B): ámbar para alertas de expiración y advertencias de moderación */
  --color-advertencia: #F0A63B;
  /* Error (#ef4444): rojo vibrante para errores de validación, páginas 404/500 y cancelaciones */
  --color-error: #ef4444;

  /* ── 1.6 Familias Tipográficas ────────────────────────────────────────── */
  /* Fira Sans Condensed: tipografía oficial de IndieCinema para títulos y branding */
  --fuente-titulos: 'Fira Sans Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Fira Sans Condensed: tipografía oficial para cuerpo de texto y controles */
  --fuente-cuerpo: 'Fira Sans Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Monospace: para trazas técnicas de error, tokens CSRF y bloques de depuración */
  --fuente-codigo: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, monospace;

  /* ── 1.7 Escala Tipográfica Fluida ────────────────────────────────────── */
  /* 12px: badges, leyendas y microtexto */
  --texto-xs: 0.75rem;
  /* 14px: inputs, botones chicos y navegación */
  --texto-sm: 0.875rem;
  /* 16px: texto normal de párrafos */
  --texto-base: 1rem;
  /* 18px: subtítulos pequeños y resúmenes */
  --texto-md: 1.125rem;
  /* 20px: encabezados h4 y títulos de tarjetas */
  --texto-lg: 1.25rem;
  /* 24px: encabezados h3 */
  --texto-xl: 1.5rem;
  /* 30px: encabezados h2 */
  --texto-2xl: 1.875rem;
  /* 36px: encabezados h1 */
  --texto-3xl: 2.25rem;

  /* ── 1.8 Escala Modular de Espaciado ─────────────────────────────────── */
  /* 4px: espaciado mínimo entre iconos y texto */
  --espacio-1: 0.25rem;
  /* 8px: margen entre elementos contiguos */
  --espacio-2: 0.5rem;
  /* 12px: padding interno de botones compactos */
  --espacio-3: 0.75rem;
  /* 16px: padding estándar de contenedores */
  --espacio-4: 1rem;
  /* 20px: separación entre grupos medianos */
  --espacio-5: 1.25rem;
  /* 24px: padding de tarjetas */
  --espacio-6: 1.5rem;
  /* 32px: margen entre secciones principales */
  --espacio-8: 2rem;
  /* 40px: espaciado amplio */
  --espacio-10: 2.5rem;
  /* 48px: separación del pie de página */
  --espacio-12: 3rem;

  /* ── 1.9 Radios de Curvatura (Border Radius) ─────────────────────────── */
  /* 6px: botones pequeños y badges */
  --radio-sm: 6px;
  /* 10px: botones estándar y cajas de input */
  --radio-md: 10px;
  /* 16px: tarjetas, modales y menú flotante */
  --radio-lg: 16px;
  /* 9999px: botones tipo píldora, inputs de búsqueda y avatares circulares */
  --radio-completo: 9999px;
  /* Alias de compatibilidad para radio de curvatura circular o de píldora */
  --radio-full: var(--radio-completo);

  /* ── 1.10 Sombras e Iluminación Cinematográfica ──────────────────────── */
  /* Sombra sutil para elevaciones leves */
  --sombra-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* Sombra media para tarjetas estándar */
  --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  /* Sombra profunda para modales y tarjetas de error */
  --sombra-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
  /* Sombra difusa con aro luminoso para menús flotantes */
  --sombra-flotante: 0 14px 35px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* ── 1.11 Layout y Ancho Máximo ───────────────────────────────────────── */
  /* Ancho máximo en escritorio ancho (1440 px), dejando márgenes confortables a los costados */
  --ancho-maximo: 1240px;
  /* Transición estándar para estados interactivos */
  --transicion-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* Transición rápida para micro-interacciones ágiles y cambios de color */
  --transicion-rapida: 0.15s ease;
}

/* --------------------------------------------------------------------------
   2. RESETEO MODERNO Y CONTROL ANTI-OVERFLOW
   Evita desbordes horizontales accidentales en cualquier tamaño de pantalla.
   -------------------------------------------------------------------------- */

/* Aplica el modelo de caja border-box universal para que paddings y bordes no expandan el ancho calculado */
*,
*::before,
*::after {
  /* Calcula anchos incluyendo bordes y relleno para evitar desbordes */
  box-sizing: border-box;
  /* Elimina márgenes exteriores residuales del navegador */
  margin: 0;
  /* Elimina rellenos interiores residuales del navegador */
  padding: 0;
}

/* Configura tamaño base de fuente, scroll suave y previene scroll horizontal en el root */
html {
  /* Define 16px como tamaño de texto raíz base */
  font-size: 16px;
  /* Habilita desplazamiento suave en saltos de ancla */
  scroll-behavior: smooth;
  /* Declara compatibilidad nativa con tema oscuro ante el navegador */
  color-scheme: dark;
  /* Impide que el elemento html exceda el 100% de la ventana */
  max-width: 100%;
  /* Desactiva scroll horizontal en la raíz del documento */
  overflow-x: hidden;
}

/* Cuerpo de la aplicación con estructura flexbox vertical */
body.cuerpo-app {
  /* Asegura que el body cubra al menos toda la altura de la pantalla */
  min-height: 100vh;
  /* Activa flexbox para apilar header, main y footer */
  display: flex;
  /* Dispone los elementos en dirección vertical */
  flex-direction: column;
  /* Fondo cinematográfico oscuro unificado */
  background-color: var(--color-fondo);
  /* Color de texto principal claro */
  color: var(--color-texto);
  /* Aplica la tipografía oficial Fira Sans Condensed */
  font-family: var(--fuente-cuerpo);
  /* Aplica el tamaño base de fuente */
  font-size: var(--texto-base);
  /* Interlineado cómodo de 1.6 para legibilidad */
  line-height: 1.6;
  /* Fuerza el ancho total exacto de la pantalla */
  width: 100%;
  /* Restringe el ancho máximo al 100% sin desbordes */
  max-width: 100%;
  /* Bloquea barras de scroll horizontal involuntarias */
  overflow-x: hidden;
  /* Suavizado subpixel para renderizado en navegadores WebKit */
  -webkit-font-smoothing: antialiased;
  /* Suavizado de tipografías en navegadores Firefox */
  -moz-osx-font-smoothing: grayscale;
}

/* Imágenes y elementos multimedia responsivos: nunca superan el ancho de su contenedor */
img,
svg,
video,
canvas {
  /* Impide que imágenes o gráficos SVG sobrepasen su contenedor padre */
  max-width: 100%;
  /* Conserva la proporción de aspecto original */
  height: auto;
  /* Elimina espacios en blanco inferiores de elementos inline */
  display: block;
}

/* Inputs, botones y textareas heredan tipografía del documento */
input,
button,
textarea,
select {
  /* Hereda la tipografía de la página en lugar de usar fuentes nativas del SO */
  font: inherit;
  /* Hereda el color de texto del contenedor */
  color: inherit;
  /* Impide que los controles excedan el ancho asignado */
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   3. ACCESIBILIDAD Y UTILIDADES
   -------------------------------------------------------------------------- */

/* Oculta un elemento visualmente pero lo mantiene audible para lectores de pantalla */
.sr-only {
  /* Posiciona de forma absoluta para no alterar el flujo visual */
  position: absolute;
  /* Reduce el ancho a 1 pixel */
  width: 1px;
  /* Reduce el alto a 1 pixel */
  height: 1px;
  /* Elimina relleno */
  padding: 0;
  /* Margen negativo para colapsar */
  margin: -1px;
  /* Oculta cualquier exceso */
  overflow: hidden;
  /* Recorta el área visible */
  clip: rect(0, 0, 0, 0);
  /* Evita que el texto envuelva líneas */
  white-space: nowrap;
  /* Remueve bordes */
  border-width: 0;
}

/* Enlace accesible para saltar directo al contenido principal */
.skip-link {
  /* Oculta el enlace arriba fuera de pantalla hasta recibir foco */
  position: absolute;
  /* Posición inicial invisible */
  top: -100px;
  /* Separación del borde izquierdo */
  left: 1rem;
  /* Fondo dorado visible */
  background: var(--color-primario);
  /* Texto oscuro para contraste */
  color: var(--color-texto-inverso);
  /* Relleno cómodo */
  padding: var(--espacio-2) var(--espacio-4);
  /* Bordes redondeados */
  border-radius: var(--radio-sm);
  /* Texto en negrita */
  font-weight: 700;
  /* Prioridad de apilamiento */
  z-index: 999;
  /* Transición fluida al aparecer */
  transition: top var(--transicion-base);
}

/* Al recibir foco por teclado muestra el enlace de salto */
.skip-link:focus {
  /* Desciende el enlace para hacerlo visible */
  top: 1rem;
}

/* --------------------------------------------------------------------------
   4. TIPOGRAFÍA Y JERARQUÍA VISUAL
   -------------------------------------------------------------------------- */

/* Títulos con tipografía oficial Fira Sans Condensed */
h1, h2, h3, h4, h5, h6 {
  /* Tipografía temática Fira Sans Condensed */
  font-family: var(--fuente-titulos);
  /* Color blanco de alto impacto */
  color: var(--color-texto);
  /* Peso seminegrita/negrita */
  font-weight: 700;
  /* Altura de línea compacta para encabezados */
  line-height: 1.25;
  /* Rompe palabras excesivamente largas evitando desbordes a 360 px */
  overflow-wrap: break-word;
  /* Quiebre de seguridad adicional */
  word-break: break-word;
}

/* Encabezado nivel 1 */
h1 {
  /* Tamaño de fuente h1 */
  font-size: var(--texto-3xl);
  /* Separación inferior */
  margin-bottom: var(--espacio-4);
}

/* Encabezado nivel 2 */
h2 {
  /* Tamaño de fuente h2 */
  font-size: var(--texto-2xl);
  /* Separación inferior */
  margin-bottom: var(--espacio-3);
}

/* Encabezado nivel 3 */
h3 {
  /* Tamaño de fuente h3 */
  font-size: var(--texto-xl);
  /* Separación inferior */
  margin-bottom: var(--espacio-3);
}

/* Encabezado nivel 4 */
h4 {
  /* Tamaño de fuente h4 */
  font-size: var(--texto-lg);
  /* Separación inferior */
  margin-bottom: var(--espacio-2);
}

/* Párrafos legibles con separación */
p {
  /* Separación inferior entre párrafos */
  margin-bottom: var(--espacio-4);
  /* Color secundario legible sin encandilar */
  color: var(--color-texto-secundario);
  /* Previene desbordes por palabras largas */
  overflow-wrap: break-word;
}

/* Enlaces con color dorado y transición */
a {
  /* Color ámbar de enlace */
  color: var(--color-primario);
  /* Quita subrayado por defecto */
  text-decoration: none;
  /* Suaviza cambio de color en hover */
  transition: color var(--transicion-base);
}

/* Estado hover de enlaces */
a:hover {
  /* Tono más oscuro al interactuar */
  color: var(--color-primario-hover);
}

/* --------------------------------------------------------------------------
   5. CONTENEDORES Y ESTRUCTURA DE PÁGINA
   -------------------------------------------------------------------------- */

/* Contenedor centralizado para 360 px y 1440 px */
.contenedor {
  /* Ocupa el ancho completo disponible */
  width: 100%;
  /* Limita al ancho máximo de diseño */
  max-width: var(--ancho-maximo);
  /* Centrado horizontal automático */
  margin-left: auto;
  /* Centrado horizontal automático */
  margin-right: auto;
  /* Espacio de respiración lateral izquierdo */
  padding-left: var(--espacio-4);
  /* Espacio de respiración lateral derecho */
  padding-right: var(--espacio-4);
}

/* Área de contenido que se expande empujando al footer */
.contenido-principal {
  /* Ocupa todo el espacio vertical sobrante */
  flex: 1;
  /* Relleno superior e inferior amplio, lateral seguro */
  padding: var(--espacio-8) var(--espacio-4);
  /* Respeta el ancho máximo central */
  max-width: var(--ancho-maximo);
  /* Ancho completo */
  width: 100%;
  /* Centrado automático en la pantalla */
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   6. ENCABEZADO Y BARRA DE NAVEGACIÓN
   -------------------------------------------------------------------------- */

/* Barra fija superior con efecto glassmorphism */
.encabezado {
  /* Fijación superior adhesiva */
  position: sticky;
  /* Pegado al borde superior del viewport */
  top: 0;
  /* Capa de apilamiento para flotar sobre el contenido */
  z-index: 100;
  /* Fondo semitransparente oscuro tinta */
  background-color: rgba(23, 20, 28, 0.92);
  /* Desenfoque de fondo para efecto cristal esmerilado */
  backdrop-filter: blur(14px);
  /* Compatibilidad con navegadores basados en WebKit */
  -webkit-backdrop-filter: blur(14px);
  /* Borde inferior tenue separador */
  border-bottom: 1px solid var(--color-superficie-borde);
  /* Relleno vertical de la barra */
  padding: var(--espacio-3) 0;
  /* Ancho horizontal completo */
  width: 100%;
}

/* Disposición flex de los elementos del encabezado */
.encabezado-contenedor {
  /* Dispone logo, buscador, menú y usuario en fila flexible */
  display: flex;
  /* Alineación vertical centrada */
  align-items: center;
  /* Separa los extremos hacia los laterales */
  justify-content: space-between;
  /* Distancia entre componentes contiguos */
  gap: var(--espacio-4);
  /* Ancho total del contenedor */
  width: 100%;
}

/* Logo de la plataforma */
.encabezado-marca {
  /* Evita que el logo se encoja ante falta de espacio */
  flex-shrink: 0;
}

/* Enlace contenedor del logo */
.encabezado-marca .marca-enlace {
  /* Dispone icono y texto en línea centrados */
  display: inline-flex;
  /* Centrado vertical */
  align-items: center;
  /* Separación entre icono y texto */
  gap: var(--espacio-2);
  /* Tipografía distintiva de marca */
  font-family: var(--fuente-titulos);
  /* Tamaño de fuente destacado */
  font-size: 1.35rem;
  /* Grosor extra negrita */
  font-weight: 800;
  /* Color blanco de texto */
  color: var(--color-texto);
  /* Remueve subrayado */
  text-decoration: none;
  /* Espaciado de letras ajustado */
  letter-spacing: -0.02em;
  /* Previene quiebres de línea en el nombre */
  white-space: nowrap;
}

/* Imagen del logotipo oficial vectorial en el encabezado */
.marca-logo-img {
  height: 38px;
  width: auto;
  display: block;
}

/* Ícono de claqueta en el logo */
.marca-icono {
  /* Tamaño del emoji o icono SVG */
  font-size: 1.4rem;
  /* Altura de línea compacta */
  line-height: 1;
}

/* Resalte dorado en 'Cinema' */
.marca-resaltado {
  /* Color dorado de la identidad */
  color: var(--color-primario);
}

/* Buscador de cabecera */
.encabezado-buscador {
  /* Tamaño flexible con base inicial de 280px */
  flex: 0 1 280px;
  /* Permite contraerse si el espacio disminuye */
  min-width: 0;
}

/* Formulario del buscador */
.buscador-form {
  /* Ancho completo del formulario */
  width: 100%;
}

/* Contenedor relativo del campo de búsqueda */
.buscador-caja {
  /* Posicionamiento relativo para anclar la lupa absoluta */
  position: relative;
  /* Flexbox horizontal */
  display: flex;
  /* Centrado vertical */
  align-items: center;
  /* Ancho total */
  width: 100%;
}

/* Icono de lupa */
.buscador-icono {
  /* Posición absoluta interna */
  position: absolute;
  /* Separación desde la izquierda */
  left: 0.75rem;
  /* Tamaño del icono de lupa */
  font-size: 0.85rem;
  /* Color atenuado */
  color: var(--color-texto-apagado);
  /* Ignora eventos de ratón para permitir clic en el input */
  pointer-events: none;
}

/* Campo de texto de búsqueda */
.buscador-input {
  /* Ocupa el 100% de la caja */
  width: 100%;
  /* Padding izquierdo suficiente para no chocar con la lupa */
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-2) 2.2rem;
  /* Fondo oscuro elevado */
  background-color: var(--color-superficie-elevada);
  /* Borde tenue de delimitación */
  border: 1px solid var(--color-superficie-borde);
  /* Forma redondeada tipo píldora */
  border-radius: var(--radio-completo);
  /* Color del texto tipeado */
  color: var(--color-texto);
  /* Tamaño de fuente adecuado */
  font-size: var(--texto-sm);
  /* Elimina el contorno azul por defecto */
  outline: none;
  /* Transición de colores y sombras */
  transition: all var(--transicion-base);
}

/* Placeholder del buscador */
.buscador-input::placeholder {
  /* Color tenue para el texto de sugerencia */
  color: var(--color-texto-apagado);
}

/* Enfoque del campo de búsqueda */
.buscador-input:focus {
  /* Borde dorado al hacer foco */
  border-color: var(--color-primario);
  /* Fondo más oscuro */
  background-color: var(--color-superficie);
  /* Resplandor ámbar suave (#F0A63B) alrededor */
  box-shadow: 0 0 0 3px rgba(240, 166, 59, 0.15);
}

/* Contenedor de la navegación principal */
.navegacion-principal {
  /* Evita deformaciones */
  flex-shrink: 0;
}

/* Lista de enlaces de navegación */
.navegacion-principal .nav-lista {
  /* Dispone items en fila horizontal */
  display: flex;
  /* Alineación vertical */
  align-items: center;
  /* Separación mínima entre enlaces */
  gap: var(--espacio-1);
  /* Remueve viñetas de lista */
  list-style: none;
}

/* Enlace individual del menú */
.nav-enlace {
  /* Flexbox en línea */
  display: inline-flex;
  /* Centrado vertical */
  align-items: center;
  /* Separación interna con posibles iconos */
  gap: var(--espacio-1);
  /* Color secundario legible */
  color: var(--color-texto-secundario);
  /* Grosor medio */
  font-weight: 500;
  /* Tamaño de fuente estándar para menús */
  font-size: var(--texto-sm);
  /* Relleno táctil cómodo */
  padding: var(--espacio-2) var(--espacio-3);
  /* Bordes suaves */
  border-radius: var(--radio-sm);
  /* Sin subrayado */
  text-decoration: none;
  /* Evita partir enlaces en dos líneas */
  white-space: nowrap;
  /* Transición fluida */
  transition: all var(--transicion-base);
}

/* Hover sobre enlace de menú */
.nav-enlace:hover {
  /* Texto iluminado a blanco */
  color: var(--color-texto);
  /* Fondo sutil resaltador */
  background-color: var(--color-superficie-hover);
}

/* Enlace de página activa */
.nav-enlace.activo {
  /* Color primario dorado */
  color: var(--color-primario);
  /* Fondo dorado tenue */
  background-color: var(--color-primario-suave);
}

/* Enlace de accesos por rol en la barra */
.enlace-rol {
  /* Peso seminegrita */
  font-weight: 600;
}

/* Acciones de usuario / Invitado */
.encabezado-usuario {
  /* Disposición flex */
  display: flex;
  /* Centrado vertical */
  align-items: center;
  /* Separación entre botones */
  gap: var(--espacio-3);
  /* Evita que colapse */
  flex-shrink: 0;
}

/* Contenedor de visitante */
.usuario-invitado {
  /* Disposición flex horizontal */
  display: flex;
  /* Centrado vertical */
  align-items: center;
  /* Separación entre Ingresar y Crear cuenta */
  gap: var(--espacio-2);
  /* Sin quiebres de línea */
  white-space: nowrap;
}

/* Enlace de Ingresar */
.enlace-ingresar {
  /* Peso negrita */
  font-weight: 600;
  /* Color blanco directo */
  color: var(--color-texto);
}

/* --------------------------------------------------------------------------
   7. MENÚ DESPLEGABLE DEL USUARIO (<details> / <summary>)
   -------------------------------------------------------------------------- */

/* Contenedor relativo del dropdown */
.usuario-desplegable {
  /* Ancla el menú flotante absoluto */
  position: relative;
}

/* Disparador summary del menú */
.usuario-resumen {
  /* Disposición flex horizontal */
  display: flex;
  /* Centrado vertical */
  align-items: center;
  /* Separación entre avatar, texto y flecha */
  gap: var(--espacio-2);
  /* Relleno compacto */
  padding: 0.25rem 0.6rem 0.25rem 0.35rem;
  /* Fondo oscuro */
  background-color: var(--color-superficie);
  /* Borde tenue */
  border: 1px solid var(--color-superficie-borde);
  /* Forma redondeada tipo píldora */
  border-radius: var(--radio-completo);
  /* Cursor de mano interactivo */
  cursor: pointer;
  /* Oculta viñeta nativa de lista */
  list-style: none;
  /* Transición */
  transition: all var(--transicion-base);
  /* Impide selección accidental del texto al cliquear */
  user-select: none;
}

/* Oculta la flecha nativa de details en Safari/Chrome */
.usuario-resumen::-webkit-details-marker {
  /* Quita la flecha por defecto */
  display: none;
}

/* Hover del disparador */
.usuario-resumen:hover {
  /* Fondo más claro */
  background-color: var(--color-superficie-elevada);
  /* Borde más brillante */
  border-color: var(--color-borde-medio);
}

/* Avatar circular del usuario */
.usuario-avatar {
  /* Ancho fijo de 30px */
  width: 30px;
  /* Alto fijo de 30px */
  height: 30px;
  /* Círculo perfecto */
  border-radius: var(--radio-completo);
  /* Gradiente dorado hacia ocre */
  background: linear-gradient(135deg, var(--color-primario), #b45309);
  /* Letra en negro para contraste */
  color: #000;
  /* Negrita pesada */
  font-weight: 800;
  /* Tamaño de la inicial */
  font-size: 0.85rem;
  /* Flexbox para centrar inicial */
  display: flex;
  /* Centrado horizontal */
  align-items: center;
  /* Centrado vertical */
  justify-content: center;
  /* Evita que se encoja */
  flex-shrink: 0;
}

/* Contenedor de nombre y rol */
.usuario-info {
  /* Apila nombre sobre rol */
  display: flex;
  /* Dirección vertical */
  flex-direction: column;
  /* Alinea a la izquierda */
  align-items: flex-start;
  /* Interlineado ajustado */
  line-height: 1.15;
}

/* Nombre del usuario */
.usuario-nombre {
  /* Peso seminegrita */
  font-weight: 600;
  /* Tamaño de fuente pequeño */
  font-size: var(--texto-sm);
  /* Color blanco */
  color: var(--color-texto);
  /* Ancho máximo para truncado */
  max-width: 120px;
  /* Oculta texto que desborda */
  overflow: hidden;
  /* Agrega puntos suspensivos */
  text-overflow: ellipsis;
  /* Todo en una sola línea */
  white-space: nowrap;
}

/* Insignia visual con el nombre del rol */
.usuario-rol {
  /* Tamaño de microtexto */
  font-size: 0.65rem;
  /* Todo en mayúsculas */
  text-transform: uppercase;
  /* Espaciado entre caracteres */
  letter-spacing: 0.05em;
  /* Padding de cápsula */
  padding: 0.1rem 0.4rem;
  /* Borde redondeado */
  border-radius: var(--radio-completo);
  /* Fondo neutro elevado */
  background-color: var(--color-superficie-elevada);
  /* Color secundario */
  color: var(--color-texto-secundario);
  /* Separación del nombre */
  margin-top: 0.1rem;
}

/* Color distintivo del rol Organizador */
.usuario-rol.rol-organizador {
  /* Fondo ámbar transparente */
  background-color: var(--color-primario-suave);
  /* Texto ámbar dorado */
  color: var(--color-primario);
}

/* Color distintivo del rol Moderador */
.usuario-rol.rol-moderador {
  /* Fondo índigo transparente */
  background-color: var(--color-moderador-suave);
  /* Texto lavanda */
  color: #a5b4fc;
}

/* Color distintivo del rol Administrador */
.usuario-rol.rol-administrador {
  /* Fondo carmesí transparente */
  background-color: var(--color-acento-suave);
  /* Texto carmesí claro */
  color: #fb7185;
}

/* Flecha animada de apertura */
.desplegable-flecha {
  /* Tamaño diminuto */
  font-size: 0.65rem;
  /* Color atenuado */
  color: var(--color-texto-apagado);
  /* Animación suave de rotación */
  transition: transform var(--transicion-base);
}

/* Rotación de flecha cuando el menú está abierto */
.usuario-desplegable[open] .desplegable-flecha {
  /* Gira 180 grados indicando cierre */
  transform: rotate(180deg);
}

/* Menú flotante desplegado */
.usuario-menu-flotante {
  /* Posicionamiento absoluto respecto al dropdown */
  position: absolute;
  /* Ubicado justo debajo del disparador con margen */
  top: calc(100% + var(--espacio-2));
  /* Alineado a la derecha */
  right: 0;
  /* Ancho cómodo de 260px */
  width: 260px;
  /* No sobrepasa el ancho de la pantalla en móviles pequeños */
  max-width: calc(100vw - 2rem);
  /* Fondo oscuro */
  background-color: var(--color-superficie);
  /* Borde exterior sutil */
  border: 1px solid var(--color-superficie-borde);
  /* Esquinas redondeadas */
  border-radius: var(--radio-lg);
  /* Sombra flotante pronunciada */
  box-shadow: var(--sombra-flotante);
  /* Relleno interno */
  padding: var(--espacio-2);
  /* Alto z-index para no quedar tapado por otros elementos */
  z-index: 200;
  /* Microanimación de entrada */
  animation: deslizarMenu 0.15s ease-out;
}

/* Fotogramas clave de la animación del menú */
@keyframes deslizarMenu {
  from {
    /* Inicio invisible */
    opacity: 0;
    /* Ligeramente desplazado hacia arriba */
    transform: translateY(-6px);
  }
  to {
    /* Completamente visible */
    opacity: 1;
    /* Posición final exacta */
    transform: translateY(0);
  }
}

/* Cabecera interna del menú flotante */
.menu-cabecera {
  /* Relleno interno */
  padding: var(--espacio-2) var(--espacio-3);
}

/* Nombre de usuario dentro de la cabecera del menú */
.menu-usuario-nombre {
  /* Elemento en bloque */
  display: block;
  /* Tamaño de fuente pequeño */
  font-size: var(--texto-sm);
  /* Color blanco */
  color: var(--color-texto);
  /* Previene desborde si el nombre es muy largo */
  overflow-wrap: break-word;
}

/* Rol del usuario dentro del menú */
.menu-usuario-rol {
  /* Elemento en bloque */
  display: block;
  /* Tamaño de microtexto */
  font-size: var(--texto-xs);
  /* Color secundario */
  color: var(--color-texto-secundario);
  /* Separación superior */
  margin-top: 0.15rem;
}

/* Separador horizontal */
.menu-separador {
  /* Línea de 1px de grosor */
  height: 1px;
  /* Color de borde tenue */
  background-color: var(--color-superficie-borde);
  /* Margen vertical */
  margin: var(--espacio-2) 0;
}

/* Subtítulo de sección en el menú */
.menu-seccion-titulo {
  /* Tamaño de microtexto */
  font-size: 0.65rem;
  /* En mayúsculas */
  text-transform: uppercase;
  /* Espaciado entre letras */
  letter-spacing: 0.05em;
  /* Color atenuado */
  color: var(--color-texto-apagado);
  /* Relleno interno */
  padding: var(--espacio-1) var(--espacio-3);
  /* Negrita */
  font-weight: 700;
}

/* Item de enlace del menú */
.menu-item {
  /* Flexbox horizontal */
  display: flex;
  /* Centrado vertical */
  align-items: center;
  /* Separación entre icono y texto */
  gap: var(--espacio-2);
  /* Relleno cómodo para clic */
  padding: var(--espacio-2) var(--espacio-3);
  /* Tamaño de fuente de enlace */
  font-size: var(--texto-sm);
  /* Color secundario */
  color: var(--color-texto-secundario);
  /* Esquinas redondeadas */
  border-radius: var(--radio-sm);
  /* Sin subrayado */
  text-decoration: none;
  /* Transición de hover */
  transition: all var(--transicion-base);
}

/* Soporte para botones como items de menú (ej: formularios de acción POST) */
button.menu-item {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.form-menu-item,
.form-cerrar-sesion {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}

/* Hover de item de menú */
.menu-item:hover {
  /* Resalte de fondo */
  background-color: var(--color-superficie-hover);
  /* Texto a blanco */
  color: var(--color-texto);
}

/* Opción de cerrar sesión */
.menu-item-cerrar {
  /* Color de advertencia o peligro */
  color: var(--color-error);
}

/* Hover de cerrar sesión */
.menu-item-cerrar:hover {
  /* Fondo rojizo tenue */
  background-color: rgba(239, 68, 68, 0.15);
  /* Texto rojo más claro */
  color: #fca5a5;
}

/* Icono descriptivo dentro del menú */
.menu-icono {
  /* Tamaño de icono */
  font-size: 0.95rem;
  /* Ancho fijo para alineación vertical recta */
  width: 18px;
  /* Centrado de texto */
  text-align: center;
  /* Evita que se deforme */
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   8. BOTONES Y CONTROLES INTERACTIVOS
   -------------------------------------------------------------------------- */

/* Estilo base de botones */
.boton {
  /* Disposición flex en línea */
  display: inline-flex;
  /* Centrado horizontal de contenido */
  align-items: center;
  /* Centrado vertical de contenido */
  justify-content: center;
  /* Tipografía oficial Fira Sans Condensed */
  font-family: var(--fuente-cuerpo);
  /* Peso seminegrita */
  font-weight: 600;
  /* Tamaño de texto de botón */
  font-size: var(--texto-sm);
  /* Relleno cómodo */
  padding: var(--espacio-2) var(--espacio-4);
  /* Esquinas redondeadas */
  border-radius: var(--radio-md);
  /* Borde transparente por defecto */
  border: 1px solid transparent;
  /* Cursor de mano */
  cursor: pointer;
  /* Transiciones fluidas */
  transition: all var(--transicion-base);
  /* Sin subrayado */
  text-decoration: none;
  /* Interlineado compacto */
  line-height: 1.25;
  /* Evita que el botón parta su texto en dos renglones */
  white-space: nowrap;
}

/* Variante de botón compacto */
.boton-chico {
  /* Tamaño de fuente más pequeño */
  font-size: var(--texto-xs);
  /* Relleno compacto */
  padding: 0.4rem 0.85rem;
  /* Radio más pequeño */
  border-radius: var(--radio-sm);
}

/* Botón primario dorado */
.boton-primario {
  /* Fondo ámbar dorado */
  background-color: var(--color-primario);
  /* Texto negro para contraste absoluto */
  color: var(--color-texto-inverso);
}

/* Hover de botón primario */
.boton-primario:hover {
  /* Color ámbar más oscuro */
  background-color: var(--color-primario-hover);
  /* Conserva texto negro */
  color: var(--color-texto-inverso);
  /* Efecto de resplandor cinematográfico con ámbar oficial (#F0A63B) */
  box-shadow: 0 0 16px rgba(240, 166, 59, 0.35);
}

/* Botón secundario */
.boton-secundario {
  /* Fondo grisáceo elevado */
  background-color: var(--color-superficie-elevada);
  /* Texto blanco */
  color: var(--color-texto);
  /* Borde tenue */
  border-color: var(--color-superficie-borde);
}

/* Hover de botón secundario */
.boton-secundario:hover {
  /* Resalte más claro */
  background-color: rgba(255, 255, 255, 0.1);
  /* Texto blanco */
  color: var(--color-texto);
}

/* Botón de tamaño grande para llamados principales */
.boton-grande {
  /* Tamaño de fuente intermedio destacado */
  font-size: var(--texto-base);
  /* Relleno vertical y horizontal generoso */
  padding: 0.75rem 1.5rem;
  /* Esquinas redondeadas medianas */
  border-radius: var(--radio-md);
}

/* Botón con ancho completo */
.boton-bloque {
  /* Ocupa el 100% del contenedor padre */
  width: 100%;
}

/* Botón variante peligro para eliminaciones y acciones críticas */
.boton-peligro {
  /* Fondo rojo oscuro de alerta */
  background-color: var(--color-error);
  /* Texto blanco de alto contraste */
  color: #ffffff;
  /* Borde transparente */
  border-color: transparent;
}

/* Efecto hover de botón de peligro */
.boton-peligro:hover {
  /* Fondo rojo más intenso */
  background-color: #dc2626;
  /* Mantiene texto blanco */
  color: #ffffff;
  /* Sombra de resplandor rojizo */
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
}

/* Botón variante fantasma o contorno */
.boton-fantasma {
  /* Fondo completamente transparente */
  background-color: transparent;
  /* Texto claro estándar */
  color: var(--color-texto);
  /* Borde sutil del color de superficie */
  border-color: var(--color-superficie-borde);
}

/* Efecto hover de botón fantasma */
.boton-fantasma:hover {
  /* Fondo sutil translúcido al posar cursor */
  background-color: rgba(255, 255, 255, 0.06);
  /* Color de texto brillante */
  color: var(--color-texto-brillante);
}

/* Estilos de glifo o icono dentro del botón */
.boton-icono {
  /* Disposición flex en línea para alinear con el texto */
  display: inline-flex;
  /* Alineación centrada vertical */
  align-items: center;
  /* Tamaño de glifo proporcional */
  font-size: 1.1em;
  /* Sin interlineado que deforme la altura */
  line-height: 1;
}

/* Margen del icono cuando antecede al texto */
.boton-icono-antes {
  /* Separación a la derecha del icono */
  margin-right: var(--espacio-2);
}

/* Margen del icono cuando sucede al texto */
.boton-icono-despues {
  /* Separación a la izquierda del icono */
  margin-left: var(--espacio-2);
}

/* Estado deshabilitado para botones */
.boton:disabled,
.boton.boton-deshabilitado {
  /* Opacidad reducida para indicar inactividad */
  opacity: 0.5;
  /* Cursor bloqueado */
  cursor: not-allowed;
  /* Sin eventos de puntero para anclas */
  pointer-events: none;
  /* Sin sombra de resplandor */
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   9. LISTA DE DEFINICIONES (PÁGINA ESQUELETO Y DATOS TÉCNICOS)
   -------------------------------------------------------------------------- */

/* Lista de descripción de datos (esqueleto de pruebas) */
dl {
  /* Cuadrícula CSS para disponer términos y definiciones */
  display: grid;
  /* Término autoajustable, definición ocupa el resto */
  grid-template-columns: max-content 1fr;
  /* Espaciado entre filas y columnas */
  gap: var(--espacio-3) var(--espacio-6);
  /* Margen vertical */
  margin: var(--espacio-6) 0;
  /* Fondo de tarjeta oscura */
  background-color: var(--color-superficie);
  /* Relleno interior */
  padding: var(--espacio-6);
  /* Bordes redondeados */
  border-radius: var(--radio-lg);
  /* Borde delimitador sutil */
  border: 1px solid var(--color-superficie-borde);
  /* Ancho total */
  width: 100%;
}

/* Término de la lista */
dt {
  /* Peso seminegrita */
  font-weight: 600;
  /* Color secundario */
  color: var(--color-texto-secundario);
}

/* Definición del término */
dd {
  /* Color blanco de dato */
  color: var(--color-texto);
  /* Remueve margen izquierdo del navegador */
  margin-left: 0;
  /* Quiebre de palabras para evitar desborde en cadenas largas */
  overflow-wrap: break-word;
  /* Quiebre de seguridad */
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   10. TARJETA DE ERROR (404, 500, ETC.)
   -------------------------------------------------------------------------- */

/* Sección contenedora del mensaje de error */
.seccion-error {
  /* Flexbox para centrado */
  display: flex;
  /* Centrado horizontal */
  justify-content: center;
  /* Centrado vertical */
  align-items: center;
  /* Altura mínima del 55% de pantalla */
  min-height: 55vh;
  /* Ancho total */
  width: 100%;
}

/* Tarjeta visual de error */
.tarjeta-error {
  /* Fondo oscuro */
  background-color: var(--color-superficie);
  /* Borde tenue */
  border: 1px solid var(--color-superficie-borde);
  /* Bordes redondeados */
  border-radius: var(--radio-lg);
  /* Relleno generoso */
  padding: var(--espacio-10) var(--espacio-6);
  /* Ancho máximo de tarjeta */
  max-width: 620px;
  /* Ancho completo */
  width: 100%;
  /* Alineación central de textos */
  text-align: center;
  /* Sombra profunda */
  box-shadow: var(--sombra-lg);
}

/* Insignia con el número de código de estado (404, 500) */
.error-insignia {
  /* En bloque en línea */
  display: inline-block;
  /* Tipografía oficial Fira Sans Condensed */
  font-family: var(--fuente-titulos);
  /* Tamaño de fuente gigante */
  font-size: 3.5rem;
  /* Peso extra negrita */
  font-weight: 800;
  /* Color dorado primario */
  color: var(--color-primario);
  /* Interlineado ajustado */
  line-height: 1;
  /* Margen inferior */
  margin-bottom: var(--espacio-4);
}

/* Título del error */
.error-titulo {
  /* Tamaño de fuente h2 */
  font-size: var(--texto-2xl);
  /* Margen inferior */
  margin-bottom: var(--espacio-3);
}

/* Descripción del error */
.error-descripcion {
  /* Tamaño base */
  font-size: var(--texto-base);
  /* Color secundario */
  color: var(--color-texto-secundario);
  /* Separación antes de los botones */
  margin-bottom: var(--espacio-8);
}

/* Botones de acción del error */
.error-acciones {
  /* Disposición flex */
  display: flex;
  /* Centrado horizontal */
  justify-content: center;
  /* Separación entre botones */
  gap: var(--espacio-3);
  /* Envuelve en múltiples renglones si falta espacio */
  flex-wrap: wrap;
}

/* Bloque para traza técnica en desarrollo */
.error-detalles-desarrollo {
  /* Separación superior */
  margin-top: var(--espacio-8);
  /* Alineación de texto a la izquierda para código */
  text-align: left;
  /* Línea divisoria superior */
  border-top: 1px solid var(--color-superficie-borde);
  /* Relleno superior */
  padding-top: var(--espacio-6);
  /* Ancho total */
  width: 100%;
}

/* Título de la traza de desarrollo */
.error-detalles-titulo {
  /* Tamaño pequeño */
  font-size: var(--texto-sm);
  /* Color ámbar de advertencia */
  color: var(--color-advertencia);
  /* Margen inferior */
  margin-bottom: var(--espacio-2);
}

/* Bloque preformateado de código */
.error-detalles-codigo {
  /* Fondo negro intenso */
  background-color: #050608;
  /* Borde tenue */
  border: 1px solid rgba(255, 255, 255, 0.05);
  /* Relleno interno */
  padding: var(--espacio-4);
  /* Esquinas redondeadas */
  border-radius: var(--radio-md);
  /* Tipografía de código monoespaciada */
  font-family: var(--fuente-codigo);
  /* Tamaño de fuente compacto */
  font-size: var(--texto-xs);
  /* Habilita scroll horizontal sólo si fuera estrictamente indispensable */
  overflow-x: auto;
  /* No sobrepasa el ancho de la tarjeta */
  max-width: 100%;
  /* Color de texto rojizo para errores */
  color: #f87171;
  /* Quiebra líneas automáticamente */
  white-space: pre-wrap;
  /* Rompe palabras largas en cualquier punto */
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   11. PIE DE PÁGINA (FOOTER EN 4 COLUMNAS DE LOS WIREFRAMES)
   -------------------------------------------------------------------------- */

/* Estilos de la franja del footer */
.pie-pagina {
  /* Fondo oscuro */
  background-color: var(--color-superficie);
  /* Borde superior delimitador */
  border-top: 1px solid var(--color-superficie-borde);
  /* Separación superior amplia */
  padding-top: var(--espacio-12);
  /* Se adhiere al fondo de la pantalla mediante margin-top: auto */
  margin-top: auto;
  /* Ancho horizontal completo */
  width: 100%;
}

/* Cuadrícula de 4 columnas para el footer */
.pie-contenedor {
  /* Cuadrícula CSS */
  display: grid;
  /* Columna 1 (marca) al doble de ancho que las otras tres columnas */
  grid-template-columns: 2fr 1fr 1fr 1fr;
  /* Separación entre columnas */
  gap: var(--espacio-8);
  /* Separación inferior antes de los créditos */
  margin-bottom: var(--espacio-10);
  /* Ancho total */
  width: 100%;
}

/* Marca en el pie de página */
.marca-pie {
  /* Flexbox horizontal */
  display: flex;
  /* Centrado vertical */
  align-items: center;
  /* Separación entre icono y texto */
  gap: var(--espacio-2);
  /* Tipografía oficial */
  font-family: var(--fuente-titulos);
  /* Tamaño destacado */
  font-size: 1.3rem;
  /* Peso negrita */
  font-weight: 700;
  /* Margen inferior */
  margin-bottom: var(--espacio-3);
}

/* Imagen del logotipo oficial vectorial en el pie */
.marca-logo-pie-img {
  height: 42px;
  width: auto;
  display: block;
}

/* Lema del pie */
.pie-lema {
  /* Tamaño de fuente de lectura */
  font-size: var(--texto-sm);
  /* Color blanco de texto */
  color: var(--color-texto);
  /* Margen inferior */
  margin-bottom: var(--espacio-2);
  /* Ancho de lectura balanceado */
  max-width: 340px;
}

/* Sublema del pie */
.pie-sublema {
  /* Tamaño de fuente pequeño */
  font-size: var(--texto-xs);
  /* Color apagado */
  color: var(--color-texto-apagado);
  /* Ancho de lectura balanceado */
  max-width: 340px;
}

/* Subtítulo de columna del pie */
.pie-subtitulo {
  /* Tamaño de microtexto */
  font-size: var(--texto-xs);
  /* Color blanco */
  color: var(--color-texto);
  /* Margen inferior */
  margin-bottom: var(--espacio-4);
  /* Mayúsculas */
  text-transform: uppercase;
  /* Espaciado de letras */
  letter-spacing: 0.08em;
  /* Peso negrita */
  font-weight: 700;
}

/* Lista de enlaces del pie */
.pie-enlaces {
  /* Remueve viñetas */
  list-style: none;
}

/* Elemento de lista de enlaces */
.pie-enlaces li {
  /* Separación inferior entre enlaces */
  margin-bottom: var(--espacio-2);
}

/* Enlace individual del pie */
.pie-enlaces a {
  /* Color secundario */
  color: var(--color-texto-secundario);
  /* Tamaño pequeño */
  font-size: var(--texto-sm);
  /* Transición fluida */
  transition: color var(--transicion-base);
}

/* Hover de enlace del pie */
.pie-enlaces a:hover {
  /* Color dorado primario */
  color: var(--color-primario);
}

/* Franja inferior de créditos */
.pie-creditos {
  /* Borde superior muy sutil */
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  /* Relleno vertical */
  padding: var(--espacio-4) 0;
  /* Tamaño de microtexto */
  font-size: var(--texto-xs);
  /* Color apagado */
  color: var(--color-texto-apagado);
}

/* Contenedor flexible de los créditos */
.pie-creditos-contenedor {
  /* Flexbox horizontal */
  display: flex;
  /* Distribuye copyright a la izquierda y etiquetas a la derecha */
  justify-content: space-between;
  /* Centrado vertical */
  align-items: center;
  /* Permite que quiebre si no cabe en una línea */
  flex-wrap: wrap;
  /* Separación */
  gap: var(--espacio-2);
}

/* Etiqueta institucional en los créditos */
.pie-tag-wireframe {
  /* Tamaño de microtexto */
  font-size: var(--texto-xs);
  /* Color atenuado */
  color: var(--color-texto-apagado);
}

/* --------------------------------------------------------------------------
   13. FORMULARIOS Y CONTROLES DE ENTRADA (IC-45)
   Componentes para campo.html.twig con accesibilidad y estados de validación
   -------------------------------------------------------------------------- */

/* Contenedor envolvente de cada campo y su etiqueta/error */
.grupo-campo {
  /* Disposición vertical flex */
  display: flex;
  /* Dirección de columna */
  flex-direction: column;
  /* Separación interna inferior entre campos */
  margin-bottom: var(--espacio-4);
  /* Ancho total disponible */
  width: 100%;
}

/* Etiqueta superior del campo */
.campo-etiqueta {
  /* Disposición en bloque */
  display: block;
  /* Tipografía oficial Fira Sans Condensed */
  font-family: var(--fuente-cuerpo);
  /* Peso seminegrita para lectura clara */
  font-weight: 600;
  /* Tamaño de fuente compacto */
  font-size: var(--texto-sm);
  /* Color de texto brillante para contraste */
  color: var(--color-texto-brillante);
  /* Margen inferior respecto al control */
  margin-bottom: var(--espacio-1);
}

/* Asterisco de campo obligatorio */
.campo-requerido {
  /* Color ámbar dorado de acento */
  color: var(--color-primario);
  /* Margen izquierdo para separar del texto */
  margin-left: 0.25rem;
  /* Peso negrita */
  font-weight: 700;
}

/* Control base compartido por input, select y textarea */
.campo-control {
  /* Ancho completo del grupo */
  width: 100%;
  /* Tipografía del cuerpo */
  font-family: var(--fuente-cuerpo);
  /* Tamaño de texto legible de 15px */
  font-size: var(--texto-sm);
  /* Color de texto claro */
  color: var(--color-texto-brillante);
  /* Fondo oscuro carbón */
  background-color: var(--color-superficie-elevada);
  /* Borde sutil neutro */
  border: 1px solid var(--color-superficie-borde);
  /* Esquinas redondeadas estándar */
  border-radius: var(--radio-md);
  /* Relleno interno cómodo */
  padding: 0.65rem 0.85rem;
  /* Transición fluida al enfocar */
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida), background-color var(--transicion-rapida);
  /* Caja que incluye bordes y padding */
  box-sizing: border-box;
}

/* Placeholder estilizado con tono atenuado */
.campo-control::placeholder {
  /* Color de texto atenuado para no competir con el contenido real */
  color: var(--color-texto-atenuado);
  /* Opacidad plena para compatibilidad con Firefox */
  opacity: 1;
}

/* Estado de foco en los controles de formulario */
.campo-control:focus {
  /* Quita el contorno del navegador por defecto */
  outline: none;
  /* Borde dorado de acento */
  border-color: var(--color-primario);
  /* Sombra de resplandor dorado */
  box-shadow: 0 0 0 3px var(--color-primario-suave);
  /* Fondo ligeramente más claro */
  background-color: rgba(255, 255, 255, 0.05);
}

/* Área de texto multilínea */
.control-textarea {
  /* Redimensionamiento exclusivamente vertical para no romper el layout */
  resize: vertical;
  /* Altura mínima para escritura cómoda */
  min-height: 90px;
  /* Interlineado amplio para lectura */
  line-height: 1.5;
}

/* Envoltorio decorativo para el elemento select con flecha personalizada */
.campo-select-envoltorio {
  /* Posición relativa para anclar la flecha SVG */
  position: relative;
  /* Ancho completo */
  width: 100%;
}

/* Estilo específico para selects */
.control-select {
  /* Quita la apariencia nativa del sistema operativo */
  appearance: none;
  /* Elimina apariencia en navegadores WebKit */
  -webkit-appearance: none;
  /* Relleno derecho extra para no superponer texto con la flecha */
  padding-right: 2.5rem;
  /* Cursor interactivo de selección */
  cursor: pointer;
  /* Fondo con icono de flecha desplegable en SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  /* No repetir el icono */
  background-repeat: no-repeat;
  /* Ubicación del icono a la derecha */
  background-position: right 0.85rem center;
  /* Tamaño del icono */
  background-size: 14px 14px;
}

/* Opciones desplegadas dentro del select */
.control-select option {
  /* Fondo oscuro carbón para cada opción */
  background-color: var(--color-superficie);
  /* Color de texto claro */
  color: var(--color-texto-brillante);
  /* Relleno de opción */
  padding: var(--espacio-2);
}

/* Control de casillas de verificación (checkbox) */
.campo-checkbox-etiqueta {
  /* Disposición flex en fila */
  display: inline-flex;
  /* Alineación al inicio vertical para etiquetas multilínea */
  align-items: flex-start;
  /* Separación horizontal entre casilla y texto */
  gap: var(--espacio-2);
  /* Cursor interactivo */
  cursor: pointer;
  /* Interlineado cómodo */
  line-height: 1.4;
  /* Tamaño de fuente estándar */
  font-size: var(--texto-sm);
  /* Color de texto legible */
  color: var(--color-texto);
}

/* Entrada de checkbox */
.campo-control-checkbox {
  /* Margen superior sutil para nivelar con la primera línea de texto */
  margin-top: 0.15rem;
  /* Ancho de la casilla */
  width: 1.15rem;
  /* Altura de la casilla */
  height: 1.15rem;
  /* Color de acento nativo dorado */
  accent-color: var(--color-primario);
  /* Cursor interactivo */
  cursor: pointer;
  /* Evita que se encoja ante textos largos */
  flex-shrink: 0;
}

/* Texto adyacente a la casilla de verificación */
.checkbox-texto {
  /* Permite que el texto se adapte al contenedor */
  flex: 1;
}

/* Control en estado inválido (error de validación) */
.control-invalido,
.grupo-campo.con-error .campo-control {
  /* Borde rojo de error */
  border-color: var(--color-error);
  /* Fondo con tinte rojizo sutil */
  background-color: rgba(239, 68, 68, 0.05);
}

/* Foco sobre un control con error */
.control-invalido:focus,
.grupo-campo.con-error .campo-control:focus {
  /* Sombra de foco roja */
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
  /* Borde rojo activo */
  border-color: var(--color-error);
}

/* Mensaje de error visible debajo del control */
.campo-error {
  /* Disposición en bloque */
  display: block;
  /* Color rojo de advertencia */
  color: var(--color-error);
  /* Tamaño de texto pequeño y nítido */
  font-size: var(--texto-xs);
  /* Peso seminegrita para destacar */
  font-weight: 500;
  /* Margen superior respecto al input */
  margin-top: 0.35rem;
  /* Interlineado compacto */
  line-height: 1.35;
}

/* Icono del mensaje de error */
.error-icono {
  /* Margen derecho */
  margin-right: 0.25rem;
}

/* Texto de ayuda explicativa inferior */
.campo-ayuda {
  /* Disposición en bloque */
  display: block;
  /* Color atenuado */
  color: var(--color-texto-atenuado);
  /* Tamaño pequeño */
  font-size: var(--texto-xs);
  /* Margen superior */
  margin-top: 0.35rem;
  /* Interlineado cómodo */
  line-height: 1.35;
}

/* Zona para arrastrar y soltar la imagen, con vista previa (IC-296). El campo de archivo queda
   adentro: se llega con el tabulador y se abre con Enter, como siempre */
.zona-de-imagen {
  /* Vista previa, texto, campo y nombre, uno debajo del otro y centrados */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-3);
  /* Aire para que se vea como una zona y no como un campo más */
  padding: var(--espacio-6) var(--espacio-4);
  /* Borde punteado: la pista de que algo se puede soltar acá */
  border: 2px dashed var(--color-borde-medio);
  border-radius: var(--radio-md);
  /* Apenas separada del fondo */
  background-color: var(--color-superficie);
  /* El resalte al arrastrar, suave */
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Mientras hay algo encima para soltar */
.zona-de-imagen-encima {
  /* Borde del color primario, lleno */
  border-style: solid;
  border-color: var(--color-primario);
  /* Y el fondo elevado, para que se note que recibe */
  background-color: var(--color-superficie-elevada);
}

/* La foto elegida, antes de mandarla */
.zona-de-imagen-vista {
  /* Entra en la zona sin deformarse */
  max-width: 100%;
  max-height: 14rem;
  /* Recortada al centro si no es del mismo lado */
  object-fit: cover;
  border-radius: var(--radio-sm);
}

/* «Arrastrá la imagen acá, o elegila:» */
.zona-de-imagen-texto {
  /* Sin margen propio: el gap de la zona separa */
  margin: 0;
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
}

/* El nombre del archivo, para quien no ve la vista previa */
.zona-de-imagen-nombre {
  margin: 0;
  color: var(--color-texto-atenuado);
  font-size: var(--texto-xs);
  /* Si es largo, que no estire la zona */
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Sin animación para quien la desactivó */
@media (prefers-reduced-motion: reduce) {
  .zona-de-imagen {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   14. MENSAJES Y ALERTAS REUTILIZABLES (IC-45)
   Componentes para mensaje.html.twig: éxito, error, advertencia e info
   -------------------------------------------------------------------------- */

/* Contenedor principal de alertas */
.alerta {
  /* Disposición flex */
  display: flex;
  /* Alineación superior de icono y contenido */
  align-items: flex-start;
  /* Separación interna */
  padding: var(--espacio-4);
  /* Esquinas redondeadas */
  border-radius: var(--radio-md);
  /* Margen inferior entre bloques */
  margin-bottom: var(--espacio-5);
  /* Borde perimetral */
  border: 1px solid transparent;
  /* Separación entre icono, texto y cierre */
  gap: var(--espacio-3);
  /* Tipografía */
  font-family: var(--fuente-cuerpo);
  /* Tamaño de texto */
  font-size: var(--texto-sm);
  /* Transición */
  transition: opacity var(--transicion-base);
  /* Ancho completo */
  width: 100%;
  /* Caja que incluye bordes */
  box-sizing: border-box;
}

/* Icono de la alerta */
.alerta-icono {
  /* Ancho fijo para simetría */
  width: 1.5rem;
  /* Altura fija */
  height: 1.5rem;
  /* Disposición flex */
  display: flex;
  /* Centrado horizontal */
  align-items: center;
  /* Centrado vertical */
  justify-content: center;
  /* No se encoge */
  flex-shrink: 0;
  /* Tamaño de glifo */
  font-size: 1.1rem;
}

/* Contenedor del contenido textual de la alerta */
.alerta-contenido {
  /* Ocupa el espacio disponible */
  flex: 1;
  /* Permite saltos de línea ordenados */
  min-width: 0;
}

/* Título de la alerta */
.alerta-titulo {
  /* Bloque */
  display: block;
  /* Peso negrita */
  font-weight: 700;
  /* Tamaño un poco mayor */
  font-size: var(--texto-sm);
  /* Margen inferior */
  margin-bottom: 0.25rem;
  /* Color brillante */
  color: var(--color-texto-brillante);
}

/* Texto de la alerta */
.alerta-texto {
  /* Margen cero para párrafos internos */
  margin: 0;
  /* Interlineado de lectura */
  line-height: 1.45;
}

/* Lista de detalles adicionales */
.alerta-lista-detalles {
  /* Margen superior */
  margin-top: 0.35rem;
  /* Margen inferior cero */
  margin-bottom: 0;
  /* Sangría a la izquierda */
  padding-left: 1.25rem;
  /* Interlineado cómodo */
  line-height: 1.4;
}

/* Elemento individual de lista de detalles */
.alerta-item-detalle {
  /* Margen inferior sutil entre ítems */
  margin-bottom: 0.2rem;
}

/* Botón para descartar la alerta */
.alerta-cerrar {
  /* Fondo transparente */
  background: none;
  /* Sin bordes */
  border: none;
  /* Color atenuado */
  color: var(--color-texto-atenuado);
  /* Cursor interactivo */
  cursor: pointer;
  /* Tamaño de la cruz */
  font-size: 1.25rem;
  /* Sin relleno */
  padding: 0;
  /* Sin interlineado que descentre */
  line-height: 1;
  /* Transición */
  transition: color var(--transicion-rapida);
}

/* Hover del botón de cierre */
.alerta-cerrar:hover {
  /* Color blanco brillante */
  color: var(--color-texto-brillante);
}

/* Variante de éxito */
.alerta-exito {
  /* Fondo esmeralda oscuro translúcido */
  background-color: rgba(16, 185, 129, 0.12);
  /* Borde esmeralda */
  border-color: rgba(16, 185, 129, 0.35);
  /* Color de texto */
  color: #a7f3d0;
}

/* Icono de éxito */
.alerta-exito .alerta-icono {
  /* Color verde brillante */
  color: var(--color-exito);
}

/* Variante de error */
.alerta-error {
  /* Fondo rojo oscuro translúcido */
  background-color: rgba(239, 68, 68, 0.12);
  /* Borde rojo */
  border-color: rgba(239, 68, 68, 0.35);
  /* Color de texto */
  color: #fca5a5;
}

/* Icono de error */
.alerta-error .alerta-icono {
  /* Color rojo brillante */
  color: var(--color-error);
}

/* Variante de advertencia */
.alerta-advertencia {
  /* Fondo ámbar oscuro translúcido (#F0A63B) */
  background-color: rgba(240, 166, 59, 0.12);
  /* Borde ámbar */
  border-color: rgba(240, 166, 59, 0.35);
  /* Color de texto */
  color: #fde68a;
}

/* Icono de advertencia */
.alerta-advertencia .alerta-icono {
  /* Color dorado */
  color: var(--color-primario);
}

/* Variante de información */
.alerta-info {
  /* Fondo azul oscuro translúcido */
  background-color: rgba(59, 130, 246, 0.12);
  /* Borde azul */
  border-color: rgba(59, 130, 246, 0.35);
  /* Color de texto */
  color: #bfdbfe;
}

/* Icono de información */
.alerta-info .alerta-icono {
  /* Color azul claro */
  color: #60a5fa;
}

/* Aviso flotante de que se está esperando al servidor, compartido por los componentes que
   hacen fetch (IC-102 / IC-277): fijo abajo y centrado, así se ve esté donde esté la página */
.aviso-flotante {
  /* Fijo en la pantalla */
  position: fixed;
  /* Abajo */
  bottom: var(--espacio-6);
  /* Centrado */
  left: 50%;
  transform: translateX(-50%);
  /* Por encima del contenido */
  z-index: 50;
  /* Ícono y texto en fila */
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  /* Sin margen propio */
  margin: 0;
  /* Píldora */
  padding: var(--espacio-2) var(--espacio-4);
  border-radius: 999px;
  /* Superficie elevada con borde */
  background-color: var(--color-superficie-elevada);
  border: 1px solid var(--color-borde-medio);
  /* Texto */
  color: var(--color-texto);
  font-size: var(--texto-sm);
  /* Sombra para separarlo de lo que tiene abajo */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Oculto con el atributo hidden mientras no hay nada que avisar: el display de arriba le ganaría */
.aviso-flotante[hidden] {
  /* Fuera de la pantalla */
  display: none;
}

/* Círculo que gira */
.aviso-flotante-icono {
  /* Tamaño del ícono */
  width: 1rem;
  height: 1rem;
  /* Aro con un tramo en el color primario */
  border: 2px solid var(--color-borde-fuerte);
  border-top-color: var(--color-primario);
  border-radius: 50%;
  /* Giro continuo */
  animation: girar 0.8s linear infinite;
}

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

/* Sin animación para quien la desactivó: queda el aro y el texto */
@media (prefers-reduced-motion: reduce) {
  .aviso-flotante-icono {
    animation: none;
  }
}

/* La variante de error del aviso flotante: lo mismo, con el borde y el ícono del error (IC-277) */
.aviso-flotante-error {
  /* Borde del color del error, para distinguirlo del de carga */
  border-color: var(--color-error);
}

/* El ícono del aviso de error: el símbolo, sin aro ni giro */
.aviso-flotante-error .aviso-flotante-icono {
  /* Sin el aro que gira */
  width: auto;
  height: auto;
  border: 0;
  animation: none;
  /* Del color del error */
  color: var(--color-error);
}

/* --------------------------------------------------------------------------
   15. TARJETA DE FUNCIÓN DE CINE Y CUADRÍCULA (IC-45)
   Componentes para tarjeta_funcion.html.twig en Home y Cartelera
   -------------------------------------------------------------------------- */

/* Cuadrícula responsiva para listar tarjetas de funciones en Cartelera y Home */
.cuadricula-funciones {
  /* Cuadrícula CSS moderna */
  display: grid;
  /* Columnas automáticas responsivas de mínimo 280px */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Espaciado uniforme entre tarjetas */
  gap: var(--espacio-6);
  /* Ancho completo */
  width: 100%;
}

/* Contenedor del artículo de la tarjeta de función */
.tarjeta-funcion {
  /* Disposición flex en columna */
  display: flex;
  /* Dirección vertical */
  flex-direction: column;
  /* Fondo oscuro carbón */
  background-color: var(--color-superficie);
  /* Borde tenue de delimitación */
  border: 1px solid var(--color-superficie-borde);
  /* Esquinas redondeadas */
  border-radius: var(--radio-lg);
  /* Oculta desbordes para respetar el radio en la imagen */
  overflow: hidden;
  /* Sombra sutil de elevación */
  box-shadow: var(--sombra-sm);
  /* Transición suave para animación hover */
  transition: transform var(--transicion-base), box-shadow var(--transicion-base), border-color var(--transicion-base);
}

/* Efecto hover sobre la tarjeta de función */
.tarjeta-funcion:hover {
  /* Elevación vertical de 4px */
  transform: translateY(-4px);
  /* Borde resaltado */
  border-color: rgba(255, 255, 255, 0.25);
  /* Sombra profunda */
  box-shadow: var(--sombra-md);
}

/* Área superior del afiche */
.tarjeta-funcion-afiche {
  /* Posición relativa */
  position: relative;
  /* Ancho completo */
  width: 100%;
  /* Relación de aspecto 16:10 para afiches cinematográficos */
  aspect-ratio: 16 / 10;
  /* Fondo neutro oscuro para carga diferida */
  background-color: var(--color-superficie-elevada);
  /* Oculta desbordes */
  overflow: hidden;
}

/* Enlace envolvente del afiche */
.tarjeta-funcion-afiche-enlace {
  /* Disposición en bloque */
  display: block;
  /* Ancho total */
  width: 100%;
  /* Altura total */
  height: 100%;
  /* Sin decoración */
  text-decoration: none;
}

/* Imagen real del afiche */
.tarjeta-funcion-imagen {
  /* Ancho 100% */
  width: 100%;
  /* Altura 100% */
  height: 100%;
  /* Recorte armónico sin deformar */
  object-fit: cover;
  /* Centrado */
  object-position: center;
  /* Transición de zoom al posar ratón */
  transition: transform var(--transicion-base);
}

/* El afiche de una función se ve entero: es vertical y el recuadro apaisado, y recortado se
   pierde el título. Va encima de su copia desenfocada, que llena los costados. */
.tarjeta-funcion-imagen-entera {
  /* Por encima del fondo */
  position: relative;
  /* Entero, sin recortar */
  object-fit: contain;
}

/* La copia desenfocada del afiche, de fondo */
.tarjeta-funcion-imagen-fondo {
  /* Ocupa todo el recuadro, detrás del afiche */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Cubre el recuadro: los bordes no se ven nítidos igual */
  object-fit: cover;
  /* Desenfocada y oscurecida para que resalte el afiche */
  filter: blur(18px) brightness(0.55);
  /* Agrandada para que el desenfoque no deje los bordes claros */
  transform: scale(1.2);
}

/* Zoom suave en la imagen al hacer hover sobre la tarjeta */
.tarjeta-funcion:hover .tarjeta-funcion-imagen {
  /* Escala sutil del 104% */
  transform: scale(1.04);
}

/* Placeholder visual del afiche que replica el wireframe */
.tarjeta-funcion-afiche-placeholder {
  /* Ancho y alto completos */
  width: 100%;
  /* Altura total */
  height: 100%;
  /* Fondo neutro degradado */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.08) 100%);
  /* Disposición flex */
  display: flex;
  /* Dirección vertical */
  flex-direction: column;
  /* Centrado vertical */
  align-items: center;
  /* Centrado horizontal */
  justify-content: center;
  /* Separación */
  gap: var(--espacio-2);
}

/* Icono dentro del placeholder */
.afiche-placeholder-icono {
  /* Tamaño de icono */
  font-size: 1.75rem;
  /* Opacidad tenue */
  opacity: 0.6;
}

/* Texto indicativo dentro del placeholder */
.afiche-placeholder-texto {
  /* Tipografía de títulos */
  font-family: var(--fuente-titulos);
  /* Tamaño de texto */
  font-size: var(--texto-xs);
  /* Espaciado de letras */
  letter-spacing: 0.15em;
  /* Color atenuado */
  color: var(--color-texto-atenuado);
  /* Peso seminegrita */
  font-weight: 600;
}

/* Cuerpo de la tarjeta con contenido textual */
.tarjeta-funcion-cuerpo {
  /* Disposición flex */
  display: flex;
  /* Dirección vertical */
  flex-direction: column;
  /* Relleno interno */
  padding: var(--espacio-4);
  /* Ocupa el espacio restante para nivelar alturas */
  flex: 1;
}

/* Cabecera de la tarjeta con insignia y precio */
.tarjeta-funcion-cabecera {
  /* Disposición flex */
  display: flex;
  /* Alineación centrada */
  align-items: center;
  /* Distribución a los extremos */
  justify-content: space-between;
  /* Margen inferior */
  margin-bottom: var(--espacio-2);
  /* Separación */
  gap: var(--espacio-2);
}

/* Insignia de estado base */
.insignia-estado {
  /* Disposición en línea */
  display: inline-flex;
  /* Centrado */
  align-items: center;
  /* Tipografía */
  font-family: var(--fuente-cuerpo);
  /* Texto extra chico */
  font-size: 0.65rem;
  /* Peso negrita */
  font-weight: 700;
  /* Mayúsculas */
  text-transform: uppercase;
  /* Espaciado entre letras */
  letter-spacing: 0.05em;
  /* Relleno compacto */
  padding: 0.2rem 0.55rem;
  /* Forma de píldora redondeada */
  border-radius: var(--radio-full);
}

/* Insignia función programada */
.insignia-programada {
  /* Fondo negro carbón sólido */
  background-color: #0b0d13;
  /* Borde tenue */
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Color blanco */
  color: var(--color-texto-brillante);
}

/* Icono opcional dentro de insignias de estado (IC-151) */
.insignia-estado .insignia-icono {
  margin-right: 0.35rem;
  font-size: 0.9em;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.05em;
}

/* Insignia función en votación (E3-12 / IC-148 / IC-151): distintiva con matiz índigo y alto contraste */
.insignia-votacion {
  /* Fondo índigo suave */
  background-color: rgba(99, 102, 241, 0.22);
  /* Borde tenue con acento */
  border: 1px solid rgba(129, 140, 248, 0.55);
  /* Color texto claro lila de alta legibilidad (WCAG AAA) */
  color: #e0e7ff;
}

/* Insignia acuerdo de fecha */
.insignia-acuerdo {
  /* Fondo translúcido */
  background-color: rgba(255, 255, 255, 0.08);
  /* Borde tenue */
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Color texto claro */
  color: var(--color-texto-brillante);
}

/* Insignia acuerdo sin mínimo / sin quórum (E3-13.5 / IC-157) */
.insignia-sin-quorum {
  /* Fondo ámbar translúcido */
  background-color: rgba(240, 166, 59, 0.18);
  /* Borde ámbar */
  border: 1px solid rgba(240, 166, 59, 0.5);
  /* Color de advertencia */
  color: var(--color-advertencia);
}

/* Precio en la cabecera de la tarjeta */
.tarjeta-funcion-precio {
  /* Tipografía */
  font-family: var(--fuente-cuerpo);
  /* Tamaño */
  font-size: var(--texto-sm);
  /* Peso seminegrita */
  font-weight: 600;
  /* Color de texto brillante */
  color: var(--color-texto-brillante);
}

/* Título de la obra o ciclo */
.tarjeta-funcion-titulo {
  /* Tipografía oficial Fira Sans Condensed */
  font-family: var(--fuente-titulos);
  /* Tamaño de 18px */
  font-size: var(--texto-lg);
  /* Peso negrita */
  font-weight: 700;
  /* Margen inferior */
  margin: 0 0 var(--espacio-3) 0;
  /* Interlineado ajustado */
  line-height: 1.3;
}

/* Enlace del título */
.tarjeta-funcion-titulo-enlace {
  /* Color brillante */
  color: var(--color-texto-brillante);
  /* Sin subrayado */
  text-decoration: none;
  /* Transición */
  transition: color var(--transicion-rapida);
}

/* Hover en el enlace del título */
.tarjeta-funcion-titulo-enlace:hover {
  /* Color dorado */
  color: var(--color-primario);
}

/* Bloque de metadatos de la tarjeta */
.tarjeta-funcion-meta {
  /* Margen inferior */
  margin-bottom: var(--espacio-4);
  /* Disposición flex */
  display: flex;
  /* Dirección vertical */
  flex-direction: column;
  /* Separación entre líneas */
  gap: var(--espacio-1);
}

/* Fila de dato individual */
.tarjeta-funcion-dato {
  /* Margen cero */
  margin: 0;
  /* Disposición flex */
  display: flex;
  /* Alineación centrada */
  align-items: center;
  /* Separación de icono */
  gap: 0.35rem;
  /* Tamaño chico */
  font-size: var(--texto-xs);
  /* Color atenuado */
  color: var(--color-texto-atenuado);
}

/* Icono del dato: de línea y del color del texto atenuado, como los del wireframe */
.meta-icono {
  /* Tamaño fijo, un poco menor que el texto */
  width: 0.9rem;
  height: 0.9rem;
  /* Color atenuado */
  color: var(--color-texto-apagado);
}

/* Íconos de línea (parciales/icono): en línea con el texto y sin achicarse dentro de una fila flexible */
.icono {
  /* Se alinea con la línea de texto */
  display: inline-block;
  /* Bajado apenas, para quedar centrado con las minúsculas */
  vertical-align: -0.15em;
  /* No se deforma si falta lugar */
  flex-shrink: 0;
}

/* Pie con botón de llamado a la acción */
.tarjeta-funcion-acciones {
  /* Empuja el botón al fondo si el cuerpo crece */
  margin-top: auto;
  /* Ancho completo */
  width: 100%;
}

/* Realce específico para funciones en votación de títulos en la cartelera (IC-151) */
.tarjeta-funcion-votacion {
  border-color: rgba(129, 140, 248, 0.3);
}

.tarjeta-funcion-votacion:hover,
.tarjeta-funcion-votacion:focus-within {
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.18);
}

.tarjeta-funcion-votacion .meta-tiempo .meta-texto-votacion {
  color: #c7d2fe;
  font-weight: 600;
}

.boton-tarjeta-votar {
  background-color: var(--color-primario);
  color: #17141c;
  font-weight: 700;
}

.boton-tarjeta-votar:hover,
.boton-tarjeta-votar:focus-visible {
  background-color: var(--color-primario-hover);
  color: #17141c;
}

/* --------------------------------------------------------------------------
   16. DISEÑOS DE PANTALLA: AUTENTICACIÓN Y SOLICITUD DE SALA (IC-45)
   Componentes para registro.html.twig y alta_sala.html.twig
   -------------------------------------------------------------------------- */

/* Contenedor centrado para pantalla de registro */
.contenedor-autenticacion {
  /* Ancho completo */
  width: 100%;
  /* Límite máximo de ancho de 480px para formulario de registro */
  max-width: 480px;
  /* Centrado horizontal automático */
  margin: var(--espacio-6) auto;
  /* Relleno interno */
  padding: 0 var(--espacio-4);
  /* Caja que incluye padding */
  box-sizing: border-box;
}

/* Tarjeta que envuelve el formulario de autenticación */
.tarjeta-autenticacion {
  /* Fondo carbón azulado */
  background-color: var(--color-superficie);
  /* Borde sutil */
  border: 1px solid var(--color-superficie-borde);
  /* Esquinas redondeadas amplias */
  border-radius: var(--radio-lg);
  /* Relleno generoso */
  padding: var(--espacio-8) var(--espacio-6);
  /* Sombra profunda */
  box-shadow: var(--sombra-md);
}

/* Cabecera del formulario de autenticación */
.autenticacion-cabecera {
  /* Centrado de texto */
  text-align: center;
  /* Margen inferior */
  margin-bottom: var(--espacio-6);
}

/* Título de la pantalla de autenticación */
.autenticacion-titulo {
  /* Tipografía de títulos */
  font-family: var(--fuente-titulos);
  /* Tamaño destacado */
  font-size: var(--texto-2xl);
  /* Margen inferior */
  margin-bottom: var(--espacio-2);
  /* Color de texto brillante */
  color: var(--color-texto-brillante);
}

/* Subtítulo explicativo */
.autenticacion-subtitulo {
  /* Color de texto atenuado */
  color: var(--color-texto-atenuado);
  /* Tamaño de fuente */
  font-size: var(--texto-sm);
  /* Margen cero */
  margin: 0;
  /* Interlineado */
  line-height: 1.45;
}

/* Acciones del formulario */
.formulario-acciones {
  /* Margen superior amplio */
  margin-top: var(--espacio-5);
}

/* Pie del formulario con enlaces */
.autenticacion-pie {
  /* Margen superior */
  margin-top: var(--espacio-6);
  /* Borde superior separador */
  border-top: 1px solid var(--color-superficie-borde);
  /* Relleno superior */
  padding-top: var(--espacio-4);
  /* Centrado de texto */
  text-align: center;
}

/* Enlace destacado */
.enlace-destacado {
  /* Color ámbar dorado */
  color: var(--color-primario);
  /* Peso seminegrita */
  font-weight: 600;
  /* Sin subrayado */
  text-decoration: none;
}

/* Hover en enlace destacado */
.enlace-destacado:hover {
  /* Subrayado al pasar cursor */
  text-decoration: underline;
}

/* Contenedor amplio para formulario de solicitud de sala */
.contenedor-formulario-amplio {
  /* Ancho completo */
  width: 100%;
  /* Límite máximo de 960px como en el wireframe */
  max-width: 960px;
  /* Centrado horizontal */
  margin: 0 auto;
  /* Relleno lateral */
  padding: 0 var(--espacio-4);
  /* Caja con bordes y padding */
  box-sizing: border-box;
}

/* Barra de navegación de migas de pan (breadcrumbs) */
.navegacion-migas {
  /* Margen inferior */
  margin-bottom: var(--espacio-4);
}

/* Lista ordenada de migas */
.lista-migas {
  /* Disposición flex */
  display: flex;
  /* Alineación centrada */
  align-items: center;
  /* Quita viñetas de lista */
  list-style: none;
  /* Margen cero */
  margin: 0;
  /* Relleno cero */
  padding: 0;
  /* Separación */
  gap: var(--espacio-2);
  /* Tamaño de texto chico */
  font-size: var(--texto-xs);
  /* Color atenuado */
  color: var(--color-texto-atenuado);
  /* Envoltura para pantallas chicas */
  flex-wrap: wrap;
}

/* Enlace de miga */
.enlace-miga {
  /* Color atenuado */
  color: var(--color-texto-atenuado);
  /* Sin subrayado */
  text-decoration: none;
}

/* Hover de miga */
.enlace-miga:hover {
  /* Color blanco brillante */
  color: var(--color-texto-brillante);
}

/* Separador entre migas */
.separador-miga {
  /* Color atenuado */
  color: var(--color-texto-apagado);
}

/* Miga activa actual */
.miga-activa {
  /* Color blanco brillante */
  color: var(--color-texto-brillante);
  /* Peso seminegrita */
  font-weight: 600;
}

/* Cabecera del formulario de solicitud */
.encabezado-formulario-solicitud {
  /* Disposición flex */
  display: flex;
  /* Alineación superior */
  align-items: flex-start;
  /* Separación a los extremos */
  justify-content: space-between;
  /* Margen inferior */
  margin-bottom: var(--espacio-6);
  /* Separación */
  gap: var(--espacio-4);
  /* Envoltura en pantallas chicas */
  flex-wrap: wrap;
}

/* Título de la solicitud */
.solicitud-titulo {
  /* Tipografía oficial Fira Sans Condensed */
  font-family: var(--fuente-titulos);
  /* Tamaño */
  font-size: var(--texto-2xl);
  /* Margen inferior */
  margin: 0 0 var(--espacio-1) 0;
}

/* Bajada de la solicitud */
.solicitud-bajada {
  /* Margen cero */
  margin: 0;
  /* Color atenuado */
  color: var(--color-texto-atenuado);
  /* Tamaño chico */
  font-size: var(--texto-sm);
}

/* Sección de progreso de la solicitud */
.progreso-solicitud {
  /* Disposición flex */
  display: flex;
  /* Alineación centrada */
  align-items: center;
  /* Distribución */
  justify-content: space-between;
  /* Fondo de tarjeta */
  background-color: var(--color-superficie);
  /* Borde tenue */
  border: 1px solid var(--color-superficie-borde);
  /* Esquinas redondeadas */
  border-radius: var(--radio-md);
  /* Relleno */
  padding: var(--espacio-3) var(--espacio-5);
  /* Margen inferior */
  margin-bottom: var(--espacio-6);
  /* Envoltura */
  flex-wrap: wrap;
  /* Separación */
  gap: var(--espacio-3);
}

/* Lista de pasos de progreso */
.lista-pasos-progreso {
  /* Disposición flex */
  display: flex;
  /* Alineación centrada */
  align-items: center;
  /* Sin estilo de lista */
  list-style: none;
  /* Margen cero */
  margin: 0;
  /* Relleno cero */
  padding: 0;
  /* Separación entre pasos */
  gap: var(--espacio-4);
  /* Envoltura */
  flex-wrap: wrap;
}

/* Paso individual */
.paso-progreso {
  /* Disposición flex */
  display: inline-flex;
  /* Alineación centrada */
  align-items: center;
  /* Separación */
  gap: 0.35rem;
  /* Tamaño de fuente chico */
  font-size: var(--texto-xs);
  /* Color atenuado por defecto */
  color: var(--color-texto-atenuado);
}

/* Paso completado con tilde */
.paso-completado {
  /* Color blanco */
  color: var(--color-texto-brillante);
}

/* Símbolo check de completado */
.paso-check {
  /* Color verde éxito */
  color: var(--color-exito);
  /* Negrita */
  font-weight: 700;
}

/* Icono de reloj en revisión */
.paso-reloj {
  /* Glifo proporcional */
  font-size: 0.85rem;
}

/* Paso activo actual */
.paso-activo {
  /* Color blanco brillante */
  color: var(--color-texto-brillante);
  /* Peso seminegrita */
  font-weight: 600;
}

/* Los pasos y el estado en un renglón; debajo, si la rechazaron, el pedido de corrección */
.progreso-solicitud-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  width: 100%;
}

/* El pedido de corrección con su motivo, como el aviso del wireframe */
.progreso-solicitud-aviso {
  display: flex;
  gap: var(--espacio-3);
  width: 100%;
  padding-top: var(--espacio-3);
  border-top: 1px solid var(--color-superficie-borde);
  color: var(--color-advertencia);
}

.progreso-solicitud-aviso-titulo {
  margin: 0;
  font-weight: 600;
  font-size: var(--texto-sm);
  color: var(--color-texto-brillante);
}

.progreso-solicitud-aviso-texto {
  margin: var(--espacio-1) 0 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
  overflow-wrap: anywhere;
}

/* La foto que mandó, al corregir una solicitud rechazada */
.solicitud-foto-actual {
  display: block;
  margin-bottom: var(--espacio-3);
  width: 100%;
  max-width: 280px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio-md);
  border: 1px solid var(--color-borde);
}

/* Badge de estado de moderación */
.badge-alerta-negra {
  /* Fondo negro carbón */
  background-color: #0b0d13;
  /* Borde tenue */
  border: 1px solid rgba(255, 255, 255, 0.25);
  /* Color blanco */
  color: var(--color-texto-brillante);
  /* Tamaño de fuente extra chico */
  font-size: 0.65rem;
  /* Peso negrita */
  font-weight: 700;
  /* Espaciado */
  letter-spacing: 0.05em;
  /* Relleno */
  padding: 0.25rem 0.65rem;
  /* Esquinas redondeadas */
  border-radius: var(--radio-sm);
}

/* Secciones de formulario (fieldsets agrupados) */
.seccion-formulario {
  /* Quita borde por defecto de fieldset */
  border: none;
  /* Borde superior separador */
  border-top: 1px solid var(--color-superficie-borde);
  /* Relleno vertical amplio */
  padding: var(--espacio-6) 0;
  /* Margen cero */
  margin: 0;
  /* Ancho total */
  width: 100%;
}

/* Leyenda superior de la sección */
.seccion-leyenda {
  /* Disposición en bloque */
  display: block;
  /* Margen inferior */
  margin-bottom: var(--espacio-4);
  /* Relleno cero */
  padding: 0;
  /* Ancho completo */
  width: 100%;
}

/* Título de la sección de formulario */
.seccion-titulo {
  /* Tipografía de títulos */
  font-family: var(--fuente-titulos);
  /* Tamaño destacado */
  font-size: var(--texto-lg);
  /* Peso negrita */
  font-weight: 700;
  /* Color brillante */
  color: var(--color-texto-brillante);
  /* Bloque */
  display: block;
}

/* Subtítulo de la sección de formulario */
.seccion-subtitulo {
  /* Color atenuado */
  color: var(--color-texto-atenuado);
  /* Tamaño chico */
  font-size: var(--texto-xs);
  /* Bloque */
  display: block;
  /* Margen superior */
  margin-top: 0.15rem;
}

/* Fila de campos de formulario de dos columnas en escritorio */
.fila-campos-doble {
  /* Cuadrícula de 2 columnas proporcionales */
  display: grid;
  /* 2 columnas iguales */
  grid-template-columns: 1fr 1fr;
  /* Separación horizontal y vertical */
  gap: var(--espacio-4);
  /* Ancho completo */
  width: 100%;
}

/* Etiqueta del grupo de casillas de verificación de servicios */
.servicios-etiqueta-grupo {
  /* Bloque */
  display: block;
  /* Peso seminegrita */
  font-weight: 600;
  /* Tamaño chico */
  font-size: var(--texto-sm);
  /* Color brillante */
  color: var(--color-texto-brillante);
  /* Margen inferior */
  margin-bottom: var(--espacio-2);
}

/* Cuadrícula de servicios */
.cuadricula-checkboxes-servicios {
  /* Cuadrícula CSS */
  display: grid;
  /* Columnas adaptables de al menos 200px */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* Separación */
  gap: var(--espacio-3);
  /* Margen inferior */
  margin-bottom: var(--espacio-4);
}

/* Barra inferior de acciones de la solicitud de sala */
.solicitud-acciones-inferior {
  /* Disposición flex */
  display: flex;
  /* Alineación centrada */
  align-items: center;
  /* Separación */
  gap: var(--espacio-4);
  /* Margen superior generoso */
  margin-top: var(--espacio-6);
  /* Margen inferior */
  margin-bottom: var(--espacio-10);
  /* Envoltura en pantallas chicas */
  flex-wrap: wrap;
}

/* Texto de estado de guardado automático */
.solicitud-estado-guardado {
  /* Margen izquierdo automático para empujar a la derecha */
  margin-left: auto;
  /* Color atenuado */
  color: var(--color-texto-atenuado);
  /* Tamaño chico */
  font-size: var(--texto-xs);
}

/* --------------------------------------------------------------------------
   17. CARTELERA: FILTROS, RESULTADOS Y PAGINADO (IC-80)
   Componentes de programacion/cartelera.html.twig
   -------------------------------------------------------------------------- */

/* Formulario GET de filtros sobre la cuadrícula de funciones */
.filtros-cartelera {
  /* Cuadrícula de columnas automáticas: cuatro en escritorio, una en móvil */
  display: grid;
  /* Cada campo de mínimo 180px */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  /* Separación entre campos */
  gap: var(--espacio-4);
  /* Alinea los botones con el pie de los campos */
  align-items: end;
  /* Separación con los resultados */
  margin-bottom: var(--espacio-6);
}

/* Los campos del filtro no llevan el margen inferior de un formulario largo */
.filtros-cartelera .grupo-campo {
  /* Sin margen propio: lo da el gap */
  margin-bottom: 0;
}

/* Botones de filtrar y limpiar */
.filtros-cartelera-acciones {
  /* En fila */
  display: flex;
  /* Separación entre botones */
  gap: var(--espacio-2);
}

/* El buscador del listado de salas usa la misma grilla, con un solo campo un poco más ancho */
.buscador-salas {
  /* El campo y los botones, de mínimo 240px */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* --------------------------------------------------------------------------
   19. FICHA DE LA SALA: FOTO, DATOS Y PRÓXIMAS FUNCIONES (IC-90)
   Componentes de programacion/sala.html.twig
   -------------------------------------------------------------------------- */

/* La foto y los datos de la sala, lado a lado en escritorio */
.ficha-sala-cabecera {
  /* Cuadrícula de dos columnas: la foto un poco más ancha */
  display: grid;
  /* Foto y datos */
  grid-template-columns: 3fr 2fr;
  /* Separación entre las columnas */
  gap: var(--espacio-8);
  /* Los datos arrancan arriba, a la altura de la foto */
  align-items: start;
  /* Separación con las funciones */
  margin: var(--espacio-6) 0 var(--espacio-10);
}

/* Marco de la foto, apaisado como una pantalla */
.ficha-sala-foto {
  /* Proporción de pantalla */
  aspect-ratio: 16 / 9;
  /* Esquinas redondeadas */
  border-radius: var(--radio-lg);
  /* La imagen no se sale de las esquinas */
  overflow: hidden;
  /* Fondo mientras carga o sin foto */
  background-color: var(--color-superficie);
  /* Borde tenue */
  border: 1px solid var(--color-borde);
}

/* La foto ocupa todo el marco sin deformarse */
.ficha-sala-foto-imagen {
  /* Ancho completo */
  width: 100%;
  /* Alto completo */
  height: 100%;
  /* Recorta en lugar de deformar */
  object-fit: cover;
  /* Sin el espacio de línea de una imagen en línea */
  display: block;
}

/* Nombre, dirección, capacidad y descripción, en columna */
.ficha-sala-datos {
  /* En columna */
  display: flex;
  /* Dirección vertical */
  flex-direction: column;
  /* Separación entre los datos */
  gap: var(--espacio-3);
  /* Evita desborde con nombres largos */
  min-width: 0;
}

/* Nombre de la sala */
.ficha-sala-nombre {
  /* Tipografía de títulos */
  font-family: var(--fuente-titulos);
  /* Tamaño destacado */
  font-size: var(--texto-3xl);
  /* Interlineado compacto */
  line-height: 1.15;
  /* Sin margen propio: lo da el gap */
  margin: 0;
  /* Corta palabras muy largas */
  overflow-wrap: anywhere;
}

/* Título de la sección de funciones */
.ficha-sala-funciones-titulo {
  /* Tipografía de títulos */
  font-family: var(--fuente-titulos);
  /* Tamaño de sección */
  font-size: var(--texto-2xl);
  /* Separación con la cuadrícula */
  margin: 0 0 var(--espacio-6);
}

/* En tablet y celular, la foto arriba y los datos debajo */
@media (max-width: 768px) {
  .ficha-sala-cabecera {
    /* Una sola columna */
    grid-template-columns: 1fr;
    /* Menos separación */
    gap: var(--espacio-5);
    /* Menos margen con las funciones */
    margin-bottom: var(--espacio-8);
  }

  .ficha-sala-nombre {
    /* Título más chico */
    font-size: var(--texto-2xl);
  }

  .ficha-sala-funciones-titulo {
    /* Título de sección más chico */
    font-size: var(--texto-xl);
  }
}

/* --------------------------------------------------------------------------
   20. PORTADA: PRESENTACIÓN, BUSCADOR, PRÓXIMAS FUNCIONES Y SALAS (IC-93)
   Componentes de programacion/inicio.html.twig. Medidas del wireframe «Home»
   de Figma, con los colores y las tipografías de la paleta.
   -------------------------------------------------------------------------- */

/* La portada empieza pegada al encabezado: sin el relleno superior del main, que cambia con el ancho */
.contenido-principal:has(> .portada-presentacion:first-child) {
  /* Sin relleno arriba */
  padding-top: 0;
}

/* Franja de presentación con el buscador, de borde a borde de la ventana */
.portada-presentacion {
  /* El fondo y la línea inferior se extienden a todo el ancho sin generar scroll horizontal */
  border-image: linear-gradient(to top, var(--color-borde) 1px, var(--color-fondo-alt) 1px) fill 0 / / 0 100vw;
  /* 64 px arriba y 56 abajo, como el wireframe */
  padding: calc(var(--espacio-8) * 2) 0 calc(var(--espacio-12) + var(--espacio-2));
}

/* Las tres etiquetas sobre el título */
.portada-antetitulo {
  /* Tipografía monoespaciada, como las insignias */
  font-family: var(--fuente-codigo);
  /* 11-12 px */
  font-size: var(--texto-xs);
  /* Mayúsculas */
  text-transform: uppercase;
  /* Espaciado entre letras */
  letter-spacing: 0.08em;
  /* Texto apagado */
  color: var(--color-texto-apagado);
  /* Separación con el título */
  margin: 0 0 var(--espacio-4);
}

/* Título de la portada */
.portada-titulo {
  /* Tipografía de títulos */
  font-family: var(--fuente-titulos);
  /* 46 px en escritorio, más chico en pantallas angostas */
  font-size: clamp(var(--texto-2xl), 4vw, 2.875rem);
  /* Seminegrita */
  font-weight: 600;
  /* Interlineado compacto */
  line-height: 1.08;
  /* Apretado, como el wireframe */
  letter-spacing: -0.025em;
  /* Corta en tres líneas a 720 px */
  max-width: 720px;
  /* Separación con la bajada */
  margin: 0 0 var(--espacio-4);
}

/* Bajada debajo del título */
.portada-bajada {
  /* Texto secundario */
  color: var(--color-texto-secundario);
  /* 17-18 px */
  font-size: var(--texto-md);
  /* Interlineado cómodo */
  line-height: 1.5;
  /* Dos líneas en escritorio */
  max-width: 560px;
  /* 28 px hasta el buscador */
  margin: 0 0 calc(var(--espacio-6) + var(--espacio-1));
}

/* Buscador: qué (lo que sobra), dónde (240 px) y el botón, en una fila */
.portada-buscador {
  /* Cuadrícula de tres columnas */
  display: grid;
  /* El texto se lleva el espacio que queda */
  grid-template-columns: minmax(0, 1fr) 240px auto;
  /* 12 px entre campos */
  gap: var(--espacio-3);
  /* Alinea el botón con el pie de los campos */
  align-items: end;
  /* No más ancho que el wireframe */
  max-width: 900px;
}

/* Los campos del buscador no llevan el margen de un formulario largo */
.portada-buscador .grupo-campo {
  /* Sin margen propio: lo da el gap */
  margin-bottom: 0;
}

/* Cantidad de salas y de funciones */
.portada-resumen {
  /* En fila */
  display: flex;
  /* En pantallas angostas, uno debajo del otro */
  flex-wrap: wrap;
  /* 28 px entre los dos datos */
  gap: var(--espacio-2) calc(var(--espacio-6) + var(--espacio-1));
  /* Texto apagado */
  color: var(--color-texto-apagado);
  /* 13-14 px */
  font-size: var(--texto-sm);
  /* 36 px desde el buscador (28 + 8) */
  margin: calc(var(--espacio-8) + var(--espacio-1)) 0 0;
}

/* Cada sección de la portada, a 64 px de la anterior */
.portada-seccion {
  /* Separación entre secciones */
  margin: calc(var(--espacio-8) * 2) 0;
}

/* La primera, a 56 px de la presentación */
.portada-seccion:first-child {
  /* Un poco menos arriba */
  margin-top: calc(var(--espacio-12) + var(--espacio-2));
}

/* Título de la sección a la izquierda y el enlace a su listado a la derecha */
.portada-seccion-cabecera {
  /* En fila */
  display: flex;
  /* En los extremos */
  justify-content: space-between;
  /* Alineados por abajo */
  align-items: flex-end;
  /* En pantallas angostas, el enlace baja */
  flex-wrap: wrap;
  /* Separación */
  gap: var(--espacio-2) var(--espacio-4);
  /* 20 px hasta las tarjetas */
  margin-bottom: var(--espacio-5);
}

/* Título de sección */
.portada-seccion-titulo {
  /* Tipografía de títulos */
  font-family: var(--fuente-titulos);
  /* 22-24 px */
  font-size: var(--texto-xl);
  /* Seminegrita */
  font-weight: 600;
  /* Apenas apretado */
  letter-spacing: -0.01em;
  /* Sin margen propio */
  margin: 0;
}

/* Enlace al listado completo, subrayado con un borde fino */
.portada-seccion-enlace {
  /* El color del texto, no el de los enlaces */
  color: var(--color-texto);
  /* 14 px */
  font-size: var(--texto-sm);
  /* Sin el subrayado del navegador */
  text-decoration: none;
  /* Borde inferior como subrayado */
  border-bottom: 1px solid var(--color-borde-medio);
  /* Separación del borde */
  padding-bottom: 1px;
}

/* Al pasar, el borde toma el color de los enlaces */
.portada-seccion-enlace:hover {
  /* Color primario */
  border-bottom-color: var(--color-primario);
}

/* Las cuatro próximas funciones en una fila */
.portada-funciones {
  /* Cuatro columnas iguales en escritorio */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* En tablet, dos por fila */
@media (max-width: 1024px) {
  .portada-funciones {
    /* Dos columnas */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Las tres salas en una fila */
.portada-salas {
  /* Cuadrícula */
  display: grid;
  /* Tres columnas en escritorio; baja a dos y a una cuando no entran */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  /* 24 px entre tarjetas */
  gap: var(--espacio-6);
}

/* Tarjeta de sala compacta: la foto cuadrada a la izquierda y los datos a la derecha */
.tarjeta-sala-compacta {
  /* En fila */
  flex-direction: row;
  /* 16 px entre la foto y los datos */
  gap: var(--espacio-4);
  /* 16 px de relleno */
  padding: var(--espacio-4);
}

/* La foto, de 120 x 120 */
.tarjeta-sala-compacta .tarjeta-funcion-afiche {
  /* Ancho fijo */
  width: 120px;
  /* No se achica */
  flex: none;
  /* Cuadrada */
  aspect-ratio: 1;
  /* Esquinas como las del resto */
  border-radius: var(--radio-sm);
}

/* Los datos sin el relleno de la tarjeta vertical */
.tarjeta-sala-compacta .tarjeta-funcion-cuerpo {
  /* Sin relleno: lo da la tarjeta */
  padding: 0;
  /* 8 px entre el nombre, los datos y el botón */
  gap: var(--espacio-2);
  /* Ocupa el resto */
  min-width: 0;
}

/* El nombre un poco más chico que en la tarjeta vertical */
.tarjeta-sala-compacta .tarjeta-funcion-titulo {
  /* 16 px */
  font-size: var(--texto-base);
}

/* El botón con su ancho, debajo de los datos */
.tarjeta-sala-compacta .tarjeta-funcion-acciones {
  /* Sin el margen automático que lo empuja al pie */
  margin-top: var(--espacio-1);
}

/* En tablet y celular, el buscador en una columna */
@media (max-width: 768px) {
  .portada-presentacion {
    /* Menos aire */
    padding: var(--espacio-8) 0;
  }

  .portada-buscador {
    /* Una sola columna */
    grid-template-columns: 1fr;
  }

  .portada-buscador-accion .boton {
    /* El botón a todo el ancho */
    width: 100%;
  }

  .portada-seccion {
    /* Menos separación entre secciones */
    margin: var(--espacio-10) 0;
  }

  .portada-salas,
  .portada-funciones {
    /* Una columna */
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   21. ACERCA DE INDIECINEMA: QUIÉNES SOMOS Y CÓMO FUNCIONA (IC-95)
   Componentes de programacion/acerca_de.html.twig. Los pasos siguen la
   sección «Cómo funciona una función» del wireframe «Home» de Figma.
   -------------------------------------------------------------------------- */

/* Cabecera de la página */
.acerca-de-cabecera {
  /* Separación con la primera sección */
  margin-bottom: var(--espacio-10);
}

/* Título de la página */
.acerca-de-titulo {
  /* Tipografía de títulos */
  font-family: var(--fuente-titulos);
  /* Como el título de la portada, un poco más chico */
  font-size: clamp(var(--texto-2xl), 3.5vw, 2.5rem);
  /* Seminegrita */
  font-weight: 600;
  /* Interlineado compacto */
  line-height: 1.1;
  /* Apretado */
  letter-spacing: -0.025em;
  /* Separación con la bajada */
  margin: 0 0 var(--espacio-4);
}

/* Bajada debajo del título */
.acerca-de-bajada {
  /* Texto secundario */
  color: var(--color-texto-secundario);
  /* Un poco mayor que el cuerpo */
  font-size: var(--texto-md);
  /* Interlineado cómodo */
  line-height: 1.5;
  /* Ancho de lectura */
  max-width: 640px;
  /* Sin margen propio */
  margin: 0;
}

/* Cada sección de la página */
.acerca-de-seccion {
  /* Separación entre secciones */
  margin-bottom: var(--espacio-12);
  /* Al llegar por el ancla, deja ver el título debajo del encabezado */
  scroll-margin-top: var(--espacio-8);
}

/* Párrafos de «Quiénes somos» */
.acerca-de-texto {
  /* Ancho de lectura */
  max-width: 720px;
  /* Texto secundario */
  color: var(--color-texto-secundario);
  /* Interlineado cómodo */
  line-height: 1.6;
  /* Separación con el título */
  margin-top: var(--espacio-5);
}

/* Separación entre los párrafos */
.acerca-de-texto p {
  /* Sin margen arriba */
  margin: 0 0 var(--espacio-4);
}

/* «Cómo funciona»: un recuadro con los cuatro pasos, como en el wireframe */
.acerca-de-pasos {
  /* Fondo apenas distinto */
  background-color: var(--color-fondo-alt);
  /* Borde tenue */
  border: 1px solid var(--color-borde);
  /* Esquinas redondeadas */
  border-radius: var(--radio-md);
  /* 40 px arriba y abajo, 48 a los lados */
  padding: var(--espacio-10) var(--espacio-12);
}

/* Los cuatro pasos en una fila */
.acerca-de-lista-pasos {
  /* Cuadrícula */
  display: grid;
  /* Cuatro columnas iguales */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 32 px entre pasos */
  gap: var(--espacio-8);
  /* Sin la numeración ni el sangrado de la lista */
  list-style: none;
  /* Sin relleno */
  padding: 0;
  /* 24 px desde el título */
  margin: var(--espacio-6) 0 0;
}

/* Número del paso, en el color primario */
.acerca-de-paso-numero {
  /* Bloque, encima del título */
  display: block;
  /* Monoespaciada */
  font-family: var(--fuente-codigo);
  /* 24 px */
  font-size: var(--texto-xl);
  /* Color primario */
  color: var(--color-primario);
  /* Separación con el título */
  margin-bottom: var(--espacio-2);
}

/* Título de cada paso y de cada rol */
.acerca-de-paso-titulo {
  /* 15-16 px */
  font-size: var(--texto-base);
  /* Seminegrita */
  font-weight: 600;
  /* Separación con el texto */
  margin: 0 0 var(--espacio-2);
}

/* Texto de cada paso y de cada rol */
.acerca-de-paso-texto {
  /* Texto apagado */
  color: var(--color-texto-apagado);
  /* 13-14 px */
  font-size: var(--texto-sm);
  /* Interlineado cómodo */
  line-height: 1.5;
  /* Sin margen */
  margin: 0;
}

/* Los roles, en tarjetas de a tres */
.acerca-de-roles {
  /* Cuadrícula */
  display: grid;
  /* Tres columnas que bajan cuando no entran */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  /* Separación */
  gap: var(--espacio-6);
  /* Sin viñetas */
  list-style: none;
  /* Sin relleno */
  padding: 0;
  /* Separación con el título */
  margin: var(--espacio-5) 0 0;
}

/* Cada rol */
.acerca-de-rol {
  /* Superficie de tarjeta */
  background-color: var(--color-superficie);
  /* Borde tenue */
  border: 1px solid var(--color-superficie-borde);
  /* Esquinas redondeadas */
  border-radius: var(--radio-md);
  /* Relleno */
  padding: var(--espacio-5);
}

/* Botones al final de la página */
.acerca-de-acciones {
  /* En fila */
  display: flex;
  /* Bajan en pantallas angostas */
  flex-wrap: wrap;
  /* Separación */
  gap: var(--espacio-3);
  /* Sin margen */
  margin: 0;
}

/* En tablet, los pasos de a dos */
@media (max-width: 1024px) {
  .acerca-de-lista-pasos {
    /* Dos columnas */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* En celular, los pasos en una columna y el recuadro con menos relleno */
@media (max-width: 600px) {
  .acerca-de-pasos {
    /* Menos relleno */
    padding: var(--espacio-6) var(--espacio-5);
  }

  .acerca-de-lista-pasos {
    /* Una columna */
    grid-template-columns: 1fr;
    /* Menos separación */
    gap: var(--espacio-6);
  }
}

/* Cantidad de funciones encontradas y descarga en CSV */
.cartelera-resumen {
  /* En fila */
  display: flex;
  /* La cantidad a la izquierda, la descarga a la derecha */
  justify-content: space-between;
  /* Alineación vertical */
  align-items: center;
  /* En pantallas angostas, la descarga baja */
  flex-wrap: wrap;
  /* Separación entre los dos */
  gap: var(--espacio-2);
  /* Separación con la cuadrícula */
  margin-bottom: var(--espacio-4);
}

/* Cantidad de funciones encontradas */
.cartelera-resultados {
  /* Texto secundario */
  color: var(--color-texto-secundario);
  /* Tamaño chico */
  font-size: var(--texto-sm);
  /* Sin margen propio: lo da .cartelera-resumen */
  margin: 0;
}

/* Navegación entre páginas de resultados */
.paginado {
  /* En fila */
  display: flex;
  /* Centrado */
  justify-content: center;
  /* Alineación vertical */
  align-items: center;
  /* Separación entre elementos */
  gap: var(--espacio-4);
  /* Separación con la cuadrícula */
  margin-top: var(--espacio-8);
}

/* Página actual */
.paginado-actual {
  /* Texto secundario */
  color: var(--color-texto-secundario);
  /* Tamaño chico */
  font-size: var(--texto-sm);
}

/* Mientras la búsqueda en vivo trae resultados, los anteriores quedan atenuados y sin clics (IC-102) */
.cartelera-resultados-seccion[aria-busy="true"] > :not(.aviso-flotante) {
  /* Atenuados */
  opacity: 0.45;
  /* Sin clics hasta que lleguen los nuevos */
  pointer-events: none;
  /* El cambio, suave */
  transition: opacity 0.15s ease;
}

/* Link del mensaje de error de la búsqueda en vivo: carga la misma búsqueda como página (IC-102) */
.alerta-enlace {
  /* Del color del mensaje */
  color: inherit;
  /* Subrayado para que se lea como link */
  text-decoration: underline;
  /* Destacado */
  font-weight: 600;
}

/* Separación entre el texto del mensaje y el link */
.alerta-texto + .alerta-texto {
  margin-top: var(--espacio-2);
}

/* --------------------------------------------------------------------------
   18. FICHA DE LA FUNCIÓN: SALA, OBRAS Y METADATOS (IC-87)
   Componentes de programacion/ficha_funcion.html.twig
   -------------------------------------------------------------------------- */

/* Contenedor principal de la ficha de la función */
.ficha-funcion {
  /* Ancho completo */
  width: 100%;
  /* El del sitio: los wireframes de la función usan todo el ancho, con el acuerdo en dos
     columnas (E3-13.F10) */
  max-width: var(--ancho-maximo);
  /* Centrado horizontal */
  margin: 0 auto;
}

/* Envoltorio del contenido articulado */
.ficha-funcion-contenido {
  /* Disposición flex en columna */
  display: flex;
  /* Dirección vertical */
  flex-direction: column;
  /* Separación entre secciones */
  gap: var(--espacio-6);
}

/* --------------------------------------------------------------------------
   Ficha de la función como los wireframes (E3-13.F10): la cabecera con la sala
   y las píldoras, la línea de estados y el acuerdo de fecha en dos columnas.
   Los colores son los del sitio: lo negro del wireframe es el ámbar.
   -------------------------------------------------------------------------- */

/* Título a la izquierda y «Compartir» (y las acciones del organizador) a la derecha */
.ficha-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espacio-4) var(--espacio-6);
}

/* Aviso de cancelada, título y la fila de la sala, uno debajo del otro */
.ficha-cabecera-texto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
}

/* La sala con su pin y las píldoras, en una fila que baja si no entra */
.ficha-cabecera-datos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3) var(--espacio-4);
}

/* «Cineclub La Perla · Luján»: lleva a la ficha de la sala */
.ficha-cabecera-sala {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--color-texto-secundario);
  text-decoration: none;
}

.ficha-cabecera-sala:hover,
.ficha-cabecera-sala:focus-visible {
  color: var(--color-primario);
}

/* Las píldoras de datos («2 títulos elegidos», «Mínimo 20 asistentes») */
.ficha-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* En versalitas y monoespaciada, con borde, como en el wireframe */
.ficha-chip {
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--color-borde-medio);
  border-radius: 999px;
  font-family: var(--fuente-codigo);
  font-size: var(--texto-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}

/* Botones de la derecha de la cabecera */
.ficha-cabecera-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
}

.ficha-cabecera-acciones form {
  margin: 0;
}

/* La caja de la línea de estados */
.ficha-estados {
  padding: var(--espacio-4) var(--espacio-5);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
}

/* Los cuatro estados en fila; en pantallas angostas bajan */
.ficha-estados-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3) 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada estado es una píldora */
.ficha-estado {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 0.4rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--fuente-codigo);
  font-size: var(--texto-xs);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* El tramo de línea entre un estado y el anterior */
.ficha-estado:not(:first-child) {
  margin-left: 2.75rem;
}

.ficha-estado:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 1.75rem;
  margin-right: 0.5rem;
  border-top: 1px solid var(--color-borde-medio);
}

/* Ya pasó: con borde y el tilde */
.ficha-estado-hecho {
  border-color: var(--color-borde-fuerte);
  color: var(--color-texto-secundario);
}

/* El actual: lleno */
.ficha-estado-actual {
  background: var(--color-primario);
  border-color: var(--color-primario);
  color: var(--color-texto-inverso);
  font-weight: 600;
}

/* El acuerdo que cerró sin quórum: lleno, pero en rojo */
.ficha-estado-alerta {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-texto-brillante);
}

/* Todavía no: punteado y apagado */
.ficha-estado-pendiente {
  border: 1px dashed var(--color-borde-medio);
  color: var(--color-texto-apagado);
}

/* El acuerdo en dos columnas: las franjas y, al costado, el lateral */
.ficha-acuerdo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: var(--espacio-8);
}

/* La columna de las franjas */
.ficha-acuerdo-principal {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  min-width: 0;
}

/* «Franjas horarias propuestas» con «Podés marcar más de una» a la derecha */
.ficha-seccion-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-4);
}

.ficha-seccion-titulo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xl);
  color: var(--color-texto-brillante);
}

.ficha-seccion-ayuda {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

/* «Ingresá para marcar…», para quien no tiene sesión */
.ficha-acuerdo-ingresar {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

.ficha-acuerdo-ingresar a {
  color: var(--color-primario);
}

/* Lo que puede hacer el organizador con el acuerdo */
.ficha-panel-organizador {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-5);
  background: var(--color-superficie-elevada);
  border: 1px solid var(--color-borde-medio);
  border-radius: var(--radio-md);
}

.ficha-panel-titulo {
  margin: 0;
  font-size: var(--texto-md);
  color: var(--color-texto-brillante);
}

.ficha-panel-texto {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

.ficha-panel-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.ficha-panel-acciones form {
  margin: 0;
}

/* La lista de franjas */
.ficha-franjas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Una franja: cuándo, cuántos se comprometieron y el botón, en una fila */
.ficha-franja {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-6);
  padding: var(--espacio-5);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-medio);
  border-radius: var(--radio-md);
}

/* La que marcó quien mira: con el borde grueso, como en el wireframe */
.ficha-franja-marcada {
  border: 2px solid var(--color-primario);
  padding: calc(var(--espacio-5) - 1px);
}

.ficha-franja-fecha {
  margin: 0;
  font-size: var(--texto-md);
  font-weight: 600;
  color: var(--color-texto-brillante);
}

.ficha-franja-horario {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  margin: var(--espacio-1) 0 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

.ficha-franja-progreso {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

/* La barra de compromisos contra el mínimo */
.ficha-barra {
  height: 6px;
  overflow: hidden;
  background: var(--color-superficie-interactiva);
  border-radius: 999px;
}

.ficha-barra-relleno {
  display: block;
  height: 100%;
  background: var(--color-primario);
  border-radius: inherit;
}

/* «11 de 20 comprometidos» a la izquierda y lo que falta a la derecha */
.ficha-franja-conteo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-1) var(--espacio-3);
  margin: 0;
  font-size: var(--texto-xs);
  color: var(--color-texto-secundario);
}

.ficha-franja-conteo strong {
  color: var(--color-texto);
}

.ficha-franja-accion form {
  margin: 0;
}

/* «Me sirve»: el mismo ancho marcado o no, para que la fila no salte. Uno solo: estaba dos veces
   (stylelint, no-duplicate-selectors) y ganaba lo de la segunda, que queda acá. */
.boton-me-sirve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 7.5rem;
  white-space: nowrap;
}

.boton-me-sirve[aria-pressed="true"] {
  border-color: var(--color-primario);
  color: var(--color-primario);
}

/* El lateral: títulos elegidos, cómo se confirma y el aviso */
.ficha-acuerdo-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}

.ficha-caja {
  padding: var(--espacio-6);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-medio);
  border-radius: var(--radio-md);
}

/* «TÍTULOS YA ELEGIDOS», «CÓMO SE CONFIRMA»: rótulos chicos y espaciados */
.ficha-caja-rotulo {
  margin: 0 0 var(--espacio-4);
  font-family: var(--fuente-codigo);
  font-size: var(--texto-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-apagado);
}

.ficha-titulos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Un título: el afiche chico y, al lado, el nombre con el año y la duración */
.ficha-titulo {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-4);
}

.ficha-titulo-afiche {
  flex-shrink: 0;
  width: 4rem;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radio-sm);
}

/* Sin afiche: el marcador del wireframe */
.ficha-titulo-afiche-vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-superficie-elevada);
  border: 1px solid var(--color-borde);
  font-family: var(--fuente-codigo);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-apagado);
}

.ficha-titulo-nombre {
  margin: 0;
  font-weight: 600;
  color: var(--color-texto-brillante);
}

.ficha-titulo-datos {
  margin: var(--espacio-1) 0 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

/* «Ganó la votación con…», separado por una línea */
.ficha-caja-nota {
  margin: var(--espacio-4) 0 0;
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

/* Los datos de «Cómo se confirma»: el nombre a la izquierda y el valor a la derecha */
.ficha-datos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  width: auto;
  margin: 0;
  /* Sin la caja que el dl tiene en todo el sitio: ya está adentro de la suya */
  padding: 0;
  background: none;
  border: none;
}

.ficha-dato {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-4);
  font-size: var(--texto-sm);
}

.ficha-dato dt {
  font-weight: 400;
  color: var(--color-texto-secundario);
}

.ficha-dato dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  color: var(--color-texto);
}

/* El aviso de abajo del lateral, con el borde izquierdo de color como en el wireframe */
.ficha-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-5);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-left: 3px solid var(--color-primario);
  border-radius: var(--radio-sm);
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

.ficha-aviso p {
  margin: 0;
}

.ficha-aviso strong {
  color: var(--color-texto);
}

.ficha-aviso .icono {
  margin-top: 0.15rem;
  color: var(--color-texto);
}

/* En tablet el lateral pasa abajo, y en celular cada franja se apila */
@media (max-width: 900px) {
  .ficha-acuerdo {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .ficha-franja {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-3);
  }

  /* Los estados bajan de a uno: sin el tramo de línea, que quedaría suelto al principio */
  .ficha-estados-lista {
    gap: var(--espacio-2);
  }

  .ficha-estado:not(:first-child) {
    margin-left: 0;
  }

  .ficha-estado:not(:first-child)::before {
    display: none;
  }
}

/* Contenedor para alinear insignia de estado */
.ficha-insignia-contenedor {
  /* Disposición flex */
  display: flex;
  /* Alineación al inicio */
  align-items: center;
}

/* El aviso de cancelada, con el parcial de mensaje, separado del título */
.ficha-alerta-cancelada {
  /* Margen inferior */
  margin-bottom: var(--espacio-2);
}

/* Título principal de la función en la ficha (h1) */
.ficha-funcion-titulo {
  /* Tipografía de marca IndieCinema */
  font-family: var(--fuente-titulos);
  /* Tamaño destacado 36px */
  font-size: var(--texto-3xl);
  /* Peso negrita */
  font-weight: 700;
  /* Color blanco brillante */
  color: var(--color-texto-brillante);
  /* Sin margen por defecto */
  margin: 0;
  /* Altura de línea armónica */
  line-height: 1.2;
  /* Rompe palabras largas para evitar scroll horizontal en móvil */
  word-break: break-word;
}

/* Formulario en línea para cerrar votación desde la cabecera (IC-150) */
.ficha-form-cerrar-votacion {
  display: inline-flex;
  margin: 0;
}

/* Sección estructural dentro de la ficha */
.ficha-seccion {
  /* Ancho 100% */
  width: 100%;
}

/* Tarjeta informativa de la sala indie */
.ficha-sala-tarjeta {
  /* Fondo superficie */
  background-color: var(--color-superficie);
  /* Borde tenue */
  border: 1px solid var(--color-superficie-borde);
  /* Esquinas redondeadas */
  border-radius: var(--radio-lg);
  /* Relleno generoso */
  padding: var(--espacio-6);
  /* Disposición flex */
  display: flex;
  /* Separación */
  gap: var(--espacio-6);
  /* Alineación superior */
  align-items: flex-start;
  /* Distribución a los extremos */
  justify-content: space-between;
  /* Sombra sutil */
  box-shadow: var(--sombra-sm);
}

/* Columna de detalles textuales de la sala */
.ficha-sala-detalles {
  /* Ocupa el espacio restante */
  flex: 1;
  /* Permite que los hijos no desborden */
  min-width: 0;
  /* Disposición flex en columna */
  display: flex;
  /* Dirección vertical */
  flex-direction: column;
  /* Separación */
  gap: var(--espacio-2);
}

/* Encabezado h2 de la sala */
.ficha-sala-titulo {
  /* Tipografía de títulos */
  font-family: var(--fuente-titulos);
  /* Tamaño 24px */
  font-size: var(--texto-xl);
  /* Peso negrita */
  font-weight: 700;
  /* Color blanco brillante */
  color: var(--color-texto-brillante);
  /* Margen cero */
  margin: 0;
  /* Altura de línea */
  line-height: 1.3;
}

/* Enlace hacia el detalle de la sala indie */
.ficha-sala-enlace {
  /* Color ámbar de marca */
  color: var(--color-primario);
  /* Sin subrayado continuo */
  text-decoration: none;
  /* Subrayado punteado elegante */
  border-bottom: 1px dashed var(--color-primario-suave);
  /* Transición suave */
  transition: color var(--transicion-base), border-color var(--transicion-base);
}

/* Hover sobre el enlace de la sala */
.ficha-sala-enlace:hover {
  /* Ámbar encendido */
  color: var(--color-primario-hover);
  /* Subrayado sólido al posar ratón */
  border-bottom-color: var(--color-primario-hover);
}

/* Ubicación y dirección de la sala */
.ficha-sala-ubicacion {
  /* Disposición flex */
  display: flex;
  /* Alineación baseline */
  align-items: baseline;
  /* Separación */
  gap: var(--espacio-2);
  /* Tamaño de fuente */
  font-size: var(--texto-base);
  /* Color crema secundario */
  color: var(--color-texto-secundario);
  /* Margen cero */
  margin: 0;
}

/* Iconos temáticos de la sala */
.ficha-sala-icono {
  /* Opacidad sutil */
  opacity: 0.85;
  /* Altura compacta */
  line-height: 1;
}

/* Reseña o descripción del espacio independiente */
.ficha-sala-descripcion {
  /* Tamaño de texto */
  font-size: var(--texto-sm);
  /* Color de lectura */
  color: var(--color-texto-secundario);
  /* Altura de línea relajada */
  line-height: 1.55;
  /* Margen vertical */
  margin: var(--espacio-1) 0;
}

/* Butacas y capacidad de espectadores */
.ficha-sala-capacidad {
  /* Disposición flex */
  display: flex;
  /* Alineación baseline */
  align-items: baseline;
  /* Separación */
  gap: var(--espacio-2);
  /* Tamaño chico */
  font-size: var(--texto-sm);
  /* Color atenuado */
  color: var(--color-texto-apagado);
  /* Margen cero */
  margin: 0;
}

/* Contenedor de acciones de la sala */
.ficha-sala-acciones {
  /* Margen superior */
  margin-top: var(--espacio-3);
}

/* Columna fotográfica de la sala */
.ficha-sala-imagen-columna {
  /* Ancho fijo en escritorio */
  width: 260px;
  /* No se comprime */
  flex-shrink: 0;
}

/* Fotografía de la sala */
.ficha-sala-imagen {
  /* Ancho 100% */
  width: 100%;
  /* Altura controlada */
  height: 180px;
  /* Recorte armónico */
  object-fit: cover;
  /* Esquinas redondeadas */
  border-radius: var(--radio-md);
  /* Borde tenue */
  border: 1px solid var(--color-superficie-borde);
  /* Bloque */
  display: block;
}

/* Cabecera de la sección de obras */
.ficha-obras-cabecera {
  /* Margen inferior */
  margin-bottom: var(--espacio-4);
  /* Relleno inferior */
  padding-bottom: var(--espacio-2);
  /* Línea divisoria sutil */
  border-bottom: 1px solid var(--color-superficie-borde);
}

/* Rótulo de estado de las obras (programadas o candidatas en votación) */
.ficha-obras-etiqueta {
  /* Tipografía de títulos */
  font-family: var(--fuente-titulos);
  /* Tamaño chico */
  font-size: var(--texto-xs);
  /* Mayúsculas */
  text-transform: uppercase;
  /* Espaciado de letras */
  letter-spacing: 0.12em;
  /* Peso negrita */
  font-weight: 700;
  /* Color ámbar primario */
  color: var(--color-primario);
  /* Margen cero */
  margin: 0;
}

/* Lista vertical de tarjetas de obras */
.ficha-obras-lista {
  /* Disposición flex en columna */
  display: flex;
  /* Dirección vertical */
  flex-direction: column;
  /* Separación entre películas */
  gap: var(--espacio-6);
}

/* Tarjeta individual de una película o cortometraje */
.ficha-obra-tarjeta {
  /* Fondo superficie */
  background-color: var(--color-superficie);
  /* Borde tenue */
  border: 1px solid var(--color-superficie-borde);
  /* Esquinas redondeadas */
  border-radius: var(--radio-lg);
  /* Relleno interno */
  padding: var(--espacio-6);
  /* Disposición flex */
  display: flex;
  /* Separación entre afiche y datos */
  gap: var(--espacio-6);
  /* Alineación superior */
  align-items: flex-start;
  /* Sombra sutil */
  box-shadow: var(--sombra-sm);
}

/* Columna para el afiche cinematográfico */
.ficha-obra-afiche-columna {
  /* Ancho fijo de afiche */
  width: 180px;
  /* No se comprime */
  flex-shrink: 0;
}

/* Marcador visual sustituto del afiche cuando no hay imagen */
.ficha-obra-afiche-placeholder {
  /* Ancho 100% */
  width: 100%;
  /* Proporción 2:3 */
  aspect-ratio: 2 / 3;
  /* Esquinas redondeadas */
  border-radius: var(--radio-md);
  /* Fondo degradado suave */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.08) 100%);
  /* Borde tenue */
  border: 1px solid var(--color-superficie-borde);
  /* Disposición flex */
  display: flex;
  /* Dirección vertical */
  flex-direction: column;
  /* Centrado vertical */
  align-items: center;
  /* Centrado horizontal */
  justify-content: center;
  /* Separación */
  gap: var(--espacio-2);
}

/* Cuerpo de información textual de la obra */
.ficha-obra-cuerpo {
  /* Ocupa el espacio restante */
  flex: 1;
  /* Evita desborde horizontal */
  min-width: 0;
  /* Disposición flex en columna */
  display: flex;
  /* Dirección vertical */
  flex-direction: column;
  /* Separación interna */
  gap: var(--espacio-2);
}

/* Título de la obra individual (h2) */
.ficha-obra-titulo {
  /* Tipografía de títulos */
  font-family: var(--fuente-titulos);
  /* Tamaño 30px */
  font-size: var(--texto-2xl);
  /* Peso negrita */
  font-weight: 700;
  /* Color blanco brillante */
  color: var(--color-texto-brillante);
  /* Margen cero */
  margin: 0;
  /* Altura de línea */
  line-height: 1.25;
}

/* Año de realización o estreno */
.ficha-obra-anio {
  /* Tamaño normal */
  font-size: var(--texto-lg);
  /* Peso normal */
  font-weight: 400;
  /* Color atenuado */
  color: var(--color-texto-apagado);
  /* Separación del título */
  margin-left: var(--espacio-1);
}

/* Fila de metadatos de la obra (dirección, duración, tipo) */
.ficha-obra-metadatos {
  /* Disposición flex */
  display: flex;
  /* Envoltorio responsivo */
  flex-wrap: wrap;
  /* Alineación centrada */
  align-items: center;
  /* Separación */
  gap: var(--espacio-2);
  /* Tamaño chico */
  font-size: var(--texto-sm);
  /* Color secundario */
  color: var(--color-texto-secundario);
  /* Margen vertical */
  margin: var(--espacio-1) 0;
}

/* Énfasis en valores clave de metadatos */
.ficha-obra-metadato strong {
  /* Color blanco de lectura */
  color: var(--color-texto);
  /* Peso seminegrita */
  font-weight: 600;
}

/* Separador puntual entre metadatos */
.ficha-obra-separador {
  /* Color atenuado */
  color: var(--color-texto-apagado);
}

/* Contenedor de géneros cinematográficos */
.ficha-obra-generos {
  /* Disposición flex */
  display: flex;
  /* Envoltorio */
  flex-wrap: wrap;
  /* Alineación centrada */
  align-items: center;
  /* Separación */
  gap: var(--espacio-2);
  /* Margen superior */
  margin-top: var(--espacio-1);
}

/* Rótulo de la lista de géneros */
.ficha-obra-generos-rotulo {
  /* Tamaño micro */
  font-size: var(--texto-xs);
  /* Peso seminegrita */
  font-weight: 600;
  /* Mayúsculas */
  text-transform: uppercase;
  /* Espaciado */
  letter-spacing: 0.05em;
  /* Color atenuado */
  color: var(--color-texto-apagado);
}

/* Fila de chips de géneros */
.ficha-obra-generos-chips {
  /* Disposición flex */
  display: flex;
  /* Envoltorio */
  flex-wrap: wrap;
  /* Separación */
  gap: var(--espacio-1);
}

/* Chip de género individual */
.ficha-genero-chip {
  /* Disposición en bloque de línea */
  display: inline-block;
  /* Relleno */
  padding: 0.15rem 0.55rem;
  /* Fondo ámbar suave */
  background-color: var(--color-primario-suave);
  /* Color ámbar primario */
  color: var(--color-primario);
  /* Esquinas redondeadas */
  border-radius: var(--radio-full);
  /* Tamaño micro */
  font-size: var(--texto-xs);
  /* Peso seminegrita */
  font-weight: 600;
}

/* Contenedor de la sinopsis argumental */
.ficha-obra-sinopsis {
  /* Tamaño de lectura base */
  font-size: var(--texto-base);
  /* Color crema de lectura */
  color: var(--color-texto-secundario);
  /* Altura de línea confortable */
  line-height: 1.6;
  /* Margen superior */
  margin-top: var(--espacio-2);
}

/* Párrafo dentro de la sinopsis */
.ficha-obra-sinopsis p {
  /* Sin margen propio */
  margin: 0;
}

/* --------------------------------------------------------------------------
   VOTACIÓN DE TÍTULOS (E3-12 / IC-148)
   Bloque interactivo en la ficha de la función (ficha_funcion.html.twig)
   -------------------------------------------------------------------------- */

.ficha-votacion {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-superficie-borde);
  border-radius: var(--radio-lg);
  padding: var(--espacio-5);
  margin-bottom: var(--espacio-6);
}

.ficha-votacion-cabecera {
  margin-bottom: var(--espacio-4);
}

.ficha-votacion-intro {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

.ficha-votacion-intro .insignia-estado {
  align-self: flex-start;
  margin-bottom: var(--espacio-1);
}

.ficha-votacion-titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xl);
  font-weight: 700;
  color: var(--color-texto-brillante);
  margin: 0;
}

.ficha-votacion-bajada {
  color: var(--color-texto-secundario);
  font-size: var(--texto-base);
  line-height: 1.5;
  margin: 0;
}

.ficha-votacion-confirmacion,
.ficha-votacion-error {
  margin-bottom: var(--espacio-4);
}

.ficha-votacion-aviso-voto {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  background-color: var(--color-primario-suave);
  border: 1px solid var(--color-primario);
  border-radius: var(--radio-md);
  margin-bottom: var(--espacio-4);
}

.ficha-votacion-aviso-voto .aviso-icono {
  font-weight: 700;
  color: var(--color-primario);
  font-size: var(--texto-md);
}

.ficha-votacion-aviso-voto .aviso-texto {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--color-texto);
  line-height: 1.4;
}

.seccion-formulario-votacion {
  border: none;
  padding: 0;
  margin: 0;
}

/* Cuadrícula de obras candidatas en votación */
.cuadricula-candidatas-votacion {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-4);
  margin-top: var(--espacio-3);
  margin-bottom: var(--espacio-5);
  width: 100%;
}

@media (min-width: 768px) {
  .cuadricula-candidatas-votacion {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tarjeta individual de obra candidata para votación */
.tarjeta-candidata-votacion {
  display: flex;
  position: relative;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  background-color: var(--color-superficie-elevada);
  border: 1px solid var(--color-superficie-borde);
  border-radius: var(--radio-md);
  transition: border-color var(--transicion-rapida), background-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.tarjeta-candidata-votacion:hover {
  border-color: var(--color-primario);
}

.tarjeta-candidata-votacion:focus-within {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
}

.tarjeta-candidata-votacion.seleccionada,
.tarjeta-candidata-votacion:has(.candidata-radio:checked) {
  border-color: var(--color-primario);
  background-color: rgba(240, 166, 59, 0.08);
}

/* Obra ya votada previamente por el espectador */
.tarjeta-candidata-votacion.votada {
  border-color: var(--color-primario);
  background-color: rgba(240, 166, 59, 0.05);
  box-shadow: 0 0 0 1px var(--color-primario), 0 4px 14px rgba(240, 166, 59, 0.12);
}

.candidata-radio {
  position: absolute;
  top: var(--espacio-3);
  right: var(--espacio-3);
  accent-color: var(--color-primario);
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  z-index: 1;
}

.candidata-afiche-columna {
  width: 85px;
  min-width: 85px;
  height: 125px;
  border-radius: var(--radio-sm);
  overflow: hidden;
  background-color: var(--color-fondo);
  flex-shrink: 0;
}

.candidata-afiche-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.candidata-afiche-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  background-color: var(--color-fondo);
  border: 1px dashed var(--color-borde-medio);
  border-radius: var(--radio-sm);
  color: var(--color-texto-apagado);
}

.candidata-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
}

.candidata-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
}

.candidata-titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-base);
  font-weight: 600;
  color: var(--color-texto-brillante);
  line-height: 1.3;
  margin: 0;
}

.tarjeta-candidata-votacion.seleccionada .candidata-titulo,
.tarjeta-candidata-votacion:has(.candidata-radio:checked) .candidata-titulo {
  color: var(--color-primario);
}

.candidata-anio {
  font-weight: 400;
  color: var(--color-texto-apagado);
}

.insignia-tu-voto {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  font-size: var(--texto-xs);
  font-weight: 600;
  border-radius: var(--radio-sm);
  background-color: var(--color-primario-suave);
  border: 1px solid var(--color-primario);
  color: var(--color-primario);
  width: fit-content;
  white-space: nowrap;
}

.candidata-metadatos {
  font-size: var(--texto-xs);
  color: var(--color-texto-secundario);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.candidata-separador {
  color: var(--color-texto-apagado);
}

.candidata-generos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

.candidata-sinopsis {
  font-size: var(--texto-xs);
  color: var(--color-texto-secundario);
  line-height: 1.4;
  margin: 0.15rem 0 0;
}

.candidata-conteo-votos {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--color-primario);
}

.candidata-accion {
  margin-top: auto;
  padding-top: var(--espacio-2);
}

.formulario-voto-obra {
  display: inline-flex;
  margin: 0;
}

.boton-votar-obra {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--texto-xs);
  padding: 0.35rem 0.75rem;
  font-weight: 600;
}

.boton-votar-obra .icono-votar {
  font-size: 0.95em;
}

.boton-votar-obra.cargando {
  opacity: 0.75;
  cursor: wait;
}

.candidata-voto-registrado {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background-color: rgba(240, 166, 59, 0.1);
  border: 1px dashed var(--color-primario);
  border-radius: var(--radio-sm);
  font-size: var(--texto-xs);
  color: var(--color-texto-brillante);
}

.pie-votacion-acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  margin-top: var(--espacio-3);
}

/* Invitación accesible a registrarse o ingresar */
.ficha-votacion-invitacion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  padding: var(--espacio-4);
  background-color: var(--color-superficie-elevada);
  border: 1px solid var(--color-borde-medio);
  border-left: 4px solid var(--color-primario);
  border-radius: var(--radio-md);
  margin-bottom: var(--espacio-5);
}

@media (min-width: 640px) {
  .ficha-votacion-invitacion {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--espacio-5);
  }
}

.votacion-invitacion-contenido {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
}

.votacion-icono-invitacion {
  font-size: 1.75rem;
  line-height: 1;
}

.votacion-texto-invitacion {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.votacion-titulo-invitacion {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-md);
  font-weight: 600;
  color: var(--color-texto-brillante);
  margin: 0;
}

.votacion-bajada-invitacion {
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
  margin: 0;
  line-height: 1.4;
}

.votacion-acciones-invitacion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  align-items: center;
}

/* Panel de gestión y cierre de votación para el organizador (IC-150 / E3-12.4) */
.ficha-votacion-panel-organizador {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  padding: var(--espacio-4);
  background-color: var(--color-superficie-elevada);
  border: 1px solid var(--color-borde-medio);
  border-left: 4px solid var(--color-primario);
  border-radius: var(--radio-md);
  margin-bottom: var(--espacio-5);
}

@media (min-width: 640px) {
  .ficha-votacion-panel-organizador {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--espacio-5);
  }
}

.votacion-organizador-contenido {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
}

.votacion-organizador-icono {
  font-size: 1.75rem;
  line-height: 1;
}

.votacion-organizador-texto {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.votacion-organizador-titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-md);
  font-weight: 600;
  color: var(--color-texto-brillante);
  margin: 0;
}

.votacion-organizador-bajada {
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
  line-height: 1.5;
  margin: 0;
}

.votacion-organizador-form {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

.boton-cerrar-votacion-destacado {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   22. ADMINISTRACIÓN: TABLAS DEL PANEL (IC-106)
   Componentes de cuentas/administracion_usuarios.html.twig, y la tabla de «Mis funciones»
   -------------------------------------------------------------------------- */

/* Caja de la tabla: en pantallas angostas la tabla se desplaza adentro y la página no se corre */
.tabla-admin-contenedor {
  /* Desplazamiento horizontal propio */
  overflow-x: auto;
  /* Borde y fondo como las tarjetas */
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background-color: var(--color-superficie);
}

/* Se puede enfocar con el teclado para desplazarla: se marca el foco */
.tabla-admin-contenedor:focus-visible {
  /* Contorno en el color primario */
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
}

/* Tabla del panel del administrador */
.tabla-admin {
  /* Todo el ancho, con un mínimo para que las columnas no se aprieten en el celular: con menos, el
     nombre y el correo se cortaban letra por letra */
  width: 100%;
  min-width: 680px;
  /* Bordes de celda unidos */
  border-collapse: collapse;
  /* Texto */
  font-size: var(--texto-sm);
  color: var(--color-texto);
}

/* Encabezado de las columnas, en versalitas como el wireframe */
.tabla-admin th {
  /* Alineado a la izquierda */
  text-align: left;
  /* Texto chico, apagado y espaciado */
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-texto-apagado);
  /* Relleno */
  padding: var(--espacio-3) var(--espacio-4);
  /* Línea bajo el encabezado */
  border-bottom: 1px solid var(--color-borde-medio);
}

/* Celdas */
.tabla-admin td {
  /* Relleno */
  padding: var(--espacio-3) var(--espacio-4);
  /* Línea entre filas */
  border-bottom: 1px solid var(--color-borde);
  /* Al medio, alineado con el avatar */
  vertical-align: middle;
}

/* La última fila no lleva línea: la cierra el borde de la caja */
.tabla-admin tbody tr:last-child td {
  border-bottom: none;
}

/* Fila bajo el puntero */
.tabla-admin tbody tr:hover {
  background-color: var(--color-superficie-hover);
}

/* Dato principal de la fila (el nombre) */
.tabla-admin-principal {
  /* En su renglón */
  display: block;
  font-weight: 600;
}

/* Dato secundario bajo el principal (el correo) */
.tabla-admin-secundario {
  /* En su renglón */
  display: block;
  color: var(--color-texto-secundario);
  /* Un correo largo se corta en vez de ensanchar la columna */
  overflow-wrap: anywhere;
}

/* Columna de acciones en tablas administrativas y de gestión (IC-122) */
.tabla-admin-acciones {
  white-space: nowrap;
}

/* Grupo de botones en la columna de acciones (IC-123) */
.tabla-admin-acciones-grupo {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

/* Formulario en línea para acciones en la tabla de administración (IC-150) */
.formulario-accion-tabla {
  display: inline-flex;
  margin: 0;
}

/* Las columnas de «Usuarios y roles», de ancho fijo: si no, el rol y el estado se corren de una
   página a otra según el largo de los nombres y los correos. El usuario se queda con el resto */
.tabla-admin-usuarios {
  table-layout: fixed;
}

/* En partes del ancho: el rol arranca cerca del medio de la tabla, no contra el borde derecho */
.tabla-admin-columna-rol {
  width: 35%;
}

.tabla-admin-columna-estado {
  width: 20%;
}

/* El desplegable del rol, del ancho del rol más largo y no de toda la columna, como el wireframe */
.tabla-admin .control-select {
  width: 11rem;
  flex: none;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* La barra de «Guardar cambios», debajo de la tabla: los botones a la izquierda, como «Guardar
   parámetros» del wireframe, y la nota a la derecha. Queda pegada abajo de la pantalla si la tabla
   sigue más abajo */
.tabla-admin-cambios {
  position: sticky;
  bottom: var(--espacio-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--color-primario);
  border-radius: var(--radio-md);
  background-color: var(--color-superficie-elevada);
  box-shadow: var(--sombra-md);
}

/* Aparece recién al elegir otro rol: mientras en todos los desplegables siga elegida la opción que
   vino marcada (selected), no hay nada que guardar. Un navegador sin :has la muestra siempre */
.tabla-admin-formulario:not(:has(option[selected]:not(:checked))) .tabla-admin-cambios {
  display: none;
}

.tabla-admin-cambios-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.tabla-admin-cambios-nota {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

/* El rol del moderador y del administrador, que no se cambia desde la web: el desplegable apagado */
.tabla-admin-rol-fijo:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Avatar con la inicial y, al lado, el nombre y el correo */
.tabla-admin-usuario {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}

/* Círculo con la inicial, como el del wireframe */
.tabla-admin-avatar {
  /* Círculo fijo */
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  /* La inicial centrada */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  /* Neutro */
  background-color: var(--color-superficie-elevada);
  color: var(--color-texto-secundario);
  border: 1px solid var(--color-borde-medio);
}

/* Estado de la cuenta: píldora en mayúsculas, como el wireframe */
.estado-cuenta {
  display: inline-block;
  padding: 0.15rem var(--espacio-3);
  border-radius: var(--radio-completo);
  /* Texto chico y espaciado */
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Contorno, para la pendiente */
  border: 1px solid var(--color-borde-medio);
  color: var(--color-texto-secundario);
}

/* Cuenta activa: la píldora llena */
.estado-cuenta-activa {
  background-color: var(--color-texto);
  border-color: var(--color-texto);
  color: var(--color-fondo);
}

/* La reserva de quien ya entró (E4-03): en verde, el estado al que se llega en la puerta */
.estado-cuenta-asistio {
  border-color: var(--color-exito);
  color: var(--color-exito);
}

/* Cuenta suspendida, y la función cancelada en «Mis funciones»: las dos son la baja */
.estado-cuenta-suspendida,
.estado-cuenta-cancelada {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Tarjetas de números arriba de la tabla, como el wireframe: del ancho de cuatro por fila, aunque
   haya dos */
.panel-admin-resumen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espacio-4);
  margin: 0 0 var(--espacio-6);
  /* Sin la caja que el dl tiene en todo el sitio: cada tarjeta tiene la suya */
  padding: 0;
  border: none;
  background: none;
}

.panel-admin-dato {
  padding: var(--espacio-4) var(--espacio-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background-color: var(--color-superficie);
}

/* «USUARIOS REGISTRADOS», en versalitas como los títulos de las columnas */
.panel-admin-dato dt {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-apagado);
}

.panel-admin-dato dd {
  margin: 0;
}

.panel-admin-dato-valor {
  margin-top: var(--espacio-2);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-3xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-texto-brillante);
}

.panel-admin-dato-nota {
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

/* En tablet, dos por fila; en el celular, una */
@media (max-width: 900px) {
  .panel-admin-resumen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .panel-admin-resumen {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* El body corta lo que se sale a los costados con overflow-x: hidden, que lo vuelve un contenedor
   con desplazamiento propio: la barra lateral (sticky) se pegaba a él, que nunca se desplaza, y se
   iba con la página. clip corta igual sin eso */
.cuerpo-app:has(.panel-admin) {
  overflow-x: clip;
}

/* Sin encabezado ni pie, el panel del administrador ocupa toda la pantalla, como el wireframe */
.contenido-principal:has(> .panel-admin) {
  max-width: none;
  padding: 0;
  display: flex;
}

/* Panel del administrador: la barra lateral y el contenido, como el wireframe. El fondo de la
   columna de la barra lo pinta el panel, así sigue hasta abajo aunque la página sea más alta que
   la pantalla (la barra es del alto de la pantalla) */
.panel-admin {
  flex: 1;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  background: linear-gradient(to right, var(--color-superficie) 259px, var(--color-borde) 259px 260px, transparent 260px);
}

/* Barra lateral: el logo, las secciones y, al pie, la sesión */
.panel-admin-menu {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-6);
  padding: var(--espacio-6) var(--espacio-4);
  background-color: var(--color-superficie);
  border-right: 1px solid var(--color-borde);
  /* Del alto de la pantalla y quieta al desplazar el contenido, así salir siempre está a mano */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.panel-admin-marca {
  align-self: flex-start;
  padding-left: var(--espacio-2);
}

.panel-admin-marca img {
  display: block;
}

/* Quién está en sesión y, debajo, el botón para salir, abajo de todo */
.panel-admin-sesion {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--color-borde);
}

/* El avatar y, al lado, el nombre sobre el rol */
.panel-admin-sesion-usuario {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-width: 0;
}

.panel-admin-sesion-datos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

/* Un nombre largo se corta con puntos suspensivos en vez de ensanchar la barra */
.panel-admin-sesion-nombre {
  max-width: 100%;
  font-weight: 600;
  font-size: var(--texto-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-admin-salir {
  width: 100%;
}

/* El contenido, en todo el ancho que deja la barra, como el wireframe */
.panel-admin-contenido {
  min-width: 0;
  padding: var(--espacio-8) var(--espacio-10) var(--espacio-12);
}

/* «ADMINISTRACIÓN», sobre las secciones */
.panel-admin-menu-titulo {
  margin: 0 0 var(--espacio-3);
  font-size: var(--texto-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-apagado);
}

/* Las secciones, una debajo de otra */
.panel-admin-menu-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

/* Cada sección */
.panel-admin-menu-enlace {
  display: block;
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-md);
  color: var(--color-texto-secundario);
  text-decoration: none;
}

.panel-admin-menu-enlace:hover {
  background-color: var(--color-superficie-hover);
  color: var(--color-texto);
}

/* La sección actual, llena como en el wireframe: con los colores invertidos, como la página
   actual del paginado */
.panel-admin-menu-enlace.activo {
  background-color: var(--color-texto);
  color: var(--color-texto-inverso);
  font-weight: 600;
}

/* Título y bajada del contenido */
.panel-admin-cabecera {
  margin-bottom: var(--espacio-6);
}

/* Más chico que el título de las páginas públicas: acá manda la tabla, no el título */
.panel-admin-titulo {
  margin: 0;
  font-size: var(--texto-2xl);
}

.panel-admin-bajada {
  margin: var(--espacio-1) 0 0;
  color: var(--color-texto-secundario);
}

/* Buscador y filtros en una fila: el buscador más ancho */
.panel-admin-filtros {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) repeat(3, minmax(140px, 1fr)) auto;
  gap: var(--espacio-3);
  align-items: center;
  margin-bottom: var(--espacio-6);
}

/* El buscador con la lupa adentro */
.panel-admin-busqueda {
  position: relative;
}

.panel-admin-busqueda-icono {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--texto-xs);
  pointer-events: none;
}

.panel-admin-busqueda .campo-control {
  /* Lugar para la lupa */
  padding-left: 2.4rem;
}

/* Paginado numerado, como el wireframe: un cuadrado por página */
.paginado-numerado ul {
  list-style: none;
  margin: var(--espacio-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--espacio-2);
}

.paginado-numero {
  /* Cuadrado */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--espacio-2);
  border: 1px solid var(--color-borde-medio);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
  text-decoration: none;
  font-size: var(--texto-sm);
}

.paginado-numero:hover {
  background-color: var(--color-superficie-hover);
}

/* La página actual, llena */
.paginado-numero.actual {
  background-color: var(--color-texto);
  border-color: var(--color-texto);
  color: var(--color-fondo);
  font-weight: 600;
}

/* «…» entre páginas salteadas */
.paginado-salto {
  color: var(--color-texto-apagado);
}

/* En tablet y celular, la barra lateral pasa arriba y en fila, y los filtros uno debajo de otro */
@media (max-width: 900px) {
  .panel-admin {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    background: none;
  }

  /* Arriba: el logo y la sesión en un renglón y las secciones debajo */
  .panel-admin-menu {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--espacio-4);
    border-right: none;
    border-bottom: 1px solid var(--color-borde);
  }

  /* El logo y la sesión en el primer renglón; cada grupo de secciones, en uno propio debajo */
  .panel-admin-marca {
    grid-row: 1;
    grid-column: 1;
  }

  .panel-admin-menu nav {
    grid-column: 1 / -1;
  }

  /* En el renglón del logo queda sólo el botón para salir: el nombre no entra */
  .panel-admin-sesion {
    grid-row: 1;
    grid-column: 2;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    align-items: flex-end;
  }

  .panel-admin-sesion-usuario {
    display: none;
  }

  .panel-admin-salir {
    width: auto;
  }

  .panel-admin-contenido {
    padding: var(--espacio-6) var(--espacio-4) var(--espacio-12);
  }

  .panel-admin-menu-lista {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .panel-admin-filtros {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* El nombre de la fila como enlace (la ficha de la sala) */
a.tabla-admin-principal {
  /* Del color del texto, subrayado al pasar */
  color: var(--color-texto);
  text-decoration: none;
}

a.tabla-admin-principal:hover,
a.tabla-admin-principal:focus-visible {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   23. SOLICITUD PARA SER ORGANIZADOR (IC-110)
   Componentes de cuentas/solicitud.html.twig: como el wireframe, el título de cada sección a la
   izquierda y sus campos a la derecha
   -------------------------------------------------------------------------- */

/* La sección contiene a su leyenda flotada, aunque sea más alta que los campos */
.seccion-lateral {
  display: flow-root;
}

/* La leyenda a la izquierda. Un fieldset no deja ubicar su leyenda con grid ni flex, pero
   flotada pasa a ser una caja común */
.seccion-lateral > .seccion-leyenda {
  float: left;
  width: 28%;
  margin-bottom: 0;
}

/* Los campos, en el resto del ancho */
.seccion-lateral > .seccion-campos {
  margin-left: calc(28% + var(--espacio-6));
}

/* En el celular, la leyenda vuelve arriba de los campos */
@media (max-width: 768px) {
  .seccion-lateral > .seccion-leyenda {
    float: none;
    width: 100%;
    margin-bottom: var(--espacio-4);
  }

  .seccion-lateral > .seccion-campos {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   24. BANDEJA DE SOLICITUDES DE SALA (IC-112 / IC-246)
   Componentes de programacion/administracion_solicitudes.html.twig: como el wireframe
   moderacion-solicitudes, la lista a la izquierda y la elegida a la derecha
   -------------------------------------------------------------------------- */

.bandeja {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: var(--espacio-6);
  align-items: start;
}

/* La lista, en una caja como las tablas del panel */
.bandeja-lista {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background-color: var(--color-superficie);
  overflow: hidden;
}

/* «Pendientes» y cuántas hay */
.bandeja-lista-titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: var(--espacio-3) var(--espacio-4);
  font-size: var(--texto-sm);
  border-bottom: 1px solid var(--color-borde);
}

.bandeja-cuenta {
  font-size: var(--texto-xs);
  color: var(--color-texto-apagado);
}

.bandeja-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bandeja-items li + li {
  border-top: 1px solid var(--color-borde);
}

/* Cada solicitud: la sala, quién y de dónde, y cuándo */
.bandeja-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--espacio-3) var(--espacio-4);
  color: var(--color-texto);
  text-decoration: none;
  /* El borde que marca la elegida, transparente en las demás para que no se corran */
  border-left: 3px solid transparent;
}

.bandeja-item:hover,
.bandeja-item:focus-visible {
  background-color: var(--color-superficie-hover);
}

/* La elegida, marcada con un borde a la izquierda como en el wireframe */
.bandeja-item.activo {
  background-color: var(--color-superficie-elevada);
  border-left-color: var(--color-primario);
}

.bandeja-item-sala {
  font-weight: 600;
  color: var(--color-texto-brillante);
}

.bandeja-item-datos {
  font-size: var(--texto-xs);
  color: var(--color-texto-secundario);
}

/* «No hay solicitudes» y «se muestran las más viejas» */
.bandeja-nota {
  margin: 0;
  padding: var(--espacio-3) var(--espacio-4);
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

/* El nombre de la sala y su estado en una fila */
.bandeja-detalle-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  flex-wrap: wrap;
}

.bandeja-detalle-titulo {
  margin: 0;
}

.bandeja-detalle-datos {
  margin: var(--espacio-1) 0 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

.bandeja-subtitulo {
  margin: var(--espacio-6) 0 var(--espacio-2);
  font-size: var(--texto-base);
}

/* Lo que escribieron: una palabra larga o un correo no ensanchan la columna */
.bandeja-texto {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Los datos de quién la mandó, en dos columnas dentro de una caja */
.bandeja-ficha {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--espacio-2) var(--espacio-4);
  margin: 0;
  padding: var(--espacio-4);
  font-size: var(--texto-sm);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
}

.bandeja-ficha dt {
  color: var(--color-texto-secundario);
}

.bandeja-ficha dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.bandeja-resolucion {
  margin-top: var(--espacio-6);
}

/* En tablet y celular, la elegida va debajo de la lista */
@media (max-width: 900px) {
  .bandeja {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pestañas sobre la bandeja, como el wireframe: subrayada la actual, con cuántas hay en cada una */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-6);
  margin-bottom: var(--espacio-6);
  border-bottom: 1px solid var(--color-borde);
}

.pestana {
  display: inline-flex;
  align-items: baseline;
  gap: var(--espacio-2);
  padding: var(--espacio-2) 0;
  /* Pisa el borde de la fila: la actual se ve subrayada sobre él */
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--color-texto-secundario);
  text-decoration: none;
}

.pestana:hover {
  color: var(--color-texto);
}

.pestana.activa {
  border-bottom-color: var(--color-primario);
  color: var(--color-texto-brillante);
  font-weight: 600;
}

/* En la lista, el nombre y el estado en un renglón */
.bandeja-item-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-2);
}

/* El título a la izquierda y «Ver historial de decisiones» a la derecha */
.bandeja-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--espacio-4);
}

/* El buscador arriba de la lista, dentro de su caja */
.bandeja-buscador {
  padding: var(--espacio-3);
  border-bottom: 1px solid var(--color-borde);
}

/* La dirección, la capacidad y la fecha, separadas como en el wireframe */
.bandeja-detalle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1) var(--espacio-5);
}

/* La foto, a lo ancho de su columna y en 16:9 como en la ficha de la sala; a la altura de la caja
   de la resolución, que también deja ese margen arriba */
.bandeja-foto {
  display: block;
  width: 100%;
  max-width: 640px;
  margin-top: var(--espacio-6);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio-md);
  border: 1px solid var(--color-borde);
}

/* Los datos y el historial a la izquierda; la resolución a la derecha */
.bandeja-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--espacio-6);
  align-items: start;
}

/* Las cajas de la derecha: la resolución y la sala en el sitio */
.bandeja-caja {
  margin: var(--espacio-6) 0 0;
  padding: var(--espacio-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background-color: var(--color-superficie);
  min-width: 0;
}

.bandeja-caja + .bandeja-caja {
  margin-top: var(--espacio-4);
}

/* «RESOLUCIÓN», en versalitas como en el wireframe. Como leyenda del fieldset, flotada a todo el
   ancho para que quede adentro de la caja y no sobre el borde */
.bandeja-caja-titulo {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--espacio-3);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-apagado);
}

/* Cada opción de la resolución, un renglón con su botón redondo */
.bandeja-opcion {
  clear: both;
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-1) 0;
  cursor: pointer;
}

.bandeja-opcion input {
  accent-color: var(--color-primario);
}

/* El error de la resolución, debajo de las opciones */
.bandeja-caja .campo-error {
  clear: both;
  margin-top: var(--espacio-2);
}

/* La ficha debajo de la descripción de la sala */
.bandeja-texto + .bandeja-ficha {
  margin-top: var(--espacio-3);
}

/* Un aviso suelto, fuera de la caja de la lista */
.bandeja-nota-suelta {
  padding: 0 0 var(--espacio-2);
}

/* El motivo a todo el ancho, debajo de las columnas */
.bandeja-motivo {
  margin-top: var(--espacio-6);
}

/* «Enviar resolución» y, a la derecha, a quién se le muestra el motivo */
.bandeja-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
}

.bandeja-acciones-nota {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

/* En pantallas medianas, la resolución va debajo de los datos */
@media (max-width: 1200px) {
  .bandeja-columnas {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* --------------------------------------------------------------------------
   FORMULARIO DE ALTA DE FUNCIÓN (IC-121 / IC-147 / E3-11.2 / E3-12.1)
   Componentes para plantillas/programacion/alta_funcion.html.twig
   -------------------------------------------------------------------------- */

/* Formulario principal de programación de función */
.formulario-alta-funcion {
  width: 100%;
}

/* Selector de modo para alta de función: programada vs votación (IC-147 / E3-12.1) */
.selector-modo-funcion {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-3);
  margin-top: var(--espacio-2);
  margin-bottom: var(--espacio-2);
  width: 100%;
}

@media (min-width: 640px) {
  .selector-modo-funcion {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.opcion-modo-funcion {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  background-color: var(--color-superficie-elevada);
  border: 1px solid var(--color-superficie-borde);
  border-radius: var(--radio-md);
  cursor: pointer;
  transition: border-color var(--transicion-rapida), background-color var(--transicion-rapida);
}

.opcion-modo-funcion:hover {
  border-color: var(--color-primario);
  background-color: var(--color-superficie-hover);
}

.opcion-modo-funcion.seleccionada,
.opcion-modo-funcion:has(input[type="radio"]:checked) {
  border-color: var(--color-primario);
  background-color: var(--color-superficie-hover);
}

.opcion-modo-radio {
  margin-top: 0.2rem;
  accent-color: var(--color-primario);
  cursor: pointer;
}

.opcion-modo-contenido {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.opcion-modo-titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-base);
  font-weight: 600;
  color: var(--color-texto-brillante);
}

.opcion-modo-funcion.seleccionada .opcion-modo-titulo,
.opcion-modo-funcion:has(input[type="radio"]:checked) .opcion-modo-titulo {
  color: var(--color-primario);
}

.opcion-modo-descripcion {
  font-size: var(--texto-xs);
  color: var(--color-texto-atenuado);
  line-height: 1.4;
}

/* Oculta la sección de fecha y hora cuando se elige votación de títulos con JS */
.seccion-formulario[hidden] {
  display: none;
}

/* Cuadrícula interactiva de selección de obras del catálogo */
.cuadricula-seleccion-obras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--espacio-3);
  margin-top: var(--espacio-2);
  margin-bottom: var(--espacio-4);
  width: 100%;
}

/* Tarjeta individual con casilla de verificación para cada obra */
.tarjeta-seleccion-obra {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  background-color: var(--color-superficie-elevada);
  border: 1px solid var(--color-superficie-borde);
  border-radius: var(--radio-md);
  cursor: pointer;
  transition: border-color var(--transicion-rapida), background-color var(--transicion-rapida);
}

.tarjeta-seleccion-obra:hover {
  border-color: var(--color-primario);
  background-color: var(--color-superficie-hover);
}

.tarjeta-seleccion-obra input[type="checkbox"]:checked ~ .info-seleccion-obra .titulo-seleccion-obra {
  color: var(--color-primario);
}

.info-seleccion-obra {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.titulo-seleccion-obra {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-texto-brillante);
}

.meta-seleccion-obra {
  font-size: var(--texto-xs);
  color: var(--color-texto-atenuado);
}

/* El ancho mínimo va aparte y no como base del flex: en el celular el encabezado es una columna, y
   una base de 500px se volvía 500px de alto vacío */
.solicitud-texto-cabecera {
  flex: 1 1 0;
  min-width: min(100%, 20rem);
}

.solicitud-accion-cabecera {
  flex-shrink: 0;
}

/* Layout en dos columnas estilo Figma para el formulario del organizador */
.panel-organizador-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-8);
  width: 100%;
}

@media (min-width: 992px) {
  .panel-organizador-grid {
    grid-template-columns: 1fr 310px;
    align-items: start;
  }
}

.panel-organizador-principal {
  min-width: 0;
  width: 100%;
}

.panel-organizador-lateral {
  min-width: 0;
  width: 100%;
}

/* Tarjeta lateral con los parámetros heredados de la sala (Figma #109:2) */
.tarjeta-parametros-sala {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-5);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}

.parametros-sala-titulo {
  font-family: var(--fuente-mono, monospace);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-texto-atenuado);
  margin: 0;
}

.parametros-sala-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  /* Va dentro de la tarjeta: sin la caja que el dl tiene en todo el sitio */
  background: none;
  border: none;
  border-radius: 0;
}

.parametro-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px dashed var(--color-superficie-borde);
  padding-bottom: var(--espacio-2);
}

.parametro-item dt {
  font-size: var(--texto-xs);
  color: var(--color-texto-atenuado);
}

.parametro-item dd {
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-texto-brillante);
  margin: 0;
  text-align: right;
}

/* Los parámetros de cada sala, con su nombre: con JavaScript se ve sólo la de la sala elegida */
.parametros-sala-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

/* El display de arriba le gana al atributo hidden: sin esto, la sala que no se eligió se ve igual */
.parametros-sala-grupo[hidden] {
  display: none;
}

.parametros-sala-nombre {
  margin: 0;
  font-size: var(--texto-sm);
}

/* «Programar función» y «Descartar», separados y con aire antes del pie */
.pie-formulario-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-10);
}

.parametros-sala-pie {
  font-size: var(--texto-xs);
  color: var(--color-texto-atenuado);
  margin: 0;
  line-height: 1.4;
}

/* Banner de aviso antes de publicar como en Figma */
.aviso-publicacion-funcion {
  display: flex;
  gap: var(--espacio-3);
  align-items: flex-start;
  padding: var(--espacio-4);
  background-color: var(--color-primario-suave);
  border: 1px solid var(--color-primario);
  border-radius: var(--radio-md);
  margin-top: var(--espacio-4);
  margin-bottom: var(--espacio-4);
}

.aviso-publicacion-funcion .aviso-icono {
  font-size: 1.25rem;
  line-height: 1;
}

.aviso-publicacion-funcion .aviso-contenido {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.aviso-publicacion-funcion .aviso-titulo {
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-primario);
}

.aviso-publicacion-funcion .aviso-texto {
  font-size: var(--texto-sm);
  color: var(--color-texto);
  margin: 0;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   PROPUESTA Y GESTIÓN DE FRANJAS HORARIAS Y QUÓRUM DE ACUERDO (IC-154 / E3-13.2)
   Componentes para plantillas/programacion/proponer_franjas.html.twig y alta_funcion.html.twig
   -------------------------------------------------------------------------- */

/* Formulario principal de propuesta de franjas */
.formulario-proponer-franjas {
  width: 100%;
}

/* Contenedor general de proponer franjas */
.contenedor-proponer-franjas {
  width: 100%;
}

/* Sección de quórum mínimo */
.seccion-quorum {
  margin-bottom: var(--espacio-6);
}

/* Sección de franjas horarias del acuerdo */
.seccion-franjas-acuerdo {
  margin-bottom: var(--espacio-6);
}

/* Lista dinámica de filas de franjas */
.lista-franjas-formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  margin-top: var(--espacio-3);
  margin-bottom: var(--espacio-4);
}

/* Fila individual de franja horaria */
.fila-franja-horaria {
  background-color: var(--color-superficie-elevada);
  border: 1px solid var(--color-superficie-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-4);
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.fila-franja-horaria:focus-within {
  border-color: var(--color-borde-fuerte);
  box-shadow: 0 0 0 2px rgba(240, 166, 59, 0.12);
}

/* Cabecera de la fila con número de opción y botón de eliminar */
.franja-cabecera-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--espacio-3);
  padding-bottom: var(--espacio-2);
  border-bottom: 1px dashed var(--color-superficie-borde);
}

/* Etiqueta del número de opción («Opción 1», «Opción 2») */
.franja-numero-etiqueta {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: 700;
  color: var(--color-primario);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Botón accesible para eliminar franja */
.boton-eliminar-franja {
  background: transparent;
  border: 1px solid var(--color-borde);
  color: var(--color-texto-apagado);
  border-radius: var(--radio-sm);
  padding: var(--espacio-1) var(--espacio-2);
  font-size: var(--texto-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color var(--transicion-rapida), border-color var(--transicion-rapida), background-color var(--transicion-rapida);
}

.boton-eliminar-franja:hover:not(:disabled) {
  color: var(--color-error);
  border-color: var(--color-error);
  background-color: rgba(239, 68, 68, 0.1);
}

.boton-eliminar-franja:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Cuadrícula de inputs por franja (fecha, inicio, fin) */
.franja-campos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-3);
}

@media (min-width: 640px) {
  .franja-campos-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* Mensaje de error de rango horario inválido */
.franja-alerta-rango {
  margin-top: var(--espacio-2);
  font-size: var(--texto-xs);
  color: var(--color-error);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.franja-alerta-rango[hidden] {
  display: none;
}

/* Acciones para agregar franjas */
.franja-acciones-agregar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin-top: var(--espacio-3);
}

.boton-agregar-franja {
  cursor: pointer;
}

.franja-ayuda-agregar {
  font-size: var(--texto-xs);
  color: var(--color-texto-atenuado);
}

/* Tarjeta lateral con resumen de la función en acuerdo */
.tarjeta-resumen-funcion-acuerdo {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-5);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}

.resumen-obra-acuerdo {
  border-bottom: 1px dashed var(--color-superficie-borde);
  padding-bottom: var(--espacio-3);
}

.resumen-rotulo {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  color: var(--color-texto-atenuado);
  letter-spacing: 0.05em;
  display: block;
}

.resumen-titulo-pelicula {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-lg);
  font-weight: 700;
  color: var(--color-texto-brillante);
  margin: 0.25rem 0 0 0;
  line-height: 1.3;
}

/* Tarjeta de recordatorio / consejo en la barra lateral */
.tarjeta-recordatorio-acuerdo {
  background-color: rgba(240, 166, 59, 0.08);
  border: 1px solid rgba(240, 166, 59, 0.22);
  border-radius: var(--radio-sm);
  padding: var(--espacio-3);
}

.recordatorio-texto {
  font-size: var(--texto-xs);
  color: var(--color-texto-secundario);
  margin: 0;
  line-height: 1.45;
}

.recordatorio-texto strong {
  color: var(--color-primario);
}

/* --------------------------------------------------------------------------
   ACUERDO DE FECHA CON ESPECTADORES - BOTÓN «ME SIRVE» Y FRANJAS (IC-155 / E3-13.3)
   Componentes para plantillas/programacion/ficha_funcion.html.twig
   -------------------------------------------------------------------------- */

.ficha-acuerdo-titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-2xl);
  font-weight: 700;
  color: var(--color-texto-brillante);
  margin: 0;
}

@keyframes pulso-ganadora {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(240, 166, 59, 0.4);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(240, 166, 59, 0);
  }
}

.formulario-confirmar-acuerdo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.boton-confirmar-acuerdo-destacado {
  font-weight: 700;
  font-size: var(--texto-base);
  padding: var(--espacio-3) var(--espacio-5);
  box-shadow: 0 4px 14px rgba(240, 166, 59, 0.35);
}

.formulario-cancelar-funcion {
  display: inline-flex;
  margin: 0;
}

/* --------------------------------------------------------------------------
   ACUERDO DE FECHA CON ESPECTADORES - FICHA Y WIREFRAME (E3-13 / IC-158)
   Línea de estados (stepper), panel complementario lateral y adaptación
   -------------------------------------------------------------------------- */

/* ── Tarjetas Laterales del Acuerdo ─────────────────────────────────────── */
.tarjeta-acuerdo-lateral {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: var(--espacio-5);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}

/* ── Cartelera y tabla del organizador para acuerdo de fecha ────────────── */
.tarjeta-funcion.tarjeta-funcion-acuerdo {
  border-color: rgba(240, 166, 59, 0.35);
}

.tarjeta-funcion.tarjeta-funcion-acuerdo:hover {
  border-color: var(--color-primario);
}

.meta-texto-destacado.meta-texto-acuerdo {
  color: var(--color-primario);
  font-weight: 600;
}

.estado-cuenta-acuerdo {
  background-color: rgba(240, 166, 59, 0.18);
  border-color: rgba(240, 166, 59, 0.5);
  color: #fef3c7;
}

/* ── Cartelera y tabla del organizador para acuerdo sin mínimo (E3-13.5 / IC-157) ── */
.tarjeta-funcion.tarjeta-funcion-sin-quorum {
  border-color: rgba(240, 166, 59, 0.25);
  opacity: 0.9;
}

.tarjeta-funcion.tarjeta-funcion-sin-quorum:hover {
  border-color: var(--color-advertencia);
  opacity: 1;
}

.meta-texto-destacado.meta-texto-sin-quorum {
  color: var(--color-advertencia);
  font-weight: 600;
}

.estado-cuenta-sin-quorum {
  background-color: rgba(240, 166, 59, 0.15);
  border-color: rgba(240, 166, 59, 0.4);
  color: var(--color-advertencia);
}

/* --------------------------------------------------------------------------
   CONFIRMACIÓN DE CANCELACIÓN DE FUNCIÓN (IC-123 / E3-11.4)
   Componentes para plantillas/programacion/cancelar_funcion.html.twig
   -------------------------------------------------------------------------- */

.contenedor-confirmacion-cancelacion {
  max-width: 680px;
}

.tarjeta-resumen-cancelacion {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-5);
  margin-top: var(--espacio-4);
  margin-bottom: var(--espacio-6);
}

.resumen-cancelacion-titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-lg);
  font-weight: 600;
  color: var(--color-texto-brillante);
  margin-top: 0;
  margin-bottom: var(--espacio-4);
}

.resumen-cancelacion-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   RESERVA DE UNA FUNCIÓN (E4-01.3)
   El panel de la ficha (programacion/ficha_funcion) y las páginas de funciones/
   (reservar, reserva_confirmada), como el wireframe reserva-pago-comprobante.
   -------------------------------------------------------------------------- */

/* El panel de la ficha: el precio a la izquierda y el formulario a la derecha; en celular, apilados */
.ficha-reserva {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espacio-4);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-primario);
  border-radius: var(--radio-lg);
  padding: var(--espacio-6);
}

.ficha-reserva-titulo {
  font-size: var(--texto-lg);
  margin: 0 0 var(--espacio-2);
}

.ficha-reserva-monto {
  margin: 0;
  color: var(--color-texto-secundario);
}

.ficha-reserva-monto strong {
  font-size: var(--texto-2xl);
  color: var(--color-texto-brillante);
}

.ficha-reserva-formulario {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espacio-3);
}

/* El campo sin el margen de abajo de los formularios largos, para que quede alineado con el botón */
.ficha-reserva-formulario .grupo-campo {
  margin-bottom: 0;
  width: 10rem;
}

.ficha-reserva-ayuda {
  margin: 0;
  color: var(--color-texto-secundario);
}

/* Los lugares libres (E4-02): la barra de lo reservado y cuántos quedan, como el recuadro de
   reserva del wireframe «funcion-programada» */
.ficha-reserva-disponibles {
  margin-top: var(--espacio-3);
  min-width: 16rem;
}

.ficha-reserva-barra {
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background-color: var(--color-superficie-interactiva);
  overflow: hidden;
}

.ficha-reserva-barra::-webkit-progress-bar {
  background-color: var(--color-superficie-interactiva);
  border-radius: 999px;
}

.ficha-reserva-barra::-webkit-progress-value {
  background-color: var(--color-primario);
  border-radius: 999px;
}

.ficha-reserva-barra::-moz-progress-bar {
  background-color: var(--color-primario);
  border-radius: 999px;
}

.ficha-reserva-disponibles-texto {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-3);
  margin: var(--espacio-2) 0 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

.ficha-reserva-disponibles-texto strong {
  color: var(--color-texto);
}

/* Agotada: el mismo recuadro, con el borde apagado porque no hay nada que hacer */
.ficha-reserva-agotada {
  border-color: var(--color-borde-medio);
}

/* El chip de los lugares de la cabecera, en rojo cuando no queda ninguno */
.ficha-chip-agotada {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* La línea de los lugares en la tarjeta: «Agotada» se destaca */
.tarjeta-funcion-dato.meta-agotada {
  color: var(--color-error);
  font-weight: 600;
}

.contenedor-reserva {
  max-width: 680px;
}

/* Los pasos: número en un círculo y el nombre, unidos por una línea */
.pasos-reserva {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  list-style: none;
  margin: var(--espacio-4) 0 var(--espacio-6);
  padding: 0;
}

.paso-reserva {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--color-texto-apagado);
}

.paso-reserva + .paso-reserva::before {
  content: '';
  width: 3rem;
  border-top: 1px solid var(--color-borde-medio);
  margin-right: var(--espacio-2);
}

.paso-reserva-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-completo);
  font-size: var(--texto-sm);
}

.paso-actual,
.paso-hecho {
  color: var(--color-texto);
}

.paso-actual .paso-reserva-numero {
  background-color: var(--color-primario);
  border-color: var(--color-primario);
  color: var(--color-texto-inverso);
}

.formulario-reserva .grupo-campo {
  max-width: 12rem;
}

/* El comprobante: el código grande, en monoespaciada, para leerlo en la puerta */
.tarjeta-comprobante {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-6);
  margin-bottom: var(--espacio-6);
}

.comprobante-titulo {
  font-size: var(--texto-2xl);
  margin: 0 0 var(--espacio-4);
}

.comprobante-titulo span {
  color: var(--color-exito);
}

.comprobante-codigo-rotulo {
  font-size: var(--texto-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-secundario);
  margin: 0;
}

.comprobante-codigo {
  font-family: var(--fuente-codigo);
  font-size: var(--texto-3xl);
  letter-spacing: 0.12em;
  color: var(--color-texto-brillante);
  margin: var(--espacio-1) 0 var(--espacio-6);
}

.comprobante-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--espacio-4);
  margin: 0;
}

.comprobante-datos dt {
  font-size: var(--texto-xs);
  color: var(--color-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.comprobante-datos dd {
  margin: var(--espacio-1) 0 0;
  color: var(--color-texto-brillante);
}

.comprobante-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin-top: var(--espacio-6);
}

/* «Mis reservas» (E4-04.1): los dos botones de cada fila, uno al lado del otro */
.mis-reservas-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

/* El comprobante en papel (E4-04.2): sólo el código y los datos de la reserva, en negro sobre
   blanco y sin el resto del sitio, para que entre en una hoja y se lea en la puerta */
@media print {
  .encabezado,
  .pie-pagina,
  .pasos-reserva,
  .contenedor-reserva > .alerta,
  .comprobante-acciones {
    display: none !important;
  }

  @page {
    margin: 1.5cm;
  }

  html {
    color-scheme: light;
  }

  html,
  body.cuerpo-app,
  .contenido-principal {
    background: #fff;
    color: #000;
  }

  .comprobante-datos {
    background: none;
    border: 0;
    padding: 0;
  }

  .contenedor-reserva {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .tarjeta-comprobante {
    background: #fff;
    border: 1px solid #000;
    border-radius: 0;
    margin: 0;
    break-inside: avoid;
  }

  .comprobante-titulo,
  .comprobante-titulo span,
  .comprobante-codigo,
  .comprobante-codigo-rotulo,
  .comprobante-datos dt,
  .comprobante-datos dd,
  .comprobante-datos a {
    color: #000;
  }

  .comprobante-datos a {
    text-decoration: none;
  }

  .comprobante-codigo {
    font-size: 3rem;
    letter-spacing: 0.2em;
  }
}

/* --------------------------------------------------------------------------
   12. DISEÑO RESPONSIVE ADAPTATIVO
   Garantiza que no exista scroll horizontal a 360 px, en tablet y a 1440 px.
   -------------------------------------------------------------------------- */

/* ── 12.1 Pantallas Intermedias y Tablets (hasta 1024 px) ──────────────── */
@media (max-width: 1024px) {
  /* Permite envolver elementos de la cabecera en tablet */
  .encabezado-contenedor {
    /* Quiebre de línea en elementos */
    flex-wrap: wrap;
    /* Separación entre items */
    gap: var(--espacio-3);
  }

  /* El buscador ocupa el ancho completo en una fila intermedia */
  .encabezado-buscador {
    /* Tercera posición en el orden visual */
    order: 3;
    /* Ocupa el 100% de la fila */
    flex: 1 1 100%;
    /* Ancho total */
    width: 100%;
  }

  /* Navegación en fila superior */
  .navegacion-principal {
    /* Segunda posición visual */
    order: 2;
  }

  /* Usuario alineado a la derecha */
  .encabezado-usuario {
    /* Segunda posición visual */
    order: 2;
    /* Empuja hacia el extremo derecho */
    margin-left: auto;
  }

  /* El pie se reorganiza en 2 columnas */
  .pie-contenedor {
    /* Dos columnas iguales */
    grid-template-columns: 1fr 1fr;
    /* Separación entre columnas */
    gap: var(--espacio-6);
  }
}

/* ── 12.2 Dispositivos Móviles (hasta 768 px) ─────────────────────────── */
@media (max-width: 768px) {
  /* Reduce padding vertical de la cabecera */
  .encabezado {
    /* Relleno compacto */
    padding: var(--espacio-2) 0;
  }

  /* Fila 1: Logo a la izquierda */
  .encabezado-marca {
    /* Primera posición */
    order: 1;
  }

  /* Fila 1: Usuario a la derecha */
  .encabezado-usuario {
    /* Segunda posición */
    order: 2;
    /* Empuja hacia la derecha */
    margin-left: auto;
  }

  /* Fila 2: Buscador al 100% de ancho */
  .encabezado-buscador {
    /* Tercera posición */
    order: 3;
    /* Ancho completo */
    flex: 1 1 100%;
    /* Ancho total */
    width: 100%;
    /* Separación superior */
    margin-top: var(--espacio-1);
  }

  /* Fila 3: Navegación a todo el ancho, sin desbordar el viewport */
  .navegacion-principal {
    /* Cuarta posición */
    order: 4;
    /* Ancho completo */
    width: 100%;
    /* Limita al ancho del contenedor */
    max-width: 100%;
  }

  /* Lista de navegación móvil: los enlaces que no entran bajan a otra línea, en vez de quedar
     escondidos fuera de la pantalla */
  .navegacion-principal .nav-lista {
    /* Bajan a la línea siguiente */
    flex-wrap: wrap;
    /* Relleno vertical */
    padding: var(--espacio-1) 0;
    /* Separación entre botones */
    gap: var(--espacio-1);
  }

  /* Pasa el pie a 1 sola columna vertical */
  .pie-contenedor {
    /* 1 columna única apilada */
    grid-template-columns: 1fr;
    /* Separación vertical */
    gap: var(--espacio-6);
  }

  /* Las listas de definición pasan a una columna */
  dl {
    /* 1 columna vertical */
    grid-template-columns: 1fr;
    /* Separación entre término y dato */
    gap: var(--espacio-2);
    /* Relleno compacto */
    padding: var(--espacio-4);
  }

  /* Oculta el texto del nombre en móviles para dar espacio al avatar y botones */
  .usuario-info {
    /* No muestra texto en cabecera móvil */
    display: none;
  }

  /* Asegura que el menú flotante en móviles no sobrepase la pantalla */
  .usuario-menu-flotante {
    /* Anclado a la derecha */
    right: 0;
    /* Sin anclaje a la izquierda */
    left: auto;
    /* Ancho máximo ajustado al viewport móvil */
    width: calc(100vw - 2rem);
  }
  /* Ficha de la función apilada en móvil (IC-87 / E3-04.3) */
  .ficha-sala-tarjeta {
    /* Apila detalles e imagen en columna */
    flex-direction: column-reverse;
    /* Separación vertical */
    gap: var(--espacio-4);
  }

  /* Imagen de la sala al 100% en pantallas medianas */
  .ficha-sala-imagen-columna {
    /* Ancho completo */
    width: 100%;
  }

  /* Altura proporcional de imagen de sala en móvil */
  .ficha-sala-imagen {
    /* Ancho total */
    width: 100%;
    /* Altura moderada */
    height: 200px;
  }

  /* Tarjeta de obra apilada verticalmente */
  .ficha-obra-tarjeta {
    /* Dirección de columna */
    flex-direction: column;
    /* Alineación estirada */
    align-items: stretch;
    /* Separación vertical */
    gap: var(--espacio-4);
  }

  /* Afiche centrado y con ancho controlado en móvil */
  .ficha-obra-afiche-columna {
    /* Ancho responsivo */
    width: 100%;
    /* Límite para no ocupar toda la pantalla vertical */
    max-width: 220px;
    /* Centrado horizontal con margen inferior */
    margin: 0 auto var(--espacio-2) auto;
  }

  /* Título de la función ajustado en móvil */
  .ficha-funcion-titulo {
    /* Tamaño 30px */
    font-size: var(--texto-2xl);
  }
}

/* ── 12.3 Celulares Angostos (360 px a 480 px) ────────────────────────── */
@media (max-width: 480px) {
  /* Contenedor con padding compacto a 360 px */
  .contenedor {
    /* Relleno lateral estrecho */
    padding-left: var(--espacio-3);
    /* Relleno lateral estrecho */
    padding-right: var(--espacio-3);
  }

  /* Contenido principal compacto */
  .contenido-principal {
    /* Relleno vertical y lateral ajustado */
    padding: var(--espacio-6) var(--espacio-3);
  }

  /* Reduce ligeramente el tamaño del logo para que conviva con los botones a 360 px */
  .encabezado-marca .marca-enlace {
    /* Tamaño de fuente reducido */
    font-size: 1.15rem;
    /* Separación mínima */
    gap: var(--espacio-1);
  }

  /* Ícono del logo en móvil */
  .marca-icono {
    /* Tamaño compacto */
    font-size: 1.25rem;
  }

  /* Botones compactos en el encabezado de 360 px */
  .usuario-invitado {
    /* Separación mínima entre botones */
    gap: var(--espacio-1);
  }

  /* Botón pequeño en cabecera */
  .usuario-invitado .boton-chico {
    /* Relleno estrecho */
    padding: 0.35rem 0.65rem;
    /* Tamaño de fuente de 12px */
    font-size: 0.75rem;
  }

  /* Enlace de ingresar compacto */
  .usuario-invitado .nav-enlace {
    /* Relleno estrecho */
    padding: 0.35rem 0.5rem;
    /* Tamaño de 13px */
    font-size: 0.8rem;
  }

  /* Acciones de la tarjeta de error apiladas en vertical a 360 px */
  .error-acciones {
    /* Dirección vertical de botones */
    flex-direction: column;
    /* Ancho completo */
    width: 100%;
  }

  /* Botones de error al 100% de ancho */
  .error-acciones .boton {
    /* Ocupa el ancho total */
    width: 100%;
  }

  /* Tarjeta de error compacta */
  .tarjeta-error {
    /* Relleno interno adaptado a pantalla de 360px */
    padding: var(--espacio-6) var(--espacio-3);
  }

  /* Código del error más pequeño */
  .error-insignia {
    /* Tamaño reducido */
    font-size: 2.75rem;
  }

  /* Créditos del pie apilados verticalmente sin desborde */
  .pie-creditos-contenedor {
    /* Disposición vertical */
    flex-direction: column;
    /* Alineación izquierda */
    align-items: flex-start;
    /* Separación */
    gap: var(--espacio-2);
  }

  /* Filas de campos en formularios se apilan verticalmente a 360 px */
  .fila-campos-doble {
    /* Una sola columna en móvil */
    grid-template-columns: 1fr;
    /* Separación vertical */
    gap: var(--espacio-2);
  }

  /* Tarjeta de autenticación compacta sin desborde horizontal */
  .tarjeta-autenticacion {
    /* Relleno compacto */
    padding: var(--espacio-5) var(--espacio-3);
  }

  /* Acciones inferiores de solicitud de sala apiladas en vertical */
  .solicitud-acciones-inferior {
    /* Dirección vertical */
    flex-direction: column;
    /* Alineación al inicio */
    align-items: stretch;
    /* Separación */
    gap: var(--espacio-3);
  }

  /* Botones ocupan el ancho completo en móvil */
  .solicitud-acciones-inferior .boton {
    /* 100% de ancho */
    width: 100%;
  }

  /* Texto de guardado centrado en móvil */
  .solicitud-estado-guardado {
    /* Sin margen izquierdo automático */
    margin-left: 0;
    /* Centrado */
    text-align: center;
  }

  /* Cuadrícula de funciones en una columna en móvil */
  .cuadricula-funciones {
    /* Una columna */
    grid-template-columns: 1fr;
    /* Separación */
    gap: var(--espacio-4);
  }

  /* Cuadrícula de servicios en una columna en pantallas muy angostas */
  .cuadricula-checkboxes-servicios {
    /* Una columna para no desbordar */
    grid-template-columns: 1fr;
  }

  /* Cabecera de solicitud apilada en móvil */
  .encabezado-formulario-solicitud {
    /* Dirección de columna */
    flex-direction: column;
    /* Alineación al inicio */
    align-items: stretch;
  }

  /* Botón de guardado rápido al 100% en móvil */
  .solicitud-acciones-cabecera .boton {
    /* Ancho completo */
    width: 100%;
  }
  /* Ficha de la función en celulares angostos a 360 px (IC-87 / E3-04.3) */
  .ficha-sala-tarjeta,
  .ficha-obra-tarjeta {
    /* Relleno compacto */
    padding: var(--espacio-4);
  }

  /* Afiche compacto en celulares angostos */
  .ficha-obra-afiche-columna {
    /* Máximo 180px */
    max-width: 180px;
  }

  /* Título de la función a 360 px */
  .ficha-funcion-titulo {
    /* Tamaño adaptado */
    font-size: 1.75rem;
  }

  /* Título de obra a 360 px */
  .ficha-obra-titulo {
    /* Tamaño 24px */
    font-size: var(--texto-xl);
  }

  /* Título de sala a 360 px */
  .ficha-sala-titulo {
    /* Tamaño 20px */
    font-size: var(--texto-lg);
  }

  /* Metadatos más compactos */
  .ficha-obra-metadatos {
    /* Tamaño micro */
    font-size: var(--texto-xs);
  }
}

/* ── 12.4 Pantallas de Escritorio Ancho (1440 px o superior) ───────────── */
@media (min-width: 1440px) {
  /* Espaciado generoso y armónico en pantallas grandes */
  .contenido-principal {
    /* Relleno vertical generoso en pantallas de 1440px */
    padding: var(--espacio-12) var(--espacio-4);
  }

  /* Tipografías de títulos con escala plena */
  h1 {
    /* Tamaño h1 grande de 44px */
    font-size: 2.75rem;
  }

  /* Espaciado del footer */
  .pie-pagina {
    /* Separación superior amplia */
    padding-top: var(--espacio-12);
  }
}

/* --------------------------------------------------------------------------
   Panel de reservas del organizador (E4-03): el registro de la asistencia en la puerta, arriba
   de la tabla, y el código en letra de ancho fijo, para leerlo y dictarlo sin confundir letras
   -------------------------------------------------------------------------- */
.panel-reservas-asistencia {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espacio-3);
  margin: 0 0 var(--espacio-6);
  padding: var(--espacio-5);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-superficie-borde);
  border-radius: var(--radio-lg);
}

.panel-reservas-asistencia .grupo-campo {
  margin-bottom: 0;
  flex: 1 1 16rem;
}

.panel-reservas-codigo {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   25. CARRUSEL DE DESTACADAS DE LA PORTADA (E4-07)
   La lista de programacion/inicio.html.twig y lo que le agrega el componente
   Carrusel (js/componentes/carrusel.js), que marca el contenedor con
   .carrusel-armado. Sin esa clase, la lista es una tira que se desplaza de
   costado: así se ve sin JavaScript.
   -------------------------------------------------------------------------- */

/* Sin JavaScript: una diapositiva por vez, las demás al costado, y se pasa desplazando */
.carrusel-pista {
  list-style: none;
  display: flex;
  gap: var(--espacio-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Que el desplazamiento de costado no arrastre la página en el celular */
  overscroll-behavior-x: contain;
}

/* La diapositiva: el afiche entero a la izquierda y los datos de la función ocupando todo el resto,
   hasta el borde: así no queda un hueco al costado */
.carrusel-diapositiva {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--espacio-10);
  /* A los costados, lugar para las flechas sin que tapen el afiche */
  padding: var(--espacio-8) calc(var(--espacio-12) + var(--espacio-6));
  min-height: 26rem;
  overflow: hidden;
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
}

/* El mismo afiche, desenfocado y oscurecido, de fondo: los afiches son verticales y el recuadro
   apaisado, y así los costados no quedan vacíos */
.carrusel-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(28px) brightness(0.35) saturate(1.2);
  /* Agrandado, para que el desenfoque no deje un borde claro */
  transform: scale(1.25);
  pointer-events: none;
}

/* El afiche, entero: recortado se pierde el título. El ancho sale de la imagen, sin una proporción
   fija: los fotogramas apaisados quedarían en una caja vertical con la sombra marcando el hueco */
.carrusel-imagen {
  position: relative;
  display: block;
  height: 22rem;
  width: auto;
  max-width: 100%;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-lg);
  /* Arrastrar el afiche con el mouse no lo levanta como una imagen suelta */
  -webkit-user-drag: none;
  user-select: none;
}

.carrusel-texto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-5);
}

/* El título, grande y con una línea debajo que cruza la diapositiva */
.carrusel-titulo {
  align-self: stretch;
  font-family: var(--fuente-titulos);
  font-size: clamp(var(--texto-2xl), 3.5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  padding-bottom: var(--espacio-5);
  border-bottom: 1px solid var(--color-borde-medio);
}

.carrusel-titulo-enlace {
  color: var(--color-texto);
  text-decoration: none;
}

.carrusel-titulo-enlace:hover {
  color: var(--color-primario);
}

/* Sala, cuándo y entrada, en tres columnas iguales */
.carrusel-datos {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espacio-6);
  margin: 0;
}

.carrusel-dato dt {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-1);
  color: var(--color-texto-apagado);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.carrusel-dato dd {
  margin: 0;
  color: var(--color-texto);
  font-size: var(--texto-lg);
  font-weight: 600;
  line-height: 1.3;
}

/* La localidad, debajo de la sala */
.carrusel-dato-detalle {
  display: block;
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
  font-weight: 400;
}

.carrusel-accion {
  margin-top: var(--espacio-2);
}

/* Con JavaScript: todas en la misma celda, y se ve sólo la actual */
.carrusel-pantalla {
  position: relative;
}

/* Deslizar de costado es del carrusel; de arriba a abajo sigue siendo desplazar la página. Y
   arrastrar con el mouse no selecciona el texto */
.carrusel-armado .carrusel-pantalla {
  touch-action: pan-y;
  user-select: none;
}

.carrusel-armado .carrusel-pista {
  display: grid;
  overflow: hidden;
  border-radius: var(--radio-lg);
}

.carrusel-armado {
  /* Lo que dura cada transición */
  --carrusel-duracion: 0.6s;
}

/* La que no se ve se esconde recién cuando terminó de irse: si no, desaparecería de golpe */
.carrusel-armado .carrusel-diapositiva {
  grid-area: 1 / 1;
  visibility: hidden;
  transition:
    opacity var(--carrusel-duracion) ease,
    transform var(--carrusel-duracion) cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear var(--carrusel-duracion);
}

.carrusel-armado .carrusel-diapositiva.es-actual {
  visibility: visible;
  transition:
    opacity var(--carrusel-duracion) ease,
    transform var(--carrusel-duracion) cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s;
}

/* El JS la pone un instante para ubicar la que entra en su punto de partida sin animar */
.carrusel-armado .carrusel-diapositiva.sin-transicion {
  transition: none;
}

/* Las tres transiciones (E4-07.2): una clase en el contenedor elige cuál. La actual siempre queda
   quieta y a la vista; cambia de dónde viene la que entra y a dónde va la que sale. */

/* Fundido: la nueva aparece encima de la anterior */
.carrusel-fundido .carrusel-diapositiva {
  opacity: 0;
}

.carrusel-fundido .carrusel-diapositiva.es-actual {
  opacity: 1;
}

/* Deslizar: entra por un costado y empuja a la anterior por el otro. Hacia adelante entra por la
   derecha; hacia atrás, por la izquierda */
.carrusel-deslizar .carrusel-diapositiva {
  transform: translateX(100%);
}

.carrusel-deslizar .carrusel-diapositiva.desde-atras,
.carrusel-deslizar .carrusel-diapositiva.sale-hacia-atras {
  transform: translateX(-100%);
}

.carrusel-deslizar .carrusel-diapositiva.sale-hacia-adelante {
  transform: translateX(100%);
}

.carrusel-deslizar .carrusel-diapositiva.es-actual {
  transform: none;
}

/* Zoom: la nueva se acerca desde un poco más grande y la anterior se aleja mientras se apaga */
.carrusel-zoom .carrusel-diapositiva {
  opacity: 0;
  transform: scale(1.15);
}

.carrusel-zoom .carrusel-diapositiva.sale-hacia-atras,
.carrusel-zoom .carrusel-diapositiva.sale-hacia-adelante {
  transform: scale(0.85);
}

.carrusel-zoom .carrusel-diapositiva.es-actual {
  opacity: 1;
  transform: none;
}

/* Las flechas, a los costados de la diapositiva */
.carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-borde-medio);
  border-radius: var(--radio-completo);
  background-color: rgba(23, 20, 28, 0.75);
  color: var(--color-texto);
  font-size: var(--texto-2xl);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transicion-rapida), border-color var(--transicion-rapida);
}

.carrusel-flecha:hover {
  background-color: var(--color-superficie-interactiva);
  border-color: var(--color-primario);
}

.carrusel-flecha:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
}

.carrusel-flecha-anterior {
  left: var(--espacio-3);
}

.carrusel-flecha-siguiente {
  right: var(--espacio-3);
}

/* La barra de carga (E4-07.3): tapa la diapositiva hasta que bajaron todas las imágenes, que es
   cuando arranca el pase automático */
.carrusel-carga {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-3);
  background-color: rgba(23, 20, 28, 0.88);
  border-radius: var(--radio-lg);
}

.carrusel-carga[hidden] {
  display: none;
}

.carrusel-carga-texto {
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
}

.carrusel-carga-barra {
  appearance: none;
  width: min(20rem, 70%);
  height: 0.5rem;
  border: 0;
  border-radius: var(--radio-completo);
  overflow: hidden;
  background-color: var(--color-superficie-interactiva);
}

.carrusel-carga-barra::-webkit-progress-bar {
  background-color: var(--color-superficie-interactiva);
}

.carrusel-carga-barra::-webkit-progress-value {
  background-color: var(--color-primario);
  transition: width var(--transicion-base);
}

.carrusel-carga-barra::-moz-progress-bar {
  background-color: var(--color-primario);
}

/* Debajo de la diapositiva, los controles */
/* Las miniaturas y la pausa juntas y centradas, debajo de la diapositiva: con pocas, en los
   extremos dejaban un hueco en el medio */
.carrusel-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-3);
  margin-top: var(--espacio-3);
}

.carrusel-pausa {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-borde-medio);
  border-radius: var(--radio-completo);
  background-color: var(--color-superficie);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  cursor: pointer;
}

.carrusel-pausa:hover {
  border-color: var(--color-primario);
}

.carrusel-pausa:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
}

/* Las miniaturas (E4-07.4): una por diapositiva, repartiéndose todo el ancho, con el afiche
   recortado; la actual, con el borde ámbar */
.carrusel-miniaturas {
  list-style: none;
  flex: 1 1 auto;
  display: flex;
  gap: var(--espacio-2);
  margin: 0;
  padding: var(--espacio-1);
  min-width: 0;
}

.carrusel-miniaturas li {
  flex: 1 1 0;
  min-width: 0;
}

.carrusel-miniatura {
  display: block;
  width: 100%;
  height: 4.5rem;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radio-sm);
  background-color: var(--color-superficie-elevada);
  color: var(--color-texto-secundario);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--transicion-rapida), border-color var(--transicion-rapida);
}

.carrusel-miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El tercio de arriba del afiche, donde suele estar el título */
  object-position: center 25%;
  -webkit-user-drag: none;
}

.carrusel-miniatura:hover {
  opacity: 0.85;
}

.carrusel-miniatura[aria-current="true"] {
  opacity: 1;
  border-color: var(--color-primario);
}

.carrusel-miniatura:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
}

/* Responsive (E4-07.5). En tablet, el afiche un poco más chico y menos aire a los costados */
@media (max-width: 1024px) {
  .carrusel-diapositiva {
    gap: var(--espacio-6);
    padding: var(--espacio-6) calc(var(--espacio-12) + var(--espacio-2));
    min-height: 0;
  }

  .carrusel-imagen {
    height: 18rem;
  }
}

/* En el celular, una columna: el afiche arriba y los datos abajo, centrados. Las flechas quedan a
   la altura del afiche: a los costados de uno vertical, y encima de los bordes de un fotograma
   apaisado, que ocupa todo el ancho */
@media (max-width: 768px) {
  .carrusel-diapositiva {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--espacio-4);
    padding: var(--espacio-5) var(--espacio-4) var(--espacio-6);
  }

  .carrusel-imagen {
    /* Con tope y no fijo: un fotograma apaisado que no entra a lo ancho se achica entero, en vez de
       quedar aplastado */
    height: auto;
    max-height: 15rem;
  }

  .carrusel-texto {
    align-items: center;
    text-align: center;
    gap: var(--espacio-2);
    max-width: 100%;
  }

  .carrusel-titulo {
    /* Un título largo («El gabinete del Dr. Caligari + Viaje a la Luna») corta, no desborda */
    overflow-wrap: anywhere;
  }

  /* Los tres datos, uno debajo del otro: en tres columnas no entran */
  .carrusel-datos {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-3);
  }

  .carrusel-dato dt {
    justify-content: center;
  }

  .carrusel-dato dd {
    font-size: var(--texto-md);
  }

  .carrusel-flecha {
    /* La mitad del afiche, que empieza después del relleno de arriba */
    top: calc(var(--espacio-5) + 7.5rem);
    width: 2.5rem;
    height: 2.5rem;
  }

  .carrusel-flecha-anterior {
    left: var(--espacio-2);
  }

  .carrusel-flecha-siguiente {
    right: var(--espacio-2);
  }

  .carrusel-miniatura {
    height: 3.5rem;
  }
}

/* En el celular, el toque ya se ve en el botón: sin el recuadro azul que agrega el navegador */
.carrusel-flecha,
.carrusel-miniatura,
.carrusel-pausa {
  -webkit-tap-highlight-color: transparent;
}

/* Para quien pidió reducir el movimiento: las diapositivas cambian sin animar. El pase automático
   lo frena el componente */
@media (prefers-reduced-motion: reduce) {
  .carrusel-armado {
    --carrusel-duracion: 0s;
  }

  .carrusel-carga-barra::-webkit-progress-value,
  .carrusel-flecha,
  .carrusel-miniatura {
    transition: none;
  }
}