/* ==========================================================================
   base.css — Sistema de Diseño Centralizado
   PanelEncuestas | Refactor UI
   
   ÍNDICE:
   1. Reset
   2. Variables (:root)
      2a. Colores de Marca
      2b. Colores Semánticos
      2c. Colores de Texto
      2d. Fondos y Superficies
      2e. Bordes
      2f. Sombras
      2g. Gradientes
      2h. Tipografía
      2i. Espaciado (escala rem base 16px)
      2j. Radios de Borde
      2k. Transiciones
      2l. Z-Index
   3. Body y estilos globales
   ========================================================================== */


/* ==========================================================================
   1. Reset
   ========================================================================== */

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


/* ==========================================================================
   2. Variables (:root)
   ========================================================================== */

:root {

    /* ------------------------------------------------------------------
       2a. Colores de Marca
       brand-primary  → Teal corporativo  (#00b1b7)
       brand-dark     → Navy corporativo  (#003449)
       brand-accent   → Rosa/Magenta      (#f2296f)
       ------------------------------------------------------------------ */
    --color-brand-primary:       #00b1b7;
    --color-brand-primary-hover: #009399;
    --color-brand-primary-dark:  #003449;
    --color-brand-accent:        #f2296f;
    --color-secondary-hover:     #004d6e;   /* .btn-secondary:hover (navy medio) */

    /* Paleta extendida */
    --color-indigo:              #645def;   /* btn-quota-generator, indigo-600 */
    --color-indigo-hover:        #4f42d6;   /* btn-quota-generator:hover, indigo-700 */
    --color-sky:                 #0ea5e9;   /* badge-beta, sky-500 */


    /* ------------------------------------------------------------------
       2b. Colores Semánticos (feedback / estados)
       ------------------------------------------------------------------ */
    --color-success:        #10b981;
    --color-success-dark:   #059669;
    --color-success-bg:     #f0fdf4;
    --color-success-border: #86efac;
    --color-success-light:  #c6f6d5;
    --color-success-text:   #15803d;
    --color-success-text-dark: #22543d;

    --color-warning:        #f59e0b;
    --color-warning-dark:   #d97706;
    --color-warning-bg:     #fef3c7;
    --color-warning-text:   #78350f;

    --color-danger:         #ef4444;
    --color-danger-hover:   #dc2626;
    --color-danger-bg:      #fef2f2;
    --color-danger-border:  #fecaca;
    --color-danger-text:    #991b1b;
    --color-danger-light:   #fed7d7;
    --color-danger-text-dark: #742a2a;

    --color-info:           #3b82f6;
    --color-info-dark:      #1e40af;


    /* ------------------------------------------------------------------
       2c. Colores de Texto
       ------------------------------------------------------------------ */
    --color-text:           #1e293b;  /* headings y texto principal (Manrope design) */
    --color-text-heading:   #003449;  /* encabezados de sección (brand-dark) */
    --color-text-secondary: #4a5568;  /* texto secundario */
    --color-text-muted:     #64748b;  /* texto atenuado */
    --color-text-placeholder: #94a3b8; /* placeholders */
    --color-text-disabled:  #cbd5e1;  /* estado deshabilitado */
    --color-text-on-primary: #ffffff; /* texto sobre fondos de marca */


    /* ------------------------------------------------------------------
       2d. Fondos y Superficies
       ------------------------------------------------------------------ */
    --color-surface:        #ffffff;
    --color-neutral-white:  #ffffff;                   /* blanco neutro explícito */
    --color-surface-card:   rgba(255, 255, 255, 0.98); /* card / section panels */
    --color-bg-page:        linear-gradient(135deg, #00b1b7 0%, #003449 100%);
    --color-bg-light:       #f7fafc;
    --color-bg-muted:       #f1f5f9;
    --color-bg-hover:       #edf2f7;
    --color-bg-code:        #f8f9fb;


    /* ------------------------------------------------------------------
       2e. Bordes
       ------------------------------------------------------------------ */
    --color-border:         #e2e8f0;
    --color-border-light:   #cbd5e0;
    --color-border-brand:   rgba(0, 177, 183, 0.2);
    --color-border-brand-strong: rgba(0, 177, 183, 0.3);
    --color-brand-primary-subtle: rgba(0, 177, 183, 0.10); /* icon bg, chips, bordes sutiles */
    --color-brand-dark-subtle:    rgba(0, 52, 73, 0.10);   /* divisores sutiles */
    --color-brand-dark-overlay:   rgba(0, 52, 73, 0.70);   /* loading overlay */


    /* ------------------------------------------------------------------
       2f. Sombras
       Las sombras de profundidad "desnudas" usan negro puro.
       Las sombras "de marca" usan el navy (#003449).
       ------------------------------------------------------------------ */
    --shadow-xs:      0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:      0 4px 20px rgba(0, 0, 0, 0.10);
    --shadow-lg:      0 8px 30px rgba(0, 0, 0, 0.15);
    --shadow-xl:      0 10px 40px rgba(0, 0, 0, 0.15);

    /* Sombras de marca */
    --shadow-card:    0 4px 20px rgba(0, 52, 73, 0.15);
    --shadow-modal:   0 20px 60px rgba(0, 52, 73, 0.25);
    --shadow-brand:   0 4px 15px rgba(0, 177, 183, 0.20);
    --shadow-brand-lg: 0 8px 30px rgba(0, 177, 183, 0.30);

    /* Sombras de focus/ring (accesibilidad) */
    --shadow-focus-brand:   0 0 0 3px rgba(0, 177, 183, 0.12);
    --shadow-focus-danger:  0 0 0 3px rgba(239, 68, 68, 0.10);


    /* ------------------------------------------------------------------
       2g. Gradientes
       ------------------------------------------------------------------ */
    --gradient-brand:       linear-gradient(135deg, #00b1b7 0%, #003449 100%);
    --gradient-brand-hover: linear-gradient(135deg, #003449 0%, #00b1b7 100%);
    --gradient-accent:      linear-gradient(135deg, #f2296f, #003449);
    --gradient-accent-h:    linear-gradient(135deg, #003449, #f2296f);
    --gradient-progress:    linear-gradient(90deg, #10b981, #00b1b7, #f2296f);
    --gradient-header-row:  linear-gradient(135deg, rgba(0, 177, 183, 0.08), rgba(0, 52, 73, 0.08));
    --gradient-modal-header: linear-gradient(135deg, #00b1b7 0%, #003449 100%);


    /* ------------------------------------------------------------------
       2h. Tipografía
       ------------------------------------------------------------------ */
    --font-sans: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-mono: 'Courier New', Courier, monospace;

    /* Escala de tamaños de fuente — base 16 px → 1 rem */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 0.875rem;   /* 14px */
    --text-md:   1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.8rem;     /* 28.8px */
    --text-4xl:  2rem;       /* 32px */

    /* Pesos */
    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;

    /* Line heights */
    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;


    /* ------------------------------------------------------------------
       2i. Espaciado (escala rem, base 4 px → 0.25 rem)
       ------------------------------------------------------------------ */
    --space-1:  0.25rem;   /* 4px  */
    --space-2:  0.5rem;    /* 8px  */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */


    /* ------------------------------------------------------------------
       2j. Radios de Borde
       ------------------------------------------------------------------ */
    --radius-xs:   0.25rem;   /* 4px  */
    --radius-sm:   0.375rem;  /* 6px  */
    --radius-md:   0.5rem;    /* 8px  */
    --radius-lg:   0.75rem;   /* 12px */
    --radius-xl:   0.875rem;  /* 14px */
    --radius-2xl:  1rem;      /* 16px */
    --radius-3xl:  1.25rem;   /* 20px */
    --radius-full: 9999px;


    /* ------------------------------------------------------------------
       2k. Transiciones
       ------------------------------------------------------------------ */
    --transition-fast:    all 0.15s ease;
    --transition-base:    all 0.20s ease;
    --transition-slow:    all 0.30s ease;
    --transition-slower:  all 0.40s ease;


    /* ------------------------------------------------------------------
       2k-b. Breakpoints (documentación — @media no admite var())
       Usar estos valores literales en los media queries de cada archivo.
       ------------------------------------------------------------------ */
    --bp-xl:  1260px;   /* header: ocultar etiquetas de botones */
    --bp-lg:   960px;   /* header: compactar logo + título */
    --bp-md:   680px;   /* header: menú hamburguesa */
    --bp-sm:   480px;   /* grid: una sola columna */


    /* ------------------------------------------------------------------
       2l. Z-Index (escala de capas)
       ------------------------------------------------------------------ */
    --z-header:   100;
    --z-sticky:   100;  /* sticky positioned elements (.page-header) */
    --z-dropdown: 200;
    --z-overlay:  900;
    --z-modal:    1000;
    --z-toast:    1100;
    --z-top:      9999;

}


/* ==========================================================================
   3. Body y estilos globales
   ========================================================================== */

html {
    font-size: 16px; /* base para la escala rem */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg-page);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Asegura que todos los elementos interactivos son accesibles con teclado */
:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* Clase utilitaria básica usada por lógica JS — NO ELIMINAR */
.hidden {
    display: none !important;
}