/* ==========================================================================
   Livesic UI — capa de "design system" estilo functional-wod-manager
   --------------------------------------------------------------------------
   Reskin ADITIVO y reversible. No reemplaza markup: se carga DESPUÉS de
   livesic.css y livesic-theme.css y, con la misma especificidad de selector,
   gana por orden de fuente (sin !important).

   Mantiene la identidad azul/morado de Livesic: todo se construye sobre los
   tokens existentes --lv-theme-* (definidos en livesic-theme.css), por lo que
   el modo oscuro funciona sin trabajo extra.

   Piloto: pantalla de eventos ([livesic_events]). El resto de pantallas se
   irán adoptando una a una.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Bridge de tokens — vocabulario tipo fwm sobre los tokens de Livesic
   -------------------------------------------------------------------------- */
:root {
    /* Color: reaprovecha la paleta de marca de Livesic. */
    --lvui-primary:        var(--lv-theme-primary, #2563eb);
    --lvui-primary-hover:  var(--lv-theme-primary-hover, #1d4ed8);
    --lvui-primary-ink:    var(--lv-theme-primary-ink, #ffffff);
    --lvui-bg:             var(--lv-theme-bg, #f4f5f7);
    --lvui-surface:        var(--lv-theme-surface, #ffffff);
    --lvui-surface-2:      var(--lv-theme-surface-2, #f8fafc);
    --lvui-ink:            var(--lv-theme-ink, #0f172a);
    --lvui-muted:          var(--lv-theme-muted, #64748b);
    --lvui-border:         var(--lv-theme-border, #e2e8f0);
    --lvui-success:        var(--lv-theme-success, #16a34a);
    --lvui-warning:        var(--lv-theme-warning, #ca8a04);
    --lvui-danger:         var(--lv-theme-danger, #dc2626);
    --lvui-focus:          var(--lv-theme-focus, 0 0 0 3px rgba(37, 99, 235, 0.18));
    --lvui-gradient:       var(--lv-theme-brand-gradient, linear-gradient(135deg, #ff2d8d 0%, #7c3aed 100%));

    /* Radios y sombras: escala tipo fwm. */
    --lvui-radius-sm: 10px;
    --lvui-radius:    16px;
    --lvui-radius-lg: 22px;
    --lvui-shadow-sm: var(--lv-theme-shadow-soft, 0 1px 2px rgba(15, 23, 42, 0.06));
    --lvui-shadow-lg: var(--lv-theme-shadow, 0 18px 48px rgba(15, 23, 42, 0.14));

    /* Espaciado. */
    --lvui-space-2: 8px;
    --lvui-space-3: 12px;
    --lvui-space-4: 16px;
    --lvui-space-5: 24px;
    --lvui-space-6: 32px;

    /* Tipografía: misma familia que fwm. */
    --lvui-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   2. App shell — contenedor centrado con aire (estilo consola fwm)
   -------------------------------------------------------------------------- */
.livesic-events-wrapper {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--lvui-space-4);
    gap: var(--lvui-space-5);
    color: var(--lvui-ink);
    font-family: var(--lvui-font);
}

/* --------------------------------------------------------------------------
   Ancho uniforme para TODAS las páginas del plugin (escritorio y móvil).

   PROBLEMA: el contenedor de contenido del tema de WordPress (.entry-content,
   .wp-block-post-content, etc.) envuelve la salida de los shortcodes y le mete
   un padding/max-width lateral propio. Como los roots del plugin usan
   width:100%, quedan limitados por esa caja → demasiado margen en los laterales
   en TODAS las páginas, y reducir el padding interno no se nota.

   SOLUCIÓN: sacamos cada root de esa caja con un full-bleed (márgenes negativos
   calculados respecto al viewport) y reconstruimos la columna de contenido con
   padding lateral: máx. 1180px centrados (el mismo ancho que usa Market) con un
   gutter mínimo de 24px en escritorio y 12px en móvil.

   El término calc(50vw - 590px) hace de "auto-centrado": cuando el viewport
   supera los 1180px + gutters, el padding crece y el contenido queda centrado.
   -------------------------------------------------------------------------- */
/* IMPORTANTE: el tema (block theme FSE) constriñe los hijos directos del
   contenedor de contenido con
       .is-layout-constrained > :where(...){max-width:645px;margin:auto !important}
   cuya especificidad (0,1,0) iguala a un selector de una sola clase y gana por
   orden de cascada, además con !important en los márgenes. Por eso DUPLICAMOS la
   clase (especificidad 0,2,0 → gana en max-width) y marcamos los márgenes como
   !important (gana al margin:auto !important del tema por mayor especificidad). */
.livesic-events-wrapper.livesic-events-wrapper,
.livesic-detail-page.livesic-detail-page,
.lv-profile.lv-profile,
.lv-market.lv-market,
.lv-bcalls.lv-bcalls,
.lv-search.lv-search,
.lv-legal-page.lv-legal-page,
.lv-social-shell.lv-social-shell,
.lv-auth-shell.lv-auth-shell,
.livesic-auth-shell.livesic-auth-shell {
    width: auto;
    max-width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: max(24px, env(safe-area-inset-left, 0px), calc(50vw - 590px));
    padding-right: max(24px, env(safe-area-inset-right, 0px), calc(50vw - 590px));
    box-sizing: border-box;
}

@media (max-width: 782px) {
    .livesic-events-wrapper.livesic-events-wrapper,
    .livesic-detail-page.livesic-detail-page,
    .lv-profile.lv-profile,
    .lv-market.lv-market,
    .lv-bcalls.lv-bcalls,
    .lv-search.lv-search,
    .lv-legal-page.lv-legal-page,
    .lv-social-shell.lv-social-shell,
    .lv-auth-shell.lv-auth-shell,
    .livesic-auth-shell.livesic-auth-shell {
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }
}

/* El full-bleed usa 100vw, que en escritorio incluye la barra de scroll:
   recortamos el desbordamiento horizontal residual sin crear un contenedor
   de scroll (clip no rompe position:sticky). */
html {
    overflow-x: clip;
}

/* Mapa hero: sombra coherente con las cards.
   OJO: NO usar overflow:hidden aquí — recortaría el panel de filtros expandido
   (#livesic-extra-filters) y los popups de Leaflet, que deben poder salirse del
   mapa para verse. El redondeo de esquinas lo aporta .livesic-map-box. */
.livesic-events-wrapper .livesic-map-container--hero {
    box-shadow: var(--lvui-shadow-sm);
}

/* --------------------------------------------------------------------------
   3. Grid de tarjetas — de 1 columna a grid responsive multi-columna
   -------------------------------------------------------------------------- */
.livesic-events-grid {
    /* min(320px, 100%) evita que la columna mínima de 320px desborde en
       móviles estrechos (que provocaba scroll horizontal y "descentraba" el
       mapa y el resto de la página). */
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: var(--lvui-space-4);
    align-items: start;
}

/* La línea "N conciertos encontrados" ocupa toda la fila como cabecera. */
.livesic-events-grid > p {
    grid-column: 1 / -1;
    font-size: 15px;
    color: var(--lvui-muted);
}
.livesic-events-grid > p strong {
    color: var(--lvui-ink);
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   4. Tarjeta de evento — tratamiento "card" de fwm
   -------------------------------------------------------------------------- */
.livesic-event-card {
    border: 1px solid var(--lvui-border);
    border-radius: var(--lvui-radius-lg);
    background: var(--lvui-surface);
    box-shadow: var(--lvui-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.livesic-event-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lvui-shadow-lg);
    border-color: color-mix(in srgb, var(--lvui-primary) 35%, var(--lvui-border));
}
.livesic-event-card.is-active {
    border-color: var(--lvui-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--lvui-primary) 30%, transparent), var(--lvui-shadow-sm);
}

.livesic-event-card__media {
    overflow: hidden;
}
.livesic-event-card__media img {
    height: 200px;
    transition: transform .35s ease;
    background: var(--lvui-surface-2);
}
.livesic-event-card:hover .livesic-event-card__media img {
    transform: scale(1.04);
}

.livesic-event-card__body {
    padding: var(--lvui-space-4) var(--lvui-space-5);
    gap: var(--lvui-space-3);
    flex: 1 1 auto;
}

.livesic-event-card__title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--lvui-ink);
}

.livesic-event-card__meta {
    color: var(--lvui-muted);
    font-size: 13.5px;
    line-height: 1.5;
}
.livesic-event-card__meta strong {
    color: var(--lvui-ink);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Badges — pill con tinte suave derivado del token (estilo fwm-tag)
   -------------------------------------------------------------------------- */
.livesic-badge {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: var(--lvui-surface-2);
    color: var(--lvui-muted);
}
.livesic-badge--green {
    background: color-mix(in srgb, var(--lvui-success) 14%, transparent);
    color: var(--lvui-success);
}
.livesic-badge--blue {
    background: color-mix(in srgb, var(--lvui-primary) 14%, transparent);
    color: var(--lvui-primary);
}
.livesic-badge--amber {
    background: color-mix(in srgb, var(--lvui-warning) 16%, transparent);
    color: var(--lvui-warning);
}

/* --------------------------------------------------------------------------
   6. Botones de la tarjeta — look fwm: primario sólido, resto neutro y limpio
   -------------------------------------------------------------------------- */
.livesic-event-card__links a,
.livesic-event-card__actions .livesic-btn {
    min-height: 40px;
    border-radius: var(--lvui-radius-sm);
    border: 1px solid var(--lvui-border);
    background: var(--lvui-surface);
    color: var(--lvui-ink);
    font-weight: 600;
    font-size: 13px;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.livesic-event-card__links a:hover,
.livesic-event-card__actions .livesic-btn:hover {
    background: var(--lvui-surface-2);
    border-color: color-mix(in srgb, var(--lvui-primary) 30%, var(--lvui-border));
    transform: translateY(-1px);
}

/* Acción principal: relleno con color de marca. */
.livesic-event-card__links .is-primary,
.livesic-event-card__actions .is-tickets {
    background: var(--lvui-primary);
    color: var(--lvui-primary-ink);
    border-color: var(--lvui-primary);
}
.livesic-event-card__links .is-primary:hover,
.livesic-event-card__actions .is-tickets:hover {
    background: var(--lvui-primary-hover);
    border-color: var(--lvui-primary-hover);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--lvui-primary) 30%, transparent);
}

/* Acciones secundarias (artista, sala, guardar, seguir, cómo llegar):
   tinte suave neutro coherente; el color de marca queda para lo principal. */
.livesic-event-card__links .is-artist,
.livesic-event-card__actions .is-follow,
.livesic-event-card__links .is-venue,
.livesic-event-card__actions .is-save,
.livesic-event-card__actions .is-directions {
    background: var(--lvui-surface);
    color: var(--lvui-ink);
    border-color: var(--lvui-border);
}
.livesic-event-card__links .is-artist:hover,
.livesic-event-card__actions .is-follow:hover,
.livesic-event-card__links .is-venue:hover,
.livesic-event-card__actions .is-save:hover,
.livesic-event-card__actions .is-directions:hover {
    background: color-mix(in srgb, var(--lvui-primary) 8%, var(--lvui-surface));
    border-color: color-mix(in srgb, var(--lvui-primary) 35%, var(--lvui-border));
    box-shadow: none;
}

/* Estado activo (guardado / siguiendo) marcado con color de marca suave. */
.livesic-event-card__actions .is-save[data-saved="1"],
.livesic-event-card__actions .is-follow[data-following="1"] {
    background: color-mix(in srgb, var(--lvui-primary) 12%, transparent);
    color: var(--lvui-primary);
    border-color: color-mix(in srgb, var(--lvui-primary) 35%, transparent);
}

.livesic-event-card__links a:focus-visible,
.livesic-event-card__actions .livesic-btn:focus-visible {
    outline: none;
    box-shadow: var(--lvui-focus);
}

/* Botones base genéricos fuera de las tarjetas, coherentes con el sistema. */
.livesic-btn--primary {
    background: var(--lvui-primary);
    color: var(--lvui-primary-ink);
    border-color: var(--lvui-primary);
}
.livesic-btn--primary:hover {
    background: var(--lvui-primary-hover);
    border-color: var(--lvui-primary-hover);
}

/* --------------------------------------------------------------------------
   7. Pista de login y estado vacío
   -------------------------------------------------------------------------- */
.livesic-login-hint {
    border: 1px dashed color-mix(in srgb, var(--lvui-primary) 35%, var(--lvui-border));
    border-radius: var(--lvui-radius-sm);
    background: var(--lvui-surface-2);
    color: var(--lvui-muted);
    font-size: 13px;
}
.livesic-login-hint a {
    color: var(--lvui-primary);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Filtros del mapa — panel expandido + campos de formulario
   --------------------------------------------------------------------------
   Conserva el efecto "glass" sobre el mapa, pero lo construye con tokens para
   que radios, foco y modo oscuro queden coherentes con el resto del sistema.
   La barra superior sobre el mapa (búsqueda, chips, botones glass) se respeta
   tal cual: vive sobre imagen y su contraste es intencional.
   -------------------------------------------------------------------------- */
.livesic-map-filters-panel {
    background: color-mix(in srgb, var(--lvui-surface) 92%, transparent);
    border: 1px solid var(--lvui-border);
    border-radius: var(--lvui-radius-lg);
    box-shadow: var(--lvui-shadow-lg);
    /* El panel está posicionado absoluto sobre el mapa; los absolutos no aportan
       altura al documento, así que en móvil (rejilla a 1 columna) su parte
       inferior quedaba inalcanzable. Lo limitamos al alto del viewport y le
       damos scroll interno para poder llegar al botón "Aplicar". La versión
       fullscreen tiene su propia regla (mayor especificidad) y no se ve afectada. */
    max-height: min(72vh, calc(100vh - 300px));
    max-height: min(72dvh, calc(100dvh - 300px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tarjetas de campo dentro del panel. */
.livesic-map-filters-panel .livesic-field {
    border: 1px solid var(--lvui-border);
    border-radius: var(--lvui-radius);
    background: var(--lvui-surface-2);
}
.livesic-map-filters-panel .livesic-field--location {
    background: var(--lvui-surface);
}

/* Etiquetas y controles de formulario (genéricos, también fuera del mapa). */
.livesic-field label {
    color: var(--lvui-ink);
}
.livesic-field input,
.livesic-field select,
.livesic-field textarea {
    border: 1px solid var(--lvui-border);
    border-radius: var(--lvui-radius-sm);
    /* background-color (no la abreviatura "background") para NO pisar la flecha
       SVG del <select> (background-image/repeat/position); con "background" se
       reseteaba background-repeat a repeat y el chevron se repetía en mosaico. */
    background-color: var(--lvui-surface);
    color: var(--lvui-ink);
}
.livesic-field input:focus,
.livesic-field select:focus,
.livesic-field textarea:focus {
    border-color: var(--lvui-primary);
    box-shadow: var(--lvui-focus);
    background-color: var(--lvui-surface);
}

/* Botones del panel de filtros: aplicar = marca, secundario = neutro. */
.livesic-map-filters-panel .livesic-btn--filter-apply {
    background: var(--lvui-primary);
    color: var(--lvui-primary-ink);
    border-color: var(--lvui-primary);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--lvui-primary) 28%, transparent);
}
.livesic-map-filters-panel .livesic-btn--filter-apply:hover {
    background: var(--lvui-primary-hover);
    border-color: var(--lvui-primary-hover);
}
.livesic-map-filters-panel .livesic-btn--filter-secondary {
    color: var(--lvui-muted);
    border-color: var(--lvui-border);
    background: var(--lvui-surface);
}

/* --------------------------------------------------------------------------
   9. Header — toque fwm sutil (radios y elevación de los desplegables)
   --------------------------------------------------------------------------
   Header y footer ya están token-izados y soportan modo oscuro. Solo afinamos
   radios y sombras de los menús desplegables para igualar el look "card" de
   fwm. Cambios mode-agnostic: no tocan color, así no interfieren con las
   reglas de dark mode existentes.
   -------------------------------------------------------------------------- */
.livesic-site-header__group-menu,
.livesic-site-header__account-menu {
    border-radius: var(--lvui-radius);
    box-shadow: var(--lvui-shadow-lg);
}
.livesic-site-header__account-card {
    border-radius: var(--lvui-radius-sm);
}

/* Mapa en pantalla completa: ocultar la cabecera fija. Aunque el contenedor
   fullscreen tiene z-index alto, si el tema crea un contexto de apilamiento
   propio la cabecera sticky puede tapar el botón de salir. Ocultarla mientras
   dura el fullscreen es a prueba de temas y además es lo correcto en UX.
   El JS añade/quita body.livesic-map-fullscreen al entrar/salir. */
body.livesic-map-fullscreen .livesic-site-header {
    display: none !important;
}

/* --------------------------------------------------------------------------
   10. Perfil — pulido fwm + corrección de modo oscuro
   --------------------------------------------------------------------------
   El perfil ya usa el sistema de tokens lv-*. Aquí: cabecera con gradiente de
   marca, elevación suave con hover en las tarjetas, y token-izado de la barra
   de pestañas (que usaba #fff hardcodeado → se veía en blanco en dark mode).
   -------------------------------------------------------------------------- */
.lv-profile-hero__cover {
    background: var(--lvui-gradient);
}

.lv-profile-hero {
    box-shadow: var(--lvui-shadow-lg);
}

.lv-profile .lv-card,
.lv-profile-event-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lv-profile-event-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lvui-shadow-lg);
    border-color: color-mix(in srgb, var(--lvui-primary) 35%, var(--lvui-border));
}

/* Barra de pestañas: corregir colores hardcodeados para que respete el tema. */
.lv-profile-tabs {
    background: var(--lvui-surface);
    border-bottom: 1px solid var(--lvui-border);
}
.lv-profile-tabs__select {
    border: 1px solid var(--lvui-border);
    border-radius: var(--lvui-radius-sm);
    background: var(--lvui-surface);
    color: var(--lvui-ink);
}
.lv-tab {
    color: var(--lvui-muted);
    border-radius: var(--lvui-radius-sm);
}
.lv-tab:hover {
    background: var(--lvui-surface-2);
    color: var(--lvui-ink);
}

/* --------------------------------------------------------------------------
   11. Detalle de evento / artista / sala — pulido fwm
   --------------------------------------------------------------------------
   Las pantallas de detalle (lv-detail__*) ya tienen cobertura de modo oscuro
   mediante overrides dedicados en livesic-theme.css (mayor especificidad), así
   que aquí aplicamos solo el pulido visual fwm: radios y sombras de la escala,
   gradiente de marca en hero/cover (igual que en el perfil), elevación con
   hover en las tarjetas y botón principal en color de marca. Las reglas de
   color que solo afectan al modo claro; el dark mode existente las supera.
   -------------------------------------------------------------------------- */

/* Contenedor y paneles: radios y sombras de la escala fwm. */
.lv-detail {
    border-radius: var(--lvui-radius-lg);
    box-shadow: var(--lvui-shadow-lg);
}
.lv-detail__panel {
    border-radius: var(--lvui-radius);
    box-shadow: var(--lvui-shadow-sm);
}
.lv-detail__venue {
    border-radius: var(--lvui-radius);
}

/* Hero (evento) y cover (artista/sala): gradiente de marca, como el perfil. */
.lv-detail__hero,
.lv-detail__cover {
    background: var(--lvui-gradient);
    background-size: cover;
    background-position: center;
}

/* Chip de fecha: radio coherente. */
.lv-detail__date-chip,
.lv-event-card__date {
    border-radius: var(--lvui-radius-sm);
}

/* Póster del evento: foco de marca por token. */
.lv-detail__poster {
    border-radius: var(--lvui-radius-sm);
}
.lv-detail__poster:hover {
    border-color: var(--lvui-primary);
}
.lv-detail__poster:focus-visible {
    outline: none;
    box-shadow: var(--lvui-focus);
}

/* Tarjetas de eventos relacionados: misma elevación con hover que el listado. */
.lv-event-card {
    border-radius: var(--lvui-radius);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lv-event-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--lvui-primary) 45%, var(--lvui-border));
    box-shadow: var(--lvui-shadow-lg);
}

/* Botón principal del detalle (Entradas / Cómo llegar): color de marca.
   Especificidad (0,2,0) gana sobre .lv-btn--primary en modo claro; el override
   de dark mode de livesic-theme.css tiene mayor especificidad y se mantiene. */
.lv-detail__actions .lv-btn--primary,
.lv-detail__venue-actions .lv-btn--primary {
    background: var(--lvui-primary);
    border-color: var(--lvui-primary);
    color: var(--lvui-primary-ink);
}
.lv-detail__actions .lv-btn--primary:hover,
.lv-detail__venue-actions .lv-btn--primary:hover {
    background: var(--lvui-primary-hover);
    border-color: var(--lvui-primary-hover);
}

/* --------------------------------------------------------------------------
   12. Band-calls (buscar banda / candidaturas) y Market
   --------------------------------------------------------------------------
   Ambas pantallas ya usan el sistema de tokens lv-*. Band-calls tiene además
   cobertura de modo oscuro propia; Market hereda el modo oscuro vía el remapeo
   de tokens --lv-* del tema. Aquí unificamos la "sensación de tarjeta" (misma
   elevación con hover y borde de marca que en eventos, perfil y detalle) y
   corregimos un par de fondos hardcodeados que no respetaban el tema.
   -------------------------------------------------------------------------- */

/* Band-calls: armonizar el hover de tarjeta con el resto del sistema. */
.lv-bcall-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lvui-shadow-lg);
    border-color: color-mix(in srgb, var(--lvui-primary) 45%, var(--lvui-border));
}

/* Market: añadir la elevación con hover que le faltaba a las tarjetas. */
.lv-market-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lv-market-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lvui-shadow-lg);
    border-color: color-mix(in srgb, var(--lvui-primary) 45%, var(--lvui-border));
}

/* Marcador de imagen sin foto: usar superficie del tema (antes era un azul
   claro fijo que se veía fuera de sitio en modo oscuro). Especificidad (0,2,0)
   para ganar con seguridad sobre la regla base de market.css. */
.lv-market .lv-market-card__image {
    background-color: var(--lv-theme-surface-2, #e8eef8);
}

/* --------------------------------------------------------------------------
   13. Navegación tipo app — menús estilo functional-wod-manager
   --------------------------------------------------------------------------
   Los menús de livesic eran "de web" (enlaces de texto, hover de color). fwm
   usa items tipo "pill": fondo redondeado, hover con tinte de marca suave y
   estado activo con fondo de marca + texto de marca. Aplicamos ese lenguaje
   SOLO con CSS (sin tocar HTML ni JS), para: nav del header en escritorio,
   items de los desplegables y filas del menú móvil. Los colores de marca van
   por token, así el modo oscuro (overrides de theme.css) sigue funcionando.
   -------------------------------------------------------------------------- */

/* ── Header escritorio: nav como "control segmentado" tipo app ──
   El nav deja de estirarse a todo el ancho y se convierte en una barra
   redondeada (pista) que contiene las pastillas. Así se ve app desde el primer
   vistazo (no solo al hacer hover). Las pastillas se rellenan de marca en
   hover y cuando su desplegable está abierto. */
.livesic-site-header__nav {
    gap: 4px;
    flex: 0 1 auto; /* antes 1 1 auto: que no ocupe todo el ancho */
    background: var(--lvui-surface-2);
    padding: 5px;
    border-radius: 999px;
}
.livesic-site-header__nav a,
.livesic-site-header__group-toggle {
    padding: 8px 14px;
    border-radius: 999px;
    transition: background-color .14s ease, color .14s ease;
}
.livesic-site-header__nav a:hover,
.livesic-site-header__group-toggle:hover,
.livesic-site-header__group.is-open .livesic-site-header__group-toggle {
    background: color-mix(in srgb, var(--lvui-primary) 14%, transparent);
    color: var(--lvui-primary);
}

/* ── Items de los desplegables (Descubrir, Matching, cuenta): filas app ── */
.livesic-site-header__group-menu a {
    padding: 10px 12px;
    border-radius: var(--lvui-radius-sm);
    min-height: 42px;
    align-items: center;
    display: flex;
    gap: 10px;
}
.livesic-site-header__group-menu a:hover {
    background: color-mix(in srgb, var(--lvui-primary) 10%, transparent);
    color: var(--lvui-primary);
}

/* ── Menú móvil: filas grandes tipo app, con tinte de marca al pulsar ── */
.livesic-site-header__mobile a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: var(--lvui-radius-sm);
    font-weight: 600;
    transition: background-color .14s ease, color .14s ease;
}
.livesic-site-header__mobile a:hover,
.livesic-site-header__mobile a:active {
    background: color-mix(in srgb, var(--lvui-primary) 10%, transparent);
    color: var(--lvui-primary);
}

/* ── Pestañas de perfil: separación tipo pills ──
   Las pills activas ya van rellenas de marca (en livesic-profile.css) y su
   hover/color lo afinamos en la sección 10; aquí solo ajustamos la separación
   para que se lean como una barra de pestañas de app. */
.lv-profile-tabs__inner {
    gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .livesic-event-card,
    .livesic-event-card__media img,
    .livesic-event-card__links a,
    .livesic-event-card__actions .livesic-btn,
    .lv-profile .lv-card,
    .lv-profile-event-card,
    .lv-event-card,
    .lv-bcall-card,
    .lv-market-card,
    .livesic-site-header__nav a,
    .livesic-site-header__group-toggle,
    .livesic-site-header__group-menu a,
    .livesic-site-header__mobile a {
        transition: none;
    }
}

/* Web Push: aviso global de activacion, por encima de la barra movil. */
.lv-push-prompt {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10020;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(420px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid var(--lv-border, rgba(255,255,255,.14));
    border-radius: 8px;
    background: var(--lv-surface, #18191d);
    box-shadow: 0 12px 32px rgba(0,0,0,.28);
}
.lv-push-prompt[hidden] { display: none; }
.lv-push-prompt__copy { display: grid; gap: 2px; min-width: 0; }
.lv-push-prompt__copy strong { font-size: 14px; }
.lv-push-prompt__copy span { color: var(--lv-text-muted, #a6a8ae); font-size: 12px; line-height: 1.35; }
.lv-push-prompt__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.lv-push-prompt__close {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--lv-border, rgba(255,255,255,.14));
    border-radius: 8px;
    color: var(--lv-text-muted, #a6a8ae);
    background: transparent;
    cursor: pointer;
}
.lv-push-prompt__close:hover,
.lv-push-prompt__close:focus-visible {
    color: var(--lv-text, #fff);
    border-color: currentColor;
    outline: none;
}
.lv-push-prompt__close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
@media (max-width: 860px) {
    /* Por encima de la barra inferior movil: mide calc(60px + safe-area), asi que
       el hueco tiene que llevar el MISMO env() o en iPhone con indicador de inicio
       (safe-area 34px) el aviso queda detras de la barra (2026-09-04). */
    .lv-push-prompt { right: 16px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); z-index: 2147483001; align-items: flex-start; }
    .lv-push-prompt .lv-btn { flex: 0 0 auto; }
}
@media (max-width: 520px) {
    .lv-push-prompt { gap: 10px; padding: 12px; }
    .lv-push-prompt__actions { gap: 6px; }
    .lv-push-prompt__close { width: 30px; height: 30px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Portadas a prueba de cualquier imagen (2026-08-03).
   Las cintas de portada (perfil, artista/banda, sala, técnico, convocatoria,
   evento) recortan con background-size:cover; con el encuadre centrado (o el
   0,0 que dejaba algún shorthand) las fotos verticales cortaban las cabezas.
   La imagen SIEMPRE rellena la cinta (nada de bandas letterbox: se probó un
   modo blur-fill con contain y el usuario lo descartó — además sus
   pseudo-elementos posicionados tapaban el avatar que se solapa a la portada);
   lo que cambia es el ENCUADRE: sesgo SUPERIOR (center 22%), porque en fotos
   de personas la cara vive en el tercio de arriba. El prefijo .livesic-app da
   más especificidad que los shorthands `background:` repartidos por estas
   hojas y que el <style> del carrusel de sala (venue-detail).
   Nota: .lv-event-card__media queda fuera a propósito (los carteles de evento
   están pensados centrados). */
.livesic-app .lv-detail__cover,
.livesic-app .lv-detail__hero,
.livesic-app .lv-musician__cover,
.livesic-app .lv-bcall-card__cover,
.livesic-app .lv-venue-carousel__slide,
.livesic-app .lv-profile-hero__cover {
    background-size: cover;
    background-position: center 22%;
}

/* ──────────────────────────────────────────────────────────────────────────
   Portada de ficha: ancho de siempre, ALTURA según la imagen (2026-08-05).
   La altura fija (220 px) convertía cualquier imagen cuadrada o vertical en una
   tira estrecha: con `cover` solo se veía ~1/5 de un logo, y encima desplazada
   por el sesgo superior. Ahora el Blade publica la proporción REAL de la imagen
   en --lv-cover-ratio (App\Support\Livesic::coverRatioStyle) y la cinta la usa
   como aspect-ratio, así que se ve entera y sigue ocupando todo el ancho.
   - Se acota con max-height para que un logo cuadrado no ocupe la pantalla
     entera en escritorio; ahí vuelve a recortar, pero mucho menos que antes.
   - Con la proporción acotada el encuadre pasa a estar CENTRADO (el sesgo
     superior 22% existía para no cortar cabezas cuando el recorte era brutal).
   - Sin --lv-cover-ratio (portadas importadas de otros hosts) NADA cambia.
   Ver [[livesic-cover-fit]]. */
.livesic-app .lv-detail__cover[style*="--lv-cover-ratio"],
.livesic-app .lv-musician__cover[style*="--lv-cover-ratio"] {
    height: auto;
    aspect-ratio: var(--lv-cover-ratio);
    max-height: min(68vh, 620px);
    background-position: center;
}

/* Carrusel (sala/promotora): los slides van absolutos dentro de la cinta, así
   que heredan su nueva altura; la portada (1er slide) encaja exacta y las demás
   fotos recortan centradas. */
.livesic-app .lv-detail__cover[style*="--lv-cover-ratio"] .lv-venue-carousel__slide {
    background-position: center;
}

/* ── Tipo de público del evento (App\Support\LivesicAudience) ──────────────────
   Va SIN etiqueta: solo el icono, junto al título, en tono apagado para que no
   compita con nada; el nombre de la opción se lee en el tooltip. Sin scope
   `.livesic-app` a propósito: también se pinta dentro de los popups de Leaflet,
   que Leaflet cuelga fuera del contenedor de la app. */
.lv-audience {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -2px;
    margin-left: 6px;
    color: var(--lv-theme-muted, #64748b);
    opacity: .7;
    cursor: help;
    transition: opacity .15s ease, color .15s ease;
}
.lv-audience:hover {
    opacity: 1;
    color: var(--lv-theme-ink, #0f172a);
}
.lv-audience svg { display: block; }
/* El +18 es el único con color propio: es una restricción de acceso y conviene
   que se distinga de un vistazo, sin llegar a ser una alarma. */
.lv-audience--adults { color: #b45309; opacity: .8; }
.lv-audience--adults:hover { color: #92400e; }
/* ==========================================================================
   9. Mapa de eventos — CONSOLA ÚNICA en escritorio (2026-08-30)
   --------------------------------------------------------------------------
   Antes, sobre el mapa se apilaban cuatro bandas sueltas (promocionados,
   resultados, buscador + botones y chips de filtros), cada una con su ancho,
   su color y su cristal. En escritorio (>=761px) pasan a UNA sola barra:

     [ (lupa) buscar ] [ Filtros ] [ chips ] ····· [ Ver todo ] [ GPS ] | info

   El MARCADO NO CAMBIA: los controles se colocan en una rejilla y el cristal
   de la barra lo pinta un ::before que abarca toda la fila 1. Por eso la misma
   regla vale para la agenda de registrados (events.blade.php) y para el mapa
   público de invitados (events-guest.blade.php, server-only).

   Colores por tokens (--lvui-*) => claro y oscuro salen solos; solo hacen
   falta overrides para las reglas !important del modo oscuro de
   livesic-theme.css (buscador y .livesic-btn--map).

   /!\ TODO va dentro de @media (min-width:761px): la barra compacta de MÓVIL
   (rejilla de dos filas de livesic.css) no se toca.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
    .livesic-map-container--hero .livesic-map-overlay {
        display: grid;
        grid-template-columns:
            minmax(120px, 460px)  /* buscador          */
            auto                  /* Filtros           */
            auto                  /* chips de filtros  */
            minmax(0, 1fr)        /* aire              */
            auto                  /* Ver todo          */
            auto                  /* GPS               */
            auto;                 /* info (resultados) */
        align-items: center;
        column-gap: 4px;
        row-gap: 20px;
        top: 18px;
        left: 22px;
        right: 22px;
    }

    /* Cristal ÚNICO de la barra: es un item más de la rejilla (fila 1, de lado
       a lado). Los márgenes negativos hacen de padding de la barra. */
    .livesic-map-container--hero .livesic-map-overlay::before {
        content: '';
        grid-area: 1 / 1 / 2 / -1;
        align-self: stretch;
        /* /!\ backdrop-filter CREA contexto de apilamiento: sin z-index negativo
           el cristal se pinta DESPUES del texto de los controles y los tapa
           (solo se veian el buscador y el GPS, que van posicionados). Como el
           overlay ya es un contexto propio (z-index:650), el -1 no se escapa
           por debajo del mapa. */
        z-index: -1;
        margin: -6px -10px;
        border: 1px solid var(--lvui-border);
        border-radius: var(--lvui-radius);
        background: color-mix(in srgb, var(--lvui-surface) 92%, transparent);
        box-shadow: var(--lvui-shadow-lg);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        pointer-events: none;
    }

    /* Los contenedores intermedios salen del layout para que cada control caiga
       en su celda (mismo truco que la barra de móvil). */
    .livesic-map-container--hero .livesic-map-topbar,
    .livesic-map-container--hero .livesic-map-topbar__actions {
        display: contents;
    }

    .livesic-map-container--hero .livesic-map-search         { grid-area: 1 / 1; }
    .livesic-map-container--hero #livesic-toggle-filters     { grid-area: 1 / 2; }
    .livesic-map-container--hero .livesic-map-filter-summary { grid-area: 1 / 3; }
    .livesic-map-container--hero .livesic-map-overlay [data-livesic-fit] { grid-area: 1 / 5; }
    .livesic-map-container--hero .livesic-map-info           { grid-area: 1 / 7; }

    /* El GPS deja de flotar en la esquina: es un control más de la barra. */
    .livesic-map-container--hero .livesic-map-locate {
        grid-area: 1 / 6;
        position: static;
        width: 36px;
        min-width: 36px;
        height: 36px;
    }

    /* El panel de filtros cuelga de la barra y comparte sus bordes. */
    .livesic-map-container--hero .livesic-map-filters-panel {
        grid-area: 2 / 1 / 3 / -1;
        margin-inline: -10px;
    }

    /* ── Controles PLANOS dentro de la barra ─────────────────────────────
       El cristal ya lo pone la barra; cada control pierde el suyo para no
       apilar cajas dentro de cajas. */
    .livesic-map-container--hero .livesic-map-overlay .livesic-map-search__input {
        height: 36px;
        padding: 0 10px 0 32px;
        border: 0;
        border-radius: var(--lvui-radius-sm);
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: var(--lvui-ink);
        font-size: 12px;
    }

    .livesic-map-container--hero .livesic-map-overlay .livesic-map-search__input:focus {
        background: color-mix(in srgb, var(--lvui-ink) 6%, transparent);
    }

    .livesic-map-container--hero .livesic-map-overlay .livesic-map-search__icon {
        left: 9px;
        width: 15px;
        height: 15px;
        color: var(--lvui-muted);
    }

    .livesic-map-container--hero .livesic-map-overlay .livesic-btn--map {
        height: 36px;
        padding: 0 11px;
        gap: 6px;
        border: 0;
        border-radius: var(--lvui-radius-sm);
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: var(--lvui-ink);
        font-size: 12px;
    }

    .livesic-map-container--hero .livesic-map-overlay .livesic-btn--map:hover {
        background: var(--lv-theme-hover, rgba(15, 23, 42, 0.07));
    }

    /* Filtros aplicados: el botón se enciende con el color de marca. */
    .livesic-map-container--hero .livesic-map-overlay .livesic-btn--map.livesic-btn--active {
        background: var(--lvui-primary);
        border-color: transparent;
        color: var(--lvui-primary-ink);
    }

    /* ── Chips de filtros (fechas) ───────────────────────────────────────── */
    .livesic-map-container--hero .livesic-map-overlay .livesic-map-filter-summary {
        flex-wrap: nowrap;
        gap: 4px;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .livesic-map-container--hero .livesic-map-overlay .livesic-map-filter-chip {
        min-width: 0;
        height: 36px;
        padding: 0 11px;
        border-radius: var(--lvui-radius-sm);
        background: color-mix(in srgb, var(--lvui-ink) 7%, transparent);
        box-shadow: none;
        color: var(--lvui-ink);
        font-size: 11px;
    }

    .livesic-map-container--hero .livesic-map-overlay .livesic-map-filter-summary:hover .livesic-map-filter-chip {
        background: color-mix(in srgb, var(--lvui-ink) 12%, transparent);
    }

    .livesic-map-container--hero .livesic-map-overlay .livesic-map-filter-chip strong {
        max-width: 210px;
        color: var(--lvui-ink);
        font-size: 12px;
    }

    /* ── Bloque de información (resultados + promocionados) ──────────────
       Ocupa el extremo derecho de la barra, separado por un filete. Las dos
       píldoras se funden en dos líneas de texto; el conjunto sigue siendo el
       botón que abre la lista completa. */
    .livesic-map-container--hero .livesic-map-overlay .livesic-map-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 1px;
        /* SIN min-width:0 a propósito: la columna 'auto' toma como tamaño base la
           contribución min-content del bloque; con min-width:0 esa base es 0, la
           rejilla le reparte menos ancho del que ocupa el texto y el contador se
           desborda hacia la izquierda tapando el GPS (visto a 800px). */
        min-height: 36px;
        padding: 0 4px 0 12px;
        margin-left: 4px;
        border-left: 1px solid var(--lvui-border);
    }

    .livesic-map-container--hero .livesic-map-overlay .livesic-map-info .livesic-map-results-count,
    .livesic-map-container--hero .livesic-map-overlay .livesic-map-info .livesic-map-promoted-count {
        width: auto;
        max-width: none;
        align-self: flex-end;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: var(--lvui-muted);
        font-size: 10.5px;
        line-height: 1.3;
        white-space: nowrap;
    }

    .livesic-map-container--hero .livesic-map-overlay .livesic-map-info .livesic-map-results-count strong,
    .livesic-map-container--hero .livesic-map-overlay .livesic-map-info .livesic-map-promoted-count strong {
        color: var(--lvui-ink);
        font-size: 12px;
    }

    /* El contador abre la lista: se subraya al pasar por encima. */
    .livesic-map-container--hero .livesic-map-overlay .livesic-map-info .livesic-map-results-count:hover {
        color: var(--lvui-ink);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* Sin resultados: el aviso pasa de amarillo (pensado para píldora oscura)
       a ámbar legible sobre el cristal claro de la barra. */
    .livesic-map-container--hero .livesic-map-overlay .livesic-map-empty-filter-message {
        color: var(--lvui-warning);
        font-size: 10.5px;
    }

    /* ── Modo oscuro: neutralizar los !important de livesic-theme.css ────── */
    :root[data-lv-theme="dark"] .livesic-map-container--hero .livesic-map-overlay .livesic-map-search__input {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    :root[data-lv-theme="dark"] .livesic-map-container--hero .livesic-map-overlay .livesic-map-search__input:focus {
        background: color-mix(in srgb, var(--lvui-ink) 10%, transparent) !important;
    }

    :root[data-lv-theme="dark"] .livesic-map-container--hero .livesic-map-overlay .livesic-btn--map {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: var(--lvui-ink) !important;
    }

    :root[data-lv-theme="dark"] .livesic-map-container--hero .livesic-map-overlay .livesic-btn--map:hover {
        background: var(--lv-theme-hover, rgba(255, 255, 255, 0.1)) !important;
    }

    :root[data-lv-theme="dark"] .livesic-map-container--hero .livesic-map-overlay .livesic-btn--map.livesic-btn--active {
        background: var(--lvui-primary) !important;
        border-color: transparent !important;
        color: var(--lvui-primary-ink) !important;
    }

    :root[data-lv-theme="dark"] .livesic-map-container--hero .livesic-map-overlay .livesic-map-filter-summary {
        background: none;
        border-color: transparent;
    }

    :root[data-lv-theme="dark"] .livesic-map-container--hero .livesic-map-overlay .livesic-map-info .livesic-map-results-count,
    :root[data-lv-theme="dark"] .livesic-map-container--hero .livesic-map-overlay .livesic-map-info .livesic-map-promoted-count {
        background: none;
        border-color: transparent;
        color: var(--lvui-muted);
    }
}