/* ========================================
   THEME / BRAND CONFIGURATION
   ========================================
   
   Este archivo centraliza todos los colores y variables
   de tema del proyecto. Edita este archivo para personalizar
   la apariencia para diferentes clientes.
   
   ======================================== */

:root {
  /* ========================================
     FONDOS PRINCIPALES
     ======================================== */
  
  /* Fondo principal de la aplicación */
  --bg-primary: #212121;
  
  /* Fondo del área de chat */
  --bg-chat: #212121;
  
  /* Fondo del panel lateral (sidebar) */
  --bg-sidebar: #181818;
  
  /* Fondo del header */
  --bg-header: #212121;
  
  /* Fondo de la barra de input */
  --bg-input-bar: #212121;
  
  /* Fondo del login */
  --bg-login: #212121;
  
  /* ========================================
     FONDOS DE COMPONENTES
     ======================================== */
  
  /* Fondo de las burbujas del usuario */
  --bg-bubble-user: #303030;
  
  /* Fondo de las burbujas de la IA */
  --bg-bubble-ai: #1a1a1a;
  
  /* Fondo del dropdown de modelos */
  --bg-dropdown: #1a1a1a;
  
  /* Fondo de bloques de código */
  --bg-code: #1e1e1e;
  
  /* Fondo de código inline */
  --bg-code-inline: #2d2d2d;
  
  /* Fondo del header de bloques de código */
  --bg-code-header: #2d2d2d;

  /* Fondo de los botones del sidebar */
  --bg-sidebar-btn: #181818;

  /* Fondo del input de login */
  --bg-input-login: #303030;
  
  /* ========================================
     INPUTS
     ======================================== */
  
  /* Fondo del input de mensaje */
  --input-bg: #303030;
  
  /* Borde del input */
  --input-border: #3e3e3e;
  
  /* Borde del input en focus */
  --input-border-focus: #36A4B4;
  
  /* ========================================
     BOTONES
     ======================================== */
  
  /* Color de acento principal (botones primarios) */
  --btn-primary-bg: #36A4B4;
  --btn-primary-text: #000000;
  --btn-primary-hover: #2D8A98;
  
  /* Botones secundarios/hover */
  --btn-secondary-bg: transparent;
  --btn-secondary-hover: #303030;
  
  /* Botón deshabilitado */
  --btn-disabled-bg: #2f2f2f;
  
  /* Botón de logout/peligro */
  --btn-danger-text: #ff6b6b;
  
  /* ========================================
     TEXTOS
     ======================================== */
  
  /* Color de texto principal */
  --text-primary: #ececec;
  
  /* Color de texto secundario/muted */
  --text-muted: #8e8ea0;
  
  /* Color de texto en títulos */
  --text-heading: #ffffff;
  
  /* Color de enlaces */
  --text-link: #58a6ff;
  
  /* Color de código inline */
  --text-code: #e06c75;

  /* Color de texto en boton de login */
  --text-primary-btn: #ffffff;
  
  /* ========================================
     BORDES Y DIVISORES
     ======================================== */
  
  /* Borde sutil (divisores, cards) */
  --border-subtle: #3e3e3e;
  
  /* Borde derecho del sidebar */
  --border-sidebar: #212121;

  /* Borde inferior del header */
  --border-header: #212121;

  /* Borde de tablas */
  --border-table: #3e3e3e;

  /* Borde del input de login */
  --border-input-login: #3e3e3e;
  
  /* ========================================
     ESTADOS Y EFECTOS
     ======================================== */
  
  /* Color de acento (selecciones, checkmarks) */
  --accent: #36A4B4;
  
  /* Fondo de item activo/seleccionado */
  --bg-active: rgba(54, 164, 180, 0.15);
  
  /* Color de éxito */
  --color-success: #8CD8E0;
  --bg-success: rgba(54, 164, 180, 0.1);
  
  /* Color de error */
  --color-error: #ff8585;
  --bg-error: rgba(255, 99, 99, 0.1);
  
  /* ========================================
     VARIABLES DEL SISTEMA (no modificar)
     ======================================== */
  
  --viewport-height: 100vh;
  --keyboard-height: 0px;
}

/* ========================================
   MAPEO DE VARIABLES LEGACY
   ----------------------------------------
   Estas variables mantienen compatibilidad
   con los estilos existentes
   ======================================== */

:root {
  /* Mapeo para chat_style.css */
  --bg: var(--bg-primary);
  --chat-bg: var(--bg-chat);
  --sidebar-bg: var(--bg-sidebar);
  --bubble-user: var(--bg-bubble-user);
  --bubble-ai: var(--bg-bubble-ai);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --code-bg: var(--bg-code);
  --inline-code-bg: var(--bg-code-inline);
  --table-border: var(--border-table);
  --link-color: var(--text-link);
}