:root {
    /* ========================
       PALETA DE COLORES GLOBAL
       ======================== */

    /* ---------- HEADER ---------- */
    --header-bg: #FFFFFF;
    --header-text: #333333;
    --header-secondary-text: #007BFF;
    --header-border: #CCCCCC;
    --header-title-text: #333333;

    /* ---------- FOOTER ---------- */
    --footer-bg: #F8F9FA;
    --footer-text: #333333;
    --footer-border: #CCCCCC;

    /* ---------- LAYOUT / FONDOS GENERALES ---------- */
    --layout-bg: #F2F2F2e6; 
    --layout-fondo-imagen: #F2F2F2e6; 

    /* ---------- BOTONES GLOBALES ---------- */
    --btn-primary-bg: #353F5A;
    --btn-primary-text: #FFFFFF;
    --btn-hover-bg: #555555;
    --btn-focus-outline: #444444;
    --btn-shadow-hover: rgba(0, 0, 0, 0.2);
    --btn-disabled-bg: #cccccc;   /* Nuevo: color de botón disabled */
    --btn-disabled-text: #666666; /* Nuevo: texto de botón disabled */

    /* ---------- LINKS GLOBALES ---------- */
    --link-color: #0d1c2c;
    --link-hover-color: #0056b3;

    /* ---------- FORMULARIOS (AUTH y otros) ---------- */
    --form-bg: #0678BF; 
    --form-text: #FFFFFF;
    --form-error-text: #8B0000; 
    --form-input-bg: #f3f3f3;
    --form-input-text: #333333;
    --form-icon-color: #666666;
    --form-shadow-input-focus: rgba(58, 58, 106, 0.5);

    /* ---------- BORDES, TÍTULOS, ETC. ---------- */
    --border-color: #CCCCCC; /* Uso genérico, si lo necesitas en otras partes */
    --title-text: #333333;
    --error-color: #8B0000;
}

/* ========================
   ESTILOS DE LAYOUT PRINCIPAL
   (body, main, etc.)
========================= */

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: url('../../img/fondos/background_1.jpg') no-repeat center center fixed;
    background-size: cover;
}

main {
    padding: 0px;
}

/* Ejemplo de contenedor global (opcional) */
.principal-container {
    background-color: var(--layout-bg);
    margin: 0 auto;
    min-height: 100vh;
}