/* plentia — mini-paneles de la web: trozos reales del panel construidos con código, no capturas.
   Usan el sistema de diseño del panel (BRIEF §3 y §4) con los tokens del modo oscuro, redefinidos
   DENTRO de .mini para no tocar la estética de la web pública, que es la suya y no cambia.
   Ningún color fuera de estos tokens. */

.mini{
  --surface:#161D21; --surface-hi:#1E272C; --surface-2:#232C31; --border:rgba(255,255,255,.06);
  --shadow:none; --track:#252E33; --track-2:#3B464B;
  --text:#F4F4F2; --text-2:#9BA4A7; --text-3:#646E72;
  --accent:#E6A650; --on-accent:#1A1206;
  --pos:#52C49A; --pos-soft:rgba(82,196,154,.14);
  --neg:#EB6670; --neg-soft:rgba(235,102,112,.14);
  --warn:#E9C868; --warn-soft:rgba(233,200,104,.13);
  --info:#7DA7F0; --info-soft:rgba(125,167,240,.14);
  --d-ventas:#7DA7F0; --d-ads:#A992E8; --d-gastos:#E08AAE; --d-iva:#9DB0AC; --d-envios:#5CC3B8; --d-queda:#52C49A;
  --sans:"Space Grotesk",system-ui,sans-serif; --display:"Inter",system-ui,sans-serif;
  display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;min-width:0;
  font-family:var(--sans);color:var(--text);letter-spacing:0;line-height:1.5;
  container-type:inline-size;
}
.mini *{box-sizing:border-box;margin:0;padding:0}
.mini .card{position:relative;min-width:0;align-self:start;border-radius:26px;padding:22px;background:linear-gradient(180deg,var(--surface-hi),var(--surface) 70%);box-shadow:inset 0 0 0 1px var(--border)}
.mini .lbl{font-size:15px;color:var(--text-2)}
.mini .val{font-family:var(--display);font-weight:600;letter-spacing:-.045em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0;overflow-wrap:normal}
.mini .val.xl{font-size:clamp(30px,8cqw,44px)}
.mini .val.l{font-size:clamp(24px,6cqw,32px)}
.mini .row-val{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:4px}
.mini .delta{font-family:var(--display);font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mini .delta.pos{color:var(--pos)} .mini .delta.neg{color:var(--neg)} .mini .delta.mute{color:var(--text-3);font-family:var(--sans);font-weight:400;font-size:13.5px;white-space:normal}
.mini .tri{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;display:inline-block}
.mini .tri.up{border-bottom:8px solid currentColor} .mini .tri.down{border-top:8px solid currentColor}
.mini .sub{font-size:13px;color:var(--text-3)}
.mini .pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:3px 10px;border-radius:99px;white-space:nowrap}
.mini .pill.pos{background:var(--pos-soft);color:var(--pos)} .mini .pill.neg{background:var(--neg-soft);color:var(--neg)}
.mini .pill.warn{background:var(--warn-soft);color:var(--warn)} .mini .pill.info{background:var(--info-soft);color:var(--info)}
.mini .pill.mute{background:var(--surface-2);color:var(--text-2)}
.mini .track{height:6px;border-radius:9px;background:var(--track);overflow:hidden}
.mini .track span{display:block;height:100%;border-radius:9px;background:var(--track-2)}
.mini .chart{position:relative;left:auto;right:auto;top:auto;width:auto;height:auto;margin-top:16px;touch-action:pan-y;padding-bottom:4px}
.mini .chart svg{display:block;width:100%;height:auto;overflow:visible}
.mini .legend{display:flex;gap:10px 16px;font-size:12.5px;color:var(--text-2);margin-top:16px;padding-top:12px;border-top:1px solid var(--border);flex-wrap:wrap}
.mini .legend i{display:inline-block;width:14px;height:3px;border-radius:3px;vertical-align:middle;margin-right:6px}
.mini .kv{list-style:none;display:grid;gap:9px;margin-top:14px;font-size:14px}
.mini .kv li{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.mini .kv li span:first-child{min-width:0}
.mini .kv li span:first-child{color:var(--text-2)}
.mini .kv li b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.mini .kv li.total{border-top:1px solid var(--border);padding-top:9px}
.mini [data-tip]{cursor:default}

/* lista de pedidos: una tarjeta por pedido, con su desglose plegable */
.mini .ped{display:grid;gap:4px 12px;grid-template-columns:minmax(0,1fr) max-content;padding:12px 0;border-top:1px solid var(--border);font-size:14px}
.mini .ped:first-of-type{border-top:0}
.mini .ped b{font-weight:500}
.mini .ped>*{min-width:0}
.mini .ped small{color:var(--text-3);font-size:12.5px;overflow-wrap:anywhere}
.mini .ped .q{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.mini .ped .q.pos{color:var(--pos)} .mini .ped .q.neg{color:var(--neg)}
.mini details.ped-det{grid-column:1/-1;margin-top:6px}
.mini details.ped-det summary{cursor:pointer;list-style:none;font-size:12.5px;color:var(--info)}
.mini details.ped-det summary::-webkit-details-marker{display:none}
.mini details.ped-det summary::before{content:"+ "}
.mini details.ped-det[open] summary::before{content:"− "}
.mini details.ped-det .kv{margin-top:8px;font-size:13px}

/* filas de facturas */
.mini .fac{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:2px 12px;padding:11px 0;border-top:1px solid var(--border);font-size:14px}
.mini .fac:first-of-type{border-top:0}
.mini .fac>*{min-width:0}
.mini .fac b{font-weight:500} .mini .fac small{color:var(--text-3);font-size:12.5px;overflow-wrap:anywhere}
.mini .fac .who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini .fac .imp{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;font-weight:500}
.mini .fac .det{grid-column:1/-1;margin-top:2px}

@container (min-width:620px){.mini.dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.mini .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:2px}
.mini .foot{font-size:12.5px;color:var(--text-3);margin-top:12px}

/* el tooltip global del panel (panel-ui.js) también se usa aquí */
#tip{position:fixed;left:0;top:0;z-index:60;pointer-events:none;border-radius:14px;padding:10px 12px;min-width:160px;max-width:250px;font:12.5px/1.45 "Space Grotesk",system-ui,sans-serif;letter-spacing:0;
  background:rgba(40,52,58,.72);color:#F4F4F2;-webkit-backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 32px rgba(0,0,0,.35);opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
#tip.on{opacity:1;transform:none}
#tip .t-d{color:rgba(244,244,242,.6)}
#tip .t-v{display:block;font-family:"Inter",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.03em;margin:2px 0 4px;font-variant-numeric:tabular-nums}
#tip .t-r{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums}
#tip .t-r span:first-child{color:rgba(244,244,242,.6)}
#tip .up{color:#52C49A} #tip .dn{color:#EB6670}
#tip hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:6px 0}
@media (prefers-reduced-motion:reduce){#tip{transition:none}}

/* ---- el hero de la web: un trozo de la demo que se toca (pastillas de periodo + gráfica + pedidos) ---- */
.mini.hero-demo{gap:12px}
.mini .mini-pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:2px;min-width:0}
.mini .mini-pills::-webkit-scrollbar{display:none}
.mini .mini-pills button{flex:none;height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--surface-2);color:var(--text-2);font-family:var(--sans);font-size:14.5px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.mini .mini-pills button:hover{background:var(--track);color:var(--text)}
.mini .mini-pills button:active{background:var(--track-2)}
.mini .mini-pills button.on{background:var(--surface-hi);color:var(--text);font-weight:500;box-shadow:inset 0 0 0 1px var(--border)}
.mini .mini-pills button:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.mini .mini-zona{display:grid;gap:12px;min-width:0}
@container (min-width:760px){.mini .mini-zona{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:stretch}.mini .mini-zona>.card{align-self:stretch}}
@media (prefers-reduced-motion:reduce){.mini .mini-pills button{transition:none}}

/* Regla 0 (móvil): dentro del panel empotrado en la web tampoco se baja de 13,5 px, el texto
   corrido sube a 15 px y los desplegables tienen 44 px de zona de toque. */
@media (max-width:760px){
  .mini .sub{font-size:13.5px}
  .mini .ped small,.mini .fac small,.mini .ped .q+small{font-size:13.5px}
  .mini .pill{font-size:13px;padding:4px 11px}
  .mini .kv,.mini details.ped-det .kv{font-size:14px}
  .mini .foot{font-size:15px;line-height:1.5}
  .mini details.ped-det summary{font-size:14.5px;min-height:44px;display:flex;align-items:center}
  .mini .ped,.mini .fac{font-size:15px}
  .mini .legend{font-size:13.5px}
}

/* 7.1 el gesto de entrada: las barras se llenan y la cifra principal aparece. Una sola vez. */
.mini.espera .track span,.mini.espera .bigtrack span{transform:scaleX(0);transform-origin:left}
.mini.espera .val{opacity:0}
.mini.visto .track span,.mini.visto .bigtrack span{transform:scaleX(1);transition:transform .75s cubic-bezier(.33,0,.2,1)}
.mini.visto .val{opacity:1;transition:opacity .5s ease .1s}
.mini.visto .val.xl,.mini.visto .val.l{transition-delay:.05s}
@media (prefers-reduced-motion:reduce){.mini.espera .track span,.mini.espera .val{transform:none;opacity:1}}
/* el dato principal, en el color de su concepto */
.mini .val.l{color:var(--text)}
.mini .card .val.l + div .pill.pos{color:var(--pos)}