/* ============================================
   SISTEMA DE COLORES POR IDIOMA
   ============================================ */

/* Variables CSS por defecto (Inglés) */
:root {
    /* Inglés (en) - Azul marino principal o purple como secundario */
    --lang-primary: #1e3a8a; /* Azul marino */
    --lang-primary-alt: #5b3df5; /* Purple */
    --lang-secondary: #764ba2; /* Purple secundario */
    --lang-accent: #3b82f6; /* Azul claro */
    --lang-button: #5b3df5; /* Purple para botones */
    --lang-button-hover: #764ba2;
    --lang-gradient-start: #1e3a8a;
    --lang-gradient-end: #5b3df5;
    --lang-text-primary: #1e3a8a;
    --lang-text-secondary: #764ba2;
}

/* Francés (fr) - Azul y rojo (bandera francesa) */
[data-language="fr"] {
    --lang-primary: #0055a4; /* Azul francés */
    --lang-primary-alt: #ef4135; /* Rojo francés */
    --lang-secondary: #ef4135; /* Rojo francés */
    --lang-accent: #0055a4;
    --lang-button: #ef4135; /* Rojo para botones */
    --lang-button-hover: #d32f2f;
    --lang-gradient-start: #0055a4;
    --lang-gradient-end: #ef4135; /* Gradiente hacia rojo */
    --lang-text-primary: #0055a4;
    --lang-text-secondary: #ef4135;
}

/* Alemán (de) - Negro, rojo y amarillo/dorado (bandera alemana) */
[data-language="de"] {
    --lang-primary: #000000; /* Negro (bandera alemana) */
    --lang-primary-alt: #FFCE00; /* Amarillo/dorado (bandera alemana) */
    --lang-secondary: #DD0000; /* Rojo (bandera alemana) */
    --lang-accent: #000000;
    --lang-button: #DD0000; /* Rojo para botones */
    --lang-button-hover: #BB0000;
    --lang-gradient-start: #000000; /* Negro */
    --lang-gradient-end: #DD0000; /* Rojo */
    --lang-text-primary: #000000;
    --lang-text-secondary: #FFCE00;
}

/* Portugués (pt) - Verde y rojo (bandera portuguesa) */
[data-language="pt"] {
    --lang-primary: #006600; /* Verde (bandera portuguesa) */
    --lang-primary-alt: #DA020E; /* Rojo (bandera portuguesa) */
    --lang-secondary: #DA020E; /* Rojo */
    --lang-accent: #006600;
    --lang-button: #DA020E; /* Rojo para botones */
    --lang-button-hover: #B8010B;
    --lang-gradient-start: #006600; /* Verde */
    --lang-gradient-end: #DA020E; /* Rojo */
    --lang-text-primary: #006600;
    --lang-text-secondary: #DA020E;
}

/* Italiano (it) - Verde más oscuro y rojo más oscuro (bandera italiana) */
[data-language="it"] {
    --lang-primary: #006633; /* Verde italiano más oscuro */
    --lang-primary-alt: #9b1d2e; /* Rojo italiano más oscuro */
    --lang-secondary: #9b1d2e; /* Rojo italiano más oscuro */
    --lang-accent: #006633;
    --lang-button: #9b1d2e; /* Rojo más oscuro para botones */
    --lang-button-hover: #7a1624;
    --lang-gradient-start: #006633; /* Verde italiano más oscuro */
    --lang-gradient-end: #9b1d2e; /* Rojo italiano más oscuro */
    --lang-text-primary: #006633;
    --lang-text-secondary: #9b1d2e;
}

/* Español (es) - Anaranjado casi rojo y amarillo (bandera española) */
[data-language="es"] {
    --lang-primary: #c60b1e; /* Rojo anaranjado (bandera española) */
    --lang-primary-alt: #ffc400; /* Amarillo (bandera española) */
    --lang-secondary: #ffc400; /* Amarillo */
    --lang-accent: #c60b1e;
    --lang-button: #c60b1e; /* Rojo anaranjado para botones */
    --lang-button-hover: #a50918;
    --lang-gradient-start: #c60b1e; /* Rojo anaranjado */
    --lang-gradient-end: #ffc400; /* Amarillo */
    --lang-text-primary: #c60b1e;
    --lang-text-secondary: #ffc400;
}

/* Clases utilitarias para usar los colores del idioma */
.lang-primary {
    color: var(--lang-primary) !important;
}

.lang-primary-bg {
    background-color: var(--lang-primary) !important;
}

.lang-secondary {
    color: var(--lang-secondary) !important;
}

.lang-secondary-bg {
    background-color: var(--lang-secondary) !important;
}

.lang-button {
    background-color: var(--lang-button) !important;
    color: white !important;
    border-color: var(--lang-button) !important;
}

.lang-button:hover {
    background-color: var(--lang-button-hover) !important;
    border-color: var(--lang-button-hover) !important;
}

.lang-gradient {
    background: linear-gradient(135deg, var(--lang-gradient-start) 0%, var(--lang-gradient-end) 100%) !important;
}

.lang-gradient-horizontal {
    background: linear-gradient(90deg, var(--lang-gradient-start) 0%, var(--lang-gradient-end) 100%) !important;
}

/* Aplicar a elementos comunes */
.lang-text-primary {
    color: var(--lang-text-primary) !important;
}

.lang-text-secondary {
    color: var(--lang-text-secondary) !important;
}

/* Bordes con color del idioma */
.lang-border {
    border-color: var(--lang-primary) !important;
}

.lang-border-left {
    border-left-color: var(--lang-primary) !important;
}

/* Sombras con color del idioma */
.lang-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}