/* =========================================================
   GUÍA · PIEL DE APP PARA EL MÓVIL (< 1024 px)
   ---------------------------------------------------------
   Se carga con media="(max-width: 1023px)" desde guia.php: el escritorio ni
   la aplica. Mismo patrón que plan-fuga-movil.css (AGENTS.md regla 6 y
   docs/AGENTS-producto.md §7.1). Lo que crea guia-movil.js (gm-*) y la piel
   nativa de lo que ya había: cabecera compacta, tarjetas de parada como
   tarjetas de app, índice como lista, mapa limpio y nítido.
   Mismo HTML para todos: aquí solo hay piel.
   ========================================================= */

/* ---------- CABECERA INMERSIVA ----------
   La foto a casi toda la pantalla, el título GRANDE abajo sobre un degradado,
   las cifras en fichas de cristal, «Ver el mapa» al pie y Guardar/Compartir como
   iconos de cristal en la esquina (guia-movil.js → montarHero). El briefing va
   justo debajo de la foto. «Es el alma de la página: tiene que impactar» (David). */
body .hero-tactical { display: block !important; min-height: 0 !important; height: auto !important; margin-top: -60px !important; padding: 0 !important; overflow: hidden; }
body .hero-tactical .hero-bg { position: absolute !important; inset: 0 0 auto 0 !important; height: 90vh !important; height: 90svh !important; filter: none !important; }
body .hero-tactical .hero-bg img { height: 100% !important; }
body .hero-tactical .hero-overlay { position: absolute !important; inset: 0 0 auto 0 !important; height: 90vh; height: 90svh; opacity: 1 !important; z-index: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0.15) 45%, rgba(8,10,13,0.82) 74%, var(--color-background) 100%) !important; }
body .hero-tactical .hero-grid { display: block !important; padding: 0 !important; max-width: none !important; }
body .hero-tactical .hero-col-left { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 90vh; min-height: 90svh; padding: 0 18px 22px; text-align: left !important; }
body .hero-tactical .hero-loc { display: inline-flex !important; align-self: flex-start; align-items: center; gap: 8px; margin: 0 0 12px !important; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.18); font-size: 0.66rem !important; letter-spacing: 2px !important; justify-content: flex-start !important; }
body .hero-tactical .hero-title { contain: none !important; overflow: visible !important; font-size: clamp(2.35rem, 11vw, 3.4rem) !important; line-height: 0.98 !important; letter-spacing: -0.5px !important; text-align: left !important; margin: 0 0 10px !important; text-shadow: 0 4px 24px rgba(0,0,0,0.65), 0 2px 4px rgba(0,0,0,0.5) !important; }
/* Alturas FIJAS bajo el título: el contenido va anclado al pie de la foto y, si el
   subtítulo o las cifras cambiaban de alto al llegar su fuente, empujaban el título
   (CLS medido). Subtítulo a dos líneas como mucho; fichas de alto fijo. */
body .hero-tactical .hero-subtitle { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.7em; text-align: left !important; font-size: 0.98rem !important; line-height: 1.35 !important; letter-spacing: 0.3px !important; margin: 0 0 16px !important; color: rgba(255,255,255,0.92) !important; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
body .hero-tactical .hero-specs-grid { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin: 0 0 16px !important; justify-content: flex-start !important; }
body .hero-tactical .spec-box { height: 52px; justify-content: center; overflow: hidden; display: inline-flex !important; flex-direction: column; align-items: flex-start !important; gap: 1px; padding: 8px 12px !important; border-radius: 14px !important; background: rgba(255,255,255,0.1) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: none !important; min-width: 0; }
body .hero-tactical .spec-label { font-size: 0.56rem !important; letter-spacing: 1px !important; opacity: 0.9; }
body .hero-tactical .spec-val { font-size: 0.95rem !important; line-height: 1.1 !important; }
body .hero-tactical .hero-col-right { position: relative; z-index: 2; padding: 0 12px 6px; }
body .hero-tactical .mission-brief-card { padding: 16px !important; border-radius: 20px !important; background: var(--color-surface) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
body .hero-tactical .report-header { font-size: 0.9rem !important; padding-bottom: 8px !important; margin-bottom: 8px !important; }
body .hero-tactical .report-body { font-size: 0.93rem !important; line-height: 1.6 !important; }
/* Mapa, guardar y compartir ya están sobre la foto */
body .hero-tactical .report-actions { display: none !important; }

/* Iconos de cristal en la esquina de la foto y «Ver el mapa» */
/* La cabecera empieza 60 px por encima (bajo la barra fija del sitio): los iconos, debajo de esa barra */
.gm-hero-acts { position: absolute; z-index: 3; top: calc(132px + env(safe-area-inset-top)); right: 14px; display: flex; gap: 10px; }

.gm-glass { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28); background: rgba(0,0,0,0.38); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); color: #fff; font-size: 1.05rem; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease; }
.gm-glass:active { transform: scale(0.92); }
.gm-glass[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverted); }
.gm-glass:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gm-hero-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; border: none; border-radius: 999px; background: var(--color-primary); color: var(--color-text-inverted); font-family: var(--font-subheading); font-weight: 800; font-size: 1rem; letter-spacing: 0.2px; cursor: pointer; box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 45%, transparent); -webkit-tap-highlight-color: transparent; }
.gm-hero-cta:active { transform: scale(0.98); }
.gm-hero-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Pestañas de apartados (guia-movil.js → montarSecciones) ----------
   Fila deslizable que se queda PEGADA bajo la cabecera del sitio al bajar: cada
   apartado a un toque, estés donde estés de la guía. Sustituye en el móvil a la
   barra «Saltar a parada» (#repsol-nav): lo que hacía ya lo cubren «Paradas» y
   el «Mapa» del dock, y dos barras apiladas se comían la pantalla. */
.gm-secs { display: block; position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 60; margin: 10px 0 0; padding: 8px 0; background: color-mix(in srgb, var(--color-background) 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); }
.gm-secs__row { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gm-secs__row::-webkit-scrollbar { display: none; }
.gm-sec-tab { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); font: inherit; font-family: var(--font-subheading); font-weight: 800; font-size: 0.84rem; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, border-color 0.15s ease; }
.gm-sec-tab i { color: var(--color-primary); font-size: 0.95rem; }
.gm-sec-tab b { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--color-background); color: var(--color-text-secondary); font-size: 0.7rem; text-align: center; }
.gm-sec-tab:active { transform: scale(0.96); }
.gm-sec-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.gm-sec-tab.is-warn { border-color: color-mix(in srgb, #ef4444 55%, var(--color-border)); }
.gm-sec-tab.is-warn i { color: #ef4444; }
.gm-sec-tab.is-warn b { background: #ef4444; color: #fff; }
body #repsol-nav { display: none !important; }
/* «Waypoints de la misión»: en el móvil era una lista de 30 enlaces desplegada que empujaba
   las paradas (David: «invasiva»). Lo cubre la pestaña «Paradas». Sigue en el HTML (SEO) y
   en el escritorio. */
body .waypoints-tactical-section { display: none !important; }

/* Pestaña «misión anterior/siguiente»: una lengüeta discreta en el borde, no una mancha */
body .page-curl-hint { width: 20px !important; height: 56px !important; border-radius: 0 12px 12px 0 !important; opacity: 0.6; overflow: hidden; }
body .page-curl-hint.next { border-radius: 14px 0 0 14px !important; }
body .page-curl-hint i { font-size: 0.9rem !important; }
/* Mientras se ve la cabecera, las lengüetas no pisan la foto (guia-movil.js → .gm-en-hero) */
body.gm-en-hero .page-curl-hint { opacity: 0 !important; pointer-events: none !important; }
/* «Misión anterior / Siguiente objetivo» al final de las paradas: en el móvil estaba oculta */
body .mission-frequency-bar.desktop-mission-console { display: block !important; margin: 8px 0 24px !important; }
body .mission-frequency-bar .freq-container { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 !important; }
body .mission-frequency-bar .freq-signal, body .mission-frequency-bar .freq-empty { display: none !important; }
body .mission-frequency-bar .freq-link { display: flex !important; align-items: center; gap: 10px; min-height: 72px; padding: 12px !important; border-radius: 18px !important; border: 1px solid var(--color-border) !important; background: var(--color-surface) !important; min-width: 0; }
body .mission-frequency-bar .freq-link.next { grid-column: 2; justify-content: flex-end; text-align: right; }
body .mission-frequency-bar .freq-data { min-width: 0; }
body .mission-frequency-bar .freq-label { display: block; font-size: 0.6rem !important; letter-spacing: 1px !important; color: var(--color-primary) !important; }
body .mission-frequency-bar .freq-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.86rem !important; line-height: 1.25 !important; }
body .mission-frequency-bar .freq-arrow-box { flex: none; width: 36px; height: 36px; display: grid !important; place-items: center; border-radius: 50%; background: var(--color-background); }
/* «Subir», por encima del dock flotante */
body #scroll-top-btn, body .scroll-top-btn { width: 44px !important; height: 44px !important; right: 14px !important; bottom: calc(92px + env(safe-area-inset-bottom)) !important; font-size: 1.1rem !important; }

/* Botón de acceso rápido (el mismo lenguaje que el plan de fuga) */
.gm-qa { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 64px; padding: 2px; border: none; background: none; color: var(--color-text-primary); text-decoration: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gm-qa__ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--color-background); border: 1px solid var(--color-border); color: var(--color-primary); font-size: 1.05rem; transition: transform 0.12s ease; }
.gm-qa:active .gm-qa__ico { transform: scale(0.92); }
.gm-qa__lbl { max-width: 100%; font-size: 0.68rem; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-qa--main .gm-qa__ico { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverted); }
.gm-qa .gm-on { display: none; }
.gm-qa[aria-pressed="true"] .gm-on, .gm-qa.is-saved .gm-on, .gm-qa.active .gm-on { display: inline; }
.gm-qa[aria-pressed="true"] .gm-off, .gm-qa.is-saved .gm-off, .gm-qa.active .gm-off { display: none; }
.gm-qa[aria-pressed="true"] .gm-qa__ico, .gm-qa.is-saved .gm-qa__ico, .gm-qa.active .gm-qa__ico { background: color-mix(in srgb, var(--color-primary) 18%, var(--color-background)); border-color: var(--color-primary); }
.gm-qa[aria-pressed="true"] .gm-qa__ico i::before { font-weight: 900; }
.gm-qa:focus-visible { outline: none; }
.gm-qa:focus-visible .gm-qa__ico { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- Informe y waypoints: bloques de app ---------- */
body .mission-manifesto { padding-left: 12px !important; padding-right: 12px !important; }
body .waypoints-tactical-section { padding-left: 12px !important; padding-right: 12px !important; margin-top: 12px !important; }
body .toc-tactical { border-radius: 18px !important; border-left-width: 1px !important; padding: 12px 14px !important; }
body .toc-tactical h3 { font-size: 0.92rem !important; }
body .toc-list li a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; }

/* ---------- Tarjetas de parada: tarjetas de app ---------- */
body .guide-container { padding-left: 12px !important; padding-right: 12px !important; }
body .stops-feed .stop-card-v8 { position: relative; margin: 0 0 16px !important; padding: 0 !important; border-radius: 22px !important; overflow: hidden; background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important; }
body .stops-feed .stop-top-row { display: flex !important; flex-direction: column !important; gap: 0 !important; }
body .stops-feed .stop-visual-col { position: relative; width: 100% !important; }
body .stops-feed .stop-img-frame { margin: 0 !important; border-radius: 0 !important; border: none !important; aspect-ratio: 16 / 10; cursor: pointer; }
body .stops-feed .stop-img-frame img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; }
body .stops-feed .watermark-stacked { transform: scale(0.7); transform-origin: bottom right; }
body .stops-feed .stop-copyright { position: absolute; left: 10px; right: auto; bottom: 8px; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); color: #fff !important; font-size: 0.6rem !important; }
body .stops-feed .stop-data-col { padding: 14px 16px 4px !important; }
body .stops-feed .stop-header-group { margin: 0 !important; }
/* El número gigante en contorno → insignia sobre la foto */
body .stops-feed .stop-number-outline { position: absolute; top: 12px; left: 12px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; margin: 0 !important; border-radius: 50%; background: var(--color-primary); color: var(--color-text-inverted) !important; -webkit-text-stroke: 0 !important; font-size: 1rem !important; line-height: 1 !important; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
body .stops-feed .stop-title-main { font-size: 1.22rem !important; line-height: 1.2 !important; margin: 0 0 6px !important; cursor: pointer; letter-spacing: 0 !important; }
body .stops-feed .stop-address-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 0.86rem !important; }
body .stops-feed .stop-hud-grid, body .stops-feed .stop-hud-minimal { display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 8px 0 0 !important; padding: 0 !important; border: none !important; background: none !important; }
body .stops-feed .hud-info-lines { display: grid; width: 100%; box-sizing: border-box; gap: 4px; padding: 10px 12px !important; border-radius: 14px; background: var(--color-background); border: 1px solid var(--color-border) !important; }
body .stops-feed .hud-line { font-size: 0.82rem !important; line-height: 1.4 !important; }
body .stops-feed .hud-actions-col, body .stops-feed .stop-hud-minimal { display: flex !important; flex-direction: row !important; justify-content: flex-start; gap: 10px !important; }
body .stops-feed .btn-tactical-icon { width: 44px !important; height: 44px !important; border-radius: 50% !important; display: inline-grid !important; place-items: center; }
body .stops-feed .stop-bottom-row { padding: 4px 16px 16px !important; }
body .stops-feed .narrative-content.collapsed { max-height: 4.8em !important; }
/* «Leer todo el rollo» abre la parada a pantalla completa: botón de app a lo ancho */
body .stops-feed .btn-read-more { width: 100%; min-height: 46px; justify-content: center; margin-top: 10px !important; border-radius: 14px !important; }
body .stops-feed .btn-read-more i { transform: rotate(-90deg); }

/* ---------- Mapa de la guía: limpio y a pantalla completa ---------- */
@media (max-width: 1023px) {
    #mapModal.modal-overlay { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
    #mapModal .modal-box { width: 100% !important; max-width: none !important; height: 100vh !important; height: 100dvh !important; margin: 0 !important; border: none !important; border-radius: 0 !important; clip-path: none !important; }
    body.map-modal-open .site-header, body.map-modal-open #repsol-nav, body.map-modal-open .mobile-bottom-kit,
    body.map-modal-open .page-curl-hint, body.map-modal-open .scroll-top-btn { display: none !important; }
}
#mapModal .modal-header { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center; gap: 4px; min-height: 56px; padding: calc(4px + env(safe-area-inset-top)) 14px 4px 4px !important; background: var(--color-surface) !important; border-bottom: 1px solid var(--color-border) !important; }
#mapModal .modal-header::after { content: ''; order: 2; flex: none; width: 28px; height: 28px; margin-left: 8px; background: url('/favicon.png') center / contain no-repeat; }
#mapModal .modal-title { order: 1; flex: 1 1 auto; min-width: 0; text-align: left !important; font-family: var(--font-subheading) !important; font-size: 0.98rem !important; letter-spacing: 0 !important; text-transform: none !important; }
/* La ✕ pasa a «‹» (volver), como en el resto de pantallas de app */
#mapModal .close-btn { order: 0; flex: none !important; width: 48px !important; height: 48px !important; margin: 0 !important; border: none !important; background: transparent !important; color: var(--color-primary) !important; font-size: 0 !important; display: grid !important; place-items: center; }
#mapModal .close-btn::before { content: '\f053'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 1.25rem; }
#mapModal .map-tabs { padding: 8px 12px !important; gap: 6px; background: var(--color-surface); }
#mapModal .map-tab { flex: 1; min-height: 38px; border-radius: 999px !important; font-size: 0.72rem !important; }
#mapModal .modal-footer-status { display: none !important; }
#mapModal .vv-map-tools .vv-map-tool { width: 44px; height: 44px; }
#mapModal .leaflet-control-zoom { margin-bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
#mapModal .leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; }

/* =========================================================
   PANTALLA COMPLETA (#gm-scr): parada, paradas, kit y secciones
   ========================================================= */
html.gm-lock, html.gm-lock body { overflow: hidden; }
.gm-scr {
    position: fixed; inset: 0; z-index: 2147483000;    /* sobre el mapa (10000001) y el dock */
    display: flex; flex-direction: column; height: 100vh; height: 100dvh;
    background: var(--color-background); color: var(--color-text-primary);
    animation: gm-in 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}
.gm-scr[hidden] { display: none; }
@keyframes gm-in { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.gm-scr__bar { flex: none; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: calc(6px + env(safe-area-inset-top)) 14px 6px 4px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.gm-scr__bar::after { content: ''; flex: none; width: 30px; height: 30px; margin-left: 8px; background: url('/favicon.png') center / contain no-repeat; }
.gm-scr__back { flex: none; width: 48px; height: 48px; border: none; border-radius: 50%; background: transparent; color: var(--color-primary); font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; }
.gm-scr__back:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; }
.gm-scr__titles { flex: 1; min-width: 0; }
.gm-scr__kicker { margin: 0; font-family: var(--font-tactical); font-size: 0.6rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-scr__title { margin: 2px 0 0; font-family: var(--font-subheading); font-weight: 800; font-size: 1.08rem; line-height: 1.2; text-transform: none; letter-spacing: 0; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-scr__main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.gm-det__text, .gm-list { scrollbar-width: thin; scrollbar-color: var(--color-primary) transparent; }
.gm-det__text::-webkit-scrollbar, .gm-list::-webkit-scrollbar { width: 5px; }
.gm-det__text::-webkit-scrollbar-thumb, .gm-list::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }

/* Parada */
.gm-det { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gm-det__hero { position: relative; flex: none; height: min(30vh, 240px); height: min(30dvh, 240px); overflow: hidden; background: linear-gradient(135deg, var(--color-primary), #3a1a0b); }
.gm-det__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-det__num { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary); color: var(--color-text-inverted); font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); }
@media (max-height: 640px) { .gm-det__hero { height: 20vh; height: 20dvh; } }
@media (orientation: landscape) and (max-height: 500px) { .gm-det__hero { display: none; } }
.gm-det__acts { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 12px 4px 10px; border-bottom: 1px solid var(--color-border); }
.gm-det__text { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 18px calc(24px + env(safe-area-inset-bottom)); }
.gm-det__text:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.gm-det__geo { margin: 0 0 14px; }
.gm-det__geo > * { margin-top: 0; }
.gm-det__meta { margin: 0 0 12px; color: var(--color-text-secondary); font-size: 0.88rem; }
.gm-det__info { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: 0.86rem; line-height: 1.45; }
.gm-det__narr { font-size: 0.97rem; line-height: 1.65; }
.gm-det__narr .narrative-text > *:first-child { margin-top: 0; }
.gm-det__narr img { max-width: 100%; height: auto; border-radius: 12px; }
.gm-det__narr .canalla-box { margin-top: 18px; border-radius: 16px; }
.gm-det__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.gm-det__navbtn { display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.gm-det__navbtn--next { justify-content: flex-end; text-align: right; }
.gm-det__navbtn i { color: var(--color-primary); flex: none; }
.gm-det__navbtn span { min-width: 0; font-size: 0.82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gm-det__navbtn small { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-secondary); }
.gm-det__navbtn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Listas (paradas) y kit */
.gm-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 12px calc(24px + env(safe-area-inset-bottom)); }
.gm-lead { margin: 2px 4px 12px; color: var(--color-text-secondary); font-size: 0.86rem; }
.gm-empty { padding: 24px; color: var(--color-text-secondary); }
.gm-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; background: var(--color-surface); }
.gm-rows li + li { border-top: 1px solid var(--color-border); }
.gm-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 14px 8px 10px; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gm-row:active { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.gm-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.gm-row__img { flex: none; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--color-background); }
.gm-row__txt { flex: 1; min-width: 0; }
.gm-row__txt small { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-primary); }
.gm-row__txt b { display: block; font-size: 0.95rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gm-row__chev { flex: none; color: var(--color-text-secondary); }

/* ---------- Hoja de acciones del «Kit» (#gm-scr.is-sheet) ---------- */
.gm-scr.is-sheet { background: rgba(6, 8, 10, 0.6); animation: gm-fade 0.2s ease; }
.gm-scr.is-sheet .gm-scr__bar { display: none; }
.gm-scr.is-sheet .gm-scr__main { flex: none; margin-top: auto; overflow: visible; }
@keyframes gm-fade { from { opacity: 0; } to { opacity: 1; } }
.gm-sheet { display: flex; flex-direction: column; max-height: 86vh; max-height: 86dvh; overflow: hidden; border-radius: 24px 24px 0 0; background: var(--color-background); border-top: 1px solid var(--color-border); box-shadow: 0 -16px 40px rgba(0,0,0,0.45); animation: gm-up 0.26s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; }
@keyframes gm-up { from { transform: translateY(40%); } to { transform: none; } }
.gm-sheet__head { flex: none; position: relative; display: flex; align-items: center; gap: 8px; padding: 18px 10px 10px 18px; touch-action: none; cursor: grab; }
.gm-sheet__handle { position: absolute; top: 7px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 999px; background: var(--color-border); }
.gm-sheet__titles { flex: 1; min-width: 0; }
.gm-sheet__kicker { margin: 0; font-family: var(--font-tactical); font-size: 0.58rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-primary); }
.gm-sheet__title { margin: 2px 0 0; font-family: var(--font-subheading); font-weight: 800; font-size: 1.1rem; line-height: 1.2; color: var(--color-text-primary); }
.gm-sheet__x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); cursor: pointer; }
.gm-sheet__x:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.gm-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 12px calc(18px + env(safe-area-inset-bottom)); scrollbar-width: thin; scrollbar-color: var(--color-primary) transparent; }
.gm-sheet__body::-webkit-scrollbar { width: 5px; }
.gm-sheet__body::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }
.gm-sheet__body .gm-list { flex: none; overflow: visible; padding: 0; }
.gm-row--kit { min-height: 58px; }
.gm-row__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)); color: var(--color-primary); }
.gm-row--kit.is-warn .gm-row__ico { background: color-mix(in srgb, #ef4444 18%, var(--color-surface)); color: #ef4444; }
.gm-row--kit .gm-row__txt b { -webkit-line-clamp: 1; }
.gm-row__n { flex: none; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--color-background); border: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 0.72rem; font-weight: 800; text-align: center; }
@media (prefers-reduced-motion: reduce) { .gm-scr.is-sheet, .gm-sheet { animation: none; } }

/* Una sección del kit: el contenido de la barra lateral, con piel de lista */
.gm-sec .wire-body { display: block !important; max-height: none !important; overflow: visible !important; padding: 0 !important; background: none !important; border: none !important; }
.gm-sec .wire-list, .gm-sec .wire-timeline { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; background: var(--color-surface); }
.gm-sec .wire-list li { padding: 12px 14px !important; margin: 0 !important; border: none !important; font-size: 0.9rem; line-height: 1.5; }
.gm-sec .wire-list li + li { border-top: 1px solid var(--color-border) !important; }
.gm-sec .wire-kv-grid, .gm-sec .wire-logistics { display: grid; gap: 10px; }
.gm-sec .wire-kv-row, .gm-sec .wl-day-block { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface); }
.gm-sec .wk-label { display: block; font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; color: var(--color-primary); margin-bottom: 4px; }
.gm-sec .wk-val { display: block; font-size: 0.92rem; line-height: 1.5; }
.gm-sec .wl-row { display: flex; gap: 10px; padding: 6px 0; font-size: 0.9rem; line-height: 1.45; }
.gm-sec .wl-row i { color: var(--color-primary); margin-top: 3px; }
.gm-sec .wire-tools-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; padding: 0 !important; }
.gm-sec .wire-btn { display: flex !important; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px !important; border-radius: 14px !important; }
.gm-sec--warn .wire-list { border-color: color-mix(in srgb, #ef4444 45%, var(--color-border)); }

@media (prefers-reduced-motion: reduce) { .gm-scr { animation: none; } .gm-qa__ico { transition: none; } }

/* Transporte público cerca (guia-capas.js): con el mismo margen que el resto de la tarjeta */
body .stop-card-v8 > .stop-transit { margin: 14px 16px 6px; }
body .gm-det__transit { margin: 14px 0 0; }

/* ---------- Ficha a pantalla completa: la misma en plan, guía, País, Atlas y Buscador (26-09-2026) ----------
   «‹» siempre dentro de su aro naranja (antes el aro solo salía con el foco y las fichas
   nuevas lo enseñaban suelto) y la «A» de la casa como sello en la foto, como en las
   fotos de la guía. El sello es decorativo: pseudoelemento, fuera del árbol de accesibilidad. */
.gm-scr__back, #mapModal .close-btn { box-shadow: inset 0 0 0 2px var(--color-primary); width: 44px !important; height: 44px !important; margin: 2px; }
.gm-det__hero::after { content: ''; position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 28px; height: 26px; pointer-events: none; background: url('/assets/img/marca-a.webp') center / contain no-repeat; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)); opacity: 0.92; }

/* Briefing en modo claro (26-09-2026): la tarjeta es clara (--color-surface) pero heredaba
   el texto blanco/gris claro pensado para la cabecera oscura del escritorio (1,35:1). */
body.light-theme .hero-tactical .mission-brief-card .report-header,
body.light-theme .hero-tactical .mission-brief-card .report-header * { color: var(--color-text-primary) !important; background: none !important; }
body.light-theme .hero-tactical .mission-brief-card .report-body,
body.light-theme .hero-tactical .mission-brief-card .report-body p,
body.light-theme .hero-tactical .mission-brief-card #missionText p { color: var(--color-text-primary) !important; }