/* ═══════════════════════════════════════════════════════════════════════════
   GeoSpots — Design System v4
   Estilo: híbrido Claude (cálido, editorial) + dashboard compacto.
   Tema claro por defecto, oscuro automático vía prefers-color-scheme.
   Tipografía: Outfit (display) + Inter (texto) — Google Fonts CDN.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Superficie (arena cálida) */
    --bg:          #f4f1e8;
    --bg-surface:  #fffdf8;
    --bg-subtle:   #f0ece0;
    --bg-inset:    #e9e4d6;
    --border:      #e6e0d2;
    --border-soft: #efebe0;

    /* Tinta (verde-tinta cálida) */
    --ink:       #1c2a24;
    --ink-soft:  #5a6b62;
    --ink-faint: #94a097;

    /* Acento (coral — hereda la terracota) */
    --accent:      #e8643c;
    --accent-deep: #c54c28;
    --accent-bg:   #fbe7df;

    /* Pino (primario de marca: nav, botones de acción oscuros) */
    --pine:        #14543f;
    --pine-deep:   #0e3b2c;

    /* Teal (secundario: barras de señal, acentos verdes) */
    --teal:        #1d9e75;
    --teal-bg:     #e0f3ec;

    /* Semántica (good alineado al teal-verde) */
    --good:    #1d9e75;
    --good-bg: rgba(29, 158, 117, .11);
    --bad:     #cc4d36;
    --bad-bg:  rgba(204, 77, 54, .10);
    --warn:    #c98a1a;
    --warn-bg: rgba(201, 138, 26, .11);

    /* Geometría (redondeos amplios estilo "A") */
    --radius:    22px;
    --radius-sm: 14px;
    --radius-pill: 999px;
    --shadow: 0 2px 6px rgba(20, 30, 24, .04), 0 18px 40px -14px rgba(20, 30, 24, .18);
    --shadow-soft: 0 1px 3px rgba(20, 30, 24, .05), 0 8px 22px -12px rgba(20, 30, 24, .12);

    --font-display: 'Outfit', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    --nav-h: 74px;       /* alto reservado para la nav flotante móvil */
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:          #111714;
        --bg-surface:  #192219;
        --bg-subtle:   #222d24;
        --bg-inset:    #2a352c;
        --border:      #2a352c;
        --border-soft: #232e25;

        --ink:       #eef2ea;
        --ink-soft:  #a9b6ac;
        --ink-faint: #6f7d72;

        --accent:      #f08055;
        --accent-deep: #f59873;
        --accent-bg:   rgba(240, 128, 85, .14);

        --pine:        #3fae84;
        --pine-deep:   #6fd0a8;

        --teal:        #46c79a;
        --teal-bg:     rgba(70, 199, 154, .14);

        --good:    #46c79a;
        --good-bg: rgba(70, 199, 154, .14);
        --bad:     #f0805a;
        --bad-bg:  rgba(240, 128, 90, .12);
        --warn:    #e0b257;
        --warn-bg: rgba(224, 178, 87, .13);

        --shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 40px -14px rgba(0, 0, 0, .5);
        --shadow-soft: 0 1px 3px rgba(0, 0, 0, .3), 0 8px 22px -12px rgba(0, 0, 0, .4);
        color-scheme: dark;
    }
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.5;
    font-size: 15px;
}
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
h1, h2, h3, .display { font-family: var(--font-display); }

.page {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem calc(var(--nav-h) + 2rem);
}
@media (min-width: 768px) { .page { padding-bottom: 3rem; } }

/* ── Header ────────────────────────────────────────────────────────────────── */
.gs-header {
    position: sticky; top: 0; z-index: 900;
    display: flex; align-items: center; gap: .9rem;
    padding: .7rem 1rem;
    margin: 0 -1rem 1rem;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-soft);
}
.gs-brand {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em;
    color: var(--ink); text-decoration: none;
}
.gs-brand:hover { text-decoration: none; }
.gs-brand .geo { color: var(--accent); }
.gs-header-links { display: none; gap: 1.1rem; margin-left: .4rem; }
.gs-header-links a { color: var(--ink-soft); font-size: .88rem; }
.gs-header-links a:hover { color: var(--ink); text-decoration: none; }
@media (min-width: 768px) { .gs-header-links { display: flex; } }
.gs-header .spacer { flex: 1; }

/* Botón de vehículo en header (compacto) */
.veh-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .34rem .8rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .82rem; color: var(--ink-soft);
    cursor: pointer; white-space: nowrap;
    box-shadow: var(--shadow-soft);
    transition: border-color .15s;
}
.veh-pill:hover { border-color: var(--accent); color: var(--ink); }

/* ── Nav flotante (móvil) — pastilla centrada estilo "A" ───────────────────── */
.gs-nav {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(.9rem + env(safe-area-inset-bottom)); z-index: 950;
    display: flex; gap: .3rem;
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: .4rem; box-shadow: var(--shadow);
}
.gs-nav a, .gs-nav button {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: .1rem;
    padding: .5rem .95rem; border-radius: var(--radius-pill);
    background: none; border: none; cursor: pointer;
    font-size: .66rem; font-weight: 600; color: var(--ink-faint); text-decoration: none;
    transition: color .15s, background .15s;
}
.gs-nav a:hover { text-decoration: none; color: var(--ink); }
.gs-nav .ico { font-size: 1.2rem; line-height: 1; }
.gs-nav .active { background: var(--pine); color: #fff; }
.gs-nav .active:hover { color: #fff; }
@media (min-width: 768px) { .gs-nav { display: none; } }

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: .9rem;
    box-shadow: var(--shadow-soft);
}
.card h2 {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-faint); margin-bottom: .8rem; font-weight: 600;
}
.sec-label {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--ink-faint); font-weight: 700; margin-bottom: .55rem;
}
.dashed-sep { border: none; border-top: 1px dashed var(--border); margin: .9rem 0; }

/* ── LA FRASE ─────────────────────────────────────────────────────────────── */
.one-liner {
    font-family: var(--font-display);
    font-size: 1.18rem; line-height: 1.45; font-weight: 500;
    color: var(--ink); font-style: italic;
    margin: .55rem 0 .7rem;
}
.one-liner::before { content: '“'; color: var(--accent); }
.one-liner::after  { content: '”'; color: var(--accent); }
.one-liner.sm { font-size: .92rem; margin: .3rem 0 .4rem; }

/* ── Personalidad / chips ─────────────────────────────────────────────────── */
.personality { display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: .85rem; color: var(--ink-soft); }
.personality span { white-space: nowrap; display: inline-flex; align-items: center; gap: .28rem; }
.personality .ic { color: var(--pine); }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
    font-size: .74rem; padding: .18rem .65rem; border-radius: 999px;
    background: var(--bg-subtle); color: var(--ink-soft);
    border: 1px solid var(--border-soft);
}
.chip.good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.chip.accent { background: var(--accent-bg); color: var(--accent-deep); border-color: transparent; }
.chip.price { background: var(--accent-bg); color: var(--accent-deep); border-color: transparent; font-weight: 600; }
.chip.rating { background: var(--warn-bg); color: var(--warn); border-color: transparent; font-weight: 600; }

/* ── Señales con evidencia (badges) ───────────────────────────────────────── */
.sig-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.sig-badge {
    font-size: .76rem; padding: .2rem .6rem; border-radius: 999px;
    background: var(--good-bg); color: var(--good); white-space: nowrap;
    display: inline-flex; align-items: center; gap: .3rem;
}

/* ── Servicios presentes (solo ✓) ─────────────────────────────────────────── */
.svc-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; font-size: 1rem; }
.svc-chip {
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-subtle); border: 1px solid var(--border-soft); font-size: .85rem;
}

/* ── Aviso de poca info (solo cuando aplica) ──────────────────────────────── */
.lowinfo-warn {
    margin-top: .55rem; font-size: .76rem; color: var(--warn);
    display: flex; align-items: center; gap: .3rem;
}

/* ── Escalón de menos confianza (plegado / rescate) ───────────────────────── */
.lowinfo-note {
    margin: .9rem 0 .5rem; padding: .55rem .8rem;
    background: var(--warn-bg); color: var(--warn);
    border-radius: var(--radius-sm); font-size: .82rem; line-height: 1.4;
}
.lowinfo-toggle {
    width: 100%; margin: .9rem 0 .3rem; padding: .6rem 1rem;
    background: var(--bg-surface); border: 1px dashed var(--border);
    border-radius: var(--radius-sm); color: var(--ink-soft);
    font-size: .84rem; font-weight: 600; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.lowinfo-toggle:hover { border-color: var(--accent); color: var(--ink); }

/* ── C3 · acciones del mensaje (antes: 3 banners globales sueltos) ─────────────
   criterion-banner (aviso de fallback), convo-bar (criterios activos, editables)
   y refine-chips (sugerencias) son ACCIONES de ESTE mensaje: un solo bloque,
   una sola fuente de espaciado (el gap del contenedor, no el margin de cada hijo). */
/* Contenedor puramente semántico (agrupa las 3 piezas como UN bloque de
   acciones del mensaje); el espaciado lo sigue dando el margin de cada hijo,
   así que oculto (display:none) = 0 espacio extra, sin trucos de colapso. */
.msg-actions { display: block; }

/* Fallback de criterio: ya NO es una caja de alerta con borde — es una línea
   más del mensaje (mismo tono ámbar en el texto, sin chrome de "banner"). */
.criterion-banner {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    margin: 0 0 .9rem;
}
.criterion-banner .cf-msg { flex: 1; min-width: 0; font-size: .86rem; color: var(--warn); line-height: 1.4; }
.criterion-banner .cf-btn {
    flex-shrink: 0; padding: .4rem .8rem; border-radius: 999px;
    background: transparent; color: var(--accent-deep); border: 1px solid var(--accent);
    font-size: .8rem; font-weight: 600; cursor: pointer;
}
.criterion-banner .cf-btn:hover { background: var(--accent-bg); }

/* Criterios activos (editables) + sugerencias: mismo estilo de fila, sin caja. */
.convo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .6rem; }
.convo-bar .cv-lbl { font-size: .78rem; color: var(--ink-faint); font-weight: 600; }
.convo-bar .cv-chip {
    font-size: .76rem; padding: .18rem .6rem; border-radius: 999px;
    background: var(--accent-bg); color: var(--accent-deep); white-space: nowrap;
    display: inline-flex; align-items: center; gap: .3rem;
}
/* ✕ por chip (recibo de intención editable): quitar UN criterio, no todo. */
.convo-bar .cv-x {
    border: 0; background: transparent; color: var(--accent-deep);
    font-size: .72rem; line-height: 1; padding: 0 .1rem; cursor: pointer; opacity: .65;
}
.convo-bar .cv-x:hover { opacity: 1; }
.convo-bar .cv-reset {
    margin-left: .15rem; width: 1.4rem; height: 1.4rem; border-radius: 50%;
    border: 1px solid var(--border); background: var(--bg-surface);
    color: var(--ink-faint); font-size: .8rem; line-height: 1; cursor: pointer;
}
.convo-bar .cv-reset:hover { border-color: var(--accent); color: var(--accent-deep); }
.refine-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.refine-chips .rf-chip {
    font-size: .8rem; padding: .35rem .75rem; border-radius: 999px;
    background: var(--bg-surface); border: 1px solid var(--border);
    color: var(--ink-soft); cursor: pointer; transition: border-color .15s, color .15s;
}
.refine-chips .rf-chip:hover { border-color: var(--accent); color: var(--ink); }
/* Sprint 3 · Copiloto: banner asume-y-confirma (reusa el look de los rf-chip). */
.cop-banner { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .7rem; line-height: 1.5; }
.cop-banner .rf-chip {
    font-size: .8rem; padding: .25rem .65rem; border-radius: 999px; margin-left: .2rem;
    background: var(--bg-surface); border: 1px solid var(--border);
    color: var(--ink-soft); cursor: pointer; transition: border-color .15s, color .15s;
}
.cop-banner .rf-chip:hover { border-color: var(--accent); color: var(--ink); }

/* ── Perfil · "Cómo viajas" (P0: prior de tensiones + lo aprendido) ─────────── */
.travel-sec { margin: .2rem 0 1rem; }
.travel-sec .sec-h { font-weight: 600; font-size: .9rem; color: var(--ink); }
.travel-sec .sec-hint { font-size: .72rem; color: var(--ink-faint); margin: .2rem 0 .7rem; }
.tension { margin-bottom: .7rem; }
.tension .tn-ends { display: flex; justify-content: space-between; font-size: .76rem; color: var(--ink-soft); margin-bottom: .2rem; }
.tension input[type=range] { width: 100%; accent-color: var(--accent); }
.learned-box { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .4rem; padding: .5rem .65rem; background: var(--bg-subtle); border-radius: var(--radius-sm); }
.learned-box .lb-t { font-size: .74rem; color: var(--ink-faint); }
.learned-box .lb-chip { font-size: .74rem; padding: .12rem .5rem; border-radius: 999px; background: var(--good-bg); color: var(--good); }

.route-plan { margin-bottom: 1rem; }
.route-plan .rp-head { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.route-plan .rp-sub { font-size: .85rem; color: var(--ink-soft); margin: .15rem 0 .9rem; }
.route-plan .rp-day { font-weight: 700; color: var(--accent-deep); font-size: .86rem; white-space: nowrap; }
.route-plan .rp-km { font-size: .78rem; color: var(--ink-faint); white-space: nowrap; }
.route-plan .rp-spot { font-size: .92rem; color: var(--ink); }
.route-plan .rp-meta { font-size: .78rem; color: var(--ink-soft); }
.route-plan .rp-none { font-size: .85rem; color: var(--warn); }
.route-plan .rp-arrival .rp-day { color: var(--good); }

/* ── P2 · Autonomía (perfil) ──────────────────────────────────────────────── */
.aut-row { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin: .2rem 0 .5rem; }
.aut-people { display: flex; align-items: center; gap: .45rem; font-size: .86rem; }
.aut-people input { width: 56px; padding: .35rem .5rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); font-family: inherit; }
.aut-shower { display: flex; align-items: center; gap: .4rem; font-size: .86rem; }
.aut-est { font-size: .9rem; color: var(--ink-soft); }
.aut-est #au-days { font-weight: 700; color: var(--accent-deep); font-size: 1.1rem; }
.aut-est .aut-binding { color: var(--ink-faint); font-size: .8rem; }

/* Mood chips (home) — fila con scroll horizontal estilo "A" */
.moodchips {
    display: flex; gap: .5rem; overflow-x: auto;
    padding: .2rem .2rem .3rem; margin: 0 -.2rem;
    scrollbar-width: none; -ms-overflow-style: none;
}
.moodchips::-webkit-scrollbar { display: none; }
.moodchip {
    flex-shrink: 0; white-space: nowrap;
    display: inline-flex; align-items: center; gap: .38rem;
    font-size: .85rem; padding: .5rem .95rem; border-radius: var(--radius-pill);
    background: var(--bg-surface); border: 1px solid var(--border);
    color: var(--ink-soft); cursor: pointer; font-weight: 500;
    box-shadow: var(--shadow-soft);
    transition: border-color .15s, color .15s, transform .1s, background .15s;
}
.moodchip .ic { color: var(--pine); }
.moodchip:hover { border-color: var(--pine); color: var(--ink); transform: translateY(-1px); }

/* ── Fiabilidad (dots) ────────────────────────────────────────────────────── */
.reliability { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-soft); }
.rel-dots { display: inline-flex; gap: 3px; }
.rel-dots i {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border); font-style: normal;
}
.rel-dots i.on { background: var(--good); }
.rel-why-btn {
    background: none; border: none; cursor: pointer;
    color: var(--ink-faint); font-size: .8rem; padding: 0 .15rem;
}
.rel-why-btn:hover { color: var(--accent-deep); }
.rel-why {
    display: none; margin-top: .45rem; padding: .55rem .8rem;
    background: var(--bg-subtle); border-radius: var(--radius-sm);
    font-size: .8rem; color: var(--ink-soft); line-height: 1.45;
}
.rel-why.show { display: block; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .55rem 1.1rem; border-radius: var(--radius-sm);
    font-size: .88rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg-surface); color: var(--ink);
    text-decoration: none; transition: background .15s, border-color .15s;
}
.btn:hover { border-color: var(--ink-faint); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.sm { padding: .35rem .8rem; font-size: .8rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.link-btn {
    background: none; border: none; color: var(--accent-deep);
    cursor: pointer; font-size: inherit; padding: 0; text-decoration: underline;
}

/* ── Inputs / búsqueda ────────────────────────────────────────────────────── */
/* Barra de búsqueda: UN pill (input + micro fantasma + enviar en círculo), estilo
   buscador moderno. Antes eran dos bloques de acento idénticos (la regla genérica
   `.searchbar button` ganaba en especificidad al `.mic-btn` y los pintaba iguales). */
.searchbar {
    display: flex; align-items: center; gap: .3rem;
    padding: .4rem .45rem .4rem .95rem;
    background: var(--bg-surface); border: 1.5px solid var(--border);
    border-radius: var(--radius-pill); box-shadow: var(--shadow-soft);
    transition: border-color .15s, box-shadow .15s;
}
.searchbar:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-bg); }
/* Chispa IA: ancla el buscador como "asistente", no como caja de texto. */
.searchbar .ai-spark { flex-shrink: 0; color: var(--teal); display: inline-flex; }
.searchbar input {
    flex: 1; min-width: 0; padding: .5rem .35rem;
    background: transparent; border: none; box-shadow: none;
    color: var(--ink); font-size: .95rem; font-family: inherit;
}
.searchbar input:focus { outline: none; }
.searchbar input::placeholder { color: var(--ink-faint); }
/* Enviar: círculo de acento. */
#btn-search {
    flex-shrink: 0; width: 38px; height: 38px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: var(--accent); color: #fff; cursor: pointer; font-size: .95rem;
    transition: background .15s;
}
#btn-search:hover { background: var(--accent-deep); }

/* ── Mic (búsqueda por voz): botón FANTASMA dentro del pill, no un bloque de color ── */
.mic-btn {
    flex-shrink: 0; padding: 0; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: transparent; color: var(--ink-soft);
    cursor: pointer; transition: background .15s, color .15s;
    position: relative;
}
.mic-btn:hover { background: var(--accent-bg); color: var(--accent-deep); }
/* Estado escuchando: relleno acento + anillo pulsante estilo Gemini. */
.mic-btn.listening { background: var(--accent); color: #fff; }
.mic-btn.listening::before {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    animation: mic-pulse 1.1s ease-out infinite;
}
@keyframes mic-pulse {
    0%   { transform: scale(1);    opacity: .7; }
    100% { transform: scale(1.55); opacity: 0;  }
}

select, input[type=number], input[type=text] {
    font-family: inherit;
}
.field select, .field input {
    width: 100%; padding: .45rem .65rem;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--ink); font-size: .87rem;
}
.field select:focus, .field input:focus { outline: none; border-color: var(--accent); }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field > span {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-faint); font-weight: 600;
}

/* ── Quick Glance ─────────────────────────────────────────────────────────── */
.glance .svc-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem .6rem;
}
.svc {
    display: flex; align-items: center; gap: .42rem;
    font-size: .84rem; color: var(--ink-soft); padding: .14rem 0;
}
.svc .st { font-weight: 700; font-size: .82rem; width: 1em; text-align: center; flex-shrink: 0; }
.svc.yes .st { color: var(--good); }
.svc.no .st { color: var(--bad); opacity: .75; }
.svc.unknown { opacity: .55; }
.svc.unknown .st { color: var(--ink-faint); }

/* Señales (barras delgadas) */
.sigrow { display: flex; align-items: center; gap: .6rem; padding: .26rem 0; }
.sig-k { color: var(--ink-soft); font-size: .83rem; min-width: 112px; }
.sig-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--bg-inset); overflow: hidden; }
.sig-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }
.sig-fill.good { background: linear-gradient(90deg, #4d9a6f, var(--good)); }
.sig-fill.bad  { background: linear-gradient(90deg, #c9764f, var(--bad)); }
.sig-bool { font-size: .76rem; padding: .08rem .5rem; border-radius: 999px; font-weight: 600; }
.sig-bool.yes { background: var(--good-bg); color: var(--good); }
.sig-bool.no  { background: var(--bad-bg); color: var(--bad); }
.tier { font-size: .62rem; padding: .07rem .42rem; border-radius: 999px; white-space: nowrap; }
.tier.solido   { background: var(--good-bg); color: var(--good); }
.tier.moderado { background: var(--warn-bg); color: var(--warn); }
.tier.indicio  { background: var(--bg-subtle); color: var(--ink-faint); }
.tier.riesgo   { background: var(--bad-bg); color: var(--bad); }

/* Cercanías inline */
.nearby-inline {
    display: flex; flex-wrap: wrap; gap: .35rem 1rem;
    font-size: .84rem; color: var(--ink-soft);
}
.nearby-inline span { white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.nearby-inline b { color: var(--ink); font-weight: 600; }

/* Veredicto ideal/indeterminable */
.verdict-list { list-style: none; }
.verdict-list li { font-size: .85rem; padding: .15rem 0 .15rem 1.3rem; position: relative; color: var(--ink-soft); }
.verdict-list li::before { position: absolute; left: 0; font-weight: 700; }
.verdict-list.ok li::before { content: '✓'; color: var(--good); }
.verdict-list.unknown li { opacity: .75; }
.verdict-list.unknown li::before { content: '?'; color: var(--ink-faint); }

/* Veredicto de vehículo */
.veh-verdict {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .8rem; border-radius: var(--radius-sm);
    font-size: .88rem; font-weight: 600;
}
.veh-verdict .sub { font-size: .76rem; font-weight: 400; opacity: .85; }
.veh-verdict.apto        { background: var(--good-bg); color: var(--good); }
.veh-verdict.precaucion  { background: var(--warn-bg); color: var(--warn); }
.veh-verdict.no_apto     { background: var(--bad-bg);  color: var(--bad); }
.veh-verdict.desconocido { background: var(--bg-subtle); color: var(--ink-faint); }

/* ── Expandibles (nivel 3) ────────────────────────────────────────────────── */
details.x {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: .55rem;
    box-shadow: var(--shadow-soft); overflow: hidden;
}
details.x summary {
    list-style: none; cursor: pointer;
    padding: .85rem 1.15rem;
    font-size: .92rem; font-weight: 600; color: var(--ink);
    display: flex; align-items: center; gap: .55rem;
    user-select: none;
}
details.x summary::-webkit-details-marker { display: none; }
details.x summary::after {
    content: '▸'; margin-left: auto; color: var(--ink-faint);
    transition: transform .18s; font-size: .8rem;
}
details.x[open] summary::after { transform: rotate(90deg); }
details.x .x-body { padding: 0 1.15rem 1rem; font-size: .88rem; color: var(--ink-soft); }

/* KV rows dentro de expandibles */
.kv { display: flex; align-items: flex-start; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--border-soft); }
.kv:last-child { border-bottom: none; }
.kv-key { color: var(--ink-faint); font-size: .82rem; min-width: 110px; flex-shrink: 0; }
.kv-val { color: var(--ink); font-size: .87rem; flex: 1; word-break: break-word; }

/* Lo que no sabemos */
.limitations { list-style: none; }
.limitations li {
    font-size: .84rem; color: var(--ink-soft);
    padding: .26rem 0 .26rem 1.1rem; position: relative; line-height: 1.45;
}
.limitations li::before { content: '—'; position: absolute; left: 0; color: var(--warn); }
.honesty-note {
    margin-top: .7rem; padding: .55rem .8rem;
    background: var(--bg-subtle); border-radius: var(--radius-sm);
    font-size: .76rem; color: var(--ink-faint);
}

/* ── Resultados de búsqueda ───────────────────────────────────────────────── */
.assistant {
    background: var(--accent-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: var(--radius);
    padding: .95rem 1.15rem; margin-bottom: 1rem;
    font-size: .9rem; line-height: 1.55; color: var(--ink);
    white-space: pre-wrap;
}
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 0 0 1rem;
}
.chat-bubble {
    max-width: min(760px, 92%);
    padding: .78rem 1rem;
    border-radius: var(--radius);
    font-size: .92rem;
    line-height: 1.5;
    box-shadow: var(--shadow-soft);
}
.chat-bubble.user {
    align-self: flex-end;
    background: var(--ink);
    color: var(--bg);
    border-bottom-right-radius: .35rem;
}
.chat-bubble.assistant {
    align-self: flex-start;
    background: var(--bg-surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-bottom-left-radius: .35rem;
}
/* C2 · streaming: cursor parpadeante al final del texto mientras se revela. */
.chat-bubble.assistant.is-streaming::after {
    content: ''; display: inline-block; width: 2px; height: 1em;
    margin-left: 1px; vertical-align: text-bottom;
    background: var(--ink-soft); animation: gs-caret .8s step-end infinite;
}
@keyframes gs-caret { 50% { opacity: 0; } }
.chat-note {
    margin-top: .35rem;
    font-size: .78rem;
    color: var(--ink-faint);
}

/* Campilot — narración del embudo (exposición del razonamiento). El lead manda,
   el detalle (descartes) va apagado, el veredicto cierra con énfasis. */
#found-line { display: flex; flex-direction: column; gap: .15rem; }
/* Lugar pedido NO resuelto → confesión visible antes del veredicto (bug Navarra→Toledo). */
.loc-warn { display: flex; align-items: center; gap: .35rem; color: var(--warn); font-weight: 600; font-size: .88rem; margin-bottom: .25rem; }
.fn-lead { color: var(--ink); font-weight: 600; }
.fn-detail { color: var(--ink-faint); font-size: .82rem; }
.fn-verdict { color: var(--accent-deep); font-weight: 600; margin-top: .1rem; }
.fn-pref { color: var(--ink-soft); font-size: .82rem; font-style: italic; margin-top: .1rem; }
.chip.pref { background: var(--accent-bg); color: var(--accent-deep); border-color: transparent; font-weight: 600; }
.assistant strong { color: var(--accent-deep); }

/* La recomendación DOMINA: no es el item #1 de una lista, es la decisión. Borde
   acento de 2px, fondo cálido sutil, más aire y sombra grande la separan del resto. */
.result-main {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px); margin-bottom: 1.1rem;
    box-shadow: var(--shadow); cursor: pointer; overflow: hidden;
    transition: transform .12s;
}
.result-main:hover { transform: translateY(-2px); }
.result-main .rm-body { padding: 1.1rem 1.25rem 1.25rem; }
.result-main .result-name { font-size: 1.4rem; }
.result-name {
    font-family: var(--font-display); font-weight: 700; font-size: 1.08rem;
    color: var(--ink); display: flex; align-items: baseline; gap: .5rem;
}

/* Vehículo de titular: la frase más copiloto (lo que un buscador no te da). */
.veh-head {
    display: inline-flex; align-items: center; gap: .4rem;
    margin: .5rem 0 .1rem; padding: .3rem .7rem; border-radius: 999px;
    font-size: .9rem; font-weight: 600;
}
.veh-head .vh-mark { font-weight: 700; }
.veh-head.ok   { background: var(--good-bg); color: var(--good); }
.veh-head.warn { background: var(--warn-bg); color: var(--warn); }
.veh-head.no   { background: var(--bad-bg);  color: var(--bad); }
.veh-head.unk  { background: var(--bg-subtle); color: var(--ink-soft); }

/* ── Modo ruta: CTA + overlay de conducción (glance-able, alto contraste) ──── */
.btn-route {
    display: block; width: 100%; margin: 0 0 1.1rem;
    padding: .85rem 1rem; border: none; border-radius: var(--radius);
    background: var(--ink); color: var(--bg);
    font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
    cursor: pointer; box-shadow: var(--shadow-soft);
}
.btn-route:hover { background: var(--accent-deep); }
.route-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); padding: 1.5rem;
}
.route-exit {
    position: absolute; top: 1rem; right: 1rem;
    width: 48px; height: 48px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg-surface);
    color: var(--ink-soft); font-size: 1.3rem; cursor: pointer;
}
.route-card { width: 100%; max-width: 560px; text-align: center; }
.route-card .veh-head { font-size: 1.15rem; margin: 0 auto 1rem; }
.route-name {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.8rem, 7vw, 2.6rem); line-height: 1.1; color: var(--ink);
    margin-bottom: .6rem;
}
.route-sum { font-size: 1.05rem; color: var(--ink-soft); font-style: italic; margin-bottom: .5rem; }
.route-dist { font-size: 1rem; color: var(--ink-faint); margin-bottom: 1.6rem; }
.route-actions { display: flex; gap: .7rem; justify-content: center; align-items: stretch; }
.route-nav {
    flex: 1; max-width: 360px; padding: 1.1rem; border: none; border-radius: var(--radius);
    background: var(--accent); color: #fff;
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; cursor: pointer;
    box-shadow: var(--shadow);
}
.route-nav:hover { background: var(--accent-deep); }
.route-listen {
    width: 64px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-surface); font-size: 1.5rem; cursor: pointer;
}
.result-meta { font-size: .76rem; color: var(--ink-faint); }
.why-box { margin-top: .7rem; padding-top: .65rem; border-top: 1px dashed var(--border); }
.why-box .why-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-bottom: .35rem; }
.why-box ul { list-style: none; }
.why-box li { font-size: .83rem; color: var(--ink-soft); padding: .12rem 0; }
.why-box li b { font-weight: 600; }
.why-yes { color: var(--good); }
.why-unk { color: var(--ink-faint); }

/* Filas compactas (dirección B): a ancho completo para escanear de arriba a abajo. */
.alt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; margin-bottom: .9rem; }
.result-alt {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .8rem .95rem;
    cursor: pointer; box-shadow: var(--shadow-soft);
    transition: border-color .15s;
}
.result-alt:hover { border-color: var(--accent); }
.result-alt .result-name { font-size: .94rem; }

/* ── HERO (dirección C): la recomendación con peso editorial ───────────────── */
.hero-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: .55rem 0 .2rem; font-size: .9rem; }
.hero-facts .fl-rate { color: var(--warn); font-weight: 600; }
.hero-facts .fl-free { color: var(--good); font-weight: 600; }
.hero-facts .fl-price { color: var(--accent-deep); font-weight: 600; }
.hero-facts .fl-dist { color: var(--ink-soft); }
.hero-facts .fl-drive { color: var(--accent-deep); font-weight: 700; }
.hero-why .one-liner { font-size: 1.05rem; line-height: 1.6; color: var(--ink); margin: .2rem 0 0; }

/* ── FILA (texto denso: sin foto, todo el ancho para nombre+frase+servicios) ── */
.result-row {
    display: flex; gap: .85rem; align-items: center; min-width: 0;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .7rem;
    cursor: pointer; box-shadow: var(--shadow-soft); transition: border-color .15s, transform .12s;
}
.result-row:hover { border-color: var(--accent); transform: translateY(-2px); }
.result-main.is-map-focus, .result-row.is-map-focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent), var(--shadow);
}
.row-body { flex: 1; min-width: 0; }
.result-row .result-name { font-size: 1rem; }
.row-rate { color: var(--warn); font-weight: 700; font-size: .82rem; }
.row-drive { color: var(--accent-deep); font-weight: 800; font-size: .84rem; }
.row-sum .one-liner {
    font-size: .82rem; color: var(--ink-soft); margin: .12rem 0 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-sum .one-liner::before, .row-sum .one-liner::after { content: ''; }
.row-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.row-foot .svc-chips, .row-foot .lowinfo-warn { margin-top: 0; }
.row-foot .svc-chip { width: 1.45rem; height: 1.45rem; font-size: .78rem; }
.row-meta {
    flex-shrink: 0; display: flex; flex-direction: column;
    align-items: flex-end; justify-content: center; gap: .15rem; text-align: right;
}
.row-free { color: var(--good); font-weight: 600; font-size: .82rem; }
.row-price { color: var(--accent-deep); font-weight: 600; font-size: .82rem; }
.row-dist { color: var(--ink-soft); font-size: .8rem; }
.row-chev { color: var(--ink-faint); font-size: 1.35rem; line-height: 1; margin-top: .1rem; }
.veh-mini { font-size: .72rem; font-weight: 600; padding: .1rem .42rem; border-radius: 999px; white-space: nowrap; }
.veh-mini.ok { background: var(--good-bg); color: var(--good); }
.veh-mini.warn { background: var(--warn-bg); color: var(--warn); }
.veh-mini.no { background: var(--bad-bg); color: var(--bad); }
.veh-mini.unk { background: var(--bg-subtle); color: var(--ink-soft); }

.unrated-list { list-style: none; margin-bottom: 1rem; }
.unrated-list li {
    padding: .45rem .2rem; font-size: .86rem; color: var(--ink-soft);
    border-bottom: 1px dashed var(--border-soft); cursor: pointer;
    display: flex; justify-content: space-between; gap: .6rem;
}
.unrated-list li:hover { color: var(--ink); }
.unrated-list .dist { color: var(--ink-faint); font-size: .78rem; white-space: nowrap; }

.num-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 19px; height: 19px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700;
    flex-shrink: 0; align-self: center;
}
.num-badge.gray { background: var(--ink-faint); }

/* ── Chat ─────────────────────────────────────────────────────────────────── */
.chat-suggestions { display: flex; flex-direction: column; gap: .15rem; margin-top: .5rem; }
.chat-suggestions button {
    background: none; border: none; text-align: left; cursor: pointer;
    font-size: .85rem; color: var(--accent-deep); padding: .22rem 0;
}
.chat-suggestions button:hover { text-decoration: underline; }
.chat-answer {
    margin-top: .7rem; padding: .75rem .95rem;
    background: var(--accent-bg); border-radius: var(--radius-sm);
    font-size: .89rem; line-height: 1.5; color: var(--ink);
    animation: fadeUp .3s ease;
}

/* ── Insights de memoria ──────────────────────────────────────────────────── */
.insights { font-size: .85rem; color: var(--ink-soft); }
.insights .t { font-weight: 600; color: var(--ink-faint); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .3rem; }
.insights div::before { content: '✓ '; color: var(--good); }
.insights .t::before { content: ''; }

/* ── Skeleton / estados ───────────────────────────────────────────────────── */
.empty { color: var(--ink-faint); font-size: .86rem; font-style: italic; }
.skeleton {
    background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-inset) 50%, var(--bg-subtle) 75%);
    background-size: 200% 100%; animation: shimmer 1.3s infinite;
    border-radius: var(--radius-sm); min-height: 1em;
}
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .35s ease; }

/* ── Modal / sheet (perfil + vehículo) ────────────────────────────────────── */
.sheet-backdrop {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(20, 18, 12, .45);
    display: none; align-items: flex-end; justify-content: center;
}
.sheet-backdrop.show { display: flex; }
.sheet {
    width: 100%; max-width: 460px;
    background: var(--bg-surface);
    border-radius: 18px 18px 0 0;
    padding: 1.2rem 1.3rem calc(1.4rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .25);
    animation: sheetUp .25s ease;
    max-height: 86vh; overflow-y: auto;
}
@media (min-width: 768px) {
    .sheet-backdrop { align-items: center; }
    .sheet { border-radius: 18px; }
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.sheet h3 { font-size: 1.05rem; margin-bottom: .9rem; display: flex; align-items: center; }
.sheet .close-x {
    margin-left: auto; background: none; border: none; cursor: pointer;
    font-size: 1.1rem; color: var(--ink-faint); padding: .2rem .4rem;
}
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.sheet-row { margin-bottom: .8rem; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
#gs-toast {
    position: fixed; bottom: calc(var(--nav-h) + 1rem); left: 50%;
    transform: translate(-50%, 10px); z-index: 1200;
    background: var(--ink); color: var(--bg);
    border-radius: 999px; padding: .5rem 1.1rem;
    font-size: .84rem; opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s;
    white-space: nowrap;
}
#gs-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Cabecera de ficha PLANA (sin foto: allowlist legal) ───────────────────────
   Antes: cover generativa de 210px con el título superpuesto simulando una
   imagen. Su contenido (tipo/país/gratis) ya vive en los chips de abajo. */
.spot-plain-hero { display: flex; align-items: center; gap: .7rem; margin: 0 0 .5rem; }
.spot-plain-hero .back-link {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-subtle); color: var(--ink); font-size: 1.2rem;
    text-decoration: none;
}
.spot-plain-hero .back-link:hover { text-decoration: none; background: var(--bg-inset); }
.spot-plain-hero h1 {
    font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
    line-height: 1.2; color: var(--ink);
}

/* ── Hero (ficha) ─────────────────────────────────────────────────────────── */
.spot-hero { padding: .4rem 0 .9rem; }
.spot-hero h1 {
    font-size: 1.55rem; font-weight: 700; letter-spacing: -.015em;
    line-height: 1.2; color: var(--ink);
}
.spot-hero .hero-ctas { display: flex; gap: .55rem; margin-top: .85rem; }

/* ── Home hero ────────────────────────────────────────────────────────────── */
.home-hero { padding: 1.4rem .2rem 1.2rem; }
.home-greet { font-size: .85rem; color: var(--ink-faint); font-weight: 500; margin-bottom: .35rem; }
.home-hero h1 {
    font-size: 2.05rem; font-weight: 700; letter-spacing: -.025em;
    line-height: 1.12; margin-bottom: 1.2rem; color: var(--ink);
}
.home-hero h1 .accent { color: var(--accent); }
@media (min-width: 768px) { .home-hero h1 { font-size: 2.4rem; } }
/* Ubicación minimalista en el header (antes: fila entera bajo el título). */
.loc-pill .ic { color: var(--teal); flex-shrink: 0; }
.loc-pill span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Mapa embebido ────────────────────────────────────────────────────────── */
.map-box { height: 240px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }

/* ── Divider con texto ────────────────────────────────────────────────────── */
.divider {
    display: flex; align-items: center; gap: .7rem;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-faint); margin: 1.2rem 0 .6rem; font-weight: 600;
}
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }

/* ── Pins de mapa (compartido por map.html y el mapa de resultados de index.html) ──
   El color del badge codifica precio (gratis/pago); el glifo blanco, el tipo de spot. */
.pin-badge {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,.35);
    color: #fff;   /* glifos SPOT_GLYPH ahora en currentColor (v3): aquí blancos */
}
.pin-badge.free { background: var(--good); }
.pin-badge.paid { background: var(--accent); }
.pin-badge svg { display: block; }

/* Portadas generativas (GS.spotCover) — RETIRADAS (rediseño chatbot, quitar
   foto): su único contenido real (rating, gratis/precio, tipo) ya vive en
   spotFactsLine/row-meta/chips; la decoración no aportaba dato, solo espacio. */

/* Popups de Leaflet con el tema de la app. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: var(--bg-surface); color: var(--ink); box-shadow: var(--shadow);
}
.leaflet-popup-content { margin: .8rem .95rem; font-family: var(--font-body); font-size: .84rem; }
.leaflet-popup-content a { color: var(--accent-deep); }
.pp-name { font-weight: 700; font-family: var(--font-display); }
.pp-frase { font-style: italic; color: var(--ink-soft); margin: .25rem 0; }
.pp-veh { margin: .3rem 0; }

/* Mapa de resultados (index.html): muestra SOLO los spots de la búsqueda. */
.results-map {
    height: min(58vh, 520px); min-height: 360px;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--border); margin: 1rem 0; box-shadow: var(--shadow-soft);
}
/* R0 — botón "ver ruta completa / los spots" sobre el mapa de resultados. */
.rmap-fit-btn {
    background: var(--bg-surface); color: var(--ink);
    border: 1px solid var(--border); border-radius: 999px;
    padding: .35rem .7rem; font-size: .78rem; font-weight: 600;
    font-family: inherit; cursor: pointer; box-shadow: var(--shadow-soft);
}
.rmap-fit-btn:hover { border-color: var(--accent); color: var(--accent-deep); }
/* La recomendación principal destaca con un anillo de acento (marcador v2). */
.rmap-main .gm .gm-body { outline: 3px solid var(--accent); outline-offset: 2px; }
.rpin-wrap { position: relative; width: 32px; height: 34px; }
.rpin-wrap .gm { position: absolute; left: 1px; top: 2px; }
/* Nº de correspondencia tarjeta↔mapa: esquina INFERIOR-izquierda, para no chocar
   con los badges de estado del marcador v2 (esquina superior-derecha). */
.rpin-wrap > span {
    position: absolute; left: -3px; bottom: -1px; z-index: 4;
    width: 16px; height: 16px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ink); color: var(--bg); border: 2px solid var(--bg);
    font-size: .6rem; font-weight: 800; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* P2/P3 · Editar noche (alternativas + swap contrastivo) */
.route-plan .rp-change { background: none; border: none; color: var(--accent-deep); cursor: pointer; font-size: .76rem; padding: .15rem 0 0; text-decoration: underline; }
.route-plan .rp-alts { margin-top: .35rem; }
.route-plan .rp-alts[data-open="1"] { padding: .3rem 0; }
.route-plan .rp-alt { font-size: .85rem; padding: .35rem .5rem; border-radius: var(--radius-sm); cursor: pointer; }
.route-plan .rp-alt:hover { background: var(--bg-subtle); }

/* ── Sprint 3 · Confianza: conflicto, primera mano, reporte 1-tap ──────────── */
.svc .svc-conf { margin-left: .25rem; color: var(--warn, #a07417); font-weight: 700; }
.svc .svc-fr { margin-left: .25rem; }
.svc-note { font-size: .74rem; color: var(--ink-faint); margin: .45rem 0 0; line-height: 1.4; }
.svc-note.fr { color: var(--warn, #a07417); }
.fp-badge {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem;
    font-size: .78rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px;
}
.fp-badge.ok { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.fp-badge.warn { background: color-mix(in srgb, var(--warn, #a07417) 14%, transparent); color: var(--warn, #a07417); }
.fp-badge.bad { background: color-mix(in srgb, var(--bad, #c0504d) 14%, transparent); color: var(--bad, #c0504d); }
.fr-sheet {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,.35); display: flex; align-items: flex-end; justify-content: center;
}
.fr-sheet .fr-card {
    position: relative; width: 100%; max-width: 480px; margin: 0;
    border-radius: 16px 16px 0 0; padding: 1.1rem 1.2rem 1.4rem;
    animation: fr-up .22s ease-out;
}
@keyframes fr-up { from { transform: translateY(40px); opacity: 0; } }
.fr-sheet h3 { font-size: .95rem; margin-bottom: .8rem; }
.fr-sheet .fr-btns { display: flex; flex-direction: column; gap: .5rem; }
.fr-sheet .fr-btns .btn { justify-content: flex-start; text-align: left; }
.fr-sheet .fr-close {
    position: absolute; top: .7rem; right: .8rem; border: 0; background: transparent;
    color: var(--ink-faint); font-size: 1rem; cursor: pointer;
}

/* ── F3/F4 · Fidelidad de criterios ────────────────────────────────────────── */
/* Contradicción criterio↔datos: pediste X y aquí escasea según el propio spot. */
.mismatch-warn {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 600; color: var(--warn);
    background: var(--warn-bg); border-radius: 999px; padding: .15rem .6rem;
    margin-top: .35rem;
}
/* Criterio pedido SIN filtro disponible (confesión): chip gris punteado. */
.convo-bar .cv-chip.cv-un {
    background: transparent; color: var(--ink-faint);
    border: 1px dashed var(--border); cursor: help;
}

/* ── F2 · Estado de traducción de LA FRASE ─────────────────────────────────── */
.sum-pending-chip {
    display: inline-block; margin-left: .35rem; vertical-align: middle;
    font-size: .64rem; font-weight: 600; color: var(--ink-faint);
    background: var(--bg-subtle); border-radius: 999px; padding: .1rem .5rem;
    animation: sum-pulse 1.2s ease-in-out infinite;
}
@keyframes sum-pulse { 50% { opacity: .45; } }
.sum-pending-chip.fail { animation: none; opacity: .7; cursor: help; }

/* ── F14 · Indicador de turno del chat (3 puntos animados) ─────────────────── */
.chat-typing { display: inline-flex; gap: .3rem; align-items: center; min-height: 1.2em; }
.chat-typing span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
    animation: chat-dot 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .18s; }
.chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes chat-dot { 30% { transform: translateY(-3px); opacity: 1; } 60% { opacity: .4; } }

/* ── Modo Ruta v2 · R1 — Trip Composer ──────────────────────────────────────── */
.tc-head { margin-bottom: 1rem; }
.tc-themes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; align-items: center; }
.tc-theme {
    font-size: .74rem; padding: .18rem .6rem; border-radius: 999px;
    background: var(--teal-bg); color: var(--teal); font-weight: 600;
}
.tc-flexbtn {
    font-size: .76rem; padding: .25rem .7rem; border-radius: 999px;
    background: transparent; border: 1px dashed var(--border); color: var(--ink-soft);
    cursor: pointer; font-family: inherit; margin-left: auto;
}
.tc-flexbtn:hover { border-color: var(--accent); color: var(--accent-deep); }
.tc-nights { list-style: none; padding: 0; margin: 0; }
.tc-night {
    position: relative; padding: .9rem 0 1.1rem 1.2rem;
    border-left: 2px solid var(--border);
}
.tc-night::before {
    content: ''; position: absolute; left: -7px; top: 1.15rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--bg);
}
.tc-nhead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.tc-nhead .rp-day { font-weight: 700; font-family: var(--font-display); }
.tc-nhead .rp-km { font-size: .78rem; color: var(--ink-faint); }
.tc-drive { font-size: .78rem; color: var(--ink-soft); }
.tc-region { font-size: .74rem; color: var(--teal); font-weight: 600; }
.tc-chips { margin-bottom: .5rem; gap: .35rem; }
.tc-card { margin-bottom: .4rem; }
.tc-thin { font-size: .74rem; color: var(--ink-faint); margin: .3rem 0; }
/* P2 · noche de servicio (autonomía): agua/vaciado o batería toca esta noche. */
.tc-night.is-svc::before { background: var(--teal); }
.tc-svc { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--teal); margin: .3rem 0; }
.tc-svc.warn { color: var(--warn); }
.tc-actions { margin-top: 1rem; text-align: center; }
.rp-arrival .rp-day { color: var(--accent); }

/* ── R2 · Modo Plan/Viaje + reanudar viaje ──────────────────────────────────── */
.mode-pill {
    display: inline-flex; gap: .2rem; padding: .25rem; margin-bottom: .8rem;
    background: var(--bg-subtle); border-radius: 999px; border: 1px solid var(--border);
}
.mode-pill button {
    border: none; background: transparent; cursor: pointer; font-family: inherit;
    font-size: .8rem; font-weight: 600; color: var(--ink-faint);
    padding: .3rem .8rem; border-radius: 999px; transition: background .15s, color .15s;
}
.mode-pill button.on { background: var(--bg-surface); color: var(--ink); box-shadow: var(--shadow-soft); }
.trip-resume {
    display: flex; align-items: center; gap: .7rem; position: relative;
    background: var(--pine); color: #fff;
    border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1rem;
    box-shadow: var(--shadow-soft);
}
.trip-resume .tr-body { flex: 1; min-width: 0; }
.trip-resume .tr-kicker { font-size: .72rem; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.trip-resume .tr-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin-top: .1rem; }
.trip-resume .tr-dist { opacity: .8; font-weight: 400; font-size: .85rem; }
.trip-resume .tr-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.trip-resume .tr-actions .btn.sm { background: rgba(255,255,255,.16); color: #fff; border: none; }
.trip-resume .tr-actions .btn.sm.primary { background: #fff; color: var(--pine); }
.trip-resume .tr-x {
    position: absolute; top: .4rem; right: .5rem; border: none; background: transparent;
    color: rgba(255,255,255,.6); font-size: .8rem; cursor: pointer;
}

/* ── Marcador v3 "el pin que decide" (estilo park4night, 2026-07-09) ──────────
   Cuerpo BLANCO (legible sobre cualquier tile, claro u oscuro) + borde y glifo en
   el COLOR DE CATEGORÍA — el lenguaje visual que el camper ya conoce de p4n:
   azul=área AC · pizarra=parking · violeta=camping · verde=naturaleza ·
   oliva=acampada libre · naranja=gasolinera. La IDONEIDAD de vehículo pasa de ser
   el color a ser un ESTADO: gris apagado = no cabes, borde ámbar = precaución.  */
.gm { position: relative; width: 30px; height: 30px; }
.gm .gm-body {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 50% 50% 50% 4px; transform: rotate(45deg);   /* gota: pico abajo-izq */
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
    background: #fff; border: 2.5px solid currentColor;
}
.gm .gm-body svg { width: 15px; height: 15px; transform: rotate(-45deg); }
.gm .gm-ring {
    position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid transparent; pointer-events: none;
}
/* Anillo de EVIDENCIA: del punteado tenue (indicio) al continuo (sólido). */
.gm[data-ev="1"] .gm-ring { border-style: dotted; border-color: color-mix(in srgb, var(--ink-faint) 55%, transparent); }
.gm[data-ev="2"] .gm-ring { border-style: dashed; border-color: color-mix(in srgb, var(--ink-soft) 60%, transparent); }
.gm[data-ev="3"] .gm-ring { border-style: solid; border-color: color-mix(in srgb, var(--ink-soft) 70%, transparent); }
.gm[data-ev="4"] .gm-ring { border-style: solid; border-width: 3px; inset: -4px; border-color: var(--ink-soft); }
/* COLOR = CATEGORÍA (borde + glifo vía currentColor). Paleta fija (no var(--)): el
   pin vive sobre tiles del mapa, no sobre el fondo de la app — no debe temar. */
.gm-cat-area_ac    .gm-body { color: #2e7dbd; }
.gm-cat-parking    .gm-body { color: #64748b; }
.gm-cat-camping    .gm-body { color: #8a56c9; }
.gm-cat-naturaleza .gm-body { color: #2e9e63; }
.gm-cat-wild       .gm-body { color: #6b8e23; }
.gm-cat-gasolinera .gm-body { color: #d97706; }
.gm-cat-otro       .gm-body { color: #9aa3a0; }
/* IDONEIDAD como estado (por ENCIMA de la categoría). */
.gm-no   .gm-body { color: #9aa3a0 !important; opacity: .55; filter: grayscale(60%); }
.gm-warn .gm-body { border-color: var(--warn); }
.gm.is-main { z-index: 500; }
.gm.is-main .gm-body { box-shadow: 0 0 0 3px var(--accent-bg), 0 3px 8px rgba(0,0,0,.35); }
.gm.is-sel .gm-body { transform: rotate(45deg) scale(1.22); }
.gm.is-sel { z-index: 600; }
/* Badges de estado (esquina superior derecha, apiladas). */
.gm-badges { position: absolute; top: -6px; right: -6px; display: flex; gap: 1px; z-index: 3; }
.gm-b {
    font-style: normal; font-size: .58rem; line-height: 1; font-weight: 700;
    min-width: 14px; height: 14px; padding: 0 2px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.gm-b-ok { background: var(--good); color: #fff; }
.gm-b-closed { background: var(--bad); color: #fff; }
.gm-b-night { background: var(--pine); color: #fff; }
.gm-b-main { background: var(--accent); color: #fff; }
/* Pill estilo Airbnb: el dato decisivo como texto (mapa de resultados / zoom medio). */
.gm-pill {
    position: relative; display: inline-flex; align-items: center; gap: .25rem;
    padding: .2rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 700;
    background: var(--bg-surface); color: var(--ink);
    border: 1.5px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,.22);
    white-space: nowrap; transition: transform .12s;
}
.gm-pill.gm-ok  { border-color: var(--good); color: var(--good); }
.gm-pill.gm-warn { border-color: var(--warn); color: var(--warn); }
.gm-pill.gm-no  { opacity: .6; }
.gm-pill.gm-free { color: var(--teal); border-color: var(--teal); }
.gm-pill.is-main { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.gm-pill.is-sel { transform: scale(1.12); }
.gm-pill .gm-badges { position: static; margin-left: .1rem; }

/* ── R4 · Edición conversacional del plan ───────────────────────────────────── */
.tc-convo { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--border); }
.tc-convobar { margin-bottom: .3rem; }
.tc-edit-msg { font-size: .78rem; color: var(--ink-faint); min-height: 1rem; }

/* ══ C0 · Sistema de iconos SVG (heredan currentColor; sustituyen al emoji) ══ */
.ic { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.moodchip .ic, .sig-badge .ic, .veh-head .ic, .veh-mini .ic { vertical-align: middle; }
.sig-badge .ic { color: inherit; }
/* Servicio en la ficha: el mark ✓/✗/· ahora es SVG con color por estado. */
.svc .st { display: inline-flex; align-items: center; justify-content: center; width: 1.2em; }
.svc.yes .st { color: var(--good); }
.svc.no .st { color: var(--bad); }
.svc.unknown .st { color: var(--ink-faint); }
.svc .st .ic { vertical-align: 0; }
/* Veredicto de vehículo (ficha): icono grande a la izquierda. */
.veh-verdict .vv-ico { display: inline-flex; align-items: center; }
/* Veh head / mini: el icono de vehículo + la marca de veredicto. */
.veh-head .vh-mark, .veh-mini { display: inline-flex; align-items: center; gap: .15rem; }
.veh-mini .ic { vertical-align: 0; }
/* Marcador v2: los badges ahora contienen SVG de 10px. */
.gm-b .ic { display: block; vertical-align: 0; }
.gm-pill .ic { vertical-align: -0.12em; }
/* Chips de servicio de tarjeta: el SVG hereda el tono del texto del chip. */
.svc-chip .ic { vertical-align: 0; color: var(--ink-soft); }

/* ══ C1 · Layout de conversación (chatbot puro) ═══════════════════════════════ */
.chat-page { min-height: 100vh; }
.thread { padding-bottom: 1rem; }

/* Mensaje = unidad. Asistente con avatar-chispa a la izquierda; usuario a la derecha. */
.msg { display: flex; gap: .55rem; margin: 0 0 1.1rem; }
.msg.user { justify-content: flex-end; }
.msg-avatar {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--teal-bg); color: var(--teal); margin-top: .15rem;
}
.msg-body { flex: 1; min-width: 0; }
/* El verdicto (found-line) es la frase-lead del mensaje: answer-first. */
.msg-body #found-line { margin-bottom: .7rem; }
/* C1b — #assistant (narración fase-2) cierra el mensaje, DEBAJO de las tarjetas:
   se integra como texto plano, sin recuadro rosa aparte (no es una burbuja nueva). */
.msg-body .assistant {
    background: transparent; border: none; padding: .9rem 0 0;
    margin-top: .9rem; border-top: 1px solid var(--border-soft);
    color: var(--ink); font-size: .95rem; line-height: 1.55; white-space: pre-wrap;
}
.msg-body .assistant.is-streaming::after {
    content: ''; display: inline-block; width: 2px; height: 1em;
    margin-left: 1px; vertical-align: text-bottom;
    background: var(--ink-soft); animation: gs-caret .8s step-end infinite;
}

/* Composer fijo abajo (estilo mensajería), por encima de la nav flotante. */
.composer {
    position: fixed; left: 0; right: 0; z-index: 800;
    /* Medido en preview: la nav flotante (.gs-nav) renderiza ~7px más alta que
       --nav-h (74px) por su propio padding+tipografía. -10px aquí hacía que el
       composer se solapara con la nav ~17px (búsqueda/mapa/perfil "aplastados"
       bajo el buscador). +12px da margen real de sobra, medido contra el rect
       real de .gs-nav, no solo la variable. */
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
    padding: .55rem 1rem .6rem;
    background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.composer .searchbar { max-width: 720px; margin: 0 auto; }
@media (min-width: 768px) {
    .composer { bottom: calc(env(safe-area-inset-bottom) + .6rem); }
}
/* En conversación, el hero (estado vacío) no ocupa; el hilo respira. */
body.in-convo .home-hero { display: none; }

/* C0/C1 · iconos en mode-pill del estado vacío. */
.mode-pill button { display: inline-flex; align-items: center; gap: .3rem; }
.mode-pill button .ic { vertical-align: middle; }

/* C2 · voz: transcripción editable antes de enviar. Mientras el auto-envío
   está pendiente (tras el resultado final del reconocimiento), un borde sutil
   avisa de que va a enviarse — escribir o tocar cancela el envío automático. */
.searchbar.voice-pending { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-bg); }