/**
 * ═══════════════════════════════════════════════════════════════════
 *  BRAND DESIGN TOKENS — Salva Navarro / PKI Tools / SnPKI IdentiCert
 *  Fuente canónica: https://salva-navarro.github.io/brand-kit/brand-tokens.css
 *  JSON equivalente: https://salva-navarro.github.io/brand-kit/brand-tokens.json
 *
 *  Cómo usar:
 *    @import url('https://salva-navarro.github.io/brand-kit/brand-tokens.css');
 *
 *  Secciones:
 *    1. Fuentes (Google Fonts import)
 *    2. Colores — paleta base, estados, superficie
 *    3. Gradientes
 *    4. Tipografía — familias, escala, pesos, alturas de línea
 *    5. Espaciado
 *    6. Radio de borde
 *    7. Sombras y elevación
 *    8. Transiciones y animaciones
 *    9. Z-index
 *   10. Breakpoints (como custom media — requiere PostCSS o uso manual)
 * ═══════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────
   1. FUENTES
   ─────────────────────────────────────────────────────────────────
   Montserrat  → Headings, labels, nav
   Inter       → Body text, UI
   JetBrains Mono → Code, datos técnicos
   ───────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

/* ─────────────────────────────────────────────────────────────────
   2. COLORES
   ─────────────────────────────────────────────────────────────────
   Nomenclatura:
     --color-{role}-{variant}
   Variantes: base, tint (más claro), shade (más oscuro), pale (fondo suave)
   ───────────────────────────────────────────────────────────────── */
:root {

  /* === AZUL PRIMARIO (PKI Blue) === */
  --color-primary:        #2F4F9F;   /* Principal — botones, links, cabeceras */
  --color-primary-tint:   #4B70C9;   /* Hover, estados activos */
  --color-primary-shade:  #1E3470;   /* Pressed, énfasis fuerte */
  --color-primary-pale:   #E8EEF9;   /* Fondos suaves, badges, chips */
  --color-primary-50:     #F0F4FC;
  --color-primary-100:    #D6E0F5;
  --color-primary-200:    #ADBFEB;
  --color-primary-300:    #7E9BDE;
  --color-primary-400:    #4B70C9;
  --color-primary-500:    #2F4F9F;   /* base */
  --color-primary-600:    #263E82;
  --color-primary-700:    #1E3470;
  --color-primary-800:    #162757;
  --color-primary-900:    #0E1A3D;

  /* === ORO SECUNDARIO (Heritage Gold) === */
  --color-secondary:        #D4A017;   /* Acento dorado — badges, highlights */
  --color-secondary-tint:   #E8BC45;   /* Hover dorado */
  --color-secondary-shade:  #A07C10;   /* Pressed dorado */
  --color-secondary-pale:   #FBF4E0;   /* Fondo dorado suave */
  --color-secondary-50:     #FEFAED;
  --color-secondary-100:    #FBF0C8;
  --color-secondary-200:    #F5DC87;
  --color-secondary-300:    #E8BC45;
  --color-secondary-400:    #D4A017;   /* base */
  --color-secondary-500:    #B88A12;
  --color-secondary-600:    #A07C10;
  --color-secondary-700:    #7A5E0C;
  --color-secondary-800:    #564209;
  --color-secondary-900:    #312506;

  /* === NEUTROS === */
  --color-dark:          #1C1C1C;   /* Texto principal, fondos oscuros */
  --color-dark-soft:     #2E2E2E;
  --color-dark-muted:    #444444;
  --color-gray-700:      #555555;
  --color-gray-600:      #666666;
  --color-gray-500:      #888888;   /* Texto secundario */
  --color-gray-400:      #AAAAAA;
  --color-gray-300:      #CCCCCC;
  --color-gray-200:      #E0E0E0;
  --color-gray-100:      #F0F0F0;
  --color-gray-50:       #F8F8F8;
  --color-light:         #FFFFFF;

  /* === ESTADOS SEMÁNTICOS === */
  --color-success:        #27AE60;
  --color-success-tint:   #2ECC71;
  --color-success-shade:  #1E8449;
  --color-success-pale:   #E8F8EF;

  --color-warning:        #E67E22;
  --color-warning-tint:   #F39C12;
  --color-warning-shade:  #CA6F1E;
  --color-warning-pale:   #FEF5E7;

  --color-error:          #C0392B;
  --color-error-tint:     #E74C3C;
  --color-error-shade:    #A93226;
  --color-error-pale:     #FDEDEC;

  --color-info:           #2980B9;
  --color-info-tint:      #3498DB;
  --color-info-shade:     #1F618D;
  --color-info-pale:      #EBF5FB;

  /* === SUPERFICIES (UI) === */
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F8FAFC;
  --color-surface-3:      #F0F4FA;
  --color-surface-border: #DDE3EF;
  --color-surface-line:   rgba(47, 79, 159, 0.12);

  /* === MODO OSCURO — superficie (dark UI) === */
  --color-dark-bg:        #07111F;
  --color-dark-bg-2:      #0D1727;
  --color-dark-surface:   #0F1D33;
  --color-dark-surface-2: #142544;
  --color-dark-text:      #EAF2FF;
  --color-dark-muted-text:#90A4BF;
  --color-dark-border:    rgba(132, 162, 199, 0.2);

  /* === OVERLAY === */
  --color-overlay-light:  rgba(255, 255, 255, 0.08);
  --color-overlay-dark:   rgba(0, 0, 0, 0.45);
  --color-scrim:          rgba(7, 17, 31, 0.72);
}

/* ─────────────────────────────────────────────────────────────────
   3. GRADIENTES
   ─────────────────────────────────────────────────────────────────
   Uso: background: var(--gradient-primary);
   ───────────────────────────────────────────────────────────────── */
:root {

  /* Primarios */
  --gradient-primary:
    linear-gradient(135deg, #2F4F9F 0%, #1E3470 100%);
  --gradient-primary-horizontal:
    linear-gradient(90deg, #2F4F9F 0%, #1E3470 100%);
  --gradient-primary-light:
    linear-gradient(135deg, #4B70C9 0%, #2F4F9F 100%);

  /* Dorado */
  --gradient-secondary:
    linear-gradient(135deg, #E8BC45 0%, #D4A017 60%, #A07C10 100%);
  --gradient-secondary-horizontal:
    linear-gradient(90deg, #D4A017 0%, #A07C10 100%);

  /* Hero / portada */
  --gradient-hero:
    linear-gradient(150deg, #0E1A3D 0%, #1E3470 40%, #2F4F9F 100%);
  --gradient-hero-radial:
    radial-gradient(circle at 25% 25%, rgba(75, 112, 201, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(212, 160, 23, 0.20) 0%, transparent 40%),
    linear-gradient(180deg, #07111F 0%, #0D1727 100%);

  /* Superficies suaves */
  --gradient-surface:
    linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 100%);
  --gradient-surface-blue:
    linear-gradient(180deg, #F0F4FC 0%, #FAFBFF 100%);
  --gradient-surface-gold:
    linear-gradient(180deg, #FBF4E0 0%, #FFFDF5 100%);

  /* Overlay sobre imágenes */
  --gradient-overlay-bottom:
    linear-gradient(to top, rgba(14, 26, 61, 0.85) 0%, transparent 100%);
  --gradient-overlay-dark:
    linear-gradient(135deg, rgba(14, 26, 61, 0.95) 0%, rgba(30, 52, 112, 0.80) 100%);

  /* Acentos / decorativos */
  --gradient-accent-glow:
    radial-gradient(circle, rgba(75, 112, 201, 0.6) 0%, transparent 70%);
  --gradient-gold-glow:
    radial-gradient(circle, rgba(212, 160, 23, 0.5) 0%, transparent 70%);

  /* Texto (clip) */
  --gradient-text-primary:
    linear-gradient(135deg, #4B70C9 0%, #2F4F9F 100%);
  --gradient-text-gold:
    linear-gradient(135deg, #E8BC45 0%, #D4A017 100%);
}

/* ─────────────────────────────────────────────────────────────────
   4. TIPOGRAFÍA
   ─────────────────────────────────────────────────────────────────
   Aplicación:
     Headings  → Montserrat 600-700
     Body      → Inter 400-500
     Code/Data → JetBrains Mono 400
   ───────────────────────────────────────────────────────────────── */
:root {

  /* Familias */
  --font-heading: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', 'Courier New', monospace;

  /* Escala de tamaños (base 16px) */
  --text-xs:   0.75rem;     /* 12px — labels, captions, chips */
  --text-sm:   0.875rem;    /* 14px — body small, table text */
  --text-base: 1rem;        /* 16px — body principal */
  --text-lg:   1.125rem;    /* 18px — body grande */
  --text-xl:   1.25rem;     /* 20px — subtítulos pequeños */
  --text-2xl:  1.5rem;      /* 24px — subtítulos */
  --text-3xl:  1.875rem;    /* 30px — títulos de sección */
  --text-4xl:  2.25rem;     /* 36px — títulos de página */
  --text-5xl:  3rem;        /* 48px — hero title */
  --text-6xl:  3.75rem;     /* 60px — display grande */
  --text-7xl:  4.5rem;      /* 72px — display hero XL */

  /* Pesos */
  --font-light:     300;
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* Altura de línea */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Espaciado entre letras */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;
  --tracking-caps:     0.08em;   /* Para textos en mayúsculas */
}

/* ─────────────────────────────────────────────────────────────────
   5. ESPACIADO
   ─────────────────────────────────────────────────────────────────
   Escala 4px base
   ───────────────────────────────────────────────────────────────── */
:root {
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /*  2px */
  --space-1:   0.25rem;   /*  4px */
  --space-1-5: 0.375rem;  /*  6px */
  --space-2:   0.5rem;    /*  8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-9:   2.25rem;   /* 36px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */
  --space-64:  16rem;     /* 256px */
}

/* ─────────────────────────────────────────────────────────────────
   6. RADIO DE BORDE
   ─────────────────────────────────────────────────────────────────
   ───────────────────────────────────────────────────────────────── */
:root {
  --radius-none:  0;
  --radius-sm:    0.25rem;    /*  4px — inputs, tags pequeños */
  --radius-md:    0.5rem;     /*  8px — botones, inputs estándar */
  --radius-lg:    0.75rem;    /* 12px — cards pequeñas */
  --radius-xl:    1rem;       /* 16px — cards */
  --radius-2xl:   1.125rem;   /* 18px — cards grandes */
  --radius-3xl:   1.5rem;     /* 24px — modales, panels */
  --radius-full:  9999px;     /* Completamente redondo — chips, avatares */
}

/* ─────────────────────────────────────────────────────────────────
   7. SOMBRAS Y ELEVACIÓN
   ─────────────────────────────────────────────────────────────────
   Basadas en azul primario para coherencia de marca
   ───────────────────────────────────────────────────────────────── */
:root {
  --shadow-none: none;

  /* Elevación neutral */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 18px 45px rgba(2, 10, 22, 0.16);
  --shadow-2xl: 0 32px 64px rgba(2, 10, 22, 0.20);

  /* Elevación con color de marca */
  --shadow-primary-sm: 0 2px 10px rgba(47, 79, 159, 0.20);
  --shadow-primary-md: 0 4px 20px rgba(47, 79, 159, 0.28);
  --shadow-primary-lg: 0 8px 40px rgba(47, 79, 159, 0.35);

  --shadow-secondary-sm: 0 2px 10px rgba(212, 160, 23, 0.25);
  --shadow-secondary-md: 0 4px 20px rgba(212, 160, 23, 0.32);

  /* Glow (hover/focus interactivos) */
  --shadow-glow-primary:   0 0 0 3px rgba(47, 79, 159, 0.30);
  --shadow-glow-secondary: 0 0 0 3px rgba(212, 160, 23, 0.35);
  --shadow-glow-error:     0 0 0 3px rgba(192, 57, 43, 0.30);

  /* Focus ring (accesibilidad) */
  --shadow-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #2F4F9F;
  --shadow-focus-dark: 0 0 0 2px #07111F, 0 0 0 4px #4B70C9;

  /* Inset (inputs, pressed states) */
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-inset-md: inset 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* ─────────────────────────────────────────────────────────────────
   8. TRANSICIONES Y ANIMACIONES
   ─────────────────────────────────────────────────────────────────
   ───────────────────────────────────────────────────────────────── */
:root {

  /* Duraciones */
  --duration-instant: 75ms;
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-slowest: 1000ms;

  /* Easings */
  --ease-linear:      linear;
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);  /* Rebote suave */
  --ease-smooth:      cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Transiciones precompuestas */
  --transition-base:     all var(--duration-base) var(--ease-in-out);
  --transition-fast:     all var(--duration-fast) var(--ease-out);
  --transition-color:    color var(--duration-fast) var(--ease-out),
                         background-color var(--duration-fast) var(--ease-out),
                         border-color var(--duration-fast) var(--ease-out);
  --transition-shadow:   box-shadow var(--duration-base) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-spring);
  --transition-opacity:  opacity var(--duration-base) var(--ease-in-out);
}

/* Keyframes de utilidad */
@keyframes brand-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes brand-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes brand-slide-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes brand-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes brand-pulse-primary {
  0%, 100% { box-shadow: 0 0 0 0   rgba(47, 79, 159, 0.5); }
  50%       { box-shadow: 0 0 0 12px rgba(47, 79, 159, 0); }
}

@keyframes brand-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

@keyframes brand-spin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────
   9. Z-INDEX
   ─────────────────────────────────────────────────────────────────
   ───────────────────────────────────────────────────────────────── */
:root {
  --z-hide:     -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-banner:    250;
  --z-overlay:   300;
  --z-modal:     400;
  --z-popover:   450;
  --z-toast:     500;
  --z-tooltip:   600;
  --z-top:       9999;
}

/* ─────────────────────────────────────────────────────────────────
   10. CLASES DE UTILIDAD DE MARCA
   ─────────────────────────────────────────────────────────────────
   Listas para usar directamente en HTML sin framework
   ───────────────────────────────────────────────────────────────── */

/* Fondos */
.bg-brand-primary   { background-color: var(--color-primary); }
.bg-brand-secondary { background-color: var(--color-secondary); }
.bg-brand-dark      { background-color: var(--color-dark); }
.bg-brand-pale      { background-color: var(--color-primary-pale); }
.bg-gradient-primary   { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }
.bg-gradient-hero      { background: var(--gradient-hero); }

/* Texto */
.text-brand-primary   { color: var(--color-primary); }
.text-brand-secondary { color: var(--color-secondary); }
.text-brand-dark      { color: var(--color-dark); }
.text-brand-light     { color: var(--color-light); }
.text-brand-muted     { color: var(--color-gray-500); }

/* Texto degradado */
.text-gradient-primary {
  background: var(--gradient-text-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-gold {
  background: var(--gradient-text-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Tipografía */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

/* Bordes */
.border-brand-primary   { border-color: var(--color-primary); }
.border-brand-secondary { border-color: var(--color-secondary); }

/* Sombras */
.shadow-brand-primary   { box-shadow: var(--shadow-primary-md); }
.shadow-brand-secondary { box-shadow: var(--shadow-secondary-md); }

/* Botón primario de marca */
.btn-brand-primary {
  background: var(--color-primary);
  color: var(--color-light);
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: var(--transition-base);
  box-shadow: var(--shadow-primary-sm);
}
.btn-brand-primary:hover {
  background: var(--color-primary-tint);
  box-shadow: var(--shadow-primary-md);
  transform: translateY(-1px);
}
.btn-brand-primary:active {
  background: var(--color-primary-shade);
  transform: translateY(0);
  box-shadow: var(--shadow-primary-sm);
}

/* Botón secundario (gold) */
.btn-brand-secondary {
  background: var(--color-secondary);
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: var(--transition-base);
  box-shadow: var(--shadow-secondary-sm);
}
.btn-brand-secondary:hover {
  background: var(--color-secondary-tint);
  box-shadow: var(--shadow-secondary-md);
  transform: translateY(-1px);
}

/* Card de marca */
.card-brand {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: var(--transition-shadow);
}
.card-brand:hover {
  box-shadow: var(--shadow-primary-md);
  border-color: var(--color-primary-100);
}

/* Badge de marca */
.badge-brand-primary {
  background: var(--color-primary-pale);
  color: var(--color-primary-shade);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
}
.badge-brand-secondary {
  background: var(--color-secondary-50);
  color: var(--color-secondary-shade);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
}