@font-face{font-family:"BSC";src:url(fonts/barlow-semi-condensed-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"BSC";src:url(fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:block}

/* Tema claro (día) por defecto; html.night = oscuro. Lo decide app.js según orto/ocaso. */
:root{
  --bg:#f3f5f4; --fg:#121615; --muted:#6c7774; --over:#d8141c;
  --sign-face:#ffffff; --sign-ring:#d8141c; --sign-num:#121615;
  --panel:#ffffff; --line:#d5dbd9; --warn:#f2b800; --warn-fg:#121615;
  --font:"BSC","Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --vh:1vh;
  color-scheme:light;
}
/* Safari: vh incluye las barras del navegador; dvh es lo visible de verdad */
@supports (height:1dvh){:root{--vh:1dvh}}
html.night{
  --bg:#050707; --fg:#e9eeec; --muted:#5d6865; --over:#ff3b3b;
  --sign-face:#d9dedc; --sign-ring:#c4161d; --sign-num:#050707;
  --panel:#141918; --line:#2a3230; --warn:#e0a800; --warn-fg:#050707;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--fg); font-family:var(--font);
  overflow:hidden; transition:background .6s,color .6s;
  padding:env(safe-area-inset-top,0) max(16px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0) max(16px,env(safe-area-inset-left,0px));
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
}
[hidden]{display:none!important}

.screen{height:100%;display:flex;align-items:center;justify-content:center;gap:3vmin;font-variant-numeric:tabular-nums}
.speed{display:flex;flex-direction:column;align-items:flex-end;line-height:.8}
.speed b{font-weight:700;font-size:min(40vw,calc(62*var(--vh)));letter-spacing:-.02em}
.speed small{font-size:min(4vw,calc(5*var(--vh)));font-weight:500;color:var(--muted);letter-spacing:.12em;margin-top:1.5vmin}
.slash{font-size:min(26vw,calc(44*var(--vh)));font-weight:500;color:var(--muted);line-height:1}
.sign{
  width:min(24vw,calc(40*var(--vh)));aspect-ratio:1;border-radius:50%;
  background:var(--sign-face);border:min(2.6vw,calc(4.4*var(--vh))) solid var(--sign-ring);
  display:grid;place-items:center;color:var(--sign-num);font-weight:700;font-size:min(10vw,calc(17*var(--vh)));line-height:1;
  transition:border-color .3s;
}
.sign.estimado{border-style:dashed;border-color:var(--muted)}
.sign.unknown{border-color:var(--muted);color:var(--muted);background:transparent}

.over .speed b{color:var(--over);animation:blink .55s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.nogps .speed b{color:var(--muted)}

@media (orientation:portrait){
  .screen{flex-direction:column;gap:calc(2*var(--vh))}
  .speed{align-items:center}
  .speed b{font-size:min(62vw,calc(40*var(--vh)))}
  .speed small{font-size:min(5vw,calc(3*var(--vh)))}
  .slash{font-size:min(30vw,calc(14*var(--vh)));transform:rotate(20deg);line-height:.8}
  .sign{width:min(44vw,calc(26*var(--vh)));border-width:min(4.6vw,calc(2.8*var(--vh)));font-size:min(19vw,calc(11.5*var(--vh)))}
}

/* Aviso de radar */
.aviso{
  position:fixed;left:50%;transform:translateX(-50%);
  top:calc(10px + env(safe-area-inset-top,0px));
  display:flex;align-items:center;gap:.5em;
  background:var(--warn);color:var(--warn-fg);
  font:700 min(7vw,calc(8*var(--vh)))/1 var(--font);letter-spacing:.04em;
  padding:.25em .6em;border-radius:.3em;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.aviso svg{width:1.1em;height:1.1em}
.aviso.cerca{animation:pulso 1s ease-in-out infinite}
.aviso.mal{background:var(--over);color:#fff}
@keyframes pulso{50%{transform:translateX(-50%) scale(1.06)}}

.ico{
  position:fixed;right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);
  display:grid;place-items:center;cursor:pointer;opacity:.7;padding:0;
}
.ico svg{width:24px;height:24px}
.ico .tachado{display:none}
.ico[aria-pressed=true] .tachado{display:inline}
.ico[aria-pressed=true] .ondas{display:none}
.ico:focus-visible,button:focus-visible{outline:2px solid var(--over);outline-offset:2px}

.estado{
  position:fixed;left:50%;transform:translateX(-50%);
  top:calc(12px + env(safe-area-inset-top,0px));
  font:500 16px/1.25 var(--font);color:var(--muted);letter-spacing:.04em;text-align:center;
  max-width:calc(100vw - 32px);
}
.estado:empty{display:none}
.aviso:not([hidden]) ~ .estado{display:none}
.debug{
  position:fixed;left:calc(8px + env(safe-area-inset-left,0px));top:calc(8px + env(safe-area-inset-top,0px));
  margin:0;font:12px/1.35 ui-monospace,monospace;color:var(--muted);background:var(--panel);opacity:.85;padding:6px 8px;border-radius:6px;max-width:90vw;white-space:pre-wrap;
}

/* Pantalla de inicio */
.inicio{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-left,0px));overflow:auto}
.inicio-caja{max-width:30em;display:grid;gap:16px;font:500 18px/1.4 var(--font)}
.inicio h1{margin:0;font-size:44px;line-height:1;font-weight:700}
.inicio p{margin:0}
.inicio .letra{font-size:15px;color:var(--muted)}
.ayuda{display:grid;gap:10px;padding:14px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:16px}
.ayuda strong{color:var(--over)}
.ayuda ol{margin:0;padding-left:1.2em;display:grid;gap:6px}
#btnEmpezar{
  font:700 26px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;
  padding:18px;border-radius:12px;border:0;background:var(--fg);color:var(--bg);cursor:pointer;
}

@media (prefers-reduced-motion:reduce){
  .over .speed b,.aviso.cerca{animation:none}
}