/* ===========================================================
   CEREPSI · DESIGN TOKENS
   Centro de Resiliencia Psicológica — Plataforma de Cursos
   ===========================================================
   Inspirado en la identidad visual del logo:
   - Vino/Burgundy (Cerepsi wordmark)
   - Verde sutil (plántula del logo)
   - Rosa palo (pincelada del logo)
   - Fondos blancos / gris muy claro
   - Acentos mínimos, solo en lo importante
   =========================================================== */

:root {
  /* -----------------------------------------------------------
     PALETA — Brand
     ----------------------------------------------------------- */

  /* Burgundy / Vino — color de marca principal del wordmark "Cerepsi"
     Uso: CTAs primarios, links importantes, focus rings, indicadores activos */
  --color-brand-50:  #FBF2F4;
  --color-brand-100: #F5DDE3;
  --color-brand-200: #ECB9C5;
  --color-brand-300: #D98A9F;
  --color-brand-400: #B95772;
  --color-brand-500: #8E2745;  /* base — burgundy del logo */
  --color-brand-600: #761F3A;
  --color-brand-700: #5E182E;
  --color-brand-800: #471224;
  --color-brand-900: #2F0C18;

  /* Sage Green — extraído de la plántula del logo
     Uso: solo en estados de éxito, "completado", progreso terminado */
  --color-accent-50:  #F0F5F1;
  --color-accent-100: #DCE9DE;
  --color-accent-200: #B5D0BA;
  --color-accent-300: #88B190;
  --color-accent-400: #5C9069;
  --color-accent-500: #3F7549;  /* base sage */
  --color-accent-600: #305A38;
  --color-accent-700: #25462B;

  /* Soft Blush — rosa palo del trazo de pincel del logo
     Uso: backgrounds decorativos, badges suaves, hero accents (muy moderado) */
  --color-blush-50:  #FDF6F4;
  --color-blush-100: #F9E8E3;
  --color-blush-200: #F1CFC5;
  --color-blush-300: #E5B0A2;

  /* -----------------------------------------------------------
     NEUTROS — Fondos y Texto
     ----------------------------------------------------------- */
  --color-white: #FFFFFF;
  --color-bg:        #FFFFFF;   /* fondo base de la app */
  --color-bg-subtle: #FAFAF9;   /* gris muy claro para secciones alternadas */
  --color-bg-muted:  #F4F3F1;   /* tarjetas elevadas sobre subtle, divisores suaves */
  --color-surface:   #FFFFFF;   /* cards y modales */

  --color-border:        #ECEAE7;  /* bordes default */
  --color-border-strong: #D9D6D2;  /* bordes en hover/focus de inputs */

  --color-text-primary:   #1F1A1C;  /* casi negro con tinte cálido para legibilidad */
  --color-text-secondary: #5A5358;
  --color-text-muted:     #8C8589;
  --color-text-on-brand:  #FFFFFF;  /* texto sobre fondos burgundy */
  --color-text-link:      var(--color-brand-500);

  /* -----------------------------------------------------------
     ESTADO
     ----------------------------------------------------------- */
  --color-success: var(--color-accent-500);
  --color-success-bg: var(--color-accent-50);
  --color-warning: #C97B23;
  --color-warning-bg: #FBF1E3;
  --color-danger:  #B73A3A;
  --color-danger-bg: #FBEDED;
  --color-info:    #2F6EB5;
  --color-info-bg: #EAF1FB;

  /* -----------------------------------------------------------
     TIPOGRAFÍA
     ----------------------------------------------------------- */
  /* Inter: cuerpo / UI. Limpia, neutral, alta legibilidad.
     Fraunces: titulares hero y momentos de marca (opcional). */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;

  /* Escala tipográfica (1.250 — major third) */
  --font-size-xs:   0.75rem;   /* 12px — captions, labels pequeños */
  --font-size-sm:   0.875rem;  /* 14px — secondary text, meta */
  --font-size-base: 1rem;      /* 16px — cuerpo */
  --font-size-md:   1.125rem;  /* 18px — párrafos destacados */
  --font-size-lg:   1.25rem;   /* 20px — H4 */
  --font-size-xl:   1.5rem;    /* 24px — H3 */
  --font-size-2xl:  1.875rem;  /* 30px — H2 */
  --font-size-3xl:  2.25rem;   /* 36px — H1 */
  --font-size-4xl:  3rem;      /* 48px — Hero */
  --font-size-5xl:  3.75rem;   /* 60px — Hero XL (desktop) */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;

  /* -----------------------------------------------------------
     ESPACIADO — escala 4px
     ----------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* -----------------------------------------------------------
     RADIOS — esquinas suaves y modernas
     ----------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* inputs, botones default */
  --radius-lg:   14px;   /* cards */
  --radius-xl:   20px;   /* modales, hero panels */
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* -----------------------------------------------------------
     SOMBRAS — sutiles, casi imperceptibles
     ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(31, 26, 28, 0.04);
  --shadow-sm: 0 1px 2px rgba(31, 26, 28, 0.05), 0 1px 3px rgba(31, 26, 28, 0.06);
  --shadow-md: 0 2px 4px rgba(31, 26, 28, 0.05), 0 4px 12px rgba(31, 26, 28, 0.06);
  --shadow-lg: 0 4px 8px rgba(31, 26, 28, 0.06), 0 12px 32px rgba(31, 26, 28, 0.08);
  --shadow-xl: 0 8px 16px rgba(31, 26, 28, 0.08), 0 24px 48px rgba(31, 26, 28, 0.10);

  /* Focus ring — usa burgundy a baja opacidad */
  --shadow-focus: 0 0 0 3px rgba(142, 39, 69, 0.22);

  /* -----------------------------------------------------------
     ANIMACIÓN
     ----------------------------------------------------------- */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    220ms;
  --duration-slow:    320ms;
  --duration-slower:  480ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* spring-like, principal */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);

  /* -----------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;   /* máximo en monitores grandes */

  --content-width: 1200px;   /* ancho de contenido principal */

  /* Z-index */
  --z-base:      1;
  --z-dropdown:  10;
  --z-sticky:    20;
  --z-overlay:   30;
  --z-modal:     40;
  --z-popover:   50;
  --z-toast:     60;
  --z-tooltip:   70;

  /* -----------------------------------------------------------
     BREAKPOINTS (referencia — usar en @media)
     ----------------------------------------------------------- */
  /* mobile-first
     sm:  640px   — móvil grande / tablets pequeñas
     md:  768px   — tablets
     lg:  1024px  — laptops
     xl:  1280px  — desktops
     2xl: 1536px  — monitores grandes
  */
}

/* ===========================================================
   RESETEO + BASE
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-brand-600); }
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* ===========================================================
   ESCALA TIPOGRÁFICA (clases utilitarias)
   =========================================================== */
.text-display {
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  font-weight: var(--font-weight-bold);
}
.text-h1 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  font-weight: var(--font-weight-bold);
}
.text-h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-semibold);
}
.text-h3 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-semibold);
}
.text-h4 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-semibold);
}
.text-body  { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); }
.text-small { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.text-caption { font-size: var(--font-size-xs); color: var(--color-text-muted); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }

/* Responsive type — agranda titulares en desktop */
@media (min-width: 1024px) {
  .text-display { font-size: var(--font-size-5xl); }
  .text-h1 { font-size: var(--font-size-4xl); }
  .text-h2 { font-size: var(--font-size-3xl); }
}

/* ===========================================================
   BOTONES — solo el acento donde importa
   =========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color            var(--duration-fast) var(--ease-out),
    border-color     var(--duration-fast) var(--ease-out),
    transform        var(--duration-instant) var(--ease-out),
    box-shadow       var(--duration-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background-color: var(--color-brand-500);
  color: var(--color-text-on-brand);
}
.btn-primary:hover:not(:disabled) { background-color: var(--color-brand-600); }

.btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background-color: var(--color-bg-subtle);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--font-size-base); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs); }

/* ===========================================================
   CARDS — base para tarjetas de cursos
   =========================================================== */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out),
              transform    var(--duration-base) var(--ease-out),
              box-shadow   var(--duration-base) var(--ease-out);
}
.card-interactive:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ===========================================================
   INPUTS
   =========================================================== */
.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow   var(--duration-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-text-muted); }
.input:hover { border-color: var(--color-border-strong); }
.input:focus {
  outline: none;
  border-color: var(--color-brand-500);
  box-shadow: var(--shadow-focus);
}

/* ===========================================================
   PROGRESS BAR
   =========================================================== */
.progress {
  width: 100%;
  height: 6px;
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background-color: var(--color-accent-500);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}
.progress-fill-brand { background-color: var(--color-brand-500); }

/* ===========================================================
   BADGES
   =========================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-muted);
  color: var(--color-text-secondary);
}
.badge-success { background-color: var(--color-success-bg); color: var(--color-accent-700); }
.badge-brand   { background-color: var(--color-brand-50);    color: var(--color-brand-600); }

/* ===========================================================
   UTILIDADES MÍNIMAS
   =========================================================== */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (min-width: 768px) {
  .container { padding-left: var(--space-6); padding-right: var(--space-6); }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}