/* ==========================================================================
   Base CSS - Variables, Reset y Tipografía
   ========================================================================== */

/* CSS Variables */
:root {
    /* Colores primarios */
    --color-primary: #667eea;
    --color-primary-dark: #5568d3;
    --color-primary-light: #f0f4ff;
    --color-brand: #dd4832;

    /* Colores de estado */
    --color-success: #28a745;
    --color-success-light: #efe;
    --color-danger: #dc3545;
    --color-danger-light: #fee;
    --color-warning: #ffc107;
    --color-warning-light: #fff3cd;
    --color-info: #17a2b8;

    /* Grises */
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #e0e0e0;
    --color-gray-500: #999;
    --color-gray-600: #666;
    --color-gray-700: #555;
    --color-gray-800: #333;
    --color-gray-900: #212529;

    /* Fondos */
    --bg-body: #f5f7fa;
    --bg-white: #ffffff;

    /* Bordes */
    --border-radius-sm: 4px;
    --border-radius: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* Tipografía */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body */
body {
    font-family: var(--font-family);
    background: var(--bg-body);
    min-height: 100vh;
    display: flex;
}

/* Tipografía base */
h1 {
    color: var(--color-gray-800);
    font-size: 32px;
    margin-bottom: 10px;
}

h2 {
    color: var(--color-gray-800);
    font-size: 24px;
    margin-bottom: 8px;
}

h3 {
    color: var(--color-gray-800);
    font-size: 20px;
    margin-bottom: 6px;
}

/* Animaciones */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}