/* =============================================
   NACG Suite — Sistema de Diseño Global
   v2.0 — Ocean Blue
   ============================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =============================================
   TOKENS DE DISEÑO
   ============================================= */
:root {

  /* ── PALETA OCEAN BLUE (escala base) ── */
  --c1: #012A4A;   /* fondo más oscuro     */
  --c2: #013A63;   /* fondo superficie     */
  --c3: #01497C;   /* fondo elevado        */
  --c4: #014F86;   /* azul profundo        */
  --c5: #2A6F97;   /* azul marca           */
  --c6: #4A9AB8;   /* azul claro           */
  --c7: #7EC8E3;   /* acento principal     */
  --c8: #B8E0F7;   /* acento suave         */

  /* ── ALIASES SEMÁNTICOS ── */
  --bg-base:       var(--c1);
  --bg-surface:    var(--c2);
  --bg-elevated:   var(--c3);
  --brand:         var(--c5);
  --brand-light:   var(--c6);
  --brand-glow:    var(--c7);
  --brand-pale:    var(--c8);

  /* ── TEXTO ── */
  --blanco:        #FFFFFF;
  --texto:         #E8F4FD;
  --texto-suave:   rgba(184, 224, 247, 0.65);
  --texto-muted:   rgba(184, 224, 247, 0.38);

  /* ── BORDES ── */
  --borde:         rgba(126, 200, 227, 0.15);
  --borde-md:      rgba(126, 200, 227, 0.28);
  --borde-lg:      rgba(126, 200, 227, 0.45);

  /* ── COLORES SEMÁNTICOS ── */
  --color-error:        #F87171;
  --color-error-bg:     rgba(220, 38, 38, 0.12);
  --color-error-borde:  rgba(220, 38, 38, 0.32);
  --color-exito:        var(--c7);
  --color-exito-bg:     rgba(74, 154, 184, 0.15);
  --color-exito-borde:  rgba(126, 200, 227, 0.32);
  --color-alerta:       #FCD34D;
  --color-alerta-bg:    rgba(251, 191, 36, 0.12);
  --color-alerta-borde: rgba(251, 191, 36, 0.32);

  /* ── ESPACIADO ── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ── RADIOS DE BORDE ── */
  --radio:      16px;   /* legado — mantener para compatibilidad */
  --radio-sm:   8px;
  --radio-md:   12px;
  --radio-lg:   16px;
  --radio-xl:   20px;
  --radio-2xl:  24px;
  --radio-full: 50px;

  /* ── TIPOGRAFÍA ── */
  --fuente:     'Segoe UI', system-ui, -apple-system, sans-serif;
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    28px;
  --text-2xl:   44px;
  --text-3xl:   64px;

  /* ── SOMBRAS ── */
  --sombra:     0 8px 32px rgba(1, 42, 74, 0.5);
  --sombra-sm:  0 4px 16px rgba(1, 42, 74, 0.4);
  --sombra-lg:  0 20px 60px rgba(1, 42, 74, 0.5);

  /* ── TRANSICIONES ── */
  --trans-rapido: all 0.2s ease;
  --trans-normal: all 0.3s ease;
  --trans-lento:  all 0.5s ease;
}

/* =============================================
   ESTILOS BASE
   ============================================= */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente);
  background-color: var(--bg-base);
  color: var(--texto);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  font-family: var(--fuente);
}

/* =============================================
   UTILITARIOS GLOBALES
   ============================================= */

/* Texto gradiente */
.grad-text {
  background: linear-gradient(135deg, var(--c7), var(--c8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =============================================
   BOTONES
   ============================================= */

/* Primario — acción principal */
.btn-primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: linear-gradient(135deg, var(--c5), var(--c6));
  color: var(--blanco);
  border: none;
  padding: 14px 32px;
  border-radius: var(--radio-full);
  font-size: var(--text-base);
  font-weight: 600;
  transition: var(--trans-normal);
  box-shadow: 0 4px 20px rgba(42, 111, 151, 0.4);
}

.btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(74, 154, 184, 0.5);
  background: linear-gradient(135deg, var(--c6), var(--c7));
}

.btn-primario:active {
  transform: translateY(0);
}

.btn-primario:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Fantasma — acción secundaria */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: transparent;
  color: var(--c8);
  border: 1px solid var(--borde-md);
  padding: 13px 28px;
  border-radius: var(--radio-full);
  font-size: var(--text-base);
  font-weight: 500;
  transition: var(--trans-normal);
}

.btn-ghost:hover {
  background: rgba(126, 200, 227, 0.08);
  border-color: var(--c7);
  color: var(--blanco);
}

.btn-ghost:active {
  background: rgba(126, 200, 227, 0.14);
}

/* Peligro — acciones destructivas */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error-borde);
  padding: 13px 28px;
  border-radius: var(--radio-full);
  font-size: var(--text-base);
  font-weight: 500;
  transition: var(--trans-normal);
}

.btn-danger:hover {
  background: var(--color-error-bg);
  border-color: var(--color-error);
}