/* Mielec · estilo app de iPhone: tarjetas redondeadas, barra inferior translúcida, hojas deslizantes */
:root{
  --bg:#f2f2f7;--card:#fff;--ink:#1c1c1e;--ink2:#6c6c70;--ink3:#aeaeb2;--line:rgba(60,60,67,.14);--fill:rgba(118,118,128,.12);
  --miel:#f5a400;--miel2:#ffb82e;--miel-t:#7a4f00;--miel-bg:#fff3d1;--on-miel:#2b1c00;
  --ok:#1f9d55;--ok-bg:#e3f6ea;--mal:#e5484d;--mal-bg:#fde8e8;--lo:#34c759;--mid:#ffcc00;--hi:#ff6b5e;
  --sombra:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
  --sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px);
  --tab:calc(58px + var(--sa-b));
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#000;--card:#1c1c1e;--ink:#f5f5f7;--ink2:#a1a1a6;--ink3:#636366;--line:rgba(235,235,245,.14);--fill:rgba(118,118,128,.28);
  --miel-t:#ffd27a;--miel-bg:#3a2a05;--ok:#4cd38a;--ok-bg:#12301f;--mal:#ff7b7f;--mal-bg:#3a1517;--sombra:none}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 var(--f);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
svg{display:block}
h1,h2,h3,h4,p{margin:0}

.vista{max-width:560px;margin:0 auto;padding:calc(var(--sa-t) + 8px) 16px calc(var(--tab) + 28px);min-height:100dvh}
.vista>*+*{margin-top:12px}
.tit{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:14px 4px 4px}
.tit small{display:block;color:var(--ink2);font-size:13px}.tit small::first-letter{text-transform:uppercase}
.tit h1{font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.sub{color:var(--ink2);font-size:13px}.sub.centro{text-align:center;margin-top:8px}
.nota,.fuente{color:var(--ink2);font-size:12px;line-height:1.4}
.fuente{padding:0 6px;text-align:center}

/* tarjetas */
.tarjeta{background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--sombra)}
.tarjeta h2,.cab-t h2{font-size:17px;font-weight:700;margin-bottom:6px}
.cab-t{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.cab-t h2{margin:0}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:12px}.rejilla>*{margin:0!important}
.dato small{color:var(--ink2);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.dato b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.dato em{display:block;font-style:normal;color:var(--miel-t);font-size:13px;font-weight:600}
.dato p{color:var(--ink2);font-size:12px;margin-top:6px;line-height:1.3}
.vacia{text-align:center;display:grid;gap:8px;justify-items:center;padding:26px 18px}.vacia p{color:var(--ink2);font-size:14px}
.aviso-t p{color:var(--ink2);font-size:14px;margin:4px 0 10px}

/* hero de precio */
.hero{background:linear-gradient(160deg,var(--miel2),var(--miel));color:var(--on-miel);padding:18px 18px 20px;position:relative;overflow:hidden}
.hero.barata{background:linear-gradient(160deg,#5fd88a,#27ae60);color:#052b14}
.hero.cara{background:linear-gradient(160deg,#ff9a8a,#ee5a4a);color:#3a0904}
.hero .et{font-weight:600;font-size:14px;opacity:.8;margin-top:14px}
.hero .gran{font-size:56px;line-height:1.05;font-weight:800;letter-spacing:-.03em}
.hero .gran span{font-size:18px;font-weight:700;letter-spacing:0;opacity:.75}
.fila-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.hero .seg{background:rgba(255,255,255,.35)}.hero .seg button.on{background:#fff;color:#000}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700;background:var(--fill);white-space:nowrap}
.chip.ok{background:rgba(255,255,255,.7);color:#0b5b2b}.chip.mal{background:rgba(255,255,255,.7);color:#8a1c1f}
.chip.niv{background:rgba(255,255,255,.7);color:inherit}
.chip.demo{background:var(--miel-bg);color:var(--miel-t)}
.chip.vivo{color:var(--ok);background:var(--ok-bg)}.chip.vivo i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulso 1.6s infinite}
@keyframes pulso{50%{opacity:.3}}

/* segmentado */
.seg{display:flex;background:var(--fill);border-radius:11px;padding:2px;gap:2px}
.seg button{flex:1;min-height:34px;padding:0 12px;border-radius:9px;font-weight:600;font-size:14px;color:var(--ink);transition:background .15s}
.seg button.on{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.16)}
.seg button:disabled{opacity:.35}
.seg.peq{display:inline-flex}.seg.peq button{min-height:30px;font-size:13px;padding:0 10px;flex:none}
.seg.grande button{min-height:44px;font-size:15px}
.seg.lado{margin-top:16px}
.hero .seg.peq{display:flex;width:100%}.hero .seg.peq button{flex:1}

/* botones */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border-radius:15px;background:var(--miel);color:var(--on-miel);font-weight:700;font-size:16px;width:100%;transition:transform .1s,opacity .15s}
.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.peq{min-height:36px;width:auto;font-size:14px;padding:0 14px;border-radius:11px}
.btn.claro{background:var(--fill);color:var(--ink)}
.btn.anadir{width:100%;margin-top:6px}
.rueda{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* banners y estados */
.banner{display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.banner b{display:block;font-size:15px}.banner small{display:block;color:var(--ink2);font-size:13px;line-height:1.3}
.banner>svg{width:18px;height:18px;margin-left:auto;flex:none;fill:none;stroke:var(--ink3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.banner:not(.suave){background:var(--ok-bg)}.banner:not(.suave) .ico{background:var(--ok);color:#fff}
.ico{width:40px;height:40px;border-radius:12px;background:var(--miel-bg);color:var(--miel-t);display:grid;place-items:center;flex:none}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.estado{display:flex;gap:12px;align-items:flex-start}
.estado.alerta{background:var(--ok-bg)}.estado.alerta .ico{background:var(--ok);color:#fff}
.estado b{font-size:16px}.estado p{color:var(--ink2);font-size:14px;margin:4px 0 10px}.estado p b{color:var(--ink)}
.pista,.pista-fina{font-size:13px;color:var(--miel-t);background:var(--miel-bg);border-radius:14px;padding:11px 14px}
.pista p{margin-top:2px;font-size:14px}.k{background:var(--card);border-radius:6px;padding:1px 6px;font-weight:700;color:var(--ink)}
.cargando{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--ink2);padding:40px 0}.cargando i{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--ink3);border-right-color:transparent;animation:gira .7s linear infinite}

/* listas de ajustes (estilo iOS) */
.lista{display:flex;flex-direction:column}
.fila{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 0;border-bottom:.5px solid var(--line)}
.lista>.fila:last-child,.lista>:last-child .fila:last-child{border-bottom:0}
.fila>span{flex:1;min-width:0;font-size:16px}
.fila small{display:block;color:var(--ink2);font-size:12px;line-height:1.3;margin-top:1px}
.sep{font-size:12px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;padding:14px 0 2px}
.in{height:42px;width:128px;border:0;border-radius:11px;background:var(--fill);padding:0 12px;text-align:right;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;outline:none;-webkit-appearance:none;appearance:none}
.in:focus{box-shadow:0 0 0 2px var(--miel)}
.in.corto{width:104px}.in.txt{text-align:left;width:180px;font-weight:500}
.in.sel{width:auto;max-width:170px;text-align:left;padding-right:8px;background-image:none}
.unid{display:flex;align-items:center;gap:8px}.unid em{font-style:normal;color:var(--ink2);font-size:13px;min-width:44px}
.unid .in{width:100px}
.paso{display:flex;align-items:center;gap:2px;background:var(--fill);border-radius:11px}
.paso button{width:42px;height:38px;font-size:22px;font-weight:600}.paso b{min-width:26px;text-align:center;font-size:17px}
.inter{width:51px;height:31px;border-radius:999px;background:var(--fill);position:relative;flex:none;transition:background .2s}
.inter i{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform .2s}
.inter.on{background:var(--lo)}.inter.on i{transform:translateX(20px)}

/* grupos desplegables */
.grupo{padding:0}
.grupo summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:16px;min-height:56px;font-weight:700;font-size:17px;cursor:pointer}
.grupo summary::-webkit-details-marker{display:none}
.grupo summary small{display:block;font-weight:500;font-size:13px;color:var(--ink2)}
.grupo summary>svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.grupo[open] summary>svg{transform:rotate(90deg)}
.grupo>.lista{padding:0 16px 14px;border-top:.5px solid var(--line)}
.subtarjeta{background:var(--bg);border-radius:14px;padding:6px 12px;margin-top:10px}
.cab-sub{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.mini{width:30px;height:30px;border-radius:50%;background:var(--fill);display:grid;place-items:center}.mini svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* barra de descarga */
.espacio-barra{height:84px}
.barra-desc{position:fixed;left:0;right:0;bottom:var(--tab);z-index:20;display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto;padding:10px 16px;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--line)}
.b-txt{flex:1;min-width:0}.b-txt small{display:block;color:var(--ink2);font-size:12px;line-height:1.2}.b-txt b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.b-txt.ok b{color:var(--ok)}.b-txt.mal b{color:var(--mal)}.b-txt.err b{font-size:14px;font-weight:600;color:var(--mal);line-height:1.25;display:block}
.barra-desc .btn{width:auto;flex:none;min-height:46px;padding:0 16px;font-size:15px}

/* barra de pestañas */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;height:var(--tab);padding-bottom:var(--sa-b);background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-top:.5px solid var(--line)}
.tabs button{flex:1;max-width:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink2);font-size:10.5px;font-weight:600}
.tabs svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs button.on{color:var(--miel)}.tabs button.on svg{fill:color-mix(in srgb,var(--miel) 22%,transparent)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--tab) + 90px);transform:translate(-50%,20px);z-index:60;background:rgba(30,30,32,.94);color:#fff;border-radius:14px;padding:11px 18px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}.toast.err{background:#c0262b}

/* gráficos */
.gr{width:100%;height:auto;overflow:visible}
.gr .b{fill:var(--mid)}.gr .b.lo{fill:var(--lo)}.gr .b.hi{fill:var(--hi)}.gr .b.now{stroke:var(--ink);stroke-width:2}
.gr .mio{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:5 4;opacity:.7}
.gr .et{font-size:10px;font-weight:700;fill:var(--ink2)}.gr .ej{font-size:10px;fill:var(--ink2)}
.gr .ln{fill:none;stroke:var(--miel);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.gr .area{fill:color-mix(in srgb,var(--miel) 16%,transparent)}
.gr .pt{fill:var(--card);stroke:var(--miel);stroke-width:2.5}.gr .pt.bajo{fill:var(--lo);stroke:var(--lo)}
.leyenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink2);margin-top:8px}
.leyenda span{display:inline-flex;align-items:center;gap:6px}.leyenda b{width:10px;height:10px;border-radius:3px;background:var(--mid)}
.leyenda b.lo{background:var(--lo)}.leyenda b.hi{background:var(--hi)}
.apil{display:flex;height:12px;border-radius:99px;overflow:hidden;gap:2px;margin-top:14px}.apil i{display:block}
ul.dias{list-style:none;padding:0;margin:12px 0 0}
.dias li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:.5px solid var(--line);font-size:14px}
.dias li span{flex:1;color:var(--ink2)}.dias li span::first-letter{text-transform:uppercase}.dias li b{font-variant-numeric:tabular-nums}
.dias li i{font-style:normal;font-size:12px;font-weight:700;border-radius:99px;padding:3px 9px}.dias li i.ok{background:var(--ok-bg);color:var(--ok)}.dias li i.mal{background:var(--fill);color:var(--ink2)}

/* factura interactiva */
.factura{background:var(--card);border-radius:20px;padding:18px 16px 8px;box-shadow:var(--sombra);position:relative}
.factura::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:10px;background:radial-gradient(circle at 8px -2px,transparent 8px,var(--card) 8.5px) repeat-x;background-size:16px 10px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.05))}
.f-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.f-cab small{color:var(--ink2);font-size:13px}.f-cab b{display:block;font-size:15px}
.sello{border:1.5px solid var(--miel);color:var(--miel-t);border-radius:8px;padding:2px 8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;transform:rotate(3deg)}
.f-tot{margin:14px 0 2px}.f-tot small{color:var(--ink2);font-size:13px}.f-tot b{display:block;font-size:44px;line-height:1.05;font-weight:800;letter-spacing:-.03em}
.pista-toque{display:flex;align-items:center;gap:6px;margin:14px 0 4px;font-size:13px;font-weight:600;color:var(--miel-t);background:var(--miel-bg);border-radius:10px;padding:8px 10px}
.pista-toque svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.f-grupo h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);margin:16px 0 2px}
.f-fila{display:flex;align-items:center;gap:8px;width:100%;min-height:58px;padding:8px 0;border-bottom:.5px solid var(--line);text-align:left;border-radius:0}
.f-fila:active{background:var(--fill)}
.f-fila>span{flex:1;min-width:0;font-weight:600;font-size:15px}.f-fila small{display:block;font-weight:400;color:var(--ink2);font-size:12px;line-height:1.3}
.f-fila b{font-variant-numeric:tabular-nums;font-size:16px;white-space:nowrap}.f-fila b.neg{color:var(--ok)}
.f-fila>svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--ink3);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.f-fila.apagada{opacity:.55}
.f-total{border-bottom:0;margin-top:6px;min-height:64px}.f-total>span{font-size:17px;font-weight:800}.f-total b{font-size:22px}

/* hoja inferior */
.hoja{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s;display:flex;align-items:flex-end;justify-content:center}
.hoja.on{opacity:1;pointer-events:auto}
.hoja-panel{background:var(--bg);width:100%;max-width:560px;max-height:88dvh;overflow:auto;border-radius:26px 26px 0 0;padding:8px 18px calc(18px + var(--sa-b));transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);position:relative;-webkit-overflow-scrolling:touch}
.hoja.on .hoja-panel{transform:none}
.asa{width:38px;height:5px;border-radius:9px;background:var(--ink3);opacity:.5;margin:4px auto 10px}
.hoja-x{position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--fill);display:grid;place-items:center}.hoja-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.hoja-panel>*+*{margin-top:12px}
.hoja-cab small{color:var(--ink2);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.hoja-cab h2{font-size:24px;letter-spacing:-.02em;margin-top:2px;padding-right:36px}
.gran-imp{font-size:40px;font-weight:800;letter-spacing:-.03em;margin-top:4px}.gran-imp.neg{color:var(--ok)}
.que{font-size:16px;line-height:1.5}
.calc,.comp,.tipbox{background:var(--card);border-radius:16px;padding:14px}
.calc h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);margin-bottom:6px}
.calc div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:.5px solid var(--line);font-size:14px}.calc div:first-of-type{border-top:0}
.calc b{white-space:nowrap;font-variant-numeric:tabular-nums}
.comp{display:grid;grid-template-columns:1fr auto;gap:2px 10px}.comp small{color:var(--ink2);font-size:13px}.comp b{font-size:18px;text-align:right}
.comp em{grid-column:1/3;font-style:normal;font-size:13px;font-weight:700}.comp em.ok{color:var(--ok)}.comp em.mal{color:var(--mal)}
.tipbox{background:var(--miel-bg);color:var(--miel-t)}.tipbox p{margin-top:2px;font-size:14px;color:var(--ink)}

/* informe (solo para el PDF: fuera de pantalla, A4 a 794 x 1123 px) */
.informe-oculto{position:fixed;left:-12000px;top:0;width:794px;pointer-events:none}
.i-hoja{width:794px;height:1123px;background:#fff;color:#1c1c1e;padding:56px 56px 44px;position:relative;overflow:hidden;font-family:var(--f);display:flex;flex-direction:column}
.i-hoja *{box-sizing:border-box}
.i-barra{position:absolute;left:0;top:0;right:0;height:14px;background:linear-gradient(90deg,#ffb82e,#f5a400)}
.i-cab{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.i-marca{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:800;letter-spacing:-.02em}
.i-fecha{text-align:right;font-size:13px;color:#6c6c70;line-height:1.5}.i-fecha b{color:#1c1c1e;font-size:15px}
.i-tit{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.03em;margin:44px 0 0}.i-tit em{font-style:normal;color:#f5a400}
.i-big{font-size:104px;line-height:1;font-weight:800;letter-spacing:-.05em;margin:14px 0 0;color:#1f9d55}.i-big.mal{color:#e5484d}
.i-sub{font-size:19px;color:#6c6c70;margin-top:8px}.i-sub.izq{margin-top:10px;font-size:15px}
.i-mets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
.i-mets div{background:#f6f6f8;border-radius:18px;padding:16px 18px}.i-mets div.dest{background:#fff3d1}
.i-mets small{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#6c6c70}
.i-mets b{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em;margin-top:4px}.i-mets span{font-size:12px;color:#6c6c70}
.i-h2{font-size:19px;font-weight:800;margin:30px 0 10px}
.i-graf{background:#f6f6f8;border-radius:18px;padding:14px 16px 8px}.i-graf .gr{height:230px}
.i-orig{background:#f6f6f8;border-radius:18px;padding:10px 18px 14px}.i-o{display:grid;grid-template-columns:210px 1fr 90px;align-items:center;gap:12px;padding:9px 0;font-size:14.5px;border-bottom:1px solid #ececf0}.i-o:last-of-type{border-bottom:0}.i-o i{height:9px;background:#e5e5ea;border-radius:9px;overflow:hidden}.i-o u{display:block;height:100%;background:#1f9d55;border-radius:9px}.i-o u.mal{background:#e5484d}.i-o b{text-align:right}.i-o b.ok{color:#1f9d55}.i-o b.mal{color:#e5484d}.i-peq{font-size:12px;color:#8e8e93;margin-top:6px}
.i-graf text{font-size:11px;fill:#6c6c70;font-family:var(--f)}
.i-ley{display:flex;gap:18px;font-size:13px;color:#6c6c70;margin-top:10px}.i-ley span{display:inline-flex;align-items:center;gap:6px}.i-ley b{width:11px;height:11px;border-radius:3px}
.i-lista,.i-avisos{margin:0;padding-left:20px;font-size:14.5px;line-height:1.6}.i-avisos{margin-top:12px;color:#7a4f00;font-size:13.5px}
.i-pie{margin-top:auto;display:flex;justify-content:space-between;font-size:12px;color:#8e8e93;border-top:1px solid #e5e5ea;padding-top:12px}
.i-tab{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px}
.i-tab th{text-align:right;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#6c6c70;padding:0 0 10px;border-bottom:2px solid #1c1c1e}.i-tab th:first-child{text-align:left}
.i-tab td{text-align:right;padding:11px 0;border-bottom:1px solid #ececf0;font-variant-numeric:tabular-nums}.i-tab td:first-child{text-align:left;font-weight:600}
.i-tab tr.tot td{font-size:19px;font-weight:800;border-bottom:0;border-top:2px solid #1c1c1e;padding-top:14px}
.i-tab td.ok{color:#1f9d55;font-weight:700}.i-tab td.mal{color:#e5484d;font-weight:700}
.i-tab.peq{font-size:13.5px;margin-top:0}.i-tab.peq td{padding:8px 0}
.i-nota{margin-top:24px;background:#f6f6f8;border-radius:16px;padding:16px 18px;font-size:13px;line-height:1.55;color:#48484a}

@media (min-width:700px){body{background:var(--bg)}.vista{padding-top:28px}}
@media (max-width:360px){.hero .gran{font-size:46px}.in{width:104px}.in.txt{width:140px}.tit h1{font-size:30px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================= Mielec · capa visual ================= */
:root{--tab:calc(86px + var(--sa-b));--r:24px;
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='1.4'%3E%3Cpath d='M28 2 54 17v30L28 62 2 47V17zM28 64l26 15v18M28 64 2 79v18'/%3E%3C/g%3E%3C/svg%3E")}
body{background:var(--bg) radial-gradient(120% 60% at 50% -10%,color-mix(in srgb,var(--miel) 14%,transparent),transparent 70%) no-repeat;background-attachment:fixed}
.tarjeta{border-radius:var(--r);border:.5px solid var(--line);box-shadow:0 1px 1px rgba(0,0,0,.03),0 10px 30px -12px rgba(120,80,0,.18)}
@media (prefers-color-scheme:dark){.tarjeta{box-shadow:none}}

/* entrada escalonada */
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vista>*{animation:entra .5s cubic-bezier(.2,.8,.2,1) both}
.vista>*:nth-child(2){animation-delay:.04s}.vista>*:nth-child(3){animation-delay:.08s}.vista>*:nth-child(4){animation-delay:.12s}
.vista>*:nth-child(5){animation-delay:.16s}.vista>*:nth-child(6){animation-delay:.2s}.vista>*:nth-child(n+7){animation-delay:.24s}

/* marca y cabecera de Hoy */
.logo{display:inline-grid;place-items:center;width:38px;height:38px;color:var(--miel);filter:drop-shadow(0 4px 8px rgba(245,164,0,.45))}
.logo svg{width:100%;height:100%}.logo.sm{width:34px;height:34px;margin-bottom:4px}
.cab-app{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 0}
.marca{display:flex;align-items:center;gap:8px}.marca b{font-size:22px;font-weight:800;letter-spacing:-.03em}
.marca .logo{width:34px;height:34px}
.saludo{padding:6px 4px 2px}.saludo small{display:block;color:var(--ink2);font-size:13px}.saludo small::first-letter{text-transform:uppercase}
.saludo h1{font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.03em}

/* hero con panal */
.hero{background:var(--hex) right -20px top -10px/112px auto,radial-gradient(90% 120% at 100% 0%,#ffd45c 0%,transparent 60%),linear-gradient(155deg,#ffb92e,#f08400);border:0;box-shadow:0 18px 40px -16px rgba(240,132,0,.65);padding:16px 18px 18px}
.hero.barata{background:var(--hex) right -20px top -10px/112px auto,radial-gradient(90% 120% at 100% 0%,#9bf0b8 0%,transparent 60%),linear-gradient(155deg,#43d17a,#1c9a50);box-shadow:0 18px 40px -16px rgba(28,154,80,.6)}
.hero.cara{background:var(--hex) right -20px top -10px/112px auto,radial-gradient(90% 120% at 100% 0%,#ffb3a6 0%,transparent 60%),linear-gradient(155deg,#ff7d6b,#dc3d2d);box-shadow:0 18px 40px -16px rgba(220,61,45,.6)}
.hero .gran{font-size:64px;letter-spacing:-.04em;margin-top:2px}.hero .gran b{font-weight:800;font-variant-numeric:tabular-nums}
.hero .seg{background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.marcador{position:relative;height:8px;border-radius:9px;background:linear-gradient(90deg,#34c759,#ffd60a 50%,#ff453a);margin-top:14px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.marcador i{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:left .9s cubic-bezier(.2,.8,.2,1)}
.m-ext{display:flex;justify-content:space-between;font-size:11px;font-weight:700;opacity:.75;margin-top:7px}
.chip.ok,.chip.mal,.chip.niv{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* barras con degradado y crecimiento */
.gr .b{fill:url(#gMid)}.gr .b.lo{fill:url(#gLo)}.gr .b.hi{fill:url(#gHi)}
@keyframes crece{from{transform:scaleY(0)}}
.gr .b{transform-box:fill-box;transform-origin:bottom;animation:crece .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*18ms)}
.gr .b.now{stroke:var(--ink);stroke-width:2.2}
.gr .ln{stroke-width:3.5;filter:drop-shadow(0 4px 6px rgba(245,164,0,.45))}
.leyenda b.lo{background:#34c759}.leyenda b.mid{background:#ffcc00}.leyenda b.hi{background:#ff6b5e}

/* datos: iconos de color */
.dato{position:relative;overflow:hidden}
.dato::after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;background:var(--hex) center/48px auto;opacity:.7;filter:invert(.6) sepia(1) hue-rotate(5deg) saturate(3);opacity:.18}

/* filas con icono estilo Ajustes de iOS */
.ri{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff;margin-right:-2px}
.ri svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ri.a{background:linear-gradient(145deg,#ffc247,#f08c00)}.ri.b{background:linear-gradient(145deg,#6aa9ff,#2f6df0)}
.ri.c{background:linear-gradient(145deg,#4fd68a,#1fa055)}.ri.d{background:linear-gradient(145deg,#c58cff,#8a4fe0)}.ri.e{background:linear-gradient(145deg,#8e8e93,#636366)}
.fila>span{font-weight:500}
.in{background:var(--fill);font-weight:700}
.in:focus{box-shadow:0 0 0 2.5px color-mix(in srgb,var(--miel) 70%,transparent);background:var(--card)}

/* pestañas flotantes tipo cápsula */
.tabs{left:14px;right:14px;bottom:calc(10px + var(--sa-b));height:66px;max-width:430px;margin:0 auto;padding:6px;gap:4px;border-radius:34px;border:.5px solid var(--line);background:color-mix(in srgb,var(--card) 72%,transparent);box-shadow:0 14px 34px -8px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.06)}
.tabs button{max-width:none;border-radius:28px;transition:background .25s,color .25s,transform .15s}
.tabs button:active{transform:scale(.94)}
.tabs button.on{background:color-mix(in srgb,var(--miel) 18%,transparent);color:var(--miel-t)}
.tabs button.on svg{stroke:var(--miel);fill:color-mix(in srgb,var(--miel) 30%,transparent)}
.tabs span{font-size:10.5px}
.vista{padding-bottom:calc(var(--tab) + 24px)}

/* barra de descarga flotante */
.barra-desc{bottom:calc(88px + var(--sa-b));left:14px;right:14px;max-width:530px;padding:10px 10px 10px 18px;border-radius:26px;border:.5px solid var(--line);background:color-mix(in srgb,var(--card) 78%,transparent);box-shadow:0 14px 34px -10px rgba(0,0,0,.25)}
.barra-desc .btn{border-radius:18px;background:linear-gradient(145deg,#ffbe35,#f08c00);box-shadow:0 8px 18px -6px rgba(240,140,0,.7)}
.espacio-barra{height:96px}
.toast{bottom:calc(168px + var(--sa-b))}
.btn{background:linear-gradient(145deg,#ffbe35,#f08c00);box-shadow:0 10px 22px -8px rgba(240,140,0,.65)}
.btn.claro{background:var(--fill);box-shadow:none}
.btn:disabled{box-shadow:none}

/* segmentado más iOS */
.seg{border-radius:13px}.seg button{border-radius:11px}
.seg button.on{box-shadow:0 2px 6px rgba(0,0,0,.14)}
.seg.grande{margin-top:14px}

/* banner de racha */
.banner{border-radius:var(--r)}
.banner:not(.suave){background:linear-gradient(135deg,#d9f7e5,#eafaf0);border-color:rgba(31,157,85,.25)}
@media (prefers-color-scheme:dark){.banner:not(.suave){background:linear-gradient(135deg,#12301f,#0e2418)}}
.banner:not(.suave) .ico{animation:late 2s ease-in-out infinite}
@keyframes late{50%{transform:scale(1.1)}}

/* factura tipo ticket */
.factura{border:.5px solid var(--line)}
.f-tot b{background:linear-gradient(135deg,var(--ink),var(--miel-t));-webkit-background-clip:text;background-clip:text;color:transparent}
.f-grupo h3::before{content:"";display:inline-block;width:8px;height:8px;border-radius:3px;background:var(--miel);margin-right:7px}
.f-fila{border-bottom:1px dashed var(--line);transition:background .15s,padding .15s}
.f-fila:active{background:var(--miel-bg);padding-left:6px;padding-right:6px}
.f-fila>span{font-weight:600}
.sello{box-shadow:inset 0 0 0 1px var(--miel)}

/* hoja */
.hoja{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hoja-panel{border-radius:30px 30px 0 0;background:var(--bg)}
.gran-imp{background:linear-gradient(135deg,var(--ink),var(--miel-t));-webkit-background-clip:text;background-clip:text;color:transparent}.gran-imp.neg{background:none;color:var(--ok)}
.calc,.comp,.tipbox{border-radius:20px}

/* grupos */
.grupo summary{font-weight:700}
.grupo[open]{box-shadow:0 14px 34px -14px rgba(120,80,0,.28)}
.estado{border-radius:var(--r)}
.pista,.pista-fina{border-radius:16px}
.vacia .ico{width:56px;height:56px;border-radius:18px}
.fila>span{font-size:15px;line-height:1.25}.fila small{font-size:12px}
.unid .in{width:92px}.unid .in.corto{width:92px}.unid em{min-width:38px;font-size:12.5px}
.in.corto{width:96px}
.ia-caja{margin:12px 0}.ia-caja .sub{font-size:13px;color:var(--sub,#6c6c70);margin:2px 0 10px}.ia-botones{display:flex;gap:8px}.ia-botones .btn{flex:1}
.notas-ia{margin-top:10px}.notas-ia ul{margin:6px 0 0 18px;padding:0}.leyendo{text-align:center}