/**
 * Variables CSS - Sistema de Diseño Admin SEAP
 * Super Administrador - Panel de Control
 * 
 * Versión: 1.0.0
 * Fecha: Febrero 2026
 * 
 * IMPORTANTE: Identidad corporativa SEAP-IAP
 * - Magenta (#F00064) como color principal
 * - Interface profesional para administradores
 * - Consistente con plataformas Cursos SEAP y Plataforma Socios
 */

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

    /* Color principal - Magenta corporativo */
    --seap-primary: #F00064;
    --seap-primary-dark: #C3004F;
    --seap-primary-darker: #990040;
    --seap-primary-light: #FF4B8F;
    --seap-primary-lighter: #FF80AA;
    --seap-primary-alpha-05: rgba(240, 0, 100, 0.05);
    --seap-primary-alpha-10: rgba(240, 0, 100, 0.1);
    --seap-primary-alpha-20: rgba(240, 0, 100, 0.2);
    --seap-primary-alpha-30: rgba(240, 0, 100, 0.3);
    --seap-primary-alpha-50: rgba(240, 0, 100, 0.5);

    /* Fondos */
    --seap-bg-main: #FFFFFF;
    --seap-bg-soft: #FFF2F7;
    --seap-bg-gray: #F8F9FA;
    --seap-bg-gray-dark: #E9ECEF;
    --seap-bg-sidebar: #1A1A1A;
    --seap-bg-sidebar-hover: #2A2A2A;

    /* Texto */
    --seap-text-main: #222222;
    --seap-text-secondary: #555555;
    --seap-text-muted: #777777;
    --seap-text-light: #999999;
    --seap-text-white: #FFFFFF;
    --seap-text-placeholder: #AAAAAA;

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

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

    /* Estados de alerta y feedback */
    --seap-success: #28A745;
    --seap-success-light: #D4EDDA;
    --seap-success-dark: #1E7E34;

    --seap-warning: #FFC107;
    --seap-warning-light: #FFF3CD;
    --seap-warning-dark: #CC9A06;

    --seap-danger: #DC3545;
    --seap-danger-light: #FFE5EF;
    --seap-danger-dark: #C3004F;

    --seap-info: #17A2B8;
    --seap-info-light: #D1ECF1;
    --seap-info-dark: #117A8B;

    /* Estados neutros */
    --seap-neutral: #6C757D;
    --seap-neutral-light: #E9ECEF;
    --seap-neutral-dark: #495057;

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

    --seap-font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --seap-font-heading: "Segoe UI Semibold", Roboto, "Helvetica Neue", Arial, sans-serif;
    --seap-font-mono: "Cascadia Code", "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 */

    /* Pesos 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-extrabold: 800;

    /* Line heights */
    --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-border-width: 1px;
    --seap-border-width-thick: 2px;

    --seap-radius-sm: 0.25rem;
    /* 4px */
    --seap-radius-md: 0.5rem;
    /* 8px */
    --seap-radius-lg: 0.75rem;
    /* 12px */
    --seap-radius-xl: 1rem;
    /* 16px */
    --seap-radius-full: 9999px;

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

    --seap-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --seap-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --seap-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --seap-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --seap-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --seap-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --seap-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --seap-shadow-primary: 0 4px 12px 0 rgba(240, 0, 100, 0.3);

    /* ============================================
     TRANSICIONES Y ANIMACIONES
     ============================================ */

    --seap-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --seap-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --seap-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================
     LAYOUT - DIMENSIONES ESPECÍFICAS DEL ADMIN
     ============================================ */

    --seap-sidebar-width: 260px;
    --seap-sidebar-collapsed-width: 70px;
    --seap-header-height: 64px;
    --seap-content-max-width: 1400px;

    /* ============================================
     COMPONENTES - DIMENSIONES
     ============================================ */

    /* Botones */
    --seap-button-height-sm: 32px;
    --seap-button-height: 40px;
    --seap-button-height-lg: 48px;
    --seap-button-padding-x-sm: 0.75rem;
    --seap-button-padding-x: 1.25rem;
    --seap-button-padding-x-lg: 1.75rem;
    --seap-button-radius: var(--seap-radius-md);

    /* Inputs */
    --seap-input-height-sm: 32px;
    --seap-input-height: 40px;
    --seap-input-height-lg: 48px;
    --seap-input-padding-x: 0.75rem;
    --seap-input-radius: var(--seap-radius-md);

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

    /* Modals */
    --seap-modal-max-width: 600px;
    --seap-modal-padding: var(--seap-space-xl);
    --seap-modal-radius: var(--seap-radius-lg);

    /* Badge */
    --seap-badge-height: 20px;
    --seap-badge-padding-x: 0.5rem;
    --seap-badge-radius: var(--seap-radius-full);

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

    --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-2xl: 1400px;
}

/* ============================================
   MEDIA QUERIES PARA DARK MODE (futuro)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Preparado para implementación futura de modo oscuro */
}