/* [Cambiado 13/9/2026, a petición del usuario: "la tipografía has de hacerla igual que la de
   bcn"] Mismo cambio que /bcn/ el 6/9/2026: antes 'Playfair Display' para títulos/horas +
   'Montserrat' para el resto, ambas cargadas desde Google Fonts (ver index.html/ficha.php) --
   ahora todo el paquete usa esta pila de fuentes de sistema, sin distinguir ya título/cuerpo.
   --font-sistema centraliza el valor para no repetirlo en cada regla; todas las reglas que antes
   decían 'Montserrat, ...'/'Playfair Display, ...' ahora usan var(--font-sistema) tal cual. */
: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.clase-regular { background: var(--regular); }
.type-badge.clase-taller { background: var(--taller); }
.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); }
/* [Añadido 8/8/2026, a petición del usuario: botón "+" al final del selector de días, para ver
   la página especial "Próximamente" ([Cambiado 9/8/2026] antes "Próximamente destacado") -- ver
   app.js, dayPickerHtml()] Mismo
   formato/tamaño que .bcn-day-pick (mismo padding/border-radius/transición), pero sin la línea
   superior "wd" -- un único "+" lo más grande posible dentro del alto que ocupaban antes las dos
   líneas apiladas, para que no quede descompensado frente a los demás botones. */
.bcn-day-pick-plus, .bcn-day-pick-star { justify-content: center; }
.bcn-day-pick-plus .plus, .bcn-day-pick-star .star { font-size: 1.55rem; font-weight: 700; line-height: 1; font-family: var(--font-sistema); }
/* 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; }

/* [Añadido 2/8/2026, a petición del usuario: "la opcion dos, tanto en escenabcn como en bcn"]
   Botón "Añade o actualiza tu actividad" y modal de envío -- misma "opción 2" (píldora con
   icono + texto, fila propia) y mismo modal de doble vía (WhatsApp + email) que la pestaña
   "BCN" del artefacto principal, ver render_escena_tango.py (.bcn-send-row/.bcn-send-btn,
   #send-modal-overlay), copiado tal cual para que ambos se vean y se comporten igual. */
/* [Cambiado 13/9/2026, a petición del usuario: "las etiquetas, como el estilo de bcn ... en una
   linea responsive"] Mismo cambio que /bcn/ el mismo día: .bcn-send-row pasa de solo
   "text-align: center" (pensado para un único botón inline-block) a flexbox con
   "justify-content: center" -- así centra también cuando lleva varios botones a la vez, y
   flex-wrap hace que, si no caben en una línea, bajen a la siguiente sin desbordar ni
   desalinearse. */
.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; }
/* [Ampliado 13/9/2026] Se añaden los iconos de las dos etiquetas nuevas (Tango en Barcelona /
   Anuncios sin Chamuyo, ver index.html/ficha.php) a la misma lista. */
.bcn-send-btn .ico-enviar, .bcn-send-btn .ico-clasica, .bcn-send-btn .ico-tango-bcn, .bcn-send-btn .ico-anuncios-imagen { width: 16px; height: 16px; flex-shrink: 0; }

.send-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(20, 12, 12, 0.6); z-index: 2100; align-items: center; justify-content: center; padding: 20px; }
.send-modal-overlay.active { display: flex; }
.send-modal-box { position: relative; background: var(--cream); border-radius: 14px; max-width: 440px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 24px 20px 18px; box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.send-modal-close { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 1.5em; line-height: 1; color: var(--maroon); cursor: pointer; padding: 4px 10px; }
.send-modal-close:hover { color: var(--maroon-dark); }
.send-modal-box h3 { font-family: var(--font-sistema); color: var(--maroon-dark); margin: 4px 0 8px; font-size: 1.15rem; }
.send-modal-intro { font-size: 0.85rem; color: var(--gray); line-height: 1.5; margin: 0 0 16px; }
.send-card { border: 1px solid #ecdfc9; border-left: 5px solid var(--maroon); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.send-card h4 { margin: 0 0 6px; font-family: var(--font-sistema); color: var(--maroon-dark); font-size: 1.02rem; }
.send-card p { margin: 0 0 10px; font-size: 0.82rem; color: #4a4030; line-height: 1.4; }
.send-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.send-btns a { text-decoration: none; border-radius: 20px; padding: 8px 14px; font-size: 0.8rem; font-weight: 700; }
.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { background: #1ebc59; }
.btn-mail { background: #fff; color: var(--maroon); border: 1px solid var(--maroon); }
.btn-mail:hover { background: #f5ece0; }
.send-modal-note { font-size: 0.74rem; color: #8a7a5a; font-style: italic; text-align: center; margin-top: 4px; }

/* [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; }
}

/* ==========================================================================
   Página de Anuncios (carpeta 40, paquete "anuncios") -- [Creado 22/8/2026]
   Reutiliza el lenguaje visual de /bcn/ (.card, .card-title, .card-flyer, .line,
   .fc-clicable, .nivel-oro/plata/bronce, lightbox de imágenes, aviso de cookies)
   tal cual, y añade solo lo específico de esta página: intro, listado con
   paginación "Más anuncios", y la insignia "Anuncio". ========================== */

/* [Cambiado 13/9/2026, a petición del usuario: "subtítulo 'Anuncios'"] El título "Anuncios" pasa
   de este bloque (antes <h2>Anuncios</h2>) a la cabecera común (header.hoy-header p, ver más
   arriba) -- se quita la regla ".an-intro h2" (código muerto: ya no hay ningún <h2> en este
   bloque, ver index.html/ficha.php) y .an-intro se queda solo con la descripción. */
.an-intro { max-width: 560px; margin: 0 auto; padding: 18px 18px 0; text-align: center; }
.an-intro p { margin: 0; color: var(--gray); font-size: 0.88em; }

.an-wrap { max-width: 560px; margin: 0 auto; padding: 16px 18px 40px; }
.an-list { display: flex; flex-direction: column; gap: 14px; }
.an-mas { text-align: center; padding-top: 6px; }

.type-badge.anuncio { background: #7a5230; }

/* Sin nivel de subscripción ("resto"): igual que .card por defecto, sin borde reforzado --
   se distingue simplemente por no llevar ninguna de las 3 clases nivel-*. */
.card.anuncio-card { display: flex; flex-direction: column; gap: 4px; }
.card.anuncio-ficha { font-size: 0.95em; gap: 8px; }
.card.anuncio-ficha .card-flyer-full + .card-flyer-full { margin-top: 2px; }