/**
 * Variables CSS - Sistema de Diseño SEAP-IAP
 * Plataforma de Cursos Online
 * 
 * Versión: 1.0.0
 * Fecha: Enero 2026
 * 
 * IMPORTANTE: Identidad corporativa estricta
 * - Magenta (#F00064) como color principal
 * - Blanco para fondos
 * - SIN AZULES en ningún componente
 */

:root {
    /* ============================================
     COLORES CORPORATIVOS SEAP-IAP
     ============================================ */

    /* Color principal - Magenta corporativo */
    --seap-primary: #F00064;
    --seap-primary-dark: #C3004F;
    /* Hover / Estados activos */
    --seap-primary-light: #FF4B8F;
    /* Resaltes suaves */
    --seap-primary-lighter: #FF80AA;
    /* Backgrounds muy suaves */
    --seap-primary-alpha-10: rgba(240, 0, 100, 0.1);
    --seap-primary-alpha-20: rgba(240, 0, 100, 0.2);
    --seap-primary-alpha-50: rgba(240, 0, 100, 0.5);

    /* Fondos */
    --seap-bg: #FFFFFF;
    /* Fondo principal */
    --seap-bg-soft: #FFF2F7;
    /* Bloques / Tarjetas */
    --seap-bg-gray: #F8F9FA;
    /* Alternativa neutra */

    /* Texto */
    --seap-text-main: #222222;
    /* Texto general */
    --seap-text-muted: #777777;
    /* Textos secundarios */
    --seap-text-light: #999999;
    /* Textos auxiliares */
    --seap-text-white: #FFFFFF;
    /* Texto sobre fondos oscuros */

    /* Bordes y separadores */
    --seap-border: #E3E3E3;
    --seap-border-light: #F0F0F0;
    --seap-border-dark: #CCCCCC;

    /* Enlaces */
    --seap-link: #F00064;
    --seap-link-hover: #C3004F;
    --seap-link-visited: #990040;

    /* Estados de alerta y feedback */
    --seap-success: #28A745;
    /* Verde para éxito */
    --seap-success-light: #D4EDDA;
    --seap-warning: #FFC107;
    /* Amarillo para advertencias */
    --seap-warning-light: #FFF3CD;
    --seap-danger: #C3004F;
    /* Magenta oscuro para errores */
    --seap-danger-light: #FFE5EF;
    --seap-info: #17A2B8;
    /* Cyan para información */
    --seap-info-light: #D1ECF1;

    /* ============================================
     TIPOGRAFÍA
     ============================================ */

    /* Fuentes */
    --seap-font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --seap-font-heading: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --seap-font-mono: "Courier New", Courier, monospace;

    /* Tamaños de fuente */
    --seap-font-size-xs: 0.75rem;
    /* 12px */
    --seap-font-size-sm: 0.875rem;
    /* 14px */
    --seap-font-size-base: 1rem;
    /* 16px */
    --seap-font-size-lg: 1.125rem;
    /* 18px */
    --seap-font-size-xl: 1.25rem;
    /* 20px */
    --seap-font-size-2xl: 1.5rem;
    /* 24px */
    --seap-font-size-3xl: 1.875rem;
    /* 30px */
    --seap-font-size-4xl: 2.25rem;
    /* 36px */
    --seap-font-size-5xl: 3rem;
    /* 48px */

    /* Peso de fuente */
    --seap-font-weight-light: 300;
    --seap-font-weight-normal: 400;
    --seap-font-weight-medium: 500;
    --seap-font-weight-semibold: 600;
    --seap-font-weight-bold: 700;
    --seap-font-weight-black: 900;

    /* Altura de línea */
    --seap-line-height-tight: 1.25;
    --seap-line-height-normal: 1.5;
    --seap-line-height-relaxed: 1.75;
    --seap-line-height-loose: 2;

    /* ============================================
     ESPACIADO
     ============================================ */

    --seap-space-xs: 0.25rem;
    /* 4px */
    --seap-space-sm: 0.5rem;
    /* 8px */
    --seap-space-md: 1rem;
    /* 16px */
    --seap-space-lg: 1.5rem;
    /* 24px */
    --seap-space-xl: 2rem;
    /* 32px */
    --seap-space-2xl: 3rem;
    /* 48px */
    --seap-space-3xl: 4rem;
    /* 64px */
    --seap-space-4xl: 6rem;
    /* 96px */

    /* ============================================
     BORDES Y RADIOS
     ============================================ */

    --seap-radius-sm: 4px;
    --seap-radius-md: 8px;
    --seap-radius-lg: 12px;
    --seap-radius-xl: 16px;
    --seap-radius-round: 50%;
    --seap-radius-pill: 9999px;

    --seap-border-width: 1px;
    --seap-border-width-thick: 2px;

    /* ============================================
     SOMBRAS
     ============================================ */

    --seap-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --seap-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --seap-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --seap-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --seap-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.18);
    --seap-shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.2);

    /* Sombra con color corporativo */
    --seap-shadow-primary: 0 4px 12px rgba(240, 0, 100, 0.25);
    --seap-shadow-primary-lg: 0 8px 20px rgba(240, 0, 100, 0.3);

    /* ============================================
     TRANSICIONES
     ============================================ */

    --seap-transition-fast: 150ms ease-in-out;
    --seap-transition-base: 250ms ease-in-out;
    --seap-transition-slow: 350ms ease-in-out;

    /* ============================================
     Z-INDEX
     ============================================ */

    --seap-z-dropdown: 1000;
    --seap-z-sticky: 1020;
    --seap-z-fixed: 1030;
    --seap-z-modal-backdrop: 1040;
    --seap-z-modal: 1050;
    --seap-z-popover: 1060;
    --seap-z-tooltip: 1070;

    /* ============================================
     BREAKPOINTS (para uso en JS)
     ============================================ */

    --seap-breakpoint-xs: 0;
    --seap-breakpoint-sm: 576px;
    --seap-breakpoint-md: 768px;
    --seap-breakpoint-lg: 992px;
    --seap-breakpoint-xl: 1200px;
    --seap-breakpoint-xxl: 1400px;

    /* ============================================
     CONTENEDOR
     ============================================ */

    --seap-container-max-width: 1200px;
    --seap-container-padding: var(--seap-space-md);

    /* ============================================
     GRID
     ============================================ */

    --seap-grid-columns: 12;
    --seap-grid-gap: var(--seap-space-md);

    /* ============================================
     COMPONENTES ESPECÍFICOS
     ============================================ */

    /* Header */
    --seap-header-height: 70px;
    --seap-header-bg: var(--seap-primary);

    /* Footer */
    --seap-footer-bg: var(--seap-text-main);

    /* Sidebar */
    --seap-sidebar-width: 280px;

    /* Cards */
    --seap-card-bg: var(--seap-bg);
    --seap-card-padding: var(--seap-space-lg);
    --seap-card-radius: var(--seap-radius-lg);
    --seap-card-shadow: var(--seap-shadow-md);

    /* Botones */
    --seap-button-height: 44px;
    --seap-button-padding-x: var(--seap-space-xl);
    --seap-button-radius: var(--seap-radius-md);

    /* Inputs */
    --seap-input-height: 44px;
    --seap-input-padding-x: var(--seap-space-md);
    --seap-input-radius: var(--seap-radius-md);
    --seap-input-border: var(--seap-border);
    --seap-input-focus-border: var(--seap-primary);

    /* ============================================
     ALIASES DE COMPATIBILIDAD
     (variables usadas en componentes que mapean
      a los tokens canónicos definidos arriba)
     ============================================ */
    --seap-font-size-md: var(--seap-font-size-base);
    /* 1rem */
    --seap-radius-full: var(--seap-radius-pill);
    /* 9999px */
    --seap-bg-secondary: var(--seap-bg-soft);
    /* #FFF2F7 */
    --seap-container-xl: var(--seap-container-max-width);
    /* 1200px */
}

/* ============================================
   MODO OSCURO (futuro - preparado)
   ============================================ */

/* Preparado para futuro soporte de modo oscuro
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"],
    :root[data-theme="dark"] {
        --seap-bg: #1a1a1a;
        --seap-bg-soft: #2a2a2a;
        --seap-text-main: #f0f0f0;
        --seap-text-muted: #a0a0a0;
        --seap-border: #404040;
    }
}
*/