/* ==========================================================
   Unibot Dashboard — animaciones del handoff Claude Design.
   Tailwind hace el grueso del styling; aqui solo keyframes,
   utilidades y overrides finos que Tailwind no provee.
   ========================================================== */

html, body, #root { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
.font-mono-num {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* Animated gradient bar */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.grad-bar {
  background-size: 200% 100%;
  animation: gradientShift 4s linear infinite;
}

/* Live pulse */
@keyframes livePulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}
.live-dot { animation: livePulse 1.4s ease-in-out infinite; }

/* Status dot pulse — halo pequeño contenido dentro del chip */
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 3px transparent; opacity: 0.75; }
}
.status-dot { animation: statusPulse 1.8s ease-in-out infinite; }

/* Scanning line */
@keyframes scanLine {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
.scan-line { animation: scanLine 2.4s ease-in-out 1; }

/* Spotlight "Estado de IA" — expandir de chico a pantalla completa al entrar el slide */
@keyframes spotlightExpand {
  0%   { transform: scale(0.22); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.spotlight-expand { animation: spotlightExpand 0.75s cubic-bezier(0.16, 0.84, 0.28, 1) both; transform-origin: center center; }

/* Skeleton shimmer */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.shimmer {
  background: linear-gradient(90deg, rgba(148,163,184,0.08) 0%, rgba(148,163,184,0.18) 50%, rgba(148,163,184,0.08) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}

/* Card hover */
.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { transform: translateY(-2px); }

/* Theme transition */
.themed { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; }

/* Radio waves (red theme) */
@keyframes radioWave {
  0%   { transform: scale(0.4); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}
.radio-wave { animation: radioWave 2.2s ease-out infinite; transform-origin: center; }

/* Body green glow (red theme) */
@keyframes greenGlow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(34,197,94,0.65)) drop-shadow(0 0 26px rgba(34,197,94,0.35)); }
  50%      { filter: drop-shadow(0 0 22px rgba(34,197,94,0.95)) drop-shadow(0 0 42px rgba(34,197,94,0.55)); }
}
.glow-green { animation: greenGlow 2.4s ease-in-out infinite; }

/* Cyan glow (claro/oscuro) */
@keyframes cyanGlow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(6,182,212,0.7)) drop-shadow(0 0 30px rgba(6,182,212,0.35)); }
  50%      { filter: drop-shadow(0 0 24px rgba(6,182,212,1)) drop-shadow(0 0 50px rgba(6,182,212,0.55)); }
}
.glow-cyan { animation: cyanGlow 2.6s ease-in-out infinite; }

/* Red error glow (todos los temas) */
@keyframes redGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(239,68,68,0.43)) drop-shadow(0 0 21px rgba(239,68,68,0.25)); }
  50%      { filter: drop-shadow(0 0 18px rgba(239,68,68,0.50)) drop-shadow(0 0 38px rgba(239,68,68,0.35)); }
}
.glow-red { animation: redGlow 1.25s ease-in-out infinite; }
.mascot-frozen { animation: none !important; }

/* Azul rey (on/online) */
@keyframes blueRoyalGlow {
  0%, 100% { filter: drop-shadow(0 0 6px  rgba(37,99,235,0.43))
                     drop-shadow(0 0 13px rgba(37,99,235,0.28))
                     drop-shadow(0 0 22px rgba(37,99,235,0.15)); }
  50%      { filter: drop-shadow(0 0 10px rgba(37,99,235,0.50))
                     drop-shadow(0 0 20px rgba(37,99,235,0.40))
                     drop-shadow(0 0 32px rgba(37,99,235,0.25)); }
}
.glow-blue-royal { animation: blueRoyalGlow 2.6s ease-in-out infinite; }

/* Cyan intenso (en_llamada) */
@keyframes cyanStrongGlow {
  0%, 100% { filter: drop-shadow(0 0 6px  rgba(0,229,255,0.45))
                     drop-shadow(0 0 13px rgba(0,229,255,0.30))
                     drop-shadow(0 0 22px rgba(0,229,255,0.18)); }
  50%      { filter: drop-shadow(0 0 10px rgba(0,229,255,0.50))
                     drop-shadow(0 0 21px rgba(0,229,255,0.43))
                     drop-shadow(0 0 35px rgba(0,229,255,0.28)); }
}
.glow-cyan-strong { animation: cyanStrongGlow 1.8s ease-in-out infinite; }

/* Amarillo (en_reparacion) */
@keyframes yellowGlow {
  0%, 100% { filter: drop-shadow(0 0 4px  rgba(234,179,8,0.43))
                     drop-shadow(0 0 10px rgba(234,179,8,0.28))
                     drop-shadow(0 0 18px rgba(234,179,8,0.15)); }
  50%      { filter: drop-shadow(0 0 8px  rgba(234,179,8,0.50))
                     drop-shadow(0 0 18px rgba(234,179,8,0.38))
                     drop-shadow(0 0 29px rgba(234,179,8,0.23)); }
}
.glow-yellow { animation: yellowGlow 2.0s ease-in-out infinite; }

/* — Eduardo Luna · 2026 — glows de los 3 estados de FALLA nuevos.
   Mismo patron drop-shadow apilado que glow-red/glow-yellow. */

/* Violeta (ia_sin_saldo — IA/Anthropic sin saldo), base #a855f7 */
@keyframes violetGlow {
  0%, 100% { filter: drop-shadow(0 0 4px  rgba(168,85,247,0.43))
                     drop-shadow(0 0 10px rgba(168,85,247,0.28))
                     drop-shadow(0 0 18px rgba(168,85,247,0.15)); }
  50%      { filter: drop-shadow(0 0 8px  rgba(168,85,247,0.50))
                     drop-shadow(0 0 18px rgba(168,85,247,0.38))
                     drop-shadow(0 0 29px rgba(168,85,247,0.23)); }
}
.glow-violet { animation: violetGlow 2.0s ease-in-out infinite; }

/* Rosa (voz_sin_saldo — ElevenLabs sin creditos), base #ec4899 */
@keyframes pinkGlow {
  0%, 100% { filter: drop-shadow(0 0 4px  rgba(236,72,153,0.43))
                     drop-shadow(0 0 10px rgba(236,72,153,0.28))
                     drop-shadow(0 0 18px rgba(236,72,153,0.15)); }
  50%      { filter: drop-shadow(0 0 8px  rgba(236,72,153,0.50))
                     drop-shadow(0 0 18px rgba(236,72,153,0.38))
                     drop-shadow(0 0 29px rgba(236,72,153,0.23)); }
}
.glow-pink { animation: pinkGlow 2.0s ease-in-out infinite; }

/* Rosa claro (voz_saldo_bajo — creditos de voz por terminarse), base #f472b6.
   ADVERTENCIA, no falla: misma familia que el rosa de "sin saldo" pero un tono
   mas claro y un pulso mas lento (3.2s), para que se lea como aviso tranquilo
   y no como alarma. — Eduardo Luna · 2026 */
@keyframes pinkSoftGlow {
  0%, 100% { filter: drop-shadow(0 0 4px  rgba(244,114,182,0.38))
                     drop-shadow(0 0 10px rgba(244,114,182,0.24))
                     drop-shadow(0 0 18px rgba(244,114,182,0.13)); }
  50%      { filter: drop-shadow(0 0 8px  rgba(244,114,182,0.46))
                     drop-shadow(0 0 18px rgba(244,114,182,0.32))
                     drop-shadow(0 0 29px rgba(244,114,182,0.20)); }
}
.glow-pink-soft { animation: pinkSoftGlow 3.2s ease-in-out infinite; }

/* Naranja (zae_login — sin acceso a Zae), base #f97316 */
@keyframes orangeGlow {
  0%, 100% { filter: drop-shadow(0 0 4px  rgba(249,115,22,0.43))
                     drop-shadow(0 0 10px rgba(249,115,22,0.28))
                     drop-shadow(0 0 18px rgba(249,115,22,0.15)); }
  50%      { filter: drop-shadow(0 0 8px  rgba(249,115,22,0.50))
                     drop-shadow(0 0 18px rgba(249,115,22,0.38))
                     drop-shadow(0 0 29px rgba(249,115,22,0.23)); }
}
.glow-orange { animation: orangeGlow 2.0s ease-in-out infinite; }

/* Off (sin brillo, PNG normal) */
.glow-off {
  filter: none !important;
  animation: none !important;
}

/* Mascot float */
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.mascot-float { animation: mascotFloat 3s ease-in-out infinite; }

/* Thruster flame flicker */
@keyframes flameFlicker {
  0%,100% { transform: scaleY(1)    scaleX(1);    opacity: 0.95; }
  25%     { transform: scaleY(1.15) scaleX(0.92); opacity: 1; }
  50%     { transform: scaleY(0.9)  scaleX(1.08); opacity: 0.85; }
  75%     { transform: scaleY(1.2)  scaleX(0.95); opacity: 1; }
}
.flame { animation: flameFlicker 0.18s ease-in-out infinite; transform-origin: top center; }

/* ==========================================================
   Brand-mark style mascot (oscuro / claro themes)
   Portado de ZaeVoiceAgent: levitación + propulsores azules + ascuas.
   ========================================================== */
.brand-mark {
  width: 132px; height: 132px; position: relative; flex-shrink: 0; z-index: 5;
}
.brand-mark.active { animation: levitate 3.2s ease-in-out infinite; }
.brand-mark.idle   { animation: none; }
/* Glow perfilado al contorno (drop-shadow apilado), no radial */
.brand-mark img {
  position: relative; z-index: 2; display: block;
  width: 132px !important; height: 132px !important;
  object-fit: contain;
  filter:
    drop-shadow(0 0 3px  rgba(34, 227, 255, 0.48))
    drop-shadow(0 0 7px  rgba(34, 200, 255, 0.33))
    drop-shadow(0 0 15px rgba(34, 200, 255, 0.18));
  transition: filter 0.3s ease;
}
.brand-mark.idle img:not([class*="glow-"]) { filter: none; }

/* Variante mini (chips por instancia) — casilla VERTICAL 96x133 (proporcion
   del PNG 0.72, sin aire lateral). Reduccion -30% vs el ancho previo (~137px).
   Propulsores/ascuas escalados y reposicionados a la nueva casilla. */
.brand-mark.sm { width: 96px; height: 133px; }
.brand-mark.sm img { width: 96px !important; height: 133px !important; }
.brand-mark.sm .thruster { width: 10.3px; height: 13.46px; bottom: 5px; }
.brand-mark.sm .thruster.left  { left: 29px; }
.brand-mark.sm .thruster.right { right: 37px; }
/* Ajuste fino por marca (los pies caen en distinta X segun el PNG) */
.brand-mark.sm.tomzabot .thruster.left  { left: 28px;  transform: translate(53%, 45%) rotate(-5deg); }
.brand-mark.sm.tomzabot .thruster.right { right: 38px; transform: translate(35%, 45%) rotate(-5deg); }
/* Unibot: izquierdo + derecho corridos y propulsores girados 10° al otro lado (-15 -> -5) */
.brand-mark.sm.unibot   .thruster.left  { left: 29px;  transform: translate(53%, 45%) rotate(-5deg); }
.brand-mark.sm.unibot   .thruster.right { right: 38px; transform: translate(35%, 45%) rotate(-5deg); }
/* SOLO en el slide spotlight: bajar los propulsores de Tomzabot ~15% (≈20px en coords del mascota) */
.spotlight-expand .brand-mark.sm.tomzabot .thruster { bottom: 0px; }
.brand-mark.sm .ember { width: 4px; height: 4px; bottom: 0px; }

/* ===== Tomzabot: propulsores y brillo AMARILLOS (contraste vs Unibot azul) ===== */
.brand-mark.tomzabot img {
  filter:
    drop-shadow(0 0 3px  rgba(253,224,71,0.48))
    drop-shadow(0 0 7px  rgba(245,158,11,0.33))
    drop-shadow(0 0 15px rgba(245,158,11,0.18));
}
.brand-mark.tomzabot .flame {
  background: radial-gradient(ellipse at 50% 10%,
    #ffffff 0%, #fff8c2 18%, #fde047 38%, #f59e0b 60%, #b45309 82%, transparent 100%);
  box-shadow: 0 0 14px rgba(250,204,21,0.85), 0 0 28px rgba(217,119,6,0.55);
}
.brand-mark.tomzabot .flame.inner {
  background: radial-gradient(ellipse at 50% 10%,
    #ffffff 0%, #ffffff 22%, #fff7a8 50%, #fcd34d 80%, transparent 100%);
}
.brand-mark.tomzabot .ember { background: #fde047; box-shadow: 0 0 6px #f59e0b; }

/* ===== Servibot: propulsores y brillo VERDES ===== — Eduardo Luna · 2026 */
.brand-mark.servibot img {
  filter:
    drop-shadow(0 0 3px  rgba(74,222,128,0.48))
    drop-shadow(0 0 7px  rgba(34,197,94,0.33))
    drop-shadow(0 0 15px rgba(34,197,94,0.18));
}
.brand-mark.servibot .flame {
  background: radial-gradient(ellipse at 50% 10%,
    #ffffff 0%, #d9fbe4 18%, #4ade80 38%, #22c55e 60%, #15803d 82%, transparent 100%);
  box-shadow: 0 0 14px rgba(74,222,128,0.85), 0 0 28px rgba(22,163,74,0.55);
}
.brand-mark.servibot .flame.inner {
  background: radial-gradient(ellipse at 50% 10%,
    #ffffff 0%, #ffffff 22%, #ccfbd8 50%, #6ee7a0 80%, transparent 100%);
}
.brand-mark.servibot .ember { background: #4ade80; box-shadow: 0 0 6px #22c55e; }
.brand-mark.sm.servibot .thruster.left  { left: 29px; transform: translate(53%, 45%) rotate(-5deg); }
.brand-mark.sm.servibot .thruster.right { right: 38px; transform: translate(35%, 45%) rotate(-5deg); }

/* ===== Automatico (4ta marca, arte pendiente): reusa geometria de unibot ===== */
.brand-mark.sm.automatico .thruster.left  { left: 29px; transform: translate(53%, 45%) rotate(-5deg); }
.brand-mark.sm.automatico .thruster.right { right: 38px; transform: translate(35%, 45%) rotate(-5deg); }

@keyframes levitate-sm {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.brand-mark.sm.active { animation: levitate-sm 3.2s ease-in-out infinite; }

/* =========================================================================
   POSICION ORIGEN (0,0) de las flamas — referencia para futuros ajustes
   default: left/right thrusters con altura 42px, anclados a left:49 / right:46
            translates: left(53%,45%) | right(35%,45%) | rotate -15deg ambos
   sm: 32px alto, anclados a left:41 / right:38 — mismos translates/rotate
   ========================================================================= */
.brand-mark .thruster {
  position: absolute; bottom: 4px; width: 18px; height: 42px; z-index: 1;
  pointer-events: none; transform-origin: 50% 0%;
  filter: blur(0.4px); opacity: 0; transition: opacity 0.25s ease;
  transform: translate(45%, 45%) rotate(-15deg);
}
.brand-mark.active .thruster { opacity: 1; }
.brand-mark .thruster.left  { left: 49px; transform: translate(53%, 45%) rotate(-15deg); }
.brand-mark .thruster.right { right: 46px; transform: translate(35%, 45%) rotate(-15deg); }

/* --- Estado error: flamas cortas y anaranjadas/amarillas (chispas de fallo) --- */
.brand-mark .thruster.fx-error { height: 13px; opacity: 1 !important; } /* 30% de 42 */
.brand-mark.sm .thruster.fx-error { height: 10px; } /* 30% de 32 */
.brand-mark .thruster.fx-error .flame {
  background: radial-gradient(ellipse at 50% 10%,
    #ffffff 0%, #fff5a8 18%, #ffd147 38%, #ff8a1a 60%, #c8421a 82%, transparent 100%);
  box-shadow: 0 0 14px rgba(255,170,40,0.85), 0 0 28px rgba(255,90,0,0.55);
}
.brand-mark .thruster.fx-error .flame.inner {
  background: radial-gradient(ellipse at 50% 10%,
    #ffffff 0%, #ffffff 22%, #fff0a0 50%, #ffb84d 80%, transparent 100%);
}

/* --- Estado repair: flamas NARANJAS (ambos bots; gana en especificidad
       sobre el amarillo de .brand-mark.tomzabot) --- */
.brand-mark .thruster.fx-repair .flame {
  background: radial-gradient(ellipse at 50% 10%,
    #ffffff 0%, #ffe0b2 18%, #ffb74d 38%, #ff8c1a 60%, #c2410c 82%, transparent 100%);
  box-shadow: 0 0 14px rgba(255,140,26,0.85), 0 0 28px rgba(194,65,12,0.55);
}
.brand-mark .thruster.fx-repair .flame.inner {
  background: radial-gradient(ellipse at 50% 10%,
    #ffffff 0%, #ffffff 22%, #ffe0b0 50%, #ffb74d 80%, transparent 100%);
}

.brand-mark .flame {
  position: absolute; inset: 0;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: radial-gradient(ellipse at 50% 10%,
    #ffffff 0%, #d6f4ff 18%, #6cdcff 38%, #2aa8ff 60%, #0a4cff 82%, transparent 100%);
  box-shadow: 0 0 14px rgba(42, 168, 255, 0.85), 0 0 28px rgba(10, 76, 255, 0.55);
  transform-origin: 50% 0%;
  animation: brand-flame-flicker 0.18s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.brand-mark .flame.inner {
  inset: 4px 3px 8px 3px;
  background: radial-gradient(ellipse at 50% 10%,
    #ffffff 0%, #ffffff 22%, #b8eaff 50%, #4cc4ff 80%, transparent 100%);
  animation-duration: 0.12s; animation-delay: 0.06s; opacity: 0.95;
  mix-blend-mode: screen;
}
.brand-mark .thruster.right .flame { animation-delay: 0.08s; }
.brand-mark .thruster.right .flame.inner { animation-delay: 0.14s; }

.brand-mark .ember {
  position: absolute; left: 50%; bottom: -2px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #6cdcff; box-shadow: 0 0 6px #2aa8ff; opacity: 0;
}
.brand-mark.active .ember { animation: ember-fall 0.9s linear infinite; }
.brand-mark .ember.e2 { animation-delay: 0.3s; left: 30%; }
.brand-mark .ember.e3 { animation-delay: 0.6s; left: 70%; }

@keyframes levitate {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes brand-flame-flicker {
  0%   { transform: scaleY(0.92) scaleX(1.05); opacity: 0.92; }
  100% { transform: scaleY(1.15) scaleX(0.9);  opacity: 1;    }
}
@keyframes ember-fall {
  0%   { transform: translate(-50%, 0) scale(1);   opacity: 1; }
  100% { transform: translate(-50%, 28px) scale(0.2); opacity: 0; }
}

/* Waveform bars baseline */
.wf-bar { transition: height 180ms ease-in-out; }

/* Focus ring softening */
*:focus { outline: none; }
*:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Scrollbar (subtle) */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.6); }

/* Donut hover lift */
.recharts-pie-sector { transition: transform .25s ease; transform-origin: 50% 50%; }

/* Reset list */
ul, ol { list-style: none; padding: 0; margin: 0; }