:root {
  color-scheme: light dark;
  /* Red Hot (WA9260) sobre interior Jet Black */
  --page:      light-dark(#faf8f8, #0a0a0b);
  --surface:   light-dark(#ffffff, #151517);
  --surface-2: light-dark(#f4f1f1, #1e1e21);
  --text:      light-dark(#121011, #ffffff);
  --text-2:    light-dark(#524e4e, #c6c3c3);
  --muted:     light-dark(#78716f, #8d8a8a);
  --border:    light-dark(#e7e2e1, #2b2b2f);
  --hairline:  light-dark(rgba(0,0,0,.09), rgba(255,255,255,.10));
  /* rojo = marca y peligro. En una troca, rojo siempre significa pon atención */
  --accent:    light-dark(#c8102e, #e8202e);
  --accent-bg: light-dark(#fceaec, #2a0e12);
  --crit:      light-dark(#c8102e, #ff4d5a);
  --crit-bg:   light-dark(#fceaec, #2a0e12);
  /* cromo = información neutra */
  --chrome:    light-dark(#5d6672, #a8b0ba);
  --chrome-bg: light-dark(#eef0f3, #191c20);
  --good:      light-dark(#0a7f0a, #3fb950);
  --good-bg:   light-dark(#e6f4e6, #10240f);
  --warn:      light-dark(#9a5b06, #fab219);
  --warn-bg:   light-dark(#fbf1dd, #291f10);
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin:0; font-family:var(--font); background:var(--page); color:var(--text); line-height:1.6; }
.container { max-width: 780px; margin:0 auto; padding: 40px 20px 90px; }

a.back { color:var(--accent); text-decoration:none; font-weight:600; font-size:.92rem; }
a.back:hover { text-decoration:underline; }
h1 { position:relative; font-size:clamp(2.1rem,7vw,3.4rem); line-height:1.06; letter-spacing:-.03em; font-weight:900; margin:18px 0 12px; }
.tagline { font-size:clamp(1rem,2.6vw,1.18rem); color:var(--text-2); margin:0; max-width:46ch; }
.vin { font-family:var(--mono); font-size:.76rem; color:var(--muted); letter-spacing:.04em; margin-top:14px; }
h2 { font-size:1.35rem; letter-spacing:-.015em; margin:44px 0 6px; }
h3 { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:26px 0 8px; font-weight:800; }
p { margin:0 0 14px; }
.lead { color:var(--text-2); margin-bottom:20px; }

.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:28px 0 8px; }
.tile { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 12px 14px; min-width:0; }
.tile .lbl { font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; white-space:nowrap; overflow:hidden; }
.tile .val { font-size:1.5rem; font-weight:800; margin:4px 0 8px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1; }
.tile .val small { font-size:.72rem; font-weight:600; color:var(--muted); }
.tile.crit .val{color:var(--crit)} .tile.warn .val{color:var(--warn)} .tile.ok .val{color:var(--good)}
.meter { height:4px; border-radius:2px; background:var(--border); overflow:hidden; }
.meter i { display:block; height:100%; border-radius:2px; background:var(--accent); transition:width .4s cubic-bezier(.32,.72,.28,1); }

.cards { display:grid; gap:12px; margin-top:30px; }
a.card { display:flex; gap:15px; align-items:flex-start; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--c,var(--accent));
  border-radius:15px; padding:18px; transition:border-color .15s, transform .1s; }
a.card:active { transform:scale(.99); }
a.card:hover { border-color:var(--c,var(--accent)); }
a.card .ic { font-size:1.5rem; line-height:1; flex:none; }
a.card b { display:block; font-size:1.02rem; letter-spacing:-.01em; }
a.card small { display:block; color:var(--text-2); font-size:.87rem; line-height:1.45; margin-top:3px; }
a.card .arrow { margin-left:auto; color:var(--muted); flex:none; }

details.doll { border:1.5px solid var(--border); border-radius:15px; margin:12px 0; background:var(--surface); overflow:hidden; transition:border-color .15s; }
details.doll[open] { border-color:var(--c,var(--accent)); }
details.doll > summary { list-style:none; cursor:pointer; padding:16px 46px 16px 18px; display:block; position:relative; font-weight:700; font-size:1rem; }
details.doll > summary::-webkit-details-marker { display:none; }
details.doll > summary::after { content:"+"; position:absolute; right:18px; top:14px; font-size:1.3rem; color:var(--muted); font-weight:400; }
details.doll[open] > summary::after { content:"\2013"; }
details.doll > summary:hover { background:var(--surface-2); }
details.doll .body { padding:0 18px 18px; border-top:1px solid var(--hairline); }
details.doll .body > :first-child { margin-top:14px; }

.note { border-radius:12px; padding:13px 15px; font-size:.93rem; line-height:1.6; margin:14px 0; border:1px solid var(--border); background:var(--surface-2); color:var(--text-2); }
.note b { color:var(--text); }
.note .hd { display:block; font-weight:800; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.note.crit { background:var(--crit-bg); border-color:var(--crit); } .note.crit .hd{color:var(--crit)}
.note.warn { background:var(--warn-bg); border-color:var(--warn); } .note.warn .hd{color:var(--warn)}
.note.good { background:var(--good-bg); border-color:var(--good); } .note.good .hd{color:var(--good)}
.note.info { border-color:var(--chrome); background:var(--chrome-bg); }
.note.info .hd { color:var(--chrome); }

table { width:100%; border-collapse:collapse; font-size:.92rem; margin:10px 0 4px; }
td,th { padding:9px 7px; border-bottom:1px solid var(--hairline); text-align:left; vertical-align:top; }
th { font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:800; }
td.k { color:var(--muted); width:42%; }
td.v { font-weight:650; }
tr:last-child td { border-bottom:none; }

.row { display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--hairline); font-size:.95rem; line-height:1.5; }
.row:last-child { border-bottom:none; }
.row input[type=checkbox] { width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--good); }
.row small { display:block; color:var(--muted); font-size:.84rem; margin-top:2px; }
.row.done > div { color:var(--muted); text-decoration:line-through; }
.row .tag { font-size:.62rem; font-weight:800; letter-spacing:.05em; padding:3px 7px; border-radius:5px; flex:none; margin-top:3px; }
.tag.hi { color:var(--crit); background:var(--crit-bg); } .tag.md { color:var(--warn); background:var(--warn-bg); }

input[type=text],input[type=date],input[type=number] { width:100%; padding:9px 11px; font-family:inherit; font-size:.92rem;
  font-weight:600; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
input::placeholder { color:var(--muted); font-weight:500; }
input:focus { outline:none; border-color:var(--accent); }
.field { margin-bottom:10px; }
.field label { display:block; font-size:.68rem; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.06em; font-weight:800; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn { width:100%; padding:13px; border-radius:12px; font-size:.94rem; font-weight:700; font-family:inherit; cursor:pointer;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text); margin-top:10px; }
.btn.pri { background:var(--accent); color:light-dark(#fff,#06121f); border-color:transparent; }
.btn:active { transform:scale(.99); }

.feat { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--c,var(--accent)); border-radius:14px; padding:16px; margin-bottom:14px; }
.feat-t { font-size:1.05rem; font-weight:800; margin-bottom:11px; letter-spacing:-.01em; }
.feat svg { width:100%; height:auto; display:block; border-radius:9px; background:#1a1a19; }
.feat-b { font-size:.9rem; line-height:1.62; color:var(--text-2); margin-top:11px; padding-top:11px; border-top:1px solid var(--hairline); }
.feat-b b { color:var(--text); }
.feat-b.why > b:first-child { color:var(--warn); }

.log-e { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:8px; font-size:.92rem; }
.log-e .top { display:flex; gap:9px; align-items:baseline; margin-bottom:3px; }
.log-e .top b { font-size:.97rem; }
.log-e .top .mi { color:var(--muted); font-size:.79rem; font-variant-numeric:tabular-nums; }
.log-e .top .cost { margin-left:auto; font-weight:800; font-variant-numeric:tabular-nums; color:var(--good); }
.log-e .nt { color:var(--muted); font-size:.84rem; line-height:1.45; }
.log-e .del { float:right; background:none; border:none; color:var(--muted); font-size:1rem; padding:0 0 0 8px; cursor:pointer; }
.empty { color:var(--muted); font-size:.92rem; text-align:center; padding:18px 0; }

footer { margin-top:52px; padding-top:18px; border-top:1px solid var(--border); font-size:.79rem; color:var(--muted); line-height:1.7; }
@media print { a.back,.btn,.stats{display:none} body{background:#fff;color:#000} details.doll{border:1px solid #ccc} details.doll .body{display:block!important} }

.mapwrap { border:1px solid var(--border); border-radius:14px; overflow:hidden; margin:14px 0; }
.mapwrap svg { width:100%; height:auto; display:block; }

/* acento Red Hot */
.container > h1::after { content:""; display:block; width:64px; height:4px; border-radius:2px;
  background:var(--accent); margin-top:14px; }
.vin { border-left:3px solid var(--accent); padding-left:10px; }
a.card:hover { box-shadow:0 0 0 1px var(--c,var(--accent)); }
.swatch { display:inline-block; width:13px; height:13px; border-radius:4px; vertical-align:-2px;
  margin-right:7px; border:1px solid var(--hairline); }

/* negocio */
.out { background:var(--surface-2); border:1px solid var(--border); border-radius:13px; padding:15px; margin:14px 0; }
.out .big { font-size:2rem; font-weight:900; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1; }
.out .big.ok{color:var(--good)} .out .big.no{color:var(--crit)}
.out .cap { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; }
.gate { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:13px; margin-bottom:9px;
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--muted); }
.gate.done { border-left-color:var(--good); }
.gate.now { border-left-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.gate.blocked { border-left-color:var(--crit); opacity:.62; }
.gate input[type=checkbox]{ width:21px;height:21px;flex:none;margin-top:1px;accent-color:var(--good); }
.gate b{ display:block; font-size:.98rem; }
.gate small{ display:block; color:var(--text-2); font-size:.85rem; line-height:1.5; margin-top:3px; }
.gate .st{ margin-left:auto; font-size:.62rem; font-weight:800; letter-spacing:.05em; padding:3px 8px; border-radius:6px; flex:none; }
.gate.now .st{ color:var(--accent); background:var(--accent-bg); }
.gate.blocked .st{ color:var(--crit); background:var(--crit-bg); }
.gate.done .st{ color:var(--good); background:var(--good-bg); }
.seg { border-left:3px solid var(--c,var(--accent)); background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:16px; margin-bottom:12px; }
.seg h4 { margin:0 0 4px; font-size:1.02rem; }
.seg .pay { font-size:.78rem; font-weight:800; color:var(--good); letter-spacing:.04em; text-transform:uppercase; }
.script { background:var(--surface-2); border:1px dashed var(--border); border-radius:11px; padding:12px 14px;
  font-size:.9rem; line-height:1.6; color:var(--text-2); margin-top:11px; }