/* ===========================================================================
   UniBot Monitor — centro de control de flota
   Base: handoff Claude Design (tema Oscuro Marino). Colores de superficie
   refactorizados a variables para soportar 3 temas (oscuro/claro/rojo).
   =========================================================================== */

/* ---------- tema OSCURO MARINO (default, = handoff) ---------- */
:root{
  --navy-0:#050d1f; --navy-1:#0a1730; --navy-2:#102043; --navy-3:#16294f;
  --line:rgba(120,170,255,.13); --line-strong:rgba(120,180,255,.30);
  --text:#eaf2ff; --muted:#8ba3cc; --muted-2:#62759b;
  --cyan:#19d6ef; --canary:#ffd23d;
  --st-online:#34e0a1; --st-online-g:rgba(52,224,161,.5);
  --st-call:var(--cyan); --st-call-g:rgba(25,214,239,.5);
  --st-repair:#ffd23d; --st-repair-g:rgba(255,210,61,.5);
  --st-off:#6b7c9e; --st-off-g:rgba(107,124,158,.4);
  --st-broken:#ff5a6a; --st-broken-g:rgba(255,90,106,.5);
  /* estados de falla nuevos (contrato) — Eduardo Luna · 2026 */
  --st-ia:#a855f7; --st-ia-g:rgba(168,85,247,.5);
  --st-voz:#ec4899; --st-voz-g:rgba(236,72,153,.5);
  --st-login:#f97316; --st-login-g:rgba(249,115,22,.5);
  /* ADVERTENCIA de saldo: misma familia rosa que "voz sin saldo" pero un tono
     más claro — mismo proveedor, gravedad distinta. — Eduardo Luna · 2026 */
  --st-voz-bajo:#f472b6; --st-voz-bajo-g:rgba(244,114,182,.5);

  /* superficies themeables */
  --page-glow:
    radial-gradient(900px 460px at 18% -8%, rgba(25,214,239,.16), transparent 70%),
    radial-gradient(820px 520px at 100% 0%, rgba(40,90,200,.18), transparent 65%),
    linear-gradient(180deg,#06122a 0%, #050d1f 60%, #04091a 100%);
  --grid-opacity:.5;
  --panel-bg:linear-gradient(180deg,rgba(16,32,67,.9),rgba(10,23,48,.8));
  --header-text:var(--text);
  --card-bg:linear-gradient(180deg,rgba(15,30,62,.92),rgba(9,20,43,.92));
  --chip-bg:linear-gradient(180deg,rgba(16,32,67,.7),rgba(10,23,48,.55));
  --soft:rgba(255,255,255,.03);
  --track:rgba(255,255,255,.08);
  --ring-track:rgba(255,255,255,.07);
  --card-shadow:0 22px 50px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.015) inset;
  --panel-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 50px -30px rgba(0,0,0,.8);

  --font-ui:'Space Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:20px; --gap:16px; --card-min:360px; --bot-w:178px; --bot-h:247px;
  --metric-fs:15px; --metric-pad:8px 6px; --metric-kfs:8.5px;
}
html[data-density="compact"]{ --pad:13px; --gap:11px; --card-min:300px; --bot-w:130px; --bot-h:180px; --metric-fs:13px; --metric-pad:7px 3px; --metric-kfs:8px; }
html[data-density="comfy"]{ --pad:26px; --gap:22px; --card-min:440px; --bot-w:210px; --bot-h:292px; --metric-fs:16px; --metric-pad:9px 8px; --metric-kfs:9px; }

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font-ui);
  background:var(--navy-0); color:var(--text);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .35s, color .35s;
}
#root{ min-height:100%; }
img{ display:block; }

/* ---------- fondo ---------- */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--grid-opacity);
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 85%);
}
.bg-glow{ position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--page-glow); }
/* header topado hasta el borde superior (sin padding arriba) — Eduardo Luna · 2026 */
.app{ position:relative; z-index:1; display:flex; flex-direction:column;
  height:100vh; padding:0 var(--pad) var(--pad); gap:var(--gap); overflow:hidden; }

/* header + gradiente como una unidad PEGADA (sin separación) — Eduardo Luna · 2026 */
.header-wrap{ display:flex; flex-direction:column; flex:0 0 auto; }

/* ---------- franja de acento animada bajo el header (como Unibot Dashboard) — Eduardo Luna · 2026 ----------
   pegada al header (vive dentro de .header-wrap, sin gap); SIN glow, solo una sombra discreta por debajo. */
.grad-bar{ height:10px; min-height:10px; flex:0 0 auto; position:relative; z-index:3;
  margin:0 calc(-1 * var(--pad));
  background:linear-gradient(90deg,#19d6ef,#2563eb,#a855f7,#ffd23d,#2ee86e,#19d6ef);
  background-size:300% 100%; animation:gradslide 7s linear infinite;
  box-shadow:0 3px 6px -2px rgba(0,0,0,.35); }
@keyframes gradslide{ from{ background-position:0% 0; } to{ background-position:300% 0; } }

/* ---------- topbar ---------- */
/* header como banda a todo el ancho, topada al borde superior — Eduardo Luna · 2026 */
.topbar{
  display:flex; align-items:stretch; gap:var(--gap);
  background:var(--panel-bg);
  border:1px solid var(--line); border-top:0; border-left:0; border-right:0; border-radius:0;
  margin:0 calc(-1 * var(--pad));
  padding:14px 26px; backdrop-filter:blur(6px); color:var(--header-text);
  box-shadow:var(--panel-shadow);
}
.brand{ display:flex; align-items:center; gap:14px; padding-right:6px; }
.logo{ height:61px; width:auto; opacity:.96; filter:drop-shadow(0 0 14px rgba(25,214,239,.25)); }
.brand-div{ width:1px; align-self:stretch; background:var(--line-strong); margin:2px 0; }
.brand-title{ font-weight:700; letter-spacing:.16em; font-size:18px; line-height:1; }
.brand-title span{ color:var(--cyan); }
.brand-sub{ font-size:10.5px; letter-spacing:.22em; color:var(--muted); margin-top:6px; text-transform:uppercase; }

.hud{ display:flex; align-items:center; gap:6px; margin-left:auto; flex-wrap:wrap; }
.hud-stat{ padding:6px 16px; border-left:1px solid var(--line); min-width:84px; }
.hud-k{ font-size:9.5px; letter-spacing:.18em; color:var(--muted-2); font-weight:600; }
.hud-v{ font-family:var(--mono); font-size:24px; font-weight:600; line-height:1.1; margin-top:3px;
  font-variant-numeric:tabular-nums; }
.hud-sub{ font-size:9.5px; color:var(--muted); letter-spacing:.06em; margin-top:1px; }
.tone-online .hud-v{ color:var(--st-online); }
.tone-call .hud-v{ color:var(--st-call); }
.tone-repair .hud-v{ color:var(--st-repair); }
.tone-broken .hud-v{ color:var(--st-broken); }
.tone-muted .hud-v{ color:var(--muted); }

.health{ display:flex; align-items:center; gap:10px; padding-left:18px; border-left:1px solid var(--line); }
.health-ring{ --p:0; width:54px; height:54px; border-radius:50%;
  background:conic-gradient(var(--st-online) calc(var(--p)*1%), var(--ring-track) 0);
  display:grid; place-items:center; position:relative; }
.health-ring::after{ content:''; position:absolute; inset:5px; border-radius:50%; background:var(--navy-1);
  box-shadow:0 0 18px rgba(52,224,161,.25) inset; }
.health-ring span{ position:relative; z-index:1; font-family:var(--mono); font-weight:600; font-size:16px; color:var(--text); }
.health-ring span i{ font-style:normal; font-size:9px; color:var(--muted); }
.health-lbl{ font-size:9px; letter-spacing:.16em; color:var(--muted); font-weight:600; line-height:1.35; }

/* grupo de controles (tema + densidad) */
.ctrl-group{ display:flex; align-items:center; gap:10px; padding-left:18px; border-left:1px solid var(--line); }
.dens-btn{ width:26px; height:26px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--soft); color:var(--text); font-family:var(--mono); font-size:12px; font-weight:600;
  cursor:pointer; padding:0; transition:transform .15s, border-color .2s; }
.dens-btn:hover{ transform:translateY(-1px); border-color:var(--cyan); }
html[data-theme="rojo"] .dens-btn{ color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.12); }

/* selector de tema: UN solo botón que cicla e intercambia el icono (luna/sol/estrella) — Eduardo Luna · 2026 */
.theme-cycle{ width:26px; height:26px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--soft); color:#fff; cursor:pointer; padding:0;
  display:grid; place-items:center; transition:transform .15s, border-color .2s; }
.theme-cycle:hover{ transform:translateY(-1px); border-color:var(--cyan); }
.theme-cycle svg{ width:16px; height:16px; display:block; }
/* iconos SIEMPRE blancos en los 3 temas — Eduardo Luna · 2026 */
.theme-cycle.t-oscuro,
.theme-cycle.t-claro,
.theme-cycle.t-rojo{ color:#fff; }
/* tema claro: fondo oscuro para que el icono blanco se vea sobre el header claro */
html[data-theme="claro"] .theme-cycle{ background:rgba(13,27,42,.60); border-color:rgba(13,27,42,.35); }

.clock{ text-align:right; padding-left:18px; border-left:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center; min-width:118px; }
.clock-live{ display:flex; align-items:center; justify-content:flex-end; gap:6px;
  font-size:9.5px; letter-spacing:.22em; color:var(--st-broken); font-weight:600; }
.clock-live.is-stale{ color:var(--st-repair); }
.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--st-broken);
  box-shadow:0 0 9px var(--st-broken); animation:blink 1.4s infinite; }
.clock-live.is-stale .dot-live{ background:var(--st-repair); box-shadow:0 0 9px var(--st-repair); }
.clock-time{ font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; margin-top:2px; }
.clock-date{ font-size:10px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }

/* ---------- escenario: rail + flota — Eduardo Luna · 2026 ----------
   Por defecto (2/3/otros) apilado en columna, como siempre. En la VISTA DE 4 bots pasa a
   fila: los 5 chips de estado se van a una COLUMNA IZQUIERDA (sidebar) y la flota queda
   en mosaico 2×2 a la derecha, dando prioridad a los PNG grandes de las mascotas. */
.stage{ display:flex; flex-direction:column; gap:var(--gap); flex:1 1 auto; min-height:0; }
.stage[data-count="4"]{ flex-direction:row; align-items:stretch; }
.stage[data-count="4"] > .rail{
  flex:0 0 200px; align-self:stretch;        /* más angosto — Eduardo Luna · 2026 */
  grid-template-columns:1fr;                 /* pila vertical de los 5 chips */
  grid-template-rows:repeat(5, 1fr);         /* los 5 chips abarcan TODO el alto (= 2 bots en columna) */
  align-content:stretch;
}
.stage[data-count="4"] > .fleet{ flex:1 1 auto; min-width:0; }
/* chips angostos: PNG arriba y letras/indicadores DEBAJO, centrados; llenan la columna */
.stage[data-count="4"] > .rail .chip{ flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:9px; padding:12px 10px; min-height:0; }
.stage[data-count="4"] > .rail .chip-orb,
.stage[data-count="4"] > .rail .chip-orb img{ width:72px; height:72px; }
.stage[data-count="4"] > .rail .chip-body{ width:100%; min-width:0; }
.stage[data-count="4"] > .rail .chip-top{ justify-content:center; }
.stage[data-count="4"] > .rail .chip-label{ font-size:10.5px; letter-spacing:.05em; }
.stage[data-count="4"] > .rail .chip-num{ font-size:24px; margin:3px 0 6px; }
.stage[data-count="4"] > .rail .chip-pct{ display:none; }

/* ---------- rail de chips ---------- */
.rail{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:var(--gap); }
.chip{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--chip-bg);
  border:1px solid var(--line); border-radius:13px; position:relative; overflow:hidden;
  transition:border-color .3s, transform .2s;
}
.chip::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c,var(--cyan)); opacity:.85; }
.chip.is-empty{ opacity:.5; }
.chip.is-on{ border-color:color-mix(in srgb, var(--c) 35%, var(--line)); }
.chip-orb{ position:relative; width:104px; height:104px; flex:0 0 auto; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, color-mix(in srgb,var(--c) 30%, transparent), transparent 70%);
  display:grid; place-items:center; overflow:visible; }
/* mismo glow que las tarjetas: 2 capas del color de estado (--c), radio reducido y opacidad baja */
.chip-orb img{ width:104px; height:104px; object-fit:contain; object-position:bottom;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))
         drop-shadow(0 0 9px color-mix(in srgb,var(--c) 60%, transparent))
         drop-shadow(0 0 18px color-mix(in srgb,var(--c) 60%, transparent));
  position:relative; z-index:1; }
/* off y descompuesto: sin glow de color (igual que las tarjetas) */
.chip-off .chip-orb img, .chip-broken .chip-orb img{ filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.chip-pulse{ position:absolute; inset:10px; border-radius:50%; border:1.5px solid var(--c); opacity:0; }
.chip.is-on .chip-pulse{ animation:pulse 2.4s ease-out infinite; }
.chip-body{ flex:1; min-width:0; }
.chip-top{ display:flex; align-items:center; gap:7px; }
.chip-dot{ width:7px; height:7px; border-radius:50%; box-shadow:0 0 8px var(--c); }
.chip-label{ font-size:11px; letter-spacing:.1em; color:var(--muted); font-weight:600; text-transform:uppercase; white-space:nowrap; }
.chip-num{ font-family:var(--mono); font-size:30px; font-weight:600; line-height:1.05; margin:2px 0 6px; font-variant-numeric:tabular-nums; }
.chip-bar{ height:4px; border-radius:3px; background:var(--track); overflow:hidden; }
.chip-bar i{ display:block; height:100%; border-radius:3px; transition:width .5s ease; }
.chip-pct{ font-size:9.5px; letter-spacing:.06em; color:var(--muted-2); margin-top:5px; }

/* ---------- grilla de flota ---------- */
.fleet{ display:grid; gap:var(--gap); flex:1 1 auto; min-height:0; align-content:stretch;
  grid-template-columns:repeat(auto-fill, minmax(var(--card-min),1fr)); grid-auto-rows:minmax(0,1fr); }
/* con 2 instancias: mascota al 150% (sin zoom de card) */
.fleet[data-count="2"]{ --bot-w:267px; --bot-h:370px; }
/* con 2 instancias: fuentes al 150% (×1.5) en las zonas de texto */
.fleet[data-count="2"] .card-head,
.fleet[data-count="2"] .bot-data,
.fleet[data-count="2"] .card-foot{ zoom:1.5; }
/* — Eduardo Luna · 2026 — vista de 3: la mascota domina la tarjeta (horizontal) */
.fleet[data-count="3"]{ --bot-w:330px; --bot-h:458px; }       /* mascota grande (+10%), mayoría del ancho */
/* texto/datos al 125% en sus zonas (la mascota no se toca) */
.fleet[data-count="3"] .card-head,
.fleet[data-count="3"] .bot-data,
.fleet[data-count="3"] .card-foot{ zoom:1.25; }
/* la columna de datos se queda con el resto del ancho y respira en 2 col de métricas */
.fleet[data-count="3"] .metrics{ grid-template-columns:repeat(2,1fr); }
/* — Eduardo Luna · 2026 — VISTA DE 4 bots (sidebar): mascota a la IZQUIERDA ocupando TODO el
   alto de la tarjeta; nombre/# y datos a la DERECHA. Grid con display:contents sobre .card-body
   para izar mascota y datos como celdas de la tarjeta (propulsores conservan su geometría). */
/* PNG al 100% del alto de la tarjeta (ambas marcas): --bot-w se deriva del ALTO del chip
   vía container query (cqh), así llena el 100% en cualquier resolución — Eduardo Luna · 2026 */
.fleet[data-count="4"]{ --bot-w:min(72cqh, 46cqw); --bot-h:calc(var(--bot-w) * 1.388); }
.fleet[data-count="4"] .card{
  container-type:size;
  display:grid; column-gap:16px; align-items:stretch; padding:14px 18px;
  grid-template-columns:auto minmax(0,1fr);   /* col mascota = ancho del bot-stage (var(--bot-w)) */
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"mascot head" "mascot data";
}
.fleet[data-count="4"] .card-body{ display:contents; }
.fleet[data-count="4"] .card-head{ grid-area:head; margin:0; align-items:center; }
.fleet[data-count="4"] .bot-stage{ grid-area:mascot; align-self:center; justify-self:center; }
.fleet[data-count="4"] .bot-data{ grid-area:data; min-height:0; }
.fleet[data-count="4"] .card-foot{ display:none; }        /* prioridad al PNG */
/* nombre/#/datos legibles en tarjetas grandes (la mascota NO se toca) */
.fleet[data-count="4"] .card-head,
.fleet[data-count="4"] .bot-data{ zoom:1.18; }
.fleet[data-count="4"] .metrics{ grid-template-columns:repeat(4,1fr); }
.fleet-empty{ grid-column:1/-1; display:grid; place-items:center; color:var(--muted);
  font-size:14px; letter-spacing:.04em; }

.card{
  position:relative; border-radius:15px; padding:16px;
  display:flex; flex-direction:column; min-height:0;
  background:var(--card-bg);
  border:1px solid var(--line);
  box-shadow:var(--card-shadow);
  transition:border-color .35s, box-shadow .35s, transform .25s;
}
.card::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--c), transparent 78%); border-radius:15px 15px 0 0; opacity:.9; }
.card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--c) 40%,var(--line));
  box-shadow:0 28px 60px -30px rgba(0,0,0,.95), 0 0 30px -14px var(--g); }
.card-broken{ border-color:color-mix(in srgb,var(--st-broken) 45%,var(--line)); animation:alertborder 1.6s infinite; }

.card-bracket{ position:absolute; width:12px; height:12px; border:1.5px solid var(--c); opacity:.5; }
.card-bracket.tl{ top:8px; left:8px; border-right:0; border-bottom:0; }
.card-bracket.tr{ top:8px; right:8px; border-left:0; border-bottom:0; }
.card-bracket.bl{ bottom:8px; left:8px; border-right:0; border-top:0; }
.card-bracket.br{ bottom:8px; right:8px; border-left:0; border-top:0; }

.card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:4px; }
.card-id{ display:flex; flex-direction:column; min-width:0; }
.card-idnum{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--cyan); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.card-name{ font-size:19px; font-weight:600; letter-spacing:.01em; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:20px;
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  background:color-mix(in srgb,var(--c) 14%, transparent); color:var(--c);
  border:1px solid color-mix(in srgb,var(--c) 40%, transparent); }
.badge-dot{ width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 8px var(--c); }
.badge-call .badge-dot,.badge-online .badge-dot{ animation:blink 1.5s infinite; }

.card-body{ display:flex; gap:16px; margin-top:12px; flex:1 1 auto; min-height:0; }
.bot-stage{ position:relative; width:var(--bot-w); height:var(--bot-h); flex:0 0 auto; align-self:center;
  overflow:visible; }
/* halo radial retirado: el brillo ahora vive como drop-shadow sobre la mascota (no radial) */
.bot-halo{ display:none; }
.bot-floor{ position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:72%; height:12px; border-radius:50%; background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); }
/* envoltorio que levita: imagen + propulsores + ascuas se mueven juntos (antibrinco §5) */
.bot-rise{ position:absolute; inset:0; display:grid; place-items:center; }
.bot-stage.active .bot-rise{ animation:float 3.2s ease-in-out infinite; }
/* glow NO radial: drop-shadow del color de estado (--gm). Radio reducido 50%;
   la opacidad/saturación se controla en el alpha de --gm (componentes). */
.bot-img{ position:relative; z-index:1; width:var(--bot-w); height:var(--bot-h); object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))
         drop-shadow(0 0 calc(var(--bot-w) * 0.088) var(--gm, transparent))
         drop-shadow(0 0 calc(var(--bot-w) * 0.176) var(--gm, transparent)); }
/* ajuste vertical del PNG por marca (los estados en llamada conservan su ajuste por mayor especificidad) — Eduardo Luna · 2026 */
.bot-stage.unibot .bot-img{ transform:translateY(1%); }     /* unibot BAJA 1% */
.bot-stage.tomzabot .bot-img{ transform:translateY(-1%); }  /* tomzabot SUBE 1% */

/* ajustes finos del PNG en llamada por marca — Eduardo Luna · 2026 */
/* unibot en llamada: 10% más grande, subido 8% y bajado 30px */
.card-call .bot-stage.unibot .bot-img{ transform:scale(1.1) translateY(calc(-8% + 30px)); }
/* tomzabot en llamada: 0.9 + 5% = 0.945 */
.card-call .bot-stage.tomzabot .bot-img{ transform:scale(0.945); }

/* ---- propulsores (thrusters) ---- */
.thruster{ position:absolute; bottom:calc(var(--bot-w) * -0.006); z-index:0; pointer-events:none; opacity:0;
  width:calc(var(--bot-w) * 0.092); height:calc(var(--bot-w) * 0.126); }  /* subidos 3%; -20% ancho, -30% alto */
.bot-stage.active .thruster{ opacity:1; }
.thruster.left{ left:36.7%; }   /* -1% a la izquierda (antes 37.7%) */
.thruster.right{ right:35.7%; }
.flame{ position:absolute; inset:0; transform-origin:center top;
  border-radius:50% 50% 46% 46% / 36% 36% 100% 100%;
  background:linear-gradient(to bottom, #d6f4ff 0%, #6cdcff 30%, #2aa8ff 62%, rgba(10,76,255,0) 100%);
  filter:blur(.3px); animation:flameFlick .18s ease-in-out infinite alternate; }
.flame.inner{ inset:22% 26% 14% 26%;
  background:linear-gradient(to bottom, #ffffff 0%, #dff7ff 45%, rgba(255,255,255,0) 100%);
  animation-duration:.12s; animation-delay:.06s; }
.thruster.right .flame{ animation-delay:.08s; }
.thruster.right .flame.inner{ animation-delay:.14s; }
/* solo tomzabot: propulsores 1% + 5px más arriba — Eduardo Luna · 2026 */
.bot-stage.tomzabot .thruster{ bottom:calc(var(--bot-w) * 0.004 + 5px); }
/* solo tomzabot: propulsor izquierdo 3px a la izquierda (base .thruster.left = 36.7%) */
.bot-stage.tomzabot .thruster.left{ left:calc(36.7% - 3px); }
/* tomzabot → flama amarilla */
.bot-stage.tomzabot .flame{ background:linear-gradient(to bottom, #fff8c2 0%, #fde047 32%, #f59e0b 64%, rgba(180,83,9,0) 100%); }
.bot-stage.tomzabot .flame.inner{ background:linear-gradient(to bottom, #ffffff 0%, #fff3b0 45%, rgba(255,243,176,0) 100%); }
/* servibot → flama VERDE — Eduardo Luna · 2026 */
.bot-stage.servibot .flame{ background:linear-gradient(to bottom, #d8ffe3 0%, #4ade80 32%, #16a34a 64%, rgba(21,128,61,0) 100%); }
.bot-stage.servibot .flame.inner{ background:linear-gradient(to bottom, #ffffff 0%, #dcfce7 45%, rgba(220,252,231,0) 100%); }
/* solo servibot: propulsores 20px a la derecha y rotados -20°; ajuste fino por lado — Eduardo Luna · 2026 */
.bot-stage.servibot .thruster{ transform:translateX(20px) rotate(-20deg); }
.bot-stage.servibot .thruster.left{ transform:translateX(20px) translateY(3px) rotate(-15deg); }   /* izq: 3px abajo, -15° */
.bot-stage.servibot .thruster.right{ transform:translateX(25px) rotate(-15deg); }                  /* der: +5px derecha, -15° */
/* automatico: los chorros de su arte están más abiertos y terminan más arriba que los
   de unibot (medido: centros 39.1% / 61.2%, el dibujo acaba en ~93.3% del alto contra
   97.5% en unibot), así que los propulsores se abren y se suben. — Eduardo Luna · 2026 */
.bot-stage.automatico .thruster{ bottom:calc(var(--bot-w) * 0.052); }
.bot-stage.automatico .thruster.left{ left:34.5%; }
.bot-stage.automatico .thruster.right{ right:34.2%; }
/* automatico → flama naranja-roja (su arte es tricolor con propulsión naranja) — Eduardo Luna · 2026 */
.bot-stage.automatico .flame{ background:linear-gradient(to bottom, #ffe3c2 0%, #ffab5e 30%, #ff5f2e 62%, rgba(190,45,15,0) 100%); }
.bot-stage.automatico .flame.inner{ background:linear-gradient(to bottom, #ffffff 0%, #ffe9d1 45%, rgba(255,233,209,0) 100%); }
/* repair (ambas marcas) → flama naranja, gana por especificidad */
.thruster.fx-repair .flame{ background:linear-gradient(to bottom, #ffe0b2 0%, #ffb74d 32%, #ff8c1a 64%, rgba(194,65,15,0) 100%); }
.thruster.fx-repair .flame.inner{ background:linear-gradient(to bottom, #ffffff 0%, #ffe6c2 45%, rgba(255,230,194,0) 100%); }

/* ---- ascuas (embers): AL FRENTE (z-index 3). CAEN de forma ETÉREA y ALEATORIA — cada una con
       su columna (left), su arco (--dx), su velocidad (--dur) y su ritmo (--del) propios, para
       que NO se vea una fila uniforme (nada de "disparos") — Eduardo Luna · 2026 ---- */
.ember{ position:absolute; z-index:3; top:0; opacity:0; border-radius:50%;
  width:calc(var(--bot-w) * 0.028); height:calc(var(--bot-w) * 0.028);
  background:#6cdcff; box-shadow:0 0 7px #2aa8ff; }
.bot-stage.active .ember{ animation:emberFall var(--dur,3s) linear var(--del,0s) infinite; }
.ember.e1{ left:20%; --dx: 26px; --dur:3.3s; --del:-.4s; }
.ember.e2{ left:36%; --dx:-30px; --dur:2.6s; --del:-1.9s; }
.ember.e3{ left:50%; --dx: 18px; --dur:3.7s; --del:-3.0s; }
.ember.e4{ left:64%; --dx:-22px; --dur:2.9s; --del:-1.2s; }
.ember.e5{ left:80%; --dx: 30px; --dur:3.4s; --del:-2.3s; }
.ember.e6{ left:45%; --dx:-16px; --dur:2.4s; --del:-.9s; }
.bot-stage.tomzabot .ember{ background:#fde047; box-shadow:0 0 7px #f59e0b; }
.bot-stage.servibot .ember{ background:#4ade80; box-shadow:0 0 7px #16a34a; }
.bot-stage.automatico .ember{ background:#ffab5e; box-shadow:0 0 7px #ff5f2e; }  /* — Eduardo Luna · 2026 */

.bot-model{ position:absolute; top:0; left:0; z-index:2; font-family:var(--mono); font-size:8.5px; letter-spacing:.14em;
  color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:2px 6px; background:var(--soft); }

.bot-data{ flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.dline{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-bottom:8px; border-bottom:1px solid var(--line); }
.dk{ font-size:10px; letter-spacing:.12em; color:var(--muted-2); text-transform:uppercase; font-weight:600; flex:0 0 auto; }
.dv{ font-size:13px; font-weight:500; text-align:right; min-width:0; }
.dv.ellip{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dv.mono{ font-family:var(--mono); }
.dv.live-num{ color:var(--cyan); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px var(--st-call-g); }
.dv.alert{ color:var(--st-broken); font-size:12px; }
.dv.warn{ color:var(--st-repair); font-size:12px; }
.dv.ok{ color:var(--st-online); }

/* waveform */
.wave{ display:flex; align-items:flex-end; gap:2px; height:16px; padding:1px 0; opacity:.18; }
.wave.on{ opacity:.7; }
.wave span{ flex:1; min-width:1.5px; border-radius:1px; height:30%; transform-origin:bottom; background:var(--muted); }
.wave.on span{ animation:eq .9s ease-in-out infinite alternate; box-shadow:0 0 5px var(--st-call-g); }

.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:auto; }
html[data-density="compact"] .metrics{ grid-template-columns:repeat(2,1fr); }
.metric{ background:var(--soft); border:1px solid var(--line); border-radius:9px;
  padding:var(--metric-pad); text-align:center; min-width:0; overflow:hidden; }
.metric-v{ font-family:var(--mono); font-size:var(--metric-fs); font-weight:600; font-variant-numeric:tabular-nums; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
/* valores largos (nombres de empresa: "Gas y Servicio", "Gasomatico") — fuente menor para que quepan — Eduardo Luna · 2026 */
.metric-v.long{ font-size:calc(var(--metric-fs) * 0.72); letter-spacing:-.01em; }
.metric-k{ font-size:var(--metric-kfs); letter-spacing:.06em; color:var(--muted-2); margin-top:5px; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.metric.tone-good .metric-v{ color:var(--st-online); }
.metric.tone-mid .metric-v{ color:var(--st-repair); }
.metric.tone-bad .metric-v{ color:var(--st-broken); }

.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:13px;
  padding-top:10px; border-top:1px solid var(--line); }
.foot-act{ display:flex; align-items:center; gap:7px; font-size:10.5px; color:var(--muted); letter-spacing:.04em; }
.foot-dot{ width:6px; height:6px; border-radius:50%; }
.foot-sig{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--cyan); opacity:.7; }

/* ---------- móvil ---------- */
@media(max-width:680px){
  .app{ height:auto; min-height:100vh; overflow:visible; gap:12px; }
  .topbar{ order:0; border-radius:0; }
  .grad-bar{ order:0; margin-top:0; }
  /* en móvil el sidebar vuelve a apilarse: flota arriba, chips abajo (sin columna izquierda) */
  .stage{ flex-direction:column !important; gap:12px; flex:0 0 auto; }
  .stage[data-count="4"] > .rail{ flex:0 0 auto; grid-template-columns:repeat(2,1fr); }
  .stage[data-count="4"] > .rail .chip{ flex-direction:row; justify-content:flex-start; text-align:left; }
  .stage[data-count="4"] > .rail .chip-pct{ display:block; }
  /* en móvil la card de 4 vuelve a apilarse (sin grid mascota|datos) */
  .fleet[data-count="4"] .card{ display:flex; flex-direction:column; }
  .fleet[data-count="4"] .card-body{ display:flex; }
  .fleet{ order:1; grid-template-columns:1fr !important; grid-template-rows:none !important; grid-auto-rows:auto; }
  .rail{ order:2; grid-template-columns:repeat(2,1fr); }
  .topbar{ flex-wrap:wrap; align-items:center; padding:9px 13px; gap:6px 10px; border-radius:12px; }
  .brand{ gap:10px; flex:1 1 auto; min-width:0; }
  .logo{ height:41px; }
  .brand-div, .brand-sub{ display:none; }
  .brand-title{ font-size:14px; letter-spacing:.06em; white-space:nowrap; }
  .health{ display:none; }
  .ctrl-group{ padding-left:0; border-left:0; }
  .clock{ border-left:0; padding-left:0; min-width:0; flex:0 0 auto;
    flex-direction:row; align-items:center; gap:7px; }
  .clock-live{ font-size:0; letter-spacing:0; gap:0; }
  .clock-time{ font-size:17px; }
  .clock-date{ display:none; }
  .hud{ display:flex; order:3; flex:1 0 100%; margin-left:0; gap:0; flex-wrap:nowrap;
    border-top:1px solid var(--line); padding-top:7px; }
  .hud-stat{ flex:1 1 0; min-width:0; padding:1px 6px; text-align:center; }
  .hud-stat:first-child{ border-left:0; }
  .hud-k{ font-size:7.5px; letter-spacing:.1em; }
  .hud-v{ font-size:16px; }
  .hud-sub{ display:none; }
  .metrics{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:430px){
  .card-body{ flex-direction:row; }
  .rail{ grid-template-columns:1fr; }
  .hud-stat{ padding:1px 3px; }
  .hud-v{ font-size:14px; }
}

/* ---------- keyframes ---------- */
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes pulse{ 0%{ transform:scale(.85); opacity:.8; } 100%{ transform:scale(1.5); opacity:0; } }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes eq{ from{ height:18%; } to{ height:95%; } }
@keyframes flameFlick{ 0%{ transform:scaleY(.92) scaleX(1.05); opacity:.9; } 100%{ transform:scaleY(1.16) scaleX(.88); opacity:1; } }
/* ascuas ETÉREAS que SUBEN (abajo→arriba) con un arco lateral suave (deriva --dx propia por
   ascua), encogiéndose y desvaneciéndose; fade-in para que no parpadeen */
@keyframes emberFall{
  0%   { transform:translate(-50%, calc(var(--bot-h) * 0.94)) scale(.85); opacity:0; }
  15%  { opacity:.9; }
  55%  { transform:translate(calc(-50% + var(--dx, 0px)), calc(var(--bot-h) * 0.46)) scale(.5); opacity:.7; }
  100% { transform:translate(-50%, calc(var(--bot-h) * -0.06)) scale(.2); opacity:0; }
}
@keyframes alertborder{ 0%,100%{ box-shadow:0 22px 50px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(255,90,106,.0) inset; } 50%{ box-shadow:0 22px 50px -34px rgba(0,0,0,.9), 0 0 22px -6px var(--st-broken-g); } }

/* ===========================================================================
   TEMA 2 — CLARO MARINO  (spec §6)
   =========================================================================== */
html[data-theme="claro"]{
  --navy-0:#F8FAFC; --navy-1:#FFFFFF; --navy-2:#F1F5F9; --navy-3:#E2E8F0;
  --line:#E2E8F0; --line-strong:#CBD5E1;
  --text:#0D1B2A; --muted:#475569; --muted-2:#64748B;
  --cyan:#06B6D4; --canary:#EAB308;
  --st-online:#16A34A; --st-online-g:rgba(22,163,74,.35);
  --st-call:var(--cyan); --st-call-g:rgba(6,182,212,.35);
  --st-repair:#CA8A04; --st-repair-g:rgba(202,138,4,.35);
  --st-off:#94A3B8; --st-off-g:rgba(148,163,184,.3);
  --st-broken:#DC2626; --st-broken-g:rgba(220,38,38,.35);
  /* estados de falla nuevos (contrato) — Eduardo Luna · 2026 */
  --st-ia:#a855f7; --st-ia-g:rgba(168,85,247,.5);
  --st-voz:#ec4899; --st-voz-g:rgba(236,72,153,.5);
  --st-login:#f97316; --st-login-g:rgba(249,115,22,.5);
  /* ADVERTENCIA de saldo: misma familia rosa que "voz sin saldo" pero un tono
     más claro — mismo proveedor, gravedad distinta. — Eduardo Luna · 2026 */
  --st-voz-bajo:#f472b6; --st-voz-bajo-g:rgba(244,114,182,.5);

  --page-glow:
    radial-gradient(900px 460px at 18% -8%, rgba(6,182,212,.10), transparent 70%),
    radial-gradient(820px 520px at 100% 0%, rgba(13,27,42,.05), transparent 65%),
    linear-gradient(180deg,#FFFFFF 0%, #F8FAFC 60%, #EEF2F7 100%);
  --grid-opacity:.6;
  --panel-bg:#FFFFFF;
  --header-text:var(--text);
  --card-bg:linear-gradient(180deg,#FFFFFF,#FBFDFF);
  --chip-bg:linear-gradient(180deg,#FFFFFF,#F8FAFC);
  --soft:rgba(13,27,42,.035);
  --track:rgba(13,27,42,.08);
  --ring-track:rgba(13,27,42,.08);
  --card-shadow:0 18px 40px -30px rgba(13,27,42,.45), 0 0 0 1px rgba(13,27,42,.02) inset;
  --panel-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 12px 34px -26px rgba(13,27,42,.4);
}
html[data-theme="claro"] .logo{ filter:none; }
html[data-theme="claro"] .bot-floor{ background:radial-gradient(ellipse, rgba(13,27,42,.18), transparent 70%); }
html[data-theme="claro"] .bot-img{ filter:drop-shadow(0 8px 14px rgba(13,27,42,.2)); }
html[data-theme="claro"] .chip-orb img,
html[data-theme="claro"] .card:hover{ filter:none; }

/* ===========================================================================
   TEMA 3 — ROJO CORPORATIVO  (spec §6)
   =========================================================================== */
html[data-theme="rojo"]{
  --navy-0:#FFFFFF; --navy-1:#FFFFFF; --navy-2:#F8FAFC; --navy-3:#F1F5F9;
  --line:#E2E8F0; --line-strong:#E5B5b8;
  --text:#0F172A; --muted:#64748B; --muted-2:#94A3B8;
  --cyan:#CC2129; --canary:#F59E0B;
  --st-online:#16A34A; --st-online-g:rgba(22,163,74,.35);
  --st-call:#0EA5E9; --st-call-g:rgba(14,165,233,.35);
  --st-repair:#EAB308; --st-repair-g:rgba(234,179,8,.35);
  --st-off:#94A3B8; --st-off-g:rgba(148,163,184,.3);
  --st-broken:#DC2626; --st-broken-g:rgba(220,38,38,.35);
  /* estados de falla nuevos (contrato) — Eduardo Luna · 2026 */
  --st-ia:#a855f7; --st-ia-g:rgba(168,85,247,.5);
  --st-voz:#ec4899; --st-voz-g:rgba(236,72,153,.5);
  --st-login:#f97316; --st-login-g:rgba(249,115,22,.5);
  /* ADVERTENCIA de saldo: misma familia rosa que "voz sin saldo" pero un tono
     más claro — mismo proveedor, gravedad distinta. — Eduardo Luna · 2026 */
  --st-voz-bajo:#f472b6; --st-voz-bajo-g:rgba(244,114,182,.5);

  --page-glow:
    radial-gradient(900px 460px at 18% -8%, rgba(204,33,41,.08), transparent 70%),
    radial-gradient(820px 520px at 100% 0%, rgba(248,113,113,.07), transparent 65%),
    linear-gradient(180deg,#FFFFFF 0%, #FFFFFF 60%, #FFF5F5 100%);
  --grid-opacity:.5;
  --panel-bg:linear-gradient(180deg,#CC2129,#B01C23);
  --header-text:#FFFFFF;
  --card-bg:linear-gradient(180deg,#FFFFFF,#FFFBFB);
  --chip-bg:linear-gradient(180deg,#FFFFFF,#F8FAFC);
  --soft:rgba(15,23,42,.035);
  --track:rgba(15,23,42,.08);
  --ring-track:rgba(15,23,42,.08);
  --card-shadow:0 18px 40px -30px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.02) inset;
  --panel-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 34px -26px rgba(204,33,41,.45);
}
/* header rojo: textos y separadores en blanco; ring sobre fondo rojo */
html[data-theme="rojo"] .topbar{ border-color:transparent; }
html[data-theme="rojo"] .brand-title{ color:#FFFFFF; }
html[data-theme="rojo"] .brand-title span{ color:var(--canary); }
html[data-theme="rojo"] .brand-sub,
html[data-theme="rojo"] .hud-k,
html[data-theme="rojo"] .hud-sub,
html[data-theme="rojo"] .clock-date,
html[data-theme="rojo"] .health-lbl{ color:rgba(255,255,255,.78); }
html[data-theme="rojo"] .hud-v{ color:#FFFFFF; }
html[data-theme="rojo"] .hud-stat,
html[data-theme="rojo"] .health,
html[data-theme="rojo"] .clock,
html[data-theme="rojo"] .ctrl-group{ border-left-color:rgba(255,255,255,.22); }
html[data-theme="rojo"] .brand-div{ background:rgba(255,255,255,.4); }
html[data-theme="rojo"] .health-ring{ background:conic-gradient(#FFFFFF calc(var(--p)*1%), rgba(255,255,255,.25) 0); }
html[data-theme="rojo"] .health-ring::after{ background:#CC2129; box-shadow:none; }
html[data-theme="rojo"] .health-ring span{ color:#FFFFFF; }
html[data-theme="rojo"] .health-ring span i{ color:rgba(255,255,255,.7); }
html[data-theme="rojo"] .theme-cycle{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.14); }
html[data-theme="rojo"] .logo{ filter:brightness(0) invert(1); }
html[data-theme="rojo"] .clock-live{ color:var(--canary); }
html[data-theme="rojo"] .clock-live .dot-live{ background:var(--canary); box-shadow:0 0 9px var(--canary); }
html[data-theme="rojo"] .bot-floor{ background:radial-gradient(ellipse, rgba(15,23,42,.18), transparent 70%); }
html[data-theme="rojo"] .bot-img{ filter:drop-shadow(0 8px 14px rgba(15,23,42,.2)); }

/* ===== LAB: ajustes de propulsores (generado desde lab/lab.html) ===== */
/* Editado en el laboratorio; volver a guardar reemplaza este bloque entero. */
/* propulsores automatico — solo call — Eduardo Luna · 2026 */
.card-call .bot-stage.automatico .thruster{
  width:calc(var(--bot-w) * 0.092); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * 0.014);
}
.card-call .bot-stage.automatico .thruster.left{ transform:translate(calc(var(--bot-w) * 0.0200), calc(var(--bot-w) * 0.0000)) rotate(-16deg); }
.card-call .bot-stage.automatico .thruster.right{ transform:translate(calc(var(--bot-w) * 0.0200), calc(var(--bot-w) * 0.0000)) rotate(-17deg); }

/* propulsores automatico — solo ia_sin_saldo — Eduardo Luna · 2026 */
.card-ia_sin_saldo .bot-stage.automatico .thruster{
  width:calc(var(--bot-w) * 0.092); height:calc(var(--bot-w) * 0.066);
  bottom:calc(var(--bot-w) * 0.052);
}
.card-ia_sin_saldo .bot-stage.automatico .thruster.left{ transform:translate(calc(var(--bot-w) * -0.2080), calc(var(--bot-w) * -0.0520)) rotate(27deg); }
.card-ia_sin_saldo .bot-stage.automatico .thruster.right{ transform:translate(calc(var(--bot-w) * -0.2400), calc(var(--bot-w) * 0.0160)) rotate(11deg); }

/* propulsores automatico — solo online — Eduardo Luna · 2026 */
.card-online .bot-stage.automatico .thruster{
  width:calc(var(--bot-w) * 0.092); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * 0.074);
}
.card-online .bot-stage.automatico .thruster.left{ transform:translate(calc(var(--bot-w) * 0.0080), calc(var(--bot-w) * 0.0000)) rotate(-13deg); }
.card-online .bot-stage.automatico .thruster.right{ transform:translate(calc(var(--bot-w) * 0.0080), calc(var(--bot-w) * 0.0000)) rotate(-16deg); }

/* propulsores automatico — solo repair — Eduardo Luna · 2026 */
.card-repair .bot-stage.automatico .thruster{
  width:calc(var(--bot-w) * 0.092); height:calc(var(--bot-w) * 0.074);
  bottom:calc(var(--bot-w) * 0.08);
}
.card-repair .bot-stage.automatico .thruster.left{ transform:translate(calc(var(--bot-w) * -0.1520), calc(var(--bot-w) * 0.0000)) rotate(21deg); }
.card-repair .bot-stage.automatico .thruster.right{ transform:translate(calc(var(--bot-w) * -0.1520), calc(var(--bot-w) * 0.0000)) rotate(20deg); }

/* propulsores automatico — solo zae_login — Eduardo Luna · 2026 */
.card-zae_login .bot-stage.automatico .thruster{
  width:calc(var(--bot-w) * 0.116); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * 0.052);
}
.card-zae_login .bot-stage.automatico .thruster.left{ transform:translate(calc(var(--bot-w) * 0.0360), calc(var(--bot-w) * 0.0000)) rotate(-32deg); }
.card-zae_login .bot-stage.automatico .thruster.right{ transform:translate(calc(var(--bot-w) * 0.0560), calc(var(--bot-w) * 0.0000)) rotate(-26deg); }

/* propulsores servibot — solo call — Eduardo Luna · 2026 */
.card-call .bot-stage.servibot .thruster{
  width:calc(var(--bot-w) * 0.116); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * -0.006);
}
.card-call .bot-stage.servibot .thruster.left{ transform:translate(calc(var(--bot-w) * 0.0520), calc(var(--bot-w) * 0.0120)) rotate(-11deg); }
.card-call .bot-stage.servibot .thruster.right{ transform:translate(calc(var(--bot-w) * 0.0880), calc(var(--bot-w) * -0.0080)) rotate(-9deg); }

/* propulsores servibot — solo ia_sin_saldo — Eduardo Luna · 2026 */
.card-ia_sin_saldo .bot-stage.servibot .thruster{
  width:calc(var(--bot-w) * 0.108); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * -0.048);
}
.card-ia_sin_saldo .bot-stage.servibot .thruster.left{ transform:translate(calc(var(--bot-w) * -0.0600), calc(var(--bot-w) * 0.0120)) rotate(15deg); }
.card-ia_sin_saldo .bot-stage.servibot .thruster.right{ transform:translate(calc(var(--bot-w) * -0.0160), calc(var(--bot-w) * -0.0040)) rotate(8deg); }

/* propulsores servibot — solo online — Eduardo Luna · 2026 */
.card-online .bot-stage.servibot .thruster{
  width:calc(var(--bot-w) * 0.106); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * -0.006);
}
.card-online .bot-stage.servibot .thruster.left{ transform:translate(calc(var(--bot-w) * 0.0560), calc(var(--bot-w) * 0.0120)) rotate(-7deg); }
.card-online .bot-stage.servibot .thruster.right{ transform:translate(calc(var(--bot-w) * 0.0840), calc(var(--bot-w) * 0.0000)) rotate(-12deg); }

/* propulsores servibot — solo repair — Eduardo Luna · 2026 */
.card-repair .bot-stage.servibot .thruster{
  width:calc(var(--bot-w) * 0.092); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * -0.006);
}
.card-repair .bot-stage.servibot .thruster.left{ transform:translate(calc(var(--bot-w) * -0.1120), calc(var(--bot-w) * 0.0120)) rotate(24deg); }
.card-repair .bot-stage.servibot .thruster.right{ transform:translate(calc(var(--bot-w) * -0.0480), calc(var(--bot-w) * 0.0160)) rotate(21deg); }

/* propulsores tomzabot — solo call — Eduardo Luna · 2026 */
.card-call .bot-stage.tomzabot .thruster{
  width:calc(var(--bot-w) * 0.092); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * 0.024);
}
.card-call .bot-stage.tomzabot .thruster.left{ transform:translate(calc(var(--bot-w) * 0.0120), calc(var(--bot-w) * 0.0000)) rotate(-3deg); }
.card-call .bot-stage.tomzabot .thruster.right{ transform:translate(calc(var(--bot-w) * -0.0080), calc(var(--bot-w) * 0.0000)) rotate(-7deg); }

/* propulsores unibot — solo call — Eduardo Luna · 2026 */
.card-call .bot-stage.unibot .thruster{
  width:calc(var(--bot-w) * 0.092); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * -0.014);
}

/* propulsores unibot — solo ia_sin_saldo — Eduardo Luna · 2026 */
.card-ia_sin_saldo .bot-stage.unibot .thruster{
  width:calc(var(--bot-w) * 0.092); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * -0.006);
}
.card-ia_sin_saldo .bot-stage.unibot .thruster.left{ transform:translate(calc(var(--bot-w) * 0.0080), calc(var(--bot-w) * -0.0280)) rotate(-31deg); }
.card-ia_sin_saldo .bot-stage.unibot .thruster.right{ transform:translate(calc(var(--bot-w) * 0.0000), calc(var(--bot-w) * -0.0480)) rotate(-28deg); }

/* propulsores unibot — solo online — Eduardo Luna · 2026 */
.card-online .bot-stage.unibot .thruster{
  width:calc(var(--bot-w) * 0.092); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * -0.014);
}

/* propulsores unibot — solo repair — Eduardo Luna · 2026 */
.card-repair .bot-stage.unibot .thruster{
  width:calc(var(--bot-w) * 0.096); height:calc(var(--bot-w) * 0.09);
  bottom:calc(var(--bot-w) * -0.006);
}
.card-repair .bot-stage.unibot .thruster.left{ transform:translate(calc(var(--bot-w) * -0.0520), calc(var(--bot-w) * 0.0120)) rotate(0deg); }
.card-repair .bot-stage.unibot .thruster.right{ transform:translate(calc(var(--bot-w) * -0.0560), calc(var(--bot-w) * 0.0000)) rotate(8deg); }

/* propulsores unibot — solo voz_saldo_bajo — Eduardo Luna · 2026 */
.card-voz_saldo_bajo .bot-stage.unibot .thruster{
  width:calc(var(--bot-w) * 0.092); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * -0.006);
}
.card-voz_saldo_bajo .bot-stage.unibot .thruster.left{ transform:translate(calc(var(--bot-w) * -0.1760), calc(var(--bot-w) * -0.0880)) rotate(19deg); }
.card-voz_saldo_bajo .bot-stage.unibot .thruster.right{ transform:translate(calc(var(--bot-w) * -0.1160), calc(var(--bot-w) * 0.0000)) rotate(16deg); }

/* propulsores unibot — solo zae_login — Eduardo Luna · 2026 */
.card-zae_login .bot-stage.unibot .thruster{
  width:calc(var(--bot-w) * 0.092); height:calc(var(--bot-w) * 0.126);
  bottom:calc(var(--bot-w) * -0.006);
}
.card-zae_login .bot-stage.unibot .thruster.left{ transform:translate(calc(var(--bot-w) * 0.0000), calc(var(--bot-w) * -0.0200)) rotate(0deg); }
.card-zae_login .bot-stage.unibot .thruster.right{ transform:translate(calc(var(--bot-w) * -0.0200), calc(var(--bot-w) * -0.0280)) rotate(0deg); }
/* ===== /LAB ===== */