/* cualevento.cl — dirección de diseño 2a del handoff, con el acento repintado.
   Nació "Terracota sobre crema"; desde 2026-08-19 la terracota #c05e3c es el
   naranja del logotipo #fd5600, que es el de los signos de interrogación del
   dibujo. Cambió el acento y nada más: la crema, la caja, el radio y la
   tipografía son los mismos, y el handoff sigue siendo la medida de todo lo
   demás. El nombre viejo se queda en `design_handoff_cartelera/`, que es el
   registro de lo que se entregó, no de lo que está puesto.
   Sin framework y sin paso de compilación, igual que antes.

   Sustituye a "Cartelera técnica" (1a, azul acero): misma estructura de páginas,
   piel nueva. Ninguna plantilla cambió de forma para esto — lo que cambia es el
   color, la tipografía, la caja y el radio.

   Las cuatro reglas del sistema, de las que sale todo lo demás:
     1. Radios: 14px en tarjetas y paneles, 12px en la tarjeta flotante del mapa,
        999px en píldoras y chips. No hay esquina viva en la interfaz.
     2. Sombras solo en lo que flota sobre el mapa y en el hover de tarjeta. El
        resto de la jerarquía la sostienen bordes de 1px sobre crema.
     3. Un solo acento: el naranja del logotipo. El único color que se le
        añade es el de categoría —el cuadrito de las tarjetas y los chips—, que
        el cliente pidió después del handoff y se mantiene; y el verde de
        "gratis" en el mapa, que es funcional. Nada más aporta color.
     4. Sin mayúsculas forzadas ni tracking amplio. Es justo eso lo que da el tono
        cálido y separa esta dirección de la versión técnica anterior: la
        versalita espaciada era su voz, y aquí no queda ninguna.

   El ancho de diseño es 1000px (`--sheet`). La hoja es una tarjeta redondeada
   sobre un fondo un paso más oscuro; por debajo de 900px pierde margen y radio y
   pasa a ocupar la pantalla entera — ese comportamiento no venía diseñado, ver
   "responsive" al final.

   No hay variante oscura a propósito: el diseño entregado define solo el modo
   claro, e improvisar una cartelera oscura sería inventar diseño. */

:root {
  --ground:      #e8e6e1;   /* el suelo sobre el que flota la hoja */
  --bg:          #faf4ea;   /* la hoja */
  --surface:     #fffaf2;   /* tarjetas y paneles sobre la hoja */

  --ink:         #2a2320;
  --ink-2:       rgba(42, 35, 32, .7);
  --ink-3:       rgba(42, 35, 32, .6);
  --ink-4:       rgba(42, 35, 32, .5);
  --ink-5:       rgba(42, 35, 32, .3);

  /* El naranja del logotipo, tal cual: es el de los dos signos de interrogación
     y el de `evento` en el dibujo (#fd5600). Sustituye a la terracota #c05e3c
     de la dirección 2a para que la cabecera y la interfaz sean el mismo color.

     Sobre la crema da 2,95:1, y eso manda una regla nueva que la terracota no
     necesitaba: el acento NO lleva texto en ningún cuerpo. Sirve para relleno,
     borde, foco, píldora y pin —chrome, donde el umbral es 3:1 y anda al
     límite—; en cuanto pinta letras sobre la hoja se usa el paso oscurecido. */
  --accent:      #fd5600;
  /* Mismo tono (20,4°) y misma saturación, bajado hasta que aguanta texto
     pequeño: 5,32:1 sobre la crema, 5,60:1 sobre la superficie y 4,75/4,53:1
     sobre los dos tintes, que es donde de verdad se usa (píldora de hora, chip
     activo). Es el color de TODA la letra naranja de la interfaz. */
  --accent-700:  #b43d00;
  --on-accent:   #fffaf2;
  --tint:        rgba(253, 86, 0, .1);
  --tint-2:      rgba(253, 86, 0, .14);

  --line-strong: rgba(42, 35, 32, .22);
  --line:        rgba(42, 35, 32, .14);
  --line-cell:   rgba(42, 35, 32, .12);
  --line-soft:   rgba(42, 35, 32, .1);
  --line-chip:   rgba(42, 35, 32, .2);

  --sheet:       1000px;
  --pad:         26px;      /* margen de página horizontal */

  --r:           14px;      /* tarjetas y paneles */
  --r-sm:        12px;      /* la tarjetita del mapa y los campos */
  --pill:        999px;

  --sans:        Barlow, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cond:        "Barlow Condensed", Barlow, system-ui, sans-serif;

  --ok:          #2f6b46;
  --warn:        #8a5a1e;
  --err:         #9a3529;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; }

/* Nunca el foco por defecto del navegador. El anillo va en el naranja
   oscurecido y no en el acento: es el único dibujo de la interfaz que tiene
   que verse sí o sí, y el acento sobre la crema se queda en 2,95:1 —por
   debajo del 3:1 que pide un elemento no textual—. La terracota llegaba a
   3,91:1 y aguantaba; el naranja del logotipo no, así que el foco es lo
   primero que baja de escalón. Mismo tono, 5,32:1. */
:focus-visible { outline: 2px solid var(--accent-700); outline-offset: 2px; }

/* La hoja: el bloque de 1000px sobre el que se midió todo el diseño. Va
   redondeada y recortada, así que las bandas a sangre de dentro (la barra de
   filtros, el pie del listado) mueren limpias contra la esquina. El padding de
   26px vive dentro de cada sección, nunca aquí. */
.wrap {
  width: 100%; max-width: var(--sheet); margin: 24px auto;
  background: var(--bg); border-radius: var(--r); overflow: hidden;
}
.band { border-bottom: 1px solid var(--line); }
.pad  { padding-left: var(--pad); padding-right: var(--pad); }
.muted { color: var(--ink-3); }

/* Etiqueta de chrome: la voz de todo lo que rotula sin ser contenido. En la
   dirección anterior era una versalita espaciada; aquí es Barlow en caja normal,
   que es de donde sale el tono. */
.tag-label { font: 500 12.5px/1 var(--sans); color: var(--ink-4); }

/* --- marcas de registro ------------------------------------------------------
   Las cuatro `+` de las esquinas eran de "Cartelera técnica" y esta dirección no
   las tiene: la jerarquía la llevan el borde y el radio. Las plantillas siguen
   emitiéndolas (`_marks.html`) porque cambiarlas sería tocar la estructura de las
   páginas, así que se apagan aquí. Si la dirección se retira del todo, esto y la
   macro se van juntos. */
.marks, .marks > i { display: none; }

/* --- barra de navegación -----------------------------------------------------
   Sin regla inferior a propósito: la cabecera flota sobre la crema y es el
   calendario el que abre la página con su propio borde. */
/* Una sola pieza desde que se retiró la navegación: el logotipo y nada más. Los
   enlaces de arriba (Hoy, Semana, Gratis, Siempre abierto, Mapa y el botón de
   publicar) repetían lo que ya hace la barra de filtros, y en un teléfono se
   comían dos líneas enteras antes de que empezara la página. */
.topbar { padding: 20px var(--pad) 14px; }
/* El logotipo, en una sola pieza. Hasta ahora eran tres —silueta, wordmark y
   lema— montadas aquí con CSS y alineadas a un ancho común; el dibujo nuevo ya
   las trae dentro, así que de todo aquel andamiaje (`.brand-slogan`, `.wordmark`
   y sus `.wm-*`, el `¿` subido 0,208 em, el lema justificado) no queda nada.

   `--logo` sigue siendo la medida de la marca, y sigue valiendo 208px: el SVG
   mide 163,158 × 71,485 mm, así que a ese ancho el bloque ocupa 91px de alto —
   lo mismo que ocupaban las tres piezas apiladas. La cabecera no se movió.

   El `.wordmark` de texto sobrevive en admin.css, que es el único sitio que lo
   usa todavía: la barra de revisión no lleva el dibujo. */
.topbar-brand {
  --logo: 208px;
  display: block; text-decoration: none;
}
.brand-mark { width: var(--logo); height: auto; display: block; }

/* El único objeto con relleno sólido del sistema. Estuvo en la cabecera hasta
   que se retiró la navegación; ahora solo lo usan la ficha del evento, el
   formulario de /publicar y el admin. */
.btn-solid {
  position: relative; display: inline-block;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  font: 600 13px/1 var(--sans); padding: 10px 15px;
  border: 0; border-radius: var(--pill); cursor: pointer;
}
.btn-solid:hover { background: var(--accent-700); }

/* Botón secundario: solo el marco de 1px. */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font: 500 13px/1 var(--sans); padding: 10px 15px;
  border: 1px solid var(--line-chip); border-radius: var(--pill);
  background: transparent; color: var(--ink);
}
.btn:hover { border-color: var(--accent); color: var(--accent-700); }
.btn-ghost { border-color: var(--line-soft); color: var(--ink-3); }

/* --- bloque destacado -------------------------------------------------------- */
/* `.featured` sigue siendo la retícula de dos columnas: la usan la ficha de
   evento y la página de gracias. La portada no lleva nada de esto: primero
   destacaba un evento —una elección arbitraria disfrazada de recomendación—,
   después un titular con el recuento, y ahora empieza directamente por el
   calendario. El titular decía lo que el logotipo ya dice. */
/* El recuento de los filtros. Vivía arriba del todo, dentro de una cabecera con
   titular; ahora es lo último de la zona de filtros y lo primero que se lee de
   la lista, que es donde significa algo: son los filtros de encima resueltos en
   un número. Por eso ya no lleva regla superior —la trae la barra de filtros— y
   sí el `.pad` de página, que antes le prestaba la sección. */
.statline {
  padding-top: 14px; padding-bottom: 2px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px;
  font: 500 13px/1.4 var(--sans); color: var(--ink-3);
}
.statline b { font-family: var(--cond); font-weight: 600; font-size: 20px; color: var(--ink); }
.statline a { color: var(--accent-700); }
/* "orden por hora" describe la lista, no cuenta nada: se va al final y en tono
   de rótulo. Era la cola del `.count` que la fila de categorías llevaba a la
   derecha, y que decía el mismo número que este bloque. */
.statline-note { margin-left: auto; color: var(--ink-4); }

.featured { display: grid; grid-template-columns: 1.15fr .85fr; }
.featured-main { padding: 30px var(--pad) var(--pad); }
.kicker { font: 600 13px/1 var(--sans); color: var(--accent-700); margin-bottom: 12px; }
.featured-title {
  font-family: var(--cond); font-weight: 700; font-size: 58px; line-height: .96;
  letter-spacing: 0; margin: 0; text-wrap: balance;
}
.featured-title a { text-decoration: none; }
.featured-title a:hover { color: var(--accent-700); }
.featured-lede {
  margin: 14px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.5;
  color: var(--ink-2); text-wrap: pretty;
}
/* La tira de datos era una fila de celdas con reglas verticales. Aquí es una
   tarjeta: mismo contenido, misma retícula, envuelta en el borde y el radio del
   sistema para que no se lea como tabla. */
.factstrip {
  display: flex; margin-top: 22px; background: var(--surface);
  border: 1px solid var(--line-cell); border-radius: var(--r); overflow: hidden;
}
.fact { flex: 1; padding: 12px 16px; border-right: 1px solid var(--line-soft); min-width: 0; }
.fact:first-child { padding-left: 16px; }
.fact:last-child { border-right: 0; }
.fact-wide { flex: 1.4; }
.fact-k { font: 500 12.5px/1 var(--sans); color: var(--ink-4); }
.fact-v {
  font-family: var(--cond); font-size: 22px; font-weight: 600; margin-top: 3px;
  line-height: 1.1; overflow-wrap: anywhere;
}
.featured-aside { padding: var(--pad); display: flex; align-items: stretch; }

/* Marco del afiche. `min-width: 0` es obligatorio — sin él el ancho intrínseco
   de la imagen desborda la celda del grid. El duotono azul de la dirección
   anterior no existe aquí: el cartel va en su color, recortado dentro del radio
   del sistema. */
.frame {
  position: relative; flex: 1; min-width: 0; height: 300px;
  border: 1px solid var(--line-cell); border-radius: var(--r); overflow: hidden;
  background: rgba(42, 35, 32, .06);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-empty {
  width: 100%; height: 100%; background: rgba(42, 35, 32, .06);
  display: flex; align-items: center; justify-content: center;
  font: 500 13px/1.4 var(--sans); color: var(--ink-4); text-align: center; padding: 12px;
}

/* --- barra de filtros -------------------------------------------------------- */
/* Cuatro filas apiladas, así que cada píxel de relleno se paga cuatro veces:
   16px arriba y abajo se quedaron en 10px, que es lo que hay que dejar para que
   el chip no toque la regla. El aire entre chips lo pone el `gap`. */
.filterbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--pad); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.filterbar + .filterbar { border-top: 0; }
.filter-label { font: 500 12.5px/1 var(--sans); color: var(--ink-4); margin-right: 4px; white-space: nowrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--line-chip); border-radius: var(--pill);
  font: 500 12.5px/1 var(--sans); color: var(--ink-2);
  background: transparent; text-decoration: none; cursor: pointer;
  user-select: none; white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent-700); }
/* El chip activo se rellena en tinta, no en acento: el acento ya está en la
   cabecera y en los precios, y en la barra de filtros compite con el color de
   categoría del chip de al lado. */
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
.chip.on:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* El radio/checkbox lleva el estado; el chip es el control visible. */
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:focus-within { outline: 2px solid var(--accent-700); outline-offset: 2px; }
.chip b { font-weight: 500; opacity: .55; font-size: 11.5px; }
.chip.on b { opacity: .8; }

/* --- color de categoría -------------------------------------------------------
   El cuadrito. Cada uno recibe su tono por `--c` desde la plantilla, que lo lee
   de app/categories.py — un único sitio donde vive la paleta.

   Es el único color fuera del acento que el cliente pidió mantener, y nunca va
   solo: al lado siempre está el nombre de la categoría escrito, que es lo que
   permite que dos categorías compartan tono cuando hay más categorías que tonos
   distinguibles. Redondo, no cuadrado: en esta dirección no queda una esquina
   viva en toda la interfaz. */
.swatch {
  display: inline-block; width: 8px; height: 8px; flex: none;
  background: var(--c); border-radius: 50%; vertical-align: baseline;
}

/* El chip seleccionado se rellena con el color de su propia categoría, en el
   paso oscuro, que es el que aguanta texto claro encima. El cuadrito se aclara
   para seguir viéndose sobre el relleno. */
.chip-cat.on { background: var(--cd); border-color: var(--cd); color: #fff; }
.chip-cat.on:hover { background: var(--cd); border-color: var(--cd); filter: brightness(.93); color: #fff; }
.chip-cat.on .swatch { background: #fff; }
.chip-cat:hover { border-color: var(--c); color: var(--ink); }

.count { margin-left: auto; font: 500 12.5px/1 var(--sans); color: var(--ink-4); white-space: nowrap; }

.search {
  font: 400 13px/1 var(--sans); padding: 9px 14px;
  border: 1px solid var(--line-chip); border-radius: var(--pill);
  background: var(--surface); color: var(--ink);
  min-width: 210px; flex: 1 1 210px; max-width: 320px;
}
.search::placeholder { color: var(--ink-4); }
.search:focus-visible { border-color: var(--accent-700); }

.day-pill {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 8px 14px; border-radius: var(--pill);
  background: var(--tint); color: var(--accent-700);
  font: 600 12.5px/1 var(--sans);
}
.day-pill a { text-decoration: none; font-weight: 600; }

/* --- matriz de tarjetas ------------------------------------------------------
   Tarjetas homogéneas en tres columnas, todas con la misma plantilla: imagen
   arriba a sangre, datos debajo. La jerarquía no se marca con tamaños distintos.

   La separación es `gap` de verdad, no la regla de 1px dibujada con `box-shadow`
   de la dirección anterior: con tarjetas separadas y con borde propio, las
   celdas vacías de la última fila no pintan nada.

   La imagen llega a sangre sin envolver el cuerpo en un div —la estructura de la
   plantilla no se toca—: la tarjeta va sin padding y lo llevan sus hijos. */
.matrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
  padding: 22px var(--pad) 26px;
}
.mcard {
  background: var(--surface); padding: 0;
  border: 1px solid var(--line-cell); border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; min-width: 0;
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* Nunca desplazamiento ni escala: la tarjeta se enciende, no se mueve. */
.mcard:hover { border-color: rgba(253, 86, 0, .45); box-shadow: 0 2px 10px rgba(42, 35, 32, .1); }
.mcard:focus-visible { outline-offset: -2px; }

.mcard-fig {
  position: relative; height: 150px; margin: 0;
  background: rgba(42, 35, 32, .06);
}
.mcard-fig img { width: 100%; height: 100%; object-fit: cover; }
.mcard-nofig {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px; font: 500 12.5px/1.4 var(--sans); color: var(--ink-4);
}

.mcard-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 7px; padding: 15px 16px 0; margin-bottom: 8px;
}
/* La hora es una píldora, no un titular: es el dato que se busca al barrer la
   retícula y necesita ser localizable sin gritar. */
.mcard-time {
  display: inline-flex; align-items: center;
  font: 600 11.5px/1 var(--sans); color: var(--accent-700);
  background: var(--tint-2); padding: 5px 9px; border-radius: var(--pill);
}
.mcard-time .nil { font-family: var(--sans); font-size: 11.5px; }
.mcard-type {
  font: 500 12px/1.3 var(--sans); color: var(--ink-3); text-align: right;
  display: inline-flex; align-items: center; gap: 6px;
}
.mcard-title {
  font-family: var(--cond); font-size: 25px; font-weight: 600; line-height: 1.04;
  color: var(--ink); text-wrap: pretty; padding: 0 16px; margin-bottom: 12px;
}
.mcard:hover .mcard-title { color: var(--accent-700); }

/* `margin-top: auto` alinea el pie de todas las tarjetas de una fila aunque los
   títulos tengan distinto número de líneas. Sin regla que lo separe: el aire
   basta, y una línea más partiría la tarjeta en dos. */
.mcard-foot {
  margin-top: auto; padding: 13px 16px 16px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.mcard-venue { font: 500 13px/1.3 var(--sans); color: var(--ink-3); min-width: 0; }
.mcard-venue small { display: block; font-size: 12px; color: var(--ink-4); font-weight: 400; }
.mcard-price {
  font-family: var(--cond); font-weight: 600; font-size: 20px;
  color: var(--ink); white-space: nowrap;
}
.mcard-price .free { color: var(--accent-700); }
/* Un dato que la fuente no da nunca se rellena: se dice que falta. */
.nil { color: var(--ink-4); }

/* Cabecera de día: separa una matriz de la siguiente. */
.day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 22px var(--pad) 12px;
  font-family: var(--cond); font-weight: 700; font-size: 26px; letter-spacing: 0;
}
.day-head span:last-child { font: 500 12.5px/1 var(--sans); color: var(--ink-4); }

/* --- pie de listado ---------------------------------------------------------- */
.listfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--pad); border-top: 1px solid var(--line);
  font: 500 13px/1.4 var(--sans); color: var(--ink-3);
}
.listfoot a { color: var(--accent-700); font-weight: 600; text-decoration: none; }
.listfoot a:hover { text-decoration: underline; }

/* --- paneles (calendario y mapa) ---------------------------------------------
   Calendario y mapa, uno al lado del otro y con el mismo alto. Eso NO sale solo
   de que sean celdas hermanas del grid: la celda se estira, pero su contenido no.
   Se consigue haciendo columna flexible cada panel y dejando que el calendario y
   el mapa —el contenido del medio— crezcan con `flex: 1`. Así el más alto de los
   dos marca la altura y el otro lo alcanza, en vez de dejar un hueco debajo.

   El mapa se lleva la parte ancha porque es el que tiene algo que mostrar en
   horizontal: Santiago es más ancho que alto, y el calendario es una retícula de
   siete columnas fijas. */
.panels {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px;
  padding: 22px var(--pad) 20px; align-items: stretch;
}
.panel {
  padding: 16px 18px 18px; min-width: 0; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-cell); border-radius: var(--r);
}
/* El panel del mapa es la misma ficha, pero sin relleno propio: los tiles van a
   sangre de borde a borde dentro del radio, y solo su cabecera y su nota llevan
   margen. Así el mapa se lee como una lámina y no como una figura pegada. */
.panel-map { padding: 0; overflow: hidden; }
.panel-map .panel-head { padding: 16px 18px 0; margin-bottom: 12px; }
.panel-map .panel-note { padding: 0 18px 14px; margin-top: 10px; }
.panel-map #map { border-top: 1px solid var(--line-cell); }
/* Los permanentes no tienen calendario con el que compartir la fila: allí el
   mapa es el panel entero, y Santiago agradece el ancho. */
.panels.one { grid-template-columns: 1fr; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; min-height: 20px;
}
.panel-head h2 { font-family: var(--cond); font-weight: 700; font-size: 24px; color: var(--ink); }
.panel-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-4); }
.panel-note b { color: var(--ink-2); font-weight: 600; }
.panel-note .warn { color: var(--warn); font-weight: 600; }

.month-nav { display: flex; align-items: center; gap: 12px; font: 600 14px/1 var(--sans); color: var(--ink-4); }
.month-nav a { text-decoration: none; color: var(--ink-4); font-size: 16px; }
.month-nav a:hover { color: var(--accent-700); }
.month-nav .off { color: var(--ink-5); font-size: 16px; }
.month-nav b { font-family: var(--cond); font-weight: 700; font-size: 18px; color: var(--ink); }

/* `grid-template-rows: auto` fija SOLO la fila de los nombres de día; las
   semanas son filas implícitas y se reparten el resto a partes iguales. Poner
   `grid-auto-rows: 1fr` sin ese `auto` delante estiraría también la cabecera
   L M X J V S D hasta la altura de una semana.

   Sin reglas entre celdas: aquí el calendario se lee por separación, y el día
   elegido es una píldora rellena en vez de una casilla pintada. */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto; grid-auto-rows: 1fr;
  gap: 6px; flex: 1;
}
.cal-dow { padding: 4px 0 2px; text-align: center; font: 500 11.5px/1 var(--sans); color: var(--ink-4); }
.cal-day {
  min-height: 42px; padding: 6px 2px; text-decoration: none; color: inherit;
  border-radius: var(--pill);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.cal-num { font: 500 14px/1 var(--sans); color: var(--ink); }
.cal-n { font: 600 11px/1 var(--sans); color: var(--accent-700); }
.cal-n i { font-style: normal; color: var(--ink-4); font-weight: 500; }
.cal-day.has-events .cal-num { color: var(--accent-700); font-weight: 600; }
.cal-day.has-events:hover { background: var(--tint); }
.cal-day.on { background: var(--accent); }
.cal-day.on .cal-num, .cal-day.on .cal-n, .cal-day.on .cal-n i { color: var(--on-accent); }
.cal-day.on .cal-num { font-weight: 700; }
.cal-day.is-today .cal-num { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }
.cal-day.outside { opacity: .45; }
.cal-day.past .cal-num { color: var(--ink-5); }
.cal-day.blank .cal-n { color: var(--ink-5); }

/* Sin altura fija: crece hasta igualar al calendario. El `min-height` es el
   suelo para cuando los paneles se apilan en móvil y ya no hay a quién igualar. */
#map { flex: 1; min-height: 330px; background: rgba(42, 35, 32, .06); }
#map.is-empty { display: flex; align-items: center; justify-content: center; }
/* El de la ficha no compite en altura con nada: es una miniatura que sitúa el
   lugar, y quien quiera moverse por el mapa tiene la portada y los permanentes. */
#map.map-mini { flex: none; height: 230px; min-height: 0; }
.map-legend { display: flex; gap: 12px; flex-wrap: wrap; font: 500 12px/1 var(--sans); color: var(--ink-4); }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { width: 9px; height: 9px; display: inline-block; border-radius: 50%; }
.dot-free { background: var(--ok); }
.dot-paid { background: var(--accent); }
.dot-approx { border: 1px dashed var(--ink-3); }

/* Los pines y los globos que dibuja map.js. Círculos con sombra: son lo único
   que flota sobre el mapa, y ahí sí hay elevación. El verde es la única
   excepción a la paleta de un solo acento, y es funcional: distingue gratis de
   pagado. Nunca va solo — el emoji de categoría dentro del pin y el texto del
   globo dicen lo mismo, porque verde/naranja es justo el par que no distingue
   quien tiene daltonismo. */
.ev-pin-wrap { background: none; border: 0; }
.ev-pin {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; font-size: 14px; line-height: 1;
  background: var(--pin); border: 1px solid rgba(255, 250, 242, .9);
  color: var(--on-accent); border-radius: 50%;
  box-shadow: 0 2px 6px rgba(42, 35, 32, .3);
}
.ev-pin.big { width: 30px; height: 30px; font: 600 14px/1 var(--sans); }
.ev-pin.approx { border-style: dashed; }

.pop b { display: block; font-family: var(--cond); font-size: 19px; font-weight: 600; }
.pop-head { padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; }
.pop-com, .pop-approx { display: block; font: 500 12px/1.4 var(--sans); color: var(--ink-4); }
.pop-approx { color: var(--warn); margin-top: 3px; }
.pop-list { list-style: none; margin: 0; padding: 0; }
.pop-list li + li { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.pop-list a { text-decoration: none; display: flex; gap: 6px; align-items: baseline; }
.pop-title { font-family: var(--cond); font-size: 17px; font-weight: 600; }
.pop-list a:hover .pop-title { color: var(--accent-700); }
.pop-meta { display: block; font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.pop-free { color: var(--accent-700); font-weight: 600; }
.pop-price { color: var(--ink-3); font-weight: 600; }

/* Leaflet trae sus propias esquinas y su sombra. Ahora el sistema sí tiene
   radio, así que en vez de anularlas se ajustan a los valores de la dirección:
   12px y la sombra suave de lo que flota sobre el mapa. */
.leaflet-container { font-family: var(--sans); background: rgba(42, 35, 32, .06); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  border-radius: var(--r-sm) !important;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 2px 8px rgba(42, 35, 32, .2) !important;
}
.leaflet-control-zoom a, .leaflet-bar {
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(42, 35, 32, .18) !important;
}
.leaflet-popup-content-wrapper { border: 1px solid var(--line-cell); }
.leaflet-bar { border: 1px solid var(--line-cell) !important; }
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; }

/* --- estado vacío ------------------------------------------------------------
   Se llama `.noresults` y no `.empty` a propósito: el calendario ya usa
   `.cal-day.empty` para un día sin eventos, misma especificidad, y la última
   regla del archivo ganaba — los días vacíos heredaban 56px de padding y
   estiraban el calendario al doble de alto. */
.noresults { padding: 56px var(--pad); text-align: center; }
.noresults h2 { font-family: var(--cond); font-weight: 700; font-size: 30px; letter-spacing: 0; margin-bottom: 8px; }
.noresults p { margin: 0 0 18px; color: var(--ink-2); }

/* --- ficha de evento ---------------------------------------------------------
   No venía diseñada. Se construye con las mismas piezas: el titular del
   destacado, la tira de datos y el marco del afiche. */
.crumbs { padding: 14px var(--pad) 0; font: 500 12.5px/1 var(--sans); color: var(--ink-4); }
.crumbs a { color: var(--accent-700); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.detail { display: grid; grid-template-columns: 1.15fr .85fr; }
.detail-main { padding: 26px var(--pad) var(--pad); min-width: 0; }
.detail-aside { padding: var(--pad); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.detail-title {
  font-family: var(--cond); font-weight: 700; font-size: 48px; line-height: 1;
  letter-spacing: 0; text-wrap: balance;
}
.prose { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.prose p { margin: 0 0 12px; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }

/* La ficha de datos, en tarjeta. Filas explícitas en vez de `nth-child`: una fila
   puede llevar uno o dos datos, y con parity la separación vertical caería en el
   sitio equivocado en cuanto un campo ocupara el ancho entero. */
.facts {
  margin: 24px 0 0; background: var(--surface);
  border: 1px solid var(--line-cell); border-radius: var(--r); overflow: hidden;
}
.facts .frow { display: flex; border-bottom: 1px solid var(--line-soft); }
.facts .frow:last-child { border-bottom: 0; }
.facts .frow > div { flex: 1; min-width: 0; padding: 12px 16px; }
.facts .frow > div + div { border-left: 1px solid var(--line-soft); }
.facts dt { font: 500 12.5px/1 var(--sans); color: var(--ink-4); }
.facts dd { margin: 4px 0 0; font-family: var(--cond); font-size: 22px; font-weight: 600; line-height: 1.15; }
.facts dd small { display: block; font: 400 13px/1.4 var(--sans); color: var(--ink-3); margin-top: 2px; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.stamp { margin: 20px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-4); }
.stamp b { color: var(--ink-2); }
.stamp .err { color: var(--err); }

/* --- formulario "publicar evento" --------------------------------------------
   Tampoco venía diseñado. Las filas de campos son la tarjeta de datos de la
   ficha, en editable: mismo borde, mismo radio, misma separación interna. */
.form-rows {
  background: var(--surface); border: 1px solid var(--line-cell);
  border-radius: var(--r); overflow: hidden;
}
.form-row { display: flex; border-bottom: 1px solid var(--line-soft); }
.form-row:last-child { border-bottom: 0; }
.field { flex: 1; min-width: 0; padding: 14px 16px; }
.field + .field { border-left: 1px solid var(--line-soft); }
.field-tight { flex: 0 1 220px; }
.field > label:not(.check), .field-k {
  display: block; font: 500 12.5px/1 var(--sans); color: var(--ink-4); margin-bottom: 7px;
}
.field .req { color: var(--accent-700); }
.field input[type=text], .field input[type=email], .field input[type=url],
.field input[type=date], .field input[type=time], .field select, .field textarea {
  width: 100%; font: 400 15px/1.4 var(--sans); color: var(--ink);
  padding: 9px 12px; border: 1px solid var(--line-chip); background: var(--bg);
  border-radius: 10px; -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--accent-700);
}
.field .hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-4); }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--err); }
.field .bad-note { margin: 6px 0 0; font-size: 12.5px; color: var(--err); font-weight: 500; }

.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.check input { margin: 3px 0 0; width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.check span { font-size: 14px; color: var(--ink-2); }

/* Trampa para robots: un campo real, oculto a las personas. Nunca `type=hidden`
   — un bot lo salta; esto lo rellena porque parece un campo más. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  margin: 16px var(--pad) 0; padding: 14px 16px;
  background: var(--tint); border-radius: var(--r); font-size: 14px;
}
.notice.is-bad { background: rgba(154, 53, 41, .08); }
.notice b { font-weight: 600; }

/* --- fuentes ----------------------------------------------------------------- */
.legend { padding: 14px var(--pad); font-size: 12.5px; color: var(--ink-3); }
.sources { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 4px var(--pad) 26px; }
.source {
  padding: 16px 18px; min-width: 0; background: var(--surface);
  border: 1px solid var(--line-cell); border-radius: var(--r);
}
.source-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.source-head h3 { font-family: var(--cond); font-size: 22px; font-weight: 600; }
.source-head a { text-decoration: none; }
.source-head a:hover { color: var(--accent-700); }
.source-cov { margin: 6px 0 10px; font-size: 13px; color: var(--ink-2); }
.source-notes { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-4); line-height: 1.5; }
.source-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.pill {
  font: 500 12px/1 var(--sans); padding: 6px 10px;
  border: 1px solid var(--line-chip); border-radius: var(--pill); color: var(--ink-3);
}
.pill-ok { border-color: var(--accent); color: var(--accent-700); }

.st {
  font: 600 12px/1 var(--sans); padding: 5px 10px; border-radius: var(--pill);
  border: 1px solid; white-space: nowrap;
}
.st-active     { color: var(--ok);   border-color: var(--ok); }
.st-pending_api{ color: var(--warn); border-color: var(--warn); }
.st-blocked    { color: var(--err);  border-color: var(--err); }
.st-planned    { color: var(--ink-3);border-color: var(--line-chip); }

/* --- pie de página ----------------------------------------------------------- */
.site-foot {
  padding: 20px var(--pad) 30px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-4); line-height: 1.6;
}
.site-foot b { color: var(--ink-2); }
.site-foot a { color: var(--accent-700); }

/* --- responsive --------------------------------------------------------------
   No venía diseñado. Los chips pasan a scroll horizontal y las retículas de dos
   columnas caen a una; la hoja pierde margen y radio y ocupa la pantalla entera,
   porque una tarjeta de 1000px con 8px de aire a cada lado no es una tarjeta. */
@media (max-width: 900px) {
  :root { --pad: 18px; }
  .wrap { margin: 0; border-radius: 0; }
  .featured, .detail, .panels { grid-template-columns: 1fr; }
  .featured-aside, .detail-aside { padding-top: 22px; }
  .featured-title { font-size: 44px; }
  .detail-title { font-size: 36px; }
  .sources { grid-template-columns: 1fr; }
}

/* El teléfono es donde más se usa esto, así que este bloque no es un apaño de
   última hora: es la mitad del diseño. Tres cosas lo gobiernan.

   1. Nada se sale de la pantalla. Las filas de chips que no caben ruedan en
      horizontal, y el chip cortado contra el borde es el aviso de que hay más
      —no hace falta pintar un degradado—. Pero la fila de búsqueda NO rueda:
      un campo de texto dentro de un carrusel es una trampa, así que esa se
      envuelve y el campo ocupa el ancho entero.
   2. Se puede tocar. Los chips suben a 40px de alto (`padding` vertical 11px
      sobre 18px de línea), que es el mínimo cómodo con el pulgar; a cambio las
      filas se aprietan, así que la zona de filtros acaba midiendo menos que
      antes aun con los chips más grandes.
   3. El campo de búsqueda va a 16px. Por debajo de ese cuerpo, Safari de iOS
      hace zoom al enfocar un `input` y deja la página descuadrada, y no hay
      forma de volver atrás salvo pellizcando. Es la única medida de esta hoja
      que no se elige por diseño sino por el navegador. */
@media (max-width: 720px) {
  /* La cabecera es solo el logotipo: sin nada al lado, no necesita repartir. */
  .topbar { padding-bottom: 10px; }

  /* Las filas largas ruedan; la de búsqueda no. */
  .filterbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; gap: 7px; }
  .filterbar .chips { flex-wrap: nowrap; }
  .filterbar-search { flex-wrap: wrap; overflow-x: visible; }

  /* El rótulo de cada fila no debe encogerse ni rodar con los chips. */
  .filter-label { flex: none; }

  .chip { padding: 11px 14px; }
  /* El día elegido en el calendario va el último de su fila, así que en una
     pantalla estrecha nace fuera de la pantalla: hay que rodar la fila a la
     derecha para ver qué día está puesto y para encontrar la ✕ que lo quita.
     Se adelanta al primer puesto, que además es su sitio por jerarquía —cuando
     hay día elegido, ningún chip de rango está activo—. */
  .day-pill { order: -1; }
  /* `60%` y no `100%`: el campo se queda en la misma línea que su rótulo y son
     los dos interruptores los que bajan. Con `100%` el rótulo se comía una
     línea entera para sí solo. */
  .search {
    font-size: 16px; padding: 10px 14px;
    flex: 1 1 60%; max-width: none; min-width: 0;
  }

  /* El recuento pierde la alineación a la derecha: en una columna estrecha
     "orden por hora" cae solo al final de la última línea. */
  .statline { gap: 4px 18px; }
  .statline-note { margin-left: 0; }

  /* La matriz cae sola a una columna por el `minmax(290px, 1fr)`. */
  .facts .frow, .form-row { display: block; }
  .facts .frow > div + div, .field + .field { border-left: 0; border-top: 1px solid var(--line-soft); }
  .listfoot { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* --- visor del afiche ---------------------------------------------------------
   El cartel se muestra recortado (`object-fit: cover` en un marco de 300px), que
   es lo que hace que la retícula cuadre. Pero un afiche recortado esconde justo
   lo que trae escrito abajo —la fecha, el precio, la sala— así que al pulsarlo
   se abre entero y sin recortar.

   Es CSS puro con `:target`, sin una línea de JavaScript: la página del evento
   tiene que poder verse aunque un script falle. Cerrar es navegar a un hash que
   no existe, así que el fondo entero funciona como botón de cerrar. */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center;
  background: rgba(42, 35, 32, .93); padding: 32px; cursor: zoom-out;
}
.lightbox:target { display: flex; }
.lightbox figure { margin: 0; max-width: min(900px, 92vw); }
.lightbox img {
  max-width: 100%; max-height: 82vh; width: auto; margin: 0 auto;
  border-radius: var(--r-sm);
}
.lightbox figcaption {
  margin-top: 10px; text-align: center; color: rgba(250, 244, 234, .75);
  font: 500 12.5px/1.4 var(--sans);
}


@media (max-width: 900px) {
  .lightbox { padding: 16px; }
}

/* La pista de que el cartel se puede pulsar. Sin iconos: el cursor y el borde que
   se tiñe con el acento, que es como se comporta todo lo pulsable aquí. */
.frame-zoom { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.frame:hover { border-color: rgba(253, 86, 0, .45); }


/* --- el mapa de la ficha ---------------------------------------------------
   Vive en la columna del afiche y repite su marco, así que los dos recuadros de
   esa columna se leen como una sola pila y no como dos invitados distintos. */
.mapcard {
  background: var(--surface); border: 1px solid var(--line-cell);
  border-radius: var(--r); overflow: hidden;
}
.mapcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 12px 14px;
  border-top: 1px solid var(--line-cell);
}
.mapcard-foot p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-4); min-width: 0; }
.mapcard-foot .warn { color: var(--warn); font-weight: 600; }
.mapcard-foot .btn { flex: none; }


/* --- los diálogos de agendar y compartir -------------------------------------
   El mismo mecanismo que la caja de luz del afiche —`:target`, sin JavaScript—,
   pero con la caja abajo y no en el centro: en un teléfono el pulgar llega ahí,
   y en escritorio el `margin: auto` la devuelve al medio. */
.sheet {
  position: fixed; inset: 0; z-index: 60; display: none;
}
.sheet:target { display: block; }
.sheet-veil {
  position: absolute; inset: 0; background: rgba(42, 35, 32, .72);
  display: block; cursor: default;
}
.sheet-box {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 92vh; overflow-y: auto;
  padding: 22px var(--pad) 18px;
  background: var(--surface);
  border-top: 1px solid var(--line-cell);
  border-radius: var(--r) var(--r) 0 0;
}
.sheet-box h2 {
  font-family: var(--cond); font-weight: 700; font-size: 26px; color: var(--ink);
  margin: 0 0 6px;
}
.sheet-lede { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.sheet-lede small { font-size: 12.5px; color: var(--ink-4); }
.sheet-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.sheet-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-4); }
.sheet-note b { color: var(--ink-2); font-weight: 600; }
/* "Cancelar" es un enlace y no un botón porque eso es literalmente lo que hace:
   volver a la ficha sin el fragmento. Va al final y en gris — es la salida, no
   una opción más. */
.sheet-cancel {
  display: block; margin: 16px 0 0; padding: 10px 0;
  text-align: center; text-decoration: none;
  font: 500 14px/1 var(--sans); color: var(--ink-4);
  border-top: 1px solid var(--line-soft);
}
.sheet-cancel:hover { color: var(--ink-2); }

.copyrow { display: flex; gap: 8px; margin: 14px 0 0; align-items: stretch; }
.copyrow input {
  flex: 1; min-width: 0; padding: 9px 12px;
  font: 400 13px/1.2 var(--sans); color: var(--ink-3);
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--pill);
}
.copyrow .btn { flex: none; }
.copyrow .btn.ok { border-color: var(--ok); color: var(--ok); }
.btn-wide { display: block; width: 100%; text-align: center; margin-bottom: 4px; }

.qrbox { margin: 18px 0 0; text-align: center; }
.qrbox img {
  /* El reset pone `display: block` en las imágenes, así que centrarla es cosa
     del margen y no del `text-align` de la figura. */
  width: 160px; height: 160px; margin: 0 auto; border-radius: var(--r-sm);
  border: 1px solid var(--line-cell); background: #fff;
}
.qrbox figcaption { margin-top: 8px; font: 400 12.5px/1.4 var(--sans); color: var(--ink-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (min-width: 720px) {
  /* En escritorio la caja deja de ser una bandeja y vuelve al centro. */
  .sheet-box {
    top: 50%; bottom: auto; left: 50%; right: auto;
    transform: translate(-50%, -50%);
    width: min(460px, 92vw);
    border: 1px solid var(--line-cell); border-radius: var(--r);
  }
}