/**
 * ============================================================
 * MY TRIP — Estilos (fiel a los 18 diseños de Fany, base 390px)
 * ============================================================
 *
 * MULTI-MARCA: el acento (--acento) y el nombre/logo vienen de la reserva
 * (marca.color_acento); app.js lo inyecta con setProperty en :root.
 * Los tokens de estado (verde/ámbar/rojo) son FIJOS AA — no retocar.
 */
:root {
    /* Tema base "My Trip" */
    --fondo: #F7F7F5;
    --tinta: #0E1B16;         /* casi-negro verdoso de los botones pill */
    --muted: #5B6663;
    --blanco: #FFFFFF;
    --borde: #E7E9E7;
    --acento: #0F7A5C;        /* esmeralda — TEMABLE por marca */
    --acento-suave: #E7F3EE;
    --dorado: #B9821F;        /* avatar chofer / estrellas */
    --dorado-suave: #F7EDD8;

    /* Tokens de ESTADO fijos (contraste AA verificado) — NO retocar */
    --ok: #0F7A5C;
    --ok-suave: #E7F3EE;
    --ambar: #B45309;
    --ambar-suave: #FFF6E4;
    --rojo: #B91C1C;
    --rojo-suave: #FDECEC;

    --radius: 20px;
    --radius-pill: 28px;
    --sombra: 0 8px 28px rgba(14, 27, 22, .08);
    --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: var(--fondo); color: var(--tinta);
    font-size: 16px; line-height: 1.45; min-height: 100vh;
}
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--tinta); }
a { color: var(--acento); }
[hidden] { display: none !important; }

/* ---------- Utilidades ---------- */
.spinner {
    width: 46px; height: 46px; border-radius: 50%;
    border: 4px solid #E3E7E4; border-top-color: var(--acento);
    animation: girar .9s linear infinite; margin: 28px auto;
}
@keyframes girar { to { transform: rotate(360deg); } }
.cargando-inicial { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- Header global ---------- */
.mt-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; background: var(--blanco);
    position: sticky; top: 0; z-index: 40;
}
.mt-logo { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 1.02rem; }
.mt-logo .gema { color: var(--acento); font-size: .8rem; }
.mt-logo .app { color: var(--muted); font-weight: 500; font-size: .9rem; }
.lang-switch {
    display: inline-flex; background: #EEF0EE; border-radius: 999px; padding: 3px;
}
.lang-switch button {
    min-width: 42px; min-height: 30px; border: 0; border-radius: 999px;
    background: transparent; color: var(--muted); font-weight: 700; font-size: .82rem;
}
.lang-switch button.activa { background: var(--tinta); color: #fff; }
/* Header de subpágina (volver + título) */
.sub-header {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    background: var(--blanco); position: sticky; top: 0; z-index: 40;
}
.sub-header h1 { font-size: 1.15rem; flex: 1; }
.btn-volver {
    width: 44px; height: 44px; min-height: 44px; border-radius: 50%; flex-shrink: 0;
    background: #EEF0EE; border: 0; display: inline-flex;
    align-items: center; justify-content: center; color: var(--tinta);
}

.mt-main { padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto; }

/* ---------- Botones ---------- */
.btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 54px; border-radius: var(--radius-pill);
    font-weight: 700; font-size: 1.02rem; border: 0; padding: 0 22px;
}
.btn-tinta { background: var(--tinta); color: #fff; box-shadow: var(--sombra); }
.btn-blanco { background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra); }
.btn-acento { background: var(--acento); color: #fff; box-shadow: var(--sombra); }
.btn-rojo-outline { background: var(--blanco); color: var(--rojo); border: 1.5px solid var(--rojo); }
.btn:disabled { opacity: .55; cursor: default; }
.btn .btn-ico {
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16);
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
}
.btn-blanco .btn-ico { background: #EEF0EE; }

/* ---------- Cards ---------- */
.card { background: var(--blanco); border-radius: var(--radius); box-shadow: var(--sombra); }

/* ---------- 01 · Acceso ---------- */
.acceso-wrap { padding: 46px 24px; max-width: 420px; margin: 0 auto; text-align: center; }
.acceso-tile {
    width: 72px; height: 72px; border-radius: 22px; background: var(--tinta);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
}
.acceso-wrap h1 { font-size: 1.7rem; margin-bottom: 10px; }
.acceso-sub { color: var(--muted); margin-bottom: 26px; }
.campo-acceso { position: relative; margin-bottom: 14px; }
.campo-acceso .ico {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: var(--muted); display: inline-flex;
}
.campo-acceso input {
    width: 100%; min-height: 56px; border: 1.5px solid var(--borde);
    border-radius: var(--radius-pill); background: var(--blanco);
    padding: 0 18px 0 48px; font-size: 1rem;
}
.campo-acceso input:focus { outline: none; border-color: var(--acento); }
.campo-acceso input.codigo { font-family: var(--mono); font-weight: 700; letter-spacing: 1px; }
.acceso-hint { color: var(--muted); font-size: .88rem; margin-top: 20px; }
.error-form {
    background: var(--rojo-suave); color: var(--rojo); border-radius: 14px;
    padding: 12px 14px; font-size: .9rem; font-weight: 600; margin-bottom: 14px; text-align: left;
}
.slot-turnstile { margin: 6px 0 12px; min-height: 0; }
.hint-instalar {
    margin-top: 22px; padding: 12px 14px; border-radius: 14px;
    background: var(--acento-suave); color: #14532D; font-size: .9rem; line-height: 1.5;
}
.btn-hint-instalar {
    display: inline-block; margin-left: 8px; min-height: 40px; padding: 0 18px;
    font-size: .9rem; font-weight: 700; color: #fff; background: var(--tinta);
    border: 0; border-radius: 999px;
}

/* ---------- 01b · Verificando / 10b / 13 (pantallas centradas) ---------- */
.centrada { padding: 70px 28px; max-width: 420px; margin: 0 auto; text-align: center; }
.centrada .icono-tile {
    width: 88px; height: 88px; border-radius: 26px; display: inline-flex;
    align-items: center; justify-content: center; margin-bottom: 26px; font-size: 2rem;
}
.icono-tile.ok { background: var(--ok-suave); color: var(--ok); }
.icono-tile.warn { background: var(--ambar-suave); color: var(--ambar); }
.centrada h1 { font-size: 1.5rem; margin-bottom: 12px; }
.centrada .sub { color: var(--muted); margin-bottom: 26px; }
.centrada .sub b, .centrada .sub .mono { font-family: var(--mono); color: var(--tinta); }
.badge-seguro {
    display: inline-flex; align-items: center; gap: 8px; background: var(--ok-suave);
    color: var(--ok); font-weight: 700; font-size: .9rem; border-radius: 12px; padding: 12px 16px;
}
.centrada .btn { margin-bottom: 12px; }
.nota-chica { color: var(--muted); font-size: .88rem; }

/* ---------- 02 · Mi viaje (hub) ---------- */
.hub-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.hub-head h1 { font-size: 1.5rem; }
.hub-head .codigo { color: var(--muted); font-size: .9rem; }
.hub-head .codigo b { font-family: var(--mono); color: var(--tinta); }
.badge-estado {
    display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 800;
    letter-spacing: .6px; border-radius: 999px; padding: 7px 13px; white-space: nowrap;
}
.badge-estado .punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-estado.ok { background: var(--ok-suave); color: var(--ok); }
.badge-estado.warn { background: var(--ambar-suave); color: var(--ambar); }
.badge-estado.rojo { background: var(--rojo-suave); color: var(--rojo); }
.card-pickup { padding: 18px; margin-bottom: 14px; }
.card-pickup .fila { display: flex; justify-content: space-between; gap: 12px; }
.card-pickup small { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .8px; }
.card-pickup .cuenta { font-size: 2rem; font-weight: 900; line-height: 1.1; }
.card-pickup .fecha { text-align: right; font-weight: 700; }
.card-pickup .ruta { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; font-size: .98rem; }
.card-pickup .meta { color: var(--muted); font-size: .88rem; margin-top: 6px; }
.banner-vuelo {
    display: flex; gap: 10px; align-items: flex-start; background: var(--ok-suave);
    color: #14532D; border-radius: 14px; padding: 13px 15px; font-size: .92rem;
    font-weight: 600; margin-bottom: 16px;
}
.banner-vuelo.delay { background: var(--ambar-suave); color: var(--ambar); }
.chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.chip {
    background: var(--blanco); border: 0; border-radius: 16px; box-shadow: var(--sombra);
    padding: 13px 4px 11px; display: flex; flex-direction: column; align-items: center; gap: 7px;
    min-height: 74px; color: var(--tinta);
}
.chip span { font-size: .74rem; font-weight: 600; color: var(--muted); }
.timeline-card { padding: 18px; }
.timeline-card small { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .8px; }
.tl { list-style: none; margin-top: 14px; }
.tl li { display: flex; gap: 14px; position: relative; padding-bottom: 22px; }
.tl li:last-child { padding-bottom: 0; }
.tl .nodo {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--blanco); border: 2px solid var(--borde); color: #fff;
}
.tl li.hecho .nodo { background: var(--ok); border-color: var(--ok); }
.tl li.actual .nodo { border-color: var(--ok); }
.tl li.actual .nodo::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.tl li:not(:last-child)::before {
    content: ''; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: var(--borde);
}
.tl li.hecho:not(:last-child)::before { background: var(--ok); }
.tl b { font-size: .98rem; }
.tl .sub { color: var(--muted); font-size: .86rem; }

/* ---------- 12 · Sin chofer ---------- */
.sinchofer { padding: 34px 22px; text-align: center; margin-bottom: 16px; }
.sinchofer .tile {
    width: 70px; height: 70px; border-radius: 50%; background: #F0F2F0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); margin-bottom: 16px;
}
.sinchofer h2 { font-size: 1.15rem; margin-bottom: 8px; }
.sinchofer p { color: var(--muted); font-size: .92rem; }

/* ---------- 03 · Mapa vivo ---------- */
.mapa-wrap { position: fixed; inset: 0; z-index: 50; background: var(--fondo); }
#mapa-vivo { position: absolute; inset: 0; }
.mapa-eta {
    position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 14px; z-index: 500;
    background: var(--blanco); border-radius: 999px; padding: 11px 16px;
    display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem;
    box-shadow: var(--sombra);
}
.mapa-eta .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.mapa-eta b { color: var(--ok); }
.mapa-share, .mapa-cerrar {
    position: absolute; z-index: 500; width: 46px; height: 46px; border-radius: 50%;
    background: var(--blanco); border: 0; box-shadow: var(--sombra);
    display: inline-flex; align-items: center; justify-content: center; color: var(--tinta);
}
.mapa-share { top: calc(14px + env(safe-area-inset-top)); right: 14px; }
.mapa-cerrar { top: calc(70px + env(safe-area-inset-top)); right: 14px; }
.veh-marcador {
    width: 44px; height: 44px; border-radius: 50%; background: var(--acento);
    border: 3px solid #fff; box-shadow: 0 4px 14px rgba(14,27,22,.35);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s linear;
}
.pin-punto {
    width: 14px; height: 14px; border-radius: 50%; background: var(--tinta); border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(14,27,22,.3);
}
.pin-label {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--tinta); color: #fff; font-size: .72rem; font-weight: 800;
    letter-spacing: .5px; padding: 7px 11px; border-radius: 10px; white-space: nowrap;
}
.sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 600;
    background: var(--blanco); border-radius: 26px 26px 0 0; box-shadow: 0 -10px 34px rgba(14,27,22,.14);
    padding: 12px 18px calc(20px + env(safe-area-inset-bottom));
}
.sheet .asa { width: 44px; height: 5px; border-radius: 999px; background: var(--borde); margin: 0 auto 14px; }
.sheet-chofer { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.avatar-chofer {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #C89B3C, #96701D); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.3rem;
}
.sheet-chofer .nombre { font-size: 1.12rem; font-weight: 800; line-height: 1.2; }
.sheet-chofer .rating { color: var(--muted); font-size: .86rem; }
.sheet-chofer .rating .estrella { color: var(--dorado); }
.sheet-veh { text-align: right; margin-left: auto; }
.sheet-veh .modelo { color: var(--muted); font-size: .8rem; }
.placa {
    font-family: var(--mono); font-weight: 800; letter-spacing: 2px; font-size: .9rem;
    background: var(--tinta); color: #fff; border-radius: 10px; padding: 7px 11px;
    display: inline-block; margin-top: 4px; white-space: nowrap;
}
.sheet-letrero {
    display: flex; align-items: center; gap: 9px; background: var(--acento-suave);
    border-radius: 12px; padding: 12px 14px; font-size: .9rem; margin-bottom: 14px;
}
.sheet-letrero b { color: var(--acento); letter-spacing: .4px; }
.sheet-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-soporte {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 52px; border-radius: var(--radius-pill); border: 1.5px solid var(--borde);
    background: var(--blanco); font-weight: 700; font-size: .98rem; color: var(--tinta);
}
.btn-soporte .tag {
    font-size: .62rem; font-weight: 800; letter-spacing: .5px; color: var(--ok);
    background: var(--ok-suave); border-radius: 999px; padding: 3px 8px;
}

/* ---------- 04 · Editar ---------- */
.banner-ok {
    display: flex; gap: 9px; align-items: center; background: var(--ok-suave); color: #14532D;
    border-radius: 12px; padding: 11px 14px; font-size: .9rem; font-weight: 600; margin-bottom: 16px;
}
.edit-row {
    display: flex; align-items: center; gap: 13px; background: var(--blanco);
    border-radius: 16px; box-shadow: var(--sombra); padding: 14px 16px; margin-bottom: 11px;
    border: 0; width: 100%; text-align: left; color: var(--tinta);
}
.edit-row .ico { color: var(--muted); flex-shrink: 0; }
.edit-row .info { flex: 1; min-width: 0; }
.edit-row small { display: block; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .7px; }
.edit-row .valor { font-weight: 700; font-size: .98rem; }
.edit-row .lapiz { color: var(--muted); flex-shrink: 0; }
.edit-row input, .edit-row textarea {
    width: 100%; border: 0; background: transparent; font-weight: 700; font-size: .98rem; padding: 0;
}
.edit-row input:focus, .edit-row textarea:focus { outline: none; }
/* Números inline de pasajeros/sillas en UNA línea (fix Clemente #2) */
.edit-row .valor { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px; }
.edit-row .valor input[type="number"] {
    width: 2.6ch; min-width: 2.6ch; display: inline-block; text-align: center;
    -moz-appearance: textfield; appearance: textfield;
}
.edit-row .valor input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.linea-pax b { font-weight: 800; }
.cta-fija {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(transparent, var(--fondo) 40%);
}
.cta-fija .btn { max-width: 448px; margin: 0 auto; }

/* ---------- 04b · Bloqueado ---------- */
.lock-card {
    background: var(--ambar-suave); border-radius: var(--radius); padding: 26px 20px;
    text-align: center; margin-bottom: 20px;
}
.lock-card .tile {
    width: 62px; height: 62px; border-radius: 50%; background: var(--blanco);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ambar); margin-bottom: 14px;
}
.lock-card h2 { color: var(--ambar); font-size: 1.25rem; margin-bottom: 8px; }
.lock-card p { color: var(--ambar); font-size: .92rem; }
.lock-ayuda { text-align: center; color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.resumen-mini { padding: 6px 18px; margin-top: 26px; }
.resumen-mini .fila {
    display: flex; justify-content: space-between; gap: 14px; padding: 13px 0;
    border-bottom: 1px solid var(--fondo); font-size: .92rem;
}
.resumen-mini .fila:last-child { border-bottom: none; }
.resumen-mini .k { color: var(--muted); }
.resumen-mini .v { font-weight: 700; text-align: right; }

/* ---------- 05 · Voucher ---------- */
.voucher-card { padding: 24px 18px; text-align: center; margin-bottom: 16px; border: 1.5px dashed var(--borde); }
.voucher-card small { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: 1px; }
.voucher-codigo { font-family: var(--mono); font-weight: 800; font-size: 1.9rem; letter-spacing: 5px; margin: 8px 0 16px; }
#qr { display: flex; justify-content: center; margin-bottom: 16px; }
#qr img, #qr canvas { width: 168px !important; height: 168px !important; }
.voucher-card .mostrar { font-weight: 800; }
.voucher-card .sub { color: var(--muted); font-size: .88rem; margin-top: 4px; }
.llegada-card { padding: 18px; }
.llegada-card small { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .8px; }
.llegada-card ol { list-style: none; margin-top: 12px; }
.llegada-card li { display: flex; gap: 10px; padding: 6px 0; font-size: .95rem; }
.llegada-card li .n { color: var(--ok); font-weight: 800; }

/* ---------- 06 · Pago ---------- */
.pago-hero { padding: 22px 18px; text-align: center; margin-bottom: 16px; }
.pago-hero .monto { font-size: 2.3rem; font-weight: 900; margin: 10px 0 2px; }
.pago-hero .monto small { font-size: 1rem; color: var(--muted); font-weight: 600; }
.barra-pago { height: 10px; border-radius: 999px; background: #EEF0EE; overflow: hidden; margin: 14px 0 10px; }
.barra-pago > div { height: 100%; border-radius: 999px; background: var(--ok); }
.pago-hero .saldo { font-size: .9rem; color: var(--muted); }
.pago-hero .saldo b { color: var(--ambar); }
.desglose { padding: 6px 18px; margin-bottom: 18px; }
.desglose small { display: block; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .8px; padding: 14px 0 4px; }
.desglose .fila {
    display: flex; justify-content: space-between; gap: 14px; padding: 12px 0;
    border-bottom: 1px solid var(--fondo); font-size: .93rem;
}
.desglose .fila:last-child { border-bottom: none; }
.desglose .fila.total { font-weight: 800; font-size: 1rem; }
.desglose .verde { color: var(--ok); font-weight: 700; }
.desglose .neg { color: var(--ok); font-weight: 700; }
.pago-nota { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 14px; }

/* ---------- 07 · Chat ---------- */
.chat-wrap { display: flex; flex-direction: column; position: fixed; inset: 0; background: var(--fondo); z-index: 50; }
.chat-head {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--blanco);
}
.chat-head .avatar-sop {
    width: 46px; height: 46px; border-radius: 50%; background: var(--acento); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-head .avatar-sop.off { background: #C9CFCB; }
.chat-head .info { flex: 1; min-width: 0; }
.chat-head .nombre { font-weight: 800; font-size: 1.02rem; }
.chat-head .estado { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.chat-head .estado .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.chat-head .estado .punto.off { background: #A7AFA9; }
.chat-head .tag-soporte {
    font-size: .6rem; font-weight: 800; letter-spacing: .5px; color: var(--ok);
    background: var(--ok-suave); border-radius: 999px; padding: 2px 8px;
}
.btn-llamar-mini {
    width: 46px; height: 46px; border-radius: 50%; background: var(--ok-suave); color: var(--ok);
    border: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-cuerpo { flex: 1; overflow-y: auto; padding: 16px 14px; }
.chat-dia {
    text-align: center; margin-bottom: 14px;
}
.chat-dia span {
    background: var(--blanco); color: var(--muted); font-size: .76rem; font-weight: 600;
    border-radius: 999px; padding: 6px 13px; box-shadow: var(--sombra);
}
.burbuja {
    max-width: 82%; border-radius: 18px; padding: 12px 15px; font-size: .95rem; margin-bottom: 10px;
    position: relative;
}
.burbuja .hora { display: block; font-size: .7rem; margin-top: 5px; opacity: .65; }
.burbuja.soporte { background: var(--blanco); box-shadow: var(--sombra); border-bottom-left-radius: 6px; }
.burbuja.cliente { background: var(--tinta); color: #fff; margin-left: auto; border-bottom-right-radius: 6px; }
.escribiendo {
    display: inline-flex; align-items: center; gap: 8px; background: var(--blanco);
    border-radius: 999px; padding: 9px 14px; box-shadow: var(--sombra);
    color: var(--muted); font-size: .82rem;
}
.escribiendo .p { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .4; }
.escribiendo .p:nth-child(1) { opacity: 1; }
.chat-input {
    display: flex; gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: var(--fondo); border-top: 1px solid var(--borde);
}
.chat-input input {
    flex: 1; min-height: 50px; border: 0; border-radius: var(--radius-pill);
    background: var(--blanco); box-shadow: var(--sombra); padding: 0 18px;
}
.chat-input input:focus { outline: 2px solid var(--acento); }
.chat-input button {
    width: 50px; height: 50px; min-height: 50px; border-radius: 50%; border: 0; flex-shrink: 0;
    background: var(--tinta); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
/* 07b fuera de horario */
.chat-away { flex: 1; overflow-y: auto; padding: 40px 26px; text-align: center; }
.chat-away .tile {
    width: 78px; height: 78px; border-radius: 22px; background: var(--blanco); box-shadow: var(--sombra);
    display: inline-flex; align-items: center; justify-content: center; color: var(--muted); margin-bottom: 20px;
}
.chat-away h2 { font-size: 1.3rem; margin-bottom: 10px; }
.chat-away p { color: var(--muted); font-size: .93rem; margin-bottom: 24px; }
.chat-away .btn { margin-bottom: 12px; }

/* ---------- 08 · Nueva reserva ---------- */
.nueva-wrap { position: fixed; inset: 0; z-index: 50; background: var(--fondo); }
#mapa-nueva { position: absolute; inset: 0; }
.nueva-top {
    position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 600;
    display: flex; align-items: flex-start; gap: 10px;
}
.nueva-titulo {
    background: var(--blanco); border-radius: 999px; padding: 11px 17px; font-weight: 800;
    font-size: .95rem; box-shadow: var(--sombra);
}
.panel-destino {
    position: absolute; top: calc(66px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 600;
    background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra); overflow: hidden;
}
.panel-destino .origen {
    display: flex; align-items: center; gap: 10px; padding: 15px 16px; font-weight: 700;
    font-size: .95rem; border-bottom: 1px solid var(--fondo);
}
.panel-destino .origen .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.panel-destino .buscar { display: flex; align-items: center; gap: 10px; padding: 6px 16px; }
.panel-destino .buscar input { flex: 1; border: 0; min-height: 46px; font-size: .98rem; }
.panel-destino .buscar input:focus { outline: none; }
.panel-destino .buscar .map-tag {
    font-size: .68rem; font-weight: 800; letter-spacing: .5px; color: var(--muted);
    background: #EEF0EE; border-radius: 8px; padding: 5px 9px;
}
.sugerencias { list-style: none; border-top: 1px solid var(--fondo); }
.sugerencias button {
    display: flex; gap: 12px; align-items: center; width: 100%; text-align: left;
    background: var(--blanco); border: 0; padding: 13px 16px; border-bottom: 1px solid var(--fondo);
}
.sugerencias button:last-child { border-bottom: none; }
.sugerencias .ico { color: var(--muted); flex-shrink: 0; }
.sugerencias .ico.avion { color: var(--ok); }
.sugerencias b { display: block; font-size: .93rem; }
.sugerencias .sub { color: var(--muted); font-size: .8rem; }
/* 08b sheet de vehículos */
.sheet-nueva {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 700;
    background: var(--blanco); border-radius: 26px 26px 0 0; box-shadow: 0 -10px 34px rgba(14,27,22,.14);
    padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
}
.sheet-nueva .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sheet-nueva h2 { font-size: 1.25rem; }
.sheet-nueva .ruta-mini { color: var(--muted); font-size: .8rem; text-align: right; }
.sheet-nueva .precios-nota { color: var(--muted); font-size: .84rem; margin: 3px 0 14px; }
.veh-scroll { display: flex; gap: 11px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: none; }
.veh-card {
    flex: 0 0 118px; border: 1.5px solid var(--borde); border-radius: 16px; background: var(--blanco);
    padding: 14px 12px; text-align: left; color: var(--tinta);
}
.veh-card.sel { border-color: var(--tinta); border-width: 2px; }
.veh-card .nombre { font-weight: 800; font-size: .93rem; margin-top: 8px; }
.veh-card .cap { color: var(--muted); font-size: .78rem; }
.veh-card .precio { font-weight: 900; font-size: 1.15rem; margin-top: 6px; }
.nueva-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 13px; }
.dato-box { background: #F2F4F2; border-radius: 14px; padding: 11px 14px; }
.dato-box small { display: block; color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .6px; }
.dato-box .v, .dato-box input { font-weight: 700; font-size: .92rem; border: 0; background: transparent; width: 100%; padding: 0; }
.dato-box input:focus { outline: none; }
.prefill {
    display: flex; gap: 8px; align-items: center; background: var(--ok-suave); color: #14532D;
    border-radius: 12px; padding: 11px 14px; font-size: .88rem; font-weight: 600; margin-bottom: 14px;
}

/* ---------- 09 · Mis viajes ---------- */
.tabs-viajes { display: flex; gap: 10px; margin-bottom: 18px; }
.tabs-viajes button {
    border: 0; border-radius: 999px; min-height: 44px; padding: 0 18px; font-weight: 700;
    font-size: .92rem; background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra);
}
.tabs-viajes button.activa { background: var(--tinta); color: #fff; }
.viaje-item {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0;
    background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra);
    padding: 15px 16px; margin-bottom: 12px; color: var(--tinta);
}
.viaje-item .tile {
    width: 44px; height: 44px; border-radius: 12px; background: #F0F2F0; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
}
.viaje-item .info { flex: 1; min-width: 0; }
.viaje-item .lin1 { display: flex; align-items: center; gap: 9px; }
.viaje-item .cod { font-family: var(--mono); font-weight: 800; font-size: .82rem; }
/* Ruta y fecha SIEMPRE en su propia línea (fix Clemente #3) */
.viaje-item .ruta { display: block; font-weight: 700; font-size: .95rem; margin-top: 2px; }
.viaje-item .fecha { display: block; color: var(--muted); font-size: .84rem; margin-top: 1px; }
.viaje-item .flecha { color: var(--muted); flex-shrink: 0; }
.vacio-viajes { text-align: center; color: var(--muted); padding: 40px 0; }
.sinchofer [data-margen-arriba] { margin-top: 18px; }

/* ---------- 10 · Cancelar ---------- */
.politica-ok { background: var(--ok-suave); border-radius: 16px; padding: 16px 18px; margin: 16px 0 12px; }
.politica-ok .t { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 800; margin-bottom: 6px; }
.politica-ok p { color: #14532D; font-size: .92rem; }
.politica-warn {
    background: var(--ambar-suave); color: var(--ambar); border-radius: 14px;
    padding: 13px 16px; font-size: .9rem; font-weight: 600;
}
.acciones-abajo { position: fixed; left: 0; right: 0; bottom: 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--fondo) 35%); z-index: 40; }
.acciones-abajo .btn { max-width: 448px; margin: 0 auto 11px; }
.acciones-abajo .btn:last-child { margin-bottom: 0; }

/* ---------- 11 · Rating ---------- */
.rating-card { padding: 22px 18px; text-align: center; margin-bottom: 16px; }
.rating-card h2 { font-size: 1.15rem; margin-bottom: 4px; }
.rating-card .ayuda { color: var(--muted); font-size: .86rem; margin-bottom: 14px; }
.estrellas { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.estrellas button {
    width: 46px; height: 46px; border: 0; background: transparent; color: #D9DDD9;
    display: inline-flex; align-items: center; justify-content: center;
}
.estrellas button.on { color: var(--dorado); }
.rating-card textarea {
    width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: #F2F4F2;
    padding: 14px 16px; font-size: .93rem; resize: vertical;
}
.rating-card textarea:focus { outline: 2px solid var(--acento); }
.upsell {
    display: flex; align-items: center; gap: 14px; width: 100%; border: 0; text-align: left;
    background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra);
    padding: 16px; margin-top: 12px; color: var(--tinta);
}
.upsell .tile {
    width: 48px; height: 48px; border-radius: 14px; background: var(--ok-suave); color: var(--ok);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.upsell b { display: block; font-size: .95rem; }
.upsell .sub { color: var(--muted); font-size: .84rem; }
.upsell .flecha { margin-left: auto; color: var(--muted); }

/* ---------- Modal + toast + banner offline ---------- */
.modal-fondo {
    position: fixed; inset: 0; background: rgba(14,27,22,.45); z-index: 900;
    display: flex; align-items: flex-end; justify-content: center;
}
.modal {
    background: var(--blanco); border-radius: 24px 24px 0 0; padding: 26px 20px calc(22px + env(safe-area-inset-bottom));
    width: 100%; max-width: 480px;
}
.modal h3 { font-size: 1.2rem; margin-bottom: 8px; text-align: center; }
.modal p { color: var(--muted); text-align: center; margin-bottom: 20px; }
.modal .btn { margin-bottom: 11px; }
.modal .btn:last-child { margin-bottom: 0; }
.toast {
    position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 16px; right: 16px; z-index: 950;
    background: var(--tinta); color: #fff; border-radius: 14px; padding: 14px 18px;
    font-size: .93rem; font-weight: 600; text-align: center; box-shadow: var(--sombra);
    animation: aparecer .25s ease;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }
.banner-offline {
    position: fixed; top: 0; left: 0; right: 0; z-index: 980;
    background: var(--ambar); color: #fff; text-align: center;
    padding: 10px 16px calc(10px); font-size: .88rem; font-weight: 700;
}

/* Leaflet: atribución discreta pero visible (licencia OSM) */
.leaflet-control-attribution { font-size: 9px !important; opacity: .75; }