/* =========================================
   1. VARIABLES Y CONFIGURACIÓN ÁUREA
========================================= */
:root {
    /* --- COLORES AZULES (TU PALETA ORIGINAL) --- */
    --primary-darkest: #3b28cc;
    --primary-main:    #2667ff;
    --primary-light:   #3f8efc;
    --primary-lighter: #87bfff;
    --primary-pale:    #add7f6;

    /* --- NUEVOS COLORES ESTILO MOODLE/SPACE (REFERENCIA) --- */
    --brand-orange:       #F48120; /* Naranja principal */
    --brand-orange-light: #fef2e9; /* Fondo naranja suave */
    --brand-green:        #027654; /* Verde textos */
    --sidebar-bg:         #050f14; /* Fondo oscuro sidebar */
    --sidebar-text:       #212121; /* Texto general */

    /* --- BASE Y SEMÁNTICA --- */
    --secondary:       #0c0f38;
    --bg-light:        #f4f7fe;
    --white:           #ffffff;
    --text-dark:       #333333;
    --text-gray:       #666666;
    
    --danger:          #e74c3c;
    --success:         #048444; /* Ajustado al verde de tu referencia */
    --warning:         #f1c40f;

    /* --- TIPOGRAFÍA --- */
    --font-head:       'Inter', sans-serif;
    --font-ui:         'Poppins', sans-serif;
    --font-body:       'Roboto', sans-serif;

    /* --- PROPORCIÓN ÁUREA --- */
    --phi: 1.618;
    --space-unit: 1rem; 
    
    --space-xs: calc(var(--space-unit) / (var(--phi) * var(--phi)));
    --space-sm: calc(var(--space-unit) / var(--phi));
    --space-md: var(--space-unit);
    --space-lg: calc(var(--space-unit) * var(--phi));
    --space-xl: calc(var(--space-unit) * var(--phi) * var(--phi));

    --radius: 8px;
    --radius-sm: 5px; /* Radio específico de tu referencia */
    --shadow: 0 4px 12px rgba(0,0,0,0.05);
}

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

body { 
    background-color: var(--bg-light); 
    color: var(--text-dark); 
    font-family: var(--font-body);
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    line-height: var(--phi);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--secondary);
    font-weight: 700;
}

/* ... (MANTENER EL RESTO DE ESTILOS DE FORMULARIOS Y BOTONES IGUAL) ... */
/* Copia aquí el resto de tu 1-base.css original a partir de .form-group */
.form-group { margin-bottom: var(--space-lg); text-align: left; }

.form-group label { 
    display: block; 
    margin-bottom: var(--space-sm); 
    font-family: var(--font-ui); 
    font-weight: 600; 
    font-size: 0.9rem; 
    color: var(--text-dark); 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: var(--space-md); 
    border: 1px solid #dae1e7;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
    background-color: #fcfcfc;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary-main);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(38, 103, 255, 0.1);
}

.styled-textarea { width: 100%; height: 120px; padding: var(--space-md); border: 1px solid #ddd; border-radius: var(--radius); resize: none; font-family: var(--font-body); }
.styled-select { width: 100%; padding: var(--space-md); border: 1px solid #ddd; border-radius: var(--radius); font-family: var(--font-body); }

/* BOTONES GLOBALES */
.btn-primary {
    background: var(--primary-main);
    color: var(--white);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    font-size: 1rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(38, 103, 255, 0.2);
}
.btn-primary:hover { 
    background: var(--primary-darkest); 
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(38, 103, 255, 0.3);
}

.full-width { width: 100%; }

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-main);
    color: var(--primary-main);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}
.btn-outline:hover { background: var(--primary-main); color: var(--white); }

.btn-cancel {
    background: #f1f3f5;
    color: var(--text-gray);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.btn-cancel:hover { background: #e9ecef; color: var(--text-dark); }