/* ===== MARCA CoAsiste Rumbo: paleta y tipografía (el logo está en marca/) ===== */
:root{
  --brand-ink:#121316;                  /* tinta: franja, textos fuertes */
  --brand-accent:#0B6E5F;               /* verde rumbo: en ruta, botones, ruta autorizada, pestaña activa */
  --brand-accent-soft:rgba(11,110,95,.12);
  --brand-ground:#f4f5f2;               /* papel */
  --brand-font:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --logo-h:32px;
  /* estados: el rojo es solo desvío y pánico */
  --st-fuera:#D7263D; --st-ruta:#0B6E5F; --st-tour:#2C6BD6; --st-det:#E0A800; --st-base:#6B7280;
  --route-auth:#0B6E5F;
  --speed-1:#2C6BD6; --speed-2:#E0A800; --speed-3:#6D28D9;
  --fuera-soft:#FCE4E7; --fuera-line:#F4B8C0; --amber-soft:#FDF3D2; --amber-ink:#7A5B00;
}
/* ===== fin de MARCA ===== */
:root{
  --ink:var(--brand-ink); --ink2:#34443F; --muted:#55605C; --ground:var(--brand-ground); --card:#FFFFFF; --line:#DDD8CC; --line2:#ECE8DE;
  --accent:var(--brand-accent); --ruta:var(--st-ruta); --tour:var(--st-tour); --det:var(--st-det); --base:var(--st-base); --red:var(--st-fuera);
  --nav-h:64px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--brand-font);-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
button,select{font:inherit;color:inherit}
h1{font-size:22px;margin:0 0 4px;line-height:1.2}
h2{font-size:16px;margin:22px 0 8px}
.sub{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.4}
.note{color:var(--muted);font-size:13px;line-height:1.45;margin:12px 0 0}
.pad{padding:14px 16px 0}

.app{min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}
.demo-banner{background:var(--ink);color:#F4F2EC;font-size:12px;text-align:center;padding:6px 16px;letter-spacing:.02em}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.brand-wrap{display:flex;align-items:center;gap:10px}
.brand-logo{height:var(--logo-h);width:var(--logo-h);display:block}
.map-mark{position:absolute;left:8px;bottom:24px;z-index:2;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.map-mark img{width:26px;height:26px}
.brand{display:flex;flex-direction:column;gap:2px}
.brand strong{font-size:18px}
.brand span{font-size:12px;color:var(--muted)}
.live{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--brand-accent)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ruta);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--card);border-top:1px solid var(--line);padding:4px 2px env(safe-area-inset-bottom)}
.tabs button{position:relative;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;font-size:11px;color:#4A524F;cursor:pointer;padding:0}
.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs button.on{color:var(--accent);font-weight:700}
.badge{position:absolute;top:4px;left:calc(50% + 6px);background:var(--red);color:#fff;font-size:10px;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}

main{flex:1;display:flex;flex-direction:column}
.view{display:none}
.view.on{display:block}

.counts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.counts button{border:0;border-radius:8px;padding:6px 0;text-align:center;cursor:pointer;outline-offset:2px}
.counts button.sel{box-shadow:inset 0 0 0 2px var(--ink)}
.counts b{display:block;font-size:18px}
.counts span{font-size:11px;color:var(--ink2);line-height:1.15;display:block}
.c-ruta{background:var(--brand-accent-soft)}.c-ruta b{color:var(--brand-accent)}
.c-tour{background:#E3ECFA}.c-tour b{color:#2358B8}
.c-det{background:var(--amber-soft)}.c-det b{color:var(--amber-ink)}
.c-base{background:#ECEBE6}.c-base b{color:#4A524F}
.c-fuera{background:var(--fuera-soft)}.c-fuera b{color:var(--st-fuera)}
.value{background:var(--card);padding:12px 16px 4px}
.value p{margin:0 0 10px;font-size:15px;line-height:1.35}
.offroute{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--fuera-line);background:var(--fuera-soft);color:var(--ink);border-radius:12px;padding:10px 12px;min-height:48px;cursor:pointer;font-size:13px;line-height:1.35}
.offroute b{color:var(--st-fuera)}
.or-dot{width:12px;height:12px;border-radius:50%;background:var(--st-fuera);flex-shrink:0;animation:pulse 1.2s infinite}
.or-go{margin-left:auto;font-weight:700;color:var(--st-fuera);flex-shrink:0}
.lg-auth{background:var(--brand-accent-soft)!important;box-shadow:inset 0 0 0 1px var(--route-auth);height:8px!important}
.st-fuera{background:var(--st-fuera)}

.map-wrap{position:relative;height:52vh;min-height:300px;background:#E8EDE3}
.map-wrap.small{height:40vh;min-height:260px}
.map{position:absolute;inset:0}
.maplibregl-ctrl-attrib{font-size:10px}

.sheet{background:var(--card);border-radius:16px 16px 0 0;margin-top:-14px;position:relative;z-index:2;padding:10px 16px 16px}
.grip{width:40px;height:4px;border-radius:2px;background:#D3CEC2;margin:0 auto 10px}
.unit-list{display:flex;flex-direction:column}
.unit{display:flex;align-items:center;gap:10px;padding:10px 0;border:0;border-bottom:1px solid var(--line2);background:none;text-align:left;cursor:pointer;width:100%;min-height:52px}
.unit:last-child{border-bottom:0}
.unit .chip{flex-shrink:0}
.unit .u-main{flex:1;min-width:0}
.unit .u-main strong{display:block;font-size:15px}
.unit .u-main small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit .u-speed{text-align:right;font-size:13px;font-weight:600;white-space:nowrap}
.unit .u-speed small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.chip{display:inline-block;width:12px;height:12px;border-radius:50%}
.st-ruta{background:var(--ruta)}.st-tour{background:var(--tour)}.st-det{background:var(--det)}.st-base{background:var(--base)}

.detail{padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.d-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.d-top strong{font-size:20px}
.d-top small{font-size:12px;color:var(--muted);white-space:nowrap}
.d-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.d-grid small{display:block;font-size:11px;color:var(--muted)}
.d-grid b{font-size:14px}
.d-trip{font-size:13px;color:var(--ink2);margin:0 0 10px}
.d-actions{display:flex;gap:8px}
.d-actions .btn{flex:1}
.d-close{border:0;background:none;color:var(--muted);font-size:13px;padding:8px 0 0;cursor:pointer;text-decoration:underline}

.btn{min-height:44px;border-radius:10px;border:1px solid var(--ink);background:var(--card);color:var(--ink);font-weight:600;font-size:14px;padding:0 14px;cursor:pointer}
.btn.dark{background:var(--brand-accent);border-color:var(--brand-accent);color:#fff}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:transparent}
.btn.wide{width:100%;margin-top:12px}

.marker{display:flex;align-items:center;gap:4px;color:#fff;font-size:12px;font-weight:700;padding:2px 6px;border-radius:12px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);white-space:nowrap;cursor:pointer;font-family:var(--brand-font)}
.marker.sel{outline:3px solid var(--ink);outline-offset:1px}
.marker.alarm{animation:alarm 1s infinite}
@keyframes alarm{50%{box-shadow:0 0 0 8px rgba(215,38,61,.35)}}
.pin-hotel{background:var(--ink);color:#fff;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px;border:2px solid #fff;white-space:nowrap}
.stop-dot{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--ink)}
.play-dot{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}

.alerts{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.alert{background:var(--card);border-radius:12px;padding:12px;display:flex;gap:12px;align-items:flex-start;border:1px solid transparent;cursor:pointer}
.alert.hot{border-color:var(--fuera-line)}
.alert.new{animation:flash 1.2s 2}
@keyframes flash{50%{background:var(--fuera-soft)}}
.a-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;font-size:13px}
.a-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.alert strong{display:block;font-size:15px}
.badge[hidden]{display:none}
.a-unit{color:var(--ink);font-weight:700}
.alert div span{display:block;font-size:13px;color:var(--ink2);line-height:1.35}
.k-panico{background:var(--fuera-soft);color:var(--st-fuera)}
.k-vel{background:var(--amber-soft);color:var(--amber-ink)}
.k-parada{background:var(--amber-soft);color:var(--amber-ink)}
.k-zona{background:#E3ECFA;color:#2358B8}
.k-mant{background:#ECEBE6;color:#4A524F}
.k-fuera{background:var(--fuera-soft);color:var(--st-fuera)}

.wa{background:#E9E3D6;border-radius:14px;overflow:hidden;margin-bottom:8px}
.wa-head{display:flex;align-items:center;gap:10px;background:var(--brand-accent);color:#fff;padding:10px 12px}
.wa-head small{display:block;font-size:11px;opacity:.8}
.wa-av{width:34px;height:34px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wa-av img{width:26px;height:26px}
.wa-body{padding:12px;display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto}
.bubble{background:#fff;border-radius:10px 10px 10px 2px;padding:9px 12px;font-size:14px;line-height:1.4;max-width:92%;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bubble b{color:var(--red)}
.bubble .b-link{color:#1C6FB8;text-decoration:underline}
.bubble .b-time{display:block;text-align:right;font-size:11px;color:#7A847F}

.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);margin-bottom:12px}
.field select{min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:0 10px;font-size:15px;color:var(--ink)}
.legend{position:absolute;left:8px;top:8px;background:rgba(255,255,255,.94);border-radius:8px;padding:5px 8px;font-size:11px;display:flex;gap:10px;flex-wrap:wrap;z-index:2;max-width:calc(100% - 60px)}
.legend i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:4px;vertical-align:middle}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.stats div{background:var(--card);border-radius:10px;padding:8px 10px}
.stats small{display:block;font-size:11px;color:var(--muted)}
.stats b{font-size:17px}
.timeline{list-style:none;margin:12px 0 0;padding:4px 12px;background:var(--card);border-radius:12px}
.timeline li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2);font-size:14px;line-height:1.35}
.timeline li:last-child{border-bottom:0}
.timeline time{width:46px;flex-shrink:0;font-weight:700}
.timeline em{font-style:normal;color:var(--muted)}

.tourist{margin:0 16px;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.t-head{padding:14px 16px}
.t-lang{display:flex;gap:6px;margin-bottom:10px}
.t-lang button{min-height:36px;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:0 12px;font-size:13px;cursor:pointer}
.t-lang button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.t-head small{color:var(--muted);font-size:13px}
.t-head h1{font-size:24px;margin:4px 0 0}
.t-eta{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:15px}
.t-eta strong{font-size:44px;line-height:1;color:var(--accent)}
.t-eta.arrived strong{font-size:26px;color:var(--ruta)}
.map-wrap.tmap{height:42vh;min-height:250px}
.t-info{margin:0;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.t-info div{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.t-info dt{color:var(--muted)}
.t-info dd{margin:0;font-weight:600;text-align:right}
.t-exp{margin:0 16px;padding:10px 0 14px;border-top:1px solid var(--line2);font-size:12px;color:var(--muted)}

.card{background:var(--card);border-radius:12px;padding:12px}
.bar{display:flex;align-items:center;gap:8px;padding:5px 0}
.bar .b-l{width:62px;font-size:13px;font-weight:600;flex-shrink:0}
.bar .b-t{flex:1;height:10px;background:var(--line2);border-radius:5px;overflow:hidden}
.bar .b-t i{display:block;height:100%;background:var(--ink);border-radius:5px}
.bar .b-v{width:62px;text-align:right;font-size:13px;flex-shrink:0}
.row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line2)}
.row:last-child{border-bottom:0}
.row strong{display:block;font-size:14px}
.row small{display:block;font-size:12px;color:var(--muted)}
.row .r-v{font-size:13px;font-weight:700;text-align:right;white-space:nowrap}
.r-red{color:var(--red)}.r-amb{color:var(--amber-ink)}

.foot{padding:20px 16px 16px;text-align:center;font-size:12px;color:var(--muted)}
.foot a{color:var(--ink)}

.toast{position:fixed;left:12px;right:12px;top:12px;z-index:50;background:#fff;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.25);padding:12px 14px;font-size:14px;line-height:1.35;transform:translateY(calc(-100% - 40px));visibility:hidden;transition:transform .35s ease,visibility .35s;max-width:420px;margin:0 auto}
.toast.show{transform:none;visibility:visible}
.toast b{color:var(--red)}
.toast small{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}

@media (min-width: 960px){
  :root{--nav-h:0px}
  .app{max-width:1280px;margin:0 auto;padding-bottom:0;background:var(--ground)}
  .tabs{position:sticky;top:0;bottom:auto;display:flex;gap:4px;padding:6px 12px;border-top:0;border-bottom:1px solid var(--line)}
  .tabs button{flex-direction:row;gap:8px;min-height:44px;font-size:14px;padding:0 14px;border-radius:10px}
  .tabs button.on{background:var(--brand-accent-soft)}
  .badge{position:static;margin-left:2px}
  #v-mapa.on{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto auto 1fr;height:calc(100dvh - 150px);min-height:620px}
  #v-mapa .counts,#v-mapa .value{grid-column:1 / 3}
  #v-mapa .value{display:flex;align-items:center;gap:16px;padding:12px 16px}
  #v-mapa .value p{margin:0;flex:1}
  #v-mapa .offroute{width:auto;flex:1}
  #v-mapa .map-wrap{height:auto;min-height:0}
  #v-mapa .sheet{margin:0;border-radius:0;overflow:auto;border-left:1px solid var(--line)}
  #v-mapa .grip{display:none}
  #v-alertas.on .pad,#v-reporte.on .pad{max-width:760px;margin:0 auto}
  #v-historial.on{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"head head" "map side"}
  #v-historial .pad:first-child{grid-area:head}
  #v-historial .map-wrap{grid-area:map;height:auto;min-height:560px}
  #v-historial .pad:last-child{grid-area:side;padding-top:0}
  #v-turista.on{max-width:460px;margin:0 auto}
  .toast{left:auto;right:24px;top:24px;width:380px}
}