/* comparafichaje.es — site.css (único, sin fuentes externas) */
:root{--bg:#fff;--fg:#1b2430;--mut:#5b6675;--pri:#0b6e4f;--pri2:#095c42;--acc:#f2a541;--line:#e3e7ec;--soft:#f5f8f7;--r:12px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;color:var(--fg);background:var(--bg)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
a{color:var(--pri)}a:hover{color:var(--pri2)}
h1{font-size:1.7rem;line-height:1.25;margin:.6em 0 .4em}
h2{font-size:1.3rem;margin:1.6em 0 .5em}h3{font-size:1.1rem;margin:.2em 0 .5em}
.card h2{margin-top:0}
.top{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:5}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;flex-wrap:wrap}
.logo{font-size:1.15rem;text-decoration:none;color:var(--fg)}.logo b{color:var(--pri)}
.menu{display:flex;gap:14px;flex-wrap:wrap;row-gap:6px}.menu a{text-decoration:none;font-weight:600;font-size:.9rem}
.crumbs{font-size:.85rem;color:var(--mut);margin-top:14px}.crumbs a{color:var(--mut)}
.lead{font-size:1.1rem;color:#33404f;max-width:42rem}
.meta,.muted{color:var(--mut);font-size:.9rem}
.aff{background:#fff8ec;border-left:4px solid var(--acc);padding:8px 12px;font-size:.88rem;border-radius:6px}
.card{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:16px 0}
.alert{background:#fff8ec;border-color:#f6d9a8}
.verdict{background:#eef7f3}
.grid2{display:grid;gap:0 16px}
.btn{display:inline-block;background:var(--pri);color:#fff!important;text-decoration:none;font-weight:700;padding:10px 16px;border-radius:10px;border:0;font-size:1rem;cursor:pointer;line-height:1.3}
.btn:hover{background:var(--pri2)}
.btn.ghost{background:#e9edf1;color:var(--mut)!important;cursor:default}
.tag{display:inline-block;background:#e3f2ec;color:var(--pri2);font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:99px;vertical-align:middle}
.todo{background:#fff3cd;padding:0 4px;border-radius:4px}
.price{font-size:1.5rem;font-weight:800;margin:.2em 0}.price small{font-size:.8rem;font-weight:400;color:var(--mut)}
.tpl.best{border:2px solid var(--pri)}
.links li,.src li{margin:.3em 0}
.pc{padding-left:18px}
/* selector */
.selector label{display:block;font-weight:600;margin:10px 0 4px}
.selector select{width:100%;padding:10px;font-size:1rem;border:1px solid #c9d1da;border-radius:8px;background:#fff}
.selector .btn{margin-top:14px;width:100%}
.res{margin-top:14px;background:#fff;border-radius:8px;padding:10px 14px;border:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{border:1px solid #c9d1da;background:#fff;border-radius:99px;padding:6px 12px;font-size:.9rem;cursor:pointer}
.chip.on{background:var(--pri);border-color:var(--pri);color:#fff}
/* tablas: mobile = tarjetas */
.tablewrap{margin:12px 0}
table.cmp{width:100%;border-collapse:collapse;font-size:.95rem}
table.cmp th,table.cmp td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.cmp thead th{background:var(--soft)}
@media (max-width:719px){
 table.cmp:not(.vs) thead{display:none}
 table.cmp:not(.vs) tr{display:block;border:1px solid var(--line);border-radius:var(--r);margin:0 0 12px;padding:6px 4px}
 table.cmp:not(.vs) td{display:flex;justify-content:space-between;gap:12px;border:0;padding:5px 10px}
 table.cmp:not(.vs) td[data-l]::before{content:attr(data-l);font-weight:600;color:var(--mut);flex:0 0 40%}
 table.cmp:not(.vs) td:first-child{font-size:1.1rem}
 table.cmp.vs{font-size:.88rem}
 table.cmp:not(.vs) td:last-child{display:block}
 table.cmp:not(.vs) td:last-child .btn{display:block;width:100%;text-align:center}
 .menu{gap:10px;flex-wrap:wrap}
 .bar{align-items:flex-start}
}
tr[hidden]{display:none!important}
.foot{margin-top:48px;border-top:1px solid var(--line);background:var(--soft);padding:20px 0;font-size:.9rem}
.foot a{color:var(--fg)}
code{background:#eef1f4;padding:1px 4px;border-radius:4px}
@media (min-width:720px){
 h1{font-size:2.1rem}
 .grid2{grid-template-columns:1fr 1fr}
 .selector form{display:grid;grid-template-columns:1fr 1fr auto;gap:0 12px;align-items:end}
 .selector label{grid-row:1}.selector select{grid-row:2}.selector .btn{grid-row:2;width:auto;margin:0}
 .tablewrap{overflow-x:auto}
}