/* ============================================================
   JTC · capa de identidad y componentes propios del demo
   Amarillo #F7DF00 siempre con texto pizarra; pizarra con texto blanco.
   ============================================================ */
:root{--amarillo:#F7DF00;--amarillo-50:#FEF8CC;--amarillo-900:#5E5300}

/* gate */
.gate{background:radial-gradient(1200px 600px at 50% 40%,#22303E 0%,#16202A 60%,#0F171F 100%)}
.gate__bg i,.gate__bg i:nth-child(2),.gate__bg i:nth-child(3){background:linear-gradient(90deg,transparent,var(--amarillo) 40%,var(--amarillo) 60%,transparent)}
.gate__bg i:nth-child(1){opacity:.07}.gate__bg i:nth-child(2){opacity:.04}.gate__bg i:nth-child(3){opacity:.06}
.gate__ruta{position:absolute;left:0;right:0;bottom:10%;height:4px;background:repeating-linear-gradient(90deg,rgba(247,223,0,.55) 0 46px,transparent 46px 92px);animation:ruta 1.6s linear infinite;opacity:.35}
@keyframes ruta{from{background-position:0 0}to{background-position:-92px 0}}
.gate__logo{width:min(420px,78vw);filter:drop-shadow(0 18px 50px rgba(247,223,0,.22))}
.lg-anim svg{width:100%;height:auto;display:block;overflow:visible}
.lg-anim .lg-fondo{transform-origin:50% 50%;transform-box:fill-box;transform:scaleX(0);animation:lgFondo .7s cubic-bezier(.7,0,.3,1) .1s forwards}
.lg-anim .lg-marco{opacity:0;animation:fadeIn .4s ease .6s forwards}
.lg-anim .lg-l{fill:transparent;stroke:#283848;stroke-width:9;stroke-dasharray:2200;stroke-dashoffset:2200;animation:trazo 1.2s cubic-bezier(.4,0,.2,1) .7s forwards,relleno .45s ease 1.65s forwards}
.lg-anim .lg-l:nth-of-type(3){animation-delay:.82s,1.77s}.lg-anim .lg-l:nth-of-type(4){animation-delay:.94s,1.89s}
@keyframes lgFondo{to{transform:scaleX(1)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes trazo{to{stroke-dashoffset:0}}
@keyframes relleno{to{fill:#283848}}
.gate__logo .lema{font-family:var(--disp);color:#fff;font-size:21px;font-weight:600;margin-top:16px;opacity:0;animation:subir .6s ease 1.8s forwards}
.gate__logo .lema small{display:block;font-size:13px;color:#A9B4C0;font-weight:500;margin-top:2px;letter-spacing:.5px}
.gate__t{color:var(--amarillo);font-family:"Inter",sans-serif;font-weight:800;letter-spacing:6px;font-size:15px;margin-top:6px;animation-delay:1.9s}
.gate__s{color:#9AA6B2;animation-delay:2s}
.pin{animation-delay:2.1s}.gate__pie{animation-delay:2.3s}
.pin__cajas input{border-color:#3A4A5A;background:#101922;caret-color:var(--amarillo)}
.pin__cajas input:focus{border-color:var(--amarillo);box-shadow:0 0 0 4px rgba(247,223,0,.18)}
.pin__cajas.err input{border-color:#FF6B5E}
.pin__btn{background:var(--amarillo);color:#16202A;box-shadow:0 8px 24px rgba(247,223,0,.25)}
.pin__btn:hover{box-shadow:0 12px 30px rgba(247,223,0,.38)}
.pin__err{color:#FF8A80}

/* boot y wipe */
.boot{background:#16202A}
.boot__emb{width:190px;margin-bottom:22px}
.boot__l b{color:var(--amarillo)}
.boot__barra i{background:var(--amarillo)}
.wipe{background:var(--amarillo);overflow:hidden}
.wipe__emb{width:min(300px,60vw);height:auto}
.wipe__logo svg{width:100%;height:auto;display:block}

/* sidebar */
.marca__emb svg{filter:drop-shadow(0 4px 10px rgba(247,223,0,.3))}
.nav__it.on{background:rgba(247,223,0,.12)}
.nav__it.on::before{background:var(--amarillo)}
.nav__it .pin{background:var(--amarillo);color:#16202A}
.nav__it .pin--gris{background:#3A4A5A;color:#D6DCE2}
.side__brand,.side__pie{border-color:#2A3846}

/* componentes base recoloreados */
.mod::before{background:var(--amarillo);height:5px}
.mod:hover{border-color:#E0C400}
.mod:hover .mod__ico,.mod:hover .mod__ir{background:var(--amarillo);color:#16202A}
.mod--dark .mod__ico{background:rgba(247,223,0,.16);color:var(--amarillo)}
.mod--dark p,.mod--dark .mod__kpis div{color:#AEB8C3}
.hub-cab h2 span{color:#283848;background:var(--amarillo);padding:2px 12px;border-radius:3px;box-shadow:inset 0 0 0 4px #F7DF00,inset 0 0 0 8px #283848}
.hallazgo .num{color:#16202A;background:var(--amarillo);border-radius:8px;text-align:center;padding:7px 0;font-size:24px;box-shadow:inset 0 0 0 3px #283848}
.hallazgo code{font-size:11px;background:#FFF1F0;color:#A3261C;padding:2px 5px;border-radius:4px;word-break:break-word}
.hallazgo .sol{background:var(--amarillo-50);color:#3B3500;border-left-color:#C9B400}
.hallazgo .sol b{color:#16202A}
.card--rojo{background:linear-gradient(135deg,#283848 0%,#16202A 100%);border-color:#16202A;box-shadow:inset 0 5px 0 var(--amarillo),var(--sombra-2)}
.card--rojo .pblo b{color:var(--amarillo)}
.btn--rojo{background:var(--amarillo)!important;color:#16202A!important;border-color:#E0C400!important}
.chip--amarillo{background:var(--amarillo);color:#16202A;border-color:#E0C400}
.chip--rojo{background:#283848;color:#fff;border-color:#283848}
.kpi--amarillo::after{background:var(--amarillo)}
.barra i.amarillo{background:#E0C400}
.sub{font-size:11px;color:var(--tinta-45)}
select.sel{display:block;width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:600 13px Inter,sans-serif;margin-top:6px}
select.sel option{color:#16202A}
.sel-loc--col{display:flex;flex-direction:column;gap:6px}.sel-loc--col button{text-align:left}
.as-fab{background:#16202A;color:#fff;box-shadow:0 0 0 3px var(--amarillo),0 12px 30px rgba(22,32,42,.35)}
.as-fab svg{color:var(--amarillo)}

/* tira de fotos de la flota */
.tira-fotos{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:10px;margin:0 0 22px}
.tira-fotos figure{margin:0;border-radius:14px;overflow:hidden;height:150px;opacity:0;animation:modIn .6s cubic-bezier(.2,.8,.2,1) forwards;box-shadow:var(--sombra-1)}
.tira-fotos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 6s ease}
.tira-fotos figure:hover img{transform:scale(1.08)}
.tira-fotos__pie{grid-column:1/-1;font-size:11px;color:var(--tinta-45);margin-top:-2px}

/* mapa de Sudamérica */
.mapa-sa{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-l);padding:16px 18px;box-shadow:var(--sombra-1);min-width:0;overflow:hidden;margin-bottom:16px}
.hoy .mapa-sa,.g .mapa-sa{margin-bottom:0}
.mapa-sa h3{margin:0 0 2px;font-size:15px}
.mapa-sa p{margin:0 0 8px;font-size:12px;color:var(--tinta-45)}
.mapa-sa__scroll{max-width:100%;display:flex;justify-content:center}
.mapa-sa svg{width:100%;max-width:640px;height:auto;display:block}
.mapa-sa .mar{fill:#EAF1F7}
.mapa-sa .pais{fill:#F2F4F6;stroke:#C9D1DA;stroke-width:1.1}
.mapa-sa .pais--sirve{fill:#FFFFFF;stroke:#A9B4C0}
.mapa-sa .pais--py{fill:#FEF5A8;stroke:#283848;stroke-width:1.6}
.mapa-sa .pnom{font:700 15px Inter,sans-serif;fill:#B4BDC7;letter-spacing:3px}
.mapa-sa .pnom--py{fill:#5E5300;font-size:12px;letter-spacing:2px}
.mapa-sa .ruta{fill:none;stroke:#283848;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3000;stroke-dashoffset:3000;animation:dibRuta 2.2s cubic-bezier(.4,0,.2,1) forwards;opacity:.85}
.mapa-sa .ruta--off{opacity:.18}
.mapa-sa .ruta--foco{stroke:#E0A800;stroke-width:5;opacity:1}
@keyframes dibRuta{to{stroke-dashoffset:0}}
.mapa-sa .paso-f rect{fill:#fff;stroke:#E8632B;stroke-width:2.5}
.mapa-sa .paso-f--nuevo rect{fill:#FEF5A8;stroke:#C9A800;stroke-dasharray:3 2}
.mapa-sa .truck{stroke:#fff;stroke-width:2;animation:latidoT 2.4s ease-in-out infinite}
.mapa-sa .truck:nth-child(3n){animation-delay:-.8s}.mapa-sa .truck:nth-child(3n+1){animation-delay:-1.6s}
@keyframes latidoT{0%,100%{opacity:1}50%{opacity:.5}}
.mapa-sa .dest{cursor:pointer}
.mapa-sa .dest circle:not(.halo){fill:#283848;stroke:#F7DF00;stroke-width:3}
.mapa-sa .dest--nac circle:not(.halo){fill:#fff;stroke:#283848;stroke-width:2.5}
.mapa-sa .dest .halo{fill:#F7DF00;opacity:0;transition:opacity .2s}
.mapa-sa .dest:hover .halo{opacity:.6}
.mapa-sa .ciu{font:800 15px Inter,sans-serif;fill:#16202A;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.mapa-sa .det{font:600 12.5px Inter,sans-serif;fill:#55606C;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.mapa-sa .sede rect{fill:#F7DF00;stroke:#283848;stroke-width:3.5}
.mapa-sa .sede text{font:900 17px Bitter,serif;fill:#283848}
.mapa-sa .sede__pulso{fill:#F7DF00;opacity:.4;transform-origin:center;transform-box:fill-box;animation:pulsoSede 2.4s ease-out infinite}
@keyframes pulsoSede{0%{transform:scale(.4);opacity:.6}100%{transform:scale(1.6);opacity:0}}
.leyenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--tinta-45);margin-top:8px}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.leyenda i{display:inline-block;width:10px;height:10px;border-radius:50%}
.leyenda .rombo{background:#fff;border:2px solid #E8632B;transform:rotate(45deg);border-radius:1px}
.hoy{grid-template-columns:1.2fr 1fr}
.hoy__kpis{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr}

/* navegador falso (portada actual) */
.navegador{border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--sombra-2)}
.navegador__barra{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#EEF1F4;border-bottom:1px solid var(--linea)}
.navegador__barra i{width:10px;height:10px;border-radius:50%;background:#C9D1DA;flex:0 0 10px}
.navegador__barra i:nth-child(1){background:#FF6159}.navegador__barra i:nth-child(2){background:#FFBD2E}.navegador__barra i:nth-child(3){background:#28C941}
.navegador__barra span{margin-left:10px;font:500 11.5px var(--mono);color:#55606C;background:#fff;border-radius:6px;padding:3px 10px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.php-warn{font:12px/1.5 "Times New Roman",serif;color:#000;padding:10px 14px;background:#fff;border-bottom:1px dashed #E8632B;word-break:break-word;animation:parpadeo 2.6s ease-in-out infinite}
@keyframes parpadeo{0%,100%{background:#fff}50%{background:#FFF1E8}}
.navegador__hero{min-height:180px;background-size:cover;background-position:center;padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}
.navegador__logo{width:110px;margin-bottom:auto}.navegador__logo svg{width:100%;height:auto;display:block}
.navegador__hero b{font-family:var(--disp);font-size:20px}
.navegador__hero span{font-size:12px;opacity:.92}
.navegador__form{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;background:#F4F6F8}
.navegador__form span{font-size:11px;padding:6px 10px;border:1px solid var(--linea);border-radius:6px;background:#fff;color:#55606C}
.navegador__form .cap{border-color:#E8632B;color:#A3261C;font-weight:700}

/* teléfonos (portal y app del chofer) */
.telefonos{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;min-width:0}
.telefono-env{display:flex;justify-content:center;padding:6px 0}
.telefono{width:270px;max-width:100%;border-radius:34px;background:#0F171F;padding:12px;box-shadow:0 24px 60px rgba(22,32,42,.3),inset 0 0 0 2px #2A3846;color:#16202A}
.telefono>*:not(.telefono__isla){background:#fff}
.telefono__isla{width:84px;height:22px;border-radius:14px;background:#000;margin:0 auto 8px}
.tel__cab{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:22px 22px 0 0;background:#16202A!important;color:#fff}
.tel__cab svg{width:32px;height:32px;flex:0 0 32px}
.tel__cab b{display:block;font-size:13px}.tel__cab span{font-size:11px;color:#A9B4C0}
.tel__mapa{height:170px;overflow:hidden;background:#EAF1F7!important}
.tel__mapa svg{width:100%;height:100%;display:block}
.tel__eta{padding:12px 14px;border-bottom:1px solid var(--linea)}
.tel__eta small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--tinta-45);font-weight:700}
.tel__eta b{font-family:var(--disp);font-size:30px;line-height:1.1;display:block}
.tel__eta span{font-size:11.5px;color:var(--tinta-45)}
.tel__hitos{padding:10px 14px}
.tel__hitos div{display:flex;align-items:center;gap:10px;font-size:12px;padding:5px 0;color:var(--tinta-45)}
.tel__hitos i{width:12px;height:12px;border-radius:50%;border:2px solid #C9D1DA;flex:0 0 12px}
.tel__hitos .ok{color:#16202A;font-weight:600}.tel__hitos .ok i{background:#12A150;border-color:#12A150}
.tel__docs{display:flex;gap:6px;padding:10px 14px 16px;border-radius:0 0 22px 22px;flex-wrap:wrap}
.tel__docs span{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:5px 8px;border-radius:6px;background:var(--amarillo-50);color:#3B3500}
.tel__docs svg{width:13px;height:13px}
.tel__viaje{padding:14px;border-bottom:1px solid var(--linea)}
.tel__viaje small{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--tinta-45);font-weight:700}
.tel__viaje b{display:block;font-family:var(--disp);font-size:18px;margin:2px 0}
.tel__viaje span{font-size:11.5px;color:var(--tinta-45)}
.tel__check{padding:8px 14px}
.tel__check div{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:7px 0;border-bottom:1px solid #F0F2F5}
.tel__check i{width:20px;height:20px;border-radius:6px;border:2px solid #C9D1DA;display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff;flex:0 0 20px}
.tel__check .ok i{background:#12A150;border-color:#12A150}
.tel__btn{padding:14px;text-align:center;font-weight:800;font-size:13.5px;background:var(--amarillo)!important;color:#16202A;border-radius:0 0 22px 22px}
.tel__btn--ok{background:#12A150!important;color:#fff}
.tel__foto{height:150px;background-size:cover;background-position:center;position:relative}
.tel__foto span{position:absolute;left:10px;bottom:10px;font-size:10.5px;font-weight:700;background:rgba(22,32,42,.8);color:#fff;padding:3px 8px;border-radius:6px}
.tel__firma{padding:10px 14px;border-bottom:1px solid var(--linea)}
.tel__firma svg{width:100%;height:56px;display:block;background:#F7F8FA;border-radius:8px}
.tel__firma path{stroke-dasharray:500;stroke-dashoffset:500;animation:trazo 2.2s ease .4s forwards}
.tel__firma span{font-size:11px;color:var(--tinta-45)}

/* certificado de frío */
.cert{border:2px solid #283848;border-radius:12px;padding:14px;background:linear-gradient(180deg,#fff,#F9FAFB)}
.cert__cab{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:3px solid var(--amarillo);margin-bottom:8px}
.cert__cab svg{width:74px;height:auto;flex:0 0 74px}
.cert__cab b{display:block;font-size:13px}.cert__cab span{font-size:11px;color:var(--tinta-45)}
.cert__f{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:5px 0;border-bottom:1px dashed #E3E7EC}
.cert__f span{color:var(--tinta-45)}
.cert__sello{margin-top:10px;text-align:center;font:800 12px Inter,sans-serif;letter-spacing:2px;color:#12A150;border:2px solid #12A150;border-radius:8px;padding:6px;transform:rotate(-2deg)}

/* totales del costo de viaje */
.total-l{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:10px 0 0;margin-top:10px;border-top:1px solid var(--linea)}
.total-l b{font-family:var(--disp);font-size:18px}

.g>*,.card,.lienzo-chart{min-width:0}
@media (max-width:1180px){.tira-fotos{grid-template-columns:repeat(3,1fr)}.tira-fotos figure:nth-child(n+4){display:none}.telefonos{grid-template-columns:1fr 1fr}.hoy{grid-template-columns:1fr}}
@media (max-width:820px){.tira-fotos{grid-template-columns:1fr 1fr}.tira-fotos figure:first-child{grid-column:1/-1}.tira-fotos figure{height:120px}.hoy__kpis{grid-auto-rows:auto}.hallazgo{grid-template-columns:44px 1fr}.hallazgo .num{font-size:19px}.gate__logo .lema{font-size:17px}.telefonos{grid-template-columns:1fr}.mapa-sa .ciu{font-size:20px}.mapa-sa .det{font-size:16px}}
.sin-anim .mod,.sin-anim .card,.sin-anim .fase,.sin-anim .hallazgo,.sin-anim .tira-fotos figure{opacity:1!important;transform:none!important;animation:none!important}
@media (max-height:820px){.nav__it{padding:6px 10px;font-size:12.5px}.nav__rot{padding:9px 10px 3px}.side__pie{padding:8px 18px 10px;font-size:10.5px}.side__brand{padding:12px 18px 10px}}
.h280{height:280px}.h320{height:320px}
.card--negro .simx__res{color:var(--tinta)}.card--negro .simx__res .simx__o b{color:var(--tinta)}.card--negro .simx__res .simx__exp{color:var(--tinta-70)}
.simx__res{border-color:#E0C400;box-shadow:inset 0 4px 0 #F7DF00,var(--sombra-1)}
.tel__mapa{background:#D6E4F0!important}
.pblo b>span[data-cuenta]{font-size:inherit;color:inherit;display:inline;font-weight:inherit}
.precios--junto .pblo b,.precios--junto .pblo b>span[data-cuenta]{color:var(--amarillo)}

/* recorrido guiado v2 */
.tour-spot{box-shadow:0 0 0 9999px rgba(15,23,31,.66),0 0 0 3px var(--amarillo),0 0 28px 6px rgba(247,223,0,.35);transition:top .25s,left .25s,width .25s,height .25s,opacity .3s}
.tour-card{border-top:5px solid var(--amarillo);transition:top .3s cubic-bezier(.2,.8,.2,1),left .3s cubic-bezier(.2,.8,.2,1)}
.tour-card__n{color:#16202A}
.tour-card__cab-der{display:flex;align-items:center;gap:6px}
.tour-card__auto{font:700 11px Inter,sans-serif;padding:5px 10px;border-radius:99px;background:var(--fondo-2);color:var(--tinta-70)}
.tour-card__auto.on{background:#16202A;color:var(--amarillo)}
.tour-card__dato{display:inline-block;font:800 11.5px Inter,sans-serif;letter-spacing:.2px;background:var(--amarillo);color:#16202A;padding:4px 10px;border-radius:6px;margin:2px 0 8px;box-shadow:inset 0 0 0 2px #283848}
.tour-card__puntos{display:flex;gap:6px;margin:14px 0 12px}
.tour-card__puntos button{flex:1;height:6px;border-radius:99px;background:var(--fondo-2);transition:background .3s,transform .2s}
.tour-card__puntos button.visto{background:#283848}
.tour-card__puntos button.on{background:var(--amarillo);box-shadow:inset 0 0 0 1px #C9A800}
.tour-card__puntos button:hover{transform:scaleY(1.6)}
.tour-card__fin{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.tour-card__fin .btn{justify-content:center;text-align:center}
.tour-card__teclas{font-size:10.5px;color:var(--tinta-25);text-align:right;margin-top:8px}
.tour-card--dock{top:auto!important;bottom:12px;left:12px!important;right:12px;width:auto!important;max-height:48vh;overflow:auto}
.tour-card--dock .tour-card__teclas{display:none}
@media (max-width:820px){.tour-card h4{font-size:19px}.tour-card p{font-size:12.5px}}