/* ============================================================================
   GENERADO por compone_comun.py -- NO EDITAR ESTE FICHERO.
   Fuente: plantillas-fuente/comun/base.css (común) + festivales/pagina.css (propio).
   Para cambiar algo: edita esos ficheros y ejecuta compone_comun.py
   (los generadores mbs-update-anuncios.py / mbs-update-bcn2.py ya lo ejecutan solos).
   ============================================================================ */

/* ===== comun/base.css ===== */

/* ============================================================================
   BASE COMÚN -- reglas compartidas por TODAS las páginas (/barcelona/, /anuncios/, futuras).
   [Creado 20/9/2026, a petición del usuario: unificar estilos] Extraído sin cambios de
   plantillas-fuente/bcn/style.css y plantillas-fuente/anuncios/style.css (las 145 reglas que eran
   idénticas en ambos ficheros, en el mismo orden). Copias de seguridad de los originales en
   plantillas-fuente/_backup_pre_comun/.
   Se compone con <pagina>/pagina.css mediante compone_estilos.py (base primero, página después).
   ============================================================================ */

:root {
  --font-sistema: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  --maroon: #6b1d2e;
  --maroon-dark: #4a1420;
  --gold: #c9a227;
  --cream: #faf6ee;
  --card-bg: #ffffff;
  --ink: #2a2321;
  --gray: #6b6058;
  --line: #e7ddd0;
  --taller: #5b3a8e;
  --regular: #1f6f7a;
  --particular: #b5651d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sistema);
  background: var(--cream);
  color: #2a2020;
  line-height: 1.5;
}

header.hoy-header {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  color: #fff;
  padding: 22px 20px;
  text-align: center;
}

header.hoy-header h1 { margin: 0 0 4px 0; font-family: var(--font-sistema); font-size: 1.5em; letter-spacing: 0.4px; font-weight: 700; }

header.hoy-header p { margin: 0; color: var(--gold); font-size: 0.85em; font-style: italic; }

/* [Cambiado 10/8/2026, a petición del usuario] El título y el subtítulo enlazan con
   https://agendadeltango.com/ (antes .../barcelona/) -- mismo color que el texto de siempre, sin
   subrayado salvo al pasar el ratón (igual criterio que el artefacto principal, ver
   render_escena_tango.py). */

header.hoy-header h1 a, header.hoy-header p a { color: inherit; text-decoration: none; }

header.hoy-header h1 a:hover, header.hoy-header p a:hover { text-decoration: underline; }

/* [Añadido 10/8/2026, a petición del usuario: logo de Agenda del Tango en la cabecera de todas
   las páginas] Mismo estilo que .site-logo en render_escena_tango.py (artefacto principal). */

.site-logo { vertical-align: middle; margin-right: 8px; border-radius: 50%; background: #fff; }

/* [Revertido 20/8/2026, a petición del usuario: "misma cabecera en todo"] El bloque `header {
   ... }` (sin clase) que hubo aquí desde el 10/8/2026 -- para cuando ficha.php usaba <header> a
   secas en vez de <header class="hoy-header"> -- ya no hace falta: ficha.php vuelve a usar
   header.hoy-header, igual que index.html, así que las reglas de arriba (header.hoy-header)
   bastan para las dos páginas. Se retira el bloque en vez de dejarlo como código muerto. */

.hoy-wrap { max-width: 560px; margin: 0 auto; padding: 20px 18px 40px; }

.hoy-day { min-height: unset; }

.hoy-nav { padding: 16px 14px 6px; text-align: center; border-top: 1px dashed #e0d5bd; margin-top: 4px; }

.hoy-progreso { display: block; font-size: 0.78rem; color: var(--gray); margin-bottom: 10px; }

.hoy-nav-row { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }

.hoy-siguiente, .hoy-anterior { border-radius: 24px; font-weight: 600; font-size: 0.92rem; font-family: var(--font-sistema); cursor: pointer; transition: background 0.15s, color 0.15s; padding: 11px 22px; }

.hoy-siguiente { background: var(--maroon); color: #fff; border: none; }

.hoy-siguiente:hover { background: var(--maroon-dark); }

.hoy-anterior { background: #fff; color: var(--maroon); border: 1px solid var(--maroon); }

.hoy-anterior:hover { background: #f5ece0; }

.hoy-fin { color: var(--gray); font-style: italic; font-size: 0.88rem; }

.hoy-swipe-hint { display: none; margin-top: 10px; font-size: 0.74rem; color: #a8988a; letter-spacing: 0.3px; }

/* [Añadido 23/7/2026] El hint de deslizar solo tiene sentido en pantallas táctiles/estrechas;
   la navegación por swipe en sí funciona igual en cualquier dispositivo con touch, se muestre
   o no el hint (ver app.js: touchstart/touchend sobre #hoy-app). */

@media (max-width: 640px), (pointer: coarse) {
  .hoy-swipe-hint { display: block; }
}

.day-col { background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(107,29,46,0.12); display: flex; flex-direction: column; overflow: hidden; touch-action: pan-y; }

.day-header { background: var(--maroon); color: #fff; padding: 16px 18px; position: relative; }

.day-header.hoy { background: var(--gold); color: var(--maroon-dark); }

.day-name { font-family: var(--font-sistema); font-weight: 700; font-size: 1.35em; text-transform: capitalize; }

.day-date { font-size: 0.88em; opacity: 0.85; letter-spacing: 0.3px; }

.hoy-badge { position: absolute; top: 8px; right: 10px; background: var(--maroon-dark); color: var(--gold); font-size: 0.7em; font-weight: bold; padding: 2px 8px; border-radius: 8px; }

.day-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; }

.empty { color: #a09080; font-style: italic; font-size: 0.85em; padding: 8px 0; }

.card { border: 1px solid #ecdfc9; border-left: 5px solid var(--maroon); border-radius: 8px; padding: 14px 16px; background: #fffdf9; font-size: 0.88em; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }

.card.practica { border-left-color: #7a8c6b; }

.card.concierto { border-left-color: #2f5c73; }

.card.festival { border-left-color: var(--gold); }

.card.clase-regular { border-left-color: var(--regular); }

.card.clase-taller { border-left-color: var(--taller); }

.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }

.type-badge { font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.6px; font-weight: bold; padding: 2px 8px; border-radius: 10px; background: var(--maroon); color: #fff; }

.type-badge.practica { background: #7a8c6b; }

.type-badge.concierto { background: #2f5c73; }

.type-badge.festival { background: var(--gold); color: var(--maroon-dark); }
.type-badge.jornada { background: #be185d; } /* [4/10/2026] actividad tipo «Jornada» */

.type-badge.clase-regular { background: var(--regular); }

.type-badge.clase-taller { background: var(--taller); }
.type-badge.cerrado { background: #dc2626; color: #fff; }
/* Etiquetas de milonga/edición (estilo A: pastilla de color) */
.et-wrap { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.et { font-size: .64rem; font-weight: 700; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; line-height: 1.5; white-space: nowrap; background: #f3f4f6; color: #4b5563; }
.et.aire { background: #dcfce7; color: #166534; }
.et.gratis { background: #fef3c7; color: #92400e; }
.et.gorra { background: #ffedd5; color: #9a3412; }
.et.alt { background: #ede9fe; color: #5b21b6; }

.hours { font-weight: bold; color: var(--maroon-dark); font-size: 0.92em; font-family: var(--font-sistema); }

.card-title { font-family: var(--font-sistema); font-weight: 700; font-size: 1.15em; margin-bottom: 5px; color: var(--maroon-dark); }

.tag-especial { font-size: 0.65em; font-weight: normal; font-style: italic; color: #8a7a5a; }

.card-subtitle { font-size: 0.84em; font-style: italic; color: #7a6b5a; margin: -2px 0 5px 0; }

.card-logo { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-right: 5px; border-radius: 50%; }

.card-flyer { display: block; width: 100%; max-height: 280px; object-fit: contain; background: #efe6d2; border-radius: 10px; margin: 8px 0; cursor: zoom-in; }

/* [Añadido 10/8/2026, a petición del usuario: botón "*"] Ficha compacta de la página
   "Actividad": tipo + nombre en la misma línea, imagen a todo el ancho SIN el límite de altura
   de .card-flyer normal. [Corregido 10/8/2026, a raíz de un fallo real reportado por el
   usuario: "el alto es muy grande dejando mucho espacio vacío"] `height: auto` es obligatorio:
   el <img> lleva los atributos HTML width/height reales del fichero (para evitar CLS) -- sin
   `height: auto`, el navegador aplica ese `height` como hint en píxeles literales (p. ej.
   1580px), y con `max-height: none` ya no queda acotado -- ver el comentario equivalente en
   render_escena_tango.py para el detalle completo. */

.card-flyer-full { max-height: none; height: auto; margin-top: 4px; cursor: default; }

.card-destacada-img .card-head { margin-bottom: 6px; }

.card-title-inline { font-weight: 700; font-family: var(--font-sistema); color: var(--maroon-dark); text-align: right; margin-left: 8px; }

.popup-box .card-flyer { max-height: 420px; }

.fc-clicable { cursor: pointer; border-radius: 8px; transition: box-shadow 0.15s, transform 0.1s; }

.fc-clicable:hover, .fc-clicable:focus { box-shadow: 0 2px 10px rgba(107, 29, 46, 0.25); outline: none; }

.fc-clicable:hover .card, .fc-clicable:focus .card { border-left-color: var(--gold); }

a.fc-clicable { display: block; text-decoration: none; color: inherit; }

.popup-overlay { display: none; position: fixed; inset: 0; background: rgba(42, 32, 32, 0.55); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }

.popup-overlay.active { display: flex; }

.popup-box { position: relative; background: var(--cream); border-radius: 14px; max-width: 420px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.3); }

.popup-box .card { font-size: 0.95em; }

.popup-label { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.5px; color: #8a7a5a; font-weight: bold; margin-bottom: 8px; }

.popup-close { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1.3em; line-height: 1; color: var(--maroon); cursor: pointer; padding: 2px 6px; }

.popup-close:hover { color: var(--maroon-dark); }

.img-lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(20, 12, 12, 0.88); z-index: 2000; align-items: center; justify-content: center; padding: 30px; }

.img-lightbox-overlay.active { display: flex; }

.img-lightbox-overlay img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }

.img-lightbox-close { position: fixed; top: 16px; right: 22px; background: none; border: none; color: #fff; font-size: 2em; line-height: 1; cursor: pointer; z-index: 2001; }

.img-lightbox-close:hover { color: var(--gold); }

.line { margin: 2px 0; line-height: 1.35; }

.line.espacio { color: #4a4030; }

/* [Añadido 20/8/2026, a petición del usuario: "la direccion en las fichas completas que sean
   clicables y que llame a google maps"] La dirección de .line.espacio pasa a ser un enlace
   (ver maps_link() en render_agenda_v3.py) que abre la búsqueda de Google Maps para ese texto.
   Mismo estilo que .tel (color granate, sin subrayado salvo al pasar el ratón) para que se
   reconozca igual como "esto es clicable". */

.line.espacio a, a.maps { color: var(--maroon); text-decoration: none; font-weight: 600; }

.line.espacio a:hover, a.maps:hover { text-decoration: underline; }

.tel a, a.tel { color: var(--maroon); text-decoration: none; font-weight: 600; }

.tel a:hover, a.tel:hover { text-decoration: underline; }

ul.timeline { list-style: none; margin: 6px 0 0 0; padding: 6px 0 0 0; border-top: 1px dashed #e0d5bd; }

ul.timeline li { font-size: 0.92em; margin: 3px 0; color: #4a4030; }

.t-time { display: inline-block; min-width: 42px; font-weight: bold; color: var(--maroon-dark); }

.t-badge { font-size: 0.68em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: #ded0b0; color: #4a3a1a; margin-right: 4px; }

.t-badge.milonga { background: var(--maroon); color: #fff; }

.t-badge.practica { background: #7a8c6b; color: #fff; }

.t-badge.show { background: #8a3a5c; color: #fff; }

.t-badge.clase { background: #3a6a4a; color: #fff; }

.t-badge.tdj, .t-badge.tdjr { background: #2f5c73; color: #fff; }

.t-badge.ropa, .t-badge.calzado, .t-badge.mercadillo { background: #a08840; color: #fff; }

footer.hoy-footer { text-align: center; padding: 16px; font-size: 0.78em; color: #7a6b5a; }

footer.hoy-footer a { color: var(--maroon); text-decoration: none; }

footer.hoy-footer a:hover { text-decoration: underline; }

/* [Añadido 9/8/2026, a petición del usuario] Pie de página legal -- Aviso Legal/Cookies/
   Privacidad -- en todas las páginas del paquete (index.html y ficha.php). Estilo sobrio y
   discreto (letra más pequeña y más apagada que el resto del pie), coherente con la paleta ya
   usada en footer.hoy-footer de arriba. */

footer.legal-footer {
  text-align: center;
  padding: 10px 16px 22px;
  font-size: 0.68em;
  color: #a89a89;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 4px;
}

footer.legal-footer a { color: #a89a89; text-decoration: none; }

footer.legal-footer a:hover { color: var(--maroon); text-decoration: underline; }

footer.legal-footer .legal-sep { padding: 0 6px; color: #cfc3b4; }

.hoy-cargando { text-align: center; color: var(--gray); font-style: italic; padding: 40px 0; }

/* Reglas de nivel de suscripcion (oro/plata/bronce) para tarjetas de milonga.
   Solo cambian intensidad de fondo y grosor del borde izquierdo -- sin ninguna
   insignia ni texto que indique el nivel. */

.card.nivel-bronce { border-left: 4px solid #b98a4a; background: #fffdf9; }

.card.nivel-plata { border-left: 6px solid #c9a227; background: linear-gradient(160deg, #fbf3d9 0%, #fffdf9 65%); }

.card.nivel-oro { border-left: 9px solid #ad841a; background: linear-gradient(160deg, #f3dfa0 0%, #fdf6e0 60%); }

/* [Añadido 28/7/2026, a petición del usuario] Mismo nivel de suscripción, pero para escuelas y
   clases particulares (que no comparten la clase CSS "card") -- mismo lenguaje visual que el
   artefacto principal, ver render_escena_tango.py. Hoy todas son 'bronce' por no tener
   suscripción de pago registrada. */

.school-card.nivel-bronce, .class-card.nivel-bronce { border-left: 4px solid #b98a4a; }

.school-card.nivel-plata, .class-card.nivel-plata { border-left: 6px solid #c9a227; background: linear-gradient(160deg, #fbf3d9 0%, #fffdf9 65%); }

.school-card.nivel-oro, .class-card.nivel-oro { border-left: 9px solid #ad841a; background: linear-gradient(160deg, #f3dfa0 0%, #fdf6e0 60%); }

/* [Añadido 28/7/2026, a petición del usuario] pestaña "Clases particulares" */

.hoy-tabs { max-width: 560px; margin: 0 auto; padding: 14px 18px 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* [Cambiado 29/7/2026] .hoy-tab-btn ahora se aplica tanto a <button> (Agenda) como a <a>
   (Escuelas/Clases Particulares, que navegan directo a la versión web) -- text-decoration: none
   evita el subrayado por defecto de los enlaces. */

.hoy-tab-btn { flex: 1; max-width: 220px; min-width: 96px; border: 1px solid var(--maroon); background: #fff; color: var(--maroon); border-radius: 24px; font-family: var(--font-sistema); font-weight: 600; font-size: 0.86rem; padding: 9px 14px; cursor: pointer; transition: background 0.15s, color 0.15s; text-decoration: none; text-align: center; }

.hoy-tab-btn:hover { background: #f5ece0; }

.hoy-tab-btn.active { background: var(--maroon); color: #fff; }

/* Fichas .class-card de "Clases particulares" -- mismo estilo que la pestaña homónima del
   artefacto principal (ver render_escena_tango.py), copiado tal cual para que ambos se vean
   igual. */

.particulares-list, .escuelas-list { display: flex; flex-direction: column; gap: 4px; }

.teacher-chip { display: inline-block; background: #f4ece0; color: var(--maroon-dark); border-radius: 999px; padding: 3px 12px; font-size: 0.78rem; margin: 3px 4px 0 0; font-weight: 600; }

.class-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }

.class-card .top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

.class-card h4 { margin: 0 0 4px; font-size: 1.02rem; color: var(--ink); }

.class-card .meta { font-size: 0.82rem; color: var(--gray); margin: 2px 0; }

.class-card .addr { font-size: 0.82rem; color: var(--ink); margin: 2px 0; }

.class-card .teachers { margin-top: 8px; }

.class-card-flyer { display: block; height: 180px; width: auto; max-width: 100%; object-fit: contain; background: #efe6d2; border-radius: 8px; margin: 8px auto; }

.tag { display: inline-block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 4px 10px; border-radius: 999px; color: #fff; white-space: nowrap; }

.tag.regular { background: var(--regular); }

.tag.taller { background: var(--taller); }

.tag.particular { background: var(--particular); }

/* [Añadido 28/7/2026, a petición del usuario] pestaña "Escuelas" -- .school-card no existía
   todavía en este paquete (solo en el artefacto principal); se copia tal cual desde
   render_escena_tango.py para que las fichas de escuela se vean igual en ambos sitios. */

.school-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }

.school-card h3 { margin: 0 0 6px; font-size: 1.12rem; color: var(--maroon-dark); }

.contact-row { font-size: 0.85rem; margin: 4px 0; color: var(--ink); display: flex; gap: 6px; align-items: baseline; }

.contact-row a { color: var(--maroon); text-decoration: none; }

.contact-row a:hover { text-decoration: underline; }

.contact-row .lbl { color: var(--gray); min-width: 64px; flex-shrink: 0; }

.contact-row.addr { font-weight: 500; }

/* Selector de día del widget "BCN" (carpeta 38) -- barra horizontal con un botón por cada día
   de la ventana, mismo lenguaje visual que .bcn-day-picker/.bcn-day-pick en
   render_escena_tango.py (artefacto principal, pestaña "BCN"), copiado tal cual para que se
   vean igual.
   [Cambiado 2/8/2026, a petición del usuario: "los botones... tienen que ser más pequeños para
   que se vean todos en la pantalla del movil" -- "opción B"] Mismo cambio que el artefacto
   principal: cada botón pasa de una línea a dos <span> apilados (día abreviado + número
   grande), botón más compacto, gap del contenedor de 8px a 5px. */

.bcn-day-picker { display: flex; gap: 5px; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 560px; margin: 0 auto; padding: 14px 12px 4px; }

.bcn-day-pick { flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--maroon); background: #fff; color: var(--maroon); font-family: var(--font-sistema); padding: 5px 9px; cursor: pointer; transition: background 0.15s, color 0.15s; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }

.bcn-day-pick .wd { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }

.bcn-day-pick .num { font-size: 0.92rem; font-weight: 700; font-family: var(--font-sistema); }

.bcn-day-pick:hover { background: #f5ece0; }

.bcn-day-pick.active { background: var(--maroon); color: #fff; border-color: var(--maroon); }

/* Cabecera de la página especial "+" (ver app.js, headerHtml()): mismo estilo base que
   .day-header, sin .day-date ni .hoy-badge (no aplica -- no es un día real). */

.day-header.bcn-extra-header { text-align: center; }

/* Pastilla de fecha dentro de cada ficha de la página "+" (ver render_escena_tango.py,
   _inyectar_fecha_card(), reutilizada por generar_wordpress_bcn.py) -- los eventos de esa
   página vienen de fechas distintas, a diferencia de un día normal donde la fecha común ya la
   da la cabecera del día. */

.card-date { font-weight: 600; color: var(--gray); font-size: 0.78em; }

.bcn-send-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 14px 16px 0; }

/* [Ampliado 20/8/2026, a petición del usuario: nuevo botón "Agenda Clásica"] .bcn-send-btn
   pasa a usarse también en un <a> (enlace normal, no solo en el <button> que abre el modal de
   enviar) -- se añade text-decoration: none explícito para que no salga subrayado por defecto
   como cualquier enlace. */

.bcn-send-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--maroon); color: var(--maroon); border-radius: 20px; padding: 7px 16px; font-family: var(--font-sistema); font-weight: 600; font-size: 0.78rem; cursor: pointer; text-decoration: none; transition: background 0.15s, color 0.15s; }

.bcn-send-btn:hover { background: #f5ece0; }

/* [Añadido 19/8/2026, a petición del usuario] Aviso de cookies de /bcn/ (Consent Mode) --
   barra fija al pie, mismo lenguaje visual (colores/tipografía/radios) que el resto de
   botones del paquete (.hoy-siguiente, .bcn-send-btn), ver index.html/ficha.php. */

.bcn-cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; background: var(--cream); border-top: 1px solid rgba(0,0,0,0.08); box-shadow: 0 -4px 18px rgba(0,0,0,0.12); padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }

.bcn-cookie-banner[hidden] { display: none; }

.bcn-cookie-banner p { margin: 0; font-size: 0.82rem; color: var(--ink); max-width: 640px; text-align: center; line-height: 1.4; }

.bcn-cookie-banner a { color: var(--maroon); text-decoration: underline; }

.bcn-cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }

.bcn-cookie-btn { border-radius: 20px; padding: 8px 18px; font-family: var(--font-sistema); font-weight: 600; font-size: 0.82rem; cursor: pointer; transition: background 0.15s, color 0.15s; border: 1px solid var(--maroon); }

.bcn-cookie-accept { background: var(--maroon); color: #fff; }

.bcn-cookie-accept:hover { background: var(--maroon-dark); }

.bcn-cookie-reject { background: #fff; color: var(--maroon); }

.bcn-cookie-reject:hover { background: #f5ece0; }

@media (max-width: 480px) {
  .bcn-cookie-banner { flex-direction: column; }
}


/* [Añadido 27/9/2026, a petición del usuario] Ficha COMPLETA de un evento: antes en el <style> de
   bcn/ficha.php; ahora común porque la usa también la ficha de edición de /milongas/
   (misma ficha en ambas secciones -- los colores los pone cada sección). */
.ficha-wrap { max-width: 560px; margin: 0 auto; padding: 20px 18px 40px; }
.ficha-volver { display: inline-block; margin-bottom: 16px; color: var(--maroon); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.ficha-volver:hover { text-decoration: underline; }
.ficha-dia-label { font-size: 0.85em; color: var(--gray); margin-bottom: 10px; text-transform: capitalize; }
.ficha-compartir { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.08); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compartir-label { font-size: 0.85em; color: var(--gray); }
.compartir-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 0.85em; font-weight: 600; text-decoration: none; border: 1px solid rgba(0,0,0,0.15); cursor: pointer; background: #fff; color: inherit; }
.compartir-btn:hover { background: rgba(0,0,0,0.05); }
.compartir-whatsapp { border-color: #25D366; color: #128C3E; }
.ficha-actualizar { margin-top: 10px; }
.compartir-comentario { border-color: var(--maroon); color: var(--maroon); }

/* [Añadido 3/10/2026, a petición del usuario] Etiquetas de ciudad/provincia al final de la ficha
   resumida (ediciones de milonga en /barcelona/ y /milongas/, y tarjetas del índice de /milongas/).
   Una sola si ciudad y provincia coinciden. Color por sección en secciones.css. */
.lugar-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.lugar-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3px; color: var(--gray, #666); background: var(--cream, #faf7f2); border: 1px solid var(--line, #e5e0d8); border-radius: 999px; padding: 1px 9px; }

/* [Añadido 4/10/2026, v36_25_353, a petición del usuario: texto descriptivo como en los anuncios]
   Texto descriptivo (descripcion_web) en las fichas de milonga, festival y sus ediciones. */
.ficha-descripcion { margin: 14px 0 6px; line-height: 1.6; }
.ficha-descripcion p { margin: 0 0 0.6em; }
.card .line.descripcion { line-height: 1.5; margin: 6px 0 8px; }


/* ===== festivales/pagina.css ===== */

/* CSS PROPIO de /festivales/ -- [Creado 1/10/2026] Parte de milongas/pagina.css (mismo directorio de fichas; los colores los pone comun/secciones.css con data-seccion="festivales", verde salvia) + calendario mensual al final. */
/* ============================================================================
   CSS PROPIO de /milongas/ (directorio de milongas) -- solo lo que NO comparte
   con las demás páginas. [Creado 22/9/2026, a petición del usuario: "generar
   las milongas de catalunya para ver como queda" -- unificación con el estilo
   de /barcelona//anuncios/ (comun/base.css + comun/tema.css), en vez del
   style.css propio y aislado que tenía desde el 20/8/2026 (Playfair Display +
   Montserrat vía Google Fonts).] Body/header/footer/cookie-banner/site-logo
   son IDÉNTICOS a comun/base.css (misma clase, mismos valores) -- no se
   repiten aquí. Se aplica DESPUÉS de comun/base.css (ver compone_comun.py).

   [Reescrito 22/9/2026, a petición del usuario: "usar el mismo formato que
   Barcelona" en la ficha y en el listado de tarjetas, y "dale un color
   diferente al de Barcelona, las intensidades han de ser las mismas pero el
   color diferente, prueba con rojizos"] Ambas peticiones se resuelven juntas:
   la ficha y las tarjetas del índice pasan a usar las clases COMPARTIDAS de
   comun/base.css que ya usa Barcelona (.card/.card-head/.type-badge/.hours/
   .card-title/.line/.fc-clicable, ver build_milongas.py) -- pero esas clases,
   una vez compuestas con comun/tema.css (que se aplica DESPUÉS de este
   fichero y gana siempre que declara la MISMA propiedad), quedan repintadas
   en azul marino casi negro + ámbar con valores hex directos (no variables:
   p.ej. tema.css tiene ".card-title{color:#111827}", no ".card-title{color:
   var(--maroon-dark)}") -- ese es el aspecto de Barcelona/anuncios, no el que
   pide esta página. Para tener la MISMA forma pero un color distinto, este
   fichero ya NO reutiliza var(--maroon)/var(--gold) (que tema.css also
   redefine y gana) sino variables PROPIAS de esta plantilla (--ml-*, ver
   :root más abajo) y sobreescribe las reglas de tema.css con selectores más
   específicos ("main .card.milonga ...", ver el bloque dedicado al final) --
   mismo peso visual (mismo rol de "color de marca oscuro sobre fondo claro"),
   pero en tonos rojizos/burdeos en vez de azul marino/ámbar. Es una PRUEBA,
   tal como la pidió el usuario -- no un color definitivo.

   [Renombrado 22/9/2026, a petición del usuario: "generaliza build_bailongo.
   py, pero en lugar de bailongo utiliza siempre milongas"] Esta carpeta era
   plantillas-fuente/bailongo/ -- pasa a plantillas-fuente/milongas/, y todas
   las clases .bailongo-* de este fichero pasan a .milongas-* (ver más abajo,
   sección "Índice / directorio"). Se añaden además los estilos de la fila de
   chips de comunidad (.milongas-chips-comunidad), nueva en esta misma
   generalización -- ver render_indice()/pagina.js.
   ============================================================================ */

/* [Añadido 22/9/2026] Paleta propia de /milongas/, con el mismo peso/función que
   --maroon/--maroon-dark/--gold de comun/base.css pero en tonos rojizos -- de
   hecho, muy cerca del --maroon/--gold que tenía esta misma plantilla ANTES de
   unificarse con comun/tema.css (ver bailongo/style.css, ya retirado: #6b1d2e/
   #c9a227). --ml-day-bg/--ml-day-ink sustituyen los #dcebf8/#0b3558 (azul,
   "opción S" de Barcelona) copiados el 22/9/2026 para el fondo del encabezado
   de cada grupo de día -- misma claridad de fondo y mismo contraste de texto,
   solo que en rojo. Nombres propios (--ml-...) para que tema.css, que no
   declara ESTAS variables, no pueda pisarlas -- a diferencia de --maroon/
   --gold, que sí redefine. */
:root {
  --ml-maroon: #7a1f2b;
  --ml-maroon-dark: #4a0f18;
  --ml-accent: #c23616;
  --ml-day-bg: #f7dede;
  --ml-day-ink: #5c1018;
}

.breadcrumb { max-width: 720px; margin: 0 auto; padding: 12px 18px 0; font-size: 0.8rem; color: var(--gray); }
.breadcrumb a { color: var(--ml-maroon); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { padding: 0 5px; color: var(--line); }

main { max-width: 720px; margin: 0 auto; padding: 14px 18px 40px; }

/* ---- Ficha completa de una milonga ---- */

.milonga-hero { padding: 6px 0 4px; }
.milonga-hero h1 { font-family: var(--font-sistema); font-weight: 700; font-size: 1.7em; color: var(--ml-maroon-dark); margin: 0 0 6px; letter-spacing: -0.02em; }
.milonga-when { font-family: var(--font-sistema); font-weight: 700; color: var(--ml-maroon); font-size: 1.05em; text-transform: capitalize; }
/* [Añadido 22/9/2026] Foto principal de una milonga SIN ediciones propias (Aragón/Castilla y
   León, ver imagenes_milongas/ e _cargar_imagenes_disco_por_milonga() en build_milongas.py) --
   portada única de la ficha, a diferencia del flyer por edición (img.edicion-flyer) que sigue
   usando Catalunya. */
img.milonga-imagen-principal { display: block; max-width: 100%; height: auto; border-radius: 14px; margin: 10px 0; border: 1px solid var(--line); }
@media (min-width: 600px) {
  img.milonga-imagen-principal { max-width: 420px; }
}
/* [Añadido 22/9/2026] Insignia de provincia, en la ficha completa junto al resto de datos --
   ver espacios.provincia_id/tabla `provincias` (repositorio v36_25_299). Sirve para orientar en
   qué provincia está cada milonga ahora que el directorio se prepara para cubrir más de una
   comunidad autónoma en el futuro. */
.milonga-provincia { font-size: 0.72em; letter-spacing: 0.3px; font-weight: 600; padding: 3px 11px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--gray); display: inline-block; margin: 8px 0 0; }

/* [Añadido 22/9/2026] Chip de organizador/TDJ residente -- se mantiene, no tiene equivalente
   compartido en comun/base.css (Barcelona no agrupa personas por milonga, solo las nombra en una
   línea de texto, ver .line "Organiza:"/"TDJ:" en la tarjeta compacta). */
.teacher-chip { display: inline-block; background: var(--cream); color: var(--ml-maroon-dark); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 0.8rem; margin: 3px 6px 0 0; font-weight: 600; }

section.milonga-section { margin: 22px 0; }
section.milonga-section h2 { font-family: var(--font-sistema); color: var(--ml-maroon-dark); font-size: 1.15em; margin: 0 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }

ul.edicion-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.edicion-item { border: 1px solid var(--line); border-left: 4px solid var(--ml-maroon); border-radius: 12px; padding: 10px 14px; background: var(--card-bg); }
.edicion-fecha { font-weight: 700; color: var(--ml-maroon-dark); font-family: var(--font-sistema); }
.edicion-badge { font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.4px; font-weight: bold; padding: 1px 8px; border-radius: 8px; background: var(--ml-accent); color: #fff; margin-left: 8px; }
.edicion-detalle { font-size: 0.86rem; color: var(--gray); margin-top: 2px; }
.edicion-notas { font-size: 0.86rem; color: var(--ink); margin-top: 4px; }

.edicion-item.cancelada { border-left-color: var(--gray); background: var(--cream); opacity: 0.8; }
.edicion-item.cancelada .edicion-fecha { text-decoration: line-through; color: var(--gray); }
.edicion-badge.cancelada { background: var(--gray); color: #fff; }

ul.edicion-programacion { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px dashed var(--line); }
ul.edicion-programacion li { font-size: 0.84rem; color: var(--ink); padding: 4px 0 0; }
.edicion-programacion .prog-hora { font-weight: 700; color: var(--ml-maroon); margin-right: 4px; }

/* [Cambiado 22/9/2026] La imagen de una edición vive ahora en imagenes/ dentro de la carpeta de
   la milonga (antes, suelta junto al index.html) -- ver build_milongas.py/extraer_imagenes_a_
   archivos_local() e imagenes/principal.json. Solo cambia la ruta que genera el script; esta
   regla de estilo no cambia. */
img.edicion-flyer { display: block; max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px; border: 1px solid var(--line); }
@media (min-width: 600px) {
  img.edicion-flyer { max-width: 420px; }
}

.volver-indice { display: inline-block; margin-top: 8px; color: var(--ml-maroon); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.volver-indice:hover { text-decoration: underline; }

/* ---- Índice / directorio (ficha resumida = a.milonga-card > .card.milonga) ---- */

.milongas-titulo { font-family: var(--font-sistema); color: var(--ml-maroon-dark); margin: 6px 0 0; font-size: 1.4em; font-weight: 700; letter-spacing: -0.02em; }
.milongas-intro { font-size: 0.95rem; color: var(--ink); line-height: 1.6; margin: 8px 0 18px; }

/* [Añadido 22/9/2026, a petición del usuario: "se debería poder buscar por nombre de la milonga
   y por otros conceptos" + filtro por provincia, primer eje de clasificación disponible aparte
   del día -- ver pagina.js] Buscador de texto libre (nombre/ciudad/provincia/organización, ver
   data-search en cada tarjeta) + chips de provincia (data-provincia). Ambos son mejora
   progresiva: sin JavaScript el índice se ve entero, igual que antes.
   [Añadido 22/9/2026, generalización multi-comunidad] Segunda fila de chips, por comunidad
   (data-comunidad) -- .milongas-chips-comunidad reutiliza el mismo .milongas-chip, solo con un
   pelín más de separación superior para no pegarse a la fila de provincia; solo se genera en el
   HTML cuando hay más de una comunidad en el lote (ver render_indice()). */
.milongas-buscador { margin: 4px 0 18px; }
/* [Añadido 22/9/2026, a petición del usuario: botón propio de borrar búsqueda -- ver pagina.js]
   .milongas-search-wrap solo posiciona el botón "x" encima del input; el input reserva sitio a
   la derecha (padding-right) para que el texto nunca quede debajo del botón. */
.milongas-search-wrap { position: relative; }
.milongas-search-input { width: 100%; box-sizing: border-box; font-family: var(--font-sistema); font-size: 0.95rem; padding: 11px 40px 11px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-bg); color: var(--ink); }
.milongas-search-input:focus { outline: 2px solid var(--ml-maroon); outline-offset: 1px; }
/* Se oculta el aspa NATIVA de Chrome/Edge (type="search") -- inconsistente entre navegadores de
   escritorio (Firefox no la implementa en absoluto) -- para no duplicarla con el botón propio de
   abajo, que se ve igual en cualquier navegador y también en móvil. */
.milongas-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.milongas-search-clear {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent;
  color: var(--gray); font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.milongas-search-clear[hidden] { display: none; }
.milongas-search-clear:hover { background: var(--cream); color: var(--ml-maroon); }
/* [Compactado 25/9/2026, a petición del usuario: "que las etiquetas de comunidad y provincia sean
   más compactas para que no ocupen tanto, sobre todo en los móviles"] Antes: gap 8px, padding
   6px 14px, 0.82rem, fila de comunidad a 14px de la de provincia -- con 17 comunidades + ~40
   provincias, en móvil las dos filas ocupaban varias pantallas antes de llegar a la primera milonga.
   Ahora: escritorio con chips más pequeños (sigue en varias líneas, flex-wrap); en móvil (<600px)
   cada fila es UNA sola línea con desplazamiento horizontal (sin barra visible, difuminado en el
   borde derecho como pista de que hay más). pagina.js desplaza el chip activo a la vista al
   pulsarlo o al aplicar un filtro desde el hash de la URL. */
.milongas-chips { display: flex; gap: 3px 5px; flex-wrap: wrap; margin: 8px 0 0; }
.milongas-chips-comunidad { margin-top: 0; }
.milongas-chip { font-family: var(--font-sistema); font-size: 0.76rem; font-weight: 600; line-height: 1.25; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-bg); color: var(--gray); cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
/* [Cambiado 25/9/2026] Las dos filas (comunidades y, cuando se muestra, provincias) se parten en
   varias líneas también en móvil -- se retira el desplazamiento lateral de una sola línea que se
   había probado ese mismo día. El buscador va ahora DEBAJO de las filas de chips. */
.milongas-chips-provincia[hidden] { display: none; }
.milongas-buscador .milongas-search-wrap { margin-top: 10px; }
@media (max-width: 599px) {
  .milongas-buscador { margin-bottom: 12px; }
  .milongas-chips { gap: 3px 4px; margin-top: 6px; }
  .milongas-chips-comunidad { margin-top: 0; }
  .milongas-chip { font-size: 0.74rem; padding: 3px 9px; }
}
}
.milongas-chip:hover { border-color: var(--ml-maroon); color: var(--ml-maroon); }
.milongas-chip.active { background: var(--ml-maroon); border-color: var(--ml-maroon); color: #fff; }
/* [Añadido 22/9/2026, a petición del usuario: "cuando se pulse una comunidad deben salir solo
   sus provincias que tienen milongas"] pagina.js oculta con el atributo `hidden` los chips de
   provincia sin milongas en la comunidad activa -- se declara aquí de forma explícita (aunque el
   navegador ya lo hace por defecto) para que no dependa de que ninguna otra regla de esta hoja
   llegue a fijar `display` en `.milongas-chip` más adelante. */
.milongas-chip[hidden] { display: none; }
.milongas-empty { display: none; color: var(--gray); font-style: italic; padding: 20px 0; }
.milongas-empty.visible { display: block; }

/* [Cambiado 25/9/2026, a petición del usuario: "este listado de la ficha resumen de las milongas
   debe ser a una sola columna, no a dos como ahora"] Antes: repeat(auto-fill, minmax(240px, 1fr)). */
.index-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.milonga-card .provincia-tag { display: inline-block; margin-top: 8px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3px; color: var(--gray); background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
/* [Añadido 22/9/2026, a petición del usuario: "en el listado de milongas, incorpora la imagen si
   la tienen tipo la página barcelona"]
   [Corregido 23/9/2026, a petición del usuario: "la ficha resumen que sale en el listado, saca la
   imagen pero se desborda, debe sacar el formato de las fichas resumen de barcelona en el que las
   imagenes salen bien"] La primera versión usaba `height` fija + `object-fit: cover`, que RECORTA
   la imagen para rellenar esa altura -- con flyers en vertical (la mayoría) eso cortaba texto por
   arriba/abajo y se veía roto. Barcelona nunca recorta: `.card-flyer` (comun/base.css) usa
   `max-height` + `object-fit: contain`, que reduce la imagen entera sin recortarla y dej a espacio
   de sobra (fondo `--cream`) en el lado que le sobre. Se replica exactamente ese criterio aquí en
   vez de reutilizar la clase compartida `.card-flyer` tal cual, porque esa lleva `cursor: zoom-in`
   pensado para el visor de imagen a pantalla completa de comun.js (#img-lightbox-overlay), que
   esta página no genera todavía -- mismo comportamiento de encaje, sin ese cursor que no llevaría
   a ningún sitio. */
.milonga-card-imagen { display: block; width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px; margin: 8px 0; background: var(--cream); }

.index-dia-group { margin: 22px 0 10px; }
/* [Cambiado 22/9/2026, a petición del usuario: antes "mismo fondo que en barcelona opción 'S'"
   (#dcebf8/#0b3558, azul); ahora recolorado a rojizo (--ml-day-bg/--ml-day-ink) junto con el
   resto de la página -- mismo fondo/contraste, mismo radio/padding, solo cambia el tono. */
.index-dia-group h2 { font-family: var(--font-sistema); background: var(--ml-day-bg); color: var(--ml-day-ink); font-size: 1.15em; font-weight: 700; text-transform: capitalize; padding: 10px 18px; border-radius: 16px; margin: 0 0 12px; }

/* ============================================================================
   RECOLOREADO de las clases COMPARTIDAS de comun/base.css/comun/tema.css
   (.card.milonga, .card-head, .type-badge, .hours, .card-title, .line,
   .fc-clicable) -- [Añadido 22/9/2026, a petición del usuario: "usa el mismo
   formato de Barcelona" + "un color diferente... prueba con rojizos"].

   build_milongas.py ahora genera, tanto en la tarjeta del índice como en el
   bloque de datos de la ficha, la MISMA estructura que una tarjeta de evento
   de Barcelona (ver render_milonga_card() en render_agenda_v3.py / el HTML
   real de bcn-data.json): <div class="card milonga"> con <div class="card-
   head"><span class="type-badge milonga">Milonga</span><span class="hours">
   ...</span></div>, <div class="card-title">, y filas <div class="line">/
   <div class="line espacio">. Esas clases YA existen en comun/base.css (las
   usan Barcelona y Anuncios) -- no hace falta redefinir su forma, solo su
   COLOR aquí, porque comun/tema.css (que se compone DESPUÉS de este fichero
   y gana en la cascada) las repinta con hex directos en azul marino/ámbar
   (p.ej. ".card-title{color:#111827}", ".type-badge::before{background:
   #be123c}"), no con var(--maroon)/var(--gold) -- por eso NO basta con
   declarar --ml-maroon/etc. arriba: hay que sobreescribir esas reglas de
   tema.css con selectores de MÁS especificidad. Se usa el prefijo "main "
   (esta página entera es de milongas, así que no hace falta un selector más
   fino) + la propia combinación de clases ".card.milonga" que ya lleva cada
   tarjeta -- esto da más peso (main + 2 clases) que las reglas de tema.css
   que se quieren pisar (como mucho 2-3 clases, sin elemento), así que gana
   siempre, sin depender del orden de composición de compone_comun.py.
   ============================================================================ */

main .card.milonga,
main a.fc-clicable:hover .card.milonga,
main a.fc-clicable:focus .card.milonga {
  border-left-color: var(--ml-maroon);
  background: var(--card-bg);
  border-color: var(--line);
}
main a.fc-clicable:hover .card.milonga { border-left-color: var(--ml-accent); }
main .card.milonga .card-title { color: var(--ml-maroon-dark); }
main a.fc-clicable:hover .card-title,
main a.fc-clicable:focus .card-title { color: var(--ml-accent); }
main .card.milonga .card-head { }
main .card.milonga .type-badge { background: var(--ml-maroon); color: #fff; }
main .card.milonga .type-badge::before { background: var(--ml-accent); }
main .card.milonga .hours { color: var(--ml-maroon-dark); }
main .card.milonga .line { color: var(--gray); }
main .card.milonga .line b { color: var(--ink); }
main .card.milonga .line.espacio a,
main .card.milonga a.maps,
main .card.milonga .tel a,
main .card.milonga a.tel { color: var(--ml-maroon); }
main .card.milonga .line.espacio a:hover,
main .card.milonga a.maps:hover,
main .card.milonga .tel a:hover,
main .card.milonga a.tel:hover { text-decoration: underline; }

/* La ficha completa (.milonga-info-card) es la misma ".card.milonga" pero sin card-head/
   card-title -- el nombre ya va en el <h1> de página (.milonga-hero), no repetido dentro de la
   tarjeta -- así que solo necesita las reglas de color de arriba (.line/.line.espacio/.tel), sin
   reglas propias adicionales. */


/* ============================================================================
   [Añadido 25/9/2026, a petición del usuario: ficha resumen y ediciones de la ficha completa
   con el formato de la ficha resumen de Barcelona] Las tarjetas usan ya las clases de
   Barcelona (comun/base.css + tema.css): .card-flyer, .et-wrap, .card-date, .card-subtitle,
   .tag-especial, .type-badge.practica/.cerrado, ul.timeline. Aquí solo lo propio de /milongas/:
   ============================================================================ */
/* Esta página no tiene visor de imagen a pantalla completa: sin cursor de lupa sobre el flyer
   (dentro de una tarjeta-enlace, el cursor es la mano del enlace). */
main .card-flyer { cursor: inherit; }
/* El recoloreado "main .card.milonga .type-badge" de arriba pisaría el rojo de "Cerrado"/
   "Cancelada" y el punto verde de "Práctica": se restauran con más especificidad. */
main .card.milonga .type-badge.cerrado[class] { background: #dc2626; color: #fff; }
main .card.milonga .type-badge.cerrado::before { background: #fff; }
main .card.milonga .type-badge.practica::before { background: #65a30d; }
/* Etiqueta Milonga/Práctica sobre el nombre en la ficha completa. */
.milonga-tipo { margin: 0 0 6px; }
main .milonga-tipo .type-badge[class] { background: var(--ml-maroon); color: #fff; }
main .milonga-tipo .type-badge::before { background: var(--ml-accent); }
main .milonga-tipo .type-badge.practica::before { background: #65a30d; }
/* Ediciones de la ficha completa: tarjetas de Barcelona apiladas. */
div.edicion-list { display: flex; flex-direction: column; gap: 12px; }
main .card.milonga.edicion-card.cancelada { opacity: 0.75; background: var(--cream); }
main .edicion-card.cancelada .card-title { text-decoration: line-through; color: var(--gray); }


/* ============================================================================
   [Añadido 25/9/2026, a petición del usuario] PALETA "TEJA" propia de /milongas/:
     rojo teja #934B40 · fondo suave #F7EEEB · fondo general #FAF8F4 · tarjetas #FFFFFF ·
     texto principal #252525 · texto en cabeceras y botones de color #FFFFFF.
   Añadidos no pedidos (aprobados con la prueba): hover teja oscuro #7A3B32 y borde suave #EADBD6.
   Probado en 99 - Temporal/pruebas-estilo/milongas_paleta_teja*.{png,css} sobre milonga_V21.
   IMPORTANTE: comun/tema.css se compone DESPUÉS de este fichero, así que cada regla que choca con
   tema.css lleva un prefijo "html" (o html:root) para ganar por especificidad, no por orden.
   Volver atrás: _backup_pre_teja_20260925/pagina.css (o borrar este bloque) y recomponer.
   ============================================================================ */
/* [28/9/2026, a petición del usuario] Paleta teja limitada a html[data-seccion="milongas"] (antes "html"/"main"):
   así la ficha de edición puede mostrarse con los colores de Barcelona (data-seccion="barcelona") cuando
   se llega desde /barcelona/ -- ver _script_seccion_origen() en build_milongas.py. */
html[data-seccion="milongas"] {
  --ml-maroon: #934B40;       /* rojo teja */
  --ml-maroon-dark: #252525;  /* títulos de tarjeta = texto principal */
  --ml-accent: #7A3B32;       /* teja oscurecido (hover) */
  --ml-day-bg: #934B40;       /* cabecera de día en teja... */
  --ml-day-ink: #FFFFFF;      /* ...con texto blanco */
  --cream: #F7EEEB;           /* fondo suave */
  --card-bg: #FFFFFF;
  --ink: #252525;
  --line: #EADBD6;
}
html[data-seccion="milongas"] body { background: #FAF8F4; color: #252525; }
html[data-seccion="milongas"] header.hoy-header { background: transparent; color: #252525; }
html[data-seccion="milongas"] .milonga-hero h1, html[data-seccion="milongas"] .milongas-titulo { color: #934B40; }
html[data-seccion="milongas"] main .card.milonga { background: #FFFFFF; }
html[data-seccion="milongas"] main a.fc-clicable:hover .card.milonga[class] { border-color: #934B40; }
html[data-seccion="milongas"] main .card.milonga .card-title { color: #252525; }
html[data-seccion="milongas"] main .card.milonga .hours { color: #934B40; }
html[data-seccion="milongas"] main .card.milonga .line b { color: #252525; }
html[data-seccion="milongas"] main .card.milonga .type-badge::before, html[data-seccion="milongas"] main .milonga-tipo .type-badge::before { background: #F7EEEB; }
html[data-seccion="milongas"] .index-dia-group h2 { background: #934B40; color: #FFFFFF; }
html[data-seccion="milongas"] .bcn-send-btn { background: #934B40; color: #FFFFFF; }
html[data-seccion="milongas"] .bcn-send-btn:hover { background: #7A3B32; }
html[data-seccion="milongas"] .bcn-send-btn svg { color: #F7EEEB; }
html[data-seccion="milongas"] .milongas-chip { background: #F7EEEB; border-color: #EADBD6; color: #934B40; }
html[data-seccion="milongas"] .milongas-chip:hover { border-color: #934B40; color: #7A3B32; }
html[data-seccion="milongas"] .milongas-chip.active { background: #934B40; border-color: #934B40; color: #FFFFFF; }
html[data-seccion="milongas"] .milongas-search-input { background: #FFFFFF; border-color: #EADBD6; color: #252525; }
html[data-seccion="milongas"] .milongas-search-input:focus { outline-color: #934B40; }
html[data-seccion="milongas"] .teacher-chip, html[data-seccion="milongas"] .milonga-provincia, html[data-seccion="milongas"] .milonga-card .provincia-tag { background: #F7EEEB; color: #934B40; border-color: #EADBD6; }
html[data-seccion="milongas"] .edicion-item { background: #FFFFFF; border-left-color: #934B40; }
html[data-seccion="milongas"] .hoy-siguiente { background: #934B40; color: #FFFFFF; }
html[data-seccion="milongas"] .hoy-siguiente:hover { background: #7A3B32; }
html[data-seccion="milongas"] .bcn-cookie-accept { background: #934B40; border-color: #934B40; color: #FFFFFF; }
html[data-seccion="milongas"] .bcn-cookie-accept:hover { background: #7A3B32; }

/* [Añadido 27/9/2026] Enlace "Ver ficha de la edición" bajo cada ficha resumida de edición
   (los estilos de Compartir/Comentarios y de la ficha completa están en comun/base.css). */
main .edicion-card .edicion-ver-ficha, main .edicion-resumen .edicion-ver-ficha { display: inline-block; margin-top: 8px; font-size: 0.85em; font-weight: 600; color: var(--s-acento, var(--maroon)); text-decoration: none; }
main .edicion-ver-ficha:hover { text-decoration: underline; }
main .edicion-resumen[data-href] { cursor: pointer; }

/* ===== [1/10/2026] Festivales: cuándo, enlaces y calendario mensual ===== */
/* [11/10/2026, a petición del usuario] pastillas «Calendario mensual» / «Lista de festivales» centradas */
.festivales-acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 6px 0 4px; }
.festivales-acciones a { display: inline-block; background: var(--s-acento, var(--ml-maroon)); color: #fff; text-decoration: none; font-weight: 700; font-size: .8rem; padding: 7px 14px; border-radius: 999px; }
.festivales-acciones a:hover { background: var(--s-acento-osc, var(--ml-accent)); }
.festival-lugar { color: var(--gray); font-size: .92rem; margin-top: 4px; }
.aviso-celebrada { background: var(--s-suave, #eee); border: 1px solid var(--line); color: var(--s-acento, #333); border-radius: 10px; padding: 10px 14px; margin: 10px 0 14px; font-weight: 600; }
.aviso-celebrada a { color: inherit; }
.info-lineas p { margin: 4px 0; font-size: .92rem; }
.info-lineas a { color: var(--s-acento, var(--ml-maroon)); }
ul.ediciones-anteriores { list-style: none; padding: 0; margin: 0; }
ul.ediciones-anteriores li { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
ul.ediciones-anteriores a { color: var(--s-acento, var(--ml-maroon)); text-decoration: none; font-weight: 600; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; }
.cal-nav button { background: var(--s-acento, #555); color: #fff; border: none; border-radius: 999px; padding: 7px 14px; font-weight: 700; cursor: pointer; }
.cal-nav button:disabled { opacity: .35; cursor: default; }
.cal-mes { margin: 0 0 26px; }
.cal-mes h2 { background: var(--s-acento, #555); color: #fff; border-radius: 14px; padding: 9px 16px; font-size: 1.1em; margin: 0 0 8px; }
/* [1/10/2026] Calendario como rejilla: una fila .cal-semana por semana; las celdas .cal-dia ocupan todas las
   filas de la semana (fondo y número) y cada edición es una barra .cal-ev que abarca sus días (grid-column) en
   su carril (grid-row). */
.cal { width: 100%; }
.cal-cab { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cab div { font-size: .7rem; text-transform: uppercase; color: var(--gray); text-align: center; padding: 4px 0; font-weight: 700; }
.cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 22px repeat(var(--carriles, 1), 30px); row-gap: 3px; padding-bottom: 6px; min-height: 70px; position: relative; }
.cal-dia { grid-row: 1 / -1; border: 1px solid var(--line); margin: 0 -1px -1px 0; background: #fff; }
.cal-dia.vacio { background: transparent; border-color: transparent; }
.cal-dia.otro-mes { background: #F4F5F3; }   /* [2/10/2026] días del mes anterior/siguiente en semanas completas */
.cal-dia.otro-mes .dia { color: #B5BBB6; font-weight: 400; }
.cal-dia.hoy { box-shadow: inset 0 0 0 2px var(--s-acento, #555); }
.cal-dia .dia { display: block; font-size: .78rem; font-weight: 700; color: var(--gray); padding: 3px 5px; }
a.cal-ev { position: relative; z-index: 1; display: flex; align-items: center; margin: 0 4px; padding: 0 8px; border-radius: 7px;
  font-size: .82rem; font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--ev-bg, var(--s-suave, #eee)); color: var(--ev-ink, var(--s-tinta, #222)); } /* [1/10/2026] sin sombreado a la izquierda (petición del usuario) */
a.cal-ev:hover { background: var(--ev-fuerte, var(--s-acento, #555)); color: #fff; }
a.cal-ev.sigue-ant { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
a.cal-ev.sigue-sig { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-lista { list-style: none; padding: 0; margin: 8px 0 0; }
.cal-lista li { font-size: .88rem; padding: 4px 0; border-bottom: 1px solid var(--line); }
.cal-lista li a { color: var(--s-acento, #333); font-weight: 600; text-decoration: none; }
.cal-lista .cal-fechas { color: var(--gray); font-variant-numeric: tabular-nums; margin-right: 6px; }
/* [1/10/2026] Color propio por edición (variables --ev-* en línea, ver build_festivales.pagina_calendario) */
.cal-lista .cal-color { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; background: var(--ev-fuerte, var(--s-acento, #555)); }
/* Móvil: el mismo calendario (barras continuas con nombre), más compacto y sin el listado de festivales debajo */
@media (max-width: 599px) {
  .cal-cab div { font-size: .62rem; }
  .cal-semana { grid-template-rows: 18px repeat(var(--carriles, 1), 24px); row-gap: 2px; min-height: 56px; }
  .cal-dia .dia { font-size: .68rem; padding: 2px 3px; }
  a.cal-ev { font-size: .68rem; margin: 0 2px; padding: 0 4px; border-radius: 5px; }
  .cal-lista { display: none; }
}

/* [1/10/2026, petición del usuario] Pantalla grande: igual que el móvil (un mes cada vez, con
   Anterior/Siguiente -- pagina.js pone `hidden` en los demás meses) y el listado de festivales del
   mes a la DERECHA del calendario. `.cal-mes[hidden]` hace falta porque display:grid anularía el
   atributo hidden. */
.cal-mes[hidden] { display: none !important; }
@media (min-width: 1000px) {
  main:has(.cal-mes), body:has(.cal-mes) .breadcrumb { max-width: 1120px; }
  .cal-mes { display: grid; grid-template-columns: 1fr minmax(260px, 340px); column-gap: 24px; align-items: start; }
  .cal-mes > h2 { grid-column: 1 / -1; }
  .cal-mes > .cal { grid-column: 1; grid-row: 2; }
  .cal-mes > .cal-lista, .cal-mes > p.milongas-intro { grid-column: 2; grid-row: 2; margin-top: 0; }
}

/* [2/10/2026, petición del usuario] Cabecera de /festivales/: fondo verde salvia (color de la sección), logo grande
   enlazado a la portada, título «Festivales» + botones «Tango Barcelona» (colores de /barcelona/) y «Milongas»
   (colores de /milongas/); el subtítulo queda solo con texto. */
html[data-seccion="festivales"] header.hoy-header { background: var(--s-acento); color: #fff; max-width: none; padding: 18px max(16px, calc(50% - 342px)) 16px; }
html[data-seccion="festivales"] header.hoy-header h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 1.9rem; }
html[data-seccion="festivales"] header.hoy-header h1 a.logo-link { display: inline-flex; flex: none; }
html[data-seccion="festivales"] header.hoy-header h1 a.logo-link:hover { opacity: .85; }
html[data-seccion="festivales"] header.hoy-header .site-logo { width: 64px; height: 64px; border: 2px solid #fff; }
html[data-seccion="festivales"] header.hoy-header .cab-titulo { color: #fff; margin-right: 4px; }
html[data-seccion="festivales"] header.hoy-header .cab-botones { display: inline-flex; flex: none; gap: 10px; }
html[data-seccion="festivales"] header.hoy-header p { color: #E8EFE9; margin: 6px 0 0 0; }
header.hoy-header h1 a.btn-tango-bcn, header.hoy-header h1 a.btn-milongas { display: inline-block; color: #fff; font-style: normal; font-weight: 700; font-size: .85rem; letter-spacing: 0; padding: 6px 14px; border-radius: 999px; text-decoration: none; }
header.hoy-header h1 a.btn-tango-bcn { background: #0f3a5f; box-shadow: 0 0 0 2px #74acdf; }
header.hoy-header h1 a.btn-tango-bcn:hover { background: #0b2c49; text-decoration: none; opacity: 1; }
header.hoy-header h1 a.btn-milongas { background: #934B40; box-shadow: 0 0 0 2px #D9A89E; }
header.hoy-header h1 a.btn-milongas:hover { background: #7A3B32; text-decoration: none; opacity: 1; }
@media (max-width: 600px) {
  html[data-seccion="festivales"] header.hoy-header .site-logo { width: 52px; height: 52px; }
  html[data-seccion="festivales"] header.hoy-header h1 { font-size: 1.5rem; }
}

/* [2/10/2026, petición del usuario] Igual que /milongas/: logo más grande FUERA del <h1>, a la izquierda; a su
   derecha, la línea del título (con los botones) y la del subtítulo (rejilla de 2 columnas). */
html[data-seccion="festivales"] header.hoy-header { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; }
html[data-seccion="festivales"] header.hoy-header > a.logo-link { grid-row: 1 / span 2; display: inline-flex; }
html[data-seccion="festivales"] header.hoy-header > a.logo-link:hover { opacity: .85; }
html[data-seccion="festivales"] header.hoy-header .site-logo { width: 96px; height: 96px; border: 3px solid #fff; }
html[data-seccion="festivales"] header.hoy-header h1 { grid-column: 2; align-self: end; }
html[data-seccion="festivales"] header.hoy-header p { grid-column: 2; align-self: start; margin: 6px 0 0 0; }
@media (max-width: 600px) {
  html[data-seccion="festivales"] header.hoy-header { column-gap: 12px; }
  html[data-seccion="festivales"] header.hoy-header .site-logo { width: 72px; height: 72px; }
  html[data-seccion="festivales"] header.hoy-header h1 { font-size: 1.35rem; gap: 8px 10px; }
  html[data-seccion="festivales"] header.hoy-header p { font-size: .85rem; }
  header.hoy-header h1 a.btn-tango-bcn, header.hoy-header h1 a.btn-milongas { font-size: .75rem; padding: 5px 11px; }
}

/* [9/10/2026, a petición del usuario] Pastilla «Anuncios» (-> ../anuncios/; antes anuncios2), color de reserva (ocre profundo). */
header.hoy-header h1 a.btn-anuncios { display: inline-block; color: #fff; font-style: normal; font-weight: 700; font-size: .85rem; letter-spacing: 0; padding: 6px 14px; border-radius: 999px; text-decoration: none; background: #8C6A1F; box-shadow: 0 0 0 2px #CBBC9A; }
header.hoy-header h1 a.btn-anuncios:hover { background: #705519; text-decoration: none; opacity: 1; }
html[data-seccion] header.hoy-header .cab-botones { flex-wrap: wrap; }
@media (max-width: 600px) { header.hoy-header h1 a.btn-anuncios { font-size: .75rem; padding: 5px 11px; }
  html[data-seccion] header.hoy-header .cab-botones { flex: 1 1 100%; min-width: 0; gap: 6px 8px; } }


/* ===== comun/tema.css ===== */

/* ============================================================================
   TEMA "D" = aspecto de A (claro, monocromo) + disposición de C (tarjeta con borde, cartel vertical
   a la izquierda).
   [Creado 20/9/2026, a petición del usuario: "aplica" tras probar A y D en
   99 - Temporal/pruebas-estilo/] compone_comun.py lo añade AL FINAL de cada style.css generado
   (después de base.css y de pagina.css), así que gana a las reglas de ambos.
   PARA VOLVER AL ASPECTO ANTERIOR: renombrar o borrar este fichero y ejecutar compone_comun.py.
   Solo CSS: no toca HTML ni JS. Reglas de ficha con prefijo "body" para ganar al <style> en línea
   de ficha.php (se carga después de style.css).
   ============================================================================ */

:root {
  --maroon: #111827; --maroon-dark: #000; --gold: #b45309; --cream: #fff;
  --ink: #111827; --gray: #6b7280; --line: #eceef1;
  --acc: #be123c;
}
body { background: #fff; color: #111827; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; }

/* Cabecera: sin bloque de color, alineada a la izquierda */
header.hoy-header { background: #fff; color: #111827; text-align: left; max-width: 640px; margin: 0 auto; padding: 26px 20px 6px; }
header.hoy-header h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
header.hoy-header h1 a { display: inline-flex; align-items: center; gap: 10px; }
header.hoy-header h1 a:hover { text-decoration: none; opacity: .75; }
header.hoy-header p { color: #6b7280; font-style: normal; font-size: .95rem; margin: 2px 0 0 42px; }
.site-logo { width: 32px; height: 32px; margin: 0; border: 1px solid #eceef1; }

/* Enlaces entre páginas: píldoras azul profundo (propuesta C, 21/9/2026; celeste = #74ACDF, color del título de agendadeltango.com) */
.bcn-send-row { justify-content: flex-start; max-width: 640px; margin: 0 auto; padding: 12px 20px 0; gap: 8px; }
.bcn-send-btn { background: #0f3a5f; border: none; color: #fff; font-weight: 700; font-size: .8rem; padding: 8px 15px; border-radius: 999px; }
.bcn-send-btn:hover { background: #0b2c49; }
.bcn-send-btn svg { color: #74acdf; }

/* Selector de días */
#bcn-picker { display: block; max-width: 640px; padding: 0; overflow: visible; }
#bcn-picker .bcn-day-picker { max-width: 640px; padding: 16px 20px 4px; gap: 8px; margin: 0 auto; }
.bcn-day-pick { border: none; background: #e8eef4; color: #0f3a5f; border-radius: 14px; padding: 8px 0; min-width: 46px; }
.bcn-day-pick:hover { background: #d6e2ee; }
.bcn-day-pick.active { background: #0f3a5f; color: #fff; box-shadow: 0 0 0 3px #74acdf; }
.bcn-day-pick .wd { font-weight: 700; color: inherit; opacity: .85; }
.bcn-day-pick .num { font-weight: 800; }
.bcn-day-pick.active .wd { opacity: 1; color: #74acdf; }

/* Contenedor y día */
.hoy-wrap, .an-wrap { max-width: 640px; padding: 8px 20px 40px; }
.hoy-wrap.semana-activa { max-width: 1100px; }
.day-col { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
/* Cabecera del día: banda celeste (#74ACDF) con texto azul marino */
.day-header, .day-header.hoy { background: #74acdf; color: #06233d; padding: 14px 18px; border-radius: 16px; margin: 14px 0 4px; position: static; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.day-name { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.day-date { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.03em; color: #0b3558; opacity: .8; }
.hoy-badge { position: static; margin-left: auto; align-self: center; background: #0f3a5f; color: #fff; font-size: .68rem; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; }
.day-header.bcn-extra-header { text-align: left; }
.day-body { padding: 0; gap: 0; }

/* Filas de evento */
a.fc-clicable { border-radius: 0; border-bottom: 1px solid #eef0f2; }
.day-body > a.fc-clicable:last-child, .an-list > a.fc-clicable:last-child { border-bottom: none; }
.fc-clicable:hover, .fc-clicable:focus { box-shadow: none; }
.card[class], .fc-clicable:hover .card, .fc-clicable:focus .card {
  display: block; background: transparent; border: none; border-radius: 0; box-shadow: none;
  padding: 18px 0; font-size: .92rem;
}
.card[class]:has(> .card-flyer) { position: relative; padding-right: 108px; min-height: 128px; }
.card > .card-flyer {
  position: absolute; right: 0; top: 18px; width: 92px; height: 92px; max-height: none; margin: 0;
  object-fit: cover; object-position: center top; border-radius: 12px; background: #f3f4f6; cursor: inherit;
  transition: transform .2s;
}
.fc-clicable:hover .card-flyer { transform: scale(1.04); }

.card-head { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin: 0 0 5px; }
.hours { white-space: nowrap; color: #6b7280; font-weight: 600; font-size: .84rem; font-variant-numeric: tabular-nums; }
.type-badge[class] { background: #f3f4f6; color: #4b5563; font-size: .64rem; letter-spacing: .05em; padding: 2px 9px 2px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.type-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #be123c; }
.type-badge.practica::before { background: #65a30d; }
.type-badge.concierto::before { background: #0369a1; }
.type-badge.festival::before { background: #ca8a04; }
.type-badge.jornada::before { background: #db2777; } /* [4/10/2026] actividad tipo «Jornada» */
.type-badge.clase-regular::before { background: #0f766e; }
.type-badge.clase-taller::before { background: #7c3aed; }
.type-badge.anuncio::before { background: #b45309; }
/* Etiqueta roja "Cerrado" (edición con tipo='cerrado'): a la derecha de la etiqueta principal (card-head va en row-reverse -> order:-1 la pone la última por la derecha) */
.type-badge.cerrado[class] { background: #dc2626; color: #fff; order: -1; }
.type-badge.cerrado::before { background: #fff; }
.et-wrap { order: -1; }
/* [29/9/2026] Milonga de festival: "Festival" a la derecha de "Milonga" (mismo truco que Cerrado) */
.card-head .type-badge.milonga ~ .type-badge.festival { order: -1; }
/* Vista Semana (columnas estrechas): orden natural Milonga → etiquetas → Cerrado → hora */
.bcn-week-grid .card-head { flex-direction: row; justify-content: flex-start; }
.bcn-week-grid .et-wrap, .bcn-week-grid .type-badge.cerrado[class], .bcn-week-grid .card-head .type-badge.festival { order: 0; }

.card-title { color: #111827; font-size: 1.06rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.28; margin: 0 0 4px; }
.tag-especial { color: #9ca3af; }
.line { color: #6b7280; font-size: .86rem; margin: 1px 0; }
.line b { color: #374151; font-weight: 600; }
.line.espacio a, a.maps, .tel a, a.tel { color: #374151; }
.anuncio-card .line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-clicable:hover .card-title { color: #be123c; }

/* Suscripciones: solo cambia la intensidad del fondo (sin insignias) */
.card.nivel-plata, .card.nivel-oro { border-radius: 16px; padding: 16px 14px; margin: 6px -14px; }
.card.nivel-plata { background: #fffdf2; }
.card.nivel-oro { background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; }
a.fc-clicable:has(.nivel-oro), a.fc-clicable:has(.nivel-plata) { border-bottom-color: transparent; }

/* Vista Semana (columnas estrechas): tarjeta apilada */
.bcn-week-grid .day-header { display: block; padding: 6px 12px; margin: 0 0 6px; border-radius: 10px; }
/* Vista Semana: bandas más finas y claras (21/9/2026, a petición del usuario) */
.hoy-wrap.semana-activa .day-header, .hoy-wrap.semana-activa .day-header.hoy { background: #dcebf8; color: #0b3558; }
.hoy-wrap.semana-activa .day-header.bcn-extra-header { padding: 8px 14px; margin: 8px 0 8px; border-radius: 12px; }
.hoy-wrap.semana-activa .day-header.bcn-extra-header .day-name { font-size: 1.05rem; }
.hoy-wrap.semana-activa .day-name { font-weight: 700; }
.hoy-wrap.semana-activa .day-date { color: #0b3558; opacity: .7; }
.hoy-wrap.semana-activa .day-header.hoy { background: #bcd9f1; }
.bcn-week-grid .day-name, .bcn-week-grid .day-date { font-size: 1rem; }
.bcn-week-grid .card[class]:has(> .card-flyer) { padding: 12px 0; min-height: 0; }
.bcn-week-grid .card > .card-flyer { position: static; width: 100%; height: auto; aspect-ratio: 1; margin: 6px 0; }
.bcn-week-grid .card.nivel-plata, .bcn-week-grid .card.nivel-oro { margin: 4px -8px; padding: 12px 8px; }

/* Navegación */
.hoy-nav { border-top: 1px solid #eef0f2; margin-top: 8px; padding: 18px 0 6px; }
.hoy-siguiente { background: #111827; border-radius: 999px; font-weight: 600; padding: 11px 22px; }
.hoy-siguiente:hover { background: #374151; }
.hoy-anterior { background: #fff; color: #111827; border: 1px solid #e5e7eb; border-radius: 999px; }
.hoy-anterior:hover { background: #f9fafb; }
.an-intro { max-width: 640px; text-align: left; padding: 16px 20px 0; }
.an-intro p { color: #6b7280; font-size: .92rem; }
.an-list { gap: 0; }
.an-mas { padding-top: 16px; }
.empty { color: #9ca3af; font-style: normal; }

/* Pies y cookies */
footer.hoy-footer, footer.legal-footer { color: #9ca3af; border-top: none; }
footer.hoy-footer a, footer.legal-footer a { color: #6b7280; }
footer.hoy-footer a:hover, footer.legal-footer a:hover { color: #111827; }
.bcn-cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 12px 32px rgba(17,24,39,.14); }
.bcn-cookie-banner p, .bcn-cookie-banner a { color: #4b5563; }
.bcn-cookie-btn { border-radius: 999px; }
.bcn-cookie-accept { background: #111827; border-color: #111827; color: #fff; }
.bcn-cookie-accept:hover { background: #374151; }
.bcn-cookie-reject { background: #fff; color: #111827; border-color: #e5e7eb; }
.popup-box, .send-modal-box { background: #fff; }

.bcn-week-grid .card-head { flex-direction: column; align-items: flex-start; gap: 4px; }

/* Fichas (ficha.php) */
body .ficha-wrap { max-width: 640px; padding: 20px 20px 40px; }
body .ficha-volver { color: #111827; font-weight: 600; }
body .ficha-dia-label { color: #6b7280; }
.card[class]:has(> .card-flyer-full) { padding: 14px 0; min-height: 0; }
.card > .card-flyer.card-flyer-full { position: static; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 14px; margin: 10px 0; background: #f3f4f6; cursor: zoom-in; }
.anuncio-ficha .line { display: block; -webkit-line-clamp: unset; overflow: visible; }
.card.anuncio-ficha .line { font-size: .95rem; }
body .ficha-compartir { border-top: 1px solid #eef0f2; }
body .compartir-btn { border: none; background: #f3f4f6; color: #111827; border-radius: 999px; }
body .compartir-btn:hover { background: #e5e7eb; }
body .compartir-whatsapp { background: #dcfce7; color: #166534; }
body .compartir-comentario { background: #111827; color: #fff; }
body .compartir-comentario:hover { background: #374151; }
.card.nivel-plata > .card-flyer, .card.nivel-oro > .card-flyer { right: 14px; top: 16px; }
.card.nivel-plata:has(> .card-flyer), .card.nivel-oro:has(> .card-flyer) { padding-right: 122px; }
.bcn-week-grid .card.nivel-plata > .card-flyer, .bcn-week-grid .card.nivel-oro > .card-flyer { right: auto; top: auto; }

/* ---- Disposición de C sobre el aspecto de A ---- */
a.fc-clicable { border-bottom: none; border-radius: 18px; transition: transform .18s, box-shadow .18s; }
.fc-clicable:hover, .fc-clicable:focus { box-shadow: 0 8px 24px rgba(17,24,39,.10); transform: translateY(-2px); }
.day-body, .an-list { gap: 12px; }
.card[class], .fc-clicable:hover .card, .fc-clicable:focus .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; padding: 14px; }
.fc-clicable:hover .card { border-color: #9ca3af; }
.card[class]:has(> .card-flyer) { padding-left: 124px; padding-right: 14px; min-height: 156px; }
.card > .card-flyer { left: 14px; right: auto; top: 14px; width: 96px; height: 128px; border-radius: 12px; box-shadow: 0 2px 8px rgba(17,24,39,.15); }
.fc-clicable:hover .card-flyer { transform: none; }
.card.nivel-plata, .card.nivel-oro { margin: 0; padding: 14px; border-radius: 18px; }
.card.nivel-plata { background: #fffdf2; border-color: #f3e3a0; box-shadow: none; }
.card.nivel-oro { background: #fffbeb; border-color: #e6b93a; box-shadow: 0 0 0 1px rgba(230,185,58,.25); }
.card.nivel-plata:has(> .card-flyer), .card.nivel-oro:has(> .card-flyer) { padding-left: 124px; padding-right: 14px; }
.card.nivel-plata > .card-flyer, .card.nivel-oro > .card-flyer { left: 14px; right: auto; top: 14px; }
a.fc-clicable:has(.nivel-oro), a.fc-clicable:has(.nivel-plata) { border-bottom: none; }
.card[class]:has(> .card-flyer-full) { padding: 14px; min-height: 0; }
.bcn-week-grid .card[class], .bcn-week-grid .card.nivel-plata, .bcn-week-grid .card.nivel-oro { padding: 10px; margin: 0; }
.bcn-week-grid .card[class]:has(> .card-flyer) { padding: 10px; min-height: 0; }
.bcn-week-grid .card > .card-flyer { aspect-ratio: 3 / 4; }
.hoy-nav { border-top: none; }

/* [Añadido 22/9/2026, a petición del usuario: "en la página barcelona vamos a hacer una prueba
   de manera que la visualización de los eventos de la opción 'S' sea como la del resto (tanto
   los días de la semana, como '+') sobre todo cuando se visualiza con un móvil"] Por debajo de
   480px `.bcn-week-grid` ya cae a 1 sola columna (ver bcn/pagina.css), pero las tarjetas seguían
   con el aspecto comprimido pensado para columnas estrechas (flyer pequeño arriba, cabecera de
   día diminuta, paddings mínimos). Este bloque neutraliza esos overrides SOLO en ese ancho, para
   que en móvil la pestaña "Semana" (S) se vea igual que los días normales y "+". En escritorio
   NO se toca: el grid multi-columna (afinado el 30/8 y el 6/9/2026, ver arriba) se mantiene tal
   cual, a petición expresa del usuario tras evaluar la alternativa. Verificado con capturas de
   Playwright a 390px antes/después. Para revertir: borrar este bloque y recomponer. */
@media (max-width: 480px) {
  .bcn-week-grid .day-header {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 14px 18px; margin: 14px 0 4px; border-radius: 16px;
  }
  .bcn-week-grid .day-name, .bcn-week-grid .day-date { font-size: 1.6rem; }
  .bcn-week-grid .card-head {
    flex-direction: row-reverse; justify-content: flex-end; align-items: center;
    gap: 4px 8px; flex-wrap: wrap; margin: 0 0 5px;
  }
  .bcn-week-grid .et-wrap, .bcn-week-grid .type-badge.cerrado[class] { order: -1; }
  .bcn-week-grid .card[class], .bcn-week-grid .card.nivel-plata, .bcn-week-grid .card.nivel-oro {
    padding: 14px; margin: 0; border-radius: 18px;
  }
  .bcn-week-grid .card[class]:has(> .card-flyer) {
    padding-left: 124px; padding-right: 14px; min-height: 156px;
  }
  .bcn-week-grid .card > .card-flyer {
    position: absolute; left: 14px; right: auto; top: 14px;
    width: 96px; height: 128px; aspect-ratio: auto; margin: 0;
    border-radius: 12px; box-shadow: 0 2px 8px rgba(17,24,39,.15);
  }
  .bcn-week-grid .card.nivel-plata:has(> .card-flyer),
  .bcn-week-grid .card.nivel-oro:has(> .card-flyer) {
    padding-left: 124px; padding-right: 14px;
  }
  .bcn-week-grid .card.nivel-plata > .card-flyer,
  .bcn-week-grid .card.nivel-oro > .card-flyer {
    left: 14px; right: auto; top: 14px;
  }
}


/* ===== comun/secciones.css ===== */

/* ==========================================================================
   comun/secciones.css — color por sección (combinación 2 "Tierra afinada",
   elegida por el usuario el 25/9/2026).
   Base, tipografía y maquetación son comunes (base.css + pagina.css + tema.css);
   este fichero SOLO cambia colores según <html data-seccion="...">:
     barcelona  -> /barcelona/ y /anuncios/ (azul profundo + celeste)
     milongas   -> índice y fichas de /milongas/ (rojo teja)
     festivales -> futuro /festivales/ (verde salvia)
     conciertos -> /conciertos/ (ciruela) [10/10/2026]
     reserva    -> sección futura (ocre profundo)
   compone_comun.py lo añade AL FINAL de cada style.css (después de tema.css).
   Una página SIN data-seccion no se ve afectada (todas las reglas llevan
   el prefijo html[data-seccion]). Sección nueva = un bloque de variables
   aquí + data-seccion="<nombre>" en el <html> de sus plantillas.
   ========================================================================== */

/* Variables que ya usan base.css / milongas/pagina.css (va ANTES de las paletas:
   así una paleta puede fijar su propio valor, p. ej. --cream en Barcelona) */
html[data-seccion] {
  --ml-maroon: var(--s-acento); --ml-accent: var(--s-acento-osc);
  --ml-day-bg: var(--s-acento); --ml-day-ink: #FFFFFF;
  --cream: var(--s-suave); --line: var(--s-linea);
  --s-fecha: var(--s-tinta);   /* fecha junto al día; Barcelona la tiene algo más clara */
}

/* ---------- Paletas: 8 valores por sección ---------- */
html[data-seccion="barcelona"] {   /* Barcelona + Anuncios: azul profundo + celeste (actual) */
  --s-acento: #0F3A5F; --s-acento-osc: #0B2C49; --s-claro: #74ACDF; --s-tinta: #06233D;
  --s-suave: #DCEBF8;  --s-hoy: #BCD9F1;        --s-pastilla: #E8EEF4; --s-pastilla-hover: #D6E2EE;
  --s-fondo: #FFFFFF;  --s-linea: #ECEEF1;
  --s-fecha: #0B3558;
  --cream: #FFFFFF;  /* igual que tema.css: en Barcelona/Anuncios --cream no cambia */
}
html[data-seccion="milongas"] {    /* Milongas: rojo teja (actual) */
  --s-acento: #934B40; --s-acento-osc: #7A3B32; --s-claro: #D9A89E; --s-tinta: #4A231D;
  --s-suave: #F7EEEB;  --s-hoy: #EFDCD6;        --s-pastilla: #F3E6E2; --s-pastilla-hover: #EAD5CF;
  --s-fondo: #FAF8F4;  --s-linea: #EADBD6;
}
html[data-seccion="festivales"] {  /* Festivales: verde salvia */
  --s-acento: #52705A; --s-acento-osc: #3F5846; --s-claro: #A9C2AE; --s-tinta: #22342A;
  --s-suave: #E8EFE9;  --s-hoy: #D3E0D6;        --s-pastilla: #EBF1EC; --s-pastilla-hover: #DCE7DE;
  --s-fondo: #F6F8F5;  --s-linea: #DCE5DE;
}
html[data-seccion="conciertos"] {  /* Conciertos: ciruela [10/10/2026] (el ocre de reserva ya lo usa la pastilla «Anuncios») */
  --s-acento: #5E3A6E; --s-acento-osc: #4A2C58; --s-claro: #B9A1C6; --s-tinta: #2A1733;
  --s-suave: #F0EAF3;  --s-hoy: #E0D4E7;        --s-pastilla: #F2EDF5; --s-pastilla-hover: #E6DCEC;
  --s-fondo: #F8F6F9;  --s-linea: #E3D9E8;
}
html[data-seccion="reserva"] {     /* Reserva: ocre profundo */
  --s-acento: #8C6A1F; --s-acento-osc: #705519; --s-claro: #CBBC9A; --s-tinta: #3F300E;
  --s-suave: #F1EDE4;  --s-hoy: #E3DBC9;        --s-pastilla: #F4F0E9; --s-pastilla-hover: #EAE4D7;
  --s-fondo: #FAF9F6;  --s-linea: #E8E1D2;
}

/* ---------- Comunes a todas las páginas ---------- */
html[data-seccion] body { background: var(--s-fondo); }
html[data-seccion] .bcn-send-btn { background: var(--s-acento); color: #fff; }
html[data-seccion] .bcn-send-btn:hover { background: var(--s-acento-osc); }
html[data-seccion] .bcn-send-btn svg { color: var(--s-claro); }
html[data-seccion] .hoy-siguiente, html[data-seccion] .bcn-cookie-accept { background: var(--s-acento); border-color: var(--s-acento); color: #fff; }
html[data-seccion] .hoy-siguiente:hover, html[data-seccion] .bcn-cookie-accept:hover { background: var(--s-acento-osc); }

/* ---------- Agenda (Barcelona / Anuncios) ---------- */
html[data-seccion] .bcn-day-pick { background: var(--s-pastilla); color: var(--s-acento); }
html[data-seccion] .bcn-day-pick:hover { background: var(--s-pastilla-hover); }
html[data-seccion] .bcn-day-pick.active { background: var(--s-acento); color: #fff; box-shadow: 0 0 0 3px var(--s-claro); }
html[data-seccion] .bcn-day-pick.active .wd { color: var(--s-claro); }
html[data-seccion] .day-header, html[data-seccion] .day-header.hoy { background: var(--s-claro); color: var(--s-tinta); }
html[data-seccion] .day-date { color: var(--s-fecha); }
html[data-seccion] .hoy-badge { background: var(--s-acento); color: #fff; }
html[data-seccion] .hoy-wrap.semana-activa .day-header { background: var(--s-suave); color: var(--s-fecha); }
html[data-seccion] .hoy-wrap.semana-activa .day-header.hoy { background: var(--s-hoy); }
html[data-seccion] .hoy-wrap.semana-activa .day-date { color: var(--s-fecha); }

/* ---------- Directorio / fichas (Milongas, Festivales...) ---------- */
html[data-seccion] .milonga-hero h1, html[data-seccion] .milongas-titulo { color: var(--s-acento); }
html[data-seccion] main a.fc-clicable:hover .card.milonga[class] { border-color: var(--s-acento); }
html[data-seccion] main .card.milonga .hours { color: var(--s-acento); }
html[data-seccion] main .card.milonga .type-badge::before,
html[data-seccion] main .milonga-tipo .type-badge::before { background: var(--s-suave); }
html[data-seccion] .index-dia-group h2 { background: var(--s-acento); color: #fff; }
html[data-seccion] .milongas-chip { background: var(--s-suave); border-color: var(--s-linea); color: var(--s-acento); }
html[data-seccion] .milongas-chip:hover { border-color: var(--s-acento); color: var(--s-acento-osc); }
html[data-seccion] .milongas-chip.active { background: var(--s-acento); border-color: var(--s-acento); color: #fff; }
html[data-seccion] .milongas-search-input { border-color: var(--s-linea); }
html[data-seccion] .milongas-search-input:focus { outline-color: var(--s-acento); }
html[data-seccion] .teacher-chip, html[data-seccion] .milonga-provincia,
html[data-seccion] .milonga-card .provincia-tag { background: var(--s-suave); color: var(--s-acento); border-color: var(--s-linea); }
html[data-seccion] .lugar-tag { background: var(--s-suave); color: var(--s-acento); border-color: var(--s-linea); }  /* [3/10/2026] */
html[data-seccion] .edicion-item { border-left-color: var(--s-acento); }

/* "Cerrado" siempre en rojo vivo, distinto de cualquier acento */
html[data-seccion] .type-badge.cerrado[class],
html[data-seccion] main .card.milonga .type-badge.cerrado[class] { background: #DC2626; color: #fff; }
/* El punto de "Práctica" (verde) y de "Cerrado" (blanco) no se tiñen con la sección */
html[data-seccion] main .card.milonga .type-badge.practica::before,
html[data-seccion] main .milonga-tipo .type-badge.practica::before { background: #65A30D; }
html[data-seccion] main .card.milonga .type-badge.cerrado::before,
html[data-seccion] main .milonga-tipo .type-badge.cerrado::before { background: #FFFFFF; }
/* [4/10/2026] actividad independiente tipo «Jornada» (build_agenda.py bloque 4) */
html[data-seccion] main .card.jornada .hours { color: var(--s-acento); }
html[data-seccion] main a.fc-clicable:hover .card.jornada[class] { border-color: var(--s-acento); }