/* ============================================================================
   estadisticas.css - "Que se pide".
   ----------------------------------------------------------------------------
   La idea: la noche. Gema manda los pedidos entre las 23:00 y la 01:00 y el
   obrador entra a las 4. Por eso manda UNA sola pieza -el bloque oscuro de
   arriba, con la cifra y la serie dibujada dentro- y todo lo demas baja la voz:
   paneles planos, sin sombra, separados por aire y por una linea de pelo.

   El mapa de calor no es una tabla cualquiera: es la hoja de produccion que
   ella imprime cada noche, con la columna de productos fija al desplazar.

   Una sola serie por grafico, asi que un unico tono de la marca y ninguna
   leyenda. Rejillas y ejes, los justos.
   ========================================================================== */
#estadisticas-root {
  --e-tinta:#12241B; --e-tenue:#5F6F67; --e-raya:rgba(15,81,50,.13);
  --e-sup:rgba(255,255,255,.66); --e-pista:rgba(15,81,50,.09);
  --e-noche-1:#0B2E1E; --e-noche-2:#08221A;
}
[data-theme="dark"] #estadisticas-root {
  --e-tinta:#E9EDEF; --e-tenue:#8DA39A; --e-raya:rgba(255,255,255,.11);
  --e-sup:rgba(255,255,255,.035); --e-pista:rgba(255,255,255,.07);
  --e-noche-1:#07211A; --e-noche-2:#04140F;
}

/* ---- filtros: una fila, arriba, alineada a la izquierda ------------------ */
#estadisticas-root .est-filtros { display:flex; margin-bottom:20px; }
#estadisticas-root .est-periodos { display:inline-flex; gap:2px; padding:3px; border-radius:11px;
  background:var(--e-pista); }
#estadisticas-root .est-periodo { border:0; background:none; cursor:pointer; font:inherit;
  font-size:13.5px; font-weight:600; color:var(--e-tenue); padding:7px 14px; border-radius:8px; }
#estadisticas-root .est-periodo:hover { color:var(--e-tinta); }
#estadisticas-root .est-periodo.activo { color:var(--e-tinta); background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08); }
[data-theme="dark"] #estadisticas-root .est-periodo.activo { background:rgba(255,255,255,.1); color:#fff; }

#estadisticas-root .est-cuerpo { transition:opacity .2s ease; }
#estadisticas-root .est-cuerpo.cargando { opacity:.45; pointer-events:none; }

/* ---- la noche ------------------------------------------------------------ */
/* Lo unico con color propio, profundidad y la serie a sangre. Lo demas es
   plano a proposito: si todo grita, no grita nada. */
#estadisticas-root .est-noche {
  position:relative; overflow:hidden; border-radius:22px; margin-bottom:14px;
  padding:30px 32px 0;
  background:
    radial-gradient(120% 90% at 8% -20%, rgba(127,212,168,.20), transparent 58%),
    linear-gradient(160deg, var(--e-noche-1), var(--e-noche-2));
  color:#EAF4EE;
}
#estadisticas-root .est-noche-texto { position:relative; z-index:1; max-width:46ch; }
#estadisticas-root .est-noche-eti { margin:0; font-size:14px; color:rgba(234,244,238,.62); }
#estadisticas-root .est-noche-cifra { margin:2px 0 8px; font-size:clamp(52px,8vw,88px);
  font-weight:800; line-height:.95; letter-spacing:-.035em; color:#fff; }
#estadisticas-root .est-noche-pie { margin:0 0 22px; font-size:15px; line-height:1.55;
  color:rgba(234,244,238,.78); }

/* ---- cifras de apoyo: sin caja, separadas por una linea ------------------ */
#estadisticas-root .est-cifras { display:grid; margin-bottom:26px;
  grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  border-top:1px solid var(--e-raya); }
#estadisticas-root .est-cifra { padding:16px 20px 16px 0; border-bottom:1px solid var(--e-raya); }
#estadisticas-root .est-cifra-eti { margin:0; font-size:13px; color:var(--e-tenue); }
#estadisticas-root .est-cifra-val { margin:3px 0 1px; font-size:24px; font-weight:700;
  letter-spacing:-.02em; color:var(--e-tinta); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
#estadisticas-root .est-cifra-pie { margin:0; font-size:12.5px; color:var(--e-tenue); }

/* ---- rejilla ------------------------------------------------------------- */
#estadisticas-root .est-rejilla { display:grid; gap:14px; align-items:start;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); margin-bottom:14px; }
#estadisticas-root .est-columna { display:grid; gap:14px; align-content:start; }
#estadisticas-root .est-panel { padding:22px 24px; border-radius:18px;
  background:var(--e-sup); border:1px solid var(--e-raya); }
#estadisticas-root .est-h3 { margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em;
  color:var(--e-tinta); }
#estadisticas-root .est-h4 { margin:0; font-size:15px; font-weight:700; color:var(--e-tinta); }
#estadisticas-root .est-sub { margin:5px 0 18px; font-size:13px; line-height:1.5;
  color:var(--e-tenue); max-width:52ch; }
#estadisticas-root .est-panel > .est-rank { margin-top:18px; }

/* ---- clasificacion ------------------------------------------------------- */
#estadisticas-root .est-rank { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
#estadisticas-root .est-fila { display:grid; align-items:center; gap:12px; padding:7px 10px;
  border-radius:10px; grid-template-columns:1.4rem minmax(0,10.5rem) 1fr auto; }
#estadisticas-root .est-puesto { font-size:12.5px; font-weight:600; color:var(--e-tenue);
  text-align:right; font-variant-numeric:tabular-nums; }
#estadisticas-root .est-nombre { font-size:14px; color:var(--e-tinta); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#estadisticas-root .est-pista { height:10px; border-radius:2px; background:var(--e-pista); }
#estadisticas-root .est-pista i { display:block; height:100%;
  border-radius:0 4px 4px 0;   /* extremo del dato redondeado, base cuadrada */
  background:linear-gradient(90deg, #2E9B74, var(--marca,#0F5132));
  transition:width .4s cubic-bezier(.22,1,.36,1); }
#estadisticas-root .est-valor { font-size:14px; font-weight:700; color:var(--e-tinta);
  font-variant-numeric:tabular-nums; }

#estadisticas-root .est-rank--clic .est-fila { cursor:pointer; }
#estadisticas-root .est-rank--clic .est-fila:hover,
#estadisticas-root .est-fila:focus-visible { background:var(--e-pista); outline:none; }
#estadisticas-root .est-fila.activa { background:color-mix(in oklab, var(--marca,#0F5132) 13%, transparent); }
#estadisticas-root .est-fila.activa .est-nombre { font-weight:600; }

/* ---- la semana ----------------------------------------------------------- */
#estadisticas-root .est-semana { display:flex; align-items:flex-end; gap:8px; height:130px;
  margin-top:18px; }
#estadisticas-root .est-dia { flex:1 1 0; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:flex-end; height:100%; cursor:default; }
#estadisticas-root .est-dia-pista { flex:1; width:100%; max-width:26px; display:flex;
  align-items:flex-end; }
#estadisticas-root .est-dia-pista i { display:block; width:100%; border-radius:4px 4px 0 0;
  background:var(--e-pista); transition:height .4s cubic-bezier(.22,1,.36,1); }
#estadisticas-root .est-dia.es-max .est-dia-pista i {
  background:linear-gradient(180deg, #2E9B74, var(--marca,#0F5132)); }
#estadisticas-root .est-dia:hover .est-dia-pista i,
#estadisticas-root .est-dia:focus-visible .est-dia-pista i {
  background:linear-gradient(180deg, #46B389, #157A50); }
#estadisticas-root .est-dia:focus-visible { outline:none; }
#estadisticas-root .est-dia-nombre { font-size:12px; color:var(--e-tenue); }
#estadisticas-root .est-pie-grafico { margin:14px 0 0; font-size:13px; color:var(--e-tenue); }

/* ---- linea --------------------------------------------------------------- */
#estadisticas-root .est-linea { position:relative; }
#estadisticas-root .est-linea svg { display:block; width:100%; }
#estadisticas-root .est-captura { position:absolute; inset:0; }
#estadisticas-root .est-trazo { fill:none; stroke-width:2; stroke-linejoin:round;
  stroke-linecap:round; vector-effect:non-scaling-stroke; }
#estadisticas-root .est-cruceta { stroke-width:1; vector-effect:non-scaling-stroke;
  opacity:0; transition:opacity .12s; }
#estadisticas-root .est-cruceta.visible { opacity:1; }
/* el punto va en HTML: con preserveAspectRatio="none" un circulo del SVG
   saldria ovalado */
#estadisticas-root .est-foco { position:absolute; width:9px; height:9px; border-radius:50%;
  transform:translate(-50%,-50%); opacity:0; transition:opacity .12s; pointer-events:none; }
#estadisticas-root .est-foco.visible { opacity:1; }

/* dentro de la noche: trazo claro sobre fondo oscuro, a sangre por abajo */
#estadisticas-root .est-linea--noche { margin:0 -32px; }
#estadisticas-root .est-linea--noche svg { height:170px; }
#estadisticas-root .est-linea--noche .est-trazo { stroke:#7FD4A8; }
#estadisticas-root .est-linea--noche .est-area { fill:rgba(127,212,168,.14); }
#estadisticas-root .est-linea--noche .est-cruceta { stroke:rgba(234,244,238,.45); }
#estadisticas-root .est-linea--noche .est-foco { background:#fff;
  box-shadow:0 0 0 2px var(--e-noche-2); }

/* en el detalle de producto: sobre fondo claro */
#estadisticas-root .est-linea--detalle { margin-top:14px; }
#estadisticas-root .est-linea--detalle svg { height:150px; }
#estadisticas-root .est-linea--detalle .est-trazo { stroke:var(--marca,#0F5132); }
#estadisticas-root .est-linea--detalle .est-area {
  fill:color-mix(in oklab, var(--marca,#0F5132) 10%, transparent); }
#estadisticas-root .est-linea--detalle .est-cruceta { stroke:var(--e-raya); }
#estadisticas-root .est-linea--detalle .est-foco { background:var(--marca,#0F5132);
  box-shadow:0 0 0 2px #fff; }
[data-theme="dark"] #estadisticas-root .est-linea--detalle .est-trazo { stroke:#7FD4A8; }
[data-theme="dark"] #estadisticas-root .est-linea--detalle .est-foco { background:#7FD4A8;
  box-shadow:0 0 0 2px #0B141A; }

#estadisticas-root .est-detalle { margin-top:20px; padding-top:18px;
  border-top:1px solid var(--e-raya); }

/* ---- la hoja ------------------------------------------------------------- */
#estadisticas-root .est-panel--hoja { padding-bottom:18px; }
#estadisticas-root .est-hoja-caja { overflow:auto; max-height:560px; margin:0 -6px; padding:0 6px; }
#estadisticas-root .est-hoja { border-collapse:separate; border-spacing:2px; font-size:12.5px; }
#estadisticas-root .est-hoja th { font-weight:600; color:var(--e-tenue); text-align:left;
  padding:5px 9px; white-space:nowrap; background:var(--dash-bg,#F4F7F5); }
[data-theme="dark"] #estadisticas-root .est-hoja th { background:#0B141A; }
#estadisticas-root .est-hoja thead th { position:sticky; top:0; z-index:2; font-size:11.5px; }
/* la columna de productos se queda fija al desplazar: es la que da sentido a
   la fila, igual que en la hoja impresa */
#estadisticas-root .est-hoja tbody th { position:sticky; left:0; z-index:1; max-width:12rem;
  overflow:hidden; text-overflow:ellipsis; color:var(--e-tinta); font-weight:500; }
#estadisticas-root .est-hoja-esq { position:sticky; left:0; z-index:3; }
#estadisticas-root .est-celda { width:52px; height:30px; border-radius:5px; text-align:center;
  background:var(--e-pista); font-variant-numeric:tabular-nums; font-weight:600;
  transition:transform .12s ease; }
#estadisticas-root .est-celda--cero { background:transparent; }
#estadisticas-root .est-celda[tabindex]:hover,
#estadisticas-root .est-celda[tabindex]:focus-visible { outline:none;
  box-shadow:0 0 0 2px var(--dash-bg,#F4F7F5), 0 0 0 4px var(--marca,#0F5132); }
#estadisticas-root .est-escala { display:flex; align-items:center; gap:5px; margin-top:14px;
  font-size:12px; color:var(--e-tenue); }
#estadisticas-root .est-escala i { width:26px; height:9px; border-radius:2px; }

/* ---- tooltip ------------------------------------------------------------- */
.est-tip { position:fixed; z-index:10200; pointer-events:none; opacity:0;
  transform:translateY(3px); transition:opacity .12s ease, transform .12s ease;
  padding:8px 11px; border-radius:10px; background:#0B2E1E; color:#fff;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6); max-width:260px; }
.est-tip.visible { opacity:1; transform:translateY(0); }
.est-tip b { display:block; font-size:15px; font-weight:700; letter-spacing:-.01em; }
.est-tip span { display:block; font-size:12.5px; color:rgba(255,255,255,.7); margin-top:1px; }

/* ---- varios -------------------------------------------------------------- */
#estadisticas-root .est-aviso { padding:14px 16px; border-radius:14px; font-size:14px;
  color:var(--e-tenue); background:var(--e-sup); border:1px solid var(--e-raya); }
#estadisticas-root .est-aviso--error { color:#B91C1C;
  background:color-mix(in oklab, #E05D52 12%, transparent); border-color:rgba(224,93,82,.35); }
#estadisticas-root .est-cargando, #estadisticas-root .est-vacio { color:var(--e-tenue);
  font-size:14px; }
#estadisticas-root .est-nota { margin:0; font-size:12.5px; line-height:1.6; color:var(--e-tenue); }

@media (prefers-reduced-motion: reduce) {
  #estadisticas-root .est-pista i, #estadisticas-root .est-dia-pista i { transition:none; }
}
@media (max-width:1100px) {
  #estadisticas-root .est-rejilla { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
  #estadisticas-root .est-noche { padding:24px 20px 0; }
  #estadisticas-root .est-linea--noche { margin:0 -20px; }
  #estadisticas-root .est-fila { grid-template-columns:1.2rem minmax(0,7rem) 1fr auto; gap:9px; }
  #estadisticas-root .est-panel { padding:18px 16px; }
  #estadisticas-root .est-periodos { width:100%; }
  #estadisticas-root .est-periodo { flex:1; padding:7px 4px; }
}