/* Pulido de gráficos — PRUEBA 30/10/2026. Estilo propio (tarjetas KPI + sparkline), código vanilla. Sólo visual. */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
.page{padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
button,.actions a,label.fit{touch-action:manipulation}
.actions a,.actions button,.period-pills button,.hist-go{transition:transform .12s cubic-bezier(.23,1,.32,1),background-color .15s,color .15s}
.actions a:active,.actions button:active,.period-pills button:active,.hist-go:active{transform:scale(.97)}
.period-pills button:hover,.hist-lookup .hist-go:hover{color:var(--muted);border-color:var(--border)}
.period-pills button.on:hover{color:#fff;border-color:var(--accent)}
@media (hover:hover) and (pointer:fine){.period-pills button:not(.on):hover,.hist-lookup .hist-go:hover{color:var(--ink);border-color:var(--muted)}}
.hist-lookup input[type=date]{font-size:16px}
.period-pills button{min-height:32px;padding:6px 11px;border-radius:999px}
.period-bar{border-radius:0 0 14px 14px}

/* Tarjetas y secciones más livianas */
:root{--card-b:rgba(17,24,39,.08);--up:#15803D;--down:#B91C1C;--up-bg:rgba(21,128,61,.09);--down-bg:rgba(185,28,28,.08);--neu-bg:rgba(107,114,128,.10)}
:root[data-theme=dark]{--card-b:rgba(255,255,255,.08);--up:#4ADE80;--down:#F87171;--up-bg:rgba(74,222,128,.12);--down-bg:rgba(248,113,113,.12);--neu-bg:rgba(156,163,175,.14)}
.card{border-color:var(--card-b);border-radius:16px;padding:14px 14px 10px}
h2.sec{border-bottom:0;padding-bottom:0;margin:26px 0 10px;font-size:16px;letter-spacing:-.01em}
.chg{background:transparent;border-color:var(--card-b);border-radius:999px;padding:2px 8px;font-weight:700}

/* KPI con sparkline */
#metrics{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
@media(max-width:560px){#metrics{grid-template-columns:1fr 1fr;gap:8px}}
.kc{position:relative;background:var(--card);border:1px solid var(--card-b);border-radius:16px;padding:12px 12px 8px;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.kc .kl{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc .kv{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kc .kv small{font-size:13px;font-weight:400;color:var(--muted);margin-left:2px;letter-spacing:0}
.kc .kd{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--muted);min-height:18px;flex-wrap:wrap}
.kc .dl{display:inline-flex;align-items:center;gap:2px;font-weight:700;border-radius:999px;padding:1px 7px;background:var(--neu-bg);color:var(--ink);font-variant-numeric:tabular-nums}
.kc .dl.up{background:var(--up-bg);color:var(--up)}
.kc .dl.down{background:var(--down-bg);color:var(--down)}
.kc .sp{position:relative;height:40px;margin:8px -2px 0;touch-action:pan-y}
.kc .sp svg{display:block;width:100%;height:100%;overflow:visible}
.kc .sp .ln{fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kc .sp .mk{opacity:0;transition:opacity .12s}
.kc .sp.on .mk{opacity:1}
.kc .tip{position:absolute;top:-30px;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-size:11px;font-weight:700;white-space:nowrap;padding:3px 7px;border-radius:7px;pointer-events:none;opacity:0;transition:opacity .12s;font-variant-numeric:tabular-nums;z-index:2}
.kc .sp.on .tip{opacity:1}
.kc .nosp{height:40px;margin-top:8px;display:flex;align-items:flex-end;font-size:10.5px;color:var(--muted)}
.kc.warn .kv{color:inherit}

/* Entrada corta (sólo opacity/transform y trazo) */
@keyframes hxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kc{animation:hxIn .26s cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--i,0) * 25ms)}
.kc .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:hxDraw .3s cubic-bezier(.23,1,.32,1) forwards;animation-delay:calc(60ms + var(--i,0) * 25ms)}
.kc .ar{opacity:0;animation:hxFade .3s cubic-bezier(.23,1,.32,1) forwards;animation-delay:calc(140ms + var(--i,0) * 25ms)}
@keyframes hxDraw{to{stroke-dashoffset:0}}
@keyframes hxFade{to{opacity:1}}
.card.rv{opacity:0;transform:translateY(8px)}
.card.rv.in{opacity:1;transform:none;transition:opacity .28s cubic-bezier(.23,1,.32,1),transform .28s cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion:reduce){
  .kc,.kc .ln,.kc .ar{animation:none!important;opacity:1;stroke-dashoffset:0}
  .card.rv{opacity:1!important;transform:none!important;transition:none!important}
  .actions a:active,.actions button:active,.period-pills button:active,.hist-go:active{transform:none}
}
.kc .sp .mk{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--card);border:2px solid var(--ink);pointer-events:none}

/* Tablero oficial: tarjetas de combustible y UOCRA con el mismo estándar */
.metrics.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:12px}
@media(max-width:560px){.metrics.kpis{grid-template-columns:1fr 1fr;gap:8px}}
.kc .ks{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.35}
.kc .ks b{color:var(--ink);font-weight:700}
.kc .kv small{white-space:nowrap}
.kc .nosp{line-height:1.3}