/* ═══════════════════════════════════════════════════════
   CentroMIPC Design Tokens — v1.2.0
   https://branding.centromipc.es/api/tokens/css
   Generado automáticamente — no editar manualmente
   ═══════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Conthrax';
  src: url('/assets/fonts/Conthrax-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

:root {
  /* — Marca — */
  --cm-orange:          #EF7800;
  --cm-orange-hover:    #d46c00;
  --cm-orange-glow:     rgba(239,120,0,0.25);
  --cm-orange-light:    rgba(239,120,0,0.12);
  --cm-blue:            #009FE4;
  --cm-blue-hover:      #0088c5;
  --cm-blue-glow:       rgba(0,159,228,0.25);
  --cm-blue-light:      rgba(0,159,228,0.12);

  /* — Semánticos — */
  --cm-success: #38A169;
  --cm-warning: #EC994B;
  --cm-error:   #E53E3E;

  /* — Fuentes — */
  --cm-font-display: 'Conthrax', 'Arial Black', sans-serif;
  --cm-font-body:    'Poppins', 'Segoe UI', sans-serif;
  --cm-font-mono:    'Courier New', 'Fira Code', monospace;

  /* — Escala tipográfica — */
  --cm-text-xs:   0.63rem;
  --cm-text-sm:   0.79rem;
  --cm-text-base: 0.9rem;
  --cm-text-lg:   1.01rem;
  --cm-text-xl:   1.24rem;
  --cm-text-2xl:  1.75rem;
  --cm-text-3xl:  2.25rem;
  --cm-text-4xl:  3rem;
  --cm-text-5xl:  4rem;

  /* — Radios — */
  --cm-radius-xs:   6px;
  --cm-radius-sm:   12px;
  --cm-radius-md:   20px;
  --cm-radius-lg:   30px;
  --cm-radius-xl:   50px;
  --cm-radius-pill: 100px;
  --cm-radius-card: 24px;

  /* — Glassmorphism — */
  --cm-glass-bg:     rgba(255,255,255,0.06);
  --cm-glass-border: rgba(255,255,255,0.12);
  --cm-glass-blur:   blur(20px) saturate(180%);
  --cm-glass-shadow: 0 8px 40px rgba(0,0,0,0.35);

  /* — Sombras — */
  --cm-shadow-orange: 0 4px 24px rgba(239,120,0,0.35);
  --cm-shadow-blue:   0 4px 24px rgba(0,159,228,0.35);

  /* — Espaciado — */
  --cm-space-xs:  4px;
  --cm-space-sm:  8px;
  --cm-space-md:  16px;
  --cm-space-lg:  24px;
  --cm-space-xl:  40px;
  --cm-space-2xl: 64px;
  --cm-space-3xl: 96px;

  /* — Transición global — */
  --cm-transition: 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── Dark mode (por defecto) ─────────────────────────── */
[data-theme="dark"] {
  --cm-bg-page:      #080e1a;
  --cm-bg-deep:      #050b14;
  --cm-surface:      rgba(255,255,255,0.05);
  --cm-surface-2:    rgba(255,255,255,0.09);
  --cm-border:       rgba(255,255,255,0.10);
  --cm-border-hover: rgba(255,255,255,0.22);
  --cm-text-primary: #f0f4f8;
  --cm-text-second:  rgba(240,244,248,0.60);
  --cm-text-muted:   rgba(240,244,248,0.35);
}

/* ── Light mode ──────────────────────────────────────── */
[data-theme="light"] {
  --cm-bg-page:      #F8FAFC;
  --cm-bg-deep:      #eef2f7;
  --cm-surface:      rgba(255,255,255,0.80);
  --cm-surface-2:    rgba(255,255,255,0.95);
  --cm-border:       rgba(0,0,0,0.08);
  --cm-border-hover: rgba(0,0,0,0.18);
  --cm-text-primary: #1E293B;
  --cm-text-second:  rgba(30,41,59,0.65);
  --cm-text-muted:   rgba(30,41,59,0.40);

  /* Glass theme-aware: en claro las superficies deben verse sobre fondo blanco */
  --cm-glass-bg:     rgba(255,255,255,0.72);
  --cm-glass-border: rgba(15,23,42,0.08);
  --cm-glass-shadow: 0 16px 44px -22px rgba(15,23,42,0.30);
}

/* ── Base ────────────────────────────────────────────── */
body {
  font-family: var(--cm-font-body);
  font-size: var(--cm-text-base);
  background-color: var(--cm-bg-page);
  color: var(--cm-text-primary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { font-family: var(--cm-font-display); line-height: 1.2; }
h3, h4, h5, h6 { line-height: 1.2; }