/* =====================================================================
   BASE — Discotecas España
   Estética nocturna y minimalista. Se enlaza con etiquetaCss('css/base.css').
   Los temas de temporada (css/temas/*.css) solo sobrescriben los tokens
   de :root; no redefinen componentes.
   ===================================================================== */

/* ----- Tokens ----- */
:root {
    color-scheme: dark;

    --fondo: #09090d;
    --fondo-elevado: #101016;
    --superficie: #15151d;
    --borde: #23232d;
    --borde-fuerte: #363641;

    --texto: #ededf2;
    --texto-suave: #a1a1ae;
    --texto-tenue: #868693;

    --acento: #a78bfa;
    /* La luna de la marca (marcaSvg(), img/favicon.svg): degradado y estrella. */
    --marca-claro: #d8ccff;
    --marca-oscuro: #8b5cf6;
    --marca-estrella: #ede9fe;
    --exito: #4ade80;
    --error: #f87171;
    --atencion: #fbbf24; /* avisos que no son un error: locales cerrados */

    --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radio: 14px;
    --radio-pequeno: 10px;
    --ancho: 1120px;
    --margen: 16px;
    --transicion: 160ms ease;
}

@media (min-width: 720px) {
    :root { --margen: 24px; }
}

/* ----- Reset mínimo ----- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Al bajar a un ancla (#entradas, #agenda, #acerca-de…) o con scrollIntoView(),
   lo de arriba no queda tapado por la cabecera fija (65 px). El panel no
   tiene .cabecera: sus anclas llevan su propio scroll-margin (panel.css). */
html:has(.cabecera) { scroll-padding-top: 88px; }

/* hidden oculta siempre, aunque la clase dé display (.boton es inline-flex):
   los botones que js/ muestra solo si el navegador puede (Compartir...). */
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--fondo);
    /* Resplandor tenue arriba con el color de acento: lo que más cambia a la vista con cada tema. */
    background-image: radial-gradient(ellipse 900px 420px at 50% -140px, color-mix(in srgb, var(--acento) 14%, transparent), transparent 70%);
    background-repeat: no-repeat;
    color: var(--texto);
    font: 400 1rem/1.6 var(--fuente);
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
h2 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

a {
    color: inherit;
    text-decoration-color: var(--borde-fuerte);
    text-underline-offset: 3px;
    transition: color var(--transicion), text-decoration-color var(--transicion);
}
a:hover { color: var(--acento); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--acento) 35%, transparent); }

/* ----- Utilidades ----- */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.estrecho { max-width: 400px; margin-inline: auto; }
.texto-suave { color: var(--texto-suave); }
.sin-salto { white-space: nowrap; }
.antetitulo {
    margin-bottom: 12px;
    color: var(--acento);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pila > * + * { margin-top: 12px; }
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.lista-simple { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Etiquetas en fila: estilos musicales, servicios... */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
    padding: 4px 12px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: .8125rem;
}

/* Bloque con borde para información agrupada. */
.tarjeta {
    padding: 20px;
    background: var(--fondo-elevado);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.tarjeta h2 {
    margin-bottom: 14px;
    color: var(--texto-tenue);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tarjeta p:last-child { margin-bottom: 0; }

/* Lista etiqueta · valor (datos de la ficha, conexión en el panel). */
.datos { display: grid; gap: 10px; margin: 0; }
.datos div { display: flex; justify-content: space-between; gap: 16px; }
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; text-align: right; }
.enlace-volver { display: inline-block; margin-top: 20px; color: var(--texto-suave); font-size: .875rem; text-decoration: none; }

.saltar {
    position: absolute;
    top: -100px;
    left: var(--margen);
    z-index: 100;
    padding: 8px 14px;
    background: var(--texto);
    color: var(--fondo);
    border-radius: var(--radio-pequeno);
}
.saltar:focus { top: 8px; }

/* ----- Cabecera ----- */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--fondo) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borde);
    view-transition-name: cabecera; /* fija al pasar de una página a otra */
}
/* En el móvil, sin desenfoque: volver a desenfocar lo de detrás en cada
   paso del scroll da tirones en los Android modestos. */
@media (max-width: 899px) {
    .cabecera {
        background: color-mix(in srgb, var(--fondo) 96%, transparent);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
.cabecera__fila {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.marca svg { width: 24px; height: 24px; flex: none; }
.marca-luna__claro { stop-color: var(--marca-claro); }
.marca-luna__oscuro { stop-color: var(--marca-oscuro); }
.marca-luna__estrella { fill: var(--marca-estrella); }
.marca:hover { color: var(--texto); }
.marca__tenue { color: var(--texto-tenue); font-weight: 400; }

.menu-boton {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto);
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

/* Móvil: el menú se despliega bajo la cabecera con el botón (js/menu.js). */
.menu {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(var(--margen) * -1);
    right: calc(var(--margen) * -1);
    padding: 8px var(--margen) 20px;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    /* Con la cabecera fija, lo que pasara del borde de abajo no se alcanzaría
       nunca (móvil en horizontal, letra grande): el menú hace scroll propio. */
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.menu--abierto { display: block; }
.menu ul { margin: 0; padding: 0; list-style: none; }
.menu a {
    display: block;
    padding: 10px 0;
    color: var(--texto-suave);
    font-size: .9375rem;
    text-decoration: none;
}
.menu a:hover,
.menu a[aria-current="page"] { color: var(--texto); }
.menu__secundario { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borde); }

/* Enlace al mapa (site.php 'clase' => 'menu__mapa'): un pin delante y, en
   escritorio, forma de botón. */
.menu a.menu__mapa { display: flex; align-items: center; gap: 7px; }
.menu a.menu__mapa::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: var(--acento);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12zm0-9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12zm0-9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Enlaces solo con icono (site.php 'icono' => 'ruleta'): el dibujo es un SVG en
   línea (iconoMenu()) pintado con currentColor = --acento, así que los temas de
   temporada lo tiñen. El texto va dentro, en .visualmente-oculto. */
.menu a.menu__icono { display: flex; align-items: center; }
.icono-ruleta {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--acento);
    transition: filter var(--transicion);
}
/* La bola, del mismo color, con un borde del fondo para no perderse sobre las casillas al girar la rueda. */
.icono-ruleta__bola { stroke: var(--fondo); stroke-width: 1.1; }
.icono-ruleta__rueda { transform-origin: 50% 50%; }
/* Pasar el ratón o estar en la página: un brillo del acento (no cambia de color). */
.menu a.menu__icono:hover .icono-ruleta,
.menu a.menu__icono[aria-current="page"] .icono-ruleta { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--acento) 65%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
    .menu a.menu__icono:hover .icono-ruleta__rueda { animation: icono-ruleta-giro 2.4s linear infinite; }
}
@keyframes icono-ruleta-giro { to { transform: rotate(360deg); } }

/* Selector de idioma (enlaceCambioIdioma(), plantilla.php) y botón del menú, a
   la derecha. En escritorio el menú va pegado a ellos (margin-left: auto). */
.cabecera__acciones { display: flex; align-items: center; gap: 10px; }
.idioma-cambio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 6px 10px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-decoration: none;
}
.idioma-cambio:hover { color: var(--texto); border-color: var(--acento); }

@media (min-width: 900px) {
    .menu-boton { display: none; }
    .menu {
        display: flex;
        position: static;
        align-items: center;
        gap: 22px;
        margin-left: auto;
        padding: 0;
        background: none;
        border: 0;
        max-height: none;
        overflow: visible;
    }
    .menu ul { display: flex; align-items: center; gap: 22px; }
    .menu a { padding: 6px 0; font-size: .875rem; }
    .menu__secundario { margin: 0; padding: 0 0 0 22px; border-top: 0; border-left: 1px solid var(--borde); }
    .menu a.menu__mapa {
        padding: 5px 13px 5px 10px;
        border: 1px solid color-mix(in srgb, var(--acento) 45%, var(--borde-fuerte));
        border-radius: 999px;
        color: var(--texto);
        transition: background var(--transicion), border-color var(--transicion);
    }
    .menu a.menu__mapa:hover,
    .menu a.menu__mapa[aria-current="page"] { background: color-mix(in srgb, var(--acento) 14%, transparent); border-color: var(--acento); }
}

/* ----- Contenido ----- */
.principal { flex: 1; padding-block: 56px 80px; }

.portada { max-width: 720px; }
.portada p { max-width: 56ch; font-size: 1.125rem; }

/* ----- Botones ----- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    background: var(--texto);
    border: 1px solid var(--texto);
    border-radius: var(--radio-pequeno);
    color: var(--fondo);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton:hover { background: var(--acento); border-color: var(--acento); color: var(--fondo); }
.boton--secundario { background: transparent; border-color: var(--borde-fuerte); color: var(--texto); }
.boton--secundario:hover { background: var(--superficie); border-color: var(--texto-tenue); color: var(--texto); }
.boton--auto { width: auto; }

.boton-texto {
    padding: 0;
    background: none;
    border: 0;
    color: var(--texto-suave);
    font: inherit;
    cursor: pointer;
}
.boton-texto:hover { color: var(--texto); }
/* Primer clic en un botón con data-confirmar (js/confirmar.js): pide el segundo. */
.boton-texto.confirmando { color: var(--error); font-weight: 600; }

form { margin: 0; }

/* ----- Formularios ----- */
.campo { margin-bottom: 16px; }
.campo label { display: block; margin-bottom: 6px; color: var(--texto-suave); font-size: .875rem; }
.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    color: var(--texto);
    font: inherit;
    transition: border-color var(--transicion);
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input[type="file"] { padding: 10px; color: var(--texto-suave); }
/* Nota bajo un campo (registro y perfil: la fecha de nacimiento). */
.campo > small { display: block; margin-top: 6px; color: var(--texto-tenue); font-size: .8125rem; line-height: 1.5; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--borde-fuerte); }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }

.casilla { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; cursor: pointer; }
.casilla input { width: 18px; height: 18px; margin: 0; accent-color: var(--acento); }
/* Casilla con una nota debajo del texto (login: «Mantener la sesión iniciada»). */
.casilla--con-nota { align-items: flex-start; margin-bottom: 16px; }
.casilla--con-nota input { flex: none; margin-top: 2px; }
.casilla--con-nota small { display: block; margin-top: 2px; color: var(--texto-tenue); font-size: .8125rem; line-height: 1.5; }

/* Formularios largos del panel. */
.formulario-ancho { max-width: 760px; margin-inline: auto; }
/* min-width: 0: un fieldset no encoge por debajo de su contenido y, con un
   campo largo, ensanchaba la página en el móvil. */
.grupo-campos { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.grupo-campos legend { margin-bottom: 16px; padding: 0; font-size: 1.125rem; font-weight: 600; }
.subtitulo-campos { margin: 8px 0 10px; color: var(--texto-suave); font-size: .875rem; overflow-wrap: anywhere; } /* «Original: https://…» largos */
.rejilla-campos { display: grid; gap: 0 16px; }
.rejilla-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 16px; margin-bottom: 12px; }
@media (min-width: 720px) {
    .rejilla-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.separador {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--texto-tenue);
    font-size: .8125rem;
}
.separador::before,
.separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

/* Opciones en tarjeta (radio): p. ej. el selector de temas del panel. */
.opciones { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; border: 0; }
.opcion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    cursor: pointer;
    transition: border-color var(--transicion);
}
.opcion:hover { border-color: var(--borde-fuerte); color: inherit; }
a.opcion { text-decoration: none; }
.opcion:has(input:checked) { border-color: var(--acento); }
.opcion input { margin: 5px 0 0; accent-color: var(--acento); }
.opcion__titulo { display: block; font-weight: 600; }
.opcion__detalle { display: block; color: var(--texto-suave); font-size: .875rem; }

.etiqueta {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: .75rem;
    font-weight: 400;
    vertical-align: 2px;
}
.etiqueta--exito {
    color: var(--exito);
    border-color: color-mix(in srgb, var(--exito) 35%, transparent);
    background: color-mix(in srgb, var(--exito) 10%, transparent);
}
/* Local cerrado (negocios.cierre): en la lista del panel. */
.etiqueta--cierre {
    color: var(--atencion);
    border-color: color-mix(in srgb, var(--atencion) 40%, transparent);
    background: color-mix(in srgb, var(--atencion) 10%, transparent);
}

/* ----- Avisos ----- */
.aviso {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: var(--radio-pequeno);
    font-size: .9rem;
}
.aviso--error {
    color: var(--error);
    border-color: color-mix(in srgb, var(--error) 35%, transparent);
    background: color-mix(in srgb, var(--error) 8%, transparent);
}
.aviso--exito {
    color: var(--exito);
    border-color: color-mix(in srgb, var(--exito) 35%, transparent);
    background: color-mix(in srgb, var(--exito) 8%, transparent);
}

/* ----- Promoción "+300 puntos" (etiquetaPromocion(), includes/puntos_compras.php) -----
   Dorada en todos los temas: tiene que destacar sobre cualquier foto o flyer.
   El brillo solo mueve un transform (barato en móviles modestos). */
.promo-puntos {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    overflow: hidden;
    padding: 5px 11px 5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff1a8 0%, #fbbf24 45%, #f59e0b 100%);
    box-shadow: 0 0 0 1px rgb(255 255 255 / .35) inset, 0 6px 18px -6px rgb(245 158 11 / .7);
    color: #241503;
    line-height: 1;
    white-space: nowrap;
}
.promo-puntos::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .65) 50%, transparent 65%);
    transform: translateX(-110%);
    animation: promo-brillo 4.5s ease-in-out 1s infinite;
    pointer-events: none;
}
@keyframes promo-brillo {
    0%, 70% { transform: translateX(-110%); }
    100% { transform: translateX(110%); }
}
.promo-puntos__cifra { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; }
.promo-puntos__unidad { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* Encima de la foto de una tarjeta de local, o abajo del flyer de una fiesta (arriba van la fecha y "Hoy"). */
.promo-puntos--tarjeta { position: absolute; top: 10px; left: 10px; z-index: 1; }
.promo-puntos--evento { position: absolute; bottom: 10px; left: 10px; z-index: 1; }
/* El aviso de la cabecera de la ficha y de la fiesta (avisoPromocion(), includes/ficha.php):
   un <details> con el sello, la fecha de fin y el icono a la vista; al abrirlo, las condiciones. */
.promo-aviso { margin: 16px 0 0; color: var(--texto-suave); font-size: .9375rem; }
.promo-aviso summary {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
}
.promo-aviso summary::-webkit-details-marker { display: none; }
.promo-aviso__icono { display: inline-grid; place-items: center; color: var(--texto-tenue); transition: color var(--transicion); }
.promo-aviso summary:hover .promo-aviso__icono,
.promo-aviso[open] .promo-aviso__icono { color: #fbbf24; } /* el dorado del sello */
.promo-aviso__texto { max-width: 60ch; margin: 8px 0 0; }

/* ----- Pie ----- */
/* content-visibility: el navegador no lo pinta hasta que se acerca al scroll. */
.pie {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
    padding-block: 48px 32px;
    border-top: 1px solid var(--borde);
    color: var(--texto-suave);
    font-size: .875rem;
}
.pie__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.pie__intro { grid-column: 1 / -1; max-width: 380px; }
.pie__marca { margin-bottom: 8px; color: var(--texto); font-weight: 600; }
.pie h2 {
    margin-bottom: 12px;
    color: var(--texto-tenue);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pie ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pie a { text-decoration: none; }
.pie__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--borde);
    color: var(--texto-tenue);
    font-size: .8125rem;
}
.pie__legal p { margin: 0; }
.pie__redes { display: flex; gap: 16px; }
/* Aviso legal, privacidad, cookies y términos: discretos pero en todas las
   páginas (site.php 'footer.enlaces_legales'). */
.pie .pie__avisos { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .75rem; }
.pie__avisos a { color: var(--texto-tenue); }
.pie__avisos a:hover { color: var(--texto-suave); }

@media (min-width: 900px) {
    .pie__rejilla { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
    .pie__intro { grid-column: auto; }
}

/* ----- Maquetación de páginas interiores ----- */
.texto-tenue { color: var(--texto-tenue); }
.cabecera-seccion {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 20px;
}
.cabecera-seccion h1,
.cabecera-seccion h2 { margin: 0; }
.cabecera-seccion a:not(.boton) { color: var(--texto-suave); font-size: .875rem; text-decoration: none; }
.fila-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.bloque { margin-top: 40px; }
.enlaces-cuenta { margin-top: 24px; font-size: .875rem; line-height: 2; }
/* Bajo "Continuar con Google": crear la cuenta así también acepta los términos (aceptacionCuenta()). */
.nota-cuenta { margin: 10px 0 0; color: var(--texto-tenue); font-size: .8125rem; line-height: 1.5; }
.rejilla-paneles { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) {
    .rejilla-paneles { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
.rejilla-secciones { display: grid; gap: 10px; margin-top: 24px; }
@media (min-width: 720px) {
    .rejilla-secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Filtros de listados (buscador, panel). */
.filtros {
    display: grid;
    gap: 0 12px;
    align-items: end;
    margin: 8px 0 20px;
}
.filtros .boton { margin-bottom: 16px; }
@media (min-width: 720px) {
    .filtros { grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ----- Tablas ----- */
/* position: relative: el «Acciones» visualmente-oculto (position: absolute) de las
   cabeceras se recorta aquí; sin ella, ensanchaba toda la página en el móvil. */
.tabla-envoltorio { position: relative; overflow-x: auto; margin-bottom: 16px; border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th,
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla thead th { color: var(--texto-tenue); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tabla tbody tr:last-child > * { border-bottom: 0; }
.tabla a { text-decoration: none; }
.tabla__acciones { display: flex; flex-wrap: wrap; gap: 6px 14px; white-space: nowrap; }
.tabla__acciones a,
.tabla__acciones .boton-texto { color: var(--texto-suave); font-size: .875rem; }

/* ----- Perfil ----- */
.perfil__cabecera { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.perfil__cabecera h1 { margin-bottom: 4px; }
.perfil__cabecera p { margin: 0; }
.perfil__avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; }
.perfil__avatar--inicial {
    display: grid;
    place-items: center;
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    color: var(--acento);
    font-size: 1.5rem;
    font-weight: 600;
}
.perfil__salir { max-width: 240px; margin-top: 32px; }
.cifra { margin-bottom: 16px; font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }

.lista-movimientos,
.lista-suscriptores { margin: 20px 0 0; padding: 0; list-style: none; }
.lista-movimientos li,
.lista-suscriptores li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--borde);
    font-size: .9rem;
}
.lista-suscriptores { max-height: 480px; overflow-y: auto; }

/* Fotos existentes en el formulario de edición de negocios. */
.fotos-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.fotos-panel__foto { display: grid; gap: 6px; font-size: .8125rem; }
.fotos-panel__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-pequeno); background: var(--superficie); }
.fotos-panel__foto .casilla { margin: 0; }

/* Enlaces dentro de chips (ciudades destacadas). */
.chips a { color: inherit; text-decoration: none; }
.chips li:has(a):hover { border-color: var(--acento); color: var(--texto); }
.chips--grandes li { padding: 8px 16px; font-size: .9375rem; }

/* ----- Newsletter (pie y newsletter.php) ----- */
.form-newsletter { margin-top: 12px; }
.form-newsletter__fila { display: flex; gap: 8px; }
.form-newsletter input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    color: var(--texto);
    font: inherit;
}
.form-newsletter .boton { padding: 10px 14px; font-size: .875rem; }
.form-newsletter__acepta { margin-top: 10px; font-size: .8125rem; }
.form-newsletter__acepta input { width: 16px; height: 16px; }
.pie__intro h2 { margin-top: 24px; }

/* ----- Partículas de los temas de temporada (js/particulas.js) ----- */
.particulas {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    pointer-events: none;
}
.particula {
    position: absolute;
    top: 0;
    user-select: none;
    animation: caer linear infinite;
}
@keyframes caer {
    from { transform: translate3d(0, -10vh, 0) rotate(0deg); }
    to   { transform: translate3d(0, 110vh, 0) rotate(160deg); }
}

/* ----- Texto pedido desde el panel -----
   El ojo de "Fachada y menú" abre la web con ?ver=: el texto se resalta
   (marcaFachada()) y abajo un aviso dice cuál es o por qué no sale
   (avisoVerFachada()). Solo para quien puede editar la fachada. */
[data-ver-fachada] {
    scroll-margin-top: 8px; /* más los 88 px de scroll-padding de html */
    outline: 2px dashed var(--acento);
    outline-offset: 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--acento) 18%, transparent);
    animation: ver-fachada 900ms ease-out 2;
}
@keyframes ver-fachada { from { outline-offset: 16px; } }
/* Con un texto pedido se pinta todo: los bloques con content-visibility: auto
   cambian de alto al pintarse y dejarían el texto fuera de la vista. */
body:has([data-ver-fachada]) :is(.pie, .bloque-portada, .ficha__relacionados) { content-visibility: visible; }

body:has(.aviso-ver) { padding-bottom: 88px; }
.aviso-ver {
    position: fixed;
    right: var(--margen);
    bottom: 16px;
    left: var(--margen);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 640px;
    margin-inline: auto;
    padding: 12px 16px;
    background: var(--fondo-elevado);
    border: 1px solid color-mix(in srgb, var(--acento) 55%, var(--borde-fuerte));
    border-radius: var(--radio-pequeno);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    color: var(--texto-suave);
    font-size: .875rem;
    line-height: 1.45;
}
.aviso-ver p { flex: 1; margin: 0; }
.aviso-ver strong { color: var(--texto); font-weight: 600; }
.aviso-ver a { flex: none; color: var(--texto-suave); }
.aviso-ver__falta { display: none; }
body:not(:has([data-ver-fachada])) .aviso-ver__esta { display: none; }
body:not(:has([data-ver-fachada])) .aviso-ver__falta { display: inline; }

/* ----- Aviso del otro idioma -----
   «This page is also available in English» (avisoIdioma(), plantilla.php):
   fijo abajo, para no mover la página al aparecer; lo enseña js/idioma.js. */
.aviso-idioma {
    position: fixed;
    right: var(--margen);
    bottom: 16px;
    left: var(--margen);
    z-index: 70;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    max-width: 520px;
    margin-inline: auto;
    padding: 12px 44px 12px 16px;
    background: var(--fondo-elevado);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    box-shadow: 0 16px 48px rgb(0 0 0 / .55);
    color: var(--texto);
    font-size: .9375rem;
}
.aviso-idioma p { flex: 1 1 200px; margin: 0; }
.aviso-idioma__cerrar {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--texto-suave);
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.aviso-idioma__cerrar:hover { color: var(--texto); }

/* ----- Transiciones entre páginas -----
   Paso suave de una página a otra (View Transitions entre documentos, sin
   JavaScript), como en una app. Donde no se admite, la carga de siempre. */
@view-transition { navigation: auto; }

/* ----- Movimiento reducido ----- */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .particulas { display: none; }
    .promo-puntos::after { animation: none; }
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ----- Página 404 (mostrarNoEncontrado()) ----- */
.no-encontrado {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 48px 72px;
    text-align: center;
}
.no-encontrado__cifra {
    margin: 0 0 8px;
    font-size: clamp(6rem, 4rem + 12vw, 11rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--borde-fuerte);
    user-select: none;
}
/* El cero, encendido como un neón con el color de acento del tema. */
.no-encontrado__cifra span {
    color: var(--acento);
    -webkit-text-stroke: 0;
    text-shadow: 0 0 24px color-mix(in srgb, var(--acento) 55%, transparent),
                 0 0 64px color-mix(in srgb, var(--acento) 30%, transparent);
    animation: neon-404 4s ease-in-out infinite;
}
@keyframes neon-404 {
    0%, 100% { opacity: 1; }
    46% { opacity: 1; }
    48% { opacity: .35; }
    50% { opacity: 1; }
    52% { opacity: .5; }
    54% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .no-encontrado__cifra span { animation: none; }
}
.no-encontrado__texto { max-width: 440px; }
.no-encontrado__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}
.no-encontrado__atajos { justify-content: center; margin-top: 28px; }
.no-encontrado__atajos a { text-decoration: none; }