/* Marsa AURA. Brand tokens from the Marsa brand book (siielt-com/marsacorp packages/ui/tokens.ts):
   Main Blue for actions, Main Red only for danger/critical, Instrument Sans + Chivo Mono.
   Same type family as the Marsa Corp platform. */
:root {
  /* Surfaces are neutral near-black / graphite; brand blue is kept for actions and the route. */
  --asphalt: #0c0c0e;
  --graphite: #18181b;
  --navy: #141c3b;
  --blue: #243bd4;
  --blue-2: #3a52f0;
  --red: #ff2e2e;
  --amber: #f5b400;
  --line: #ededf0;
  --fog: #9a9aa5;
  --ok: #2fbf7d;
  --glass: rgb(20 20 23 / .82);
  --hair: rgb(255 255 255 / .09);
  --r: 18px;
  --font: "Instrument Sans", "Helvetica Neue", system-ui, sans-serif;
  --mono: "Chivo Mono", ui-monospace, Menlo, monospace;
  --sign: "Instrument Sans", "Helvetica Neue", sans-serif;
  font-family: var(--font);
  color: var(--line);
  background: var(--asphalt);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; min-height: 100dvh }
button, input, select { font: inherit; color: inherit }
button { cursor: pointer; border: 0; background: none }
button:disabled { cursor: default; opacity: .45 }
:focus-visible { outline: 3px solid #7d8cff; outline-offset: 2px }
input, select { border: 1px solid var(--hair); border-radius: 12px; background: rgb(255 255 255 / .06); min-height: 44px; padding: 10px 14px; width: 100% }
input::placeholder { color: var(--fog) }
.fine { font-size: 12px; line-height: 1.45; color: var(--fog); margin: 0 }
.error { color: #ff6b70; font-size: 14px; min-height: 18px; margin: 8px 0 }

.btn { min-height: 46px; padding: 10px 18px; border-radius: 14px; font-weight: 700; letter-spacing: .1px; transition: background .15s, transform .1s }
.btn:active:not(:disabled) { transform: scale(.98) }
.btn.primary { background: var(--blue); color: #fff; box-shadow: 0 2px 6px rgb(36 59 212 / .3) }
.btn.primary:hover:not(:disabled) { background: var(--blue-2) }
.btn.quiet { background: rgb(255 255 255 / .08); color: var(--line) }
.btn.quiet:hover { background: rgb(255 255 255 / .14) }
.btn.danger { background: rgb(255 46 46 / .14); color: #ff7070 }
.btn.wide { width: 100% }
.btn.send-action { min-height: 56px; background: var(--amber); color: #111; font-size: 17px; font-weight: 700; border: 2px solid transparent; touch-action: manipulation }
.btn.send-action:hover:not(:disabled) { background: #ffc533 }
.btn.send-action:disabled { opacity: 1; background: #35353e; color: #bdbdc7; border-color: #777783 }
.btn.send-action:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #243bd4 }

/* ================= driver ================= */
.stage { --edge: 20px; --edge-left: max(var(--edge), env(safe-area-inset-left)); --edge-right: max(var(--edge), env(safe-area-inset-right)); --edge-top: max(var(--edge), env(safe-area-inset-top)); --edge-bottom: max(var(--edge), env(safe-area-inset-bottom)); --report-bottom: calc(104px + env(safe-area-inset-bottom)); position: relative; overflow: hidden; background: #0c0c0e; height: 100dvh }
.stage #map { position: absolute; inset: 0 }
.nomap { display: grid; place-items: center; height: 100%; text-align: center; color: var(--fog); font-size: 16px; padding: 24px }
.nomap b { display: block; color: var(--line); font-size: 20px; margin-bottom: 6px }

/* --- the sign: next risk / live alert --- */
.sign { --c: var(--amber); position: absolute; top: var(--edge-top); left: var(--edge-left); z-index: 3; width: min(440px, calc(100% - var(--edge-left) - var(--edge-right)));
  display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: center;
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-radius: var(--r); padding: 16px 20px 16px 16px; box-shadow: 0 12px 40px rgb(0 0 0 / .45); transition: background .3s }
.diamond { width: 56px; height: 56px; margin: 9px; transform: rotate(45deg); border-radius: 9px; background: var(--c); border: 3px solid #111; outline: 3px solid var(--c); display: grid; place-items: center }
.diamond svg { transform: rotate(-45deg); width: 32px; height: 32px; color: #111 }
.sign-body { display: flex; flex-direction: column; min-width: 0 }
.sign-kind { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; color: var(--c) }
.sign-dist { font-family: var(--sign); font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -1px; margin: 4px 0 2px; font-variant-numeric: tabular-nums }
.sign-title { font-size: 17px; font-weight: 700; line-height: 1.25 }
.sign-note { font-size: 14px; color: #c4cadb; margin-top: 4px; line-height: 1.35 }
.sign-note:empty { display: none }
.sign.clear { --c: var(--ok) }
.sign.alerting { background: rgb(14 18 32 / .94); box-shadow: 0 0 0 3px var(--c), 0 16px 60px rgb(0 0 0 / .6); animation: alertIn .45s cubic-bezier(.2,1.4,.4,1) }
.sign.alerting .diamond { animation: flash 1s ease-in-out 3 }
.sign.critical { --c: var(--red) }
.sign.critical .diamond svg { color: #fff }
@keyframes alertIn { from { transform: translateY(-12px) scale(.96); opacity: .4 } }
@keyframes flash { 50% { filter: brightness(1.5); outline-width: 7px } }

/* --- right rail on the map: speed-limit roundel and recenter --- */
.rail { position: absolute; top: var(--edge-top); right: var(--edge-right); z-index: 3; display: grid; gap: 12px; justify-items: end }
.roundel { width: 74px; height: 74px; border-radius: 50%; background: #fff; border: 8px solid var(--red); display: grid; place-items: center; box-shadow: 0 6px 20px rgb(0 0 0 / .4) }
.roundel span { font-family: var(--sign); color: #111; font-weight: 900; font-size: 27px; letter-spacing: -1px }
.fab { width: 50px; height: 50px; border-radius: 50%; background: var(--glass); backdrop-filter: blur(12px); display: grid; place-items: center; color: var(--line); box-shadow: 0 6px 20px rgb(0 0 0 / .4) }

/* --- bottom sheet: corridor choice --- */
.sheet-panel { position: absolute; left: var(--edge-left); bottom: var(--edge-bottom); z-index: 3; width: min(460px, calc(100% - var(--edge-left) - var(--edge-right))); max-height: calc(100% - var(--edge-top) - var(--edge-bottom)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-radius: 24px; padding: 10px 20px 18px; box-shadow: 0 16px 50px rgb(0 0 0 / .5) }
.grabber { width: 38px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .22); margin: 0 auto 14px }
.sheet-panel h1 { font-size: 24px; font-weight: 800; margin: 0 0 12px; letter-spacing: -.3px }
.corridors { display: grid; gap: 8px }
.corridor { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .05); border: 2px solid transparent; transition: background .15s, border-color .15s }
.corridor:hover { background: rgb(255 255 255 / .09) }
.corridor.on { border-color: var(--blue-2); background: rgb(36 59 212 / .18) }
.shield { min-width: 52px; height: 40px; padding: 0 8px; border-radius: 8px; background: #fff; color: #111; font-family: var(--sign); font-weight: 900; font-size: 15px; display: grid; place-items: center; border: 2px solid #111; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #111 }
.corridor b { display: block; font-size: 16px; font-weight: 700 }
.corridor > span { min-width: 0; overflow-wrap: anywhere }
.corridor small { color: var(--fog); font-size: 13px }
.corridor .dot { color: var(--amber); font-weight: 700 }
.corridor .meta { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--fog); white-space: nowrap }
.corridor .meta b { font-family: var(--font); font-size: 17px; color: var(--line) }
.sheet-actions { display: flex; gap: 10px; margin: 14px 0 10px }
.seg { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px; border-radius: 14px; background: rgb(255 255 255 / .06); font-size: 13px; color: var(--fog) }
.seg select { border: 0; background: transparent; min-height: 44px; width: auto; padding: 0 6px; font-weight: 700; color: var(--line) }
.seg select option { color: #111 }
.sheet-actions .btn { flex: 1 }

/* --- trip HUD --- */
.hud { position: absolute; left: var(--edge-left); bottom: var(--edge-bottom); z-index: 3; width: min(560px, calc(100% - var(--edge-left) - var(--edge-right) - 130px)); display: grid; grid-template-columns: auto 1fr auto auto; gap: 18px; align-items: center;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-radius: 22px; padding: 12px 12px 12px 22px; box-shadow: 0 16px 50px rgb(0 0 0 / .5) }
.speed { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums }
.speed b { font-family: var(--sign); font-size: 40px; font-weight: 900; letter-spacing: -1.5px; line-height: 1; min-width: 2ch; text-align: right }
.speed span { color: var(--fog); font-size: 14px; font-weight: 600 }
.hud.over .speed b { color: var(--red) }
.trip b { display: block; font-family: var(--sign); color: var(--ok); font-size: 24px; font-weight: 800; line-height: 1.1 }
.trip { min-width: 0 }
.trip > span { color: var(--fog); font-family: var(--mono); font-size: 13px; white-space: nowrap }
.iconbtn-dark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgb(255 255 255 / .08); color: var(--line) }
.iconbtn-dark:hover { background: rgb(255 255 255 / .14) }
.iconbtn-dark.on { background: var(--amber); color: #111 }

/* --- calm state: no risk nearby --- */
.calm { position: absolute; top: 20px; left: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(14px); font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgb(0 0 0 / .35) }
.calm i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgb(47 191 125 / .2) }
.corner { position: absolute; left: 20px; top: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; color: var(--line); text-decoration: none; padding: 8px 12px; border-radius: 12px; background: var(--glass); backdrop-filter: blur(12px); font-weight: 700; letter-spacing: 3px; font-size: 13px }
.corner img { width: 18px; height: 18px }
body.on-trip .corner { top: auto; bottom: 108px; left: 20px; opacity: .85 }

/* --- report button (Waze-style) --- */
.report-fab { position: absolute; right: var(--edge-right); bottom: var(--edge-bottom); z-index: 4; width: 112px; height: 112px; border-radius: 50%; background: var(--amber); color: #111;
  display: grid; place-content: center; justify-items: center; gap: 2px; font-weight: 800; font-size: 14px; box-shadow: 0 12px 34px rgb(245 180 0 / .35), 0 8px 24px rgb(0 0 0 / .45); transition: transform .12s }
.report-fab:active { transform: scale(.95) }
.report-fab span { line-height: 1 }

/* --- report sheet --- */
.report-sheet { position: absolute; left: 50%; bottom: var(--report-bottom); transform: translateX(-50%); z-index: 6; width: min(560px, calc(100% - var(--edge-left) - var(--edge-right))); max-height: calc(100% - var(--report-bottom) - var(--edge-top)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgb(20 20 23 / .95); backdrop-filter: blur(18px); border-radius: 26px; padding: 16px 18px 18px; box-shadow: 0 20px 60px rgb(0 0 0 / .6); border: 1px solid rgb(255 255 255 / .08); animation: rise .25s ease-out }
@keyframes rise { from { transform: translate(-50%, 24px); opacity: 0 } }
.report-sheet header { display: flex; align-items: center; gap: 14px }
.rs-head { flex: 1; min-width: 0; overflow-wrap: anywhere } .rs-head b { display: block; font-size: 16px } .rs-head span { color: var(--fog); font-size: 14px }
.report-sheet header .iconbtn-dark { flex: none; width: 48px; height: 48px }
.rs-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; padding: 0 4px 4px; margin: 0 -4px; scroll-padding-block: 12px }
.rs-caption { margin: 12px 0 0; min-height: 24px; font-size: 18px; line-height: 1.4; color: #dfe4f2 }
.rs-caption:empty::before { content: "Habla con naturalidad: qué viste, dónde y si bloquea la vía."; color: var(--fog); font-size: 15px }
.rs-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 14px 0 0 }
.rs-card div { background: rgb(255 255 255 / .05); border-radius: 14px; padding: 10px 12px; border: 1px solid transparent; transition: background .3s, border-color .3s }
.rs-card div.filled { background: rgb(36 59 212 / .16); border-color: rgb(111 134 255 / .35) }
.rs-card div.flash { animation: fill .6s ease-out }
@keyframes fill { 0% { background: rgb(111 134 255 / .45) } }
.rs-card dt { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--fog); font-weight: 700 }
.rs-card dd { margin: 2px 0 0; font-size: 15px; font-weight: 600 }
.rs-actions { display: grid; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair) } .rs-actions .btn { width: 100% }
.send-hint { margin: 0; font-size: 13px; line-height: 1.4; color: #c4cadb }

.toast { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); z-index: 8; background: var(--ok); color: #05210f; font-weight: 700; font-size: 15px; padding: 12px 18px; border-radius: 14px; box-shadow: 0 10px 30px rgb(0 0 0 / .4) }

/* --- map pins: small road signs --- */
.pin { --c: var(--amber); width: 26px; height: 26px; transform: rotate(45deg); border-radius: 5px; background: var(--c); border: 2px solid #111; outline: 2px solid var(--c); display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 10px rgb(0 0 0 / .5) }
.pin svg { transform: rotate(-45deg); width: 15px; height: 15px; color: #111 }
.pin.sev4 svg { color: #fff }
.pin.pending { --c: #fff; border-style: dashed }
.inc { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; color: #fff; font: 900 13px/20px var(--font); text-align: center; cursor: pointer }
.truck { width: 44px; height: 44px; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .6)) }
.maplibregl-popup-content { border-radius: 14px; padding: 14px 16px; color: #111; font: 13px/1.45 var(--font); box-shadow: 0 10px 30px rgb(0 0 0 / .3) }
.maplibregl-popup-content b { font-size: 14px }
.maplibregl-popup-content p { margin: 6px 0 }
.maplibregl-popup-content dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: 12px }
.maplibregl-popup-content dt { color: #6b7286 } .maplibregl-popup-content dd { margin: 0; font-weight: 600 }

/* --- AURA orb (report sheet) --- */
/* the orb: brand blue with a red accent; turns while live, rings while speaking */
.orb { --lvl: 0; position: relative; width: 60px; height: 60px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgb(255 255 255 / .85) 0 8%, transparent 38%), conic-gradient(from 200deg, #243bd4, #6f86ff, #ff2e2e, #1a1a1d, #243bd4);
  box-shadow: 0 0 calc(12px + var(--lvl) * 44px) rgb(58 82 240 / calc(.3 + var(--lvl) * .5)); transition: box-shadow .12s }
.orb[data-state="speaking"], .orb[data-state="ready"], .orb[data-state="listening"] { animation: spin 6s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(111 134 255 / .6); opacity: 0 }
.orb[data-state="stopped"] { filter: saturate(.55) brightness(.85) }
.orb[data-state="connecting"] { animation: breathe 1.2s ease-in-out infinite }
.orb[data-state="speaking"] i { animation: ring 1.6s ease-out infinite }
.orb[data-state="speaking"] i + i { animation-delay: .8s }
@keyframes breathe { 50% { transform: scale(.9); opacity: .7 } }
@keyframes ring { from { transform: scale(1); opacity: .9 } to { transform: scale(1.9); opacity: 0 } }


/* --- dialogs (light) --- */
.dialog { border: 0; border-radius: 24px; padding: 26px; width: min(92vw, 440px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; color: #111; background: #fff; font-family: var(--font) }
.dialog::backdrop { background: rgb(10 13 24 / .7); backdrop-filter: blur(4px) }
.dialog h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800 }
.dialog .fine { color: #6b7286 }
.dialog label { display: block; font-size: 14px; font-weight: 700; margin-top: 16px }
.dialog input { margin-top: 6px; background: #f3f4f8; border-color: #e3e6ee; color: #111 }
.dialog .row { display: flex; gap: 10px; margin-top: 20px } .dialog .row .btn { flex: 1 }
.dialog .report-dialog-actions { position: sticky; bottom: -26px; margin-bottom: -26px; padding: 12px 0 max(20px, env(safe-area-inset-bottom)); background: #fff }
.btn.quiet-light { background: #f0f1f5; color: #111 }
.gate-brand { display: inline-flex; align-items: center; gap: 12px; background: var(--asphalt); color: #fff; padding: 10px 14px; border-radius: 12px; margin-bottom: 18px }
.gate-brand img { height: 22px } .gate-brand b { letter-spacing: 3px }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.cats button { min-height: 48px; padding: 8px 14px; border-radius: 999px; background: #f0f1f5; font-weight: 600; font-size: 14px }
.cats button.on { background: #111; color: #fff }

/* --- responsive --- */
@media (max-width: 760px) {
  .stage { --edge: 12px; --report-bottom: calc(136px + var(--edge-bottom)) }
  .sign { top: var(--edge-top); left: var(--edge-left); width: calc(100% - var(--edge-left) - var(--edge-right) - 76px); grid-template-columns: 56px 1fr; gap: 10px; padding: 12px }
  .diamond { width: 42px; height: 42px; margin: 7px } .diamond svg { width: 24px; height: 24px }
  .sign-dist { font-size: 28px } .sign-title { font-size: 15px } .sign-note { display: none }
  .calm { top: var(--edge-top); left: var(--edge-left); font-size: 13px; max-width: calc(100% - var(--edge-left) - var(--edge-right) - 76px) }
  .rail { top: var(--edge-top); right: var(--edge-right) } .roundel { width: 60px; height: 60px; border-width: 6px } .roundel span { font-size: 22px }
  .sheet-panel { left: var(--edge-left); right: var(--edge-right); bottom: var(--edge-bottom); width: auto; padding-inline: 14px }
  .corridor { gap: 8px; padding: 10px 8px; grid-template-columns: auto minmax(0, 1fr) }
  .corridor .meta { grid-column: 2; text-align: left }
  .corridor .meta b { display: inline; margin-right: 8px }
  .sheet-actions { flex-wrap: wrap }
  .sheet-actions .btn { flex-basis: 140px }
  .hud { left: var(--edge-left); bottom: var(--edge-bottom); width: calc(100% - var(--edge-left) - var(--edge-right)); grid-template-columns: 48px 48px minmax(0, 1fr); gap: 10px; padding: 12px }
  .hud .speed { grid-column: 1 / 3 }
  .hud .trip { grid-column: 3; text-align: right }
  .hud .trip > span { white-space: normal; overflow-wrap: anywhere }
  .hud .iconbtn-dark { display: grid; width: 48px; height: 48px; grid-row: 2 }
  .hud #pause { grid-column: 1 }
  .hud #end { grid-column: 2 }
  .speed b { font-size: 32px } .trip b { font-size: 20px }
  .report-fab { right: calc(var(--edge-right) + 12px); bottom: calc(var(--edge-bottom) + 12px); width: calc(100% - var(--edge-left) - var(--edge-right) - 140px); max-width: 200px; height: 48px; border-radius: 14px; grid-auto-flow: column; gap: 6px; font-size: 15px }
  .report-fab svg { width: 22px; height: 22px }
  .corner { top: var(--edge-top); left: var(--edge-left); min-height: 44px }
  body.on-trip .corner { top: auto; bottom: calc(142px + var(--edge-bottom)); left: var(--edge-left) }
  body:has(#reportSheet:not([hidden])) .corner { visibility: hidden }
  .report-sheet { padding: 12px; border-radius: 20px }
  .report-sheet header { gap: 10px }
  .orb { width: 44px; height: 44px }
}
@media (max-height: 560px) {
  .stage { --report-bottom: var(--edge-bottom) }
  .report-sheet { width: min(560px, calc(100% - var(--edge-left) - var(--edge-right))) }
  .rs-actions { margin-top: 6px; padding-top: 6px }
  .rs-caption { margin-top: 8px }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }
.rs-caption.aura { color: #aab3d4; font-style: italic }