/* ==========================================================
   CERCA RUTA TRES MODOS V1
   NO modifica #view-mapa
   ========================================================== */

#view-inicio .cr3-home-hidden {
    display:none !important;
}

body.cerca-route3-open {
    overflow:hidden !important;
}

/* Full screen route module */
#cercaRoute3ModesV1 {
    position:fixed;
    inset:0;
    z-index:12000;
    display:none;
    overflow:hidden;
    background:#07111f;
    color:#f8fafc;
}

#cercaRoute3ModesV1.show {
    display:block;
}

#cercaRoute3ModesV1 .cr3-map {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background:#07111f;
}

/* Header */
#cercaRoute3ModesV1 .cr3-head {
    position:absolute;
    top:max(10px,env(safe-area-inset-top));
    left:10px;
    right:10px;
    z-index:20;

    min-height:50px;
    padding:5px 8px 5px 5px;

    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:16px;

    background:rgba(4,10,20,.91);
    box-shadow:0 12px 34px rgba(0,0,0,.28);
    backdrop-filter:blur(14px);
}

#cercaRoute3ModesV1 .cr3-round {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;

    border:0;
    border-radius:12px;

    color:#e2e8f0;
    background:rgba(255,255,255,.055);
}

#cercaRoute3ModesV1 .cr3-round .material-icons-round {
    font-size:20px;
}

#cercaRoute3ModesV1 .cr3-head > div {
    min-width:0;
    display:grid;
    gap:1px;
}

#cercaRoute3ModesV1 .cr3-head small {
    color:#22d3ee;
    font-size:.49rem;
    font-weight:900;
    letter-spacing:.08em;
}

#cercaRoute3ModesV1 .cr3-head h2 {
    margin:0;
    color:#f8fafc;
    font-size:.88rem;
    line-height:1.1;
}

#cercaRoute3ModesV1 .cr3-live {
    display:inline-flex;
    align-items:center;
    gap:5px;

    padding:6px 8px;
    border-radius:9px;

    color:#9debf7;
    background:rgba(34,211,238,.065);

    font-size:.48rem;
    font-weight:900;
    letter-spacing:.06em;
}

#cercaRoute3ModesV1 .cr3-live i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#22d3ee;
    box-shadow:0 0 10px rgba(34,211,238,.75);
}

/* Planner */
#cercaRoute3ModesV1 .cr3-planner {
    position:absolute;
    top:calc(max(10px,env(safe-area-inset-top)) + 61px);
    left:10px;
    right:10px;
    z-index:20;

    padding:9px;

    border:1px solid rgba(255,255,255,.085);
    border-radius:18px;

    background:rgba(5,12,23,.93);
    box-shadow:0 14px 36px rgba(0,0,0,.27);
    backdrop-filter:blur(15px);
}

#cercaRoute3ModesV1 .cr3-modes {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}

#cercaRoute3ModesV1 .cr3-modes button {
    min-height:58px;
    padding:7px 4px;

    display:grid;
    justify-items:center;
    align-content:center;
    gap:2px;

    border:1px solid rgba(148,163,184,.09);
    border-radius:12px;

    color:#718096;
    background:rgba(255,255,255,.025);
}

#cercaRoute3ModesV1 .cr3-modes button .material-icons-round {
    font-size:20px;
}

#cercaRoute3ModesV1 .cr3-modes button strong {
    font-size:.59rem;
    font-weight:850;
}

#cercaRoute3ModesV1 .cr3-modes button small {
    color:#536176;
    font-size:.47rem;
}

#cercaRoute3ModesV1 .cr3-modes button[data-cr3-mode="driving"].active {
    color:#cffafe;
    border-color:rgba(34,211,238,.28);
    background:rgba(34,211,238,.09);
}

#cercaRoute3ModesV1 .cr3-modes button[data-cr3-mode="moto"].active {
    color:#fde68a;
    border-color:rgba(245,158,11,.28);
    background:rgba(245,158,11,.09);
}

#cercaRoute3ModesV1 .cr3-modes button[data-cr3-mode="solo"].active {
    color:#ddd6fe;
    border-color:rgba(167,139,250,.28);
    background:rgba(139,92,246,.10);
}

#cercaRoute3ModesV1 .cr3-mode-label {
    min-height:34px;
    margin-top:7px;
    padding:5px 7px;

    display:flex;
    align-items:center;
    gap:7px;

    border-radius:10px;

    color:#8a9bad;
    background:rgba(255,255,255,.028);
}

#cercaRoute3ModesV1 .cr3-mode-label > .material-icons-round {
    font-size:17px;
}

#cercaRoute3ModesV1 .cr3-mode-label > span:last-child {
    min-width:0;
    display:grid;
    gap:1px;
}

#cercaRoute3ModesV1 .cr3-mode-label small {
    color:#5f7084;
    font-size:.44rem;
    font-weight:900;
    letter-spacing:.07em;
}

#cercaRoute3ModesV1 .cr3-mode-label strong {
    color:#cad5df;
    font-size:.57rem;
}

#cercaRoute3ModesV1 .cr3-search-wrap {
    min-height:43px;
    margin-top:7px;
    padding:0 6px 0 10px;

    display:grid;
    grid-template-columns:20px minmax(0,1fr) 30px;
    align-items:center;
    gap:5px;

    border:1px solid rgba(148,163,184,.09);
    border-radius:13px;

    background:rgba(2,6,23,.38);

    opacity:.62;
}

#cercaRoute3ModesV1 .cr3-search-wrap.enabled {
    opacity:1;
    border-color:rgba(34,211,238,.17);
}

#cercaRoute3ModesV1 .cr3-search-wrap > .material-icons-round {
    color:#22d3ee;
    font-size:18px;
}

#cercaRoute3ModesV1 .cr3-search-wrap input {
    min-width:0;
    width:100%;

    border:0;
    outline:0;

    color:#edf7ff;
    background:transparent;

    font-size:.68rem;
    font-weight:700;
}

#cercaRoute3ModesV1 .cr3-search-wrap input:disabled {
    color:#526174;
}

#cercaRoute3ModesV1 .cr3-search-wrap input::placeholder {
    color:#65758a;
}

#cercaRoute3ModesV1 .cr3-search-wrap button {
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    border:0;
    border-radius:9px;

    color:#627286;
    background:transparent;
}

#cercaRoute3ModesV1 .cr3-search-wrap button .material-icons-round {
    font-size:16px;
}

/* Search results */
#cercaRoute3ModesV1 .cr3-search-results {
    max-height:205px;
    overflow:auto;
    margin-top:4px;
}

#cercaRoute3ModesV1 .cr3-search-results:empty {
    display:none;
}

#cercaRoute3ModesV1 .cr3-result {
    width:100%;
    min-height:49px;
    padding:6px 3px;

    display:grid;
    grid-template-columns:30px minmax(0,1fr) 20px;
    align-items:center;
    gap:7px;

    border:0;
    border-top:1px solid rgba(148,163,184,.06);

    color:#dbe7f2;
    background:transparent;
    text-align:left;
}

#cercaRoute3ModesV1 .cr3-result > .material-icons-round:first-child {
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    border-radius:9px;

    color:#22d3ee;
    background:rgba(34,211,238,.075);

    font-size:16px;
}

#cercaRoute3ModesV1 .cr3-result > span:nth-child(2) {
    min-width:0;
    display:grid;
    gap:1px;
}

#cercaRoute3ModesV1 .cr3-result strong {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    font-size:.59rem;
}

#cercaRoute3ModesV1 .cr3-result small {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    color:#627286;
    font-size:.48rem;
}

#cercaRoute3ModesV1 .cr3-result > .material-icons-round:last-child {
    color:#475569;
    font-size:17px;
}

#cercaRoute3ModesV1 .cr3-searching,
#cercaRoute3ModesV1 .cr3-loading {
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    color:#7d8da0;
    font-size:.58rem;
}

#cercaRoute3ModesV1 .cr3-loading > span:last-child {
    display:grid;
    gap:1px;
}

#cercaRoute3ModesV1 .cr3-loading strong {
    color:#d8e2ec;
    font-size:.62rem;
}

#cercaRoute3ModesV1 .cr3-loading small {
    color:#64748b;
    font-size:.49rem;
}

/* Map UI */
#cercaRoute3ModesV1 .cr3-map-badge {
    position:absolute;
    left:10px;
    bottom:132px;
    z-index:16;

    min-height:39px;
    padding:5px 8px;

    display:flex;
    align-items:center;
    gap:7px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;

    color:#9baabd;
    background:rgba(4,10,20,.84);
    backdrop-filter:blur(10px);
}

#cercaRoute3ModesV1 .cr3-map-badge > .material-icons-round {
    color:#f59e0b;
    font-size:17px;
}

#cercaRoute3ModesV1 .cr3-map-badge > span:last-child {
    display:grid;
    gap:1px;
}

#cercaRoute3ModesV1 .cr3-map-badge strong {
    color:#dce7f2;
    font-size:.51rem;
}

#cercaRoute3ModesV1 .cr3-map-badge small {
    color:#627286;
    font-size:.44rem;
}

#cercaRoute3ModesV1 .cr3-locate {
    position:absolute;
    right:10px;
    bottom:132px;
    z-index:16;

    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.09);
    border-radius:13px;

    color:#67e8f9;
    background:rgba(4,10,20,.87);

    box-shadow:0 8px 25px rgba(0,0,0,.23);
    backdrop-filter:blur(10px);
}

#cercaRoute3ModesV1 .cr3-locate .material-icons-round {
    font-size:19px;
}

/* Bottom */
#cercaRoute3ModesV1 .cr3-bottom {
    position:absolute;
    left:9px;
    right:9px;
    bottom:calc(28px + env(safe-area-inset-bottom));
    z-index:20;

    max-height:38%;
    overflow:auto;

    border:1px solid rgba(255,255,255,.09);
    border-radius:17px;

    background:rgba(5,12,23,.94);
    box-shadow:0 -12px 35px rgba(0,0,0,.27);
    backdrop-filter:blur(15px);
}

#cercaRoute3ModesV1 .cr3-empty {
    min-height:78px;
    padding:10px 12px;

    display:flex;
    align-items:center;
    gap:9px;

    color:#8090a4;
}

#cercaRoute3ModesV1 .cr3-empty > .material-icons-round {
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#22d3ee;
    background:rgba(34,211,238,.07);
}

#cercaRoute3ModesV1 .cr3-empty > span:last-child {
    display:grid;
    gap:2px;
}

#cercaRoute3ModesV1 .cr3-empty strong {
    color:#d9e5ef;
    font-size:.65rem;
}

#cercaRoute3ModesV1 .cr3-empty small {
    color:#64748b;
    font-size:.52rem;
}

#cercaRoute3ModesV1 .cr3-route-head {
    padding:10px 11px 6px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:9px;
}

#cercaRoute3ModesV1 .cr3-route-head > div {
    min-width:0;
    display:grid;
    gap:2px;
}

#cercaRoute3ModesV1 .cr3-route-head small {
    color:#22d3ee;
    font-size:.47rem;
    font-weight:900;
    letter-spacing:.06em;
}

#cercaRoute3ModesV1 .cr3-route-head > div > strong {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    color:#edf7ff;
    font-size:.70rem;
}

#cercaRoute3ModesV1 .cr3-route-score {
    min-width:47px;
    height:40px;
    padding:0 7px;

    display:flex;
    align-items:baseline;
    justify-content:center;

    border-radius:11px;

    color:var(--cr3-score,#22c55e);
    background:color-mix(in srgb,var(--cr3-score,#22c55e) 12%,transparent);

    font-size:.93rem;
    font-weight:900;
}

#cercaRoute3ModesV1 .cr3-route-score small {
    font-size:.43rem;
    opacity:.65;
}

#cercaRoute3ModesV1 .cr3-route-main {
    margin:0 10px;
    min-height:34px;
    padding:6px 8px;

    display:flex;
    align-items:center;
    gap:9px;

    border-radius:10px;

    color:#8495a8;
    background:rgba(255,255,255,.035);

    font-size:.52rem;
}

#cercaRoute3ModesV1 .cr3-route-main strong {
    color:#eef7ff;
    font-size:.66rem;
}

#cercaRoute3ModesV1 .cr3-alt-row {
    padding:7px 10px;
    display:flex;
    gap:6px;
    overflow-x:auto;
}

#cercaRoute3ModesV1 .cr3-alt {
    min-width:79px;
    padding:6px 8px;

    display:grid;
    gap:1px;

    border:1px solid rgba(148,163,184,.08);
    border-radius:10px;

    color:#7c8da0;
    background:rgba(255,255,255,.025);
    text-align:left;
}

#cercaRoute3ModesV1 .cr3-alt.active {
    color:#dffaff;
    border-color:rgba(34,211,238,.23);
    background:rgba(34,211,238,.07);
}

#cercaRoute3ModesV1 .cr3-alt strong {
    color:#edf7ff;
    font-size:.62rem;
}

#cercaRoute3ModesV1 .cr3-alt span,
#cercaRoute3ModesV1 .cr3-alt small {
    font-size:.48rem;
}

#cercaRoute3ModesV1 .cr3-start {
    width:calc(100% - 20px);
    min-height:45px;
    margin:0 10px 10px;
    padding:6px 9px;

    display:grid;
    grid-template-columns:30px minmax(0,1fr) 20px;
    align-items:center;
    gap:7px;

    border:0;
    border-radius:12px;

    color:#03242b;
    background:#22d3ee;

    text-align:left;
}

#cercaRoute3ModesV1 .cr3-start > .material-icons-round:first-child {
    font-size:20px;
}

#cercaRoute3ModesV1 .cr3-start > span:nth-child(2) {
    min-width:0;
    display:grid;
    gap:1px;
}

#cercaRoute3ModesV1 .cr3-start strong {
    font-size:.61rem;
    font-weight:950;
}

#cercaRoute3ModesV1 .cr3-start small {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    color:#0b5b66;
    font-size:.48rem;
}

#cercaRoute3ModesV1 .cr3-start > .material-icons-round:last-child {
    font-size:18px;
}

/* Navigation card */
#cercaRoute3ModesV1 .cr3-navigation-card {
    padding:10px;
}

#cercaRoute3ModesV1 .cr3-nav-main {
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
}

#cercaRoute3ModesV1 .cr3-nav-main > .material-icons-round {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(255,255,255,.055);
}

#cercaRoute3ModesV1 .cr3-nav-main > span:nth-child(2) {
    min-width:0;
    display:grid;
    gap:1px;
}

#cercaRoute3ModesV1 .cr3-nav-main small {
    color:#22d3ee;
    font-size:.46rem;
    font-weight:900;
}

#cercaRoute3ModesV1 .cr3-nav-main strong {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    color:#eff8ff;
    font-size:.63rem;
}

#cercaRoute3ModesV1 .cr3-nav-main > strong:last-child {
    font-size:.80rem;
}

#cercaRoute3ModesV1 .cr3-nav-context,
#cercaRoute3ModesV1 .cr3-solo-strip {
    min-height:41px;
    margin-top:7px;
    padding:6px 8px;

    display:flex;
    align-items:center;
    gap:7px;

    border-radius:10px;

    color:#7f91a5;
    background:rgba(255,255,255,.035);
}

#cercaRoute3ModesV1 .cr3-nav-context > .material-icons-round {
    color:#22c55e;
    font-size:17px;
}

#cercaRoute3ModesV1 .cr3-solo-strip {
    color:#a99cc0;
    background:rgba(139,92,246,.065);
}

#cercaRoute3ModesV1 .cr3-solo-strip > .material-icons-round {
    color:#c4b5fd;
    font-size:17px;
}

#cercaRoute3ModesV1 .cr3-nav-context > span:last-child,
#cercaRoute3ModesV1 .cr3-solo-strip > span:last-child {
    display:grid;
    gap:1px;
}

#cercaRoute3ModesV1 .cr3-nav-context strong,
#cercaRoute3ModesV1 .cr3-solo-strip strong {
    color:#dbe6f0;
    font-size:.56rem;
}

#cercaRoute3ModesV1 .cr3-nav-context small,
#cercaRoute3ModesV1 .cr3-solo-strip small {
    color:#627286;
    font-size:.47rem;
}

#cercaRoute3ModesV1 .cr3-navigation-card > button {
    width:100%;
    min-height:35px;
    margin-top:8px;

    border:1px solid rgba(239,68,68,.12);
    border-radius:10px;

    color:#fca5a5;
    background:rgba(239,68,68,.065);

    font-size:.55rem;
    font-weight:850;
}

/* Bridge marker support */
#cercaRoute3ModesV1 .cr3-bridge-marker {
    pointer-events:auto;
}

#cercaRoute3ModesV1 .cr3-fallback-event {
    width:34px;
    height:38px;

    display:grid;
    place-items:center;

    position:relative;

    border:2px solid rgba(255,255,255,.82);
    border-radius:13px 13px 13px 3px;

    color:#fff;
    background:var(--cr3-pin,#f59e0b);

    box-shadow:0 8px 18px rgba(0,0,0,.30);
    transform:rotate(-3deg);
}

#cercaRoute3ModesV1 .cr3-fallback-event > .material-icons-round {
    font-size:17px;
    transform:rotate(3deg);
}

#cercaRoute3ModesV1 .cr3-fallback-event small {
    position:absolute;
    right:-5px;
    top:-5px;

    width:15px;
    height:15px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#03111e;
    background:#e2f7ff;

    font-size:.42rem;
    font-weight:950;
}

#cercaRoute3ModesV1 .cr3-user-marker {
    width:30px;
    height:30px;
    position:relative;
}

#cercaRoute3ModesV1 .cr3-user-pulse {
    position:absolute;
    inset:0;

    border-radius:50%;
    background:rgba(56,189,248,.15);

    animation:cr3UserPulse 1.8s ease-in-out infinite;
}

#cercaRoute3ModesV1 .cr3-user-dot {
    position:absolute;
    left:9px;
    top:9px;

    width:12px;
    height:12px;

    border:3px solid #fff;
    border-radius:50%;

    background:#38bdf8;
    box-shadow:0 2px 10px rgba(0,0,0,.35);
}

@keyframes cr3UserPulse {
    0%,100% { transform:scale(.75); opacity:.6; }
    50% { transform:scale(1.15); opacity:1; }
}

#cercaRoute3ModesV1 .cr3-info {
    max-width:240px;
    padding:3px;
    color:#0f172a;
}

#cercaRoute3ModesV1 .cr3-info small {
    display:block;
    margin-bottom:3px;
    font-size:.62rem;
    font-weight:900;
}

#cercaRoute3ModesV1 .cr3-info strong {
    display:block;
    font-size:.76rem;
}

#cercaRoute3ModesV1 .cr3-info p {
    margin:4px 0 0;
    font-size:.66rem;
    line-height:1.35;
}

#cercaRoute3ModesV1 .cr3-disclaimer {
    position:absolute;
    left:8px;
    right:8px;
    bottom:calc(6px + env(safe-area-inset-bottom));
    z-index:19;

    color:rgba(148,163,184,.54);

    font-size:.42rem;
    text-align:center;
    pointer-events:none;
}

@media (max-width:370px) {
    #cercaRoute3ModesV1 .cr3-head {
        left:7px;
        right:7px;
    }

    #cercaRoute3ModesV1 .cr3-planner {
        left:7px;
        right:7px;
    }

    #cercaRoute3ModesV1 .cr3-modes button strong {
        font-size:.54rem;
    }

    #cercaRoute3ModesV1 .cr3-bottom {
        left:7px;
        right:7px;
    }
}

@media (prefers-reduced-motion:reduce) {
    #cercaRoute3ModesV1 .cr3-user-pulse {
        animation:none;
    }
}


/* ==========================================================
   V1.0.4 — BLOQUEO VISUAL DE LA RUTA ANTIGUA
   Mientras la nueva Ruta Tres Modos está abierta, la V2
   antigua no puede aparecer ni durante cargas ni recálculos.
   ========================================================== */
body.cerca-route3-open #cercaRouteViewV2,
body.cerca-route3-open .cerca-route-v2,
body.cerca-route3-open #cercaDrivingHubV31 {
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}


/* ==========================================================
   CERCA RUTA TRES MODOS V2 — WAZE UI
   Limpieza visual: mapa protagonista, paneles compactos.
   ========================================================== */

#cercaRoute3ModesV1 {
    background:#0b1220;
}

#cercaRoute3ModesV1 .cr3-head {
    top:max(10px,env(safe-area-inset-top));
    left:12px;
    right:12px;
    min-height:48px;
    padding:4px 6px 4px 4px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    background:rgba(6,12,22,.76);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    backdrop-filter:blur(10px);
}

#cercaRoute3ModesV1 .cr3-head small {
    color:#24d1ee;
    font-size:.46rem;
}

#cercaRoute3ModesV1 .cr3-head h2 {
    font-size:1.05rem;
}

#cercaRoute3ModesV1 .cr3-live {
    padding:5px 9px;
    border-radius:999px;
    background:rgba(34,211,238,.10);
    font-size:.50rem;
}

#cercaRoute3ModesV1 .cr3-round {
    border-radius:14px;
    background:rgba(255,255,255,.05);
}

#cercaRoute3ModesV1 .cr3-planner {
    top:calc(max(10px,env(safe-area-inset-top)) + 58px);
    left:12px;
    right:12px;
    padding:8px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:18px;
    background:rgba(6,12,22,.72);
    box-shadow:0 10px 28px rgba(0,0,0,.16);
    backdrop-filter:blur(10px);
}

#cercaRoute3ModesV1 .cr3-mode-label,
#cercaRoute3ModesV1 .cr3-map-badge,
#cercaRoute3ModesV1 .cr3-disclaimer {
    display:none !important;
}

#cercaRoute3ModesV1 .cr3-modes {
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

#cercaRoute3ModesV1 .cr3-modes button {
    min-height:56px;
    padding:7px 2px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(10,18,34,.62);
    color:#94a3b8;
}

#cercaRoute3ModesV1 .cr3-modes button small {
    display:none;
}

#cercaRoute3ModesV1 .cr3-modes button strong {
    font-size:.70rem;
}

#cercaRoute3ModesV1 .cr3-modes button[data-cr3-mode="driving"].active,
#cercaRoute3ModesV1 .cr3-modes button[data-cr3-mode="moto"].active,
#cercaRoute3ModesV1 .cr3-modes button[data-cr3-mode="solo"].active {
    background:rgba(10,22,42,.92);
    border-color:rgba(36,209,238,.42);
    box-shadow:inset 0 0 0 1px rgba(36,209,238,.10);
}

#cercaRoute3ModesV1 .cr3-search-wrap {
    min-height:50px;
    margin-top:8px;
    padding:0 8px 0 12px;
    grid-template-columns:20px minmax(0,1fr) 28px;
    border:1px solid rgba(36,209,238,.22);
    border-radius:17px;
    background:rgba(4,10,18,.68);
}

#cercaRoute3ModesV1 .cr3-search-wrap input {
    font-size:.85rem;
}

#cercaRoute3ModesV1 .cr3-search-results {
    max-height:168px;
    margin-top:6px;
    border-radius:14px;
    background:rgba(4,10,18,.72);
}

#cercaRoute3ModesV1 .cr3-result {
    min-height:46px;
    padding:5px 4px;
}

#cercaRoute3ModesV1 .cr3-locate {
    right:14px;
    bottom:158px;
    width:44px;
    height:44px;
    border-radius:16px;
    background:rgba(6,12,22,.78);
    box-shadow:0 10px 22px rgba(0,0,0,.18);
}

#cercaRoute3ModesV1 .cr3-bottom {
    left:0;
    right:0;
    bottom:0;
    max-height:33%;
    padding:0 14px calc(10px + env(safe-area-inset-bottom));
    border:0;
    border-radius:24px 24px 0 0;
    background:linear-gradient(180deg, rgba(4,10,18,.94), rgba(6,12,22,.98));
    box-shadow:0 -12px 30px rgba(0,0,0,.18);
    backdrop-filter:blur(14px);
}

#cercaRoute3ModesV1 .cr3-sheet-handle {
    width:44px;
    height:5px;
    margin:10px auto 10px;
    border-radius:999px;
    background:rgba(148,163,184,.45);
}

#cercaRoute3ModesV1 .cr3-empty {
    min-height:72px;
    padding:8px 4px 10px;
}

#cercaRoute3ModesV1 .cr3-route-kicker {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 4px;
}

#cercaRoute3ModesV1 .cr3-route-kicker small {
    color:#24d1ee;
    font-size:.58rem;
    font-weight:900;
    letter-spacing:.08em;
}

#cercaRoute3ModesV1 .cr3-route-destination {
    padding:4px 4px 0;
    color:#f8fafc;
    font-size:1rem;
    font-weight:800;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#cercaRoute3ModesV1 .cr3-route-score {
    min-width:auto;
    height:auto;
    padding:6px 10px;
    border-radius:14px;
    color:#fff;
    background:color-mix(in srgb,var(--cr3-score,#22c55e) 20%, rgba(255,255,255,.03));
    font-size:1.05rem;
    font-weight:900;
}

#cercaRoute3ModesV1 .cr3-route-score small { display:none; }

#cercaRoute3ModesV1 .cr3-route-main.compact {
    min-height:0;
    margin:8px 2px 0;
    padding:8px 10px;
    border-radius:14px;
    background:rgba(255,255,255,.035);
    gap:12px;
    font-size:.76rem;
}

#cercaRoute3ModesV1 .cr3-route-main.compact strong {
    font-size:1.1rem;
}

#cercaRoute3ModesV1 .cr3-alt-row.compact {
    padding:10px 2px 8px;
    gap:8px;
}

#cercaRoute3ModesV1 .cr3-alt {
    min-width:88px;
    padding:8px 10px;
    border-radius:14px;
    background:rgba(255,255,255,.025);
}

#cercaRoute3ModesV1 .cr3-alt small { display:none; }

#cercaRoute3ModesV1 .cr3-alt.active {
    background:rgba(36,209,238,.08);
    border-color:rgba(36,209,238,.24);
}

#cercaRoute3ModesV1 .cr3-start.compact {
    width:100%;
    min-height:58px;
    margin:0;
    padding:10px 14px;
    grid-template-columns:30px minmax(0,1fr) 20px;
    border-radius:18px;
    color:#06212b;
    background:#31d7f0;
}

#cercaRoute3ModesV1 .cr3-start.compact strong {
    font-size:.90rem;
    text-transform:none;
}

#cercaRoute3ModesV1 .cr3-start.compact small {
    color:#0d5160;
    font-size:.62rem;
}

#cercaRoute3ModesV1 .cr3-navigation-card.compact {
    padding:0 0 4px;
}

#cercaRoute3ModesV1 .cr3-nav-main {
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:10px;
}

#cercaRoute3ModesV1 .cr3-nav-main > strong:last-child {
    font-size:1rem;
}

#cercaRoute3ModesV1 .cr3-nav-context,
#cercaRoute3ModesV1 .cr3-solo-strip {
    min-height:38px;
    border-radius:14px;
}

#cercaRoute3ModesV1 .cr3-navigation-card > button {
    min-height:42px;
    border-radius:14px;
}

@media (max-width:380px) {
    #cercaRoute3ModesV1 .cr3-head h2 { font-size:.95rem; }
    #cercaRoute3ModesV1 .cr3-route-destination { font-size:.92rem; }
    #cercaRoute3ModesV1 .cr3-start.compact small { font-size:.57rem; }
}


/* ==========================================================
   CERCA RUTA V2.1 — NAVEGACIÓN LIMPIA + RADAR
   ========================================================== */

/* Durante navegación: buscador y modos desaparecen por completo. */
#cercaRoute3ModesV1.navigation-active .cr3-planner {
    display:none !important;
}

/* Header se hace más pequeño para dejar mapa visible. */
#cercaRoute3ModesV1.navigation-active .cr3-head {
    right:auto;
    width:min(250px,calc(100% - 82px));
    grid-template-columns:40px minmax(0,1fr);
    padding-right:8px;
}

#cercaRoute3ModesV1.navigation-active .cr3-head .cr3-live {
    display:none !important;
}

#cercaRoute3ModesV1.navigation-active .cr3-locate {
    bottom:166px;
}

/* Alerta tipo Waze: pequeña, flotante y solo durante recorrido. */
#cercaRoute3ModesV1 .cr3-road-alert {
    position:absolute;
    top:calc(max(10px,env(safe-area-inset-top)) + 66px);
    left:14px;
    right:14px;
    z-index:24;
    min-height:58px;
    padding:8px 10px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 20px;
    align-items:center;
    gap:9px;
    border:1px solid color-mix(in srgb,var(--cr3-road-color,#f59e0b) 42%,transparent);
    border-radius:18px;
    color:#f8fafc;
    background:rgba(5,12,23,.88);
    box-shadow:0 12px 28px rgba(0,0,0,.24);
    backdrop-filter:blur(12px);
    text-align:left;
    transform:translateY(-8px);
    opacity:0;
    transition:opacity .16s ease,transform .16s ease;
}

#cercaRoute3ModesV1 .cr3-road-alert[hidden] {
    display:none !important;
}

#cercaRoute3ModesV1 .cr3-road-alert.show {
    transform:translateY(0);
    opacity:1;
}

#cercaRoute3ModesV1 .cr3-road-alert > .material-icons-round:first-child {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:#fff;
    background:color-mix(in srgb,var(--cr3-road-color,#f59e0b) 78%,#111827);
    font-size:20px;
}

#cercaRoute3ModesV1 .cr3-road-alert > span:nth-child(2) {
    min-width:0;
    display:grid;
    gap:2px;
}

#cercaRoute3ModesV1 .cr3-road-alert strong {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.78rem;
}

#cercaRoute3ModesV1 .cr3-road-alert small {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#94a3b8;
    font-size:.57rem;
}

#cercaRoute3ModesV1 .cr3-road-alert > .material-icons-round:last-child {
    color:#94a3b8;
    font-size:18px;
}

/* Cuando todavía no se ha iniciado, el radar no ocupa nada. */
#cercaRoute3ModesV1:not(.navigation-active) .cr3-road-alert {
    display:none !important;
}

/* Bottom sheet durante navegación: todavía más compacto. */
#cercaRoute3ModesV1.navigation-active .cr3-bottom {
    max-height:27%;
    padding-left:14px;
    padding-right:14px;
}

#cercaRoute3ModesV1.navigation-active .cr3-nav-context,
#cercaRoute3ModesV1.navigation-active .cr3-solo-strip {
    min-height:34px;
    margin-top:6px;
    padding:5px 7px;
}

#cercaRoute3ModesV1.navigation-active .cr3-navigation-card > button {
    min-height:38px;
    margin-top:6px;
}