/* =================================================
* PEEKABOO ENGLISH — branding.css
* Capa de identidad visual sobre LibreChat v0.8.7, SIN fork ni rebuild.
*
* CÓMO FUNCIONA (verificado contra el código fuente del tag v0.8.7):
* LibreChat define toda su paleta "semántica" (fondos, bordes, botón de
* envío, anillos de foco, etc.) como variables CSS personalizadas en
* `client/src/style.css` (bloques `html { --surface-primary: ...; }` y
* `.dark { --surface-primary: ...; }`), y `client/tailwind.config.cjs`
* mapea las clases de Tailwind directamente a esas variables
* (`'surface-submit': 'var(--surface-submit)'`, etc. — confirmado línea a
* línea). Esto significa que **redefinir el VALOR de esas variables en
* una hoja de estilos cargada DESPUÉS del bundle principal cambia el color
* real de todos los componentes que usan esa clase, sin tocar ni un solo
* componente React ni volver a compilar nada** — es CSS puro compitiendo
* por la cascada (mismo selector `html`/`.dark`, cargado más tarde, gana
* por orden de aparición).
*
* Todo lo de este fichero se aplica DESPUÉS del CSS de LibreChat (ver
* production/branding/custom/README.md para cómo se carga exactamente:
* un añadido al final de más un bind mount, no un fork).
*
* ALCANCE DELIBERADAMENTE ACOTADO — variables NO tocadas a propósito:
* --text-primary, --text-secondary, --surface-chat,
* --surface-secondary, --surface-tertiary
* Son el texto de los mensajes y el fondo de la caja del composer — se
* dejan intactos para no "alterar agresivamente" la zona de lectura
* (pedido explícito: mantener fondo claro y legibilidad). Todo lo de aquí
* abajo son bordes, estados hover/activo, botones y focos — "detalles/
* acentos", no el contenido.
*
* EXCEPCIÓN DELIBERADA, DOCUMENTADA: `--presentation` (sección 1/2) SÍ se
* toca, con un tinte extremadamente sutil (a un paso de blanco/negro
* puro), porque es la única variable semántica real del fondo del
* header/topbar (`Chat/Header.tsx`: "bg-gradient-to-b from-presentation
* to-transparent") — pero también es el fondo compartido del envoltorio
* de toda la vista de mensajes (`SidePanelGroup.tsx`) y de bastantes menús/
* desplegables (selector de modelo, marcadores, exportar, etc.). Se
* documenta el alcance real más abajo, en la sección correspondiente —
* el valor elegido es intencionadamente casi imperceptible para no romper
* "prácticamente blanco" en la zona de lectura.
* ================================================= */
/* -------------------------------------------------
* 1. VARIABLES DE MARCA — modo claro
* Mismos selectores que client/src/style.css (html { ... }) para heredar
* la especificidad exacta y ganar solo por orden de carga, sin !important.
* ------------------------------------------------- */
html {
/* Botón principal ("Enviar", "Guardar", etc. — variante `submit` de
packages/client/src/components/Button.tsx: "bg-surface-submit
text-white hover:bg-surface-submit-hover"). Texto blanco fijo en el
propio componente (comentario del código: "hardcoded text color
because of WCAG contrast issues") — por eso el fondo debe mantener
contraste alto con blanco; ambos tonos lo cumplen. */
--surface-submit: #32556b; /* Azul principal Peekaboo */
--surface-submit-hover: #24404f; /* Azul principal, ~25% más oscuro */
/* Foco por teclado/ratón (focus-visible:ring-2 ring-ring-primary, ej.
client/src/components/Nav/SearchBar.tsx:114). */
--ring-primary: #4d81e8; /* Azul vivo Peekaboo */
/* Conversación activa en el sidebar (bg-surface-active-alt, confirmado
en client/src/components/Conversations/Convo.tsx:223) y estados hover
genéricos (hover:bg-surface-active-alt / hover:bg-surface-hover en
decenas de componentes de Nav/Conversations). */
--surface-active: #d9e8f0;
--surface-active-alt: #ccdeea; /* Fondo azul claro Peekaboo, tal cual */
--surface-hover: #e6f0f5;
--surface-hover-alt: #e0edf3;
/* Bordes ("bordes suaves" pedido explícitamente) — tinte azul muy sutil
en vez del gris neutro por defecto, en todos los border-border-*. */
--border-light: #e6eef3;
--border-medium: #cddce6;
--border-medium-alt: #c2d5e2;
--border-heavy: #a9c3d3;
/* Detalle de acento menor (spinner de ejecución de código, único uso
real confirmado: client/src/components/Chat/Messages/Content/ProgressCircle.tsx). */
--brand-purple: #67c6bd; /* Turquesa Peekaboo, en vez del morado por defecto */
/* Barra vertical izquierda (icono de 52px) + panel expandido de
conversaciones/archivos — confirmado en
client/src/components/UnifiedSidebar/ExpandedPanel.tsx:145
("bg-surface-primary-alt") y Sidebar.tsx:29 (el