/* ─────────────────────────────────────────────────────────────────────────
   Ventas en vivo · liquid glass
   Vidrio con espesor: desenfoque + saturación del fondo, borde especular que
   sigue al puntero, canto inferior en sombra y una lámina de brillo curvada.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;
  --fondo: #0a0c13;
  --superficie: #161a26;
  --tinta: #f4f6fb;
  --tinta-2: #b9c0d0;
  --tinta-3: #8a93a8;
  --linea: rgba(255, 255, 255, 0.08);

  --vidrio: rgba(255, 255, 255, 0.055);
  --vidrio-2: rgba(255, 255, 255, 0.02);
  --canto: rgba(255, 255, 255, 0.16);
  --especular: rgba(255, 255, 255, 0.55);

  /* Serie principal y referencia */
  --hoy: #5fb4ff;
  --hoy-2: #8f7dff;
  --ref: #8a93a8;
  --proy: #c9d2e6;

  /* Categóricos, validados sobre #161a26 (oscuro) */
  --c1: #3f95f0; --c2: #e5662c; --c3: #14a87c; --c4: #b8830c; --c5: #d9609f; --c6: #8b7cf0;

  /* Estado (reservado) */
  --bien: #3ccf91;
  --mal: #ff6b6b;

  --radio: 26px;
  --radio-chico: 16px;
  --sombra: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 10px 30px -12px rgba(0, 0, 0, 0.45);
  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }
h1, h2, p { margin: 0; }
.tenue { color: var(--tinta-3); }

/* ── Fondo vivo ─────────────────────────────────────────────────────────── */
.fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fondo::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(5, 6, 10, 0.75) 100%);
}
.mancha { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; will-change: transform; }
.m1 { width: 52vw; height: 52vw; left: -12vw; top: -18vw; background: radial-gradient(circle, #2f6bff 0%, transparent 65%); animation: deriva1 38s ease-in-out infinite alternate; }
.m2 { width: 44vw; height: 44vw; right: -10vw; top: 6vh; background: radial-gradient(circle, #7a4dff 0%, transparent 65%); animation: deriva2 46s ease-in-out infinite alternate; }
.m3 { width: 48vw; height: 48vw; left: 22vw; bottom: -26vw; background: radial-gradient(circle, #00b39a 0%, transparent 62%); opacity: 0.38; animation: deriva3 52s ease-in-out infinite alternate; }
.m4 { width: 30vw; height: 30vw; right: 8vw; bottom: -8vw; background: radial-gradient(circle, #ff7a45 0%, transparent 62%); opacity: 0.3; animation: deriva1 60s ease-in-out infinite alternate-reverse; }
@keyframes deriva1 { to { transform: translate(14vw, 10vh) scale(1.15); } }
@keyframes deriva2 { to { transform: translate(-16vw, 18vh) scale(0.9); } }
@keyframes deriva3 { to { transform: translate(-10vw, -14vh) scale(1.1); } }
.grano {
  position: absolute; inset: -50%; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Vidrio ─────────────────────────────────────────────────────────────── */
.vidrio {
  --mx: 50%; --my: 0%;
  position: relative;
  isolation: isolate;
  border-radius: var(--radio);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.025) 38%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(30px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 20px 40px -24px rgba(255, 255, 255, 0.18),
    var(--sombra);
}
/* Canto especular: un borde de 1px cuyo brillo se concentra donde está el puntero */
.vidrio::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1;
  background: radial-gradient(360px circle at var(--mx) var(--my), var(--especular), rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0.05) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* Lámina de brillo: la curvatura del vidrio */
.vidrio::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.07), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 22%);
}

/* ── Estructura ─────────────────────────────────────────────────────────── */
.app { position: relative; z-index: 1; max-width: 1560px; margin: 0 auto; padding: 20px 24px 40px; }

.barra {
  display: flex; align-items: center; gap: 20px; justify-content: space-between;
  padding: 14px 16px 14px 20px; border-radius: 999px; margin-bottom: 18px;
  position: sticky; top: 12px; z-index: 20;
}
.marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo { width: 38px; height: 38px; padding: 8px; border-radius: 12px; flex: none;
  background: linear-gradient(145deg, rgba(95, 180, 255, 0.35), rgba(143, 125, 255, 0.25));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 18px -6px rgba(95, 180, 255, 0.6); }
.logo path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
h1 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
#subtitulo { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42ch; }

.controles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.segmento {
  display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; position: relative;
  background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.segmento button {
  border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 520; color: var(--tinta-2); white-space: nowrap;
  transition: color .25s, background .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.segmento button:hover { color: var(--tinta); }
.segmento button.activo {
  color: var(--tinta);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 4px 14px -4px rgba(0, 0, 0, 0.5);
}
.segmento.chico button { padding: 5px 11px; font-size: 12px; }
.segmento:empty { display: none; }

.vivo {
  display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer; flex: none;
  padding: 6px 8px 6px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: background .2s;
}
.vivo:hover { background: rgba(255, 255, 255, 0.06); }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--bien); position: relative; flex: none; }
.punto::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--bien); animation: latido 2s ease-out infinite; }
@keyframes latido { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.vivo.trabajando .punto { background: var(--hoy); }
.vivo.trabajando .punto::after { border-color: var(--hoy); animation-duration: 1s; }
.vivo.error .punto { background: #ffb547; }
.vivo.error .punto::after { border-color: #ffb547; }
.vivo-texto { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.vivo-texto b { font-size: 12.5px; font-weight: 620; }
.vivo-texto small { font-size: 11px; color: var(--tinta-3); white-space: nowrap; }
.anillo { width: 30px; height: 30px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 3; }
.anillo-fondo { stroke: rgba(255, 255, 255, 0.08); }
.anillo-avance { stroke: var(--hoy); stroke-linecap: round; stroke-dasharray: 94.25; transition: stroke-dashoffset 1s linear; }

.aviso {
  margin: -6px 0 16px; padding: 12px 18px; border-radius: 16px; font-size: 13.5px;
  background: rgba(255, 181, 71, 0.1); color: #ffd79a; box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.25);
}

/* ── Rejilla ───────────────────────────────────────────────────────────── */
.rejilla {
  display: grid; gap: 18px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    'heroe heroe heroe heroe heroe ind ind ind ind ind ind ind'
    'obs obs obs obs obs obs obs obs obs obs obs obs'
    'curva curva curva curva curva curva curva curva feed feed feed feed'
    'horas horas horas horas horas horas horas horas feed feed feed feed'
    'prod prod prod prod prod medios medios medios fam fam fam fam'
    'calor calor calor calor calor calor calor calor sedes sedes sedes sedes';
}
.heroe { grid-area: heroe; } .indicadores { grid-area: ind; } .curva { grid-area: curva; }
.feed { grid-area: feed; } .horas { grid-area: horas; } .productos { grid-area: prod; }
.medios { grid-area: medios; } .familias { grid-area: fam; } .calor { grid-area: calor; }
.sedes-tarjeta { grid-area: sedes; }

.vidrio:not(.barra) { padding: 22px 24px; min-width: 0; }
.tarjeta-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tarjeta-cabeza h2 { font-size: 15px; font-weight: 620; letter-spacing: -0.01em; }
.tarjeta-cabeza p { font-size: 12.5px; margin-top: 3px; }
.rotulo { font-size: 13px; font-weight: 560; color: var(--tinta-2); }

.chip {
  font-size: 12px; font-weight: 560; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: var(--tinta-2);
}
.chip-vivo { color: var(--tinta); }

/* ── Héroe ──────────────────────────────────────────────────────────────── */
.heroe { display: flex; flex-direction: column; overflow: hidden; }
.heroe::after {
  background:
    radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.07), transparent 45%),
    radial-gradient(120% 90% at 100% 0%, rgba(95, 180, 255, 0.22), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(143, 125, 255, 0.16), transparent 60%);
}
.heroe-cabeza { display: flex; justify-content: space-between; align-items: center; }
.cifra-grande {
  font-size: clamp(44px, 5.4vw, 76px); font-weight: 720; letter-spacing: -0.045em; line-height: 1;
  margin: 18px 0 14px; font-variant-numeric: tabular-nums; color: #f6f8fd;
}
.heroe-pie { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 13.5px; color: var(--tinta-2); }
.delta { display: inline-flex; align-items: center; gap: 8px; }
.delta .pastilla {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 650; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 13px;
}
.pastilla.sube { color: #8ff0c2; background: rgba(60, 207, 145, 0.14); box-shadow: inset 0 0 0 1px rgba(60, 207, 145, 0.3); }
.pastilla.baja { color: #ffb0b0; background: rgba(255, 107, 107, 0.13); box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.3); }
.pastilla svg { width: 12px; height: 12px; }
.proyeccion b { color: var(--tinta); font-weight: 620; }
.ritmo { margin-top: auto; padding-top: 22px; }
.ritmo-barra { height: 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); position: relative; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
.ritmo-barra span {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; width: 0;
  background: linear-gradient(90deg, var(--hoy), var(--hoy-2));
  box-shadow: 0 0 18px rgba(95, 180, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: width 1.2s cubic-bezier(.2, .8, .2, 1);
}
.ritmo-barra i {
  position: absolute; top: -5px; bottom: -5px; width: 2px; border-radius: 2px; background: var(--tinta-2);
  transition: left 1.2s cubic-bezier(.2, .8, .2, 1);
}
.ritmo-leyenda { font-size: 12px; color: var(--tinta-3); margin-top: 9px; }

/* ── Indicadores ────────────────────────────────────────────────────────── */
.indicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.indicador { padding: 18px 20px !important; display: flex; flex-direction: column; gap: 6px; border-radius: 22px; }
.indicador .rotulo { font-size: 12.5px; display: flex; align-items: center; gap: 7px; }
.indicador .rotulo svg { width: 15px; height: 15px; stroke: var(--tinta-3); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.indicador .valor { font-size: clamp(22px, 2vw, 30px); font-weight: 680; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.indicador .comparo { font-size: 12px; color: var(--tinta-3); display: flex; gap: 6px; align-items: center; }
.indicador .comparo .sube { color: #7fe5b5; } .indicador .comparo .baja { color: #ff9c9c; }
.mini { height: 26px; margin-top: 2px; }
.mini path { fill: none; stroke: var(--hoy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mini .area { stroke: none; fill: url(#gMini); }

/* ── Lienzos SVG ────────────────────────────────────────────────────────── */
.lienzo { position: relative; width: 100%; }
#graficoCurva { height: 300px; }
#graficoHoras { height: 200px; }
#graficoCalor { min-height: 200px; }
svg text { font-family: var(--fuente); }
.eje text { fill: var(--tinta-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.eje line, .rejilla-linea { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.base { stroke: rgba(255, 255, 255, 0.16); }
.serie-hoy { fill: none; stroke: url(#gLinea); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(95, 180, 255, 0.55)); }
.serie-ref { fill: none; stroke: var(--ref); stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .9; }
.serie-proy { fill: none; stroke: var(--proy); stroke-width: 1.6; stroke-dasharray: 6 6; opacity: .55; }
.area-hoy { fill: url(#gArea); }
.dibuja { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); animation: dibujar 1.6s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
.aparece { opacity: 0; animation: aparecer .9s .35s ease forwards; }
@keyframes aparecer { to { opacity: 1; } }
.pulso { fill: var(--hoy); }
.pulso-halo { fill: none; stroke: var(--hoy); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: halo 2.2s ease-out infinite; }
@keyframes halo { from { transform: scale(.5); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.cruz { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 3 3; }
.marcador { stroke: var(--superficie); stroke-width: 2; }
.etiqueta-directa { font-size: 11.5px; font-weight: 600; }
.ahora-linea { stroke: rgba(255, 255, 255, 0.18); stroke-dasharray: 2 4; }
.ahora-texto { fill: var(--tinta-2); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.barra-hoy { fill: url(#gBarra); transition: opacity .2s; }
.barra-ref { fill: rgba(255, 255, 255, 0.09); }
.barra-hoy.atenuada { opacity: .35; }
.celda { transition: opacity .2s; rx: 4px; }
.celda:hover { stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.5; }
.blanco-hit { fill: transparent; cursor: crosshair; }
.vacio { display: grid; place-items: center; height: 100%; min-height: 120px; color: var(--tinta-3); font-size: 13px; text-align: center; padding: 20px; }

.leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--tinta-2); flex-wrap: wrap; justify-content: flex-end; }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.leyenda i { width: 18px; height: 3px; border-radius: 3px; display: inline-block; }
.leyenda i.hoy { background: linear-gradient(90deg, var(--hoy), var(--hoy-2)); }
.leyenda i.ref { background: repeating-linear-gradient(90deg, var(--ref) 0 2px, transparent 2px 6px); }
.leyenda i.proy { background: repeating-linear-gradient(90deg, var(--proy) 0 5px, transparent 5px 10px); opacity: .7; }
.leyenda i.caja { width: 11px; height: 11px; border-radius: 3px; }

/* ── Feed de tickets ───────────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; max-height: 100%; min-height: 0; }
.lista-tickets { list-style: none; margin: 0 -10px; padding: 0 4px 0 0; overflow-y: auto; flex: 1; min-height: 0; max-height: 560px;
  mask-image: linear-gradient(180deg, #000 85%, transparent); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.ticket {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 2px 12px; align-items: center;
  padding: 11px 12px; border-radius: 16px; margin-bottom: 4px; position: relative;
  transition: background .25s;
}
.ticket:hover { background: rgba(255, 255, 255, 0.04); }
.ticket .hora { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; grid-row: span 2; }
.ticket .items { font-size: 13px; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket .meta { font-size: 11.5px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 2; }
.ticket .monto { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; grid-row: span 2; text-align: right; }
.ticket.abono .monto { color: #ff9c9c; }
.ticket .marca-abono { font-size: 10.5px; font-weight: 650; color: #ffb0b0; background: rgba(255, 107, 107, 0.14); padding: 1px 6px; border-radius: 6px; margin-right: 6px; }
.ticket .marca-id { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bien); margin-right: 6px; vertical-align: middle; }
.ticket.nuevo { animation: entra .6s cubic-bezier(.16, 1, .3, 1); }
.ticket.nuevo::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgba(95, 180, 255, 0.22), rgba(143, 125, 255, 0.08) 60%, transparent);
  box-shadow: inset 0 0 0 1px rgba(95, 180, 255, 0.35);
  animation: destello 6s ease forwards;
}
@keyframes entra { from { opacity: 0; transform: translateY(-10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes destello { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }

/* ── Ranking ───────────────────────────────────────────────────────────── */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ranking li { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 12px; align-items: center; font-size: 13px; }
.ranking .pos { color: var(--tinta-3); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; grid-row: span 2; }
.ranking .nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking .cifra { font-weight: 620; font-variant-numeric: tabular-nums; text-align: right; }
.ranking .cifra small { color: var(--tinta-3); font-weight: 500; margin-left: 6px; }
.ranking .pista { grid-column: 2 / 4; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.ranking .pista span {
  display: block; height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, rgba(95, 180, 255, 0.55), var(--hoy));
  box-shadow: 0 0 12px rgba(95, 180, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: width 1s cubic-bezier(.2, .8, .2, 1);
}

/* ── Dona ───────────────────────────────────────────────────────────────── */
.dona { position: relative; width: min(100%, 210px); aspect-ratio: 1; margin: 0 auto 14px; }
.dona svg { width: 100%; height: 100%; overflow: visible; }
.dona .arco { fill: none; stroke-linecap: round; transition: stroke-width .25s, opacity .25s; cursor: pointer; }
.dona .arco:hover { stroke-width: 22; }
.dona.foco .arco:not(:hover) { opacity: .35; }
.dona-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.dona-centro b { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dona-centro small { font-size: 11.5px; color: var(--tinta-3); }
.leyenda-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12.5px; }
.leyenda-lista li { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 10px; align-items: center; }
.leyenda-lista i { width: 10px; height: 10px; border-radius: 3px; }
.leyenda-lista .pct { color: var(--tinta-3); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.leyenda-lista .val { font-weight: 600; font-variant-numeric: tabular-nums; }
.leyenda-lista span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Familias ──────────────────────────────────────────────────────────── */
.pila { display: flex; height: 18px; border-radius: 999px; overflow: hidden; gap: 2px; margin-bottom: 18px; background: rgba(0,0,0,.2); }
.pila span { height: 100%; transition: flex-grow 1s cubic-bezier(.2, .8, .2, 1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); min-width: 3px; }

/* ── Establecimientos ──────────────────────────────────────────────────── */
.sede { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.sede:last-child { border-bottom: 0; }
.sede-cabeza { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 9px; }
.sede-cabeza b { font-weight: 620; font-variant-numeric: tabular-nums; }
.sede-cabeza span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sede-pie { font-size: 12px; color: var(--tinta-3); margin-top: 7px; }

.escala { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--tinta-3); }
.escala i { width: 110px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(63, 149, 240, 0.08), rgba(63, 149, 240, 0.5), #7cc4ff); }

/* ── Tooltip y avisos ──────────────────────────────────────────────────── */
.tooltip {
  position: fixed; z-index: 50; pointer-events: none; padding: 10px 13px !important; border-radius: 14px; font-size: 12.5px; min-width: 150px;
  background: rgba(20, 24, 36, 0.72); transition: opacity .12s;
}
.tooltip h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.tooltip .fila { display: flex; justify-content: space-between; gap: 16px; align-items: center; line-height: 1.7; }
.tooltip .fila span { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-2); }
.tooltip .fila b { font-variant-numeric: tabular-nums; font-weight: 640; }
.tooltip i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast {
  padding: 12px 16px !important; border-radius: 18px; font-size: 13px; display: flex; gap: 12px; align-items: center;
  animation: toastEntra .5s cubic-bezier(.16, 1, .3, 1), toastSale .4s 5.5s ease forwards;
}
.toast b { font-size: 15px; font-variant-numeric: tabular-nums; }
.toast .icono { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(60, 207, 145, .35), rgba(60, 207, 145, .12)); }
.toast .icono svg { width: 16px; height: 16px; stroke: #b9f5d8; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes toastEntra { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes toastSale { to { opacity: 0; transform: translateY(8px); } }

.pie { margin-top: 22px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }

/* ── Adaptación ────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .rejilla { grid-template-areas:
    'heroe heroe heroe heroe heroe heroe ind ind ind ind ind ind'
    'obs obs obs obs obs obs obs obs obs obs obs obs'
    'curva curva curva curva curva curva curva curva curva curva curva curva'
    'horas horas horas horas horas horas horas horas horas horas horas horas'
    'feed feed feed feed feed feed prod prod prod prod prod prod'
    'medios medios medios medios medios medios fam fam fam fam fam fam'
    'calor calor calor calor calor calor calor calor calor calor calor calor'
    'sedes sedes sedes sedes sedes sedes sedes sedes sedes sedes sedes sedes'; }
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra { flex-wrap: wrap; border-radius: 28px; }
}
@media (max-width: 760px) {
  .app { padding: 12px 16px 32px; }
  .rejilla { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'heroe' 'ind' 'obs' 'curva' 'feed' 'horas' 'prod' 'medios' 'fam' 'calor' 'sedes'; gap: 14px; }
  .indicadores { gap: 12px; }
  .barra { position: static; padding: 14px; }
  .controles { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .vivo { width: 100%; justify-content: space-between; }
  #graficoCurva { height: 240px; }
  .vidrio:not(.barra) { padding: 18px; }
  .tarjeta-cabeza { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio { background: rgba(28, 33, 48, 0.92); }
}

/* Ajustes de ancho: nada debe empujar la página más allá de la pantalla */
.marca > div { min-width: 0; }
.indicador .comparo span { white-space: nowrap; }
.indicador .comparo { flex-wrap: wrap; }
@media (max-width: 760px) {
  #subtitulo { max-width: 100%; }
  .marca { width: 100%; }
  .controles { flex-direction: column; overflow: visible; }
  .segmento { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
}

.fecha-otra { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.05); flex: none; }
.fecha-otra.activo { background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); }
.fecha-otra svg { width: 17px; height: 17px; fill: none; stroke: var(--tinta-2); stroke-width: 1.8; stroke-linecap: round; }
.fecha-otra input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fecha-otra input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.ticket .marca-inv { color: #d9cfff; background: rgba(139, 124, 240, 0.18); }

/* ── Período y carga ───────────────────────────────────────────────────── */
.chip-carga { color: #cfe6ff; background: rgba(95, 180, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(95, 180, 255, 0.35); position: relative; overflow: hidden; }
.chip-carga::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); animation: barrido 1.6s linear infinite; }
@keyframes barrido { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.ticket { cursor: pointer; }
.ticket:focus-visible { outline: 2px solid var(--hoy); outline-offset: -2px; }
.ticket .hora small { display: block; font-size: 10.5px; color: var(--tinta-3); font-weight: 600; }

/* ── Detalle del ticket ─────────────────────────────────────────────────── */
.velo { position: fixed; inset: 0; z-index: 70; background: rgba(5, 7, 12, 0.45); backdrop-filter: blur(3px); animation: aparecer .25s ease forwards; opacity: 0; }
.detalle {
  position: fixed; z-index: 80; top: 14px; right: 14px; bottom: 14px; width: min(520px, calc(100vw - 28px));
  padding: 26px 26px 30px !important; overflow-y: auto; border-radius: 30px;
  background: linear-gradient(160deg, rgba(40, 46, 66, 0.82), rgba(18, 21, 32, 0.9));
  animation: deslizar .45s cubic-bezier(.2, .9, .2, 1);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
@keyframes deslizar { from { transform: translateX(40px); opacity: 0; } }
.detalle .cerrar { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; transition: background .2s; }
.detalle .cerrar:hover { background: rgba(255, 255, 255, 0.16); }
.detalle .cerrar svg { width: 16px; height: 16px; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; fill: none; }
.det-cabeza { padding-right: 44px; }
.det-cabeza .serie { font-size: 12.5px; color: var(--tinta-3); font-weight: 600; letter-spacing: .02em; }
.det-cabeza h3 { margin: 6px 0 4px; font-size: 34px; font-weight: 720; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.det-cabeza p { margin: 0; font-size: 13px; color: var(--tinta-2); }
.det-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.det-etiquetas span { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--tinta-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.det-bloque { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); }
.det-bloque h4 { margin: 0 0 12px; font-size: 12.5px; font-weight: 620; color: var(--tinta-2); }
.det-datos { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13px; margin: 0; }
.det-datos dt { color: var(--tinta-3); }
.det-datos dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.det-linea { display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.07); font-size: 13px; }
.det-linea:last-child { border-bottom: 0; }
.det-linea .u { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.det-linea .v { font-weight: 620; font-variant-numeric: tabular-nums; text-align: right; }
.det-linea .sub { grid-column: 2 / 4; font-size: 11.5px; color: var(--tinta-3); }
.det-linea ul { grid-column: 2 / 4; list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; color: var(--tinta-2); }
.det-linea li { padding: 1px 0; }
.det-linea li::before { content: '↳ '; color: var(--tinta-3); }
.det-totales { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: 13px; font-variant-numeric: tabular-nums; }
.det-totales span:nth-child(odd) { color: var(--tinta-3); }
.det-totales span:nth-child(even) { text-align: right; }
.det-totales .total { font-size: 16px; font-weight: 700; color: var(--tinta) !important; padding-top: 8px; border-top: 1px solid var(--linea); }
.det-pago { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(0, 0, 0, 0.18); margin-bottom: 8px; font-size: 13px; }
.det-pago b { font-variant-numeric: tabular-nums; }
.det-pago small { display: block; color: var(--tinta-3); font-size: 11.5px; margin-top: 3px; }
.det-aviso { font-size: 12.5px; color: #ffd79a; background: rgba(255, 181, 71, 0.1); padding: 10px 14px; border-radius: 14px; margin-top: 16px; }
@media (max-width: 760px) { .detalle { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 88vh; } }

/* ── Sin cargar: nunca se pinta como cero ───────────────────────────────── */
.sin-cargar-barra, .sin-cargar-banda { fill: url(#pRaya); stroke: rgba(255, 255, 255, 0.12); stroke-dasharray: 3 4; }
.sin-cargar-texto { fill: var(--tinta-3); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.celda-futura { fill: rgba(255, 255, 255, 0.015); }
.cifra-grande.sin-cargar { font-size: clamp(34px, 3.6vw, 52px); color: var(--tinta-3); }
.aviso-parcial { color: #ffd79a; }
.pie .salir { color: var(--tinta-2); text-decoration: none; font-weight: 600; }
.pie .salir:hover { color: var(--tinta); }

/* ── Observaciones ─────────────────────────────────────────────────────── */
.observaciones { grid-area: obs; padding: 6px 0 0 !important; }
.observaciones .tarjeta-cabeza { padding: 0 6px; }
.obs-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.obs {
  --tono: var(--hoy);
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; border-radius: 20px;
  backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.07), var(--sombra);
  overflow: hidden; opacity: 0;
}
.obs.alerta { --tono: #ffb547; } .obs.oportunidad { --tono: #3ccf91; } .obs.tendencia { --tono: #5fb4ff; } .obs.control { --tono: #b4a6ff; }
.obs-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.obs-tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; color: var(--tono); }
.obs-tipo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.obs-impacto { font-size: 11.5px; font-weight: 620; color: var(--tinta-2); padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.22); font-variant-numeric: tabular-nums; white-space: nowrap; }
.obs h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.obs p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
.obs .hacer { display: grid; grid-template-columns: 16px 1fr; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--tinta); }
.obs .hacer svg { width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--tono); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.obs .base { margin-top: auto; font-size: 11px; color: var(--tinta-3); }
.boton-chip { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.boton-chip:hover { background: rgba(255, 255, 255, 0.12); color: var(--tinta); }
@media (max-width: 1180px) { .obs-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .obs-lista { grid-template-columns: minmax(0, 1fr); } }

/* ── Movimiento ─────────────────────────────────────────────────────────── */
/* Desenfoque = el dato está cambiando. Entra rápido, sale con calma. */
.lienzo, .dona, .ranking, .familias-cuerpo, #establecimientos, .lista-tickets, .cifra-grande, .indicador .valor, .obs-lista {
  transition: filter .45s cubic-bezier(.16, 1, .3, 1), opacity .45s cubic-bezier(.16, 1, .3, 1);
}
body.enfocando :is(.lienzo, .dona, .ranking, .familias-cuerpo, #establecimientos, .lista-tickets, .cifra-grande, .indicador .valor, .obs-lista) {
  filter: blur(7px) saturate(.7); opacity: .45; transition-duration: .16s;
}

/* Píldora deslizante de los selectores */
.segmento { isolation: isolate; }
.segmento .pildora {
  position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 4px 14px -4px rgba(0, 0, 0, 0.5);
  transition: transform .42s cubic-bezier(.16, 1, .3, 1), width .42s cubic-bezier(.16, 1, .3, 1), opacity .2s;
}
.segmento .pildora.sin-transicion { transition: none; }
.segmento:has(.pildora) button.activo { background: transparent; box-shadow: none; }

/* Respuesta al presionar */
.segmento button, .vivo, .boton-chip, .fecha-otra, .detalle .cerrar, .entrada button { transition: transform .12s ease, background .2s, color .2s; }
:is(.segmento button, .vivo, .boton-chip, .fecha-otra, .detalle .cerrar, .entrada button):active { transform: scale(.96); }
.ticket { transition: background .25s, transform .12s ease; }
.ticket:active { transform: scale(.985); }

/* Barras: crecen desde su base */
.barra-hoy { transform-box: fill-box; transform-origin: 50% 100%; }

/* Mapa de calor: se llena por columnas */
.celda-entra { animation: celda .5s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes celda { from { opacity: 0; } }

/* Observaciones: sin repetir la entrada en cada refresco */
.obs-lista.quieta .obs { animation: none; opacity: 1; }
.obs { animation: obsEntra .55s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes obsEntra { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* Ranking: el ancho se interpola desde el valor anterior */
.ranking .pista span { transition: width .9s cubic-bezier(.16, 1, .3, 1); }

/* Panel de detalle: salida más rápida que la entrada */
.detalle { animation: deslizar .42s cubic-bezier(.16, 1, .3, 1); }
.detalle.saliendo { animation: deslizarSale .2s cubic-bezier(.4, 0, 1, 1) forwards; }
.velo.saliendo { animation: veloSale .2s ease forwards; }
@keyframes deslizarSale { to { transform: translateX(32px); opacity: 0; filter: blur(4px); } }
@keyframes veloSale { from { opacity: 1; } to { opacity: 0; } }

/* Momento central: una venta cruza el vidrio del total */
.heroe.venta::before { animation: cantoVenta 1.3s cubic-bezier(.16, 1, .3, 1); }
.heroe.venta .cifra-grande { animation: cifraVenta 1.3s cubic-bezier(.16, 1, .3, 1); }
.heroe.venta { animation: brilloVenta 1.3s cubic-bezier(.16, 1, .3, 1); }
@keyframes brilloVenta {
  0% { box-shadow: inset 0 1px 0 0 rgba(255,255,255,.28), inset 0 -1px 0 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 20px 40px -24px rgba(255,255,255,.18), var(--sombra); }
  18% { box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6), inset 0 -1px 0 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(124,196,255,.55), inset 0 30px 60px -20px rgba(124,196,255,.35), var(--sombra), 0 0 50px -10px rgba(95,180,255,.55); }
}
@keyframes cantoVenta { 0% { --mx: -20%; --my: 50%; } 100% { --mx: 120%; --my: 50%; } }
@keyframes cifraVenta { 0% { filter: none; } 15% { filter: drop-shadow(0 0 18px rgba(124, 196, 255, .65)); } 100% { filter: none; } }
@property --mx { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<length-percentage>'; inherits: true; initial-value: 0%; }

/* Sin movimiento: se conservan los cambios de opacidad y color que informan */
@media (prefers-reduced-motion: reduce) {
  body.enfocando :is(.lienzo, .dona, .ranking, .familias-cuerpo, #establecimientos, .lista-tickets, .cifra-grande, .indicador .valor, .obs-lista) { filter: none; opacity: .6; }
  .segmento .pildora { transition: opacity .2s; }
}

/* Énfasis por peso y tinte del vidrio, no por franjas ni texto degradado */
.obs { background: linear-gradient(160deg, color-mix(in oklab, var(--tono) 13%, transparent), rgba(255, 255, 255, 0.015) 55%); }
.cifra-grande { text-shadow: 0 2px 30px rgba(95, 180, 255, 0.18); }
::selection { background: rgba(95, 180, 255, 0.35); color: #fff; }

/* ── Mapa de calor legible ─────────────────────────────────────────────── */
.calor .escala { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 14px; font-size: 11.5px; color: var(--tinta-2); }
.calor .escala span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.calor .escala i { width: 14px; height: 10px; border-radius: 3px; background: none; }
#calorNota { max-width: 72ch; line-height: 1.45; }
.celda-cifra { font-size: 10.5px; font-weight: 640; fill: rgba(255, 255, 255, 0.92); pointer-events: none; font-variant-numeric: tabular-nums; }
.celda-cifra.oscura { fill: #0b1a24; }
.celda { stroke: none; }
.celda:hover { stroke: #fff; stroke-width: 1.5; }
.celda-pico { fill: none; stroke: #ffd36b; stroke-width: 2; pointer-events: none; }
.calor-dia { font-size: 11.5px; fill: var(--tinta-2); }
.calor-dia.actual { fill: var(--tinta); font-weight: 700; }
.calor-total { font-size: 12.5px; font-weight: 680; fill: var(--tinta); font-variant-numeric: tabular-nums; }
.calor-pico { font-size: 10.5px; fill: var(--tinta-3); }
.calor-pie { font-size: 10.5px; fill: var(--tinta-3); }
.calor-barra { fill: rgba(124, 196, 255, 0.45); }
.calor-barra.pico { fill: #ffd36b; }

/* ════════════════════════════════════════════════════════════════════════
   Tema CAIA · Sistema de marca V1.0
   Papel crema, tinta morada, morado Chispa como voz y coral como acento
   (70 % neutros · 20 % morado · 10 % acentos). El vidrio pasa a esmerilado
   claro sobre manchas lavanda y durazno, como el fondo de la app de CAIA.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;
  --fondo: #FFF7ED;
  --superficie: #FFFDF9;
  --tinta: #241B3D;
  --tinta-2: #4E4468;
  --tinta-3: #6E6488;
  --linea: rgba(36, 27, 61, 0.1);
  --hoy: #7B4FE8;
  --hoy-2: #5C34C4;
  --ref: #9A91B0;
  --proy: #6E6488;
  --c1: #7B4FE8; --c2: #EB6B3A; --c3: #14967A; --c4: #C98A00; --c5: #D94F8C; --c6: #2F7BD6;
  --bien: #1E7F52;
  --mal: #C2410C;
  --especular: rgba(255, 255, 255, 0.95);
  --sombra: 0 18px 44px -22px rgba(52, 32, 110, 0.28), 0 4px 14px -8px rgba(52, 32, 110, 0.14);
  --fuente: 'Hanken Grotesk', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
}
body { background: var(--fondo); color: var(--tinta); }
h1, h2, h3, .cifra-grande, .indicador .valor, .det-cabeza h3 { font-family: var(--display); }

/* Fondo: manchas cálidas, mucho aire */
.fondo::after { background: none; }
.mancha { filter: blur(70px); opacity: 0.85; }
.m1 { background: radial-gradient(circle, #E4D9FA 0%, transparent 65%); }
.m2 { background: radial-gradient(circle, #FFDCC2 0%, transparent 65%); }
.m3 { background: radial-gradient(circle, #E1D2FB 0%, transparent 62%); opacity: .7; }
.m4 { background: radial-gradient(circle, #FFE7B3 0%, transparent 62%); opacity: .55; }
.grano { opacity: .035; mix-blend-mode: multiply; }

/* Vidrio esmerilado claro */
.vidrio {
  background: linear-gradient(160deg, rgba(255, 253, 249, 0.82) 0%, rgba(255, 253, 249, 0.6) 100%);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(36, 27, 61, 0.06), var(--sombra);
}
.vidrio::before { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 255, 255, 1), rgba(123, 79, 232, 0.12) 45%, rgba(36, 27, 61, 0.04) 75%); }
.vidrio::after { background: radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.5), transparent 45%); }
.heroe::after { background: radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 255, 255, .5), transparent 45%), radial-gradient(120% 90% at 100% 0%, rgba(123, 79, 232, 0.12), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(255, 138, 92, 0.1), transparent 60%); }
.tooltip { background: rgba(255, 253, 249, 0.96); color: var(--tinta); }

/* Logotipo CAIA */
.chispa { width: 40px; height: 40px; flex: none; }
.caia-logo { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.03em; line-height: 1; }
.caia-logo span { color: #FF8A5C; }
.caia-logo em { font-style: normal; font-family: var(--fuente); font-weight: 600; font-size: 14px; letter-spacing: 0; color: var(--tinta-2); margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--linea); }
.entrada .caia-logo { font-size: 30px; }
.entrada .caia-logo em { display: block; border: 0; padding: 0; margin: 8px 0 0; font-size: 15px; }

/* Controles */
.segmento, .vivo, .fecha-otra { background: rgba(36, 27, 61, 0.06); box-shadow: inset 0 0 0 1px rgba(36, 27, 61, 0.05); }
.segmento button { color: var(--tinta-2); }
.segmento button:hover { color: var(--tinta); }
.segmento .pildora, .segmento button.activo { background: #fff; box-shadow: 0 2px 8px -2px rgba(52, 32, 110, 0.25), inset 0 0 0 1px rgba(36, 27, 61, 0.05); }
.segmento:has(.pildora) button.activo { background: transparent; box-shadow: none; color: var(--tinta); font-weight: 650; }
.fecha-otra svg { stroke: var(--tinta-2); }
.fecha-otra.activo { background: #fff; }
.vivo:hover { background: rgba(36, 27, 61, 0.09); }
.anillo-fondo { stroke: rgba(36, 27, 61, 0.1); }
.chip { background: rgba(123, 79, 232, 0.08); color: #5C34C4; box-shadow: none; }
.chip-carga { color: #5C34C4; background: rgba(123, 79, 232, 0.12); }
.boton-chip:hover { background: rgba(123, 79, 232, 0.16); color: #34206E; }
.aviso { background: rgba(255, 200, 87, 0.18); color: #7A4E00; box-shadow: inset 0 0 0 1px rgba(224, 160, 32, 0.35); }

/* Héroe y cifras */
.cifra-grande { color: var(--tinta); text-shadow: none; letter-spacing: -0.035em; }
.pastilla.sube { color: #1E7F52; background: rgba(30, 127, 82, 0.1); box-shadow: inset 0 0 0 1px rgba(30, 127, 82, 0.25); }
.pastilla.baja { color: #C2410C; background: rgba(235, 107, 58, 0.1); box-shadow: inset 0 0 0 1px rgba(235, 107, 58, 0.3); }
.ritmo-barra { background: rgba(36, 27, 61, 0.07); box-shadow: none; }
.ritmo-barra span { background: linear-gradient(90deg, #7B4FE8, #A98BFF); box-shadow: none; }
.ritmo-barra i { background: var(--tinta); }
.indicador .comparo .sube { color: #1E7F52; } .indicador .comparo .baja { color: #C2410C; }
.aviso-parcial { color: #A15C00; }
.indicador .rotulo svg { stroke: #7B4FE8; }

/* Gráficos */
.eje line, .rejilla-linea { stroke: rgba(36, 27, 61, 0.07); }
.base { stroke: rgba(36, 27, 61, 0.2); }
.serie-hoy { filter: drop-shadow(0 4px 8px rgba(123, 79, 232, 0.3)); }
.serie-ref { stroke: #9A91B0; }
.serie-proy { stroke: #6E6488; opacity: .6; }
.ahora-linea { stroke: rgba(36, 27, 61, 0.2); }
.cruz { stroke: rgba(36, 27, 61, 0.35); }
.marcador { stroke: #FFFDF9; }
.barra-ref { fill: rgba(36, 27, 61, 0.1); }
.leyenda i.hoy { background: linear-gradient(90deg, #7B4FE8, #5C34C4); }
.mini path { stroke: #7B4FE8; }
.ranking .pista { background: rgba(36, 27, 61, 0.06); }
.ranking .pista span { background: linear-gradient(90deg, #A98BFF, #7B4FE8); box-shadow: none; }
.pila { background: rgba(36, 27, 61, 0.06); }
.pila span { box-shadow: none; }
.celda-cifra { fill: #fff; }
.celda-cifra.oscura { fill: #34206E; }
.celda:hover { stroke: #241B3D; }
.celda-pico { stroke: #FF8A5C; stroke-width: 2.5; }
.calor-barra { fill: rgba(123, 79, 232, 0.35); }
.calor-barra.pico { fill: #FF8A5C; }
.sin-cargar-barra, .sin-cargar-banda { stroke: rgba(36, 27, 61, 0.16); }

/* Tickets y detalle */
.ticket:hover { background: rgba(123, 79, 232, 0.05); }
.ticket.abono .monto { color: #C2410C; }
.ticket .marca-abono { color: #C2410C; background: rgba(235, 107, 58, 0.12); }
.ticket .marca-inv { color: #5C34C4; background: rgba(123, 79, 232, 0.12); }
.ticket.nuevo::before { background: linear-gradient(90deg, rgba(123, 79, 232, 0.14), rgba(255, 138, 92, 0.06) 60%, transparent); box-shadow: inset 0 0 0 1px rgba(123, 79, 232, 0.3); }
.lista-tickets { scrollbar-color: rgba(36, 27, 61, .18) transparent; }
.detalle { background: linear-gradient(160deg, rgba(255, 253, 249, 0.97), rgba(255, 247, 237, 0.97)); }
.detalle .cerrar { background: rgba(36, 27, 61, 0.06); }
.detalle .cerrar svg { stroke: var(--tinta); }
.det-etiquetas span { background: rgba(123, 79, 232, 0.08); color: #5C34C4; box-shadow: none; }
.det-pago { background: rgba(36, 27, 61, 0.04); }
.det-aviso { color: #7A4E00; background: rgba(255, 200, 87, 0.2); }
.velo { background: rgba(36, 27, 61, 0.22); }
.toast .icono { background: rgba(123, 79, 232, 0.14); }
.toast .icono svg { stroke: #5C34C4; }
::selection { background: rgba(123, 79, 232, 0.22); color: var(--tinta); }

/* Momento de venta en clave CAIA */
@keyframes brilloVenta {
  0% { box-shadow: inset 0 1px 0 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(36,27,61,.06), var(--sombra); }
  18% { box-shadow: inset 0 1px 0 0 rgba(255,255,255,1), inset 0 0 0 1.5px rgba(123,79,232,.45), var(--sombra), 0 0 0 6px rgba(123,79,232,.08); }
}
@keyframes cifraVenta { 0% { color: var(--tinta); } 15% { color: #7B4FE8; } 100% { color: var(--tinta); } }

/* ── Semáforo de decisiones ─────────────────────────────────────────────── */
.semaforo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.sem-col { --luz: #7B4FE8; padding: 0 20px; display: flex; flex-direction: column; min-width: 0; }
.sem-col + .sem-col { border-left: 1px solid var(--linea); }
.sem-col:first-child { padding-left: 0; } .sem-col:last-child { padding-right: 0; }
.sem-col.alta { --luz: #E5542B; } .sem-col.media { --luz: #E0A020; } .sem-col.baja { --luz: #7B4FE8; }
.sem-cabeza { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 2px solid var(--luz); margin-bottom: 4px; }
.sem-cabeza h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.sem-luz { width: 11px; height: 11px; border-radius: 50%; background: var(--luz); box-shadow: 0 0 0 4px color-mix(in oklab, var(--luz) 18%, transparent); flex: none; }
.sem-cuenta { margin-left: auto; font-size: 12.5px; font-weight: 650; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.sem-item { border-bottom: 1px solid var(--linea); animation: obsEntra .45s cubic-bezier(.16, 1, .3, 1) backwards; }
.semaforo.quieta .sem-item { animation: none; }
.sem-boton { all: unset; box-sizing: border-box; display: grid; gap: 4px; width: 100%; padding: 13px 4px; cursor: pointer; border-radius: 10px; transition: background .2s; }
.sem-boton:hover { background: rgba(123, 79, 232, 0.05); }
.sem-boton:focus-visible { outline: 2px solid #7B4FE8; outline-offset: 2px; }
.sem-hallazgo { font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--tinta); }
.sem-sede { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; color: #5C34C4; background: rgba(123, 79, 232, 0.1); vertical-align: 1px; }
.sem-cifras { font-size: 12.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.sem-cifras b { color: var(--tinta); font-weight: 700; }
.sem-decision { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--tinta); font-weight: 560; }
.sem-decision svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--luz); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: translateY(2px); }
.sem-decision em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--luz); white-space: nowrap; padding-left: 8px; font-variant-numeric: tabular-nums; }
.sem-col.media .sem-decision em { color: #A15C00; }
.sem-detalle { padding: 0 4px 14px; display: grid; gap: 6px; }
.sem-detalle p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--tinta-2); max-width: 70ch; }
.sem-detalle small { font-size: 11px; color: var(--tinta-3); }
.sem-vacio { font-size: 13px; color: var(--tinta-3); margin: 14px 0; }
.sem-mas { all: unset; cursor: pointer; margin-top: 10px; font-size: 12.5px; font-weight: 650; color: #5C34C4; }
.sem-mas:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1180px) {
  .semaforo { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sem-col { padding: 0 !important; border-left: 0 !important; }
}
.sem-detalle[hidden] { display: none; }
.observaciones { padding: 22px 24px !important; }
.observaciones .tarjeta-cabeza { padding: 0; }
.caia-logo { white-space: nowrap; }
.marca { min-width: 260px; }
@media (max-width: 760px) { .marca { min-width: 0; } .caia-logo em { font-size: 12.5px; } }

/* ── Más morado: barra, total y fondo ──────────────────────────────────── */
body { background: #F5EFFE; }
.m1 { background: radial-gradient(circle, #D9C8FB 0%, transparent 65%); }
.m3 { background: radial-gradient(circle, #CDB8FA 0%, transparent 62%); opacity: .8; }
.tarjeta-cabeza h2, .observaciones h2 { color: #34206E; }

/* Barra superior en morado */
.barra.vidrio {
  background: linear-gradient(120deg, #34206E 0%, #5C34C4 45%, #7B4FE8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 18px 40px -20px rgba(52, 32, 110, 0.6);
}
.barra.vidrio::before { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0.05) 75%); }
.barra.vidrio::after { background: radial-gradient(500px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.12), transparent 50%); }
.barra .chispa circle:nth-child(1), .barra .chispa circle:nth-child(2) { fill: #fff; }
.barra .caia-logo { color: #fff; }
.barra .caia-logo span { color: #FFB08A; }
.barra .caia-logo em { color: rgba(255, 255, 255, 0.85); border-left-color: rgba(255, 255, 255, 0.3); }
.barra #subtitulo { color: rgba(255, 255, 255, 0.72); }
.barra .segmento, .barra .vivo, .barra .fecha-otra { background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.barra .segmento button { color: rgba(255, 255, 255, 0.86); }
.barra .segmento button:hover { color: #fff; }
.barra .segmento:has(.pildora) button.activo { color: #5C34C4; }
.barra .segmento .pildora { background: #fff; box-shadow: 0 4px 12px -4px rgba(20, 8, 60, 0.45); }
.barra .fecha-otra svg { stroke: #fff; }
.barra .fecha-otra.activo { background: #fff; } .barra .fecha-otra.activo svg { stroke: #5C34C4; }
.barra .vivo:hover { background: rgba(255, 255, 255, 0.2); }
.barra .vivo-texto b { color: #fff; } .barra .vivo-texto small { color: rgba(255, 255, 255, 0.72); }
.barra .anillo-fondo { stroke: rgba(255, 255, 255, 0.22); } .barra .anillo-avance { stroke: #fff; }

/* El total de ventas sobre morado */
.heroe.vidrio {
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 138, 92, 0.35), transparent 55%), linear-gradient(150deg, #5C34C4 0%, #7B4FE8 55%, #8E66F0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 24px 50px -24px rgba(52, 32, 110, 0.7);
  color: #fff;
}
.heroe::after { background: radial-gradient(500px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.14), transparent 50%); }
.heroe .rotulo, .heroe .heroe-pie, .heroe .ritmo-leyenda { color: rgba(255, 255, 255, 0.86); }
.heroe .cifra-grande { color: #fff; }
.heroe .proyeccion b { color: #fff; }
.heroe .chip { background: rgba(255, 255, 255, 0.16); color: #fff; }
.heroe .pastilla.sube { color: #0F5132; background: #C9F2DD; box-shadow: none; }
.heroe .pastilla.baja { color: #7A2410; background: #FFD9C9; box-shadow: none; }
.heroe .ritmo-barra { background: rgba(255, 255, 255, 0.2); }
.heroe .ritmo-barra span { background: linear-gradient(90deg, #FFC857, #FF8A5C); }
.heroe .ritmo-barra i { background: #fff; }
@keyframes cifraVenta { 0% { color: #fff; } 15% { color: #FFC857; } 100% { color: #fff; } }
.heroe .cifra-grande.sin-cargar { color: rgba(255, 255, 255, 0.7); }