/* ═══════════════════════════════════════════════════════════════════════════
   AGETIX DS — Tokens compartidos del DASHBOARD (espejo de agetix-ds/tokens/noir.css)
   Servido en /static/ds-tokens.css. Cualquier página del dashboard (login,
   admin, cliente, OS) enlaza esta hoja para hablar el MISMO idioma visual que
   la web corporativa (tema Noir). Migración F4.2 / #38.2 (D073).
   Regla: las páginas del dashboard NO definen su paleta; consumen estas vars.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Color (idéntico a noir.css) */
  --bg:      #050A14;  --bg-2: #070d1a;  --bg-3: #0a1322;  --bg-4: #0e1830;
  --line:    #1c2740;  --line-2: #2a3a5c;
  --gold:    #FFD700;  --gold-2: #ffe45c;
  --cyan:    #00E5FF;
  --text:    #F8F9FA;  --text-2: #B0B0B0;  --text-3: #5a6275;
  --green:   #00d4aa;  --red: #ff4f6e;     --amber: #ffaa00;

  --grad-cta:  linear-gradient(180deg, var(--gold-2), var(--gold));
  --grad-card: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  --orbe-cyan: radial-gradient(900px 620px at 88% -8%, rgba(0,229,255,.16), transparent 62%);
  --orbe-gold: radial-gradient(760px 540px at -12% 108%, rgba(255,215,0,.11), transparent 60%);

  --font-display: 'Montserrat', Inter, system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
  --sombra-card: 0 30px 60px rgba(0,0,0,.45);
  --sombra-cta:  0 0 44px rgba(255,215,0,.32), 0 18px 40px rgba(0,0,0,.4);
  --glow-cyan:   0 0 24px rgba(0,229,255,.45);
}

/* ── Utilidades compartidas del dashboard ────────────────────────────────── */

/* CTA de marca (oro, Montserrat, mayúsculas) */
.ds-btn {
  display: inline-block; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; font-size: 14px;
  padding: 12px 22px; border-radius: var(--r-sm); border: none; cursor: pointer;
  background: var(--grad-cta); color: var(--bg); box-shadow: var(--sombra-cta);
  transition: transform .2s ease, opacity .2s ease;
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ds-btn--ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line-2); box-shadow: none;
}
.ds-btn--cyan { background: var(--cyan); color: var(--bg); box-shadow: var(--glow-cyan); }

/* Tarjeta de firma */
.ds-card {
  background: var(--grad-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sombra-card); padding: 24px;
}
.ds-card--acento { border-left: 3px solid var(--cyan); }

/* Input de marca */
.ds-input {
  width: 100%; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 14px; font-size: 14px;
  color: var(--text); font-family: var(--font-body); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ds-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,229,255,.12); }
.ds-input::placeholder { color: var(--text-3); }

/* Número que "cuenta" (JS pone el valor final; la clase da el estilo) */
.ds-counter {
  font-family: var(--font-display); font-weight: 800; color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

/* Skeleton loader (shimmer sutil, respeta reduce-motion) */
.ds-skeleton {
  position: relative; overflow: hidden;
  background: var(--bg-3); border-radius: var(--r-sm); min-height: 14px;
}
.ds-skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: ds-shimmer 1.3s infinite;
}
@keyframes ds-shimmer { 100% { transform: translateX(100%); } }

/* Spinner inline para botones en estado "cargando" */
.ds-spin {
  display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
  border: 2px solid rgba(5,10,20,.35); border-top-color: var(--bg);
  border-radius: 50%; animation: ds-rot .7s linear infinite;
}
@keyframes ds-rot { 100% { transform: rotate(360deg); } }

/* Alertas de marca */
.ds-alert { border-radius: var(--r-sm); padding: 11px 14px; font-size: 13px; line-height: 1.5; }
.ds-alert--error   { background: rgba(255,79,110,.10);  border: 1px solid rgba(255,79,110,.25);  color: var(--red); }
.ds-alert--success { background: rgba(0,212,170,.08);   border: 1px solid rgba(0,212,170,.20);   color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .ds-skeleton::after, .ds-spin { animation: none; }
}

/* ── Escala de espaciado 8pt (#39 pase premium, 2026-07-04) ──────────────────
   Regla: todo margen/padding de las páginas del dashboard cae en esta escala.
   Jerarquía Apple: h1 24px → section-title separada 40px arriba / 16px abajo →
   panel padding 24px → celdas de tabla 12x16. */
:root { --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; }