/* =====================================================
   VARIABLES GLOBALES - RESPÁLDAME
   Colores de marca + Tipografías + Estilos base
   ===================================================== */

:root {
    /* ===== Colores principales de la marca ===== */
    --primary-color: #1C2A4A;       /* Azul profundo - institucional */
    --primary-dark: #141E3B;
    --primary-light: #3B4F73;

    /* ===== Colores secundarios ===== */
    --secondary-color: #C13B2A;     /* Rojo político */
    --secondary-dark: #9E2D1F;
    --secondary-light: #E35A49;

    /* ===== Colores complementarios ===== */
    --accent-color: #7BAE7F;        /* Verde esperanza */
    --accent-dark: #5E8E64;
    --accent-light: #A6C8A8;

    /* ===== Colores de estado ===== */
    --success-color: var(--accent-color);
    --warning-color: #F0AD4E;
    --error-color: #D9534F;
    --info-color: #5BC0DE;

    /* ===== Escala de grises ===== */
    --gray-100: #F9F7F4;
    --gray-200: #E1E1E1;
    --gray-300: #D0D0D0;
    --gray-400: #B8B8B8;
    --gray-500: #8C8C8C;
    --gray-600: #6C6C6C;
    --gray-700: #4B4B4B;
    --gray-800: #2F2F2F;
    --gray-900: #1B1B1B;

    /* ===== Colores de texto ===== */
    --text-primary: var(--gray-800);
    --text-secondary: var(--gray-600);
    --text-disabled: var(--gray-500);

    /* ===== Colores de fondo ===== */
    --background-primary: var(--gray-100);
    --background-secondary: #FFFFFF;
    --background-tertiary: var(--gray-200);

    /* ===== Sombras y bordes ===== */
    --shadow-color: rgba(0, 0, 0, 0.08);
    --border-color: var(--gray-300);

    /* =====================================================
       TIPOGRAFÍAS
       ===================================================== */

    /* Fuente principal - moderna y confiable */
    --font-primary: 'Poppins', 'Helvetica Neue', sans-serif;

    /* Fuente secundaria - para textos largos */
    --font-secondary: 'Inter', 'Roboto', sans-serif;

    /* Tamaños base (puedes ajustarlos según diseño) */
    --font-size-small: 0.875rem;   /* 14px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-medium: 1.125rem;  /* 18px */
    --font-size-large: 1.5rem;     /* 24px */
    --font-size-xlarge: 2rem;      /* 32px */

    /* Pesos de fuente */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
}

/* =====================================================
   IMPORTACIÓN DE FUENTES
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Poppins:wght@400;500;700&display=swap');