/* ============================================================
   CEAD VIP — Programa de Fidelización y Referidos
   styles.css | Diseño institucional premium
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  /* ── Paleta institucional CEAD · Alivium S.A.S ── */
  --cead-dark:         #1A3272;   /* Azul marino logo */
  --cead-medium:       #2A5594;
  --cead-menu:         #25488a;
  --cead-celeste:      #00AEEF;   /* Cyan logo "cead" */
  --cead-celeste-light:#5DD3F5;
  --cead-celeste-soft: #B3E6F8;
  --cead-heart:        #E53E3E;   /* Rojo corazón logo */
  --cead-bg:           #F5F8FC;
  --cead-gray:         #E4EBF5;
  --cead-text:         #5A6678;
  --cead-dark-text:    #0F1F3D;
  --cead-success:      #0E9F8A;
  --cead-gold:         #F2B544;
  --cead-danger:       #EF4444;

  /* ── Escala azul — mapeada a paleta CEAD ────────────────── */
  --blue-950: #040e22;
  --blue-900: #0a1a3e;
  --blue-800: #1A3272;   /* = --cead-dark */
  --blue-700: #1e3d85;
  --blue-600: #2A5594;   /* = --cead-medium  (botones, links) */
  --blue-500: #00AEEF;   /* = --cead-celeste (acento principal) */
  --blue-400: #33C1F4;
  --blue-300: #66D3F7;
  --blue-200: #B3E6FB;   /* = --cead-celeste-soft */
  --blue-100: #D9F3FD;
  --blue-50:  #EFF9FE;

  /* ── Teal — mapeado a cyan CEAD ─────────────────────────── */
  --teal-700: #1A3272;   /* = --cead-dark */
  --teal-600: #2A5594;   /* = --cead-medium */
  --teal-500: #00AEEF;   /* = --cead-celeste */
  --teal-400: #33C1F4;
  --teal-100: #D9F3FD;
  --teal-50:  #EFF9FE;

  /* Dorado */
  --gold-600: #b45309;
  --gold-500: #d97706;
  --gold-400: #f59e0b;
  --gold-300: #fbbf24;
  --gold-100: #fef3c7;
  --gold-50:  #fffbeb;

  /* Neutrales */
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;
  --white:     #ffffff;

  /* Semánticos */
  --green-600: #16a34a;
  --green-500: #22c55e;
  --green-100: #dcfce7;
  --green-50:  #f0fdf4;
  --rose-600:  #e11d48;
  --rose-500:  #f43f5e;
  --rose-100:  #ffe4e6;
  --amber-600: #d97706;
  --amber-100: #fef3c7;
  --indigo-600: #1A3272;   /* = --cead-dark */
  --indigo-100: #D4E1F5;

  /* Tipografía */
  --font-display: 'Sora', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h:  60px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);
  --shadow:    0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.06);
  --shadow-md: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.06);
  --shadow-lg: 0 20px 25px -5px rgba(15,23,42,.10), 0 8px 10px -6px rgba(15,23,42,.06);
  --shadow-blue: 0 4px 14px rgba(0,174,239,.28);  /* sombra cyan CEAD */

  /* Transiciones */
  --transition: 150ms ease;
  --transition-md: 250ms ease;

  /* ── Semánticos adicionales ────────────────────────────── */
  --cead-whatsapp:      #25d366;
  --cead-whatsapp-hover:#1da851;
  --cead-success-hover: #0b8a78;

  /* Sombra de botón primario CEAD */
  --shadow-btn-primary: 0 4px 14px rgba(26, 50, 114, .28);
  --shadow-btn-primary-hover: 0 6px 18px rgba(26, 50, 114, .36);
  --shadow-btn-carnet: 0 3px 10px rgba(245, 158, 11, .32);
  --shadow-btn-carnet-hover: 0 5px 16px rgba(245, 158, 11, .44);
  --shadow-btn-wa: 0 3px 10px rgba(37, 211, 102, .28);
  --shadow-btn-wa-hover: 0 5px 16px rgba(37, 211, 102, .38);

  /* Escala tipográfica — botones y labels */
  --text-xs:  .72rem;   /* badges, labels tiny      */
  --text-sm:  .78rem;   /* botones small, meta info  */
  --text-base:.84rem;   /* botones, td, body regular */
  --text-md:  .9rem;    /* subtítulos, card titles   */
}