/* ==========================================================================
   variables.css — Sistema de diseño base
   Informe Técnico FuXion Perú — Volumen 41
   Estilo: Médico · Técnico · Premium · Educativo · Confiable
   ========================================================================== */

/* --------------------------------------------------------------------------
   IMPORTAR TIPOGRAFÍAS — Google Fonts
   Inter: legibilidad técnica / Merriweather: tono editorial
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Merriweather:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* ════════════════════════════════════════════════════════════════════════
     1. PALETA DE COLORES
     Base: azul marino profundo + blanco técnico + verde científico
     Acento: dorado sobrio para jerarquía premium
     ════════════════════════════════════════════════════════════════════════ */

  /* — Primario: azul marino — confianza, rigor médico */
  --color-primary:         #1B3A6B;   /* navy profundo */
  --color-primary-dark:    #122749;   /* hover / activo */
  --color-primary-light:   #2A5298;   /* variante clara */
  --color-primary-soft:    #EBF0F8;   /* fondo suave primario */

  /* — Secundario: azul petróleo — científico, natural */
  --color-secondary:       #1E6A7A;   /* teal / petróleo */
  --color-secondary-dark:  #154E5C;
  --color-secondary-light: #2E8FA2;
  --color-secondary-soft:  #E8F4F7;

  /* — Acento: dorado sobrio — premium, autoridad científica */
  --color-accent:          #B89A3E;   /* dorado técnico */
  --color-accent-dark:     #8F7530;
  --color-accent-light:    #D4B85A;
  --color-accent-soft:     #FAF4E1;

  /* — Fondos */
  --color-bg:              #F7F9FC;   /* fondo principal — blanco azulado muy suave */
  --color-bg-soft:         #EEF2F8;   /* secciones alternas */
  --color-bg-card:         #FFFFFF;   /* tarjetas y paneles */
  --color-bg-dark:         #0F1E35;   /* secciones oscuras / hero */

  /* — Texto */
  --color-text:            #1A2535;   /* texto principal — negro azulado */
  --color-text-secondary:  #4A5E75;   /* texto secundario */
  --color-text-muted:      #7F93A8;   /* texto terciario / metadata */
  --color-text-inverse:    #FFFFFF;   /* sobre fondos oscuros */
  --color-text-inverse-muted: #D8E4F2;  /* texto secundario sobre fondos oscuros */
  --color-heading-inverse: #F5FAFF;   /* títulos sobre fondos oscuros */
  --color-link-inverse:    #7DD3FC;   /* enlaces sobre fondos oscuros */
  --color-border-inverse:  rgba(255, 255, 255, 0.18); /* bordes sobre fondos oscuros */
  --color-text-link:       #1B5E9B;   /* enlaces */
  --color-text-link-hover: #1B3A6B;

  /* — Bordes */
  --color-border:          #D0DAE8;   /* borde estándar */
  --color-border-soft:     #E8EFF7;   /* borde muy sutil */
  --color-border-strong:   #A8B8CC;   /* borde con énfasis */

  /* — Semánticos */
  --color-success:         #1E7A4A;   /* verde médico — confianza */
  --color-success-soft:    #E8F5EE;
  --color-warning:         #B56F1A;   /* ámbar — compliance / advertencia */
  --color-warning-soft:    #FDF3E3;
  --color-error:           #C0392B;   /* rojo — error / prohibido */
  --color-error-soft:      #FDECEA;
  --color-info:            #1B5E9B;   /* azul informativo */
  --color-info-soft:       #E8F0FB;

  /* — Botones */
  --color-btn-primary-bg:     var(--color-primary);
  --color-btn-primary-text:   #FFFFFF;
  --color-btn-primary-hover:  var(--color-primary-dark);
  --color-btn-secondary-bg:   transparent;
  --color-btn-secondary-text: var(--color-primary);
  --color-btn-secondary-border: var(--color-primary);

  /* — Utilidad */
  --color-white:           #FFFFFF;
  --color-black:           #0A0F1A;
  --color-overlay:         rgba(15, 30, 53, 0.55);   /* overlay sobre imágenes */


  /* ════════════════════════════════════════════════════════════════════════
     2. TIPOGRAFÍA
     ════════════════════════════════════════════════════════════════════════ */

  /* — Familias */
  --font-primary:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', monospace;

  /* — Escala de tamaños */
  --text-xs:    0.75rem;    /*  12px — notas, badges, metadata */
  --text-sm:    0.875rem;   /*  14px — texto pequeño, captions */
  --text-base:  1rem;       /*  16px — párrafo base */
  --text-md:    1.125rem;   /*  18px — párrafo destacado */
  --text-lg:    1.25rem;    /*  20px — lead / intro */
  --text-xl:    1.5rem;     /*  24px — H4 / subtítulo */
  --text-2xl:   1.875rem;   /*  30px — H3 */
  --text-3xl:   2.25rem;    /*  36px — H2 */
  --text-4xl:   3rem;       /*  48px — H1 desktop */
  --text-5xl:   3.75rem;    /*  60px — H1 hero */

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

  /* — Alturas de línea */
  --lh-tight:    1.2;    /* títulos grandes */
  --lh-snug:     1.35;   /* subtítulos */
  --lh-base:     1.6;    /* párrafos */
  --lh-relaxed:  1.75;   /* texto largo / lectura */
  --lh-loose:    2;      /* texto muy aireado */

  /* — Tracking (letter-spacing) */
  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;   /* labels, badges, secciones */
  --ls-widest:   0.15em;   /* titulos todo-mayúscula */


  /* ════════════════════════════════════════════════════════════════════════
     3. ESPACIADO — escala base 4px
     ════════════════════════════════════════════════════════════════════════ */

  --space-xs:    0.25rem;   /*  4px */
  --space-sm:    0.5rem;    /*  8px */
  --space-md:    1rem;      /* 16px */
  --space-lg:    1.5rem;    /* 24px */
  --space-xl:    2rem;      /* 32px */
  --space-2xl:   3rem;      /* 48px */
  --space-3xl:   4rem;      /* 64px */
  --space-4xl:   6rem;      /* 96px */
  --space-section: 5rem;    /* 80px — separación entre secciones */

  /* — Legacy aliases (compatibilidad con CSS ya existente) */
  --space-1:  var(--space-xs);
  --space-2:  var(--space-sm);
  --space-4:  var(--space-md);
  --space-6:  var(--space-lg);
  --space-8:  var(--space-xl);
  --space-12: var(--space-2xl);
  --space-16: var(--space-3xl);
  --space-24: var(--space-4xl);


  /* ════════════════════════════════════════════════════════════════════════
     4. LAYOUT — anchos y contenedor
     ════════════════════════════════════════════════════════════════════════ */

  --container-max:       1280px;   /* ancho máximo del sitio */
  --container-content:    960px;   /* ancho de contenido general */
  --container-reading:    680px;   /* ancho óptimo de lectura */
  --container-narrow:     540px;   /* columna estrecha / formularios */
  --container-padding:   var(--space-lg);   /* padding lateral del contenedor */
  --container-padding-sm: var(--space-md);  /* en móvil */


  /* ════════════════════════════════════════════════════════════════════════
     5. BORDES, RADIOS Y SOMBRAS
     ════════════════════════════════════════════════════════════════════════ */

  /* — Radios */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;   /* píldoras / badges */

  /* — Borde estándar */
  --border:          1px solid var(--color-border);
  --border-soft:     1px solid var(--color-border-soft);
  --border-strong:   1px solid var(--color-border-strong);
  --border-accent:   2px solid var(--color-accent);
  --border-primary:  2px solid var(--color-primary);

  /* — Sombras */
  --shadow-xs:      0 1px 2px rgba(15, 30, 53, 0.05);
  --shadow-sm:      0 2px 6px rgba(15, 30, 53, 0.08);
  --shadow-md:      0 4px 16px rgba(15, 30, 53, 0.10);
  --shadow-lg:      0 8px 28px rgba(15, 30, 53, 0.12);
  --shadow-xl:      0 16px 48px rgba(15, 30, 53, 0.14);
  --shadow-premium: 0 8px 32px rgba(27, 58, 107, 0.18);   /* sombra azul premium */
  --shadow-card:    var(--shadow-sm);
  --shadow-modal:   var(--shadow-xl);


  /* ════════════════════════════════════════════════════════════════════════
     6. TRANSICIONES Y ANIMACIONES
     ════════════════════════════════════════════════════════════════════════ */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ════════════════════════════════════════════════════════════════════════
     7. Z-INDEX
     ════════════════════════════════════════════════════════════════════════ */

  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   150;
  --z-header:   200;
  --z-overlay:  250;
  --z-modal:    300;
  --z-toast:    400;


  /* ════════════════════════════════════════════════════════════════════════
     8. BREAKPOINTS — referencia (no usables directamente en @media)
        Usar en JS como: getComputedStyle(root).getPropertyValue('--bp-md')
     ════════════════════════════════════════════════════════════════════════

     mobile:  hasta 600px
     tablet:  601px – 900px
     laptop:  901px – 1200px
     desktop: 1201px – 1440px
     wide:    1441px+

     ════════════════════════════════════════════════════════════════════════ */

  --bp-mobile:   600;   /* sin px — para uso en JS */
  --bp-tablet:   900;
  --bp-laptop:  1200;
  --bp-desktop: 1440;
  --bp-wide:    1920;


  /* ════════════════════════════════════════════════════════════════════════
     9. VARIABLES ESPECIALES — COMPLIANCE Y AVISOS TÉCNICOS
     Para cajas de aviso legal, notas técnicas, badges informativos
     ════════════════════════════════════════════════════════════════════════ */

  /* — Aviso legal / disclaimer */
  --compliance-legal-bg:      #FEF9EC;
  --compliance-legal-border:  #D4A017;
  --compliance-legal-text:    #5C4000;
  --compliance-legal-icon:    #B8860B;

  /* — Nota técnica / científica */
  --compliance-tech-bg:       #EBF3FB;
  --compliance-tech-border:   #1B5E9B;
  --compliance-tech-text:     #0D2D4F;
  --compliance-tech-icon:     #1B5E9B;

  /* — Advertencia / precaución */
  --compliance-warn-bg:       #FDF0E6;
  --compliance-warn-border:   #B56F1A;
  --compliance-warn-text:     #5C2E00;
  --compliance-warn-icon:     #B56F1A;

  /* — Claims prohibidos */
  --compliance-prohib-bg:     #FDECEA;
  --compliance-prohib-border: #C0392B;
  --compliance-prohib-text:   #4A0000;

  /* — Badges */
  --badge-educativo-bg:     #1E6A7A;   /* teal — contenido educativo */
  --badge-educativo-text:   #FFFFFF;
  --badge-fuente-bg:        #1E7A4A;   /* verde — fuente científica */
  --badge-fuente-text:      #FFFFFF;
  --badge-pendiente-bg:     #8A97A8;   /* gris neutro — pendiente revisión */
  --badge-pendiente-text:   #FFFFFF;
  --badge-premium-bg:       #B89A3E;   /* dorado — ficha premium */
  --badge-premium-text:     #FFFFFF;
  --badge-efsa-bg:          #1B3A6B;   /* navy — aval EFSA */
  --badge-efsa-text:        #FFFFFF;


  /* ════════════════════════════════════════════════════════════════════════
     10. MEJORAS VISUALES — V2
     ════════════════════════════════════════════════════════════════════════ */

  /* — Hero dot-grid pattern */
  --hero-dot-color:       rgba(255, 255, 255, 0.055);
  --hero-dot-size:        28px 28px;

  /* — Tablas reforzadas */
  --table-header-bg:      #162C52;   /* navy oscuro — más contraste que primary-soft */
  --table-header-text:    #FFFFFF;
  --table-header-accent:  var(--color-accent-light);   /* dorado para primera columna */
  --table-zebra-bg:       rgba(27, 58, 107, 0.038);   /* tint alternado muy sutil */

  /* — Section title accent gradient */
  --section-title-gradient: linear-gradient(
    90deg,
    var(--color-accent)     0%,
    var(--color-primary)    45%,
    transparent             80%
  );

  /* — Card gradient top-border */
  --card-top-gradient: linear-gradient(
    90deg,
    var(--color-primary)    0%,
    var(--color-secondary)  55%,
    var(--color-accent)     100%
  );

  /* — Sidebar active indicator */
  --nav-active-bar:       3px solid var(--color-accent);
  --nav-active-bg:        rgba(184, 154, 62, 0.08);   /* gold soft */

  /* — Sombra hover elevada */
  --shadow-hover:         0 12px 40px rgba(27, 58, 107, 0.14), 0 2px 8px rgba(27, 58, 107, 0.07);

}


/* Dark mode desactivado — plataforma forzada a light mode siempre */