/* =========================================================
   itteralabs — "IA conectada a tus procesos" (componente)
   Requiere js/ia-procesos.js. Tokens de marca: coral solo para
   el chip, los circuitos y el pulso (elementos de acción/energía).
   ========================================================= */

.iap {
  --iap-accent: #ff6259;
  --iap-ink: #2c3038;         /* líneas, anillo e iconos */
  --iap-ink-soft: #8a8e96;    /* radios y ticks suaves */
  --iap-chip-text: #ffffff;
  --iap-tip-bg: #2c3038;
  --iap-tip-text: #ffffff;
  --iap-font: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  user-select: none;
  -webkit-user-select: none;
}
/* Variante para fondos oscuros (Jet Black como superficie principal) */
.iap--dark,
.is-dark .iap {
  --iap-ink: #f3f3f4;
  --iap-ink-soft: #8a8e96;
  --iap-tip-bg: #ffffff;
  --iap-tip-text: #2c3038;
}

.iap__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- Dial interior (estático) ---------- */
.iap__dial { fill: none; stroke: var(--iap-ink); stroke-width: 2; }
.iap__tick { stroke: var(--iap-ink); stroke-width: 1.2; opacity: .75; }
.iap__tick--lg { stroke-width: 2; opacity: .95; }
.iap__ticks--mid .iap__tick { opacity: .6; }
.iap__ticks--outer .iap__tick { opacity: .8; }

/* ---------- Circuitos coral ---------- */
.iap__trace path {
  fill: none;
  stroke: var(--iap-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
  transition: opacity .35s ease, stroke-width .35s ease;
}
.iap__trace circle { fill: var(--iap-accent); opacity: .9; transition: opacity .35s ease, r .35s ease; }
.iap.is-active .iap__trace path { opacity: .45; }
.iap.is-active .iap__trace circle { opacity: .5; }
.iap.is-active .iap__trace.is-lit path { opacity: .9; stroke-width: 2.6; }
.iap.is-active .iap__trace.is-lit circle { opacity: .95; }
.iap.is-active .iap__trace.is-main path { opacity: 1; stroke-width: 3.4; filter: drop-shadow(0 0 4px rgba(255, 98, 89, .6)); }
.iap.is-active .iap__trace.is-main circle { opacity: 1; }

/* ---------- Chip ---------- */
.iap__pins rect { fill: var(--iap-accent); }
.iap__chip-body {
  fill: var(--iap-accent);
  transition: filter .4s ease;
}
.iap__chip.is-active .iap__chip-body {
  filter: drop-shadow(0 0 14px rgba(255, 98, 89, .55));
}
.iap__chip-inner { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.iap__chip-text {
  fill: var(--iap-chip-text);
  font-family: "Inter", var(--iap-font), system-ui, sans-serif;
  font-weight: 700;
  font-size: 54px;
  letter-spacing: -1px;
  pointer-events: none;
}

/* ---------- Anillo y procesos (rotan) ---------- */
.iap__ring { fill: none; stroke: var(--iap-ink); }
.iap__spoke { stroke: var(--iap-ink-soft); stroke-width: 1.5; opacity: .7; }
.iap__conn { stroke: var(--iap-ink); stroke-width: 1.6; }
.iap__conn-dot { fill: var(--iap-ink); transition: fill .15s ease; }
.iap__conn-dot.is-lit { fill: var(--iap-accent); }
.iap__spoke-lit, .iap__conn-lit {
  stroke: var(--iap-accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
}

.iap__proc { cursor: pointer; outline: none; }
.iap__hit { fill: transparent; stroke: none; }
.iap__halo {
  fill: var(--iap-accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.6);
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.iap__proc.is-active .iap__halo,
.iap__proc:focus-visible .iap__halo { opacity: .12; transform: scale(1); }

.iap__icon {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.iap__icon > * {
  fill: none;
  stroke: var(--iap-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .3s ease, fill .3s ease;
}
.iap__icon .iap-fill { fill: var(--iap-ink); stroke: none; }
.iap__proc.is-active .iap__icon,
.iap__proc:focus-visible .iap__icon { transform: scale(1.12); }
.iap__proc.is-active .iap__icon > *,
.iap__proc:focus-visible .iap__icon > * { stroke: var(--iap-accent); }
.iap__proc.is-active .iap__icon .iap-fill,
.iap__proc:focus-visible .iap__icon .iap-fill { fill: var(--iap-accent); stroke: none; }

/* ---------- Pulso chip → proceso ---------- */
.iap__pulse { pointer-events: none; }
.iap__pulse-dot { fill: var(--iap-accent); }
.iap__ripple { fill: none; stroke: var(--iap-accent); stroke-width: 2; }

/* ---------- Tooltip ---------- */
.iap__tip {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, 6px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--iap-tip-bg);
  color: var(--iap-tip-text);
  font-family: var(--iap-font);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgba(44, 48, 56, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s .2s;
  pointer-events: none;
  z-index: 2;
}
.iap__tip.is-visible { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
.iap__tip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--iap-accent); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .iap__icon, .iap__halo, .iap__trace path, .iap__trace circle { transition: none; }
}