/* ==================== THEME COLORS - COLORES CENTRALIZADOS ==================== */
/* 
 * Este archivo contiene todas las variables de color usadas en Contact, Login, Register e Info
 * para mantener consistencia visual y fácil mantenimiento
 */

:root {
    /* ========== COLORES PRIMARIOS ========== */
    --theme-primary: #667eea; /* Morado claro - Color principal */
    --theme-primary-dark: #5dbed0; /* Morado oscuro - Variante oscura */
    --theme-primary-light: #3977e68a; /* Morado claro - Variante clara */
    --theme-primary-light-actions: #c4c9e2; /* Morado claro - Variante clara */
    --theme-primary-light-actions-dark: #fff; /* Morado claro - Variante clara */
    /* ========== GRADIENTES ========== */
    --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    --theme-gradient-primary-reverse: linear-gradient(135deg, var(--theme-primary-dark) 0%, var(--theme-primary) 100%);
    --theme-gradient-primary-actions: linear-gradient(135deg, var(--theme-primary-light-actions-dark) 0%, var(--theme-primary-light-actions) 100%);
    /* ========== COLORES DE TEXTO ========== */
    --theme-text-dark: #212529; /* Texto principal oscuro */
    --theme-text-muted: #6c757d; /* Texto secundario gris */
    --theme-text-light: #adb5bd; /* Texto placeholder */
    --theme-text-white: #ffffff; /* Texto blanco */
    /* ========== COLORES DE FONDO ========== */
    --theme-bg-white: #ffffff; /* Fondo blanco */
    --theme-bg-light: #f8f9fa; /* Fondo gris muy claro */
    --theme-bg-focus: #f8f9ff; /* Fondo azul muy claro (para focus) */
    /* ========== COLORES DE BORDE ========== */
    --theme-border-light: #e9ecef; /* Borde gris claro */
    --theme-border-primary: #667eea; /* Borde primario */
    /* ========== SOMBRAS ========== */
    --theme-shadow-sm: 0 10px 40px rgba(0, 0, 0, 0.2);
    --theme-shadow-md: 0 20px 60px rgba(0, 0, 0, 0.15);
    --theme-shadow-lg: 0 15px 40px rgba(102, 126, 234, 0.3);
    --theme-shadow-primary: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
    --theme-shadow-primary-lg: 0 15px 40px rgba(102, 126, 234, 0.4);
    /* ========== RADIOS ========== */
    --theme-radius-sm: 8px;
    --theme-radius-md: 10px;
    --theme-radius-lg: 15px;
    --theme-radius-xl: 20px;
    /* ========== ESPACIADOS ========== */
    --theme-spacing-xs: 0.5rem;
    --theme-spacing-sm: 1rem;
    --theme-spacing-md: 1.5rem;
    --theme-spacing-lg: 2rem;
    --theme-spacing-xl: 2.5rem;
}

/* ==================== APLICACIÓN DE COLORES EN COMPONENTES ==================== */

/* Contenedores principales */
.contact-container,
.login-container,
.register-container,
.info-container {
    background: var(--theme-gradient-primary);
    border-radius: var(--theme-radius-xl);
    overflow: hidden;
    box-shadow: var(--theme-shadow-md);
}

/* Columnas de imagen */
.contact-image-col,
.login-image-col,
.register-image-col,
.info-image-col {
    background: var(--theme-gradient-primary);
}

/* Columnas de formulario */
.contact-form-col,
.login-form-col,
.register-form-col,
.info-form-col {
    background: var(--theme-bg-white);
}

/* Imágenes */
.contact-image-col img,
.login-image-col img,
.register-image-col img,
.info-image-col img {
    box-shadow: var(--theme-shadow-sm);
    border-radius: var(--theme-radius-lg);
}

/* Títulos con gradiente */
.contact-title,
.login-title,
.register-title,
.info-title {
    background: var(--theme-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtítulos */
.contact-subtitle,
.login-subtitle,
.register-subtitle,
.info-subtitle {
    color: var(--theme-text-muted);
}

/* Labels */
.contact-form-group label,
.login-form-group label,
.register-form-group label,
.info-form-group label {
    color: var(--theme-text-dark);
    font-weight: 600;
}

.contact-form-group label i,
.login-form-group label i,
.register-form-group label i,
.info-form-group label i {
    color: var(--theme-primary);
}

/* Inputs y Textareas */
.contact-form-control,
.login-form-control,
.register-form-control,
.info-form-control,
.contact-textarea,
.login-textarea,
.register-textarea,
.info-textarea {
    border: 2px solid var(--theme-border-light);
    border-radius: var(--theme-radius-md);
    transition: all 0.3s ease;
}

.contact-form-control:focus,
.login-form-control:focus,
.register-form-control:focus,
.info-form-control:focus,
.contact-textarea:focus,
.login-textarea:focus,
.register-textarea:focus,
.info-textarea:focus {
    border-color: var(--theme-primary);
    box-shadow: var(--theme-shadow-primary);
    background-color: var(--theme-bg-focus);
}

.contact-form-control::placeholder,
.login-form-control::placeholder,
.register-form-control::placeholder,
.info-form-control::placeholder,
.contact-textarea::placeholder,
.login-textarea::placeholder,
.register-textarea::placeholder,
.info-textarea::placeholder {
    color: var(--theme-text-light);
}

/* Botones */
.btn-contact,
.btn-login,
.btn-register,
.btn-info-submit {
    background: var(--theme-gradient-primary);
    border: none;
    border-radius: var(--theme-radius-md);
    color: var(--theme-text-white);
    transition: all 0.3s ease;
    box-shadow: var(--theme-shadow-lg);
}

.btn-contact:hover,
.btn-login:hover,
.btn-register:hover,
.btn-info-submit:hover {
    background: var(--theme-gradient-primary-reverse);
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-primary-lg);
    color: var(--theme-text-white);
}

.btn-contact:active,
.btn-login:active,
.btn-register:active,
.btn-info-submit:active {
    transform: translateY(0);
    box-shadow: var(--theme-shadow-lg);
}

/* Botones secundarios */
.btn-secondary-link {
    background: var(--theme-bg-light);
    border: 2px solid var(--theme-border-light);
    border-radius: var(--theme-radius-md);
    color: var(--theme-primary);
}

.btn-secondary-link:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

/* Checkboxes */
.contact-form-check,
.login-form-check,
.register-form-check,
.info-form-check {
    background-color: var(--theme-bg-light);
    border-left: 4px solid var(--theme-primary);
    border-radius: var(--theme-radius-md);
}

.contact-form-check-input,
.login-form-check-input,
.register-form-check-input,
.info-form-check-input {
    border: 2px solid var(--theme-border-light);
}

.contact-form-check-input:checked,
.login-form-check-input:checked,
.register-form-check-input:checked,
.info-form-check-input:checked {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
}

/* Información de contacto */
.contact-info-item,
.info-item {
    background-color: var(--theme-bg-light);
    border-left: 4px solid var(--theme-primary);
    border-radius: var(--theme-radius-md);
}

.contact-info-item i,
.info-item i {
    color: var(--theme-primary);
}

.contact-info-content h6,
.info-content h6 {
    color: var(--theme-text-dark);
}

.contact-info-content p,
.info-content p {
    color: var(--theme-text-muted);
}

.contact-info-content a,
.info-content a {
    color: var(--theme-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.contact-info-content a:hover,
.info-content a:hover {
    color: var(--theme-primary-dark);
    text-decoration: underline;
}

/* Links de formulario */
.contact-links,
.login-links,
.register-links,
.info-links {
    border-top: 1px solid var(--theme-border-light);
}

.contact-links p,
.login-links p,
.register-links p,
.info-links p {
    color: var(--theme-text-muted);
}

.contact-links a,
.login-links a,
.register-links a,
.info-links a {
    color: var(--theme-primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.contact-links a:hover,
.login-links a:hover,
.register-links a:hover,
.info-links a:hover {
    color: var(--theme-primary-dark);
    border-bottom-color: var(--theme-primary-dark);
}

/* Validación */
.text-danger {
    color: #dc3545;
    font-weight: 500;
    font-size: 0.85rem;
}

.validation-summary-errors {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: var(--theme-radius-md);
    padding: 1rem;
    color: #721c24;
}

.alert-success {
    background-color: rgba(61, 220, 132, 0.1);
    border: 1px solid #3ddc84;
    border-radius: var(--theme-radius-md);
    padding: 1rem;
    color: #1a8f3f;
    font-weight: 500;
}

/* ==================== ANIMACIONES ==================== */

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* ==================== RESPONSIVE DESIGN ==================== */

@media (max-width: 768px) {
    .contact-container,
    .login-container,
    .register-container,
    .info-container {
        border-radius: var(--theme-radius-lg);
        margin: 20px 0;
    }
}

@media (max-width: 576px) {
    .contact-container,
    .login-container,
    .register-container,
    .info-container {
        border-radius: var(--theme-radius-md);
        margin: 10px 0;
    }
}

/* ==================== DARK MODE SUPPORT ==================== */

@media (prefers-color-scheme: dark) {
    :root {
        --theme-text-dark: #ffffff;
        --theme-text-muted: #cccccc;
        --theme-text-light: #999999;
        --theme-bg-white: #1a1a1a;
        --theme-bg-light: #333333;
        --theme-bg-focus: #2a2a2a;
        --theme-border-light: #444444;
    }
}

/* ==================== ACCESIBILIDAD ==================== */

@media (prefers-reduced-motion: reduce) {
    .contact-container,
    .login-container,
    .register-container,
    .info-container,
    .contact-image-col img,
    .login-image-col img,
    .register-image-col img,
    .info-image-col img,
    .btn-contact,
    .btn-login,
    .btn-register,
    .btn-info-submit {
        animation: none;
        transition: none;
    }
}