/* ComparteTaxi · capa visual de la app (v3, septiembre 2026: v1 + ajustes de móvil, avisos abajo)
   Se carga DESPUÉS de ctaxi.css y solo cambia aspecto: colores, tipografía, iconos.
   No toca estructura ni ningún id/clase que use taxi_share.js. Para volver atrás basta
   con quitar el <link> de index.html. Mismo lenguaje que la web (landing/css/inicio.v2.css). */

:root {
    --yellow: #ffcc00;
    --yellow-hover: #f2c100;
    --floor: #fdc853;
    --floor-line: #fdbe19;
    --sky: #c6eff8;
    --sky-soft: #eaf7fb;
    --navy: #202e5c;
    --navy-2: #2c3f7a;
    --ink: #1f2330;
    --ink-2: #3b4254;
    --muted: #5d6576;
    --line: #dde3ea;
    --paper: #f5f7f9;
    --ok: #1f8a4c;
    --ok-soft: #e7f5ed;
    --radius: 16px;

    /* las variables antiguas apuntan a la paleta nueva */
    --primary-color: var(--yellow);
    --secondary-color: var(--ink);
    --accent-color: var(--navy);
    --light-gray: var(--paper);
    --color-dark: var(--ink);
    --border-radius: var(--radius);

    /* iconos (máscaras SVG, heredan currentColor) */
    --i-qr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3h-3zM20 14v.01M14 20v.01M17 17h4v4h-4' stroke-linecap='round'/%3E%3C/svg%3E");
    --i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3.2-3.2a4.5 4.5 0 0 0-6.4-6.4L12 5.6'/%3E%3Cpath d='M14 10a4.5 4.5 0 0 0-6.4 0l-3.2 3.2a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2'/%3E%3C/svg%3E");
    --i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5l1.3-3.9A8 8 0 1 1 8.4 18.7z'/%3E%3C/svg%3E");
    --i-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18.5 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E");
    --i-mute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M16 9.5l5 5M21 9.5l-5 5'/%3E%3C/svg%3E");
    --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E");
    --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h13M9 1l5 5-5 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2330' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink-2);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ---------- cabecera: blanca, con el logo real ---------- */
header {
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    padding: 12px 20px;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-container:hover { opacity: 1; }
.logo-container .logo-emoji,
.logo-container .logo-text { display: none; }
.logo-container::before {
    content: "";
    display: block;
    width: 188px;
    height: 30px;
    background: url("/static/images/brand/compartetaxi-logo.svg") no-repeat left center / contain;
}
.logo-container::after { content: "ComparteTaxi"; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.audio-toggle-btn,
.audio-toggle-btn.muted {
    background: #fff;
    border: 2px solid var(--line);
    width: 40px;
    height: 40px;
    color: var(--ink);
    box-shadow: none;
}
.audio-toggle-btn:hover { background: var(--paper); border-color: var(--ink); }
.audio-toggle-btn.muted { color: var(--muted); }
.audio-icon { font-size: 0; width: 20px; height: 20px; display: block; }
.audio-icon::before {
    content: ""; display: block; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: var(--i-sound) no-repeat center / contain; mask: var(--i-sound) no-repeat center / contain;
}
.audio-toggle-btn.muted .audio-icon::before { -webkit-mask-image: var(--i-mute); mask-image: var(--i-mute); }

.ws-status-indicator { color: var(--muted); font-weight: 600; }

/* ---------- tarjeta principal ---------- */
main { padding: 20px 16px; }
.card {
    border-radius: var(--radius);
    box-shadow: none;
    border: 1px solid var(--line);
    padding: 22px 20px;
}
h1 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-wrap: balance;
}
.instructions { color: var(--muted); }

.origin-info {
    background: var(--sky-soft);
    border: 0;
    border-radius: 12px;
    color: var(--ink);
}
.status-active { background-color: var(--ok); }
.status-waiting { background-color: var(--floor-line); }

/* lista de orígenes cercanos */
.nearby-stops-container { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.nearby-stops-header { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: #fff; }
.nearby-stop-item { border-bottom-color: var(--line); transition: background-color .15s ease; }
.nearby-stop-item:hover { background-color: var(--paper); }
.nearby-stop-item.selected {
    background-color: #fff8d6;
    border-left: 4px solid var(--yellow);
    box-shadow: none;
    transform: none;
}
.stop-name { color: var(--ink); font-weight: 600; }
.stop-distance,
.destination-distance { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* botones de compartir: iconos propios en vez de emojis */
.share-btn {
    background: #fff;
    border: 1.5px solid var(--line);
    color: var(--ink-2);
    border-radius: 10px;
    box-shadow: none;
}
.share-btn:hover,
.share-btn-qr:hover,
.share-btn-link:hover,
.share-btn-whatsapp:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: none; }
.share-btn .share-icon { font-size: 0; width: 16px; height: 16px; display: block; }
.share-btn .share-icon::before {
    content: ""; display: block; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: var(--i-qr) no-repeat center / contain; mask: var(--i-qr) no-repeat center / contain;
}
.share-btn-link .share-icon::before { -webkit-mask-image: var(--i-link); mask-image: var(--i-link); }
.share-btn-whatsapp .share-icon::before { -webkit-mask-image: var(--i-chat); mask-image: var(--i-chat); }

/* selector de destino */
select,
.destination-selector-container select {
    border: 2px solid var(--line);
    border-radius: 12px;
    background: #fff var(--i-chevron) no-repeat right 12px center / 18px;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    color: var(--ink);
    font-family: inherit;
    font-weight: 500;
}
select:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(32, 46, 92, 0.12); outline: none; }
.destination-option { border-color: var(--line); border-radius: 12px; }
.destination-option.selected { background: #fff8d6; border-color: var(--yellow); }

/* tarjetas de destino: el color de fondo/borde lo pone el JS por zona, se respeta */
.destination-selector-header { color: var(--ink); font-weight: 700; }
.destination-name { color: var(--ink); font-weight: 600; }
.destination-popularity { display: none; }
.destination-option:hover { transform: none; }
.destination-option.selected { border-width: 2px; border-color: var(--ink); box-shadow: none; transform: none; }
#destination-search { font-family: inherit; border-bottom-color: var(--line); color: var(--ink); }
#destination-search:focus { border-bottom-color: var(--navy); }
.search-icon { font-size: 0; width: 18px; height: 18px; display: block; flex-shrink: 0; color: var(--muted); }
.search-icon::before {
    content: ""; display: block; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--i-search) no-repeat center / contain; mask: var(--i-search) no-repeat center / contain;
}

/* botón principal (mismo que la web) */
button,
#request-taxi {
    font-family: inherit;
}
#request-taxi {
    background: var(--yellow);
    color: var(--ink);
    border: 0;
    border-radius: 12px;
    min-height: 52px;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: none;
}
#request-taxi:hover { background: var(--yellow-hover); transform: none; box-shadow: none; }
#request-taxi:disabled { background: var(--line); color: var(--muted); }

/* ---------- tarifa ---------- */
.fare-preview,
.fare-chat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--yellow);
    box-shadow: none;
}
.fare-preview-header { color: var(--ink); }
.fare-preview-header .fare-icon { display: none; }
.fare-preview-table,
.fare-sharing-table { font-variant-numeric: tabular-nums; }
.fare-preview-table th,
.fare-sharing-table th { color: var(--muted); font-weight: 600; }
.fare-preview-table .highlight-row,
.fare-sharing-table .highlight-row { background: #fff8d6; }
.fare-preview-table .savings,
.fare-sharing-table .savings { color: var(--ok); }

/* los tres naranjas que quedaban en ctaxi.css */
.system-message .message-content strong,
.total-fare .fare-value,
.fare-per-person { color: var(--ink); }
.fare-sharing-table .savings { color: var(--ok); }

/* ---------- sugerir ruta: tranquilo, sin brillo pulsante ---------- */
.suggestion-cta-card {
    background: var(--navy);
    color: #fff;
    animation: none;
    box-shadow: none;
    border-radius: var(--radius);
}
.suggestion-cta-card::before,
.suggestion-cta-card::after { display: none; }
.suggestion-icon { display: none; }
.suggestion-title { color: #fff; }
.suggestion-text { color: #d9e2f5; }
.suggestion-button {
    background: var(--yellow);
    color: var(--ink);
    border-radius: 12px;
    box-shadow: none;
    font-weight: 700;
}
.suggestion-button:hover { background: var(--yellow-hover); transform: none; box-shadow: none; }

/* ---------- mapa y panel de coincidencias ---------- */
#map { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: none; }

.chat-panel { border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(32, 46, 92, 0.16); }
.chat-header { background: var(--navy); color: #fff; }
.chat-icon { display: none; }
.chat-title { font-weight: 700; }
.chat-title::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); flex-shrink: 0;
}
.minimize-btn { color: #fff; }
.chat-notification { background: var(--yellow); color: var(--ink); }
.chat-messages { background: var(--paper); }
.system-message { background: #fff; border: 1px solid var(--line); color: var(--muted); }
.user-message { background: #fff8d6; }
.match-message { background: #fff; border-left-color: var(--navy); }
.match-message::before { background: var(--navy); }

.countdown-compact { background: #fff; border-left-color: var(--navy); }
.compact-btn.extend-btn { background: var(--yellow); color: var(--ink); }
.compact-btn.cancel-btn { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }

.loading-overlay { background: rgba(255, 255, 255, 0.94); }
.loading-spinner { border-color: var(--line); border-top-color: var(--navy); }
.loading-text { color: var(--ink); }

/* ---------- pie ---------- */
footer { background: #fff; border-top: 1px solid var(--line); color: var(--muted); }
footer a { color: var(--ink); font-weight: 600; }
.footer-b2b-link .icon { display: none; }
.legal-links a { color: var(--muted); font-weight: 500; }

/* ---------- avisos (SweetAlert2) ---------- */
.swal2-popup { font-family: inherit; border-radius: var(--radius); color: var(--ink-2); }
.swal2-title { color: var(--ink); font-weight: 700; }
.swal2-styled.swal2-confirm { background: var(--yellow) !important; color: var(--ink) !important; border-radius: 12px; font-weight: 700; box-shadow: none !important; }
.swal2-styled.swal2-cancel { background: #fff !important; color: var(--ink) !important; border: 1.5px solid var(--line) !important; border-radius: 12px; font-weight: 600; }
.swal2-icon.swal2-warning,
.swal2-icon.swal2-question { border-color: var(--navy); color: var(--navy); }
.swal2-timer-progress-bar { background: var(--yellow); }

@media (max-width: 767px) {
    header { padding: 10px 16px; min-height: 56px; }
    .logo-container::before { width: 172px; height: 28px; }
    .destination-selector { padding: 16px 0; }
    .destination-selector-header { flex-basis: 100%; }
    .destination-selector .search-container { width: 100%; }
    .ws-status-indicator { left: 16px; }
    .audio-toggle-btn { right: 16px; }
}
@media (max-width: 420px) {
    /* deja sitio al indicador de conexión a la izquierda */
    .logo-container::before { width: 160px; height: 26px; }
}

/* ---------- botones del contador: iconos propios (el JS pone ⏱️ y ❌) ---------- */
.compact-btn.extend-btn,
.compact-btn.cancel-btn { font-size: 0; box-shadow: none; }
.compact-btn.extend-btn { background: var(--yellow); color: var(--ink); }
.compact-btn.extend-btn::before { content: "+5"; font: 700 12px/1 'Montserrat', sans-serif; letter-spacing: -0.02em; }
.compact-btn.cancel-btn { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.compact-btn.cancel-btn::before {
    content: ""; width: 12px; height: 12px; background: currentColor;
    -webkit-mask: var(--i-close) no-repeat center / contain; mask: var(--i-close) no-repeat center / contain;
}
.compact-btn.extend-btn:hover { background: var(--yellow-hover); }
.compact-btn.cancel-btn:hover { border-color: var(--ink); }
.compact-btn:disabled { opacity: .45; }
:root { --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E"); }

/* ---------- móvil ---------- */
@media (max-width: 767px) {
    /* bloque principal más compacto: que la lista de orígenes asome en el primer pantallazo */
    main { padding: 12px 12px 76px; }            /* abajo: sitio para la barra de coincidencias */
    .card { padding: 18px 14px; }
    h1 { font-size: 1.3rem; margin-bottom: 6px; }
    #location-prompt { font-size: 0.9rem; line-height: 1.45; margin-bottom: 12px; }
    .origin-info { padding: 10px 12px; }
    .origin-info p.instructions { font-size: 0.8rem; margin-top: 4px; }

    /* orden: tarjeta principal, mapa (se ve la ruta dibujada), y después "¿No encuentras tu ruta?" */
    .controls-section,
    .map-section { display: contents; }
    .controls-section > .card { order: 1; }
    #map { order: 2; height: 260px; margin: 0; }
    .suggestion-cta-card { order: 3; margin-top: 0; }

    /* panel de coincidencias: plegado solo se ve la barra; abierto ocupa casi toda la pantalla */
    .chat-panel {
        height: 78vh;
        height: 78dvh;
        border: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 30px rgba(32, 46, 92, 0.18);
        transform: translateY(calc(100% - 56px));
        z-index: 1001;                           /* encima de los controles de Leaflet (1000), debajo de SweetAlert (1060) */
    }
    .chat-panel.expanded { transform: translateY(0); }
    .chat-header { min-height: 56px; padding: 0 16px; }
    .chat-header::before {                      /* asa del panel */
        content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px;
        margin-left: -18px; border-radius: 2px; background: rgba(255, 255, 255, 0.35);
    }
    .minimize-btn { width: 40px; height: 40px; }

    /* avisos cortos: tira compacta abajo, justo encima de la barra de coincidencias,
       para no tapar la cabecera ni el título (SweetAlert los pone arriba a la derecha) */
    body.swal2-toast-shown .swal2-container.swal2-top-end,
    body.swal2-toast-shown .swal2-container.swal2-top-start,
    body.swal2-toast-shown .swal2-container.swal2-top {
        inset: auto 0 56px 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 8px !important;
    }
    .swal2-popup.swal2-toast {
        width: calc(100vw - 16px) !important;
        padding: 10px 14px !important;
        border-radius: 12px;
        border: 1px solid var(--line);
        box-shadow: 0 8px 24px rgba(32, 46, 92, 0.16) !important;
    }
    .swal2-popup.swal2-toast .swal2-icon { display: none !important; }
    .swal2-popup.swal2-toast .swal2-title,
    .swal2-popup.swal2-toast .swal2-html-container { font-size: 0.875rem !important; margin: 0 !important; text-align: left; }
}