/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM IARNOVA — tokens + primitivas compartidas
   Fuente del lenguaje: el rediseño de iarnova.com (2026-09-03).

   CÓMO SE USA
     <link rel="stylesheet" href="https://api.iarnova.com/ds/iarnova.css">
     (dentro de iarnova-api alcanza con  /ds/iarnova.css )

   DIAL DE INTENSIDAD (decisión de producto, respetarla)
     100 · Marketing/web  → cinematográfico (3D, brasas). Solo iarnova.com.
      60 · Dashboards / pantallas de inicio / login → ESTE archivo. Vidrio,
           glow sutil, KPIs, micro-interacciones. El "wow" medido.
      20 · Zona de trabajo (tablas, formularios largos, carga de datos) →
           usar SOLO los tokens (color/tipografía/radios). Nada de glow ni
           animaciones: ahí el lujo es que sea instantáneo.

   REGLA: NO usar backdrop-filter en listas con muchas tarjetas (es caro en
   móvil). El vidrio de este archivo es "pintado" con gradientes.
═══════════════════════════════════════════════════════════════ */

:root{
  /* ── Fondos ── */
  --iar-navy:#040810;
  --iar-navy2:#070f1e;
  --iar-navy3:#0c1830;

  /* ── Marca ── */
  --iar-blue:#1a6ef5;
  --iar-cyan:#00d4ff;
  --iar-gold:#e8b94f;      /* firma */
  --iar-gold2:#f7d98a;
  --iar-ember:#ff9d3c;

  /* ── Texto ── */
  --iar-ink:#f8fafc;
  --iar-mut:#94a3b8;

  /* ── Superficies ── */
  --iar-surface:linear-gradient(150deg,rgba(28,44,74,.55),rgba(10,18,34,.55));
  --iar-surface-solid:#0d1728;
  --iar-line:rgba(255,255,255,.075);
  --iar-line-gold:rgba(232,185,79,.16);
  --iar-field:#0a1424;

  /* ── Estados ── */
  --iar-ok:#22c55e;
  --iar-warn:#eab308;
  --iar-bad:#ef4444;

  /* ── Sombra y luz ── */
  --iar-shadow:0 18px 50px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
  --iar-shadow-hi:0 28px 70px rgba(0,0,0,.55), 0 0 44px rgba(232,185,79,.14), inset 0 1px 0 rgba(255,255,255,.1);
  --iar-glow-gold:0 0 40px rgba(232,185,79,.28);
  --iar-glow-blue:0 0 40px rgba(26,110,245,.30);

  /* ── Forma y movimiento ── */
  --iar-r-sm:10px;
  --iar-r-md:16px;
  --iar-r-lg:22px;
  --iar-ease:cubic-bezier(.22,.61,.36,1);
  --iar-fast:.18s;
  --iar-slow:.45s;

  --iar-font:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --iar-font-display:'Orbitron','Inter',system-ui,sans-serif;
}

/* ═══════════════ BASE ═══════════════ */
.iar-body{
  background:var(--iar-navy);
  color:var(--iar-ink);
  font-family:var(--iar-font);
  min-height:100vh;
}
/* Ambiente para pantallas de inicio y login (nivel 60).
   Dos nebulosas fijas: dorada arriba-derecha, azul abajo-izquierda. */
.iar-ambient{position:relative;}
.iar-ambient::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 620px at 78% -8%, rgba(232,185,79,.10), transparent 62%),
    radial-gradient(820px 600px at 12% 108%, rgba(26,110,245,.13), transparent 62%);
}
.iar-ambient > *{position:relative;z-index:1;}

/* ═══════════════ VIDRIO ═══════════════ */
.iar-glass{
  background:var(--iar-surface);
  border:1px solid var(--iar-line);
  border-radius:var(--iar-r-md);
  box-shadow:var(--iar-shadow);
}
/* Tarjeta interactiva: elevación + filo dorado + luz que sigue al mouse.
   Para la luz, setear --mx/--my desde JS (ver iarGlowCards más abajo). */
.iar-card{
  background:var(--iar-surface);
  border:1px solid var(--iar-line);
  border-radius:var(--iar-r-md);
  box-shadow:var(--iar-shadow);
  position:relative;overflow:hidden;
  transition:transform var(--iar-slow) var(--iar-ease),
             box-shadow var(--iar-slow) var(--iar-ease),
             border-color var(--iar-slow) var(--iar-ease);
}
.iar-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--iar-gold),transparent);
  opacity:0;transition:opacity var(--iar-slow);
}
.iar-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity var(--iar-slow);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(232,185,79,.13),transparent 62%);
}
.iar-card:hover{
  transform:translateY(-5px);
  border-color:rgba(232,185,79,.34);
  box-shadow:var(--iar-shadow-hi);
}
.iar-card:hover::before,.iar-card:hover::after{opacity:1;}
.iar-card.is-gold{
  border-color:rgba(232,185,79,.34);
  background:linear-gradient(150deg,rgba(232,185,79,.09),rgba(26,110,245,.05));
}
.iar-card.is-gold::before{opacity:1;}

/* ═══════════════ BOTONES ═══════════════ */
.iar-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--iar-gold),#c9922f);
  color:#1a1206;border:none;border-radius:var(--iar-r-sm);
  padding:12px 18px;font-size:14px;font-weight:800;letter-spacing:.3px;
  font-family:var(--iar-font);cursor:pointer;
  box-shadow:0 6px 24px rgba(232,185,79,.28);
  transition:transform var(--iar-fast) var(--iar-ease),box-shadow var(--iar-fast) var(--iar-ease),opacity var(--iar-fast);
}
.iar-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 34px rgba(232,185,79,.45);}
.iar-btn:active:not(:disabled){transform:translateY(0);}
.iar-btn:disabled{opacity:.5;cursor:not-allowed;}

.iar-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,255,255,.045);color:var(--iar-ink);
  border:1px solid var(--iar-line);border-radius:var(--iar-r-sm);
  padding:11px 16px;font-size:13.5px;font-weight:700;
  font-family:var(--iar-font);cursor:pointer;
  transition:all var(--iar-fast) var(--iar-ease);
}
.iar-btn-ghost:hover{border-color:rgba(232,185,79,.45);background:rgba(232,185,79,.08);}

/* ═══════════════ CAMPOS ═══════════════ */
.iar-field{
  width:100%;background:var(--iar-field);
  border:1px solid var(--iar-line);color:var(--iar-ink);
  border-radius:var(--iar-r-sm);padding:11px 13px;font-size:14px;
  font-family:var(--iar-font);transition:border-color var(--iar-fast),box-shadow var(--iar-fast);
}
.iar-field:focus{
  outline:none;border-color:rgba(232,185,79,.6);
  box-shadow:0 0 0 3px rgba(232,185,79,.12);
}
.iar-label{display:block;font-size:11px;font-weight:700;color:var(--iar-mut);
  letter-spacing:1.4px;text-transform:uppercase;margin:12px 0 6px;}

/* ═══════════════ TIPOGRAFÍA DE MARCA ═══════════════ */
.iar-brand{
  font-family:var(--iar-font-display);
  font-weight:900;letter-spacing:5px;
  background:linear-gradient(135deg,#fff,var(--iar-gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.iar-brand small{
  display:block;letter-spacing:3.5px;font-size:9px;font-weight:700;
  color:var(--iar-gold);-webkit-text-fill-color:var(--iar-gold);margin-top:3px;
}
.iar-gold{color:var(--iar-gold);}

/* ═══════════════ KPI (nivel 60) ═══════════════ */
.iar-kpi{
  background:var(--iar-surface);border:1px solid var(--iar-line);
  border-radius:var(--iar-r-md);padding:18px 20px;box-shadow:var(--iar-shadow);
}
.iar-kpi-num{
  font-family:var(--iar-font-display);font-size:32px;font-weight:900;line-height:1;
  background:linear-gradient(135deg,#fff,var(--iar-gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.iar-kpi-label{font-size:11px;color:var(--iar-mut);letter-spacing:1.2px;
  text-transform:uppercase;margin-top:6px;}

/* ═══════════════ CHIPS ═══════════════ */
.iar-chip{display:inline-block;font-size:10.5px;font-weight:800;
  padding:2px 9px;border-radius:999px;vertical-align:middle;letter-spacing:.4px;}
.iar-chip.ok{background:rgba(34,197,94,.15);color:#7ff0b5;}
.iar-chip.warn{background:rgba(234,179,8,.15);color:#ffe08a;}
.iar-chip.bad{background:rgba(239,68,68,.15);color:#ffb0bd;}
.iar-chip.gold{background:rgba(232,185,79,.15);color:var(--iar-gold2);}
.iar-chip.info{background:rgba(0,212,255,.13);color:#8fe3ff;}

/* ═══════════════ BARRA / PUNTOS DE ESTADO ═══════════════ */
.iar-dot{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block;}
.iar-dot.ok{background:var(--iar-ok);box-shadow:0 0 8px rgba(34,197,94,.55);}
.iar-dot.warn{background:var(--iar-warn);box-shadow:0 0 8px rgba(234,179,8,.55);}
.iar-dot.bad{background:var(--iar-bad);box-shadow:0 0 8px rgba(239,68,68,.55);}

/* ═══════════════ SCROLLBAR ═══════════════ */
.iar-body::-webkit-scrollbar{width:9px;height:9px;}
.iar-body::-webkit-scrollbar-track{background:transparent;}
.iar-body::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--iar-gold),var(--iar-blue));
  border-radius:999px;border:2px solid var(--iar-navy);
}

/* ═══════════════ ENTRADA (CSS, no rAF) ═══════════════
   Lección de la web: el contenido importante NUNCA debe depender del
   ticker de requestAnimationFrame; si va lento queda invisible. */
@keyframes iarIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.iar-in{animation:iarIn .55s var(--iar-ease) both;}
.iar-in-1{animation-delay:.05s}
.iar-in-2{animation-delay:.1s}
.iar-in-3{animation-delay:.15s}
.iar-in-4{animation-delay:.2s}
.iar-in-5{animation-delay:.25s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .iar-card:hover{transform:none;}
}