/* Componentes de la guía de ahorro de tokens. */
.tokens-page { --bg:var(--paper); --surface:var(--card); --accent:#23755e; --accent-soft:#eaf5ee; --burn:#a75420; --burn-soft:#fff0e3; --ok:#23755e; --ok-soft:#e5f3e8; --f-display:Georgia,serif; --f-body:Arial,sans-serif; --f-mono:Consolas,monospace; display:flex; flex-direction:column; gap:52px; padding-bottom:56px; }
.tokens-page h1,.tokens-page h2,.tokens-page h3 { font-family:var(--f-display); font-weight:400; line-height:1.15; text-wrap:balance; margin:0; }
.tokens-page h1 { font-size:clamp(38px,5vw,64px); letter-spacing:-2px; }
.tokens-page h2 { font-size:clamp(28px,3.5vw,38px); letter-spacing:-1px; }
.tokens-page h3 { font-size:22px; letter-spacing:-.4px; }
.tokens-page p { margin:0; max-width:68ch; }
.tokens-page .lede { font-size:18px; color:var(--muted); }
.tokens-page .mono { font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.tokens-page section { display:flex; flex-direction:column; gap:18px; }
.tokens-page .panel { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; }
.tokens-page .note { font-size:13px; color:var(--muted); }
.tokens-page button { font:inherit; cursor:pointer; min-height:44px; }
.tokens-page [hidden] { display:none!important; }
.tokens-page .breadcrumb { font-size:13px; margin-top:28px; }
.tokens-page /* HERO */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.tokens-page .hero > *{min-width:0}
.tokens-page .hero-text{display:flex;flex-direction:column;gap:16px}
.tokens-page .replay{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.tokens-page .turn{display:flex;align-items:center;gap:10px;font-size:.85rem}
.tokens-page .turn .lbl{width:74px;flex:none;color:var(--muted)}
.tokens-page .turn .bar{height:14px;border-radius:4px;display:flex;overflow:hidden;flex:1;background:var(--bg)}
.tokens-page .seg-sys{background:var(--muted);opacity:.45}
.tokens-page .seg-hist{background:var(--burn)}
.tokens-page .seg-new{background:var(--accent)}
.tokens-page .turn .n{width:64px;text-align:right;flex:none}
.tokens-page .legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.8rem;color:var(--muted)}
.tokens-page .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.tokens-page .btn{background:var(--accent);color:#fff;border:0;border-radius:999px;padding:9px 18px;font-weight:700;align-self:flex-start}
.tokens-page .btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}

.tokens-page /* SIMULADOR */
.sim{display:grid;grid-template-columns:300px 1fr;gap:22px}
.tokens-page .sim > *{min-width:0}
.tokens-page .controls{display:flex;flex-direction:column;gap:18px}
.tokens-page .ctl label{display:flex;justify-content:space-between;font-weight:700;font-size:.92rem;gap:8px}
.tokens-page .ctl label span{font-family:var(--f-mono);color:var(--accent);font-weight:600}
.tokens-page .ctl small{display:block;color:var(--muted);font-size:.78rem;line-height:1.4}
.tokens-page input[type=range]{width:100%;accent-color:var(--accent)}
.tokens-page .seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tokens-page .seg button{flex:1;border:0;background:transparent;color:var(--ink);padding:8px 4px;font-size:.88rem}
.tokens-page .seg button[aria-pressed=true]{background:var(--accent);color:#fff;font-weight:700}
.tokens-page .switch{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.92rem}
.tokens-page .switch input{width:20px;height:20px;accent-color:var(--ok)}
.tokens-page .results{display:flex;flex-direction:column;gap:16px}
.tokens-page .gauges{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tokens-page .gauge{border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px}
.tokens-page .gauge.bad{background:var(--burn-soft)}
.tokens-page .gauge.good{background:var(--ok-soft)}
.tokens-page .gauge .k{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.tokens-page .gauge .v{font-family:var(--f-display);font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums}
.tokens-page .gauge.bad .v{color:var(--burn)} .tokens-page .gauge.good .v{color:var(--ok)}
.tokens-page .saving{font-family:var(--f-display);font-size:1.25rem;font-weight:700}
.tokens-page .saving b{color:var(--ok)}
.tokens-page .chart{display:flex;align-items:flex-end;gap:2px;height:180px;border-bottom:1px solid var(--line);padding-top:8px;position:relative}
.tokens-page .chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;position:relative}
.tokens-page .chart .col .a{background:var(--burn);border-radius:2px 2px 0 0;transition:height .35s ease}
.tokens-page .chart .col .b{position:absolute;bottom:0;left:22%;right:22%;background:var(--ok);border-radius:2px 2px 0 0;transition:height .35s ease;opacity:.95}
.tokens-page .axis{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);font-family:var(--f-mono)}

.tokens-page /* TRUCOS EN PESTAÑAS */
.tabs-shell{display:grid;grid-template-columns:250px 1fr;gap:0;padding:0;overflow:hidden}
.tokens-page .tabs-shell > *{min-width:0}
.tokens-page .tablist{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--bg);max-height:640px;overflow-y:auto}
.tokens-page .tgroup{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:14px 16px 6px;font-weight:600}
.tokens-page .tab{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--ink);text-align:left;padding:9px 16px;font-size:.9rem;border-left:3px solid transparent;line-height:1.3}
.tokens-page .tab .num{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);width:20px;flex:none}
.tokens-page .tab .dot{width:8px;height:8px;border-radius:50%;flex:none;margin-left:auto}
.tokens-page .dot.alto{background:var(--burn)} .tokens-page .dot.medio{background:var(--accent)} .tokens-page .dot.bajo{background:var(--muted)}
.tokens-page .tab:hover{background:var(--surface)}
.tokens-page .tab[aria-selected=true]{background:var(--surface);border-left-color:var(--accent);font-weight:700}
.tokens-page .tab.seen .num{color:var(--ok)}
.tokens-page .tabpanel{padding:24px;display:flex;flex-direction:column;gap:18px}
.tokens-page .tp-head{display:flex;flex-direction:column;gap:8px}
.tokens-page .tp-head h3{font-size:1.5rem}
.tokens-page .meter{display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--muted)}
.tokens-page .meter .m{flex:1;max-width:260px;height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.tokens-page .meter .m div{height:100%;background:linear-gradient(90deg,var(--ok),var(--ok));border-radius:99px;transition:width .5s ease}
.tokens-page .meter b{color:var(--ok);font-family:var(--f-mono)}
.tokens-page .why{font-size:1rem}
.tokens-page .ba{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tokens-page .ba > div{border-radius:10px;padding:14px;min-width:0;font-size:.92rem}
.tokens-page .ba .x{background:var(--burn-soft)} .tokens-page .ba .y{background:var(--ok-soft)}
.tokens-page .ba b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.tokens-page .ba .x b{color:var(--burn)} .tokens-page .ba .y b{color:var(--ok)}
.tokens-page .prompt{border:1px dashed var(--accent);border-radius:10px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;background:var(--accent-soft)}
.tokens-page .prompt code{font-family:var(--f-mono);font-size:.85rem;flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
.tokens-page .prompt button{border:0;background:var(--accent);color:#fff;border-radius:8px;padding:6px 12px;font-size:.8rem;font-weight:700;flex:none}
.tokens-page .plabel{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--accent);margin-bottom:-10px}
.tokens-page .caveat{font-size:.85rem;color:var(--muted);border-left:3px solid var(--line);padding-left:12px}
.tokens-page .caveat b{color:var(--ink)}
.tokens-page .tp-nav{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap}
.tokens-page .tp-nav .pos{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.tokens-page .btn.small{padding:7px 14px;font-size:.88rem}
.tokens-page .btn:disabled{opacity:.35;cursor:default}

.tokens-page /* SHEETS RACE */
.race{display:flex;flex-direction:column;gap:14px}
.tokens-page .lane{display:grid;grid-template-columns:150px 1fr 90px;gap:12px;align-items:center}
.tokens-page .lane > *{min-width:0}
.tokens-page .track{height:26px;background:var(--bg);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.tokens-page .fill{height:100%;width:0}
.tokens-page .lane.bad .fill{background:var(--burn)} .tokens-page .lane.good .fill{background:var(--ok)}
.tokens-page .lane .cnt{text-align:right;font-weight:600}

.tokens-page /* QUIZ */
.quiz{display:flex;flex-direction:column;gap:14px}
.tokens-page .q{display:flex;flex-direction:column;gap:8px}
.tokens-page .opts{display:flex;flex-wrap:wrap;gap:8px}
.tokens-page .opts button{background:var(--surface);border:1.5px solid var(--line);color:var(--ink);border-radius:10px;padding:8px 14px;text-align:left}
.tokens-page .opts button.right{border-color:var(--ok);background:var(--ok-soft)}
.tokens-page .opts button.wrong{border-color:var(--burn);background:var(--burn-soft)}
.tokens-page .fb{font-size:.88rem;color:var(--muted);min-height:1.4em}

.tokens-page /* CHECKLIST */
.check{display:flex;flex-direction:column;gap:8px}
.tokens-page .check label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.tokens-page .check input{width:18px;height:18px;margin-top:3px;accent-color:var(--ok);flex:none}
.tokens-page .check label:has(input:checked){border-color:var(--ok)}
.tokens-page .check label:has(input:checked) span{color:var(--muted);text-decoration:line-through}
.tokens-page .progress{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.tokens-page .progress div{height:100%;background:var(--ok);width:0;transition:width .3s}

@media (max-width:760px){
  .tokens-page .hero,.tokens-page .sim{grid-template-columns:1fr}
  .tokens-page .tabs-shell{grid-template-columns:1fr}
  .tokens-page .tablist{flex-direction:row;max-height:none;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .tokens-page .tgroup{display:none}
  .tokens-page .tab{flex:none;border-left:0;border-bottom:3px solid transparent;padding:12px 14px;white-space:nowrap}
  .tokens-page .tab[aria-selected=true]{border-bottom-color:var(--accent)}
  .tokens-page .tab .dot{margin-left:4px}
  .tokens-page .ba{grid-template-columns:1fr}
  .tokens-page .tabpanel{padding:18px}
  .tokens-page .lane{grid-template-columns:1fr 70px}
  .tokens-page .lane .name{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.tokens-page *{transition:none!important;animation:none!important}}

.tokens-page .hero { padding:0; gap:36px; }
.tokens-page .btn { border-radius:10px; }
.tokens-page .panel.tabs-shell { padding:0; }
.tokens-page .chart .col { height:100%; }
.tokens-page .chart { padding-top:8px; }
.tokens-page .gauge .v { font-size:clamp(24px,4vw,34px); }
.tokens-page .eyebrow { color:var(--accent); }
.tokens-page .reference-content { margin:0; }
.tokens-page .panel.tabs-shell { display:flex; flex-direction:column; }
.tokens-page .tablist { flex-direction:row; max-height:none; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:8px; gap:4px; }
.tokens-page .tab { flex:none; border:0; border-radius:8px; padding:12px 20px; white-space:nowrap; }
.tokens-page .tab[aria-selected=true] { background:var(--accent); color:#fff; }
.tokens-page .tablist-bottom { border-top:1px solid var(--line); border-bottom:0; }
.tokens-page .tablist-bottom .tab[aria-pressed=true] { background:var(--accent); color:#fff; font-weight:700; }
.tokens-page .tip-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.tokens-page .tip-card { display:flex; flex-direction:column; gap:16px; min-width:0; border:1px solid var(--line); border-radius:12px; padding:24px; }
.tokens-page .tip-card h4 { margin:0; font:400 26px/1.2 Georgia,serif; text-wrap:balance; }
.tokens-page .tip-card .ba { grid-template-columns:1fr; }
.tokens-page .tip-experiment { display:flex; flex-direction:column; gap:12px; padding:18px; border:1px solid #c7dbce; border-radius:12px; background:var(--soft); }
.tokens-page .experiment-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.tokens-page .experiment-heading h5 { margin:0; font:700 15px/1.4 Arial,sans-serif; }
.tokens-page .experiment-heading button { background:var(--surface); color:var(--accent); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:12px; }
.tokens-page .tip-experiment label { display:flex; justify-content:space-between; gap:12px; font-size:14px; font-weight:700; }
.tokens-page .experiment-value { font-family:var(--f-mono); color:var(--accent); }
.tokens-page .tip-experiment input[type=range] { width:100%; min-height:32px; margin:0; accent-color:var(--accent); }
.tokens-page .experiment-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.tokens-page .experiment-comparison > div { display:flex; flex-direction:column; justify-content:flex-end; gap:8px; min-width:0; }
.tokens-page .experiment-comparison > div > span { font-size:12px; line-height:1.5; }
.tokens-page .experiment-comparison strong { font:400 28px/1.1 Georgia,serif; font-variant-numeric:tabular-nums; }
.tokens-page .experiment-track { background:#d9e4da; height:10px; border-radius:8px; overflow:hidden; }
.tokens-page .experiment-track span { display:block; height:100%; border-radius:8px; transition:width .2s; }
.tokens-page .experiment-bar-before { background:var(--burn); }
.tokens-page .experiment-bar-after { background:var(--ok); }
.tokens-page .experiment-result { font-size:14px; font-weight:700; }
.tokens-page .experiment-explanation { line-height:1.6; }
.tokens-page .token-sources { display:flex; flex-direction:column; gap:20px; }
.tokens-page .token-sources h4 { margin:12px 0 0; font:400 clamp(24px,3vw,30px)/1.2 Georgia,serif; }
.tokens-page .sources-list { display:grid; gap:16px; margin:0; padding-left:24px; }
.tokens-page .sources-list li { padding-left:4px; }
.tokens-page .sources-list a { font-weight:700; text-underline-offset:4px; overflow-wrap:anywhere; }
.tokens-page .sources-list p { margin-top:6px; font-size:14px; color:var(--muted); }
.tokens-page .sources-note { display:flex; flex-direction:column; gap:16px; background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:24px; }
.tokens-page .sources-note h4 { margin:0; }
@media(max-width:1023px) { .tokens-page .tip-grid { grid-template-columns:1fr; } }
@media(max-width:760px) { .tokens-page .tip-card { padding:18px; } .tokens-page .tab { padding:12px 16px; } }
@media(min-width:1024px) {
  html[data-page="ahorro-tokens"] .wrap.tokens-page { max-width:1480px; padding-inline:40px; }
  html[data-page="ahorro-tokens"] .site-header { max-width:1480px; padding-inline:40px; }
  .tokens-page .hero { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px; }
  .tokens-page .sim { grid-template-columns:320px minmax(0,1fr); gap:36px; }
  .tokens-page .tabs-shell { grid-template-columns:320px minmax(0,1fr); }
  .tokens-page .tabpanel { padding:32px; }
  .tokens-page .chart { height:240px; }
}
@media(max-width:760px) { .tokens-page { gap:36px; } .tokens-page .hero { gap:24px; } .tokens-page .panel { padding:18px; } .tokens-page .panel.tabs-shell { padding:0; } .tokens-page .tablist { max-width:100%; } .tokens-page .meter { flex-wrap:wrap; gap:8px; } .tokens-page .prompt { flex-wrap:wrap; } .tokens-page .prompt code { flex-basis:100%; } .tokens-page .turn .lbl { width:58px; } .tokens-page .turn .n { width:50px; } }