/* Omnitec Corporate Theme Colors - Solo variables de color - Tema Claro
Para usar con base-structure.css - Tema corporativo Omnitec
Colores corporativos: RGB(152,151,152), RGB(121,19,85), RGB(255,255,255)
*/

:root {
    /* Colores principales */
    --bg-primary: #f0f0f0;          /* Blanco roto para fondo principal */
    --bg-secondary: #ffffff;        /* Blanco puro para tarjetas y elementos secundarios */
    --bg-tertiary: #f9f9f9;
    --bg-accent: #e0e0e0;
    
    /* Colores de texto */
    --text-primary: #1a1a1a;        /* Texto principal oscuro */
    --text-secondary: #989798;      /* RGB(152,151,152) - Gris corporativo */
    --text-muted: #5c5b5c;
    --text-placeholder: #a0a0a0;
    
    /* Colores de acento - Magenta corporativo */
    --accent-primary: #791355;      /* RGB(121,19,85) - Magenta corporativo */
    --accent-secondary: #943a75;    /* Variación más clara del magenta */
    --accent-hover: #640f47;        /* Variación más oscura del magenta */
    
    /* Estados */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #791355;               /* Usar el magenta corporativo para info */
    --error-hover: #dc2626;
    
    /* Bordes y sombras */
    --border-primary: #d0d0d0;     /* Gris claro para bordes */
    --border-secondary: #e0e0e0;
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.1);
    --shadow-heavy: rgba(0, 0, 0, 0.2);
    
    /* Sidebar */
    --sidebar-bg: #ffffff;
    --sidebar-border: #e0e0e0;
    --sidebar-item-hover: #f0f0f0;
    --sidebar-item-active: #79135515;  /* Magenta corporativo con transparencia */
    
    /* Chat */
    --message-user-bg: #791355;     /* RGB(121,19,85) - Magenta corporativo */
    --message-user-text: #ffffff;   /* RGB(255,255,255) - Blanco corporativo */
    --message-assistant-bg: #e9e9e9;
    --message-assistant-text: #1a1a1a;
    
    /* Input */
    --input-bg: #ffffff;
    --input-border: #d0d0d0;
    --input-focus: #791355;         /* Magenta corporativo */
    
    /* Botones */
    --btn-primary-bg: #791355;      /* RGB(121,19,85) - Magenta corporativo */
    --btn-primary-text: #ffffff;    /* RGB(255,255,255) - Blanco corporativo */
    --btn-primary-hover: #640f47;
    --btn-secondary-bg: #e0e0e0;
    --btn-secondary-text: #5c5b5c;
    --btn-secondary-hover: #d0d0d0;
    
    /* Avatar */
    --avatar-bg: linear-gradient(135deg, #791355, #943a75);
    --avatar-text: #ffffff;
    
    /* Scrollbar */
    --scrollbar-track: #e9e9e9;
    --scrollbar-thumb: #b0b0b0;
    --scrollbar-thumb-hover: #989898;
    
    /* Shadows y efectos */
    --focus-shadow: rgba(121, 19, 85, 0.2);
    --primary-shadow: rgba(121, 19, 85, 0.15);
    --error-shadow: rgba(239, 68, 68, 0.15);
    
    /* Mensajes de estado - backgrounds */
    --error-bg: rgba(239, 68, 68, 0.05);
    --success-bg: rgba(16, 185, 129, 0.05);
    --warning-bg: rgba(245, 158, 11, 0.05);
    
    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Espaciado */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Bordes redondeados */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Fuentes */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
    
    /* Tamaños de fuente */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 2rem;
    
    /* Z-index layers */
    --z-sidebar: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-tooltip: 400;
}

/* Efectos especiales para tema Omnitec */
body {
    background: linear-gradient(135deg, var(--bg-primary) 0%, #d0d0d0 100%);
}

.sidebar {
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, #f0f0f0 100%);
    border-right: 2px solid rgba(121, 19, 85, 0.2);
}

.new-conversation-btn {
    background: linear-gradient(135deg, #791355, #943a75);
    box-shadow: 0 4px 15px rgba(121, 19, 85, 0.2);
    border: 1px solid rgba(121, 19, 85, 0.3);
}

.new-conversation-btn:hover {
    background: linear-gradient(135deg, #640f47, #791355);
    box-shadow: 0 6px 20px rgba(121, 19, 85, 0.3);
}

.message-bubble.user .message-content {
    background: linear-gradient(135deg, #791355, #943a75);
    box-shadow: 0 2px 10px rgba(121, 19, 85, 0.2);
    border: 1px solid rgba(121, 19, 85, 0.1);
}

.conversation-item.active {
    background: linear-gradient(90deg, rgba(121, 19, 85, 0.1), rgba(121, 19, 85, 0.05));
    border-left: 3px solid #791355;
}

.chat-header {
    border-bottom: 1px solid rgba(121, 19, 85, 0.2);
}

.input-container {
    border-top: 1px solid rgba(121, 19, 85, 0.2);
}

/* Branding corporativo sutil */
.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #791355, #989798, #791355);
}

/* Hover effects con colores corporativos */
.user-profile:hover {
    background: rgba(152, 151, 152, 0.1);
    transform: translateY(-1px);
}

.settings-btn:hover {
    color: #791355;
}

/* Focus ring corporativo */
*:focus {
    outline: 2px solid #791355;
    outline-offset: 2px;
}