:root { color-scheme:light; --bg:#f3f5f9; --card:#fff; --ink:#142033; --muted:#566478; --faint:#8592a6; --line:#e1e6ee; --brand:#14387f; --brand-ink:#fff; --hero:#14387f; --hero-2:#1f58b4; --hero-ink:#fff; --hero-muted:#c9d7f2; --ok:#17794a; --warn:#94590a; --bad:#b3261e; --chip:#e9eef6; --series-1:#2a78d6; --series-2:#eb6834; --grid:#e8ecf2; --tip:#142033; --tip-ink:#fff; }
@media (prefers-color-scheme: dark) { :root { color-scheme:dark; --bg:#0d131d; --card:#172030; --ink:#e9eef6; --muted:#a2afc2; --faint:#7f8ca0; --line:#2a3648; --brand:#7ea8f6; --brand-ink:#0b1220; --hero:#14305f; --hero-2:#1f4a96; --hero-ink:#fff; --hero-muted:#c6d4ef; --ok:#54c992; --warn:#e8b14c; --bad:#f2837a; --chip:#243146; --series-1:#3987e5; --series-2:#d95926; --grid:#26324a; --tip:#e9eef6; --tip-ink:#142033; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { display:grid; grid-template-columns:232px 1fr; min-height:100vh; }
nav { background:var(--card); border-right:1px solid var(--line); padding:22px 12px; }
nav h1 { font-size:18px; margin:0 10px 20px; color:var(--brand); letter-spacing:-.01em; }
nav button { display:block; width:100%; text-align:left; background:none; border:0; color:var(--ink); padding:9px 12px; border-radius:9px; font:inherit; cursor:pointer; }
nav button:hover { background:var(--chip); } nav button.on { background:var(--brand); color:var(--brand-ink); font-weight:600; }
main { padding:26px; max-width:1180px; width:100%; min-width:0; }
h2 { margin:0 0 16px; font-size:23px; letter-spacing:-.01em; } h3 { margin:0 0 4px; font-size:15px; } .sub { color:var(--muted); font-size:13px; margin:0 0 14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:16px; }
.hero { background:linear-gradient(120deg,var(--hero),var(--hero-2)); color:var(--hero-ink); border-radius:16px; padding:22px 24px; margin-bottom:16px; display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; }
.hero h2 { margin:0; } .hero p { margin:2px 0 0; color:var(--hero-muted); font-size:14px; }
.range { display:flex; gap:2px; background:rgba(255,255,255,.14); padding:3px; border-radius:10px; }
.range button { background:none; border:0; color:var(--hero-ink); font:inherit; font-size:13px; padding:5px 12px; border-radius:8px; cursor:pointer; }
.range button.on { background:#fff; color:#14387f; font-weight:600; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px 17px; }
.stat span { color:var(--muted); font-size:13px; display:block; } .stat b { display:block; font-size:30px; line-height:1.2; letter-spacing:-.02em; margin:2px 0; font-variant-numeric:tabular-nums; }
.stat small { color:var(--muted); font-size:12px; }
.charts { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; } .charts > .card { grid-column:span 6; min-width:0; margin-bottom:0; } .charts > .wide { grid-column:span 8; } .charts > .side { grid-column:span 4; } .charts > .full { grid-column:span 12; }
svg.chart { width:100%; height:auto; display:block; touch-action:pan-y; }
svg.chart text { font:11px system-ui,-apple-system,sans-serif; fill:var(--muted); }
.mark { outline:none; } .mark:hover,.mark:focus { opacity:.8; }
.legend { display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color:var(--muted); margin-bottom:8px; } .legend i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.legend .s1 { background:var(--series-1); } .legend .s2 { background:var(--series-2); }
.s1 { fill:var(--series-1); } .s2 { fill:var(--series-2); } .grid { stroke:var(--grid); stroke-width:1; } .base { stroke:var(--faint); stroke-width:1; }
.bars { display:grid; gap:10px; } .bar-row { display:grid; grid-template-columns:minmax(90px,38%) 1fr 34px; gap:10px; align-items:center; font-size:13px; }
.bar-row > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bar-row b { text-align:right; font-variant-numeric:tabular-nums; }
.bar-row svg { width:100%; height:10px; display:block; }
.empty { color:var(--muted); font-size:14px; padding:24px 0; text-align:center; }
#tip { position:fixed; z-index:10; background:var(--tip); color:var(--tip-ink); font-size:12px; padding:7px 10px; border-radius:8px; pointer-events:none; white-space:pre; line-height:1.5; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); margin-bottom:12px; }
input,select,textarea { font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%; }
select[multiple] { min-height:96px; } textarea { min-height:72px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .between { justify-content:space-between; } .mt { margin-top:12px; } .mb { margin-bottom:12px; }
.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 14px; }
.filters select { width:auto; font-size:13px; padding:6px 8px; }
button.primary,button.ghost,button.danger { font:inherit; border-radius:8px; padding:8px 14px; cursor:pointer; border:1px solid transparent; }
button.primary { background:var(--brand); color:var(--brand-ink); font-weight:600; }
button.ghost { background:none; border-color:var(--line); color:var(--ink); }
button.danger { background:none; border-color:var(--bad); color:var(--bad); }
button:disabled { opacity:.55; cursor:default; }
.muted { color:var(--muted); font-size:13px; } .err { color:var(--bad); margin:8px 0; } .okmsg { color:var(--ok); margin:8px 0; }
.chip { display:inline-block; font-size:12px; padding:2px 9px; border-radius:99px; background:var(--chip); white-space:nowrap; }
.chip.ok { color:var(--ok); } .chip.warn { color:var(--warn); } .chip.bad { color:var(--bad); }
.tabs2 { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; } .tabs2 button { font:inherit; font-size:14px; background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:9px; padding:7px 13px; cursor:pointer; } .tabs2 button.on { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); font-weight:600; }
.alert { display:grid; grid-template-columns:1fr 200px; gap:14px; border-top:1px solid var(--line); padding:13px 0; } .alert:first-child { border-top:0; padding-top:0; }
.alert p { margin:3px 0; } .alert .t { font-weight:600; font-variant-numeric:tabular-nums; } .alert select,.alert input { font-size:13px; padding:6px 8px; margin-top:6px; }
.sub-card { border:1px solid var(--line); border-radius:10px; padding:13px; margin:0 0 12px; min-width:0; } .sub-card label { margin-top:8px; } .sub-card textarea { min-height:52px; }
button,select,input { min-height:40px; } /* cómodo en pantalla táctil */
.pick { position:relative; display:inline-block; } button.guia { font:inherit; font-weight:600; font-variant-numeric:tabular-nums; color:var(--brand); background:none; border:1px solid var(--line); border-radius:8px; padding:5px 10px; cursor:pointer; }
.menu { position:absolute; z-index:5; top:calc(100% + 4px); left:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:4px; min-width:170px; box-shadow:0 8px 24px rgba(10,20,40,.18); } .menu[hidden] { display:none; } .menu button { display:block; width:100%; text-align:left; background:none; border:0; color:var(--ink); font:inherit; padding:8px 10px; border-radius:7px; cursor:pointer; } .menu button:hover { background:var(--chip); }
dialog#detalle { width:min(860px,calc(100vw - 24px)); max-height:calc(100vh - 24px); border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); padding:20px; } dialog::backdrop { background:rgba(8,14,26,.55); }
.d-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; } .d-head h3 { font-size:19px; } .d-head p { margin:0; }
.d-gps { display:grid; grid-template-columns:1fr 220px; gap:16px; align-items:center; border:1px solid var(--line); border-left:5px solid var(--faint); border-radius:12px; padding:14px; margin-bottom:12px; } .d-gps.ok { border-left-color:var(--ok); } .d-gps.warn { border-left-color:var(--warn); } .d-gps.bad { border-left-color:var(--bad); } .d-gps p { margin:3px 0; } .d-res { font-size:17px; font-weight:700; }
.radar { width:100%; max-width:220px; display:block; } .r-out { fill:var(--bg); stroke:var(--line); } .r-in { fill:rgba(42,120,214,.16); stroke:var(--series-1); stroke-dasharray:4 3; } .r-line { stroke:var(--muted); stroke-width:1.5; stroke-dasharray:3 3; } .r-home { fill:var(--series-1); stroke:var(--card); stroke-width:2; } .r-driver { fill:var(--muted); stroke:var(--card); stroke-width:2; } .r-driver.ok { fill:var(--ok); } .r-driver.warn { fill:var(--warn); } .r-driver.bad { fill:var(--bad); }
.leyenda { font-size:12px; color:var(--muted); } .leyenda i { display:inline-block; width:10px; height:10px; border-radius:50%; margin:0 4px 0 10px; } .leyenda i:first-child { margin-left:0; } .l-home { background:var(--series-1); } .l-driver { background:var(--muted); } .l-driver.ok { background:var(--ok); } .l-driver.warn { background:var(--warn); } .l-driver.bad { background:var(--bad); } .l-margen { background:rgba(42,120,214,.25); }
dialog h4 { margin:14px 0 8px; font-size:15px; } .d-fotos { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; } .d-foto { padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:none; cursor:zoom-in; aspect-ratio:3/4; min-height:0; } .d-foto img { width:100%; height:100%; object-fit:cover; display:block; }
#dvisor { margin-top:12px; overflow:hidden; text-align:center; } #dgrande { max-width:100%; max-height:70vh; transition:transform .15s; } details { margin-top:12px; } summary { cursor:pointer; font-weight:600; }
.qr { width:260px; max-width:100%; background:#fff; padding:8px; border-radius:10px; }
.center { max-width:440px; margin:8vh auto; padding:0 16px; }
pre { background:var(--bg); border-radius:8px; padding:10px; overflow:auto; font-size:12px; max-height:300px; }
@media (max-width:860px) { .shell { grid-template-columns:minmax(0,1fr); } nav { min-width:0; border-right:0; border-bottom:1px solid var(--line); padding:12px; } nav h1 { margin-bottom:8px; } nav .tabs { display:flex; overflow-x:auto; gap:4px; } nav button { width:auto; white-space:nowrap; } main { padding:16px; } .charts > .card,.charts > .wide,.charts > .side { grid-column:span 12; } .alert { grid-template-columns:1fr; } .d-gps { grid-template-columns:1fr; } .radar { margin:0 auto; } }