/* =====================================================================
   puente-bareyo.css — capa de marca «Bareyo · Caminos de contraste» sobre los
   menús del mapa (kit interfaz-golf360, tema temas/bareyo.css).
   Se carga el ÚLTIMO (tras styles.css, styles-v3.css, css/cumbres.css, el kit y el tema)
   y va en SHELL_ASSETS del sw.js.

   Escrito para el v3 de 2026-08-28 (marca + chips arriba, rail en 3 bloques, dock de
   info útil). NO renombra ni añade clases: restila los selectores que ya usa app.js.

   Reglas del lenguaje (skill interfaz-golf360):
     · dos formas: píldora (99px) para controles, tarjeta (18px) para información, hoja 22px
     · un solo color de marca en el marco: los 5 colores de categoría se quedan EN EL MAPA
     · activo = relleno sólido de marca con texto blanco · sombra teñida de verde, sin cristal
     · el azul cielo del logotipo es el único acento: foco de teclado y todo lo AÉREO
     · toque ≥ 44 px

   Compatibilidad: donde se usa --g3-panel (un color-mix()) va antes un fondo opaco de reserva,
   para los navegadores sin color-mix() (WebView de Android anterior a 2023, iOS < 16.2).

   Alcance: web (móvil, tableta, escritorio). El tótem (html[data-kiosco="1"]) conserva sus
   medidas de 72 px y su disposición: casi todo va con :not([data-kiosco="1"]) y en quiosco
   solo cambian los colores (tokens) y la tipografía. Modernizar el quiosco es otra tanda.
   ===================================================================== */

/* ── 0. Titulares con la tipografía del lema ───────────────────────────── */
html[data-g3-tema] .font-heading,
html[data-g3-tema] .cajon-title,
html[data-g3-tema] .detail-title { font-family: var(--g3-fuente-titulo); letter-spacing: -0.005em; }

/* Foco único de 3 px en el acento (antes 2 px en verde claro, 2,3:1 sobre blanco) */
html[data-g3-tema] :where(button, a[href], summary, select, textarea, input:not([type=hidden])):not(.cajon-handle):focus-visible {
    outline: 3px solid var(--g3-foco); outline-offset: 2px;
}

/* ── 1. Marca + categorías (barra superior, solo escritorio) ───────────── */
html[data-g3-tema]:not([data-kiosco="1"]) .map-topbar { top: 12px; left: 16px; gap: 10px; }
html[data-g3-tema]:not([data-kiosco="1"]) .map-brand {
    height: 52px; padding: 0 18px 0 6px; gap: 10px;
    border: 0; background: var(--g3-superficie);
    box-shadow: var(--g3-sombra-compacta); transition: none;
}
html[data-g3-tema]:not([data-kiosco="1"]) .map-brand:hover { transform: none; background: var(--g3-tinte); }
html[data-g3-tema]:not([data-kiosco="1"]) .map-brand img { height: 40px; width: 40px; border-radius: 50%; object-fit: contain; background: #fff; }
html[data-g3-tema] .map-brand-name { font: 500 15px/1.05 var(--g3-fuente-titulo); color: var(--g3-texto-suave); letter-spacing: 0; }
html[data-g3-tema] .map-brand-name b { font-weight: 700; color: var(--g3-marca); }

/* Las 6 pastillas sueltas pasan a UNA barra de pestañas en píldora */
html[data-g3-tema]:not([data-kiosco="1"]) .nav-chips {
    gap: 2px; padding: 4px;
    background: var(--g3-superficie); background: var(--g3-panel); border-radius: var(--g3-radio-pildora);
    box-shadow: var(--g3-sombra-compacta);
}
html[data-g3-tema]:not([data-kiosco="1"]) .nav-chip {
    min-height: 44px; padding: 0 15px; gap: 7px;
    border: 0; box-shadow: none; background: transparent;
    color: var(--g3-marca); font: 600 14px/1 var(--g3-fuente-texto); transition: none;
}
html[data-g3-tema]:not([data-kiosco="1"]) .nav-chip-ic { color: inherit; }
html[data-g3-tema]:not([data-kiosco="1"]) .nav-chip-ic svg { width: 18px; height: 18px; stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) .nav-chip-count { font-size: 12px; font-weight: 700; opacity: .6; font-variant-numeric: tabular-nums; }
html[data-g3-tema]:not([data-kiosco="1"]) .nav-chip:hover:not(.is-active) { background: var(--g3-tinte); border: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .nav-chip.is-active { background: var(--g3-marca); color: #fff; border: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .nav-chip.is-active .nav-chip-count { opacity: .85; }
html[data-g3-tema]:not([data-kiosco="1"]) .nav-chip:focus-visible { outline: 3px solid var(--g3-foco); outline-offset: 2px; }
/* 1024–1279 px: seis pestañas con cifra no caben junto a la marca → fuera la cifra */
@media (min-width: 1024px) and (max-width: 1279px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .nav-chip { padding: 0 11px; font-size: 13px; }
    html[data-g3-tema]:not([data-kiosco="1"]) .nav-chip-count { display: none; }
}

/* ── 2. Rail de controles (derecha): tarjeta blanca, botones redondos de 44 px ── */
html[data-g3-tema]:not([data-kiosco="1"]) .map-toolbar {
    padding: 6px; gap: 0;
    background: var(--g3-superficie); background: var(--g3-panel); border: 0; border-radius: var(--g3-radio-hoja);
    box-shadow: var(--g3-sombra-compacta);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-g3-tema]:not([data-kiosco="1"]) .map-tool-group { gap: 2px; }
html[data-g3-tema]:not([data-kiosco="1"]) .map-tool-group + .map-tool-group { margin-top: 6px; padding-top: 6px; border-top: 2px solid var(--g3-linea); }
html[data-g3-tema]:not([data-kiosco="1"]) .map-tool {
    width: 44px; height: 44px; border-radius: var(--g3-radio-pildora);
    color: var(--g3-marca); transition: none;
}
html[data-g3-tema]:not([data-kiosco="1"]) .map-tool:hover { background: var(--g3-tinte); }
html[data-g3-tema]:not([data-kiosco="1"]) .map-tool-icon { width: 21px; height: 21px; stroke-width: 2.2; }
html[data-g3-tema] .map-tool.active,
html[data-g3-tema] .map-tool[aria-pressed="true"],
html[data-g3-tema] .map-tool[aria-expanded="true"],
html[data-g3-tema] #btn-picos.on { background: var(--g3-marca); color: #fff; }
html[data-g3-tema] .map-tool[aria-pressed="true"] .map-tool-icon,
html[data-g3-tema] .map-tool[aria-expanded="true"] .map-tool-icon { color: #fff; }
/* El tinte del :hover (más peso que las reglas de arriba) dejaba el botón abierto/activo en blanco sobre fondo claro: tras un toque
   en tableta el :hover se queda pegado. Un botón activo mantiene su relleno con el puntero encima. */
html[data-g3-tema]:not([data-kiosco="1"]) .map-tool.active:hover,
html[data-g3-tema]:not([data-kiosco="1"]) .map-tool[aria-pressed="true"]:hover,
html[data-g3-tema]:not([data-kiosco="1"]) .map-tool[aria-expanded="true"]:hover,
html[data-g3-tema]:not([data-kiosco="1"]) #btn-picos.on:hover { background: var(--g3-marca-oscura); color: #fff; }
/* Las 4 capas con rótulo (decisión del cliente 2026-08-28: «mejor que aparezca el texto») */
html[data-g3-tema]:not([data-kiosco="1"]) .map-tool:has(.map-tool-label) { width: auto; min-width: 44px; padding: 0 15px 0 12px; gap: 8px; }
html[data-g3-tema] .map-tool-label { font: 700 12.5px/1 var(--g3-fuente-texto); letter-spacing: .01em; }
html[data-g3-tema]:not([data-kiosco="1"]) .map-toolbar-more { gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 2px solid var(--g3-linea); }
/* Móvil y tableta: el rótulo baja DEBAJO del icono. El rail pasa de 119 px de ancho a 68:
   el texto sigue visible y el mapa recupera la franja que tapaba. */
@media (max-width: 1023.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .map-toolbar { top: 10px; right: 10px; padding: 5px; }
    html[data-g3-tema]:not([data-kiosco="1"]) .map-tool-group { align-items: center; }
    html[data-g3-tema]:not([data-kiosco="1"]) .map-tool:has(.map-tool-label) {
        flex-direction: column; justify-content: center; gap: 3px;
        width: auto; min-width: 58px; height: 50px; padding: 0 3px; border-radius: var(--g3-radio-boton);
    }
    html[data-g3-tema]:not([data-kiosco="1"]) .map-tool-label { font-size: 10px; font-weight: 700; }
    html[data-g3-tema]:not([data-kiosco="1"]) .map-toolbar-more { align-items: center; }
}

/* ── 3. Menús de idioma y de estilo de mapa: tarjeta con filas en píldora ── */
html[data-g3-tema]:not([data-kiosco="1"]) .lang-menu,
html[data-g3-tema]:not([data-kiosco="1"]) .basemap-menu {
    min-width: 204px; padding: 8px;
    background: var(--g3-superficie); border: 0; border-radius: var(--g3-radio-tarjeta);
    box-shadow: var(--g3-sombra);
}
html[data-g3-tema]:not([data-kiosco="1"]) .lang-row,
html[data-g3-tema]:not([data-kiosco="1"]) .basemap-option {
    min-height: 44px; padding: 0 14px; gap: 12px; margin-bottom: 4px;
    border-radius: var(--g3-radio-pildora);
    background: var(--g3-tinte); color: var(--g3-marca);
    font: 600 14.5px/1.2 var(--g3-fuente-texto); transition: none;
}
html[data-g3-tema]:not([data-kiosco="1"]) .lang-row:last-child,
html[data-g3-tema]:not([data-kiosco="1"]) .basemap-option:last-child { margin-bottom: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .lang-row:hover,
html[data-g3-tema]:not([data-kiosco="1"]) .basemap-option:hover { background: var(--g3-tinte-hover); }
html[data-g3-tema] .lang-row.active,
html[data-g3-tema] .basemap-option.is-active,
html[data-g3-tema] .basemap-option[aria-pressed="true"] { background: var(--g3-marca); color: #fff; font-weight: 700; }
html[data-g3-tema] .lang-row.active .lang-row-check { color: #fff; }
html[data-g3-tema] .lang-row-flag { box-shadow: 0 0 0 1.5px rgba(255,255,255,.75); border-radius: 3px; }
html[data-g3-tema] .basemap-swatch { border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }

/* ── 4. Dock de información útil ───────────────────────────────────────── */
/* Escritorio: una sola barra blanca; las pastillas dentro son transparentes */
@media (min-width: 1024px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .floating-overlays {
        gap: 2px; padding: 4px;
        background: var(--g3-superficie); background: var(--g3-panel); border: 0;
        backdrop-filter: none; -webkit-backdrop-filter: none;
        box-shadow: var(--g3-sombra-compacta);
    }
    html[data-g3-tema]:not([data-kiosco="1"]) .floating-overlays .floating-pill { min-height: 44px; padding: 0 15px; }
    html[data-g3-tema]:not([data-kiosco="1"]) .floating-overlays .floating-pill:hover { background: var(--g3-tinte); }
    /* Las dos pastillas 360 llevan texto blanco: con el tinte de arriba se quedaban en 1,13:1 al pasar el ratón
       (esa regla pesa más que su :hover propio de más abajo). Mismo peso y después: mandan estas. */
    html[data-g3-tema]:not([data-kiosco="1"]) .floating-overlays .floating-pill-accent:hover { background: var(--g3-marca-oscura); }
    html[data-g3-tema]:not([data-kiosco="1"]) .floating-overlays .floating-pill-aereo:hover { background: #1A5F8E; }
}
html[data-g3-tema]:not([data-kiosco="1"]) .floating-pill {
    border: 0; color: var(--g3-marca);
    font: 600 13.5px/1 var(--g3-fuente-texto); transition: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-g3-tema]:not([data-kiosco="1"]) .floating-pill:hover { transform: none; }
html[data-g3-tema] .floating-pill.active { background: var(--g3-marca); color: #fff; }
html[data-g3-tema] .floating-pill-icon svg { stroke-width: 2.2; }
/* Las dos capas 360 — el «contraste» del logotipo: TIERRA en verde, CIELO en azul */
html[data-g3-tema] .floating-overlays .floating-pill-accent,
html[data-g3-tema] .floating-pill-accent { background: var(--g3-marca); color: #fff; font-weight: 700; box-shadow: none; }
html[data-g3-tema] .floating-overlays .floating-pill-accent:hover,
html[data-g3-tema] .floating-pill-accent:hover { background: var(--g3-marca-oscura); filter: none; }
html[data-g3-tema] .floating-overlays .floating-pill-accent.active,
html[data-g3-tema] .floating-pill-accent.active { background: var(--g3-marca-oscura); box-shadow: inset 0 0 0 2px var(--g3-destello); }
html[data-g3-tema] .floating-overlays .floating-pill-aereo,
html[data-g3-tema] .floating-pill-aereo { background: var(--g3-acento); color: #fff; font-weight: 700; box-shadow: none; }
html[data-g3-tema] .floating-overlays .floating-pill-aereo:hover,
html[data-g3-tema] .floating-pill-aereo:hover { background: #1A5F8E; filter: none; }
html[data-g3-tema] .floating-overlays .floating-pill-aereo.active,
html[data-g3-tema] .floating-pill-aereo.active { background: #1A5F8E; box-shadow: inset 0 0 0 2px var(--bz-cielo); }
html[data-g3-tema] .floating-pill-count { background: rgba(255,255,255,.24); font-variant-numeric: tabular-nums; }
/* Móvil: tira de chips blancos con sombra teñida y 44 px de alto */
@media (max-width: 1023.98px) {
    html[data-g3-tema] body.has-bottomnav .floating-overlays { right: 86px; gap: 8px; padding: 4px 2px 8px; }
    html[data-g3-tema] body.has-bottomnav .floating-pill {
        min-height: 44px; padding: 0 15px;
        background: var(--g3-superficie); box-shadow: var(--g3-sombra-chip);
    }
    html[data-g3-tema] body.has-bottomnav .floating-pill.active { background: var(--g3-marca); color: #fff; }
    html[data-g3-tema] body.has-bottomnav .floating-pill-accent { background: var(--g3-marca); color: #fff; }
    html[data-g3-tema] body.has-bottomnav .floating-pill-aereo { background: var(--g3-acento); color: #fff; }
    /* Encendida sigue siendo AZUL (el .floating-pill.active de arriba la dejaba verde, como la de suelo) */
    html[data-g3-tema] body.has-bottomnav .floating-pill-aereo.active { background: #1A5F8E; }
    html[data-g3-tema] body.has-bottomnav .floating-expand-panel { right: 86px; }
}
/* Paneles que salen del dock: tarjeta de 18 px, sin borde, sombra teñida */
html[data-g3-tema]:not([data-kiosco="1"]) .floating-expand-panel {
    border: 0; border-radius: var(--g3-radio-tarjeta);
    background: var(--g3-superficie); box-shadow: var(--g3-sombra);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ── 5. Navegación inferior (móvil): hoja con la pestaña activa en relleno ── */
@media (max-width: 1023.98px) {
    html[data-g3-tema] body.has-bottomnav .bottom-nav {
        background: var(--g3-superficie); border: 0;
        backdrop-filter: none; -webkit-backdrop-filter: none;
        box-shadow: 0 -2px 14px rgba(var(--g3-sombra-rgb), .14);
        padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); gap: 2px;
    }
    html[data-g3-tema] .bottom-nav-tab {
        width: min(100%, 104px); justify-self: center; min-height: 48px; padding: 5px 2px; gap: 3px;
        border-radius: var(--g3-radio-boton);
        color: var(--g3-marca); font: 600 11px/1 var(--g3-fuente-texto);
    }
    html[data-g3-tema] .bottom-nav-tab.is-active,
    html[data-g3-tema] .bottom-nav-tab[aria-current="page"] { background: var(--g3-marca); color: #fff; }
    html[data-g3-tema] .bottom-nav-tab.is-active .bottom-nav-ic { transform: none; }
    html[data-g3-tema] .bottom-nav-ic svg { stroke-width: 2.1; }
}

/* ── 6. Cajón / panel de exploración ───────────────────────────────────── */
html[data-g3-tema]:not([data-kiosco="1"]) .cajon {
    background: var(--g3-superficie);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; box-shadow: var(--g3-sombra-hoja);
}
/* Firma de marca: el filo «cielo → tierra» del isotipo, una sola vez por pantalla */
html[data-g3-tema]:not([data-kiosco="1"]) .cajon::before {
    content: ""; position: absolute; z-index: 1; top: 0; left: 28px; right: 28px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #5CA6CC 0%, #5A9785 48%, #54893E 100%);
    pointer-events: none;
}
@media (max-width: 1023.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .cajon { border-radius: var(--g3-radio-hoja) var(--g3-radio-hoja) 0 0; }
}
@media (min-width: 1024px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .cajon { top: 76px; border-radius: var(--g3-radio-hoja); box-shadow: var(--g3-sombra); }
    html[data-g3-tema]:not([data-kiosco="1"]) .cajon-head { border-radius: var(--g3-radio-hoja) var(--g3-radio-hoja) 0 0; }
    html[data-g3-tema]:not([data-kiosco="1"]) .cajon-body { border-radius: 0 0 var(--g3-radio-hoja) var(--g3-radio-hoja); }
    html[data-g3-tema]:not([data-kiosco="1"]) .cajon-collapse { border: 0; background: var(--g3-superficie); color: var(--g3-marca); box-shadow: var(--g3-sombra-compacta); }
    html[data-g3-tema]:not([data-kiosco="1"]) .cajon-collapse::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -16px; }
}
html[data-g3-tema] .cajon-title { color: var(--g3-marca); font-weight: 700; }
html[data-g3-tema] .cajon-subtitle { color: var(--g3-texto-suave); }
html[data-g3-tema] .cajon-grabber { background: var(--g3-borde); }
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-handle { position: relative; }
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-handle::before { content: ""; position: absolute; inset: -9px 0; }
/* «Mapa ▾», vista lista/rejilla y buscador */
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-hide-btn { min-height: 44px; padding: 0 15px; border: 0; background: var(--g3-tinte); color: var(--g3-marca); box-shadow: none; font: 700 13px/1 var(--g3-fuente-texto); }
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-viewtoggle { gap: 2px; padding: 3px; border: 0; background: var(--g3-tinte); }
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-vbtn { width: 44px; height: 38px; color: var(--g3-marca); transition: none; }
html[data-g3-tema] .cajon-vbtn.is-active,
html[data-g3-tema] .cajon-vbtn[aria-pressed="true"] { background: var(--g3-marca); color: #fff; box-shadow: none; }
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-search-input {
    height: 48px; border: 0; background: var(--g3-campo);
    box-shadow: inset 0 0 0 1.5px var(--g3-pista-off);
    color: var(--g3-texto); font: 500 16px/1.2 var(--g3-fuente-texto); transition: none;
}
html[data-g3-tema] .cajon-search-input::placeholder { color: var(--g3-texto-suave); }
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-search-input:focus { box-shadow: inset 0 0 0 2px var(--g3-marca); border: 0; }
html[data-g3-tema] .cajon-search-icon { color: var(--g3-marca-2); }
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-search-clear { width: 36px; height: 36px; background: var(--g3-tinte); color: var(--g3-marca); }
/* Ramas del árbol: tarjeta de 18 px, icono en verde sobre tinte, cifra a la derecha */
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-branch { border: 0; border-radius: var(--g3-radio-tarjeta); background: var(--g3-superficie); box-shadow: inset 0 0 0 1.5px var(--g3-linea); }
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-branch-header { min-height: 56px; border-left: 0; border-radius: var(--g3-radio-tarjeta); }
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-branch-header:hover { background: var(--g3-tinte); }
html[data-g3-tema] .cajon-branch-ic { background: var(--g3-tinte); color: var(--g3-marca); box-shadow: none; }
html[data-g3-tema] .cajon-branch-label { font-family: var(--g3-fuente-titulo); font-weight: 600; color: var(--g3-texto); }
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-branch-count { background: var(--g3-tinte); color: var(--g3-marca); font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-g3-tema] .cajon-branch-chevron { color: var(--g3-marca-2); }
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-subhead { min-height: 44px; }
/* Chips de sector de Negocios: tinte apagado / marca encendido (los colores siguen en los pins) */
html[data-g3-tema]:not([data-kiosco="1"]) .biz-sector-chip { min-height: 36px; padding: 0 13px; border: 0; background: var(--g3-tinte); color: var(--g3-texto-suave); box-shadow: none; opacity: 1; font: 600 13px/1.2 var(--g3-fuente-texto); position: relative; }
html[data-g3-tema]:not([data-kiosco="1"]) .biz-sector-chip::before { content: ""; position: absolute; inset: -4px; }
html[data-g3-tema] .biz-sector-chip.is-on,
html[data-g3-tema] .biz-sector-chip[aria-pressed="true"] { background: var(--g3-marca); color: #fff; }

/* ── 7. Avisos, visor 360 y enlace de salto ────────────────────────────── */
html[data-g3-tema] .skip-link { top: -64px; min-height: 44px; display: inline-flex; align-items: center; background: var(--g3-marca); }
html[data-g3-tema] .skip-link:focus { top: 8px; }
html[data-g3-tema]:not([data-kiosco="1"]) .toast { border-radius: var(--g3-radio-pildora); background: var(--g3-marca-oscura); color: #fff; box-shadow: var(--g3-sombra); font: 600 14px/1.3 var(--g3-fuente-texto); }
html[data-g3-tema] .map-attribution { font-family: var(--g3-fuente-texto); }

/* Visor 360: hoja de 22 px con cabecera (qué es + dónde) y navegación entre fotos */
html[data-g3-tema] .f360-viewer { background: var(--g3-velo); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-g3-tema] .f360-viewer-panel { width: min(980px, 96vw); border-radius: var(--g3-radio-hoja); box-shadow: var(--g3-sombra-hoja-centrada); background: var(--g3-superficie); }
html[data-g3-tema] .f360-viewer-close { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--g3-superficie); color: var(--g3-marca); box-shadow: var(--g3-sombra-compacta); }
html[data-g3-tema]:not([data-kiosco="1"]) .f360-viewer-close { width: 44px; height: 44px; top: 12px; right: 12px; }
html[data-g3-tema] .f360-viewer-embed { aspect-ratio: 16 / 9; background: var(--g3-marca-oscura); }
@media (max-width: 700px) { html[data-g3-tema] .f360-viewer-embed { aspect-ratio: 4 / 5; } }
html[data-g3-tema] .f360-viewer-footer { padding: 12px 18px; gap: 12px; }
html[data-g3-tema] .f360-viewer-caption { font: 600 14px/1.3 var(--g3-fuente-texto); color: var(--g3-texto); }
html[data-g3-tema] .f360-viewer-fallback { color: var(--g3-marca); font: 700 13px/1 var(--g3-fuente-texto); }
html[data-g3-tema] .f360-viewer-tipo {
    display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 5px 10px;
    border-radius: var(--g3-radio-pildora); background: var(--g3-tinte); color: var(--g3-marca);
    font: 700 10.5px/1 var(--g3-fuente-texto); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px;
}
html[data-g3-tema] .f360-viewer-tipo[data-tipo="aereo"] { background: #E6F1F8; color: var(--g3-acento); }
html[data-g3-tema] .f360-viewer-tipo svg { width: 13px; height: 13px; }
html[data-g3-tema] .f360-viewer-nav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
html[data-g3-tema] .f360-viewer-nav[hidden] { display: none; }
html[data-g3-tema] .f360-viewer-nav button {
    width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; background: var(--g3-tinte); color: var(--g3-marca);
}
html[data-g3-tema] .f360-viewer-nav button:hover { background: var(--g3-tinte-hover); }
html[data-g3-tema] .f360-viewer-nav button svg { width: 20px; height: 20px; }
html[data-g3-tema] .f360-viewer-pos { min-width: 54px; text-align: center; font: 700 13px/1 var(--g3-fuente-texto); color: var(--g3-texto-suave); font-variant-numeric: tabular-nums; }

/* Tarjeta al pasar por un punto 360 del mapa (miniatura real del panorama) */
html[data-g3-tema] .f360-hover .maplibregl-popup-content { padding: 0; overflow: hidden; border-radius: var(--g3-radio-fila); box-shadow: var(--g3-sombra); background: var(--g3-superficie); }
html[data-g3-tema] .f360-hover .maplibregl-popup-tip { border-top-color: var(--g3-superficie); border-bottom-color: var(--g3-superficie); }
html[data-g3-tema] .f360-hover-img { display: block; width: 220px; height: 124px; object-fit: cover; background: var(--g3-tinte); }
html[data-g3-tema] .f360-hover-pie { display: flex; align-items: center; gap: 6px; padding: 7px 10px 8px; font: 700 10.5px/1 var(--g3-fuente-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--g3-marca); }
html[data-g3-tema] .f360-hover-pie[data-tipo="aereo"] { color: var(--g3-acento); }
html[data-g3-tema] .f360-hover-pie svg { width: 13px; height: 13px; flex: none; }

/* Tira de fotos 360 en la ficha: miniaturas de verdad, 16:9 (antes cuadros de 76 px con icono) */
html[data-g3-tema] .f360-thumb { width: 128px; height: 72px; border-radius: var(--g3-radio-fila); border-width: 0; box-shadow: inset 0 0 0 1.5px var(--g3-linea); }
html[data-g3-tema] .f360-thumb:hover, html[data-g3-tema] .f360-thumb:focus-visible { transform: none; filter: saturate(1.1) brightness(1.05); }
html[data-g3-tema][data-kiosco="1"] .f360-thumb { width: 192px; height: 108px; }
html[data-g3-tema][data-kiosco="1"] .f360-viewer-nav button { width: 72px; height: 72px; }
html[data-g3-tema][data-kiosco="1"] .f360-viewer-nav button svg { width: 30px; height: 30px; }
html[data-g3-tema][data-kiosco="1"] .f360-viewer-pos { font-size: 19px; min-width: 80px; }
html[data-g3-tema][data-kiosco="1"] .f360-viewer-caption { font-size: 19px; }
html[data-g3-tema][data-kiosco="1"] .f360-viewer-tipo { font-size: 14px; padding: 8px 14px; }

/* ── 8. Galería «Bareyo desde el aire» (visor aéreo del municipio) ─────── */
.aereo-galeria {
    position: fixed; z-index: 29; left: 16px; right: 16px; bottom: 84px;
    display: none; flex-direction: column; gap: 8px; pointer-events: none;
}
.aereo-galeria.active { display: flex; }
.aereo-galeria-cab {
    align-self: flex-start; pointer-events: auto;
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px 0 14px;
    border-radius: 99px; background: #226EA3; color: #fff;
    font: 700 13px/1 'DM Sans', system-ui, sans-serif; box-shadow: 0 3px 12px rgba(34,56,25,.2);
}
.aereo-galeria-cab svg { width: 16px; height: 16px; }
.aereo-galeria-cab b { font-variant-numeric: tabular-nums; opacity: .85; font-weight: 700; }
.aereo-galeria-cerrar { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; display: grid; place-items: center; position: relative; }
.aereo-galeria-cerrar::before { content: ""; position: absolute; inset: -8px; }
.aereo-galeria-cerrar svg { width: 14px; height: 14px; }
.aereo-galeria-tira {
    pointer-events: auto; display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.aereo-galeria-tira::-webkit-scrollbar { display: none; }
.aereo-item {
    flex: 0 0 auto; width: 176px; padding: 0; border: 0; cursor: pointer; text-align: left;
    border-radius: 18px; overflow: hidden; background: #fff; scroll-snap-align: start;
    box-shadow: 0 3px 12px rgba(34,56,25,.2), 0 1px 3px rgba(34,56,25,.12);
}
.aereo-item img { display: block; width: 100%; height: 99px; object-fit: cover; background: #E6F1F8; }
.aereo-item span { display: block; padding: 8px 12px 10px; font: 700 12.5px/1.25 'DM Sans', system-ui, sans-serif; color: #16210F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aereo-item:hover img, .aereo-item:focus-visible img { filter: saturate(1.1) brightness(1.04); }
.aereo-item.is-activa { box-shadow: 0 0 0 3px #226EA3, 0 3px 12px rgba(34,56,25,.2); }
@media (min-width: 1024px) {
    .aereo-galeria { left: calc(var(--cajon-panel-w, 400px) + 44px); right: 16px; bottom: 80px; }
    .aereo-item { width: 208px; }
    .aereo-item img { height: 117px; }
}
@media (max-width: 1023.98px) {
    /* sobre la tira de info útil y el borde del sheet */
    .aereo-galeria { left: 8px; right: 8px; bottom: calc(var(--cajon-sheet-h, 156px) + 124px); }
    body.sheet-full .aereo-galeria { display: none; }
    .aereo-item { width: 150px; }
    .aereo-item img { height: 84px; }
}
html[data-kiosco="1"] .aereo-galeria { left: calc(var(--cajon-panel-w, 400px) + 96px); bottom: 120px; }
html[data-kiosco="1"] .aereo-item { width: 300px; }
html[data-kiosco="1"] .aereo-item img { height: 168px; }
html[data-kiosco="1"] .aereo-item span { font-size: 18px; padding: 12px 16px 14px; }
html[data-kiosco="1"] .aereo-galeria-cab { min-height: 56px; font-size: 19px; padding: 0 10px 0 20px; }
html[data-kiosco="1"] .aereo-galeria-cerrar { width: 44px; height: 44px; }

/* Pin del panorama aéreo en el mapa: miniatura redonda con aro azul cielo */
.aereo-pin { width: 54px; height: 54px; cursor: pointer; border: 0; padding: 0; background: none; }
.aereo-pin-img {
    display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    border: 3px solid #fff; background: #5CA6CC;
    box-shadow: 0 0 0 2px #226EA3, 0 6px 16px rgba(34,56,25,.32);
}
.aereo-pin:hover .aereo-pin-img, .aereo-pin:focus-visible .aereo-pin-img, .aereo-pin.is-activa .aereo-pin-img { box-shadow: 0 0 0 4px #226EA3, 0 6px 16px rgba(34,56,25,.38); }
html[data-kiosco="1"] .aereo-pin { width: 84px; height: 84px; }

/* ── 9. Ajustes tras la verificación en navegador (2026-10-06) ─────────── */
/* El rótulo de las pastillas heredaba 12 px fijos de styles.css: ahora sigue al de su pastilla */
html[data-g3-tema] .floating-pill-label { font-size: inherit; }
/* Móvil: las dos capas 360 van las PRIMERAS de la tira (antes quedaban fuera de pantalla, al final) */
@media (max-width: 1023.98px) {
    html[data-g3-tema] body.has-bottomnav #f360Floating { order: -2; }
    html[data-g3-tema] body.has-bottomnav #sueloFloating { order: -1; }   /* piloto «Ruta 360°»: junto a las otras dos capas 360 */
    html[data-g3-tema] body.has-bottomnav #aereoFloating { order: -1; }
}
/* Visor 360 en pantallas estrechas: el pie pasa a dos filas (qué es · navegación y enlace) */
@media (max-width: 700px) {
    html[data-g3-tema] .f360-viewer { padding: 10px; }
    html[data-g3-tema] .f360-viewer-footer { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px 14px; }
    html[data-g3-tema] .f360-viewer-caption { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
    html[data-g3-tema] .f360-viewer-tipo { margin-right: 0; white-space: nowrap; }
    html[data-g3-tema] .f360-viewer-fallback { margin-left: auto; }
}
/* Portada: la fotografía ahora es REAL (panorámica aérea de Cuberris); el velo verde se aclara
   en el centro para que se vea, y se mantiene arriba y abajo para el contraste del texto. */
html[data-g3-tema] .landing-hero.has-photo {
    background:
        linear-gradient(180deg, rgba(20,36,14,0.58) 0%, rgba(20,36,14,0.30) 30%, rgba(20,36,14,0.34) 62%, rgba(20,36,14,0.70) 100%),
        url('../../assets/landing/hero.webp') center 42% / cover no-repeat;
}
@media (max-width: 640px) {
    html[data-g3-tema] .landing-hero.has-photo {
        background:
            linear-gradient(180deg, rgba(20,36,14,0.60) 0%, rgba(20,36,14,0.34) 34%, rgba(20,36,14,0.30) 66%, rgba(20,36,14,0.62) 100%),
            url('../../assets/landing/hero-mobile.webp') center / cover no-repeat;
    }
}
html[data-g3-tema] .landing-hero.has-photo .landing-title { font-family: var(--g3-fuente-titulo); text-shadow: 0 2px 4px rgba(4,20,8,0.5), 0 8px 34px rgba(4,20,8,0.55); }
html[data-g3-tema] .landing-hero.has-photo .landing-title span { color: #CFE8C2; background: none; -webkit-text-fill-color: currentColor; }
html[data-g3-tema] .landing-hero.has-photo .landing-subtitle { text-shadow: 0 1px 3px rgba(4,20,8,0.6), 0 2px 16px rgba(4,20,8,0.5); }
/* Tótem: capas del rail con el rótulo DEBAJO del icono. Antes el rótulo no cabía en los 72 px,
   se salía de la caja y aplastaba el icono hasta hacerlo desaparecer (pendiente del 28-08). */
html[data-g3-tema][data-kiosco="1"] .map-tool-group { align-items: center; }
html[data-g3-tema][data-kiosco="1"] .map-tool:has(.map-tool-label) {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 96px; height: 84px; padding: 0;
}
html[data-g3-tema][data-kiosco="1"] .map-tool .map-tool-icon { flex: none; }
html[data-g3-tema][data-kiosco="1"] .map-tool-label { font-size: 14px; }
html[data-g3-tema][data-kiosco="1"] .floating-pill-label { font-size: 18px; }
html[data-g3-tema][data-kiosco="1"] .floating-pill-count { font-size: 16px; }
/* Toques: los dos botones de vista (lista / rejilla) medían 44×38 → 44×44; en el tótem,
   los controles que se quedaban en 60 px suben a los 64 del mínimo de quiosco. */
html[data-g3-tema]:not([data-kiosco="1"]) .cajon-vbtn { width: 44px; height: 44px; }
html[data-g3-tema][data-kiosco="1"] .cajon-vbtn { width: 64px; height: 64px; }
html[data-g3-tema][data-kiosco="1"] .cajon-layer-toggle { min-width: 64px; }
html[data-g3-tema][data-kiosco="1"] .kiosco-lang-btn { min-height: 64px; }


/* ═══ PIEZA: ficha-marco ═══ */
/* ── 10. FICHA DE DETALLE · EL MARCO (pieza «ficha-marco», 2026-10-07) ─────────────────
   Cubre: velo y tarjeta (#detailModal, .detail-card), cabecera con foto (#detailHero:
   insignia de sector, cierre, título, localización), cuerpo con scroll (.detail-body),
   separación y TÍTULOS DE SECCIÓN (.detail-section, .detail-section-title, .dst-ico) y la
   BOTONERA (.action-buttons, .action-btn*).
   No cubre lo de DENTRO de cada sección (pieza «ficha-contenido», que va detrás).

   Depende de ficha-marco.parches.json (app.js): los colores por categoría que JS escribía
   en línea (insignia, botón primario, degradado de la cabecera sin foto) se quitan en la
   plantilla, así que aquí no hay ni un !important. En las rutas el primario es «Empezar
   ruta» y va el PRIMERO en el DOM: las consultas de cantidad de la botonera cuentan con ello.

   Prefijos (LEY del contrato §3):
     html[data-g3-tema] .x                           → solo color, familia, peso, tracking, sin cristal
     html[data-g3-tema]:not([data-kiosco="1"]) .x    → web: medidas, disposición y forma
     html[data-g3-tema][data-kiosco="1"] .x          → tótem: lo que cambia allí a propósito
   La geometría de la tarjeta vive SOLO dentro de sus dos @media (<1024 hoja inferior · ≥1024
   centrada): así no pisa el panel lateral del tótem ni las variantes de móvil.
   ===================================================================================== */

/* ── 10.1 AMBOS (web y tótem): color, tipografía y fuera el cristal ── */
html[data-g3-tema] .detail-card,
html[data-g3-tema] .hero-top-info,
html[data-g3-tema] .hero-sector-badge,
html[data-g3-tema] .detail-close,
html[data-g3-tema] .action-buttons { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Cabecera. Sin foto (las 6 rutas y algún templo) o mientras la foto carga: el degradado
   «cielo → tierra» del logotipo (--bz-contraste del tema) en vez del color de categoría; con el
   oscurecido de abajo se lee como un horizonte. Con foto, JS pone la imagen en línea encima. */
html[data-g3-tema] .detail-hero { background: var(--bz-contraste, linear-gradient(180deg, var(--g3-marca-2), var(--g3-marca))); }
/* Oscurecido solo abajo y medido en px desde el borde: el título se lee igual con la
   cabecera de 124 px (móvil apaisado) que con la de 380 (tótem), y la foto queda limpia arriba. */
html[data-g3-tema] .detail-hero-gradient {
    background: linear-gradient(0deg, rgba(22,33,15,.86) 0, rgba(22,33,15,.68) 44px, rgba(22,33,15,.40) 92px, rgba(22,33,15,.14) 136px, rgba(22,33,15,0) 176px);
}
html[data-g3-tema] .hero-top-info { background: transparent; }
html[data-g3-tema] .hero-sector-badge {
    background: var(--g3-superficie); color: var(--g3-marca); border-color: transparent;
    font-family: var(--g3-fuente-texto); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
html[data-g3-tema] .hero-sector-badge .ico { stroke-width: 2.2; }
html[data-g3-tema] .detail-close { background: var(--g3-superficie); color: var(--g3-marca); border-color: transparent; }
html[data-g3-tema] .hero-title { font-family: var(--g3-fuente-titulo); font-weight: 700; color: #fff; }
html[data-g3-tema] .hero-location { font-family: var(--g3-fuente-texto); font-weight: 500; color: rgba(255,255,255,.94); }

/* Título de sección: versalitas del kit + icono sobre tinte (patrón compartido, ver informe) */
html[data-g3-tema] .detail-section-title {
    font-family: var(--g3-fuente-texto); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--g3-texto-suave);
}
html[data-g3-tema] .dst-ico { background: var(--g3-tinte); color: var(--g3-marca); }
html[data-g3-tema] .dst-ico .ico { stroke-width: 2.2; }

/* Botonera: un solo color. Primario = relleno de marca · secundario = tinte · fantasma = filete */
html[data-g3-tema] .action-buttons { background: var(--g3-superficie); border-color: var(--g3-linea); }
html[data-g3-tema] .action-btn { font-family: var(--g3-fuente-texto); font-weight: 700; letter-spacing: 0; }
html[data-g3-tema] .action-btn svg { stroke-width: 2.2; }
html[data-g3-tema] .action-btn-primary { background: var(--g3-marca); color: #fff; }
html[data-g3-tema] .action-btn-secondary { background: var(--g3-tinte); color: var(--g3-marca); border-color: transparent; }
html[data-g3-tema] .action-btn-ghost { background: transparent; color: var(--g3-marca); border-color: transparent; }

/* ── 10.2 WEB · velo y tarjeta ── */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-overlay {
    background: var(--g3-velo);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-g3-tema]:not([data-kiosco="1"]) .detail-card {
    background: var(--g3-superficie); border: 0;
    animation-duration: .2s; animation-timing-function: ease-out;
}
/* Móvil Y tableta (misma frontera que el cajón y la navegación inferior): hoja inferior a
   todo el ancho. Antes, entre 701 y 1023 px quedaba pegada abajo con 4 esquinas y huecos. */
@media (max-width: 1023.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .detail-card {
        width: 100%; max-width: none; margin: 0; align-self: flex-end;
        max-height: 96vh; max-height: min(96vh, 96dvh);
        border-radius: var(--g3-radio-hoja) var(--g3-radio-hoja) 0 0;
        box-shadow: var(--g3-sombra-hoja);
    }
    html[data-g3-tema]:not([data-kiosco="1"]) .detail-hero { height: clamp(124px, 26vh, 300px); }
}
/* Escritorio: hoja centrada de 22 px */
@media (min-width: 1024px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .detail-card {
        max-width: 760px; margin: 20px;
        border-radius: var(--g3-radio-hoja);
        box-shadow: var(--g3-sombra-hoja-centrada);
    }
    html[data-g3-tema]:not([data-kiosco="1"]) .detail-hero { height: clamp(200px, 30vh, 300px); }
}

/* ── 10.3 WEB · cabecera ── */
/* flex:0 0 auto → la foto ya no se aplasta cuando el cuerpo es largo (medía 135-222 px según la ficha) */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-hero { flex: 0 0 auto; }
/* Los cuatro bloques (insignia, título, cuerpo y botonera) comparten UNA columna de 720 px como
   máximo: max(20px, 50% − 360px) vale 20 px en móvil y en la hoja centrada de escritorio, y centra
   el contenido en la hoja a todo el ancho de la tableta (a 820 px, la línea de texto medía 780). */
html[data-g3-tema]:not([data-kiosco="1"]) .hero-top-bar { padding: 12px 12px 12px max(20px, calc(50% - 360px)); align-items: center; gap: 12px; }
html[data-g3-tema]:not([data-kiosco="1"]) .hero-top-info { min-width: 0; padding: 0; border-radius: 0; }
/* Insignia: UNA píldora blanca (antes, píldora de color dentro de una caja oscura) */
html[data-g3-tema]:not([data-kiosco="1"]) .hero-sector-badge {
    display: block; max-width: 100%; height: 30px; padding: 0 13px 0 11px;
    border: 0; border-radius: var(--g3-radio-pildora);
    font-size: 11.5px; line-height: 30px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: var(--g3-sombra-chip);
}
html[data-g3-tema]:not([data-kiosco="1"]) .hero-sector-badge .ico { width: 15px; height: 15px; margin: 0 6px 0 0; vertical-align: -3px; }
html[data-g3-tema]:not([data-kiosco="1"]) .hero-sector-badge .ico + .ico { margin: 0 0 0 2px; }
/* Cierre: el mismo botón que el del visor 360 (redondo, blanco, 44 px) */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-close {
    flex: none; width: 44px; height: 44px; padding: 0; border: 0;
    box-shadow: var(--g3-sombra-compacta); transition: none;
}
html[data-g3-tema]:not([data-kiosco="1"]) .detail-close svg { width: 18px; height: 18px; stroke-width: 2.6; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-close:hover { background: var(--g3-tinte-hover); transform: none; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-close:active { background: var(--g3-tinte-activo); transform: none; }
/* Sobre una foto el aro azul del foco se pierde: se le pone un aro blanco por dentro */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-close:focus-visible { box-shadow: 0 0 0 2px #fff, var(--g3-sombra-compacta); }
html[data-g3-tema]:not([data-kiosco="1"]) .hero-bottom-bar { padding: 0 max(20px, calc(50% - 360px)) 16px; }
html[data-g3-tema]:not([data-kiosco="1"]) .hero-title {
    margin: 0 0 5px; font-size: clamp(25px, 3.1vw, 32px); line-height: 1.08; letter-spacing: -.01em;
    text-wrap: balance; overflow-wrap: anywhere;
    text-shadow: 0 1px 2px rgba(22,33,15,.45), 0 2px 14px rgba(22,33,15,.45);
}
html[data-g3-tema]:not([data-kiosco="1"]) .hero-location { margin: 0; gap: 0; font-size: 14px; line-height: 1.3; text-shadow: 0 1px 2px rgba(22,33,15,.5); }
html[data-g3-tema]:not([data-kiosco="1"]) .hero-location::before { width: 15px; height: 15px; margin-right: 6px; flex: none; }
html[data-g3-tema]:not([data-kiosco="1"]) .hero-location:empty { display: none; }

/* ── 10.4 WEB · cuerpo y títulos de sección ── */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-body {
    padding: 20px max(20px, calc(50% - 360px)) 4px; background: var(--g3-superficie);
    overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--g3-borde) transparent;
}
html[data-g3-tema]:not([data-kiosco="1"]) .detail-section { margin-bottom: 24px; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-section-title { gap: 8px; margin: 0 0 12px; font-size: 11.5px; line-height: 1.2; }
html[data-g3-tema]:not([data-kiosco="1"]) .dst-ico { flex: none; width: 24px; height: 24px; margin: 0; border-radius: var(--g3-radio-mini); }
html[data-g3-tema]:not([data-kiosco="1"]) .dst-ico .ico { width: 14px; height: 14px; }

/* ── 10.5 WEB · botonera: UN primario ancho y el resto en una fila ── */
html[data-g3-tema]:not([data-kiosco="1"]) .action-buttons {
    position: static; gap: 8px;
    padding: 12px max(20px, calc(50% - 360px)) calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--g3-linea);
}
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn {
    flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 10px; gap: 8px;
    border: 0; border-radius: var(--g3-radio-boton);
    font-size: 14.5px; line-height: 1.15; text-align: center; white-space: normal;
    transition: none;
}
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn:hover,
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn:active { transform: none; filter: none; }
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn svg { flex: none; width: 18px; height: 18px; margin: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary {
    flex: 1 1 100%; min-height: 52px; padding: 0 18px; font-size: 16px;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary svg { width: 20px; height: 20px; }
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary:hover { background: var(--g3-marca-oscura); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-secondary:hover { background: var(--g3-tinte-hover); }
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-ghost { box-shadow: inset 0 0 0 2px var(--g3-borde); }
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-ghost:hover { background: var(--g3-tinte); }
/* Respuesta al toque (en móvil no hay :hover): solo color, nada se mueve */
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary:active { background: var(--g3-marca-oscura); }
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-secondary:active { background: var(--g3-tinte-activo); }
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-ghost:active { background: var(--g3-tinte-hover); }
/* Más de 700 px y hasta 3 botones (patrimonio, playas, negocios, cumbres): todo en UNA fila,
   el primario al doble de ancho. Con 4 o 5 (rutas) el primario se queda su fila. */
@media (min-width: 700.02px) {
    /* a partes iguales, salvo que un rótulo largo pida más (DE «GPX herunterladen»): nunca se parte */
    html[data-g3-tema]:not([data-kiosco="1"]) .action-btn { min-width: auto; white-space: nowrap; }
    html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary:first-child:nth-last-child(-n+3) { flex: 2 1 0; }
}
/* Móvil con 4 o 5 botones (rutas): los que no son el primario caben en UNA fila con el icono
   encima del texto, como las pestañas de la navegación inferior (antes: 3 filas, 187 px). */
@media (max-width: 700px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary:first-child:nth-last-child(n+4) ~ .action-btn {
        flex: 1 1 auto; flex-direction: column; gap: 4px; min-height: 56px; padding: 7px 4px 6px;
        font-size: 11.5px; line-height: 1.15;
    }
}

/* «Recórrela a pie de calle» (piloto Ruta 360°): rótulo largo, así que no entra en la fila de pequeños con el icono encima;
   toma fila propia bajo «Empezar ruta», con el icono a la izquierda. Más específico que las reglas por ancho de arriba y de abajo. */
html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary:first-child:nth-last-child(n+4) ~ .action-btn.action-btn-ruta360 {
    flex: 1 1 100%; flex-direction: row; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; font-size: 14.5px; line-height: 1.15;
}

/* Pantallas de menos de 360 px (móviles antiguos o con la letra del sistema ampliada): los
   cuatro botones pequeños se reparten a partes iguales y el rótulo puede partirse en dos líneas. */
@media (max-width: 359.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary:first-child:nth-last-child(n+4) ~ .action-btn {
        flex: 1 1 0; justify-content: flex-start; padding: 8px 2px 6px; font-size: 10.5px;
    }
}
/* Móvil apaisado (poca altura): todo en UNA fila —el primario toma el hueco y el resto su ancho—
   para dejarle al texto los 57 px de la segunda fila. */
@media (max-height: 480px) and (min-width: 560px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary:first-child:nth-last-child(n+2) { flex: 1 1 auto; }
    html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary:first-child:nth-last-child(n+2) ~ .action-btn { flex: 0 0 auto; padding: 0 18px; }
    html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary:first-child:nth-last-child(n+4) ~ .action-btn {
        flex: 0 0 auto; flex-direction: column; gap: 3px; min-height: 52px; padding: 6px 10px 5px;
        font-size: 11.5px; line-height: 1.15;
    }
    html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary:first-child:nth-last-child(n+4) ~ .action-btn.action-btn-ruta360 {
        flex: 0 0 auto; flex-direction: row; gap: 8px; min-height: 44px; padding: 0 14px; font-size: 12px;
    }
}

/* Portátiles bajos (1366×768, 1280×720): la cabecera fija (230) y la botonera de ruta (133) se comían más de
   la mitad de la hoja y el cuerpo quedaba en 343 de 707 px. Cabecera proporcional al alto (la foto sigue
   cabiendo con título de dos líneas) y secundarios de ruta de 44 px (el mínimo táctil de web). A partir de
   801 px de alto se queda lo de arriba. Va DESPUÉS de las alturas de 10.2 para ganarles por orden. */
@media (min-width: 1024px) and (max-height: 800px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .detail-hero { height: clamp(172px, 23vh, 270px); }
    html[data-g3-tema]:not([data-kiosco="1"]) .action-btn-primary:first-child:nth-last-child(n+4) ~ .action-btn { min-height: 44px; }
}

/* ── 10.6 TÓTEM · mismo panel lateral y mismas medidas de toque; cambia el aspecto ── */
/* La caja oscura de la insignia desaparece y la píldora crece (11 px no se leían en 75") */
html[data-g3-tema][data-kiosco="1"] .hero-top-bar { align-items: center; gap: 16px; }
html[data-g3-tema][data-kiosco="1"] .hero-top-info { min-width: 0; padding: 0; border-radius: 0; }
html[data-g3-tema][data-kiosco="1"] .hero-sector-badge {
    display: block; max-width: 100%; height: 40px; padding: 0 18px 0 15px;
    border: 0; border-radius: 99px;
    font-size: 15px; line-height: 40px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: var(--g3-sombra-chip);
}
html[data-g3-tema][data-kiosco="1"] .hero-sector-badge .ico { width: 19px; height: 19px; margin: 0 8px 0 0; vertical-align: -4px; }
html[data-g3-tema][data-kiosco="1"] .hero-sector-badge .ico + .ico { margin: 0 0 0 3px; }
html[data-g3-tema][data-kiosco="1"] .detail-close { box-shadow: var(--g3-sombra-compacta); }
html[data-g3-tema][data-kiosco="1"] .hero-title {
    font-size: 38px; line-height: 1.08; letter-spacing: -.01em; overflow-wrap: anywhere;
    text-shadow: 0 1px 2px rgba(22,33,15,.45), 0 2px 16px rgba(22,33,15,.45);
}
html[data-g3-tema][data-kiosco="1"] .hero-location { font-size: 18px; line-height: 1.3; text-shadow: 0 1px 2px rgba(22,33,15,.5); }
html[data-g3-tema][data-kiosco="1"] .hero-location::before { width: 18px; height: 18px; flex: none; }
html[data-g3-tema][data-kiosco="1"] .hero-location:empty { display: none; }
/* Botón único («Escuchar» / «Vista 3D»): 72 px y 20 px se quedan; radio, canto e icono del kit */
html[data-g3-tema][data-kiosco="1"] .action-btn { gap: 12px; border-radius: 14px; }
html[data-g3-tema][data-kiosco="1"] .action-btn svg { flex: none; width: 26px; height: 26px; margin: 0; }
html[data-g3-tema][data-kiosco="1"] .action-btn-primary { box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
/* Sin movimiento al tocar: en una pantalla táctil el :hover se queda pegado tras el toque y el
   cierre se veía a 78 px (scale 1.08) y el botón 1 px más arriba. La respuesta al toque es de color. */
html[data-g3-tema][data-kiosco="1"] .detail-close:hover,
html[data-g3-tema][data-kiosco="1"] .detail-close:active { transform: none; }
html[data-g3-tema][data-kiosco="1"] .action-btn:hover,
html[data-g3-tema][data-kiosco="1"] .action-btn:active { transform: none; filter: none; }
html[data-g3-tema][data-kiosco="1"] .detail-close:active { background: var(--g3-tinte-activo); }
html[data-g3-tema][data-kiosco="1"] .action-btn-primary:active { background: var(--g3-marca-oscura); }
/* Negocios en el tótem: no hay botones y quedaba una franja vacía de 33 px con su línea */
html[data-g3-tema][data-kiosco="1"] .action-buttons:empty { display: none; }


/* ═══ PIEZA: ficha-contenido ═══ */
/* ── 11. FICHA DE DETALLE · EL CONTENIDO (pieza «ficha-contenido», 2026-10-07) ─────────
   Va DETRÁS de «ficha-marco» (bloque 10). Cubre lo de DENTRO de las secciones de la ficha:
   descripción y etiquetas · las cifras de ruta y de cumbre · perfil altimétrico · tira de
   fotos 360 (solo scroll y separación) · visor 360/3D embebido · minimapa · contacto ·
   horarios / misas / visitas · «Historia y detalle» · Wikipedia · bandera de baño · meteo de
   cumbre · y el HUD de seguimiento de ruta (#routeHud).
   NO cubre: cabecera, títulos de sección, botonera y QR del tótem (ficha-marco) · .f360-thumb
   (bloque 7 del puente) · .flag-dot base (panel-comun) · popups, hitos y marcadores del mapa
   (tutorial-avisos-popups).

   Depende de ficha-contenido.parches.json: los colores por categoría que JS escribía en línea
   (etiquetas, filete de las cifras, iconos y enlaces de contacto, texto de la bandera, glifos
   del perfil) se quitan en la plantilla → aquí no hay ni un !important. El mismo fichero trae
   miniMap.resize() (el minimapa pintaba 400 px de una caja de 350-720).

   Lenguaje: dos superficies y ninguna más. TARJETA de tinte de 18 px para los bloques de
   información (perfil, horarios, Wikipedia; visor y minimapa con el mismo radio) y FILA de
   tinte de 12 px para datos sueltos (cifras, contacto, bandera, meteo). Jerarquía etiqueta →
   cifra → nota. El color de la ruta queda SOLO en la línea del perfil; el de la bandera, en su
   punto. Dentro de una tarjeta de tinte, lo pulsable va en blanco (chip) para que se vea.

   Prefijos (LEY del contrato §3):
     html[data-g3-tema] .x                           → solo color, familia, peso, tracking, trazo
     html[data-g3-tema]:not([data-kiosco="1"]) .x    → web: medidas, disposición y forma
     html[data-g3-tema][data-kiosco="1"] .x          → tótem: lo que hoy no escalaba (en px)
   No se declara display en ninguna .detail-section, ni en #meteo-pico ni en #routeHud (los
   conmuta JS en línea), ni z-index, ni position:fixed dentro de la ficha.
   ===================================================================================== */

/* ── 11.1 AMBOS (web y tótem): color y tipografía ── */
html[data-g3-tema] .detail-description { color: var(--g3-texto); font-family: var(--g3-fuente-texto); }

/* Etiquetas: píldora de tinte, un solo color (antes, el de la categoría: rojo, petróleo, violeta) */
html[data-g3-tema] .detail-tag {
    background: var(--g3-tinte); color: var(--g3-marca); border-color: transparent;
    font-family: var(--g3-fuente-texto); font-weight: 600; letter-spacing: 0;
}

/* Cifras: etiqueta → cifra, en tinte y sin filete de color */
html[data-g3-tema] .stat-card { background: var(--g3-tinte); border-color: transparent; }
html[data-g3-tema] .stat-label {
    color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
html[data-g3-tema] .stat-value {
    color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700;
    letter-spacing: 0; font-variant-numeric: tabular-nums;
}

/* Perfil: la caja y los ejes en la paleta; la LÍNEA sigue con el color de la ruta (es la del mapa) */
html[data-g3-tema] .elevation-container { background: var(--g3-tinte); }
html[data-g3-tema] #elevSvg { color: var(--g3-texto-suave); }
html[data-g3-tema] #elevSvg text { font-family: var(--g3-fuente-texto); }
html[data-g3-tema] #elevHover text { fill: var(--g3-texto); }
html[data-g3-tema] .elevation-stats-row,
html[data-g3-tema] .elev-stat {
    color: var(--g3-texto); font-family: var(--g3-fuente-texto); font-weight: 700;
    letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
}
html[data-g3-tema] .elev-stat .ico { color: var(--g3-marca-2); stroke-width: 2.2; }

/* Miniatura 360 que no carga: fondo de tinte (el icono, más abajo) */
html[data-g3-tema] .f360-thumb-broken { background: var(--g3-tinte); }

/* Visor embebido y minimapa: mientras cargan, verde de marca y tinte (antes negro y blanco) */
html[data-g3-tema] #detail360Section .embed-360-container { background: var(--g3-marca-oscura); border-color: transparent; }
html[data-g3-tema] #miniMapContainer { background: var(--g3-tinte); border-color: var(--g3-linea); }

/* Contacto: fila de tinte, icono y enlace en verde de marca, dato en tinta */
html[data-g3-tema] .info-row { background: var(--g3-tinte); color: var(--g3-texto); border-color: transparent; font-family: var(--g3-fuente-texto); }
html[data-g3-tema] .info-row svg { color: var(--g3-marca); stroke-width: 2.2; }
html[data-g3-tema] .info-row a { color: var(--g3-marca); font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-g3-tema] .info-row span { color: var(--g3-texto); font-weight: 500; }

/* Horarios y meteo de cumbre (comparten .detail-schedule) */
html[data-g3-tema] #detailDesc .detail-schedule { background: var(--g3-tinte); color: var(--g3-texto); border-color: transparent; font-family: var(--g3-fuente-texto); }
html[data-g3-tema] .detail-sched-row { color: var(--g3-texto); }
html[data-g3-tema] .detail-sched-row b { font-weight: 700; }
html[data-g3-tema] .detail-sched-row .ico { color: var(--g3-marca); stroke-width: 2.2; }
html[data-g3-tema] .detail-body .detail-sched-note { color: var(--g3-texto-suave); border-color: var(--g3-borde); font-family: var(--g3-fuente-texto); }
html[data-g3-tema] #meteo-pico b {
    color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
html[data-g3-tema] .meteo-pico-dato { color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-g3-tema] .meteo-pico-nota { color: var(--g3-texto-suave); }

/* «Horarios» e «Historia y detalle»: el MISMO título de sección de ficha-marco (antes, verde de
   marca y Signika: dos estilos de título en una ficha). El icono de «Horarios» va en su cuadradito,
   blanco porque está sobre tinte. */
html[data-g3-tema] .detail-history-title {
    color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
html[data-g3-tema] .detail-history-title .ico { background: var(--g3-tinte); color: var(--g3-marca); stroke-width: 2.2; }
html[data-g3-tema] #detailDesc .detail-schedule .detail-history-title .ico { background: var(--g3-superficie); }

/* Wikipedia: tarjeta de tinte (antes gris azulado con barra verde y texto pizarra) */
html[data-g3-tema] .detail-wiki { background: var(--g3-tinte); color: var(--g3-texto); border-color: transparent; font-family: var(--g3-fuente-texto); }
html[data-g3-tema] .wiki-extract { font-family: var(--g3-fuente-texto); }
html[data-g3-tema] .wiki-loading,
html[data-g3-tema] .wiki-empty { color: var(--g3-texto-suave); }
html[data-g3-tema] .wiki-loading .ico { color: var(--g3-marca-2); stroke-width: 2.2; }

/* Bandera de baño: el color de dominio SOLO en el punto; el estado, en tinta */
html[data-g3-tema] .beach-flag-banner { background: var(--g3-tinte); }
html[data-g3-tema] .beach-flag-label { color: var(--g3-texto); font-family: var(--g3-fuente-texto); font-weight: 500; }
html[data-g3-tema] .beach-flag-etq { color: var(--g3-texto-suave); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[data-g3-tema] .beach-flag-label b { color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700; }
html[data-g3-tema] .beach-flag-label b[data-flag="sin-dato"] { color: var(--g3-texto-suave); }
html[data-g3-tema] .beach-flag-origin { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 500; }

/* Los dos enlaces pequeños («Cámara en vivo» y «Leer más en Wikipedia»): el chip gemelo de
   .marine-flags-cam del panel de Condiciones (44 px, 12,5/600, icono de 17). Allí va en tinte sobre
   blanco; aquí, en blanco, porque vive DENTRO de una tarjeta de tinte. */
html[data-g3-tema] .beach-flag-cam,
html[data-g3-tema] .wiki-link { background: var(--g3-superficie); color: var(--g3-marca); border-color: transparent; font-family: var(--g3-fuente-texto); font-weight: 600; }
html[data-g3-tema] .beach-flag-cam:hover,
html[data-g3-tema] .wiki-link:hover { background: var(--g3-tinte-hover); color: var(--g3-marca); border-color: transparent; }
html[data-g3-tema] .beach-flag-cam:active,
html[data-g3-tema] .wiki-link:active { background: var(--g3-tinte-activo); }
html[data-g3-tema] .beach-flag-cam .ico,
html[data-g3-tema] .wiki-link .ico { stroke-width: 2.2; }

/* HUD de seguimiento: barra blanca del kit (antes cristal oscuro con sombra negra) */
html[data-g3-tema] .route-hud { background: var(--g3-superficie); color: var(--g3-texto); font-family: var(--g3-fuente-texto); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-g3-tema] .route-hud-route { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[data-g3-tema] .route-hud-route .ico { color: var(--g3-marca-2); stroke-width: 2.2; }
html[data-g3-tema] .route-hud-stats { color: var(--g3-texto-suave); font-weight: 500; }
html[data-g3-tema] .route-hud-stats b { color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700; font-variant-numeric: tabular-nums; }
/* «Finalizar»: rojo semántico, pero en su versión de reposo (fondo y texto de aviso del kit), no un
   bloque rojo macizo a la vista durante toda la ruta */
html[data-g3-tema] .route-hud-stop { background: var(--g3-aviso-rojo-bg, #FDECEA); color: var(--g3-aviso-rojo-tx, #A8261C); font-family: var(--g3-fuente-texto); font-weight: 700; letter-spacing: 0; }
html[data-g3-tema] .route-hud-stop:hover { background: var(--g3-aviso-rojo-bg, #FDECEA); }
html[data-g3-tema] .route-hud-stop .ico { stroke-width: 2.2; }

/* ── 11.2 WEB Y TÓTEM · lo que es fallo o forma en los dos (la misma regla, dos prefijos) ── */
/* PERFIL: la caja medía 100 px fijos con overflow oculto para un SVG de 132 + relleno → se
   cortaban el eje de kilómetros, la cota mínima y todo tramo bajo. Ahora mide lo que mide. */
html[data-g3-tema]:not([data-kiosco="1"]) .elevation-container,
html[data-g3-tema][data-kiosco="1"] .elevation-container { height: auto; }
html[data-g3-tema]:not([data-kiosco="1"]) #elevSvg text,
html[data-g3-tema][data-kiosco="1"] #elevSvg text { fill-opacity: 1; }

/* CIFRAS: tres tarjetas a partes iguales; etiqueta arriba y cifra abajo. Con space-between las
   cifras quedan alineadas aunque una etiqueta parta en dos líneas (FR «DEPUIS BAREYO»). El order
   deja la etiqueta primero también si la plantilla no estuviera parcheada. */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-stats-grid,
html[data-g3-tema][data-kiosco="1"] .detail-stats-grid { display: flex; flex-wrap: wrap; }
html[data-g3-tema]:not([data-kiosco="1"]) .stat-card,
html[data-g3-tema][data-kiosco="1"] .stat-card {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    border: 0; text-align: left; box-shadow: none; transition: none;
}
html[data-g3-tema]:not([data-kiosco="1"]) .stat-card:hover,
html[data-g3-tema][data-kiosco="1"] .stat-card:hover { transform: none; box-shadow: none; }   /* no es un botón: no se levanta */
html[data-g3-tema]:not([data-kiosco="1"]) .stat-label,
html[data-g3-tema][data-kiosco="1"] .stat-label { order: 0; margin: 0; overflow-wrap: anywhere; }
html[data-g3-tema]:not([data-kiosco="1"]) .stat-value,
html[data-g3-tema][data-kiosco="1"] .stat-value { order: 1; margin: 0; white-space: nowrap; }

/* ETIQUETAS: no son controles → no se mueven al pasar el ratón */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-tag,
html[data-g3-tema][data-kiosco="1"] .detail-tag { display: inline-flex; align-items: center; border: 0; transition: none; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-tag:hover,
html[data-g3-tema][data-kiosco="1"] .detail-tag:hover { transform: none; }

/* HORARIOS: sangría colgante → el icono cuelga a la izquierda y el texto, aunque parta en varias
   líneas, queda alineado en una sola columna. La nota vacía no deja su filete suelto. */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-sched-row,
html[data-g3-tema][data-kiosco="1"] .detail-sched-row { position: relative; margin: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-sched-row .ico,
html[data-g3-tema][data-kiosco="1"] .detail-sched-row .ico { position: absolute; left: 0; margin: 0; opacity: 1; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-body .detail-sched-note:empty,
html[data-g3-tema][data-kiosco="1"] .detail-body .detail-sched-note:empty { display: none; }
/* los dos títulos (el de «Horarios», dentro de su tarjeta, y el suelto de «Historia y detalle») llevan su
   cuadradito de icono delante: en fila y centrados */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-history-title,
html[data-g3-tema][data-kiosco="1"] .detail-history-title { display: flex; align-items: center; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-history-title .ico,
html[data-g3-tema][data-kiosco="1"] .detail-history-title .ico { box-sizing: border-box; flex: none; margin: 0; opacity: 1; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-history-p:last-child,
html[data-g3-tema][data-kiosco="1"] .detail-history-p:last-child { margin-bottom: 0; }

/* METEO DE CUMBRE: etiqueta → dato → nota (cada uno en su línea) */
html[data-g3-tema]:not([data-kiosco="1"]) #meteo-pico b,
html[data-g3-tema][data-kiosco="1"] #meteo-pico b,
html[data-g3-tema]:not([data-kiosco="1"]) .meteo-pico-dato,
html[data-g3-tema][data-kiosco="1"] .meteo-pico-dato,
html[data-g3-tema]:not([data-kiosco="1"]) .meteo-pico-nota,
html[data-g3-tema][data-kiosco="1"] .meteo-pico-nota { display: block; }
html[data-g3-tema]:not([data-kiosco="1"]) .meteo-pico-nota::first-letter,
html[data-g3-tema][data-kiosco="1"] .meteo-pico-nota::first-letter { text-transform: uppercase; }

/* BANDERA DE BAÑO: el punto sale del flujo para que el chip, si baja de línea, quede alineado
   con el texto y no debajo del punto */
html[data-g3-tema]:not([data-kiosco="1"]) .beach-flag-banner,
html[data-g3-tema][data-kiosco="1"] .beach-flag-banner { position: relative; border: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .beach-flag-banner .flag-dot,
html[data-g3-tema][data-kiosco="1"] .beach-flag-banner .flag-dot { position: absolute; }
html[data-g3-tema]:not([data-kiosco="1"]) .beach-flag-label,
html[data-g3-tema][data-kiosco="1"] .beach-flag-label { flex: 1 1 auto; min-width: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .beach-flag-etq,
html[data-g3-tema][data-kiosco="1"] .beach-flag-etq { display: block; }

/* CONTACTO */
html[data-g3-tema]:not([data-kiosco="1"]) #detailContact,
html[data-g3-tema][data-kiosco="1"] #detailContact { display: grid; }
html[data-g3-tema]:not([data-kiosco="1"]) .info-row,
html[data-g3-tema][data-kiosco="1"] .info-row { position: relative; border: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .info-row svg,
html[data-g3-tema][data-kiosco="1"] .info-row svg { flex: none; }
html[data-g3-tema]:not([data-kiosco="1"]) .info-row a,
html[data-g3-tema][data-kiosco="1"] .info-row a,
html[data-g3-tema]:not([data-kiosco="1"]) .info-row span,
html[data-g3-tema][data-kiosco="1"] .info-row span { min-width: 0; overflow-wrap: anywhere; text-decoration: none; }

/* TIRA 360: solo scroll y separación (la miniatura es del bloque 7 del puente). El relleno deja
   sitio al aro de foco de 3 + 2 px, que el scroll horizontal recortaba; el margen negativo lo
   compensa para que la primera miniatura siga alineada con el texto. */
html[data-g3-tema]:not([data-kiosco="1"]) .f360-strip,
html[data-g3-tema][data-kiosco="1"] .f360-strip {
    padding: 5px 5px 8px; margin: -5px -5px -8px;
    scroll-snap-type: x proximity; scroll-padding: 0 5px; overscroll-behavior-x: contain;
}
html[data-g3-tema]:not([data-kiosco="1"]) .f360-strip > *,
html[data-g3-tema][data-kiosco="1"] .f360-strip > * { scroll-snap-align: start; }
/* Miniatura rota: icono de cámara de trazo (antes, un emoji) */
html[data-g3-tema]:not([data-kiosco="1"]) .f360-thumb-broken::after,
html[data-g3-tema][data-kiosco="1"] .f360-thumb-broken::after {
    content: ""; display: block; width: 100%; height: 100%; opacity: 1;
    background: var(--g3-pista-off);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
}

/* ── 11.3 WEB · medidas ── */
/* Texto de lectura: 16 px con interlínea 1,55 (antes 15/1,65) */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-description { font-size: 16px; line-height: 1.55; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-history-p { margin: 0 0 12px; }

/* Etiquetas: pegadas a la descripción a la que pertenecen (la sección de etiquetas no lleva título) */
html[data-g3-tema]:not([data-kiosco="1"]) #detailTagsSection { margin-top: -8px; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-tags { gap: 6px; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-tag {
    min-height: 30px; padding: 0 13px; border-radius: var(--g3-radio-pildora);
    font-size: 12.5px; line-height: 1;
}

/* Cifras */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-stats-grid { gap: 8px; }
html[data-g3-tema]:not([data-kiosco="1"]) .stat-card { gap: 5px; padding: 11px 14px 12px; border-radius: var(--g3-radio-fila); }
html[data-g3-tema]:not([data-kiosco="1"]) .stat-label { font-size: 10.5px; line-height: 1.25; }
html[data-g3-tema]:not([data-kiosco="1"]) .stat-value { font-size: 22px; line-height: 1.1; }
@media (max-width: 700px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .stat-card { padding: 10px 11px 11px 12px; }
    html[data-g3-tema]:not([data-kiosco="1"]) .stat-value { font-size: 20px; }
    /* cuatro cifras (cumbre con prominencia): 2 × 2 */
    html[data-g3-tema]:not([data-kiosco="1"]) .stat-card:first-child:nth-last-child(n+4),
    html[data-g3-tema]:not([data-kiosco="1"]) .stat-card:first-child:nth-last-child(n+4) ~ .stat-card { flex-basis: calc(50% - 4px); }
}
/* menos de 360 px (móviles antiguos, letra del sistema ampliada): «DIFICULTAD» y «13.7 km» en 88 px de tarjeta */
@media (max-width: 359.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .detail-stats-grid { gap: 6px; }
    html[data-g3-tema]:not([data-kiosco="1"]) .stat-card { padding: 10px 8px 10px 10px; }
    html[data-g3-tema]:not([data-kiosco="1"]) .stat-label { font-size: 10px; letter-spacing: .04em; }
    html[data-g3-tema]:not([data-kiosco="1"]) .stat-value { font-size: 18px; }
}

/* Perfil */
html[data-g3-tema]:not([data-kiosco="1"]) .elevation-container { padding: 12px 12px 6px; border-radius: var(--g3-radio-tarjeta); }
html[data-g3-tema]:not([data-kiosco="1"]) #elevSvg text { font-size: 10.5px; }
html[data-g3-tema]:not([data-kiosco="1"]) #elevHover text { font-size: 12px; }
html[data-g3-tema]:not([data-kiosco="1"]) .elevation-stats-row { gap: 8px; margin-top: 10px; padding: 0 4px; font-size: 12.5px; }
html[data-g3-tema]:not([data-kiosco="1"]) .elev-stat { gap: 6px; font-size: 12.5px; line-height: 1; white-space: nowrap; }
html[data-g3-tema]:not([data-kiosco="1"]) .elev-stat .ico { width: 16px; height: 16px; margin: 0; }
/* con sitio de sobra (tableta, escritorio) los cuatro datos van juntos a la izquierda, como un pie de
   gráfico; repartidos a 720 px de ancho quedaban sueltos y sin relación entre sí */
@media (min-width: 700.02px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .elevation-stats-row { justify-content: flex-start; gap: 8px 26px; }
}

/* Tira 360 */
html[data-g3-tema]:not([data-kiosco="1"]) .f360-strip { gap: 10px; }

/* Visor embebido: mismo radio que las tarjetas y siempre acotado, para que quede cuerpo de ficha
   alrededor por donde desplazarse: 2:1 en escritorio (a 1440×900 ocupaba 405 de los 480 px
   visibles y atrapaba la rueda), 4:3 en el móvil en vertical (197 px de alto sabían a poco) y nunca
   más del 44 % del alto de la ventana (móvil apaisado, portátiles bajos). */
html[data-g3-tema]:not([data-kiosco="1"]) #detail360Section .embed-360-container { border: 0; border-radius: var(--g3-radio-tarjeta); max-height: 44vh; }
@media (max-width: 480px) {
    html[data-g3-tema]:not([data-kiosco="1"]) #detail360Section .embed-360-container { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
    html[data-g3-tema]:not([data-kiosco="1"]) #detail360Section .embed-360-container { aspect-ratio: 2 / 1; }
}

/* Minimapa (el lienzo ya ocupa toda la caja: miniMap.resize() en el parche) */
html[data-g3-tema]:not([data-kiosco="1"]) #miniMapContainer { height: 200px; border: 1.5px solid var(--g3-linea); border-radius: var(--g3-radio-tarjeta); }

/* Contacto: filas de 48 px; la fila entera es el toque */
html[data-g3-tema]:not([data-kiosco="1"]) #detailContact { gap: 6px; }
html[data-g3-tema]:not([data-kiosco="1"]) .info-row {
    gap: 12px; min-height: 48px; padding: 6px 16px 6px 14px;
    border-radius: var(--g3-radio-fila); font-size: 15px; line-height: 1.3;
}
html[data-g3-tema]:not([data-kiosco="1"]) .info-row svg { width: 20px; height: 20px; }
html[data-g3-tema]:not([data-kiosco="1"]) .info-row a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* el aro de foco de 3 px rodea la fila entera, que es el toque: lo pinta el ::before del propio enlace
   (el del texto se queda transparente, no «none»: sigue saliendo con colores forzados de Windows) */
html[data-g3-tema]:not([data-kiosco="1"]) .info-row a:focus-visible { outline-color: transparent; }
html[data-g3-tema]:not([data-kiosco="1"]) .info-row a:focus-visible::before { outline: 3px solid var(--g3-foco); outline-offset: 2px; }
html[data-g3-tema]:not([data-kiosco="1"]) .info-row:has(a):hover { background: var(--g3-tinte-hover); }
html[data-g3-tema]:not([data-kiosco="1"]) .info-row:has(a):active { background: var(--g3-tinte-activo); }

/* Horarios y meteo de cumbre */
html[data-g3-tema]:not([data-kiosco="1"]) #detailDesc .detail-schedule { margin: 16px 0 0; padding: 14px 16px 15px; border: 0; border-radius: var(--g3-radio-tarjeta); }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-sched-row { padding: 0 0 0 28px; font-size: 15px; line-height: 1.45; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-sched-row + .detail-sched-row { margin-top: 8px; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-sched-row .ico { top: 2px; width: 18px; height: 18px; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-body .detail-sched-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-body .detail-schedule .detail-sched-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--g3-borde); }
html[data-g3-tema]:not([data-kiosco="1"]) #detailDesc #meteo-pico { margin: 14px 0 0; padding: 11px 14px 12px; border-radius: var(--g3-radio-fila); font-size: 15px; line-height: 1.4; }
html[data-g3-tema]:not([data-kiosco="1"]) #meteo-pico b { margin: 0 0 4px; font-size: 10.5px; line-height: 1.25; }
html[data-g3-tema]:not([data-kiosco="1"]) .meteo-pico-dato { font-size: 18px; line-height: 1.2; }
html[data-g3-tema]:not([data-kiosco="1"]) .meteo-pico-nota { margin-top: 4px; font-size: 12.5px; line-height: 1.4; }

/* «Horarios» (dentro de su tarjeta, con icono) e «Historia y detalle» (suelto) */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-history-title { gap: 8px; margin: 26px 0 10px; font-size: 11.5px; line-height: 1.2; }
html[data-g3-tema]:not([data-kiosco="1"]) #detailDesc .detail-schedule > .detail-history-title { gap: 8px; margin: 0 0 12px; }
html[data-g3-tema]:not([data-kiosco="1"]) .detail-history-title .ico { width: 24px; height: 24px; padding: 5px; border-radius: var(--g3-radio-mini); }

/* Wikipedia */
html[data-g3-tema]:not([data-kiosco="1"]) .detail-wiki { padding: 14px 16px 16px; border: 0; border-radius: var(--g3-radio-tarjeta); font-size: 15px; line-height: 1.55; }
html[data-g3-tema]:not([data-kiosco="1"]) .wiki-extract { margin: 0 0 12px; }
html[data-g3-tema]:not([data-kiosco="1"]) .wiki-loading,
html[data-g3-tema]:not([data-kiosco="1"]) .wiki-empty { font-size: 14px; font-style: normal; }
html[data-g3-tema]:not([data-kiosco="1"]) .wiki-loading .ico { width: 16px; height: 16px; margin: 0 6px 0 0; opacity: 1; vertical-align: -3px; }

/* Bandera de baño */
html[data-g3-tema]:not([data-kiosco="1"]) .beach-flag-banner { gap: 8px 12px; min-height: 60px; margin: 0 0 14px; padding: 8px 8px 8px 40px; border-radius: var(--g3-radio-fila); }
html[data-g3-tema]:not([data-kiosco="1"]) .beach-flag-banner .flag-dot { left: 14px; top: 23px; width: 14px; height: 14px; }
html[data-g3-tema]:not([data-kiosco="1"]) .beach-flag-label { font-size: 12.5px; line-height: 1.3; }
html[data-g3-tema]:not([data-kiosco="1"]) .beach-flag-etq { margin: 0 0 2px; font-size: 10.5px; line-height: 1.25; }
html[data-g3-tema]:not([data-kiosco="1"]) .beach-flag-label b { font-size: 18px; line-height: 1.2; }
html[data-g3-tema]:not([data-kiosco="1"]) .beach-flag-origin { font-size: 12.5px; }

/* Los dos chips de enlace (gemelos de .marine-flags-cam): 44 px reales */
html[data-g3-tema]:not([data-kiosco="1"]) .beach-flag-cam,
html[data-g3-tema]:not([data-kiosco="1"]) .wiki-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px 0 14px;
    border: 0; border-radius: var(--g3-radio-pildora);
    font-size: 12.5px; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: none;
}
html[data-g3-tema]:not([data-kiosco="1"]) .beach-flag-cam .ico,
html[data-g3-tema]:not([data-kiosco="1"]) .wiki-link .ico { flex: none; width: 17px; height: 17px; margin: 0; opacity: 1; }

/* HUD de seguimiento de ruta (no existe en el tótem). Sin z-index: se queda el suyo.
   Escritorio: debajo de la barra de categorías (antes la tapaba), centrado. */
html[data-g3-tema]:not([data-kiosco="1"]) .route-hud {
    top: 76px; gap: 14px; padding: 8px 8px 8px 18px; max-width: min(560px, calc(100vw - 32px));
    border-radius: var(--g3-radio-tarjeta); box-shadow: var(--g3-sombra);
}
html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-info { flex: 1 1 auto; min-width: 0; gap: 6px; }
html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-route { max-width: none; font-size: 10.5px; line-height: 1.25; }
html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-route .ico { width: 13px; height: 13px; margin: 0 5px 0 0; opacity: 1; vertical-align: -2px; }
/* cada dato: cifra arriba, unidad debajo (antes «0.00 km» partía en dos líneas por falta de sitio) */
html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stats { gap: 16px; font-size: 11px; line-height: 1.2; white-space: nowrap; }
html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stats > span { display: flex; flex-direction: column; gap: 3px; }
html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stats b { font-size: 19px; line-height: 1; }
html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stop {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--g3-radio-boton);
    font-size: 14px; line-height: 1.1; white-space: nowrap; transition: none;
}
/* respuesta al ratón y al toque: el mismo rojo un punto más denso, sin mover nada */
html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stop:hover { box-shadow: inset 0 0 0 99px rgba(168,38,28,.08); }
html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stop:active { box-shadow: inset 0 0 0 99px rgba(168,38,28,.16); }
html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stop .ico { flex: none; width: 17px; height: 17px; margin: 0; opacity: 1; }
/* Móvil y tableta: arriba a la izquierda, dejando libre el rail de capas (68 px + márgenes) */
@media (max-width: 1023.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .route-hud {
        top: 10px; left: 10px; right: auto; transform: none;
        gap: 10px; padding: 8px 8px 8px 14px; max-width: calc(100vw - 98px);
    }
    html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stats { gap: 14px; }
}
/* Móvil: «Finalizar» con el icono encima, como los botones pequeños de la botonera de la ficha */
@media (max-width: 480px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stop { flex-direction: column; gap: 4px; min-width: 64px; min-height: 54px; padding: 7px 10px 6px; font-size: 11.5px; }
}
/* Menos de 360 px: no caben los tres datos y el rótulo → «Finalizar» se queda en su icono (el texto
   sigue en el botón para los lectores de pantalla) */
@media (max-width: 359.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .route-hud { gap: 8px; padding-left: 12px; }
    html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stats { gap: 10px; }
    html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stats b { font-size: 17px; }
    html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stop { gap: 0; min-width: 48px; padding: 0; font-size: 0; }
    html[data-g3-tema]:not([data-kiosco="1"]) .route-hud-stop .ico { width: 22px; height: 22px; }
}

/* ── 11.4 TÓTEM · mismo panel lateral; se da tamaño a lo que se quedaba en medidas de web ──
   (junto a una descripción de 20 px había etiquetas de 12, cifras de 18/11, horarios de 13,5,
   contacto de 14 y datos del perfil de 10). No se tocan los 20/19/18/17 px que ya fija styles-v3. */
html[data-g3-tema][data-kiosco="1"] .detail-history-p { margin: 0 0 14px; }
html[data-g3-tema][data-kiosco="1"] .detail-tags { gap: 10px; }
html[data-g3-tema][data-kiosco="1"] .detail-tag { min-height: 40px; padding: 0 18px; border-radius: 99px; font-size: 16px; line-height: 1; }

html[data-g3-tema][data-kiosco="1"] .detail-stats-grid { gap: 10px; }
html[data-g3-tema][data-kiosco="1"] .stat-card { gap: 6px; padding: 14px 16px 13px; border-radius: 16px; }
html[data-g3-tema][data-kiosco="1"] .stat-label { font-size: 16px; line-height: 1.25; }
html[data-g3-tema][data-kiosco="1"] .stat-value { font-size: 28px; line-height: 1.1; }
html[data-g3-tema][data-kiosco="1"] .stat-card:first-child:nth-last-child(n+4),
html[data-g3-tema][data-kiosco="1"] .stat-card:first-child:nth-last-child(n+4) ~ .stat-card { flex-basis: calc(50% - 5px); }

html[data-g3-tema][data-kiosco="1"] .elevation-container { padding: 14px 14px 6px; border-radius: 18px; }
/* ejes del perfil 16 px y datos de debajo 18 px (a 75" eran los textos más pequeños de la ficha, junto a una
   descripción de 20). El SVG no crece: la etiqueta del eje de km (base en y=126 de 132) cabe a 16 px. */
html[data-g3-tema][data-kiosco="1"] #elevSvg text { font-size: 16px; }
html[data-g3-tema][data-kiosco="1"] #elevHover text { font-size: 18px; }
html[data-g3-tema][data-kiosco="1"] .elevation-stats-row { gap: 10px; margin-top: 14px; padding: 0 4px; font-size: 18px; }
html[data-g3-tema][data-kiosco="1"] .elev-stat { gap: 7px; font-size: 18px; line-height: 1; white-space: nowrap; }
html[data-g3-tema][data-kiosco="1"] .elev-stat .ico { width: 22px; height: 22px; margin: 0; }

html[data-g3-tema][data-kiosco="1"] .f360-strip { gap: 12px; }
html[data-g3-tema][data-kiosco="1"] #detail360Section .embed-360-container { border: 0; border-radius: 18px; }
html[data-g3-tema][data-kiosco="1"] #miniMapContainer { height: 220px; border: 2px solid var(--g3-linea); border-radius: 18px; }

/* contacto: aquí no se pulsa (js/kiosco.js anula tel: y enlaces externos) → se lee como dato, sin aspecto de enlace */
html[data-g3-tema][data-kiosco="1"] #detailContact { gap: 8px; }
html[data-g3-tema][data-kiosco="1"] .info-row { gap: 16px; min-height: 60px; padding: 8px 20px 8px 18px; border-radius: 16px; font-size: 18px; line-height: 1.3; }
html[data-g3-tema][data-kiosco="1"] .info-row svg { width: 24px; height: 24px; }
html[data-g3-tema][data-kiosco="1"] .info-row a { color: var(--g3-texto); font-weight: 500; }

html[data-g3-tema][data-kiosco="1"] #detailDesc .detail-schedule { margin: 20px 0 0; padding: 18px 20px 19px; border: 0; border-radius: 18px; }
html[data-g3-tema][data-kiosco="1"] .detail-sched-row { padding: 0 0 0 36px; font-size: 18px; line-height: 1.45; }
html[data-g3-tema][data-kiosco="1"] .detail-sched-row + .detail-sched-row { margin-top: 10px; }
html[data-g3-tema][data-kiosco="1"] .detail-sched-row .ico { top: 2px; width: 23px; height: 23px; }
html[data-g3-tema][data-kiosco="1"] .detail-body .detail-sched-note { margin: 12px 0 0; font-size: 15px; line-height: 1.45; }
html[data-g3-tema][data-kiosco="1"] .detail-body .detail-schedule .detail-sched-note { margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--g3-borde); }
html[data-g3-tema][data-kiosco="1"] #detailDesc #meteo-pico { margin: 18px 0 0; padding: 14px 18px 15px; border-radius: 16px; font-size: 18px; line-height: 1.4; }
html[data-g3-tema][data-kiosco="1"] #meteo-pico b { margin: 0 0 5px; font-size: 14px; line-height: 1.25; }
html[data-g3-tema][data-kiosco="1"] .meteo-pico-dato { font-size: 24px; line-height: 1.2; }
html[data-g3-tema][data-kiosco="1"] .meteo-pico-nota { margin-top: 5px; font-size: 15px; line-height: 1.4; }

/* los 17 px de «Historia y detalle» los fija styles-v3; aquí, solo separación e icono */
html[data-g3-tema][data-kiosco="1"] .detail-history-title { gap: 10px; margin: 32px 0 12px; line-height: 1.2; }
html[data-g3-tema][data-kiosco="1"] #detailDesc .detail-schedule > .detail-history-title { gap: 10px; margin: 0 0 14px; }
html[data-g3-tema][data-kiosco="1"] .detail-history-title .ico { width: 30px; height: 30px; padding: 6px; border-radius: 9px; }

/* los 18 px de Wikipedia los fija styles-v3 (y el enlace está oculto: no hay salida a webs) */
html[data-g3-tema][data-kiosco="1"] .detail-wiki { padding: 18px 20px; border: 0; border-radius: 18px; line-height: 1.55; }
html[data-g3-tema][data-kiosco="1"] .wiki-extract { margin: 0; }
html[data-g3-tema][data-kiosco="1"] .wiki-loading,
html[data-g3-tema][data-kiosco="1"] .wiki-empty { font-size: 17px; font-style: normal; }
html[data-g3-tema][data-kiosco="1"] .wiki-loading .ico { width: 20px; height: 20px; margin: 0 8px 0 0; opacity: 1; vertical-align: -4px; }

/* bandera (el enlace a la cámara ya está oculto en el tótem) */
html[data-g3-tema][data-kiosco="1"] .beach-flag-banner { gap: 10px 16px; min-height: 76px; margin: 0 0 18px; padding: 13px 18px 13px 52px; border-radius: 16px; }
html[data-g3-tema][data-kiosco="1"] .beach-flag-banner .flag-dot { left: 18px; top: 29px; width: 18px; height: 18px; }
html[data-g3-tema][data-kiosco="1"] .beach-flag-label { font-size: 16px; line-height: 1.3; }
html[data-g3-tema][data-kiosco="1"] .beach-flag-etq { margin: 0 0 3px; font-size: 16px; line-height: 1.25; }
html[data-g3-tema][data-kiosco="1"] .beach-flag-label b { font-size: 24px; line-height: 1.2; }
html[data-g3-tema][data-kiosco="1"] .beach-flag-origin { font-size: 16px; }
html[data-g3-tema][data-kiosco="1"] .f360-thumb-broken::after { -webkit-mask-size: 38px 38px; mask-size: 38px 38px; }

/* ── 11.5 VISOR 360 abierto desde la tira de una ruta (solo web: en el tótem el enlace está oculto) ──
   «Ver en Street View» medía 117×13 px: por debajo del mínimo táctil de 44. La caja visible no cambia
   (el pie del visor sigue igual); el toque se amplía con un ::before, como el resto de enlaces del puente. */
html[data-g3-tema]:not([data-kiosco="1"]) .f360-viewer-fallback { position: relative; }
html[data-g3-tema]:not([data-kiosco="1"]) .f360-viewer-fallback::before { content: ""; position: absolute; inset: -16px -8px; }


/* ═══ PIEZA: panel-comun ═══ */
/* =====================================================================
   PARCIAL «panel-comun» — se añade AL FINAL de kit/ui-golf360/puente-bareyo.css
   (necesita los parches de panel-comun.parches.json: las clases nuevas salen de ahí).

   Cubre:
     P1 · la CÁSCARA de los cinco paneles del dock (condiciones, agenda, transporte, servicios,
          «Bareyo en cifras»): contenedor, posición, botón de cerrar, cabecera, fila base, título
          de sección, nota, pie de fuentes y estado vacío.
     P2 · TODO el contenido del panel de CONDICIONES (#conditionsFloatPanel).
     P3 · el TÓTEM: misma cáscara y mismo contenido con el texto ×1,4-1,5 (hasta hoy 9-13 px).

   La LEY de prefijos (CONTRATO §3):
     · html[data-g3-tema]:not([data-kiosco="1"]) …  → medidas, disposición y forma en la WEB
     · html[data-g3-tema][data-kiosco="1"] …         → lo mismo, a propósito, en el TÓTEM (en px)
     · html[data-g3-tema] …                          → SOLO color, fondo de piezas internas, familia,
                                                        peso, interletra, mayúsculas, cifras tabulares, trazo
   Sin z-index de capa, sin transform/filter en el dock. Dentro del panel hay DOS z-index locales
   (cabecera 1, × 2) encerrados con isolation:isolate: no salen del panel.

   CAMBIO DE DISPOSICIÓN (≥1024 px, web y tótem): el panel deja de colgar de SU pastilla y cuelga
   del DOCK (.floating-btn-group pasa a position:static; era relative solo para anclar el panel).
   Así los cinco abren en el mismo sitio y con el mismo ancho, nunca debajo del cajón ni del rail,
   en cualquier idioma y aunque el dock se parta en dos filas. Para volver atrás basta borrar las
   dos reglas «position:static» (bloques P1.2 y P3.1).

   Clases nuevas (las pone el parche; las reutilizan agenda-evento y paneles-tsc):
     .panel-hero-etq  etiqueta/título en versalitas de la cabecera
     .panel-hero-num  cifra grande de la cabecera            .panel-hero-sub  nota junto a la cifra
     .panel-hero-tit  título de cabecera sin cifra           .row-val         valor de una fila (+ <small> = unidad)
     .panel-nota      nota bajo una fila                     .panel-fuente    pie de fuentes
   ===================================================================== */

/* ══ P1 · CÁSCARA COMÚN (web: móvil, tableta y escritorio) ═══════════════════════════════════ */

/* P1.1 Contenedor: tarjeta de 18 px (el puente ya le da fondo, sombra teñida y le quita el cristal) */
html[data-g3-tema] .floating-expand-panel { color: var(--g3-texto); font-family: var(--g3-fuente-texto); }
/* Sin relleno vertical A PROPÓSITO: los navegadores miden lo pegajoso (sticky) desde el borde de
   contenido del panel, así que con relleno la cabecera se quedaría 16 px por debajo del borde y el
   contenido asomaría por encima. El aire de arriba lo pone el primer bloque (la cabecera) y el de
   abajo, el ::after. */
html[data-g3-tema]:not([data-kiosco="1"]) .floating-expand-panel {
    padding: 0 16px;
    font-size: 14px; line-height: 1.4;
    isolation: isolate;
    scrollbar-color: var(--g3-borde) transparent;
    transition: none;
}
/* red de seguridad: un primer bloque que no sea la cabecera común (p. ej. .events-head) no nace pegado al borde.
   Va en :where() para no sumar especificidad: cualquier regla posterior de la pieza dueña la pisa. */
html[data-g3-tema]:not([data-kiosco="1"]) .floating-expand-panel > :where(div:first-of-type:not(.weather-panel-header):not(.float-empty)) { padding-top: 16px; }
/* Entra con un fundido corto (antes aparecía de golpe: el transition heredado nunca corría con display:none) */
@keyframes bz-panel-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html[data-g3-tema]:not([data-kiosco="1"]) .floating-expand-panel.active { animation: bz-panel-entra .16s ease-out both; }
/* Pie del panel = pista de que hay más debajo: el contenido se funde con el borde inferior en vez de
   cortarse en seco. Es a la vez el relleno inferior (20 px reales), así que al llegar al final no tapa nada. */
html[data-g3-tema]:not([data-kiosco="1"]) .floating-expand-panel::after {
    content: ""; display: block; position: sticky; bottom: 0;
    height: 20px; margin: 0 -16px; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--g3-superficie) 90%);
}

/* P1.2 Posición en escritorio: colgado del dock, a su izquierda, mismo ancho para los cinco.
   · left:0 → el dock empieza siempre ≥ 32 px a la derecha del cajón (su max-width lo garantiza)
   · max-width en % DEL DOCK → nunca llega al rail: 100 % − 137 px lo deja a 16 px de un rail de 125 px
     (medido: 125 px en castellano, 112 en alemán)
   · bottom:100% del dock → vale también cuando el dock se parte en dos filas (1280-1360 px)
   · max-height con el ALTO DEL DOCK (el 100 %) descontado → el borde superior nunca sube de y = 88,
     bajo la barra de categorías, tenga el dock una fila o dos */
@media (min-width: 1024px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .floating-btn-group { position: static; }
    html[data-g3-tema]:not([data-kiosco="1"]) .floating-expand-panel,
    html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel.floating-expand-panel {
        left: 0; right: auto; top: auto; bottom: calc(100% + 12px);
        width: 380px; min-width: 0; max-width: calc(100% - 137px);
        max-height: min(calc(100vh - 100% - 116px), 680px);
    }
}

/* P1.3 Posición en móvil y tableta (<1024): sigue FIJO sobre la tira y al lado del rail (el panel vive
   en la capa 10 del dock y el rail en la 20: no puede pasar por encima). Lo que se arregla:
   · aire con la tira: se apoyaba en ella sin un píxel de separación (el cálculo era para una tira de 48 px)
   · aprovecha todo el alto libre (antes se quedaba en el 62 % de la pantalla)
   · en tableta deja de estirarse a 726 px */
@media (max-width: 1023.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) body.has-bottomnav .floating-expand-panel,
    html[data-g3-tema]:not([data-kiosco="1"]) body.has-bottomnav #eventsFloatPanel.floating-expand-panel {
        left: 8px; right: auto; top: auto;
        width: min(calc(100vw - 98px), 420px); min-width: 0; max-width: none;
        bottom: calc(var(--cajon-sheet-h, 156px) + 130px);
        max-height: calc(100vh - var(--cajon-sheet-h, 156px) - 150px - env(safe-area-inset-top, 0px));
        max-height: calc(100dvh - var(--cajon-sheet-h, 156px) - 150px - env(safe-area-inset-top, 0px));
    }
}

/* P1.3b Móvil APAISADO (alto ≤ 480 px: 844×390, 750×340, 568×320). Entre el cajón (156 px), la tira del dock y
   la barra inferior al panel le quedaban 34-84 px: solo cabía la cabecera y el contenido era inalcanzable.
   El cajón (capa 30) y la barra (31) están POR ENCIMA del dock (10), donde vive el panel: no se puede pasar por
   delante, así que MIENTRAS HAYA UN PANEL ABIERTO se recogen los dos, la tira baja al borde y el panel dispone
   de todo el alto sobre ella (306 px a 390 de alto, 256 a 340, 236 a 320). Al cerrar el panel vuelve todo. Es lo
   único del marco que toca esta pieza y solo en ese estado (apaisado + panel abierto). Sin :has() no se aplica. */
@supports selector(:has(*)) {
    @media (max-width: 1023.98px) and (max-height: 480px) {
        html[data-g3-tema]:not([data-kiosco="1"]) body.has-bottomnav:has(.floating-expand-panel.active) #cajon,
        html[data-g3-tema]:not([data-kiosco="1"]) body.has-bottomnav:has(.floating-expand-panel.active) #bottomNav { display: none; }
        html[data-g3-tema]:not([data-kiosco="1"]) body.has-bottomnav:has(.floating-expand-panel.active) .floating-overlays {
            bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); transition: none;
        }
        html[data-g3-tema]:not([data-kiosco="1"]) body.has-bottomnav:has(.floating-expand-panel.active) .floating-expand-panel,
        html[data-g3-tema]:not([data-kiosco="1"]) body.has-bottomnav:has(.floating-expand-panel.active) #eventsFloatPanel.floating-expand-panel {
            bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
            max-height: calc(100vh - 84px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
            max-height: calc(100dvh - 84px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
        }
    }
}

/* P1.4 Botón de cerrar: redondo, blanco, aspa de marca (como .f360-viewer-close). Deja de ser un
   flotante (float) que empujaba el texto: va pegajoso arriba a la derecha y NO ocupa sitio
   (10 de margen + 44 de alto − 54 de margen inferior = 0), así el bloque siguiente empieza en el borde. */
html[data-g3-tema] .float-panel-close { background: var(--g3-superficie); color: var(--g3-marca); border-color: transparent; }
html[data-g3-tema] .float-panel-close:hover { background: var(--g3-tinte-hover); color: var(--g3-marca); }
html[data-g3-tema]:not([data-kiosco="1"]) .float-panel-close {
    position: sticky; top: 10px; float: none; display: grid; place-items: center;
    width: 44px; height: 44px; margin: 10px -8px -54px auto; padding: 0;
    border: 0; border-radius: 50%; box-shadow: var(--g3-sombra-compacta); cursor: pointer;
}
html[data-g3-tema]:not([data-kiosco="1"]) .float-panel-close svg { width: 18px; height: 18px; }

/* P1.5 Cabecera: pegajosa, de lado a lado, con el hueco del × reservado. El contenido pasa por debajo. */
html[data-g3-tema] .weather-panel-header { background: var(--g3-superficie); border-color: var(--g3-linea); }
html[data-g3-tema]:not([data-kiosco="1"]) .weather-panel-header {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 12px;
    min-height: 72px; margin: 0 -16px 14px; padding: 12px 62px 12px 16px;
    border-bottom: 1px solid var(--g3-linea);
}
html[data-g3-tema] .panel-hero-ico { background: var(--g3-tinte); color: var(--g3-marca); }
html[data-g3-tema] .panel-hero-ico .ico { stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) .panel-hero-ico { width: 44px; height: 44px; border-radius: var(--g3-radio-fila); }
html[data-g3-tema]:not([data-kiosco="1"]) .panel-hero-ico .ico { width: 24px; height: 24px; }
html[data-g3-tema]:not([data-kiosco="1"]) .weather-panel-header > div { flex: 1 1 auto; min-width: 0; }
/* etiqueta arriba; cifra y nota en la misma línea de base (la nota baja sola si no cabe) */
html[data-g3-tema]:not([data-kiosco="1"]) .weather-panel-header > div:not(.panel-hero-tit) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
html[data-g3-tema] .panel-hero-etq { color: var(--g3-texto-suave); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[data-g3-tema]:not([data-kiosco="1"]) .panel-hero-etq { flex: 0 0 100%; margin-bottom: 3px; font-size: 11px; line-height: 1.25; }
html[data-g3-tema] .panel-hero-num { color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-g3-tema]:not([data-kiosco="1"]) .panel-hero-num { font-size: 26px; line-height: 1.1; }
html[data-g3-tema] .panel-hero-sub { color: var(--g3-texto-suave); font-weight: 500; }
html[data-g3-tema]:not([data-kiosco="1"]) .panel-hero-sub { font-size: 13.5px; line-height: 1.3; }
html[data-g3-tema] .panel-hero-tit { color: var(--g3-marca); font-family: var(--g3-fuente-titulo); font-weight: 700; }
html[data-g3-tema]:not([data-kiosco="1"]) .panel-hero-tit { font-size: 19px; line-height: 1.2; }

/* P1.6 Fila base: rótulo (con su icono) a la izquierda, valor a la derecha */
html[data-g3-tema] .weather-row { color: var(--g3-texto); }
html[data-g3-tema]:not([data-kiosco="1"]) .weather-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 36px; padding: 4px 0; font-size: 14px; line-height: 1.3;
}
html[data-g3-tema]:not([data-kiosco="1"]) .weather-row > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .weather-row > :last-child:not(:first-child) { text-align: right; }
html[data-g3-tema] .weather-row .ico { color: var(--g3-marca-2); stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) .weather-row .ico { width: 17px; height: 17px; margin: 0; opacity: 1; flex: none; }
html[data-g3-tema] .row-val { color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-g3-tema]:not([data-kiosco="1"]) .row-val { font-size: 15px; white-space: nowrap; }
html[data-g3-tema] .row-val small { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 500; }
html[data-g3-tema]:not([data-kiosco="1"]) .row-val small { font-size: .68em; }

/* P1.7 Título de sección de panel (mismo aspecto que el de la ficha): versalitas + icono en cuadradito */
html[data-g3-tema]:not([data-kiosco="1"]) .services-section { margin: 0 0 18px; padding: 0; border: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .services-section:last-child { margin-bottom: 0; }
html[data-g3-tema] .services-section-title { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[data-g3-tema]:not([data-kiosco="1"]) .services-section-title {
    display: flex; align-items: center; gap: 8px; min-height: 24px; margin: 0 0 8px;
    font-size: 11.5px; line-height: 1.3;
}
html[data-g3-tema] .services-section-title .ico { background: var(--g3-tinte); color: var(--g3-marca); stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) .services-section-title .ico {
    box-sizing: border-box; width: 24px; height: 24px; margin: 0; padding: 5px;
    border-radius: 8px; opacity: 1; flex: none;
}

/* P1.8 Nota bajo una fila, pie de fuentes y estado vacío */
html[data-g3-tema] .panel-nota, html[data-g3-tema] .panel-fuente, html[data-g3-tema] .float-empty { color: var(--g3-texto-suave); }
html[data-g3-tema]:not([data-kiosco="1"]) .panel-nota { font-size: 12.5px; line-height: 1.4; }
html[data-g3-tema]:not([data-kiosco="1"]) .panel-fuente { margin-top: 16px; font-size: 11.5px; line-height: 1.4; }
html[data-g3-tema]:not([data-kiosco="1"]) .float-empty { padding: 6px 0; font-size: 14px; line-height: 1.45; }
html[data-g3-tema] .float-empty .ico { color: var(--g3-marca-2); stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) .float-empty .ico { width: 18px; height: 18px; margin: 0 6px 0 0; opacity: 1; vertical-align: -3px; }
/* el panel entero vacío (sin conexión al abrir): mensaje centrado que no pisa el × */
html[data-g3-tema]:not([data-kiosco="1"]) .floating-expand-panel > .float-empty { padding: 36px 40px 16px; text-align: center; }

/* P1.9 Punto de color de dominio (bandera de baño, calidad del aire): el color lo pone el dato */
html[data-g3-tema]:not([data-kiosco="1"]) .flag-dot { width: 12px; height: 12px; box-shadow: 0 0 0 2px var(--g3-superficie), 0 0 0 3px var(--g3-borde); }

/* P1.10 Pastilla del panel ABIERTO: relleno de marca con texto blanco (la misma señal que las capas 360 encendidas).
   Con el panel colgado del dock (≥ 1024 px) ya no nace sobre su botón: sin esta marca no se sabe de cuál sale.
   app.js pone aria-expanded en la pastilla al abrir/cerrar el panel (MutationObserver junto a _openFloatPanel).
   Solo color (prefijo «ambos»); el selector lleva .floating-overlays para empatar con el :hover del dock y ganar por orden. */
html[data-g3-tema] .floating-overlays .floating-btn-group > .floating-pill[aria-expanded="true"] { background: var(--g3-marca); color: #fff; }
html[data-g3-tema] .floating-overlays .floating-btn-group > .floating-pill[aria-expanded="true"]:hover { background: var(--g3-marca-oscura); color: #fff; }
html[data-g3-tema] .floating-overlays .floating-btn-group > .floating-pill[aria-expanded="true"] .floating-pill-sep { color: inherit; }

/* ══ P2 · CONDICIONES (web) ═══════════════════════════════════════════════════════════════════ */

/* P2.1 Cifras de «ahora»: tres de tiempo y cuatro de mar, etiqueta → cifra (sin etiqueta a 400 px del valor) */
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-panel-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-panel-rows--mar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-g3-tema] #conditionsFloatPanel .weather-row { background: var(--g3-tinte); }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-row {
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px;
    min-height: 0; padding: 10px 10px 9px 12px; border-radius: var(--g3-radio-fila);
}
html[data-g3-tema] #conditionsFloatPanel .weather-row > span:first-child { color: var(--g3-texto-suave); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-row > span:first-child { display: block; font-size: 10.5px; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-row > .row-val { margin-top: auto; font-size: 19px; line-height: 1.15; text-align: left; white-space: normal; }

/* P2.2 Sol: una fila de tinte (fuera el degradado naranja) */
html[data-g3-tema] #conditionsFloatPanel .weather-sun-row { background: var(--g3-tinte); color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-sun-row {
    justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 6px; padding: 0 14px;
    border-radius: var(--g3-radio-fila); font-size: 16px;
}
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-sun-row > span { display: inline-flex; align-items: center; gap: 8px; }
html[data-g3-tema] #conditionsFloatPanel .weather-sun-row .ico { color: var(--g3-marca); stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-sun-row .ico { width: 19px; height: 19px; margin: 0; opacity: 1; }
html[data-g3-tema] #conditionsFloatPanel .weather-sun-divider { background: var(--g3-borde); }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-sun-divider { flex: 1 1 auto; height: 2px; margin: 0; border-radius: 2px; }

/* P2.3 Aire y polen: tarjeta de tinte; el color de la escala europea queda en el punto, el texto en tinta */
html[data-g3-tema] #conditionsFloatPanel .weather-air-chip { background: var(--g3-tinte); color: var(--g3-texto); }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-air-chip {
    gap: 2px; margin-top: 6px; padding: 10px 12px; border: 0; border-radius: var(--g3-radio-fila);
    font-size: 14px; line-height: 1.4;
}
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-air-chip .flag-dot { margin: 0 9px 0 2px; vertical-align: -1px; }
html[data-g3-tema] #conditionsFloatPanel .weather-air-chip b { font-weight: 700; }
html[data-g3-tema] #conditionsFloatPanel .weather-air-chip small,
html[data-g3-tema] #conditionsFloatPanel .weather-pollen { color: var(--g3-texto-suave); font-weight: 500; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-air-chip small { font-size: inherit; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-pollen { font-size: 12.5px; line-height: 1.4; }

/* P2.4 Títulos de sección dentro de Condiciones (mar, bandera, previsión): son hermanos sueltos, llevan su aire */
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .services-section-title { margin-top: 20px; }

/* P2.5 Mareas: tabla corta. «Ahora» y las cuatro próximas con la altura en la misma columna */
html[data-g3-tema] #conditionsFloatPanel .tides-block { background: var(--g3-tinte); color: var(--g3-texto); }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tides-block {
    margin-top: 6px; padding: 2px 12px 10px; border: 0; border-radius: var(--g3-radio-fila);
    font-size: 14px; line-height: 1.3;
}
html[data-g3-tema] #conditionsFloatPanel .tides-now { color: var(--g3-texto); border-color: var(--g3-borde); font-weight: 700; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tides-now {
    gap: 8px; min-height: 42px; margin: 0 0 4px; padding: 0;
    border-bottom: 1px solid var(--g3-borde); font-size: 14px;
}
html[data-g3-tema] #conditionsFloatPanel .tides-now .ico { color: var(--g3-marca); stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tides-now .ico { width: 18px; height: 18px; flex: none; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tides-now > span:first-of-type { flex: 1 1 auto; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tides-now .row-val { font-size: 19px; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tides-list { display: block; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tide-event { gap: 8px; min-height: 30px; padding: 0; font-size: 14px; }
html[data-g3-tema] #conditionsFloatPanel .tide-icon .ico { color: var(--g3-marca-2); stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tide-event .tide-icon { display: grid; place-items: center; width: 18px; font-size: inherit; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tide-icon .ico { width: 17px; height: 17px; }
html[data-g3-tema] #conditionsFloatPanel .tide-event .tide-label { color: var(--g3-texto); font-weight: 500; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tide-event .tide-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
/* la hora en tinta: el verde/rojo no era un código (y el rojo se confundía con la bandera roja) */
html[data-g3-tema] #conditionsFloatPanel .tide-event .tide-time { color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tide-event .tide-time { font-size: 15px; }
html[data-g3-tema] #conditionsFloatPanel .tide-event .tide-h { color: var(--g3-texto-suave); font-weight: 500; font-variant-numeric: tabular-nums; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tide-event .tide-h { min-width: 50px; margin-left: 0; font-size: 13px; text-align: right; white-space: nowrap; }
html[data-g3-tema] #conditionsFloatPanel .tides-disclaimer { color: var(--g3-texto-suave); }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tides-disclaimer { margin-top: 6px; font-size: 11.5px; line-height: 1.4; font-style: normal; text-align: left; }

/* P2.6 Banderas de baño: filas de tinte; el color de la bandera SOLO en el punto */
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .marine-flags { margin: 0; padding: 0; border: 0; }
html[data-g3-tema] #conditionsFloatPanel .marine-flag-row { background: var(--g3-tinte); color: var(--g3-texto); font-family: var(--g3-fuente-texto); font-weight: 500; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .marine-flag-row {
    gap: 11px; min-height: 44px; margin-bottom: 6px; padding: 6px 12px 6px 14px;
    border-radius: var(--g3-radio-fila); font-size: 14px; line-height: 1.25;
}
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .marine-flag-name { white-space: normal; overflow: visible; }
html[data-g3-tema] #conditionsFloatPanel .marine-flag-val { color: var(--g3-texto); font-weight: 700; }
html[data-g3-tema] #conditionsFloatPanel .marine-flag-val[data-flag="sin-dato"] { color: var(--g3-texto-suave); font-weight: 500; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .marine-flag-val { font-size: 13.5px; white-space: nowrap; }
/* enlace a la cámara: chip de 44 px, gemelo de .beach-flag-cam de la ficha */
html[data-g3-tema] #conditionsFloatPanel .marine-flags-cam { background: var(--g3-tinte); color: var(--g3-marca); font-family: var(--g3-fuente-texto); font-weight: 600; }
html[data-g3-tema] #conditionsFloatPanel .marine-flags-cam:hover { background: var(--g3-tinte-hover); }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .marine-flags-cam {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 0; padding: 0 16px 0 14px;
    border-radius: var(--g3-radio-pildora); font-size: 12.5px; line-height: 1.2; text-decoration: none;
}
html[data-g3-tema] #conditionsFloatPanel .marine-flags-cam .ico { stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .marine-flags-cam .ico { width: 17px; height: 17px; margin: 0; opacity: 1; }

/* P2.7 Previsión: lista de siete días (antes una tira con scroll lateral donde solo cabían cuatro).
   día · cielo · lluvia · máxima · mínima, en columnas; «hoy» en tinte */
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-forecast-strip { display: block; margin: 0; padding: 0; overflow: visible; }
html[data-g3-tema] #conditionsFloatPanel .weather-day { background: transparent; font-family: var(--g3-fuente-texto); }
html[data-g3-tema] #conditionsFloatPanel .weather-day.is-today { background: var(--g3-tinte); }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day {
    display: grid; grid-template-columns: minmax(0, 1fr) 24px 46px auto; align-items: center; column-gap: 6px;
    min-width: 0; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--g3-radio-fila); text-align: left;
}
html[data-g3-tema] #conditionsFloatPanel .weather-day-label { color: var(--g3-texto); font-weight: 500; letter-spacing: 0; }
html[data-g3-tema] #conditionsFloatPanel .weather-day.is-today .weather-day-label { color: var(--g3-marca); font-weight: 700; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day-label { font-size: 14px; line-height: 1.2; }
html[data-g3-tema] #conditionsFloatPanel .weather-day-icon .ico { color: var(--g3-marca); stroke-width: 2; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day-icon { display: grid; place-items: center; margin: 0; font-size: inherit; line-height: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day-icon .ico { width: 22px; height: 22px; }
html[data-g3-tema] #conditionsFloatPanel .weather-day-rain { color: var(--g3-texto-suave); font-weight: 500; font-variant-numeric: tabular-nums; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day-rain { min-height: 0; margin: 0; font-size: 12.5px; line-height: 1.2; text-align: right; white-space: nowrap; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day-rain .ico { width: 13px; height: 13px; margin: 0 1px 0 0; opacity: 1; vertical-align: -2px; }
html[data-g3-tema] #conditionsFloatPanel .weather-day-temp { font-family: var(--g3-fuente-titulo); font-variant-numeric: tabular-nums; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day-temp { order: 2; justify-content: flex-end; gap: 0; font-size: 15px; line-height: 1.2; }
html[data-g3-tema] #conditionsFloatPanel .weather-day-tmax { color: var(--g3-texto); font-weight: 700; }
html[data-g3-tema] #conditionsFloatPanel .weather-day-tmin { color: var(--g3-texto-suave); font-weight: 500; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day-tmax,
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day-tmin { min-width: 32px; text-align: right; }
html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day-label { overflow-wrap: anywhere; hyphens: auto; }

/* P2.8 Teléfonos estrechos. <390 px (iPhone SE/mini, Android de 360): las tres cifras siguen en fila
   con menos relleno. <360 px (320 de ancho): ya no caben tres rótulos en versalitas → una cifra por línea. */
@media (max-width: 389.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-panel-rows { gap: 4px; }
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-row { padding: 9px 8px 8px 9px; }
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day { padding: 0 8px; column-gap: 5px; }
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tides-block { padding-left: 10px; padding-right: 10px; }
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tide-event { gap: 6px; }
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .tide-event .tide-h { min-width: 42px; }
}
@media (max-width: 359.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-panel-rows,
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-panel-rows--mar { grid-template-columns: minmax(0, 1fr); }
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-row {
        flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;
        min-height: 40px; padding: 6px 10px 6px 12px;
    }
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-row > .row-val { margin-top: 0; font-size: 17px; text-align: right; white-space: nowrap; }
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day { grid-template-columns: minmax(0, 1fr) 22px 40px auto; }
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day-tmax,
    html[data-g3-tema]:not([data-kiosco="1"]) #conditionsFloatPanel .weather-day-tmin { min-width: 28px; }
}

/* ══ P3 · TÓTEM (1920×1080 táctil, 75") ══════════════════════════════════════════════════════ */

/* P3.1 Cáscara y posición. El panel cuelga del dock y se coloca SIEMPRE a 12 px del rail:
   borde derecho del dock (100vw − 16) − cajón − rail (12 + 110) − 12 de aire − ancho del panel.
   Queda libre de cajón, rail y barra de idiomas en cualquier idioma (el dock crece hacia la izquierda;
   el rail del tótem mide 110 px fijos porque el puente §9 fija sus botones en 96 px).
   El ancho va en una variable para que «right» y «width» no puedan desajustarse. */
@media (min-width: 1024px) {
    html[data-g3-tema][data-kiosco="1"] .floating-btn-group { position: static; }
    html[data-g3-tema][data-kiosco="1"] .floating-expand-panel,
    html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel.floating-expand-panel {
        --pc-ancho: 540px;
        left: auto; top: auto; bottom: calc(100% + 12px);
        right: max(0px, calc(100vw - var(--cajon-panel-w, 400px) - 150px - var(--pc-ancho)));
        width: var(--pc-ancho); min-width: 0; max-width: calc(100vw - var(--cajon-panel-w, 400px) - 150px);
        /* 100 % = alto del dock: el borde superior queda SIEMPRE en y ≥ 108 (bajo la barra de idiomas, que
           acaba en 96), aunque el dock se parta en dos filas (pasa en francés) */
        max-height: calc(100vh - 100% - 138px);
    }
}
html[data-g3-tema][data-kiosco="1"] .floating-expand-panel {
    padding: 0 26px;
    border: 0; border-radius: 24px;
    background: var(--g3-superficie); box-shadow: var(--g3-sombra);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    font-size: 19px; line-height: 1.4;
    isolation: isolate;
    scrollbar-color: var(--g3-borde) transparent;
    transition: none;
}
html[data-g3-tema][data-kiosco="1"] .floating-expand-panel > :where(div:first-of-type:not(.weather-panel-header):not(.float-empty)) { padding-top: 24px; }
html[data-g3-tema][data-kiosco="1"] .floating-expand-panel.active { animation: bz-panel-entra .16s ease-out both; }
html[data-g3-tema][data-kiosco="1"] .floating-expand-panel::after {
    content: ""; display: block; position: sticky; bottom: 0;
    height: 30px; margin: 0 -26px; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--g3-superficie) 90%);
}
/* × de 64 px (la medida la pone styles-v3.css y no se toca): 14 + 64 − 78 = 0 de alto en el flujo */
html[data-g3-tema][data-kiosco="1"] .float-panel-close {
    position: sticky; top: 14px; float: none; display: grid; place-items: center;
    margin: 14px -12px -78px auto; padding: 0;
    border: 0; border-radius: 50%; box-shadow: var(--g3-sombra-compacta);
}
/* cabecera */
html[data-g3-tema][data-kiosco="1"] .weather-panel-header {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 18px;
    min-height: 100px; margin: 0 -26px 20px; padding: 16px 92px 16px 26px;
    border-bottom: 1px solid var(--g3-linea);
}
html[data-g3-tema][data-kiosco="1"] .panel-hero-ico { width: 64px; height: 64px; border-radius: 16px; }
html[data-g3-tema][data-kiosco="1"] .panel-hero-ico .ico { width: 34px; height: 34px; }
html[data-g3-tema][data-kiosco="1"] .weather-panel-header > div { flex: 1 1 auto; min-width: 0; }
html[data-g3-tema][data-kiosco="1"] .weather-panel-header > div:not(.panel-hero-tit) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
html[data-g3-tema][data-kiosco="1"] .panel-hero-etq { flex: 0 0 100%; margin-bottom: 4px; font-size: 15px; line-height: 1.25; }
html[data-g3-tema][data-kiosco="1"] .panel-hero-num { font-size: 38px; line-height: 1.1; }
html[data-g3-tema][data-kiosco="1"] .panel-hero-sub { font-size: 19px; line-height: 1.3; }
html[data-g3-tema][data-kiosco="1"] .panel-hero-tit { font-size: 27px; line-height: 1.2; }
/* fila base */
html[data-g3-tema][data-kiosco="1"] .weather-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 48px; padding: 6px 0; font-size: 19px; line-height: 1.3;
}
html[data-g3-tema][data-kiosco="1"] .weather-row > span:first-child { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
html[data-g3-tema][data-kiosco="1"] .weather-row > :last-child:not(:first-child) { text-align: right; }
html[data-g3-tema][data-kiosco="1"] .weather-row .ico { width: 24px; height: 24px; margin: 0; opacity: 1; flex: none; }
html[data-g3-tema][data-kiosco="1"] .row-val { font-size: 21px; white-space: nowrap; }
html[data-g3-tema][data-kiosco="1"] .row-val small { font-size: .68em; }
/* título de sección */
html[data-g3-tema][data-kiosco="1"] .services-section { margin: 0 0 26px; padding: 0; border: 0; }
html[data-g3-tema][data-kiosco="1"] .services-section:last-child { margin-bottom: 0; }
html[data-g3-tema][data-kiosco="1"] .services-section-title {
    display: flex; align-items: center; gap: 11px; min-height: 34px; margin: 0 0 12px;
    font-size: 15px; line-height: 1.3;
}
html[data-g3-tema][data-kiosco="1"] .services-section-title .ico {
    box-sizing: border-box; width: 34px; height: 34px; margin: 0; padding: 7px;
    border-radius: 10px; opacity: 1; flex: none;
}
/* nota, fuentes, vacío, punto de dominio */
html[data-g3-tema][data-kiosco="1"] .panel-nota { font-size: 16.5px; line-height: 1.4; }
html[data-g3-tema][data-kiosco="1"] .panel-fuente { margin-top: 22px; font-size: 15px; line-height: 1.4; }
html[data-g3-tema][data-kiosco="1"] .float-empty { padding: 8px 0; font-size: 19px; line-height: 1.45; }
html[data-g3-tema][data-kiosco="1"] .float-empty .ico { width: 24px; height: 24px; margin: 0 8px 0 0; opacity: 1; vertical-align: -4px; }
html[data-g3-tema][data-kiosco="1"] .floating-expand-panel > .float-empty { padding: 52px 62px 22px; text-align: center; }
html[data-g3-tema][data-kiosco="1"] .flag-dot { width: 16px; height: 16px; box-shadow: 0 0 0 3px var(--g3-superficie), 0 0 0 4px var(--g3-borde); }

/* P3.2 Condiciones en el tótem */
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-panel-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-panel-rows--mar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-row {
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px;
    min-height: 0; padding: 14px 16px 13px; border-radius: 16px;
}
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-row > span:first-child { display: block; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-row > .row-val { margin-top: auto; font-size: 27px; line-height: 1.15; text-align: left; white-space: normal; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-sun-row {
    justify-content: space-between; gap: 16px; min-height: 64px; margin-top: 8px; padding: 0 20px;
    border-radius: 16px; font-size: 23px;
}
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-sun-row > span { display: inline-flex; align-items: center; gap: 11px; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-sun-row .ico { width: 27px; height: 27px; margin: 0; opacity: 1; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-sun-divider { flex: 1 1 auto; height: 3px; margin: 0; border-radius: 3px; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-air-chip {
    gap: 3px; margin-top: 8px; padding: 14px 16px; border: 0; border-radius: 16px;
    font-size: 19px; line-height: 1.4;
}
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-air-chip .flag-dot { margin: 0 13px 0 3px; vertical-align: -1px; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-air-chip small { font-size: inherit; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-pollen { font-size: 16.5px; line-height: 1.4; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .services-section-title { margin-top: 28px; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tides-block {
    margin-top: 8px; padding: 2px 16px 14px; border: 0; border-radius: 16px;
    font-size: 19px; line-height: 1.3;
}
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tides-now {
    gap: 11px; min-height: 60px; margin: 0 0 6px; padding: 0;
    border-bottom: 1px solid var(--g3-borde); font-size: 19px;
}
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tides-now .ico { width: 25px; height: 25px; flex: none; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tides-now > span:first-of-type { flex: 1 1 auto; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tides-now .row-val { font-size: 27px; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tides-list { display: block; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tide-event { gap: 11px; min-height: 42px; padding: 0; font-size: 19px; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tide-event .tide-icon { display: grid; place-items: center; width: 25px; font-size: inherit; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tide-icon .ico { width: 24px; height: 24px; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tide-event .tide-label { flex: 1 1 auto; min-width: 0; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tide-event .tide-time { font-size: 21px; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tide-event .tide-h { min-width: 72px; margin-left: 0; font-size: 18px; text-align: right; white-space: nowrap; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .tides-disclaimer { margin-top: 8px; font-size: 15px; line-height: 1.4; font-style: normal; text-align: left; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .marine-flags { margin: 0; padding: 0; border: 0; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .marine-flag-row {
    gap: 16px; min-height: 64px; margin-bottom: 8px; padding: 8px 18px 8px 20px;
    border-radius: 16px; font-size: 19px; line-height: 1.25;
}
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .marine-flag-name { white-space: normal; overflow: visible; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .marine-flag-val { font-size: 18px; white-space: nowrap; }
/* el enlace a la cámara no hace nada en el tótem (js/kiosco.js anula los enlaces externos): fuera, como .beach-flag-cam */
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .marine-flags-cam { display: none; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-forecast-strip { display: block; margin: 0; padding: 0; overflow: visible; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-day {
    display: grid; grid-template-columns: minmax(0, 1fr) 34px 68px auto; align-items: center; column-gap: 10px;
    min-width: 0; min-height: 52px; padding: 0 18px; border: 0; border-radius: 16px; text-align: left;
}
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-day-label { font-size: 19px; line-height: 1.2; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-day-icon { display: grid; place-items: center; margin: 0; font-size: inherit; line-height: 0; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-day-icon .ico { width: 31px; height: 31px; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-day-rain { min-height: 0; margin: 0; font-size: 17px; line-height: 1.2; text-align: right; white-space: nowrap; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-day-rain .ico { width: 18px; height: 18px; margin: 0 2px 0 0; opacity: 1; vertical-align: -3px; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-day-temp { order: 2; justify-content: flex-end; gap: 0; font-size: 21px; line-height: 1.2; }
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-day-tmax,
html[data-g3-tema][data-kiosco="1"] #conditionsFloatPanel .weather-day-tmin { min-width: 46px; text-align: right; }


/* ═══ PIEZA: agenda-evento ═══ */
/* =====================================================================
   PARCIAL «agenda-evento» — se añade AL FINAL de kit/ui-golf360/puente-bareyo.css,
   DESPUÉS de «panel-comun» (usa su cabecera, su título de sección y su cáscara).
   Necesita los parches de agenda-evento.parches.json (cabecera con clases comunes,
   etiqueta de ciclo sin color en línea, fecha sin icono, × del modal en SVG).

   Cubre:
     A · el CONTENIDO del panel #eventsFloatPanel: cabecera (título + nota), títulos de sección,
         tarjetas de acto / exposición / noticia, destacado «Güemes», pie y estado vacío.
     B · el MODAL #eventModal: velo, hoja de 22 px, × que no se pierde al desplazar, imagen,
         jerarquía fecha → etiqueta → titular → texto, cuerpo del artículo, botones.
     C · el modal en MÓVIL (≤ 700 px): hoja inferior a todo el ancho.
     D · el TÓTEM: texto ×1,4-1,5 (título 32, texto 20, cierre 64), pie del panel oculto y
         enlaces del cuerpo inertes.

   LEY de prefijos (CONTRATO §3):
     · html[data-g3-tema]:not([data-kiosco="1"]) …  → medida, disposición y forma en la WEB
     · html[data-g3-tema][data-kiosco="1"] …         → lo mismo, a propósito, en el TÓTEM (en px)
     · html[data-g3-tema] …                          → SOLO color, fondo de pieza interna, familia,
                                                        peso, interletra, mayúsculas, cifras tabulares, trazo
   Sin !important, sin z-index (el × pegajoso del modal se pinta por encima del texto por ser un elemento
   posicionado entre contenido que no lo está), sin transform / filter / backdrop-filter.
   Todo lo del panel lleva #eventsFloatPanel delante: no toca los otros cuatro paneles.
   Todo lo del modal es nuevo (ningún otro rediseño usa .event-modal*).
   NO se declara display en .event-modal-img (se oculta con el atributo hidden) ni en #eventModalCat /
   #eventModalLink (el JS les pone style.display = '' | 'none').
   ===================================================================== */

/* ══ A · PANEL DE AGENDA — web ══════════════════════════════════════════════════════════════ */

/* A.1 Cabecera: ya es la común (.weather-panel-header). Aquí solo se fija que título y nota vayan
   SIEMPRE en dos líneas (la común los pone en la misma línea y la nota baja sola si no cabe: con
   «Agenda · Ayuntamiento de Bareyo» unas veces cabía y otras no, según el idioma). */
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .events-head > div { display: block; }
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .events-head .panel-hero-sub { margin-top: 3px; }

/* A.2 Títulos de sección («Próximas actuaciones», «Exposiciones»): la clase común da el aspecto;
   aquí solo el aire, porque en este panel son hermanos sueltos (no hay .services-section). */
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .events-acts-head { margin: 22px 0 10px; }
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .events-head + .events-acts-head { margin-top: 0; }

/* A.2b Cuando el navegador desplaza un elemento enfocado (Tab, Mays+Tab, lector de pantalla) a la vista, la
   cabecera pegajosa lo tapaba: se reserva su alto arriba y el fundido del pie abajo. */
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel { scroll-padding: 84px 0 28px; }

/* A.3 Listas: UN solo scroll (el del panel). Antes cada lista tenía su max-height y su overflow,
   dentro del scroll del panel: doble desplazamiento y el destacado cortado contra el borde. */
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .events-list { gap: 8px; max-height: none; overflow: visible; }
/* las exposiciones son hijas directas del panel (sin lista contenedora) */
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel > .event-item + .event-item { margin-top: 8px; }

/* A.4 Tarjeta (acto, exposición o noticia): tinte, sin borde, a la izquierda (era un <button> con el
   texto centrado), sin elevación al pasar el ratón. El hover solo existe donde hay ratón. */
html[data-g3-tema] #eventsFloatPanel .event-item { background: var(--g3-tinte); color: var(--g3-texto); font-family: var(--g3-fuente-texto); }
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .event-item {
    width: 100%; gap: 12px; align-items: flex-start; text-align: left;
    padding: 10px 12px 11px 10px; border: 0; border-radius: var(--g3-radio-boton);
    box-shadow: none; transform: none; transition: none; cursor: pointer;
}
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .event-item--act { padding-left: 14px; }
@media (hover: hover) {
    html[data-g3-tema] #eventsFloatPanel .event-item:hover { background: var(--g3-tinte-hover); }
}
html[data-g3-tema] #eventsFloatPanel .event-item:active { background: var(--g3-tinte-activo); }

/* A.5 Miniatura: 56 px (el proxy la sirve a 110: más grande saldría borrosa). La tarjeta queda bien
   sin ella (la imagen se autodestruye con onerror). */
html[data-g3-tema] #eventsFloatPanel .event-thumb { background-color: var(--g3-tinte-activo); }
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .event-thumb {
    flex: 0 0 56px; width: 56px; height: 56px; align-self: flex-start;
    border-radius: 10px; object-fit: cover;
}
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .event-body { text-align: left; }

/* A.6 Jerarquía etiqueta → titular → nota */
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .event-meta { align-items: center; gap: 4px 8px; margin-bottom: 5px; }
/* la fecha es una etiqueta en versalitas */
html[data-g3-tema] #eventsFloatPanel .event-date {
    color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .event-date { font-size: 11px; line-height: 1.25; }
/* la categoría / ciclo: píldora de tinte, un solo color (ya no uno por ciclo) */
html[data-g3-tema] .event-cat {
    background: var(--g3-tinte); color: var(--g3-marca); border-color: transparent;
    font-family: var(--g3-fuente-texto); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
html[data-g3-tema]:not([data-kiosco="1"]) .event-cat { padding: 3px 9px; border: 0; border-radius: var(--g3-radio-pildora); font-size: 10.5px; line-height: 1.2; }
/* sobre la tarjeta de tinte la píldora sube un paso */
html[data-g3-tema] #eventsFloatPanel .event-cat { background: var(--g3-tinte-activo); color: var(--g3-marca-oscura); }
/* el titular, en la tipografía del lema */
html[data-g3-tema] #eventsFloatPanel .event-title { color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 600; }
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .event-title { margin-bottom: 3px; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
html[data-g3-tema] #eventsFloatPanel .event-summary { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 400; }
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .event-summary { font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
html[data-g3-tema] #eventsFloatPanel .event-summary .ico { color: var(--g3-marca-2); stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .event-summary .ico { width: 14px; height: 14px; margin: 0 3px 0 0; opacity: 1; vertical-align: -2px; }
/* (varias líneas de nota en una exposición: sin pegarse) */
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .event-summary + .event-summary { margin-top: 2px; }

/* A.7 Destacado «Güemes · Pueblo del Año»: fuera el filete naranja; fila de tinte más marcada con el
   trofeo en un círculo blanco. El --static (sin noticia a la que enlazar) no se mueve ni cambia. */
html[data-g3-tema] #eventsFloatPanel .events-featured { background: var(--g3-tinte-activo); color: var(--g3-texto); font-family: var(--g3-fuente-texto); font-weight: 600; }
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .events-featured {
    align-items: center; gap: 12px; min-height: 56px; margin: 18px 0 16px; padding: 9px 14px 9px 10px;
    border: 0; border-radius: var(--g3-radio-boton); box-shadow: none; transform: none; transition: none;
    font-size: 13.5px; line-height: 1.35; text-align: left;
}
html[data-g3-tema] #eventsFloatPanel .events-featured:hover { background: var(--g3-tinte-activo); }
html[data-g3-tema] #eventsFloatPanel .events-featured:active { background: var(--g3-borde); }
html[data-g3-tema] #eventsFloatPanel .events-featured .ico { background: var(--g3-superficie); color: var(--g3-marca); stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .events-featured .ico {
    box-sizing: border-box; width: 36px; height: 36px; margin: 0; padding: 8px;
    border-radius: 50%; opacity: 1; flex: none; vertical-align: baseline;
}
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .events-featured--static { cursor: default; }

/* A.8 Pie: enlace a la web del ayuntamiento como botón secundario ancho (era una línea de 23 px) */
html[data-g3-tema] #eventsFloatPanel .events-source { background: var(--g3-tinte); color: var(--g3-marca); font-family: var(--g3-fuente-texto); font-weight: 700; }
html[data-g3-tema] #eventsFloatPanel .events-source:hover { background: var(--g3-tinte-hover); color: var(--g3-marca); }
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .events-source {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; margin-top: 16px; padding: 0 16px;
    border-radius: var(--g3-radio-boton); font-size: 13.5px; line-height: 1.2; text-align: center; text-decoration: none;
}
html[data-g3-tema] #eventsFloatPanel .events-source .ico { stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .events-source .ico { width: 18px; height: 18px; margin: 0; opacity: 1; flex: none; }

/* A.9 Vacío */
html[data-g3-tema] #eventsFloatPanel .events-empty { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 500; }
html[data-g3-tema]:not([data-kiosco="1"]) #eventsFloatPanel .events-empty { padding: 18px 8px 14px; font-size: 14px; line-height: 1.45; text-align: center; }

/* ══ B · MODAL DE EVENTO — web ══════════════════════════════════════════════════════════════ */

/* B.1 Velo teñido de verde (antes negro al 55 %) y hoja de 22 px con sombra teñida. Sigue siendo el
   ÚNICO contenedor con scroll; el clic en el hueco del velo sigue cerrando (el velo no cambia). */
html[data-g3-tema] .event-overlay { background: var(--g3-velo); }
html[data-g3-tema] .event-modal { background: var(--g3-superficie); color: var(--g3-texto); font-family: var(--g3-fuente-texto); }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal {
    width: min(560px, 100%); max-width: none;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    border-radius: var(--g3-radio-hoja); box-shadow: var(--g3-sombra-hoja-centrada);
    overscroll-behavior: contain; scrollbar-color: var(--g3-borde) transparent;
}

/* B.2 Cierre: redondo, blanco, aspa de marca, 44 px, como el del visor 360 y el de la ficha. Va
   PEGAJOSO arriba a la derecha (antes absoluto: se iba con el scroll y no se podía cerrar) y no
   ocupa sitio (10 + 44 − 54 = 0). Sigue enfocable (sticky NO anula offsetParent, a diferencia de fixed).
   Su ::after de zona de toque (styles-v3.css:669) y su touch-action:none no se tocan. */
html[data-g3-tema] .event-modal-close { background: var(--g3-superficie); color: var(--g3-marca); }
@media (hover: hover) {
    html[data-g3-tema] .event-modal-close:hover { background: var(--g3-tinte-hover); }
}
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-close {
    position: sticky; top: 10px; right: auto;
    display: grid; place-items: center; width: 44px; height: 44px; margin: 10px 10px -54px auto; padding: 0;
    border: 0; border-radius: 50%; box-shadow: var(--g3-sombra-compacta); cursor: pointer;
}
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-close svg { width: 20px; height: 20px; stroke-width: 2.4; }

/* B.2b Barra del cierre. El × pegajoso flota sobre el texto: al desplazar, las líneas pasaban POR DEBAJO del botón
   y se cortaban en seco («importa|nt»). Con el texto ya desplazado (app.js pone .is-scrolled en la hoja cuando
   el cuerpo llega bajo el botón) aparece una barra blanca de la altura del cierre, con su filete, entre el texto y
   el botón; sobre la foto no existe. No ocupa sitio (alto − margen = 0). Capas LOCALES (1 barra, 2 botón) dentro
   de la hoja aislada: no salen de ella. */
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal,
html[data-g3-tema][data-kiosco="1"] .event-modal { isolation: isolate; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-close,
html[data-g3-tema][data-kiosco="1"] .event-modal-close { z-index: 2; }
html[data-g3-tema] .event-modal::before { background: var(--g3-superficie); box-shadow: 0 1px 0 var(--g3-linea); }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal::before,
html[data-g3-tema][data-kiosco="1"] .event-modal::before {
    content: ""; display: block; position: sticky; top: 0; z-index: 1;
    height: 64px; margin: 0 0 -64px; opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
html[data-g3-tema][data-kiosco="1"] .event-modal::before { height: 96px; margin-bottom: -96px; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal.is-scrolled::before,
html[data-g3-tema][data-kiosco="1"] .event-modal.is-scrolled::before { opacity: 1; }

/* B.3 Imagen de cabecera: la foto llega a 900×420 (15:7); antes se forzaba a 220 px y se recortaba a
   3,1:1. Sin display (se oculta con hidden): la salvaguarda lo garantiza aunque otra regla lo toque. */
html[data-g3-tema] .event-modal-img { background-color: var(--g3-tinte); }
html[data-g3-tema] .event-modal-img[hidden] { display: none; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-img { height: auto; aspect-ratio: 15 / 7; max-height: 38vh; border-radius: 0; object-fit: cover; }

/* B.4 Cuerpo y jerarquía: fecha · etiqueta → titular → texto */
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-body { padding: 24px 28px 28px; }
/* sin foto (los actos) el × cae sobre el texto: la fecha y el titular le dejan su hueco */
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-img[hidden] + .event-modal-body .event-modal-meta,
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-img[hidden] + .event-modal-body .event-modal-title { padding-right: 52px; }
html[data-g3-tema] .event-modal-meta {
    color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-meta { flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; font-size: 12px; line-height: 1.2; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-meta .event-cat { font-size: 11px; }
html[data-g3-tema] .event-modal-title { color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-title { margin: 0 0 18px; font-size: 26px; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }

/* B.5 Cuerpo del artículo (HTML del ayuntamiento): se repone lo que el preflight de Tailwind aplana
   (viñetas, subtítulos, enlaces) y se limita la medida de lectura. Las imágenes del cuerpo no llevan
   altura, proporción ni fondo: las que no cargan (hotlink bloqueado) deben seguir colapsando. */
html[data-g3-tema] .event-modal-content { color: var(--g3-texto); font-family: var(--g3-fuente-texto); font-weight: 400; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content { font-size: 16px; line-height: 1.6; overflow-wrap: break-word; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content p { margin: 0 0 14px; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content > :last-child { margin-bottom: 0; }
html[data-g3-tema] .event-modal-content strong, html[data-g3-tema] .event-modal-content b { font-weight: 700; }
html[data-g3-tema] .event-modal-content h2, html[data-g3-tema] .event-modal-content h3, html[data-g3-tema] .event-modal-content h4 {
    color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700;
}
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content h2,
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content h3,
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content h4 { margin: 22px 0 8px; font-size: 18px; line-height: 1.25; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content ol { margin: 0 0 14px; padding-left: 24px; list-style: decimal; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content li { margin: 4px 0; }
html[data-g3-tema] .event-modal-content li::marker { color: var(--g3-marca-2); }
/* las galerías de WordPress llegan como <ul><li><figure><img>: si la imagen no carga (hotlink bloqueado)
   quedaba una viñeta suelta; una lista que solo contiene imágenes no lleva viñetas */
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content ul:has(> li > figure) { padding-left: 0; list-style: none; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content li:has(> figure:only-child) { margin: 0; list-style: none; }
html[data-g3-tema] .event-modal-content a { color: var(--g3-marca); }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content img { border-radius: var(--g3-radio-fila); }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content figure { margin: 0; }
html[data-g3-tema] .event-modal-content figcaption { color: var(--g3-texto-suave); }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content figcaption { font-size: 13px; line-height: 1.4; }
/* los iconos del cuerpo (lugar del acto) en el verde de marca */
html[data-g3-tema] .event-modal-content .ico { color: var(--g3-marca-2); stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content p > .ico:first-child { width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -3px; }
/* nota final de los actos («Culturalia 2026 · …»): solo la del modal */
html[data-g3-tema] .event-modal-content .detail-sched-note { color: var(--g3-texto-suave); }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-content .detail-sched-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.45; }

/* B.6 Botones del modal. Noticia: «Ver original» = botón SECUNDARIO ancho (tinte). Acto: «Ver en el
   mapa» = el PRIMARIO (marca, blanco, canto). Sin display con !important: el JS oculta el enlace en los
   actos con style.display = 'none' y el tótem lo oculta con su propio !important (styles-v3.css:1756). */
html[data-g3-tema] .event-modal-original { background: var(--g3-tinte); color: var(--g3-marca); font-family: var(--g3-fuente-texto); font-weight: 700; }
html[data-g3-tema] .event-modal-original:hover { background: var(--g3-tinte-hover); color: var(--g3-marca); }
html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-original {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; margin-top: 22px; padding: 6px 18px;
    border-radius: var(--g3-radio-boton); font-size: 14.5px; line-height: 1.25; text-align: center; text-decoration: none;
}
/* el icono de «enlace externo» va por CSS: el elemento es [data-i18n] y perdería cualquier hijo */
@supports ((-webkit-mask-image: url("x")) or (mask-image: url("x"))) {
    html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-original::after {
        content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%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' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}
html[data-g3-tema] .act-map-btn { background: var(--g3-marca); color: #fff; font-family: var(--g3-fuente-texto); font-weight: 700; }
html[data-g3-tema] .act-map-btn:hover { background: var(--g3-marca-oscura); color: #fff; }
html[data-g3-tema] .act-map-btn .ico { color: inherit; }
html[data-g3-tema]:not([data-kiosco="1"]) .act-map-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 52px; margin: 0; padding: 0 18px;
    border: 0; border-radius: var(--g3-radio-boton); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
    font-size: 16px; line-height: 1.2; cursor: pointer;
}
html[data-g3-tema]:not([data-kiosco="1"]) .act-map-btn .ico { width: 20px; height: 20px; margin: 0; opacity: 1; vertical-align: baseline; }

/* ══ C · MODAL EN MÓVIL (≤ 700 px): hoja inferior a todo el ancho ═══════════════════════════
   (la frontera que ya usa el puente para el visor 360). Entre 701 y 1023 px sigue centrado.
   Tocar la franja de velo de arriba sigue cerrando. Lo que esta @media fija se repite aquí dentro. */
@media (max-width: 700px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .event-overlay { align-items: flex-end; padding: 0; }
    html[data-g3-tema]:not([data-kiosco="1"]) .event-modal {
        width: 100%; max-width: none;
        max-height: 88vh; max-height: 88dvh;
        border-radius: var(--g3-radio-hoja) var(--g3-radio-hoja) 0 0; box-shadow: var(--g3-sombra-hoja);
    }
    html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-body { padding: 22px 20px calc(26px + env(safe-area-inset-bottom, 0px)); }
    html[data-g3-tema]:not([data-kiosco="1"]) .event-modal-title { font-size: 22px; margin-bottom: 14px; }
}

/* ══ D · TÓTEM (1920×1080 táctil, 75") ═══════════════════════════════════════════════════════
   El modal sigue centrado (la ficha es un panel lateral; para éste se deja la variante lateral como
   decisión pendiente en el informe). Texto ×1,4-1,5; sin enlaces externos (js/kiosco.js los anula). */

/* D.1 Panel: ancho útil 488 px */
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel { scroll-padding: 120px 0 40px; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .events-source { display: none; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .events-head > div { display: block; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .events-head .panel-hero-sub { margin-top: 4px; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .events-acts-head { margin: 30px 0 14px; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .events-head + .events-acts-head { margin-top: 0; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .events-list { gap: 12px; max-height: none; overflow: visible; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel > .event-item + .event-item { margin-top: 12px; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .event-item {
    width: 100%; gap: 18px; align-items: flex-start; text-align: left; min-height: 88px;
    padding: 14px 16px 15px 14px; border: 0; border-radius: 16px;
    box-shadow: none; transform: none; transition: none;
}
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .event-item--act { padding-left: 20px; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .event-thumb {
    flex: 0 0 80px; width: 80px; height: 80px; align-self: flex-start; border-radius: 12px; object-fit: cover;
}
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .event-body { text-align: left; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .event-meta { align-items: center; gap: 6px 12px; margin-bottom: 7px; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .event-date { font-size: 15px; line-height: 1.25; }
html[data-g3-tema][data-kiosco="1"] .event-cat { padding: 4px 12px; border: 0; border-radius: 99px; font-size: 14px; line-height: 1.2; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .event-title { margin-bottom: 4px; font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .event-summary { font-size: 16.5px; line-height: 1.4; overflow-wrap: anywhere; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .event-summary .ico { width: 19px; height: 19px; margin: 0 4px 0 0; opacity: 1; vertical-align: -3px; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .event-summary + .event-summary { margin-top: 3px; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .events-featured {
    align-items: center; gap: 16px; min-height: 76px; margin: 26px 0 22px; padding: 12px 18px 12px 14px;
    border: 0; border-radius: 16px; box-shadow: none; transform: none; transition: none;
    font-size: 18px; line-height: 1.35; text-align: left;
}
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .events-featured .ico {
    box-sizing: border-box; width: 48px; height: 48px; margin: 0; padding: 11px;
    border-radius: 50%; opacity: 1; flex: none; vertical-align: baseline;
}
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .events-featured--static { cursor: default; }
html[data-g3-tema][data-kiosco="1"] #eventsFloatPanel .events-empty { padding: 26px 12px 20px; font-size: 19px; line-height: 1.45; text-align: center; }

/* D.2 Modal: centrado, más ancho y con texto de lectura a distancia */
html[data-g3-tema][data-kiosco="1"] .event-overlay { padding: 32px; }
html[data-g3-tema][data-kiosco="1"] .event-modal {
    width: min(820px, 64vw); max-width: none; max-height: calc(100vh - 64px);
    border-radius: var(--g3-radio-hoja); box-shadow: var(--g3-sombra-hoja-centrada);
    overscroll-behavior: contain; scrollbar-color: var(--g3-borde) transparent;
}
/* cierre visible de 64 px (antes 34); su zona de toque ampliada (inset −22) la pone styles-v3.css:676 */
html[data-g3-tema][data-kiosco="1"] .event-modal-close {
    position: sticky; top: 16px; right: auto;
    display: grid; place-items: center; width: 64px; height: 64px; margin: 16px 16px -80px auto; padding: 0;
    border: 0; border-radius: 50%; box-shadow: var(--g3-sombra-compacta);
}
html[data-g3-tema][data-kiosco="1"] .event-modal-close svg { width: 28px; height: 28px; stroke-width: 2.4; }
html[data-g3-tema][data-kiosco="1"] .event-modal-img { height: auto; aspect-ratio: 15 / 7; max-height: 34vh; border-radius: 0; object-fit: cover; }
html[data-g3-tema][data-kiosco="1"] .event-modal-body { padding: 34px 44px 44px; }
html[data-g3-tema][data-kiosco="1"] .event-modal-img[hidden] + .event-modal-body .event-modal-meta,
html[data-g3-tema][data-kiosco="1"] .event-modal-img[hidden] + .event-modal-body .event-modal-title { padding-right: 90px; }
html[data-g3-tema][data-kiosco="1"] .event-modal-meta { flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; font-size: 16px; line-height: 1.2; }
html[data-g3-tema][data-kiosco="1"] .event-modal-meta .event-cat { font-size: 15px; }
html[data-g3-tema][data-kiosco="1"] .event-modal-title { margin: 0 0 24px; font-size: 32px; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content { font-size: 20px; line-height: 1.55; overflow-wrap: break-word; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content p { margin: 0 0 18px; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content > :last-child { margin-bottom: 0; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content h2,
html[data-g3-tema][data-kiosco="1"] .event-modal-content h3,
html[data-g3-tema][data-kiosco="1"] .event-modal-content h4 { margin: 28px 0 10px; font-size: 25px; line-height: 1.25; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content ul { margin: 0 0 18px; padding-left: 28px; list-style: disc; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content ol { margin: 0 0 18px; padding-left: 30px; list-style: decimal; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content li { margin: 6px 0; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content ul:has(> li > figure) { padding-left: 0; list-style: none; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content li:has(> figure:only-child) { margin: 0; list-style: none; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content img { border-radius: 16px; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content figure { margin: 0; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content figcaption { font-size: 16px; line-height: 1.4; }
/* enlaces del cuerpo: no llevan a ningún sitio (js/kiosco.js anula los externos) → texto normal, inertes */
html[data-g3-tema][data-kiosco="1"] .event-modal-content a { color: inherit; text-decoration: none; pointer-events: none; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content p > .ico:first-child { width: 24px; height: 24px; margin: 0 8px 0 0; vertical-align: -4px; }
html[data-g3-tema][data-kiosco="1"] .event-modal-content .detail-sched-note { margin: 22px 0 0; font-size: 16px; line-height: 1.45; }
html[data-g3-tema][data-kiosco="1"] .act-map-btn {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; min-height: 72px; margin: 0; padding: 0 24px;
    border: 0; border-radius: 16px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18);
    font-size: 20px; line-height: 1.2;
}
html[data-g3-tema][data-kiosco="1"] .act-map-btn .ico { width: 28px; height: 28px; margin: 0; opacity: 1; vertical-align: baseline; }


/* ═══ PIEZA: paneles-tsc ═══ */
/* =====================================================================
   PARCIAL «paneles-tsc» — se añade AL FINAL de kit/ui-golf360/puente-bareyo.css, DETRÁS de panel-comun.css
   (necesita panel-comun.parches.json + paneles-tsc.parches.json: las clases nuevas salen de ellos).
   FICHERO GENERADO por rediseno/paneles-tsc/gen_css.py: cada regla de web y de tótem sale de una sola
   fuente, así el tótem es exactamente la web ×1,4 salvo lo que se dice a propósito (controles de 64 px).

   Cubre el CONTENIDO de tres paneles del dock, siempre con el #id del panel delante:
     T · #transportFloatPanel  Transporte: sentido (segmentado en píldora), parada (campo del kit), próximas
                               salidas (la siguiente es la cifra), tabla Santoña–Santander (hora = cifra)
     S · #serviciosFloatPanel  Servicios: luz (cifra + estado), gasolinera, festivo, carga, teléfonos (filas de 48 px)
     I · #icvFloatPanel        Bareyo en cifras: nota, insignia «dato piloto», barras sobre tinte, autosuficiencia
   NO toca la cáscara ni la cabecera (panel-comun): .floating-expand-panel, .float-panel-close, .weather-panel-header,
   .panel-hero-*, .weather-row / .services-section-title / .row-val / .panel-nota / .panel-fuente SIN #id.

   LEY de prefijos (CONTRATO §3): web = html[data-g3-tema]:not([data-kiosco="1"]) · tótem = html[data-g3-tema][data-kiosco="1"]
   · «ambos» = html[data-g3-tema] SOLO para color, fondo de pieza interna, familia, peso, interletra, mayúsculas, cifras
   tabulares y trazo. Sin !important, sin outline:none, sin z-index, sin tocar el dock.

   Clases nuevas que pone el parche (las usa este CSS): luz-ahora luz-hora luz-nivel[data-nivel] gas-fila fest-fila
   ev-fila svc-luz svc-gas svc-fest svc-ev svc-tel phone-row icv-area-val icv-auto.
   ===================================================================== */

/* ══ N · Nota bajo un bloque (.phone-extra): la clase la usan Transporte y Servicios; aquí con el #id de cada uno ══ */
html[data-g3-tema] #transportFloatPanel .phone-extra,
html[data-g3-tema] #serviciosFloatPanel .phone-extra {
    color: var(--g3-texto-suave);
    font-family: var(--g3-fuente-texto);
    font-weight: 400;
}
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .phone-extra,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .phone-extra {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
}
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .phone-extra,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .phone-extra {
    margin: 17px 0 0;
    font-size: 17.5px;
    line-height: 1.45;
}
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .phone-extra + .phone-extra { margin-top: 6px; }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .phone-extra + .phone-extra { margin-top: 8.5px; }
/* ══ T · TRANSPORTE ═══════════════════════════════════════════════════════════════════════════════ */
/* T.1 Sentido: segmentado en píldora del kit (dos píldoras que se reparten el ancho; activa = relleno de marca).
   El estado lo marca la clase .is-on (y aria-pressed): el CSS lee las dos. */
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-dirs { display: flex; gap: 8px; margin: 4px 0 14px; }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-dirs { display: flex; gap: 11px; margin: 5.5px 0 19.5px; }
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-dir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 99px;
    font-size: 14px;
    line-height: 1.2;
    opacity: 1;
    cursor: pointer;
}
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-dir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8.5px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 64px;
    padding: 0 14px;
    border: 0;
    border-radius: 99px;
    font-size: 19.5px;
    line-height: 1.2;
    opacity: 1;
    cursor: pointer;
}
html[data-g3-tema] #transportFloatPanel .trans-dir-btn { background: var(--g3-tinte); color: var(--g3-marca); font-family: var(--g3-fuente-texto); font-weight: 600; }
html[data-g3-tema] #transportFloatPanel .trans-dir-btn:hover { background: var(--g3-tinte-hover); }
html[data-g3-tema] #transportFloatPanel .trans-dir-btn.is-on,
html[data-g3-tema] #transportFloatPanel .trans-dir-btn.is-on:hover,
html[data-g3-tema] #transportFloatPanel .trans-dir-btn[aria-pressed="true"] {
    background: var(--g3-marca);
    color: #fff;
    font-weight: 700;
}
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-dir-btn svg { width: 17px; height: 17px; flex: none; margin: 0; }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-dir-btn svg { width: 24px; height: 24px; flex: none; margin: 0; }
html[data-g3-tema] #transportFloatPanel .trans-dir-btn svg { stroke-width: 2.4; }
/* T.2 Parada: leyenda de marca (700, sin versalitas, como en el kit) + campo del kit (48 px, anillo interior, chevron propio) */
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-stop-label { display: block; margin: 16px 0 0; font-size: 13px; line-height: 1.2; }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-stop-label { display: block; margin: 22.5px 0 0; font-size: 18px; line-height: 1.2; }
html[data-g3-tema] #transportFloatPanel .trans-stop-label {
    color: var(--g3-marca);
    font-family: var(--g3-fuente-texto);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-stop-select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 6px 0 0;
    padding: 0 44px 0 14px;
    border: 0;
    border-radius: 12px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23416930' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    box-shadow: inset 0 0 0 1.5px var(--g3-pista-off);
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    text-overflow: ellipsis;
}
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-stop-select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 64px;
    margin: 8.5px 0 0;
    padding: 0 61.5px 0 19.5px;
    border: 0;
    border-radius: 16px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23416930' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 19.5px center;
    background-size: 25px;
    box-shadow: inset 0 0 0 1.5px var(--g3-pista-off);
    font-size: 22px;
    line-height: 1.2;
    cursor: pointer;
    text-overflow: ellipsis;
}
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-stop-select { box-shadow: inset 0 0 0 2px var(--g3-pista-off); }
html[data-g3-tema] #transportFloatPanel .trans-stop-select {
    background-color: var(--g3-campo);
    color: var(--g3-texto);
    font-family: var(--g3-fuente-texto);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
/* T.3 Próximas salidas: etiqueta en versalitas → cifras. La SIGUIENTE ocupa dos celdas en relleno de marca; las pasadas
   van tachadas en gris de marca (sin opacidad: 6,4:1); las que quedan, en tinte. Se conservan las siete horas. */
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-next-title { margin: 18px 0 8px; font-size: 11px; line-height: 1.25; }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-next-title { margin: 25px 0 11px; font-size: 15.5px; line-height: 1.25; }
html[data-g3-tema] #transportFloatPanel .trans-next-title {
    color: var(--g3-texto-suave);
    font-family: var(--g3-fuente-texto);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-time {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 99px;
    font-size: 17px;
    line-height: 1;
    opacity: 1;
    text-decoration: none;
    box-shadow: none;
}
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-time {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 64px;
    padding: 0 8.5px;
    border: 0;
    border-radius: 99px;
    font-size: 24px;
    line-height: 1;
    opacity: 1;
    text-decoration: none;
    box-shadow: none;
}
html[data-g3-tema] #transportFloatPanel .trans-time {
    background: var(--g3-tinte);
    color: var(--g3-texto);
    font-family: var(--g3-fuente-titulo);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-time.is-past { text-decoration: line-through; box-shadow: inset 0 0 0 1.5px var(--g3-linea); }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-time.is-past { text-decoration: line-through; box-shadow: inset 0 0 0 1.5px var(--g3-linea); }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-time.is-past { box-shadow: inset 0 0 0 2px var(--g3-linea); }
html[data-g3-tema] #transportFloatPanel .trans-time.is-past { background: var(--g3-superficie); color: var(--g3-texto-suave); font-weight: 500; }
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-time.is-next { grid-column: span 2; font-size: 25px; box-shadow: none; }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-time.is-next { grid-column: span 2; font-size: 35px; box-shadow: none; }
html[data-g3-tema] #transportFloatPanel .trans-time.is-next { background: var(--g3-marca); color: #fff; font-weight: 700; }
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-nomore {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.35;
}
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-nomore {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 61.5px;
    padding: 11px 19.5px;
    border-radius: 16px;
    font-size: 19px;
    line-height: 1.35;
}
html[data-g3-tema] #transportFloatPanel .trans-nomore {
    background: var(--g3-tinte);
    color: var(--g3-texto-suave);
    font-family: var(--g3-fuente-texto);
    font-weight: 600;
}
/* T.4 Santoña – Santander: dos tarjetas planas de tinte; en cada fila la HORA es la cifra y la clave de días su nota.
   Hasta 700 px (frontera del marco) las dos columnas pasan a una: en 260 px de contenido «Sábados laborables» partía en tres líneas. */
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-pal-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-pal-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 0; }
@media (max-width: 700px) {
    html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-pal-cols { grid-template-columns: minmax(0, 1fr); }
}
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-pal-cols > div { min-width: 0; padding: 12px 12px 6px; border-radius: 12px; }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-pal-cols > div { min-width: 0; padding: 17px 17px 8.5px; border-radius: 16px; }
html[data-g3-tema] #transportFloatPanel .trans-pal-cols > div { background: var(--g3-tinte); }
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-pal-head { margin: 0 0 4px; font-size: 11px; line-height: 1.25; }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-pal-head { margin: 0 0 5.5px; font-size: 15.5px; line-height: 1.25; }
html[data-g3-tema] #transportFloatPanel .trans-pal-head {
    color: var(--g3-marca);
    font-family: var(--g3-fuente-texto);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-pal-cols .weather-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: baseline;
    justify-content: stretch;
    column-gap: 8px;
    min-height: 0;
    padding: 7px 0;
    font-size: 15px;
    line-height: 1.2;
}
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-pal-cols .weather-row {
    display: grid;
    grid-template-columns: 64.5px minmax(0, 1fr);
    align-items: baseline;
    justify-content: stretch;
    column-gap: 11px;
    min-height: 0;
    padding: 10px 0;
    font-size: 21px;
    line-height: 1.2;
}
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-pal-cols .weather-row + .weather-row { border-top: 1px solid var(--g3-borde); }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-pal-cols .weather-row + .weather-row { border-top: 1px solid var(--g3-borde); }
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-pal-cols .weather-row > span:first-child { display: block; text-align: left; }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-pal-cols .weather-row > span:first-child { display: block; text-align: left; }
html[data-g3-tema] #transportFloatPanel .trans-pal-cols .weather-row > span:first-child {
    color: var(--g3-texto);
    font-family: var(--g3-fuente-titulo);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-days { font-size: 12px; line-height: 1.3; text-align: left; }
html[data-g3-tema][data-kiosco="1"] #transportFloatPanel .trans-days { font-size: 17px; line-height: 1.3; text-align: left; }
html[data-g3-tema] #transportFloatPanel .trans-days { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 500; }
/* T.5 Teléfonos de menos de 390 px (panel de 222-262 px): el sentido pierde la flecha; los títulos largos (alemán)
   parten en vez de meterse bajo la × */
@media (max-width: 389.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-dir-btn { padding: 0 6px; font-size: 13px; }
}
@media (max-width: 389.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .trans-dir-btn svg { display: none; }
}
@media (max-width: 389.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) #transportFloatPanel .panel-hero-tit,
    html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .panel-hero-tit {
        overflow-wrap: anywhere;
        hyphens: auto;
    }
}
/* ══ S · SERVICIOS ════════════════════════════════════════════════════════════════════════════════ */
/* S.0 Tarjetas de dato (luz, gasolinera, festivo, carga, autosuficiencia): tinte, radio 12; sin sombra ni filete */
html[data-g3-tema] #serviciosFloatPanel .luz-ahora,
html[data-g3-tema] #serviciosFloatPanel .luz-hora,
html[data-g3-tema] #serviciosFloatPanel .gas-fila,
html[data-g3-tema] #serviciosFloatPanel .fest-fila,
html[data-g3-tema] #serviciosFloatPanel .ev-fila {
    background: var(--g3-tinte);
}
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-ahora,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-hora,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .gas-fila,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .fest-fila,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .ev-fila {
    box-sizing: border-box;
    min-height: 0;
    border-radius: 12px;
}
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .luz-ahora,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .luz-hora,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .gas-fila,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .fest-fila,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .ev-fila {
    box-sizing: border-box;
    min-height: 0;
    border-radius: 16px;
}
/* S.1 Estado vacío dentro de una sección (sin datos): fila de tinte con su icono */
html[data-g3-tema] #serviciosFloatPanel .float-empty {
    background: var(--g3-tinte);
    color: var(--g3-texto-suave);
    font-family: var(--g3-fuente-texto);
    font-weight: 500;
}
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .float-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.4;
}
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .float-empty {
    display: flex;
    align-items: center;
    gap: 11px;
    box-sizing: border-box;
    min-height: 61.5px;
    padding: 14px 19.5px;
    border-radius: 16px;
    font-size: 19px;
    line-height: 1.4;
}
/* S.2 Precio de la luz: «Ahora» = cifra de 30 px + su estado (punto de color de dominio + texto en tinta);
   la hora más barata y la más cara = dos celdas iguales (etiqueta → hora → precio). */
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .svc-luz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .svc-luz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .svc-luz > * { grid-column: 1 / -1; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .svc-luz > * { grid-column: 1 / -1; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .svc-luz > .services-section-title { margin: 0 0 0; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .svc-luz > .services-section-title { margin: 0 0 0; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .svc-luz > .luz-hora { grid-column: auto; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .svc-luz > .luz-hora { grid-column: auto; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-ahora {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "etq niv" "val niv";
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 12px 14px 11px;
}
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .luz-ahora {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "etq niv" "val niv";
    align-items: center;
    column-gap: 14px;
    row-gap: 3px;
    padding: 17px 19.5px 15.5px;
}
@media (max-width: 359.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-ahora { grid-template-columns: minmax(0, 1fr); grid-template-areas: "etq" "val" "niv"; row-gap: 6px; }
}
@media (max-width: 359.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-nivel { justify-self: start; }
}
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-ahora > span:first-child { grid-area: etq; display: block; font-size: 10.5px; line-height: 1.25; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .luz-ahora > span:first-child { grid-area: etq; display: block; font-size: 14.5px; line-height: 1.25; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-ahora > .row-val { grid-area: val; font-size: 30px; line-height: 1.1; text-align: left; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .luz-ahora > .row-val { grid-area: val; font-size: 42px; line-height: 1.1; text-align: left; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-ahora > .row-val small { font-size: 13px; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .luz-ahora > .row-val small { font-size: 18px; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-nivel {
    grid-area: niv;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-sizing: border-box;
    min-height: 32px;
    padding: 0 12px 0 10px;
    border-radius: 99px;
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
    text-align: left;
}
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .luz-nivel {
    grid-area: niv;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 0 17px 0 14px;
    border-radius: 99px;
    font-size: 17.5px;
    line-height: 1;
    white-space: nowrap;
    text-align: left;
}
html[data-g3-tema] #serviciosFloatPanel .luz-nivel {
    background: var(--g3-superficie);
    color: var(--g3-texto);
    font-family: var(--g3-fuente-texto);
    font-weight: 700;
}
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-nivel::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .luz-nivel::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; }
html[data-g3-tema] #serviciosFloatPanel .luz-nivel::before { background: var(--g3-aviso-amarillo); }
html[data-g3-tema] #serviciosFloatPanel .luz-nivel[data-nivel="bajo"]::before { background: var(--bz-verde); }
html[data-g3-tema] #serviciosFloatPanel .luz-nivel[data-nivel="alto"]::before { background: var(--g3-peligro); }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-hora {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    padding: 10px 12px 11px;
}
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .luz-hora {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
    padding: 14px 17px 15.5px;
}
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-hora > span:first-child { display: block; font-size: 10.5px; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .luz-hora > span:first-child { display: block; font-size: 14.5px; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-hora > .row-val { font-size: 22px; line-height: 1.15; text-align: left; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .luz-hora > .row-val { font-size: 31px; line-height: 1.15; text-align: left; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .luz-hora > .panel-nota { font-size: 12.5px; line-height: 1.3; text-align: left; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .luz-hora > .panel-nota { font-size: 17.5px; line-height: 1.3; text-align: left; }
html[data-g3-tema] #serviciosFloatPanel .luz-ahora > span:first-child,
html[data-g3-tema] #serviciosFloatPanel .luz-hora > span:first-child {
    color: var(--g3-texto-suave);
    font-family: var(--g3-fuente-texto);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* S.3 Gasolinera más cercana y próximo festivo: texto a la izquierda, cifra a la derecha (misma tarjeta) */
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .gas-fila,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .fest-fila,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .ev-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    min-height: 56px;
    padding: 10px 14px;
}
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .gas-fila,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .fest-fila,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .ev-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8.5px 17px;
    min-height: 78.5px;
    padding: 14px 19.5px;
}
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .gas-fila > span:first-child,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .fest-fila > span:first-child,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .ev-fila > span:first-child {
    flex: 1 1 9em;
}
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .gas-fila > span:first-child,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .fest-fila > span:first-child,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .ev-fila > span:first-child {
    flex: 1 1 9em;
}
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .gas-fila > .row-val,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .fest-fila > .row-val,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .ev-fila > .row-val {
    margin-left: auto;
}
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .gas-fila > .row-val,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .fest-fila > .row-val,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .ev-fila > .row-val {
    margin-left: auto;
}
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .gas-fila > span:first-child,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .fest-fila > span:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .gas-fila > span:first-child,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .fest-fila > span:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .gas-fila > span:first-child b { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .gas-fila > span:first-child b { font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .gas-fila .panel-nota { display: block; font-size: 12.5px; line-height: 1.35; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .gas-fila .panel-nota { display: block; font-size: 17.5px; line-height: 1.35; }
html[data-g3-tema] #serviciosFloatPanel .gas-fila > span:first-child b { color: var(--g3-texto); font-weight: 700; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .gas-fila > .row-val { font-size: 24px; line-height: 1.1; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .gas-fila > .row-val { font-size: 33.5px; line-height: 1.1; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .gas-fila > .row-val small { font-size: 13px; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .gas-fila > .row-val small { font-size: 18px; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .fest-fila > span:first-child { font-size: 14.5px; line-height: 1.3; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .fest-fila > span:first-child { font-size: 20.5px; line-height: 1.3; }
html[data-g3-tema] #serviciosFloatPanel .fest-fila > span:first-child { color: var(--g3-texto); font-weight: 600; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .fest-fila > .row-val,
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .ev-fila > .row-val {
    font-size: 17px;
    line-height: 1.2;
}
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .fest-fila > .row-val,
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .ev-fila > .row-val {
    font-size: 24px;
    line-height: 1.2;
}
/* S.4 Teléfonos: filas de 48 px con el número como cifra. La fila ENTERA se pulsa (el ::after del enlace la cubre);
   la nota (.phone-extra) cuelga de su fila, sangrada bajo el nombre. En el tótem el número es dato, no enlace. */
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .phone-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    min-height: 48px;
    padding: 4px 0;
}
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .phone-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    box-sizing: border-box;
    min-height: 67px;
    padding: 5.5px 0;
}
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .phone-row ~ .phone-row { border-top: 1px solid var(--g3-linea); }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .phone-row ~ .phone-row { border-top: 1px solid var(--g3-linea); }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .phone-row > span:first-child { font-size: 14px; line-height: 1.3; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .phone-row > span:first-child { font-size: 19.5px; line-height: 1.3; }
html[data-g3-tema] #serviciosFloatPanel .phone-row > span:first-child { color: var(--g3-texto); font-weight: 500; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .phone-link {
    flex: none;
    padding: 0;
    font-size: 17px;
    line-height: 1.2;
    text-align: right;
    text-decoration: none;
    white-space: nowrap;
}
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .phone-link {
    flex: none;
    padding: 0;
    font-size: 24px;
    line-height: 1.2;
    text-align: right;
    text-decoration: none;
    white-space: nowrap;
}
html[data-g3-tema] #serviciosFloatPanel .phone-link {
    color: var(--g3-marca);
    font-family: var(--g3-fuente-titulo);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
html[data-g3-tema] #serviciosFloatPanel .phone-link:hover { color: var(--g3-marca-oscura); }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .phone-link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .phone-row:has(+ .phone-extra) .phone-link::after { bottom: -10px; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .phone-link { pointer-events: none; color: var(--g3-texto); }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .phone-link::after { content: none; }
html[data-g3-tema] #serviciosFloatPanel .phone-extra { color: var(--g3-texto-suave); }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .phone-row:has(+ .phone-extra) { min-height: 0; padding: 14px 0 1px; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .phone-row:has(+ .phone-extra) { min-height: 0; padding: 19.5px 0 1.5px; }
html[data-g3-tema]:not([data-kiosco="1"]) #serviciosFloatPanel .phone-row + .phone-extra { margin: 0 0 12px 25px; }
html[data-g3-tema][data-kiosco="1"] #serviciosFloatPanel .phone-row + .phone-extra { margin: 0 0 17px 35px; }
/* ══ I · BAREYO EN CIFRAS ═════════════════════════════════════════════════════════════════════════ */
/* I.1 Cabecera: la nota 69 es la cifra (la escala «/100» va pequeña y en gris de marca). El resto de la cabecera es de panel-comun. */
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .panel-hero-num { font-size: 34px; line-height: 1.05; }
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .panel-hero-num { font-size: 47.5px; line-height: 1.05; }
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .panel-hero-num small { margin-left: 3px; font-size: 16px; line-height: 1; }
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .panel-hero-num small { margin-left: 4px; font-size: 22.5px; line-height: 1; }
html[data-g3-tema] #icvFloatPanel .panel-hero-num small { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 500; letter-spacing: 0; }
/* I.2 Insignia «Dato piloto»: aviso del kit (ámbar claro, texto #3a2a00 13:1) con su texto siempre; no es un botón */
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-pilot-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-sizing: border-box;
    min-height: 32px;
    margin: 0 0 16px;
    padding: 0 12px 0 10px;
    border-radius: 99px;
    font-size: 12px;
    line-height: 1.2;
    cursor: default;
    box-shadow: inset 0 0 0 1.5px var(--g3-aviso-amarillo);
}
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-pilot-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 45px;
    margin: 0 0 22.5px;
    padding: 0 17px 0 14px;
    border-radius: 99px;
    font-size: 17px;
    line-height: 1.2;
    cursor: default;
    box-shadow: inset 0 0 0 1.5px var(--g3-aviso-amarillo);
}
html[data-g3-tema] #icvFloatPanel .icv-pilot-badge {
    background: var(--g3-aviso-amarillo-bg);
    color: #3a2a00;
    font-family: var(--g3-fuente-texto);
    font-weight: 700;
}
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-pilot-badge { box-shadow: inset 0 0 0 2px var(--g3-aviso-amarillo); }
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-pilot-badge .ico { width: 16px; height: 16px; margin: 0; flex: none; }
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-pilot-badge .ico { width: 22.5px; height: 22.5px; margin: 0; flex: none; }
html[data-g3-tema] #icvFloatPanel .icv-pilot-badge .ico { stroke-width: 2.2; }
/* I.3 Barras por área: etiqueta con icono + cifra arriba, barra de 8 px debajo (aguanta las etiquetas largas de DE/FR).
   Pista = tinte activo, relleno = verde de marca SÓLIDO; el ANCHO de la barra es el dato (viene en línea y no se toca). */
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-areas { display: grid; gap: 13px; margin: 0 0 18px; }
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-areas { display: grid; gap: 18px; margin: 0 0 25px; }
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-area-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
}
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-area-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 8.5px;
}
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-area-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 14px;
    line-height: 1.25;
}
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-area-label {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 19.5px;
    line-height: 1.25;
}
html[data-g3-tema] #icvFloatPanel .icv-area-label { color: var(--g3-texto); font-family: var(--g3-fuente-texto); font-weight: 600; }
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-area-label .ico { width: 18px; height: 18px; margin: 0; opacity: 1; flex: none; }
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-area-label .ico { width: 25px; height: 25px; margin: 0; opacity: 1; flex: none; }
html[data-g3-tema] #icvFloatPanel .icv-area-label .ico { color: var(--g3-marca-2); stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-area-val { font-size: 16px; line-height: 1; text-align: right; }
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-area-val { font-size: 22.5px; line-height: 1; text-align: right; }
html[data-g3-tema] #icvFloatPanel .icv-area-val {
    color: var(--g3-texto);
    font-family: var(--g3-fuente-titulo);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-area-bar { grid-column: 1 / -1; flex: none; height: 8px; border-radius: 99px; overflow: hidden; }
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-area-bar { grid-column: 1 / -1; flex: none; height: 11px; border-radius: 99px; overflow: hidden; }
html[data-g3-tema] #icvFloatPanel .icv-area-bar { background: var(--g3-tinte-activo); }
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-area-bar-fill { height: 100%; border-radius: 99px; }
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-area-bar-fill { height: 100%; border-radius: 99px; }
html[data-g3-tema] #icvFloatPanel .icv-area-bar-fill { background: var(--g3-marca); }
/* I.4 Autosuficiencia: la misma tarjeta de tinte (etiqueta a la izquierda, cifra a la derecha) · aviso legal con filete de 2 px */
html[data-g3-tema] #icvFloatPanel .icv-auto { background: var(--g3-tinte); }
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-auto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    min-height: 56px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 12px;
}
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-auto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    box-sizing: border-box;
    min-height: 78.5px;
    margin: 0 0 22.5px;
    padding: 14px 19.5px;
    border-radius: 16px;
}
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-auto > span:first-child { display: block; font-size: 14px; line-height: 1.3; }
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-auto > span:first-child { display: block; font-size: 19.5px; line-height: 1.3; }
html[data-g3-tema] #icvFloatPanel .icv-auto > span:first-child { color: var(--g3-texto); font-weight: 600; }
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-auto > .row-val { font-size: 24px; line-height: 1.1; }
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-auto > .row-val { font-size: 33.5px; line-height: 1.1; }
html[data-g3-tema]:not([data-kiosco="1"]) #icvFloatPanel .icv-disclaimer { margin: 0; padding: 14px 0 0; border-top: 2px solid var(--g3-linea); font-size: 12.5px; line-height: 1.45; }
html[data-g3-tema][data-kiosco="1"] #icvFloatPanel .icv-disclaimer { margin: 0; padding: 19.5px 0 0; border-top: 2px solid var(--g3-linea); font-size: 17.5px; line-height: 1.45; }
html[data-g3-tema] #icvFloatPanel .icv-disclaimer { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 400; }


/* ═══ PIEZA: tutorial-avisos-popups ═══ */
/* =====================================================================
   PIEZA «tutorial-avisos-popups» — se añade AL FINAL de kit/ui-golf360/puente-bareyo.css
   (va con tutorial-avisos-popups.parches.json: sin los parches, parte de este CSS no tiene a qué agarrarse).

   Cubre lo pequeño que seguía con el diseño anterior:
     10 · Aviso (#appToast)                    11 · Tutorial (.tutorial-*, #tutorialSpotlight)
     12 · Popups del mapa (hito, cumbre, ruta)  13 · Marcadores HTML (pin de ruta, hito, «mi ubicación»)
     14 · Visor de coordenadas                  15 · Loader          (14 y 15: bloque separable, al final)
   offline.html lleva su propio <style> y va entero en los parches.

   LEY de prefijos (CONTRATO §3): medida, disposición y forma van SIEMPRE con
   html[data-g3-tema]:not([data-kiosco="1"]) (web) o html[data-g3-tema][data-kiosco="1"] (tótem);
   la regla desnuda html[data-g3-tema] solo lleva color, fondo, familia y peso. Cuando una medida vale
   para los dos, se escribe con los dos selectores. En el tutorial no hay ni un !important; los 10 que hay
   pisan, propiedad por propiedad, estilos en línea que no son nuestros (js/cumbres.js y MapLibre).
   Clases que añaden los parches: .tutorial-card-arriba · .wp-pin (+ --wp-color) · .route-pin-dot · .user-location-marker.
   ===================================================================== */

/* ── 10. Aviso (#appToast) ─────────────────────────────────────────────
   showToast() ya no pone estilos en línea (parche): píldora verde oscuro de marca con sombra teñida.
   Capa 120: por encima del visor 360 (65) y por debajo del atractor del tótem (200). */
html[data-g3-tema] #appToast { background: var(--g3-marca-oscura); color: #fff; font-family: var(--g3-fuente-texto); font-weight: 600; }
html[data-g3-tema]:not([data-kiosco="1"]) #appToast,
html[data-g3-tema][data-kiosco="1"] #appToast {
    position: fixed; z-index: 120; left: 16px; right: 16px; bottom: 96px;   /* escritorio: 28 px por encima del dock */
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box; width: -webkit-fit-content; width: fit-content; max-width: 560px; min-height: 44px;
    margin: 0 auto; padding: 10px 22px;
    border-radius: var(--g3-radio-pildora); box-shadow: var(--g3-sombra);
    font-size: 14.5px; line-height: 1.3; text-align: center;
    pointer-events: none; transition: opacity .2s ease;
}
html[data-g3-tema]:not([data-kiosco="1"]) #appToast .ico,
html[data-g3-tema][data-kiosco="1"] #appToast .ico { flex: none; width: 18px; height: 18px; stroke-width: 2.2; }
/* Escritorio: centrado sobre el MAPA (no sobre la ventana: el cajón ocupa la izquierda). Con una ficha o un evento
   abiertos, abajo caería sobre su botonera: sube a la cabecera (foto), centrado con la tarjeta. */
@media (min-width: 1024px) {
    html[data-g3-tema]:not([data-kiosco="1"]) #appToast { left: calc(var(--cajon-panel-w, 400px) + 32px); }
    html[data-g3-tema]:not([data-kiosco="1"]) #cajon[data-panel="collapsed"] ~ #appToast { left: 16px; }
    html[data-g3-tema]:not([data-kiosco="1"]) #detailModal.active ~ #appToast,
    html[data-g3-tema]:not([data-kiosco="1"]) #eventModal.active ~ #appToast { left: 16px; top: 48px; bottom: auto; }
}
/* Móvil y tableta: justo encima de la tira del dock y con su misma caja (sigue al cajón con --cajon-sheet-h),
   así nunca cae sobre la cabecera del cajón ni bajo el rail. Con el cajón a pantalla completa, sobre la lista.
   Con ficha o evento abiertos: 288 px del borde (donde sale siempre), muy por encima de la botonera. */
@media (max-width: 1023.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) #appToast { left: 8px; right: 86px; bottom: calc(var(--cajon-sheet-h, 156px) + 132px); }
    html[data-g3-tema]:not([data-kiosco="1"]) body.sheet-full #appToast { right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
    html[data-g3-tema]:not([data-kiosco="1"]) #detailModal.active ~ #appToast,
    html[data-g3-tema]:not([data-kiosco="1"]) #eventModal.active ~ #appToast { right: 8px; bottom: 288px; }
}
/* Tótem: 20 px de texto y 64 de alto, por encima del dock y centrado sobre el mapa (entre el cajón fijo de la
   izquierda y, si está abierta, la ficha de la derecha). El dock del tótem mide DOS filas (y 896-1064 a 1080 de alto,
   en los cuatro idiomas: «Vista aérea» baja a la segunda), así que el aviso va a 200 px del borde: su base queda
   16 px por encima de la fila de arriba del dock, también con el aviso largo de dos líneas (80 px de alto). */
html[data-g3-tema][data-kiosco="1"] #appToast { left: calc(var(--cajon-panel-w, 442px) + 16px); bottom: 200px; max-width: 820px; min-height: 64px; padding: 14px 32px; gap: 12px; font-size: 20px; }
html[data-g3-tema][data-kiosco="1"] #detailModal.active ~ #appToast { right: calc(clamp(420px, 26vw, 620px) + 16px); }
html[data-g3-tema][data-kiosco="1"] #appToast .ico { width: 26px; height: 26px; }

/* ── 11. Tutorial ──────────────────────────────────────────────────────
   Hoja de 22 px con la jerarquía del kit: etiqueta (paso) → titular → texto → UN primario ancho.
   El velo es la sombra del foco (#tutorialSpotlight) y el foco es un hueco: ya no se sube nada de capa (parche). */
html[data-g3-tema] .tutorial-backdrop { background: var(--g3-velo); }
html[data-g3-tema] .tutorial-card { background: var(--g3-superficie); color: var(--g3-texto); }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-card,
html[data-g3-tema][data-kiosco="1"] .tutorial-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px;
    box-sizing: border-box; width: min(400px, calc(100vw - 24px)); max-width: none;
    max-height: calc(100vh - 24px); overflow-y: auto;
    padding: 22px 22px 14px; border: 0; border-radius: var(--g3-radio-hoja);
    box-shadow: var(--g3-sombra-hoja-centrada); text-align: left;
}
/* progreso: un solo color, sin degradado */
html[data-g3-tema] .tutorial-progress { background: var(--g3-linea); }
html[data-g3-tema] .tutorial-progress-bar { background: var(--g3-marca); }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-progress,
html[data-g3-tema][data-kiosco="1"] .tutorial-progress { grid-column: 1 / -1; grid-row: 1; height: 4px; margin: 0 0 20px; border-radius: var(--g3-radio-pildora); }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-progress-bar,
html[data-g3-tema][data-kiosco="1"] .tutorial-progress-bar { border-radius: var(--g3-radio-pildora); transition: width .2s ease; }
/* cabecera: icono en su cuadro de tinte + «PASO N DE 8» + titular */
html[data-g3-tema] .tutorial-icon { background: var(--g3-tinte); color: var(--g3-marca); }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-icon,
html[data-g3-tema][data-kiosco="1"] .tutorial-icon {
    grid-column: 1; grid-row: 2 / span 2; align-self: center;
    display: grid; place-items: center; width: 48px; height: 48px; margin: 0;
    border-radius: var(--g3-radio-boton); font-size: 24px; line-height: 1;
}
html[data-g3-tema] .tutorial-icon .ico { color: var(--g3-marca); stroke-width: 2.2; }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-icon .ico,
html[data-g3-tema][data-kiosco="1"] .tutorial-icon .ico { width: 24px; height: 24px; }
html[data-g3-tema] .tutorial-step-counter { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-step-counter,
html[data-g3-tema][data-kiosco="1"] .tutorial-step-counter { grid-column: 2; grid-row: 2; align-self: end; margin: 0; font-size: 11px; line-height: 1.2; text-align: left; }
html[data-g3-tema] .tutorial-title { color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700; letter-spacing: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-title,
html[data-g3-tema][data-kiosco="1"] .tutorial-title { grid-column: 2; grid-row: 3; align-self: start; margin: 3px 0 0; font-size: 21px; line-height: 1.15; text-align: left; }
html[data-g3-tema] .tutorial-text { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); }
html[data-g3-tema]:not([data-kiosco="1"]) #tutorialBody,
html[data-g3-tema][data-kiosco="1"] #tutorialBody { grid-column: 1 / -1; grid-row: 4; }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-text,
html[data-g3-tema][data-kiosco="1"] .tutorial-text { margin: 16px 0 0; font-size: 15px; line-height: 1.55; text-align: left; }
/* botonera: secundario en tinte + UN primario ancho con canto (el .g3-btn del kit) */
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-nav,
html[data-g3-tema][data-kiosco="1"] .tutorial-nav { grid-column: 1 / -1; grid-row: 5; gap: 10px; margin-top: 20px; }
html[data-g3-tema] .tutorial-btn { font-family: var(--g3-fuente-texto); font-weight: 700; }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-btn,
html[data-g3-tema][data-kiosco="1"] .tutorial-btn { flex: 1 1 0; min-height: 52px; padding: 0 16px; border-radius: var(--g3-radio-boton); font-size: 16px; line-height: 1.15; transition: none; }
html[data-g3-tema]:not([data-kiosco="1"]) #tutorialPrev[hidden],
html[data-g3-tema][data-kiosco="1"] #tutorialPrev[hidden] { display: none; }
html[data-g3-tema] .tutorial-btn-primary { background: var(--g3-marca); color: #fff; }
html[data-g3-tema] .tutorial-btn-primary:hover { background: var(--g3-marca-oscura); }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-btn-primary,
html[data-g3-tema][data-kiosco="1"] .tutorial-btn-primary { flex-grow: 2; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-btn-primary:hover,
html[data-g3-tema][data-kiosco="1"] .tutorial-btn-primary:hover { transform: none; }
html[data-g3-tema] .tutorial-btn-secondary { background: var(--g3-tinte); color: var(--g3-marca); }
html[data-g3-tema] .tutorial-btn-secondary:hover { background: var(--g3-tinte-hover); }
/* «Saltar guía»: botón fantasma en píldora con 44 px de toque (era un enlace subrayado de 58×18) */
html[data-g3-tema] .tutorial-skip { background: transparent; color: var(--g3-marca); font-family: var(--g3-fuente-texto); font-weight: 600; }
html[data-g3-tema] .tutorial-skip:hover { background: var(--g3-tinte); }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-skip,
html[data-g3-tema][data-kiosco="1"] .tutorial-skip {
    grid-column: 1 / -1; grid-row: 6; justify-self: center;
    min-height: 44px; margin: 8px 0 0; padding: 0 20px; border-radius: var(--g3-radio-pildora);
    box-shadow: inset 0 0 0 2px var(--g3-borde);   /* el «fantasma» del kit */
    font-size: 13.5px; line-height: 1; text-decoration: none;
}
/* foco: aro blanco y velo del kit; sin halo ni pulso (spotlightPulseV3 animaba la sombra y se comía el velo) */
html[data-g3-tema] .tutorial-spotlight { border-color: var(--g3-superficie); }
html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-spotlight,
html[data-g3-tema][data-kiosco="1"] .tutorial-spotlight {
    border-width: 3px; box-shadow: 0 0 0 9999px var(--g3-velo); animation: none;
    transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease, border-radius .2s ease;
}
/* Escritorio: la tarjeta vive en el área del mapa (nunca sobre el cajón) y, cuando va a la derecha, deja libre el rail */
@media (min-width: 1024px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-overlay { padding: 12px 16px 12px calc(var(--cajon-panel-w, 400px) + 32px); }
    html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-card-left { margin-right: 152px; }
}
/* Móvil y tableta: la tarjeta se ancla abajo, o arriba (.tutorial-card-arriba, parche) si lo que explica está abajo */
@media (max-width: 1023.98px) {
    html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-overlay { align-items: flex-end; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
    html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-card { max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 18px 18px 10px; }
    html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-card-left,
    html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-card-right { margin-left: auto; margin-right: auto; }
    html[data-g3-tema]:not([data-kiosco="1"]) .tutorial-card-arriba { align-self: flex-start; }
}
/* Tótem: salía a tamaño de web (botones de 43 px, texto de 14,5) en una pantalla de 75" */
html[data-g3-tema][data-kiosco="1"] .tutorial-card { width: min(580px, 40vw); padding: 32px 32px 22px; column-gap: 20px; }
html[data-g3-tema][data-kiosco="1"] .tutorial-progress { height: 6px; margin-bottom: 28px; }
html[data-g3-tema][data-kiosco="1"] .tutorial-icon { width: 72px; height: 72px; border-radius: var(--g3-radio-tarjeta); font-size: 36px; }
html[data-g3-tema][data-kiosco="1"] .tutorial-icon .ico { width: 36px; height: 36px; }
html[data-g3-tema][data-kiosco="1"] .tutorial-step-counter { font-size: 15px; }
html[data-g3-tema][data-kiosco="1"] .tutorial-title { margin-top: 5px; font-size: 30px; }
html[data-g3-tema][data-kiosco="1"] .tutorial-text { margin-top: 22px; font-size: 20px; }
html[data-g3-tema][data-kiosco="1"] .tutorial-nav { gap: 14px; margin-top: 28px; }
html[data-g3-tema][data-kiosco="1"] .tutorial-btn { min-height: 72px; padding: 0 24px; font-size: 21px; }
html[data-g3-tema][data-kiosco="1"] .tutorial-skip { min-height: 64px; margin-top: 10px; padding: 0 32px; font-size: 18px; }

/* ── 12. Popups del mapa ───────────────────────────────────────────────
   Un solo estilo: tarjeta blanca de 18 px con sombra teñida, título en Signika y × redonda.
   Vale para TODO popup de MapLibre (hito de ruta .wp-popup, cumbre —sin clase—, y los que vengan) menos los
   de fotos 360 (§7, ya hechos) y el rótulo de ruta, que es una etiqueta sin cierre (más abajo). */
html[data-g3-tema] .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-content { background: var(--g3-superficie); color: var(--g3-texto); font-family: var(--g3-fuente-texto); }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-content,
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-content { padding: 14px 16px 16px; border-radius: var(--g3-radio-tarjeta); box-shadow: var(--g3-sombra); }
/* la esquina donde nace la punta sigue recta, como en MapLibre */
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-anchor-top-left:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-content,
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-anchor-top-left:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-content { border-top-left-radius: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-anchor-top-right:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-content,
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-anchor-top-right:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-content { border-top-right-radius: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-anchor-bottom-left:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-content,
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-anchor-bottom-left:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-content { border-bottom-left-radius: 0; }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-anchor-bottom-right:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-content,
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-anchor-bottom-right:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-content { border-bottom-right-radius: 0; }
/* MapLibre elige el ancla midiendo el popup ANTES de ponerle la clase de ancla: en ese instante la punta va al lado
   (flex en fila) y el alto sale ~22 px corto, así que junto al borde superior el popup se abría hacia arriba y se
   salía de la pantalla (medido en el tótem: −12 px). Con la punta ya debajo, la medida es la buena y le da la vuelta. */
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup:not([class*="maplibregl-popup-anchor"]),
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup:not([class*="maplibregl-popup-anchor"]) { flex-direction: column-reverse; }
/* × : círculo de tinte de 32 px con 44 de toque (medía 7×20). El «×» de texto de MapLibre se cambia por un aspa de trazo. */
html[data-g3-tema] .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-close-button { background-color: var(--g3-tinte); color: var(--g3-marca); }
html[data-g3-tema] .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-close-button:hover { background-color: var(--g3-tinte-hover); }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-close-button,
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-close-button {
    top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 50%; font-size: 0; line-height: 0;
}
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-close-button::before,
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-close-button::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-close-button::after,
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-close-button::after {
    content: ""; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%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' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hito de ruta (.wp-popup). En el tótem se quedan sus 19/16 px de styles-v3.css:1291-1292. */
html[data-g3-tema] .wp-popup-title { color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700; }
html[data-g3-tema] .wp-popup-desc { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); }
html[data-g3-tema]:not([data-kiosco="1"]) .wp-popup-title { display: flex; align-items: center; min-height: 26px; padding-right: 32px; font-size: 16px; line-height: 1.25; }
html[data-g3-tema]:not([data-kiosco="1"]) .wp-popup-desc { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; }

/* Cumbre (div.pop de js/cumbres.js, kit vendorizado: no se toca; sus dos estilos en línea se pisan en la misma propiedad) */
html[data-g3-tema] .maplibregl-popup-content .pop { font-family: var(--g3-fuente-texto); }
html[data-g3-tema] .maplibregl-popup-content .pop .cat { color: var(--g3-texto-suave); font-family: var(--g3-fuente-texto); font-weight: 700; letter-spacing: .08em; }
html[data-g3-tema] .maplibregl-popup-content .pop h3 { color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700; }
html[data-g3-tema] .maplibregl-popup-content .pop p { color: var(--g3-texto-suave); }
html[data-g3-tema] .maplibregl-popup-content .pop div > p { color: var(--g3-texto-suave) !important; }
html[data-g3-tema] .maplibregl-popup-content .pop > p b { color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-content .pop .cat { display: flex; align-items: center; min-height: 26px; padding-right: 32px; font-size: 10.5px; line-height: 1.3; }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-content .pop h3 { margin: 4px 0 0; font-size: 18px; line-height: 1.15; }
/* foto apaisada 2:1 (venía 16:10 en línea): el popup queda más bajo y cabe entero por encima o por debajo del pico */
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-content .pop img { margin: 10px 0 5px !important; border-radius: var(--g3-radio-fila) !important; aspect-ratio: 2 / 1 !important; }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-content .pop div > p { font-size: 10.5px !important; line-height: 1.3; }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-content .pop > p { margin: 8px 0 0; font-size: 13px; line-height: 1.3; }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-content .pop > p b { font-size: 18px; }
/* acciones: «Ficha» primario con canto, «Ver en AR» en tinte; los dos de 44 px */
html[data-g3-tema] .maplibregl-popup-content .pop .accs button,
html[data-g3-tema] .maplibregl-popup-content .pop .accs a { background: var(--g3-tinte); color: var(--g3-marca); font-family: var(--g3-fuente-texto); font-weight: 700; }
html[data-g3-tema] .maplibregl-popup-content .pop .accs a:hover { background: var(--g3-tinte-hover); }
html[data-g3-tema] .maplibregl-popup-content .pop .accs .primaria { background: var(--g3-marca); color: #fff; }
html[data-g3-tema] .maplibregl-popup-content .pop .accs .primaria:hover { background: var(--g3-marca-oscura); }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-content .pop .accs { gap: 8px; margin-top: 12px; }
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-content .pop .accs button,
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-content .pop .accs a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px;
    border: 0; border-radius: var(--g3-radio-boton); font-size: 14px; line-height: 1.1;
}
html[data-g3-tema]:not([data-kiosco="1"]) .maplibregl-popup-content .pop .accs .primaria { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }

/* Rótulo de ruta al pasar el ratón (.route-popup): de caja negra a etiqueta blanca en píldora */
html[data-g3-tema] .route-popup .maplibregl-popup-content { background: var(--g3-superficie); color: var(--g3-texto); font-family: var(--g3-fuente-titulo); font-weight: 600; }
html[data-g3-tema] .route-popup .maplibregl-popup-tip { border-top-color: var(--g3-superficie); }
html[data-g3-tema]:not([data-kiosco="1"]) .route-popup .maplibregl-popup-content,
html[data-g3-tema][data-kiosco="1"] .route-popup .maplibregl-popup-content { padding: 7px 14px; border-radius: var(--g3-radio-pildora); box-shadow: var(--g3-sombra-compacta); font-size: 13.5px; line-height: 1.2; text-align: center; }

/* Tótem: los popups tampoco escalaban. Tarjeta más ancha, textos ×1,4 y × de 56 px con 64 de toque. */
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-content { padding: 20px 22px 22px; }
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-close-button { top: 10px; right: 10px; width: 56px; height: 56px; }
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-close-button::before { inset: -4px; }
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup:not([class*="f360-"]):not(.route-popup) .maplibregl-popup-close-button::after { width: 22px; height: 22px; }
html[data-g3-tema][data-kiosco="1"] .wp-popup-title { display: flex; align-items: center; min-height: 46px; padding-right: 58px; line-height: 1.25; }
html[data-g3-tema][data-kiosco="1"] .wp-popup-desc { margin-top: 10px; line-height: 1.5; }
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup:has(.pop) { max-width: 400px !important; }   /* MapLibre lo fija en línea a 240 px */
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-content .pop .cat { display: flex; align-items: center; min-height: 46px; padding-right: 58px; font-size: 14px; line-height: 1.3; }
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-content .pop h3 { margin: 6px 0 0; font-size: 27px; line-height: 1.15; }
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-content .pop img { margin: 14px 0 6px !important; border-radius: var(--g3-radio-boton) !important; aspect-ratio: 2 / 1 !important; }
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-content .pop div > p { font-size: 13px !important; line-height: 1.3; }
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-content .pop > p { margin: 10px 0 0; font-size: 18px; line-height: 1.3; }
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-content .pop > p b { font-size: 26px; }
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-content .pop .accs { gap: 12px; margin-top: 16px; }
/* (sin display en «.accs a»: «Ver en AR» tiene que seguir oculto en el tótem, styles-v3.css:2375) */
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-content .pop .accs button {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 20px;
    border: 0; border-radius: var(--g3-radio-boton); font-size: 20px; line-height: 1.1;
}
html[data-g3-tema][data-kiosco="1"] .maplibregl-popup-content .pop .accs .primaria { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }

/* ── 13. Marcadores HTML del mapa ──────────────────────────────────────
   El color de cada ruta es de DOMINIO y se queda (aro del hito, fondo del pin y de su etiqueta).
   Cambian la tipografía, las sombras (antes negras) y «mi ubicación», que pasa al azul de acento. */
/* pin numerado de inicio de ruta (.route-pin-dot, parche) y su etiqueta */
html[data-g3-tema] .route-pin-dot { color: #fff; font-family: var(--g3-fuente-texto); font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-g3-tema]:not([data-kiosco="1"]) .route-pin-dot,
html[data-g3-tema][data-kiosco="1"] .route-pin-dot {
    box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border: 2px solid var(--g3-superficie); border-radius: 50%; font-size: 14px; line-height: 1;
    box-shadow: var(--g3-sombra-compacta);
}
html[data-g3-tema] .route-pin-label { font-family: var(--g3-fuente-texto); font-weight: 700; }
html[data-g3-tema]:not([data-kiosco="1"]) .route-pin-label,
html[data-g3-tema][data-kiosco="1"] .route-pin-label { border-radius: var(--g3-radio-pildora); box-shadow: var(--g3-sombra-chip); }
html[data-g3-tema]:not([data-kiosco="1"]) .route-pin-label { padding: 3px 9px; font-size: 11px; line-height: 1.25; }
/* hito numerado de ruta (.wp-pin, parche): aro del color de la ruta, cifra en tinta */
html[data-g3-tema] .wp-pin { background: var(--g3-superficie); color: var(--g3-texto); font-family: var(--g3-fuente-texto); font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-g3-tema]:not([data-kiosco="1"]) .wp-pin,
html[data-g3-tema][data-kiosco="1"] .wp-pin {
    box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border: 2.5px solid var(--wp-color, var(--g3-marca)); border-radius: 50%; font-size: 12.5px; line-height: 1;
    box-shadow: var(--g3-sombra-compacta); cursor: pointer;
}
html[data-g3-tema][data-kiosco="1"] .wp-pin { width: 34px; height: 34px; border-width: 3px; font-size: 15px; }
/* «mi ubicación»: punto fijo (botón del rail, .user-location-marker, parche) y punto vivo del seguimiento de ruta */
html[data-g3-tema] .user-location-marker,
html[data-g3-tema] .user-tracking-marker { background: var(--g3-acento); border-color: var(--g3-superficie); }
html[data-g3-tema]:not([data-kiosco="1"]) .user-location-marker,
html[data-g3-tema][data-kiosco="1"] .user-location-marker {
    box-sizing: border-box; width: 22px; height: 22px; border: 3px solid var(--g3-superficie); border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(34, 110, 163, .22), var(--g3-sombra-chip);   /* 34,110,163 = --g3-acento */
}
html[data-g3-tema]:not([data-kiosco="1"]) .user-tracking-marker,
html[data-g3-tema][data-kiosco="1"] .user-tracking-marker { box-shadow: 0 0 0 0 rgba(34, 110, 163, .5); animation: bz-pulso-ubicacion 2s ease-out infinite; }
@keyframes bz-pulso-ubicacion {
    0%   { box-shadow: 0 0 0 0 rgba(34, 110, 163, .5); }
    70%  { box-shadow: 0 0 0 18px rgba(34, 110, 163, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 110, 163, 0); }
}

/* ══ BLOQUE 4-5 (separable) ═══════════════════════════════════════════
   Los apartados 4 (visor de coordenadas) y 5 (loader) de la pieza. No dependen de nada de arriba ni al revés:
   si se quieren dejar fuera, se borra desde esta línea hasta el final (y los parches «[4 …]» y «[5 …]»). */

/* ── 14. Visor de coordenadas (menú «···») ─────────────────────────────
   De pastilla de cristal monoespaciada a chip de dato del kit, y colocado donde se ve: en escritorio y
   móvil caía DEBAJO del cajón y en el tótem encima del dock. El menú «···» ya hereda el rail (§2): sin cambios. */
html[data-g3-tema] .coords-viewer {
    background: var(--g3-superficie); color: var(--g3-texto); border-color: transparent;
    font-family: var(--g3-fuente-texto); font-weight: 700; font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-g3-tema]:not([data-kiosco="1"]) .coords-viewer,
html[data-g3-tema][data-kiosco="1"] .coords-viewer {
    display: flex; align-items: center; min-height: 36px; padding: 0 14px;
    border: 0; border-radius: var(--g3-radio-pildora); box-shadow: var(--g3-sombra-compacta);
    font-size: 13px; line-height: 1;
}
html[data-g3-tema]:not([data-kiosco="1"]) .coords-viewer[hidden],
html[data-g3-tema][data-kiosco="1"] .coords-viewer[hidden] { display: none; }
@media (min-width: 1024px) {   /* sobre el extremo derecho del dock, alineado con él y con el rail */
    html[data-g3-tema]:not([data-kiosco="1"]) .coords-viewer { left: auto; right: 16px; bottom: 96px; }
}
@media (max-width: 1023.98px) {   /* arriba a la izquierda del mapa: el único hueco que no pisan rail, dock ni cajón */
    html[data-g3-tema]:not([data-kiosco="1"]) .coords-viewer { left: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); bottom: auto; }
}
html[data-g3-tema][data-kiosco="1"] .coords-viewer { left: 16px; bottom: 132px; min-height: 48px; padding: 0 20px; font-size: 18px; }

/* ── 15. Loader (solo se ve al entrar desde la portada; en el tótem, nunca) ──
   Sin resplandor ni cristal: verde de marca liso, logotipo sobre tarjeta blanca y texto blanco pleno (era 3,7:1). */
html[data-g3-tema] #loader { background: linear-gradient(160deg, var(--g3-marca-oscura) 0%, var(--g3-marca) 100%); color: #fff; }
html[data-g3-tema] .loader-logo-app { background: var(--g3-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-g3-tema] #loader .spinner { border-color: rgba(255, 255, 255, .28); border-top-color: #fff; }
html[data-g3-tema] #loaderText { color: #fff; font-family: var(--g3-fuente-texto); font-weight: 600; }
html[data-g3-tema]:not([data-kiosco="1"]) #loader { gap: 22px; }
html[data-g3-tema]:not([data-kiosco="1"]) .loader-logo-app { height: 84px; padding: 10px 18px; border-radius: var(--g3-radio-tarjeta); }
html[data-g3-tema]:not([data-kiosco="1"]) #loaderText { font-size: 15px; line-height: 1.3; opacity: 1; }


/* ═══ Revisión final (07-10-2026): el dock del tótem conservaba el cristal de styles-v3 ═══ */
html[data-g3-tema] .floating-overlays { backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-g3-tema][data-kiosco="1"] .floating-overlays { background: var(--g3-superficie); border: 0; box-shadow: var(--g3-sombra-compacta); }