/* Páginas estáticas de modelo y marca: mismo diseño que la app, sin depender de React. */
:root { --brand:#0074E3; --brand-soft:#E7F1FC; --bg:#F6F8FA; --surface:#fff; --ink:#202E39; --ink-2:#56626D; --ink-3:#8D97A1; --line:#E2E7EC; --line-2:#CBD3DB;
  --hi:#13A37A; --hi-bg:#E3F5EE; --hi-ink:#0B7A5A; --mid-ink:#9A6A0C; --r:8px;
  --sans: Inter, system-ui, sans-serif; --disp:'Inter Tight', Inter, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--brand); text-decoration:none; } a:hover { text-decoration:underline; }

.top { position:sticky; top:0; z-index:5; height:60px; display:flex; align-items:center; gap:20px; padding:0 28px; background:var(--surface); border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:10px; font:700 18px var(--disp); letter-spacing:-.02em; color:var(--ink); }
.logo:hover { text-decoration:none; } .logo img { display:block; } .logo b { color:var(--brand); }
.top nav { display:flex; gap:20px; font-size:14px; } .top nav a { color:var(--ink-2); }
.top .cta { margin-left:auto; }
.top .langs { gap:2px; font:500 12px var(--mono); }
.top .langs a { padding:4px 6px; border-radius:6px; color:var(--ink-3); }
.top .langs a[aria-current] { background:var(--brand-soft); color:var(--brand); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 16px; border-radius:var(--r); border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); font:500 14px var(--sans); }
.btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; } .btn:hover { text-decoration:none; opacity:.9; }

.layout { max-width:1180px; margin:0 auto; padding:24px 28px 72px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; }
.layout.single { grid-template-columns:minmax(0,1fr); max-width:900px; }
.crumbs { font-size:13px; color:var(--ink-3); } .crumbs a { color:var(--ink-3); } .crumbs span { margin:0 6px; } .crumbs span[aria-current] { margin:0; }
h1 { font:700 40px/1.1 var(--disp); letter-spacing:-.02em; margin:10px 0 8px; }
h1 small { display:block; font:500 16px var(--sans); color:var(--ink-3); letter-spacing:0; margin-top:8px; }
h2 { font:700 24px/1.2 var(--disp); letter-spacing:-.01em; margin:44px 0 6px; }
.sub { color:var(--ink-2); margin:0 0 16px; }
.lead { font-size:17px; color:var(--ink-2); max-width:740px; }
.kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin:22px 0 0; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
.kpi span { display:block; font:500 11px var(--mono); color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }
.kpi b { font:600 20px var(--mono); } .kpi small { color:var(--ink-3); font-size:12px; margin-left:4px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.tag { font:500 12px var(--mono); padding:3px 10px; border-radius:99px; border:1px solid var(--brand); color:var(--brand); background:var(--brand-soft); }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; }
.finder { display:grid; grid-template-columns:auto auto 1fr; gap:12px 18px; align-items:end; }
.finder label span { display:block; font-size:12px; color:var(--ink-3); }
.finder input { width:120px; height:40px; border:1px solid var(--line-2); border-radius:var(--r); padding:0 12px; font:500 16px var(--mono); }
.finder .go { justify-self:start; }
.finder .res { grid-column:1/-1; }
.sizechips { display:flex; flex-wrap:wrap; gap:8px; }
.sz { min-width:92px; border:1px solid var(--line-2); border-radius:var(--r); padding:8px 10px; background:var(--surface); }
.sz b { font:600 15px var(--mono); } .sz .p { float:right; font:600 12px var(--mono); color:var(--ink-3); margin-left:8px; }
.sz .p.hi { color:var(--hi-ink); } .sz .p.mid { color:var(--mid-ink); }
.sz small { display:block; font:500 11px var(--mono); color:var(--ink-3); margin-top:2px; }
.sz.best { border-color:var(--hi); box-shadow:0 0 0 2px var(--hi-bg); }
.best { margin:14px 0 0; padding:12px 14px; border-radius:var(--r); background:var(--bg); color:var(--ink-2); font-size:14px; }
.best.ok { background:var(--hi-bg); color:var(--hi-ink); }

.table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { padding:9px 14px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
th[scope="row"], thead th:first-child { text-align:left; position:sticky; left:0; background:var(--surface); font:400 14px var(--sans); color:var(--ink-2); }
thead th { font:600 15px var(--mono); background:var(--bg); } thead th:first-child { background:var(--bg); font-size:12px; color:var(--ink-3); }
td { font-family:var(--mono); } tr.key td, tr.key th[scope="row"] { font-weight:600; color:var(--ink); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom:0; }
.src { font-size:12.5px; color:var(--ink-3); margin-top:8px; } .src a { color:var(--ink-3); text-decoration:underline; }

.chart svg { width:100%; height:auto; display:block; }
.chart text { font:500 12px var(--mono); fill:var(--ink-3); }
.chart .grid { stroke:var(--line); } .chart .line { fill:none; stroke:var(--ink); stroke-width:2; stroke-opacity:.25; }
.chart .pt { fill:var(--ink); } .chart .pt.best { fill:var(--hi); }
.chart .lbl { fill:var(--ink); font-weight:600; }
.chart .you { fill:#fff; stroke:var(--brand); stroke-width:3; }

.char { display:grid; grid-template-columns:130px repeat(var(--n), minmax(0,1fr)); font-size:13px; }
.char > div { padding:7px 8px; border-bottom:1px solid var(--line); }
.char .h { font:600 13px var(--mono); text-align:center; }
.char .n { color:var(--ink-2); } .char .n small { display:block; color:var(--ink-3); font-size:11px; }
.char .cell { display:flex; align-items:center; justify-content:center; } .char .cell.na { color:var(--ink-3); }
.char .cell i { display:block; width:100%; height:8px; border-radius:4px; background:var(--line); position:relative; }
.char .cell i::after { content:''; position:absolute; top:-3px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--brand);
  left:var(--p); border:2px solid #fff; box-shadow:0 0 0 1px var(--brand); }

.eqrow { display:grid; grid-template-columns:minmax(0,1fr) 90px 90px 110px; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.eqrow:last-child { border-bottom:0; }
.eqrow.h { font:500 11px var(--mono); color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; padding-top:0; }
.eqrow a b { color:var(--ink); } .eqrow small { display:block; color:var(--ink-3); font-size:12px; } .eqrow .d { font-family:var(--mono); }
.callout { border-left:4px solid var(--brand); background:var(--brand-soft); padding:12px 16px; border-radius:0 var(--r) var(--r) 0; margin:16px 0 0; font-size:14px; }
.faq details { border-bottom:1px solid var(--line); padding:12px 0; } .faq summary { cursor:pointer; font-weight:600; } .faq p { margin:8px 0 0; color:var(--ink-2); }

aside .cmp { position:sticky; top:84px; }
.cmp h3 { margin:0 0 6px; font:700 17px var(--disp); } .cmp p { margin:0 0 12px; font-size:13.5px; color:var(--ink-2); } .cmp .btn { width:100%; height:auto; min-height:38px; padding:8px 12px; text-align:center; }

ul.models, ul.brands { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }
ul.models li, ul.brands li { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; }
ul.models b, ul.brands b { color:var(--ink); } ul.models small, ul.brands small { display:block; color:var(--ink-3); font-size:12.5px; }

footer { border-top:1px solid var(--line); background:var(--surface); padding:24px 28px; color:var(--ink-3); font-size:13px; }
footer .in { max-width:1180px; margin:0 auto; display:flex; gap:24px; flex-wrap:wrap; }

@media (max-width: 980px) {
  .top { padding:0 16px; gap:12px; } .top nav:not(.langs), .top .cta { display:none; } .top .langs { margin-left:auto; display:flex; }
  .layout { grid-template-columns:minmax(0,1fr); padding:16px 16px 56px; gap:24px; }
  h1 { font-size:30px; } h2 { font-size:21px; margin-top:36px; } .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .finder { grid-template-columns:1fr 1fr; } .finder input { width:100%; } .finder .go { grid-column:1/-1; }
  .char { grid-template-columns:92px repeat(var(--n), minmax(0,1fr)); font-size:12px; } .char > div { padding:6px 3px; }
  .eqrow { grid-template-columns:minmax(0,1fr) 66px 66px; } .eqrow .act { display:none; }
  aside .cmp { position:static; }
}

/* Aviso de errores en los datos: nota discreta bajo la tabla y formulario en un <dialog>. */
.report { color: var(--ink-3); font-size: 12px; }
.report button { all: unset; cursor: pointer; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.report button:hover, .report button:focus-visible { color: var(--ink-2); text-decoration-color: currentColor; }
.report-dlg { border: 0; border-radius: 14px; padding: 0; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: 0 20px 60px rgba(20, 30, 40, .25); color: var(--ink); background: var(--surface); }
.report-dlg::backdrop { background: rgba(20, 30, 40, .35); }
.report-dlg form { padding: 22px 24px 20px; }
.report-dlg h3 { font-size: 19px; font-weight: 700; margin: 0 0 4px; }
.report-dlg .lead { font-size: 14px; color: var(--ink-2); margin: 0 0 6px; }
.report-dlg label { display: block; font-size: 13px; font-weight: 500; margin-top: 12px; color: var(--ink); }
.report-dlg label small { font-weight: 400; color: var(--ink-3); }
.report-dlg select, .report-dlg input, .report-dlg textarea { display: block; width: 100%; margin-top: 4px; height: 38px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 10px; font: 14px var(--sans, inherit); color: var(--ink); background: var(--surface); box-sizing: border-box; }
.report-dlg textarea { height: 72px; padding: 8px 10px; resize: vertical; }
.report-dlg .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.report-dlg .report-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.report-dlg .btn.link { border-color: transparent; color: var(--ink-2); }
.report-dlg .done { margin: 14px 0 0; background: var(--hi-bg, #E3F5EE); color: var(--hi-ink, #0B7A5A); border-radius: var(--r); padding: 10px 12px; font-size: 13px; }
.report-dlg .fine { font-size: 12px; color: var(--ink-3); margin: 14px 0 0; }
@media (max-width: 560px) { .report-dlg .row { grid-template-columns: 1fr; } }