/* 
 * UIT Unión Innova Textil - Configuración de Colores Corporativos
 * 
 * Este archivo contiene todos los colores oficiales de la empresa
 * para facilitar la personalización y mantenimiento de la página web.
 */

:root {
    /* Colores Principales del Logo */
    --uit-green: #00d4aa;           /* Verde esmeralda vibrante - Color principal */
    --uit-green-hover: #00b894;     /* Verde más oscuro para hover */
    --uit-dark-gray: #2c2c2c;       /* Gris oscuro/carbón - Texto principal */
    --uit-black: #000000;           /* Negro - Fondos y contraste */
    
    /* Colores Secundarios */
    --uit-white: #ffffff;           /* Blanco puro */
    --uit-light-gray: #f8f9fa;     /* Gris claro para fondos */
    --uit-medium-gray: #7f8c8d;    /* Gris medio para texto secundario */
    --uit-border-gray: #e9ecef;     /* Gris para bordes */
    
    /* Colores de Estado */
    --uit-success: #00d4aa;         /* Verde para elementos de éxito */
    --uit-warning: #f39c12;         /* Naranja para advertencias */
    --uit-error: #e74c3c;           /* Rojo para errores */
    --uit-info: #3498db;            /* Azul para información */
    
    /* Colores de WhatsApp (mantener identidad de marca) */
    --whatsapp-green: #25d366;      /* Verde oficial de WhatsApp */
    --whatsapp-green-hover: #128c7e; /* Verde WhatsApp hover */
    
    /* Sombras y Efectos */
    --uit-shadow-light: rgba(0, 212, 170, 0.1);    /* Sombra verde clara */
    --uit-shadow-medium: rgba(0, 212, 170, 0.3);   /* Sombra verde media */
    --uit-shadow-dark: rgba(0, 0, 0, 0.1);         /* Sombra negra */
    
    /* Gradientes */
    --uit-gradient-primary: linear-gradient(135deg, var(--uit-black) 0%, var(--uit-dark-gray) 100%);
    --uit-gradient-green: linear-gradient(135deg, var(--uit-green) 0%, var(--uit-green-hover) 100%);
    --uit-gradient-card: linear-gradient(135deg, var(--uit-white) 0%, var(--uit-light-gray) 100%);

    /* Mapeo con el design-system */
    --uit-primary: var(--uit-green);
    --uit-primary-600: var(--uit-green-hover);
    --uit-dark: var(--uit-dark-gray);
}

/* Clases de utilidad para colores */
.text-uit-green { color: var(--uit-green) !important; }
.text-uit-dark-gray { color: var(--uit-dark-gray) !important; }
.text-uit-black { color: var(--uit-black) !important; }
.text-uit-white { color: var(--uit-white) !important; }

.bg-uit-green { background-color: var(--uit-green) !important; }
.bg-uit-dark-gray { background-color: var(--uit-dark-gray) !important; }
.bg-uit-black { background-color: var(--uit-black) !important; }
.bg-uit-white { background-color: var(--uit-white) !important; }
.bg-uit-light-gray { background-color: var(--uit-light-gray) !important; }

.border-uit-green { border-color: var(--uit-green) !important; }
.border-uit-dark-gray { border-color: var(--uit-dark-gray) !important; }
.border-uit-black { border-color: var(--uit-black) !important; }

/* Estados de hover */
.hover-uit-green:hover { color: var(--uit-green) !important; }
.hover-bg-uit-green:hover { background-color: var(--uit-green) !important; }
.hover-border-uit-green:hover { border-color: var(--uit-green) !important; }

/* Transiciones suaves para todos los elementos con colores UIT */
* {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Ejemplos de uso en componentes específicos */
.btn-uit-primary {
    background-color: var(--uit-green);
    color: var(--uit-black);
    border: 2px solid var(--uit-green);
}

.btn-uit-primary:hover {
    background-color: var(--uit-green-hover);
    border-color: var(--uit-green-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--uit-shadow-medium);
}

.card-uit {
    background: var(--uit-white);
    border: 1px solid var(--uit-border-gray);
    box-shadow: 0 5px 15px var(--uit-shadow-dark);
}

.card-uit:hover {
    border-color: var(--uit-green);
    box-shadow: 0 10px 25px var(--uit-shadow-light);
}

/* Nota: Para usar estos colores en otros archivos CSS, 
   simplemente importa este archivo o copia las variables CSS */