/* ============================================================
   jutexx.com — Módulo "Equipo IA" (inicio y Servicios, OPCIONAL)
   v22: sobre el negro del sitio, sin card. En el centro, un avatar
   holográfico (rostro de líneas que gira y escucha, con neuronas)
   que da órdenes a cinco agentes robot; líneas de pelo en blanco, el verde sólo
   en lo que está vivo, un barrido de radar detrás y una sola línea
   de tráfico abajo.

   Hasta 1030px el SVG ancho se cambia por uno casi cuadrado, para
   que los nombres nunca se lean chiquitos.

   MODULO DESCONECTABLE: borrá site/js/equipo-ia.js, este archivo,
   components/equipo-ia.html, el <link>/<script> de las dos páginas
   y sus <div data-eqia-mount>. No toca main.css.
   ============================================================ */

.eqia {
  --eqia-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  margin-top: 48px;
}

.eqia-escena {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  /* Diámetro del anillo (2R / W) y altura del núcleo (cy / H), en % del
     SVG: el radar se dibuja con ese tamaño y centrado en el núcleo. */
  --eqia-d: 49%;
  --eqia-cy: 51.67%;
  --eqia-h: 39.68%;
}

.eqia-svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  font-family: var(--font);
  overflow: visible;
}
.eqia-svg-movil { display: none; max-width: 460px; }

/* --- Radar: barrido cónico, muy tenue --- */
.eqia-radar {
  position: absolute;
  left: 50%;
  top: var(--eqia-cy);
  width: var(--eqia-d);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, rgba(0, 230, 138, .11), rgba(0, 230, 138, 0) 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  animation: eqia-barrido 10s linear infinite;
  pointer-events: none;
}
@keyframes eqia-barrido { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes eqia-giro { to { transform: rotate(360deg); } }

/* --- Estructura: blanco en líneas de pelo --- */
.eqia-anillo { fill: none; stroke-width: 1; }
.eqia-marcas { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.eqia-orbita {
  fill: none;
  stroke: rgba(255, 255, 255, .1);
  stroke-width: 1;
  stroke-dasharray: 1 7;
  transform-box: fill-box;
  transform-origin: center;
  animation: eqia-giro 80s linear infinite;
}
.eqia-radio { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.eqia-cable {
  fill: none;
  stroke: rgba(255, 255, 255, .07);
  stroke-width: 1;
  transition: stroke .35s ease;
}

/* --- Agentes --- */
.eqia-set { cursor: pointer; outline: none; transition: opacity .35s ease; }
.eqia.is-focus .eqia-set:not(.is-lit) { opacity: .25; }
.eqia-hit { fill: transparent; }
.eqia-aro {
  fill: #050506;
  stroke: rgba(255, 255, 255, .32);
  stroke-width: 1;
  transition: stroke .3s ease;
}
.eqia-sat-orbita { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.eqia-robot {
  fill: none;
  stroke: rgba(255, 255, 255, .88);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.eqia-ojo { fill: var(--color-accent); stroke: none; animation: eqia-parpadeo 5s ease-in-out infinite; }
.eqia-set:nth-of-type(2n) .eqia-ojo { animation-delay: 1.7s; }
@keyframes eqia-parpadeo {
  0%, 92%, 100% { opacity: 1; }
  95%           { opacity: .15; }
}
.eqia-sat { fill: rgba(255, 255, 255, .75); }
.eqia-sat-2 { fill: var(--color-accent); }

.eqia-set:hover .eqia-aro,
.eqia-set.is-lit .eqia-aro,
.eqia-set:focus-visible .eqia-aro { stroke: var(--color-accent); }

/* Nombre: Inter fina en mayúsculas espaciadas, como el nav. Dato: mono,
   chico y tenue, como la lectura de un instrumento. */
.eqia-nombre {
  fill: rgba(255, 255, 255, .78);
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  transition: fill .3s ease;
}
.eqia-dato {
  font-family: var(--eqia-mono);
  fill: rgba(255, 255, 255, .34);
  letter-spacing: .14em;
}
.eqia-set:hover .eqia-nombre,
.eqia-set.is-lit .eqia-nombre { fill: #fff; }
.eqia-set:hover .eqia-dato,
.eqia-set.is-lit .eqia-dato { fill: rgba(0, 230, 138, .8); }

/* Al encender un área se encienden también sus cables (`:has()`; sin
   soporte sólo se pierde el énfasis). */
[data-eqia-svg-neuro]:has(.eqia-set[data-sector="ventas"].is-lit) .eqia-c-ventas,
[data-eqia-svg-neuro]:has(.eqia-set[data-sector="marketing"].is-lit) .eqia-c-marketing,
[data-eqia-svg-neuro]:has(.eqia-set[data-sector="soporte"].is-lit) .eqia-c-soporte,
[data-eqia-svg-neuro]:has(.eqia-set[data-sector="finanzas"].is-lit) .eqia-c-finanzas,
[data-eqia-svg-neuro]:has(.eqia-set[data-sector="legal"].is-lit) .eqia-c-legal,
[data-eqia-svg-neuro-movil]:has(.eqia-set[data-sector="ventas"].is-lit) .eqia-c-ventas,
[data-eqia-svg-neuro-movil]:has(.eqia-set[data-sector="marketing"].is-lit) .eqia-c-marketing,
[data-eqia-svg-neuro-movil]:has(.eqia-set[data-sector="soporte"].is-lit) .eqia-c-soporte,
[data-eqia-svg-neuro-movil]:has(.eqia-set[data-sector="finanzas"].is-lit) .eqia-c-finanzas,
[data-eqia-svg-neuro-movil]:has(.eqia-set[data-sector="legal"].is-lit) .eqia-c-legal {
  stroke: rgba(0, 230, 138, .45);
}

/* --- IA central: el avatar holográfico (canvas que dibuja el JS) ---
   Cubre ±1.55 veces el medio alto del rostro (hR en el JS), así que su
   ancho es 3.1·hR / W del SVG, centrado en el núcleo. */
.eqia-holo {
  position: absolute;
  left: 50%;
  top: var(--eqia-cy);
  width: var(--eqia-h);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.eqia-nucleo { pointer-events: none; }
.eqia-nombre-nucleo { fill: #fff; }
.eqia-dato-nucleo { fill: rgba(0, 230, 138, .6); }

/* --- Señales: órdenes del centro (blancas) y mensajes (verdes) --- */
.eqia-senales { pointer-events: none; }
.eqia-orden { fill: #fff; }
.eqia-senal-punto { fill: var(--color-accent); }
.eqia-senal-halo { fill: var(--color-accent); opacity: .18; }
.eqia-onda { fill: none; stroke: var(--color-accent); stroke-width: 1; opacity: 0; }

/* --- Tráfico: renglones apilados, el nuevo entra arriba --- */
.eqia-feed {
  list-style: none;
  margin: 10px auto 0;
  padding: 0;
  max-width: 760px;
  /* Seis renglones de alto fijo, así el bloque no salta al entrar uno. */
  height: calc(6 * 2.15em);
  overflow: hidden;
  font-size: .68rem;
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--color-muted);
  /* El último se desvanece al salir. */
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.eqia-fila {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  height: 2.15em;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .4s ease;
}
/* Cuanto más abajo, más apagado. */
.eqia-fila:nth-child(1) { opacity: 1; }
.eqia-fila:nth-child(2) { opacity: .78; }
.eqia-fila:nth-child(3) { opacity: .58; }
.eqia-fila:nth-child(4) { opacity: .42; }
.eqia-fila:nth-child(5) { opacity: .3; }
.eqia-fila:nth-child(6) { opacity: .2; }
.eqia-fila.is-off { opacity: .08; }
.eqia-fila.is-nueva { animation: eqia-entra .5s ease both; }
@keyframes eqia-entra {
  from { height: 0; opacity: 0; transform: translateY(-.6em); }
  to   { height: 2.15em; }
}
.eqia-ruta {
  color: rgba(255, 255, 255, .85);
  text-transform: uppercase;
  letter-spacing: .24em;
}
.eqia-ruta i { font-style: normal; color: var(--color-accent); margin: 0 .7em; }
.eqia-lat {
  font-family: var(--eqia-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  color: rgba(0, 230, 138, .75);
}
/* Qué hace el área tocada. Reserva su renglón para que no salte. */
.eqia-cap {
  margin: 6px auto 0;
  min-height: 1.6em;
  text-align: center;
  font-size: .72rem;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--color-soft);
  opacity: 0;
  transition: opacity .25s ease;
}
.eqia-cap.is-on { opacity: 1; }

/* --- Entrada escalonada --- */
.eqia--anim .eqia-set,
.eqia--anim .eqia-nucleo { opacity: 0; transition: opacity .7s ease; }
.eqia--anim.is-visible .eqia-set,
.eqia--anim.is-visible .eqia-nucleo {
  opacity: 1;
  transition-delay: calc(var(--i, 0) * 90ms + 150ms);
}
.eqia--anim.is-visible.is-focus .eqia-set:not(.is-lit) { opacity: .25; transition-delay: 0s; }

/* --- Pantallas chicas: la versión casi cuadrada --- */
@media (max-width: 1030px) {
  .eqia { margin-top: 32px; }
  .eqia-escena { --eqia-d: 65%; --eqia-cy: 51.12%; --eqia-h: 57.35%; max-width: 460px; }
  .eqia-svg-wide { display: none; }
  .eqia-svg-movil { display: block; }
  .eqia-nombre { letter-spacing: .24em; }
  .eqia-dato { letter-spacing: .08em; }
}
@media (max-width: 520px) {
  /* Cinco renglones de dos líneas: la ruta arriba y el mensaje abajo. */
  .eqia-feed { height: calc(5 * 3.1em); font-size: .64rem; letter-spacing: .08em; padding: 0 8px; }
  .eqia-fila { flex-wrap: wrap; justify-content: center; align-content: center; gap: 0 10px; height: 3.1em; white-space: normal; }
  .eqia-ruta { flex: 0 0 100%; text-align: center; letter-spacing: .2em; }
  .eqia-fila.is-nueva { animation-name: eqia-entra-movil; }
}
@keyframes eqia-entra-movil { from { height: 0; opacity: 0; } to { height: 3.1em; } }
}

/* --- Movimiento reducido: el dibujo queda quieto y legible --- */
@media (prefers-reduced-motion: reduce) {
  .eqia * { animation: none !important; }
  .eqia-radar { display: none; }
}