:root{
  --paper:#EDEEF0; --surface:#FFFFFF; --ink:#16181D; --ink-2:#5A616E;
  --line:#C9CDD4; --line-soft:#E1E4E9;
  --tinta:#2A4B7C; --benef:#1F6B4A; --gasto:#9B2C2C; --stock:#8A6516;
  --radius:4px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html[data-tema="oscuro"]{
  --paper:#14161A; --surface:#1C1F25; --ink:#E6E8EC; --ink-2:#8E96A4;
  --line:#31363F; --line-soft:#262A31;
  --tinta:#7FA4DC; --benef:#4FB07E; --gasto:#D97070; --stock:#C9A227;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* que ningún display de estos gane al atributo hidden */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.45;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-text-size-adjust:100%;
}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600}

/* ---------- cabecera ---------- */
header{
  position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--line);
}
.head-in{max-width:1100px;margin:0 auto;padding:8px 12px 8px 16px;display:flex;align-items:center;gap:8px}
.logo{font-weight:660;letter-spacing:-.03em;font-size:17px;margin:0;flex:1}
.logo span{color:var(--ink-2);font-weight:400}
.estado{font-size:11px;color:var(--ink-2);font-family:var(--mono);white-space:nowrap;
  background:none;border:0;cursor:pointer;padding:8px 4px;display:flex;align-items:center;gap:5px;min-height:40px}
.estado .punto{width:9px;height:9px;border-radius:5px;background:var(--ink-2);flex:none}
.estado.ok .punto{background:#128041}
.estado.pend .punto{background:#C2410C}
.estado.sinc .punto{background:#1D4ED8;animation:late 1s ease-in-out infinite}
.estado.off .punto{background:#9B2C2C}
@keyframes late{50%{opacity:.35}}
.iconbtn{
  background:transparent;border:1px solid var(--line);color:var(--ink);
  width:44px;height:44px;border-radius:var(--radius);cursor:pointer;font-size:16px;
  display:grid;place-items:center;flex:none
}
.iconbtn:hover{border-color:var(--ink-2)}
.iconbtn[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
html[data-tema="oscuro"] .iconbtn[aria-pressed="true"]{color:#0F1115}

nav{max-width:1100px;margin:0 auto;padding:0 8px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-2);
  padding:13px 12px;font:inherit;font-size:13.5px;font-weight:550;cursor:pointer;white-space:nowrap;
  min-height:44px
}
nav button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--tinta)}

main{max-width:1100px;margin:0 auto;padding:16px 16px 150px}
section[hidden]{display:none}

/* ---------- ticket resumen ---------- */
.ticket{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;position:relative;overflow:hidden
}
.ticket::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)
}
.ticket h2{margin:0 0 2px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.balance{font-family:var(--mono);font-size:clamp(30px,9vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1.12;margin:6px 0 2px;padding-bottom:2px}
.balance.pos{color:var(--benef)} .balance.neg{color:var(--gasto)}
.sub{font-size:12px;color:var(--ink-2)}
.lineas{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);display:grid;gap:6px}
.linea{display:flex;align-items:baseline;gap:8px;font-size:13px}
.linea .p{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-3px)}
.linea b{font-family:var(--mono);font-weight:550;font-variant-numeric:tabular-nums}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:11px 12px}
.kpi .v{font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.03em;margin-top:3px}

/* ---------- tarjetas / tablas ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px}
.card>h3{margin:0 0 12px;font-size:13px;font-weight:620;letter-spacing:-.01em}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:600;padding:0 8px 7px 0;border-bottom:1px solid var(--line)}
td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
.r{text-align:right}

/* firma: la línea de artículo con barra de margen */
.item{
  display:block;padding:11px 14px;margin:0 -14px;border-radius:9px;
  border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:background-color .16s ease, transform .12s ease;
}
.item:last-child{border-bottom:0}
/* el resaltado solo donde se puede tocar, y solo con ratón */
@media (hover:hover){ .item.ficha:hover{background:var(--line-soft)} }
.item.ficha:active{background:var(--line-soft);transform:scale(.99)}
.fila-sup{display:flex;gap:11px;align-items:flex-start}
.fila-sup .txt{flex:1;min-width:0}
.miniatura{width:46px;height:46px;border-radius:5px;object-fit:cover;background:var(--line-soft);display:block;flex:none}
/* Sin foto no se ve un hueco roto: una marca discreta con su inicial. */
.sinfoto{width:46px;height:46px;border-radius:5px;display:grid;place-items:center;
  background:var(--line-soft);color:var(--ink-2);font-weight:700;font-size:15px;letter-spacing:-.02em;
  font-family:var(--sans);flex:none;user-select:none}
.item .cifra{flex:none;max-width:45%}
.galeria{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.galeria .hueco{width:78px;height:78px;border-radius:6px;background:var(--line-soft);color:var(--ink-2);
  display:grid;place-items:center;font-size:12.5px;text-align:center;padding:6px;line-height:1.3}
.gfoto{position:relative;width:78px;height:78px}
.gfoto img{width:78px;height:78px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block;cursor:zoom-in}
.gfoto .quitar{position:absolute;top:-7px;right:-7px;width:26px;height:26px;border-radius:13px;
  border:1px solid var(--line);background:var(--surface);color:var(--gasto);font-size:15px;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.16)}
.gfoto.principal img{border:2px solid var(--tinta)}
.marca-ppal{position:absolute;left:0;right:0;bottom:0;background:var(--tinta);color:#fff;font-size:9.5px;
  font-weight:700;text-align:center;border-radius:0 0 6px 6px;padding:2px 0;letter-spacing:.04em}
html[data-tema="oscuro"] .marca-ppal{color:#0F1115}
.gfoto .cambiar{position:absolute;right:-7px;bottom:-7px;width:26px;height:26px;border-radius:13px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:13px;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.16)}
.gfoto.principal .cambiar{bottom:12px}
.gfoto .subir{position:absolute;left:-7px;top:-7px;width:26px;height:26px;border-radius:13px;
  border:1px solid var(--line);background:var(--surface);color:var(--tinta);font-size:14px;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.16)}
.gfoto .subiendo{position:absolute;inset:0;background:rgba(0,0,0,.45);border-radius:6px;color:#fff;
  display:grid;place-items:center;font-size:11px}
.foto-btns{display:flex;gap:8px}
.foto-btns .btn{flex:1;padding:10px 8px;font-size:13.5px}
.cuenta-fotos{position:absolute;right:-4px;bottom:-4px;background:var(--tinta);color:#fff;font-size:10px;
  font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
html[data-tema="oscuro"] .cuenta-fotos{color:#0F1115}
.mini-caja{position:relative;flex:none}
.item:last-child{border-bottom:0}
.item .nom{
  font-weight:560;letter-spacing:-.01em;min-width:0;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.item .nom-txt{overflow-wrap:anywhere}
.item .nom .bnota{vertical-align:1px}
/* Una sola línea, siempre: así todas las filas miden lo mismo y la lista
   se lee de un vistazo. Lo que no quepa está en la ficha. */
.item .meta{
  font-size:11.5px;color:var(--ink-2);margin-top:5px;line-height:1.5;min-width:0;
  display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden
}
.item .meta .meta-txt{overflow:hidden;text-overflow:ellipsis;min-width:0}
.item .meta .tag{flex:none;margin-right:0}
.item .meta .tag{margin-right:6px}
.item .meta .meta-txt{overflow-wrap:anywhere}
.item .cifra{font-family:var(--mono);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.item .cifra small{display:block;font-size:10.5px;font-weight:400;color:var(--ink-2)}
.acciones{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}
.bmini{padding:0 13px;min-height:40px;font-size:12.5px;font-weight:620;border-radius:4px;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;letter-spacing:-.01em;
  white-space:nowrap}
.bmini:active{transform:translateY(1px)}
.bmini.res{color:#1D4ED8;border-color:#1D4ED8}
.bmini.ven{color:#128041;border-color:#128041}
html[data-tema="oscuro"] .bmini.res{color:#7FA4DC;border-color:#3A5B96}
html[data-tema="oscuro"] .bmini.ven{color:#4FB07E;border-color:#2E6B4C}
.bnota{
  background:none;border:0;padding:0;margin:-9px -5px;font-size:15px;cursor:pointer;line-height:1;
  display:inline-grid;place-items:center;width:42px;height:42px;vertical-align:-13px
}
.nota-txt{white-space:pre-wrap;font-size:14.5px;line-height:1.5}
.barra{height:3px;background:var(--line-soft);border-radius:2px;margin-top:8px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--benef)}
.barra i.neg{background:var(--gasto)}
.tag{display:inline-block;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;padding:2px 5px;border-radius:3px;border:1px solid currentColor;vertical-align:1px}
.tag{color:#fff;border-color:transparent}
.t-vend{background:#128041}
.t-res{background:#1D4ED8}
.t-stock{background:#C2410C}
.t-camino{background:#6D28D9}
.bmini.lleg{color:#6D28D9;border-color:#6D28D9}
html[data-tema="oscuro"] .bmini.lleg{color:#A78BFA;border-color:#5B3FA8}
/* compra o venta hecha en mano */
.mano{color:var(--benef);font-weight:700;margin-left:1px}
.chk{display:flex;align-items:center;gap:9px;padding:9px 0;cursor:pointer;user-select:none}
.chk input{width:19px;height:19px;flex:none;accent-color:var(--tinta);margin:0}
.chk span{font-size:14px}

/* ---------- controles ---------- */
.chips{display:flex;gap:6px;margin-bottom:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;min-height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  white-space:nowrap
}
.chip[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
html[data-tema="oscuro"] .chip[aria-pressed="true"]{color:#0F1115}
.chip small{font-weight:500;opacity:.75;margin-left:5px}
.resumen{margin:0 0 12px;padding:0 2px;font-size:13px;color:var(--ink-2)}
.resumen b{color:var(--ink);font-family:var(--mono);font-weight:600}
.barra-filtros{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
input,select,textarea,button{font-family:inherit;font-size:15px;color:var(--ink)}
input,select,textarea{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 10px;min-height:44px;width:100%
}
textarea{min-height:64px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--tinta);outline-offset:-1px;border-color:transparent}
.barra-filtros input{flex:2;min-width:130px} .barra-filtros select{flex:1;min-width:110px}
.btn{
  background:var(--tinta);color:#fff;border:1px solid var(--tinta);border-radius:var(--radius);
  padding:11px 16px;min-height:44px;font-weight:560;cursor:pointer;font-size:14px
}
html[data-tema="oscuro"] .btn:not(.sec):not(.peli){color:#0F1115}
.btn.sec{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.peli{background:transparent;color:var(--gasto);border-color:var(--gasto)}
.btn:active{transform:translateY(1px)}
.fab{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;
  border-radius:30px;padding:14px 20px;box-shadow:0 6px 20px rgba(0,0,0,.22);font-size:15px
}
.fab-ia{
  position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:30;
  width:54px;height:54px;border-radius:27px;border:1px solid var(--line);
  background:var(--surface);color:var(--tinta);cursor:pointer;
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.16)
}
.fab-ia:active{transform:translateY(1px)}
.plan{border:1px solid var(--tinta);border-radius:var(--radius);padding:13px;margin-bottom:12px}
.plan h4{margin:0 0 8px;font-size:14px;font-weight:620}
.plan ul{margin:0;padding-left:18px;font-size:13.5px}
.plan li{margin-bottom:5px}
.plan-btns{display:flex;gap:8px;margin-top:12px}
.plan-btns .btn{flex:1}
.informe{white-space:pre-wrap;font-size:14.5px;line-height:1.55}
details#detExtra{margin-bottom:12px;border-top:1px solid var(--line-soft);padding-top:10px}
details#detExtra summary{cursor:pointer;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600;padding:6px 0;min-height:34px}
.hist{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.hist:last-child{border-bottom:0}
.hist .cab{display:flex;gap:8px;align-items:baseline;font-size:11.5px;color:var(--ink-2)}
.hist .cab b{font-family:var(--mono);color:var(--ink);font-weight:600}
.hist ul{margin:6px 0 0;padding-left:17px;font-size:13.5px}
.hist li{margin-bottom:3px}
.hist .btn{margin-top:9px;padding:7px 12px;font-size:12.5px}
.chart{width:100%;height:auto;aspect-ratio:600/210;display:block}
.vacio{text-align:center;color:var(--ink-2);padding:34px 12px;font-size:14px}
.vacio b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

/* ---------- gráfica ---------- */
.leyenda{display:flex;gap:14px;font-size:11px;color:var(--ink-2);margin-top:8px;flex-wrap:wrap}
.leyenda i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:0}

/* ---------- modal ---------- */
dialog{
  border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);
  padding:0;width:min(560px,100%);max-height:88vh;margin:auto
}
dialog::backdrop{background:rgba(8,10,14,.55)}
.dlg-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
.dlg-head h3{margin:0;font-size:15px;font-weight:620;flex:1}
.dlg-body{padding:16px;overflow:auto}
.campo{margin-bottom:12px}
.campo label{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:600;margin-bottom:5px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dlg-pie{display:flex;gap:8px;padding:14px 16px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface)}
.dlg-pie .btn{flex:1}
.aviso{background:var(--surface);border:1px solid var(--gasto);color:var(--gasto);border-radius:var(--radius);padding:10px 12px;font-size:13px;margin-bottom:14px}
/* pantalla de acceso */
#acceso{position:fixed;inset:0;z-index:100;background:var(--paper);display:grid;place-items:center;padding:24px}
.acc-caja{width:min(340px,100%);text-align:left}
.acc-caja h2{font-size:20px;font-weight:660;letter-spacing:-.03em;margin:0 0 4px}
.acc-caja h2 span{color:var(--ink-2);font-weight:400}
.acc-caja p{color:var(--ink-2);font-size:13.5px;margin:0 0 18px}
.acc-caja .btn{width:100%;margin-top:10px;padding:12px}
.acc-error{color:var(--gasto);font-size:13px;margin-top:8px}
.acc-caja .campo label{color:var(--ink-2)}
.usr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 0;border-bottom:1px solid var(--line-soft);cursor:pointer}
.usr:last-of-type{border-bottom:0}
.usr:hover{background:var(--line-soft)}
.usr .nom{font-weight:560}
.usr .meta{font-size:11.5px;color:var(--ink-2);grid-column:1}
.usr .der{grid-row:1;grid-column:2;text-align:right;font-size:11.5px;color:var(--ink-2)}
.acc-pie{color:var(--ink-2);font-size:11.5px;margin-top:18px;line-height:1.5}

/* dialogo de confirmacion propio */
#dlgPregunta{width:min(380px,100%)}
#dlgPregunta .dlg-body{padding:18px 18px 4px}
#dlgPregunta h4{margin:0 0 6px;font-size:16px;font-weight:620;letter-spacing:-.01em}
#dlgPregunta p{margin:0;color:var(--ink-2);font-size:13.5px}
.toast{
  position:fixed;left:50%;bottom:88px;transform:translate(-50%,14px);z-index:60;
  background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:20px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:.22s
}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:520px){ .fila{grid-template-columns:1fr} main{padding:12px 12px 150px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==========================================================================
   Pulido visual: movimiento suave y respuesta al tacto.
   Todo esto se desactiva solo si el sistema pide menos animación.
   ========================================================================== */
html{scroll-behavior:smooth}

/* botones y controles: responden al dedo sin dar saltos */
.btn,.bmini,.chip,.iconbtn,.fab-ia,nav button,.quitar,.subir,.cambiar,.bnota{
  transition:background-color .16s ease, border-color .16s ease, color .16s ease,
             box-shadow .16s ease, transform .1s ease;
}
.btn:active,.bmini:active,.chip:active,.iconbtn:active,.quitar:active,
.subir:active,.cambiar:active{transform:scale(.96)}
.fab:active{transform:scale(.97)}
.fab-ia:active{transform:scale(.94)}
nav button{position:relative}
nav button::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:var(--tinta);border-radius:2px;transform:scaleX(0);transition:transform .2s ease;
}
nav button[aria-selected="true"]::after{transform:scaleX(1)}
nav button[aria-selected="true"]{border-bottom-color:transparent}

/* las ventanas entran desde abajo, como en una app */
dialog[open]{animation:sube .24s cubic-bezier(.2,.85,.3,1)}
dialog[open]::backdrop{animation:funde .24s ease}
@keyframes sube{from{opacity:0;transform:translateY(16px) scale(.985)}}
@keyframes funde{from{opacity:0}}

/* al cambiar de pestaña, el contenido aparece en lugar de dar un salto seco */
main>section:not([hidden]){animation:entra .22s ease}
@keyframes entra{from{opacity:0;transform:translateY(5px)}}

/* la barra de margen se llena sola al aparecer */
.barra i{transition:width .5s cubic-bezier(.3,.9,.3,1)}

/* tarjetas y campos, con respuesta suave */
.card,.kpi{transition:border-color .16s ease}
input,select,textarea{transition:border-color .14s ease, box-shadow .14s ease}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--tinta) 18%, transparent)}
.miniatura,.sinfoto{transition:transform .16s ease}
.item.ficha:active .miniatura,.item.ficha:active .sinfoto{transform:scale(.97)}
.estado{transition:color .2s ease}
.estado .punto{transition:background-color .25s ease}

/* el toast entra desde abajo con un pelín de rebote */
.toast{transition:opacity .2s ease, transform .26s cubic-bezier(.2,1.3,.4,1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,dialog[open],main>section:not([hidden]){animation:none!important;transition:none!important}
}

/* Los botones flotantes se apartan mientras lees la lista y cuando hay una
   ventana abierta, para no taparte nada ni provocar toques por error. */
.fab,.fab-ia{transition:opacity .2s ease, transform .24s cubic-bezier(.2,.8,.3,1)}
body.bajando .fab,body.bajando .fab-ia,
body.dialogo .fab,body.dialogo .fab-ia{
  opacity:0;transform:translateY(90px);pointer-events:none
}

/* Signo de interrogación para explicar cada dato sin estorbar. */
/* Discreto: solo el signo, sin caja. El área que se toca es grande pero
   invisible, así no engorda los títulos. */
.ayuda{
  display:inline-grid;place-items:center;width:40px;height:40px;margin:-14px -13px -14px -6px;
  border:0;background:none;color:var(--ink-2);opacity:.4;
  font-size:12.5px;font-weight:600;font-family:var(--sans);cursor:pointer;line-height:1;
  vertical-align:middle;text-transform:none;letter-spacing:0;flex:none
}
.ayuda:active{opacity:1;transform:scale(.85)}
@media (hover:hover){ .ayuda:hover{opacity:1;color:var(--tinta)} }
.card>h3,.ticket h2{display:flex;align-items:center;gap:2px}
#ayCuerpo b{font-family:var(--mono);font-weight:600}
#ayCuerpo .ejemplo{
  background:var(--line-soft);border-radius:6px;padding:11px 13px;margin-top:12px;
  font-size:13.5px;line-height:1.5;white-space:normal
}

/* Las cifras no se parten nunca; si no caben, la tabla se desliza de lado. */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px}
.tabla-scroll table{min-width:100%}
td.num,th.r{white-space:nowrap}
td:first-child{min-width:80px}

/* En móvil las tablas aprietan un poco y se avisa de que hay más a la derecha. */
@media (max-width:520px){
  .tabla-scroll table{font-size:12.5px}
  .tabla-scroll th{font-size:9.5px}
  .tabla-scroll td{padding:8px 6px 8px 0}
}
.tabla-scroll{
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat,
    linear-gradient(to left, var(--surface) 30%, transparent) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.13), transparent) left / 11px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.13), transparent) right / 11px 100% no-repeat;
  background-attachment:local, local, scroll, scroll;
}

/* En los indicadores va a la esquina, para que no empuje el texto ni
   descuadre unas tarjetas contra otras. */
.kpi{position:relative}
.kpi .eyebrow{padding-right:22px}
.kpi .ayuda{position:absolute;top:2px;right:0;margin:0;width:38px;height:38px}


/* La miniatura de la lista se puede tocar para ver las fotos en grande. */
.mini-caja[data-accion]{cursor:zoom-in}
.mini-caja[data-accion]:active .miniatura{transform:scale(.94)}
#dlgVisor .dlg-body{background:var(--line-soft)}
#visorImg{max-height:70vh;object-fit:contain;background:var(--line-soft)}

/* Mientras no sepamos qué hay en el libro, se avisa en vez de enseñar ceros. */
.girando{
  width:26px;height:26px;border-radius:50%;margin:0 auto;
  border:2.5px solid var(--line);border-top-color:var(--tinta);
  animation:vuelta .8s linear infinite
}
@keyframes vuelta{to{transform:rotate(360deg)}}
body.sin-datos main>section{display:none!important}
body.sin-datos #cargando{display:block!important}
body.sin-datos .fab,body.sin-datos .fab-ia{opacity:0;pointer-events:none}