/* =============================================================================
   QAgent v3 — CSS Base (public/clases.css)
   Se combina con clients/{id}/public/overrides.css → public/app_styles.css
   Los clientes sobreescriben las variables de branding en su overrides.css.
   Última actualización: 2026-02-20
   ============================================================================= */

/* =============================================================================
   VARIABLES DE BRANDING (valores por defecto — clientes los sobreescriben)
   ============================================================================= */
:root {
    /* --- Chat Profiles y Dropdown (24×24 px) --- */
    --brand-profile-normal-dark:  url("/public/bot.svg");
    --brand-profile-normal-light: url("/public/bot-oscuro.svg");
    --brand-profile-deep-dark:    url("/public/brain.svg");
    --brand-profile-deep-light:   url("/public/brain-oscuro.svg");

    /* --- Welcome Screen (ícono central 64×64 px) --- */
    --brand-welcome-dark:  url("/public/bot.svg");
    --brand-welcome-light: url("/public/bot-oscuro.svg");

    /* --- Fondo del chat (none = sin imagen) --- */
    --brand-bg-dark:  none;
    --brand-bg-light: none;

    /* --- Íconos del header (nav links) --- */
    --brand-nav-graphs-dark:  url("/public/chart.svg");
    --brand-nav-graphs-light: url("/public/chart-oscuro.svg");
    --brand-nav-report-dark:  url("/public/message-square-more.svg");
    --brand-nav-report-light: url("/public/message-square-more-oscuro.svg");
    --brand-nav-portal-dark:  url("/public/house.svg");
    --brand-nav-portal-light: url("/public/house-dark.svg");

    /* --- Login background --- */
    --brand-login-bg: url("/public/login.png");

    /* --- Avatar de steps (respuestas del asistente) --- */
    --brand-avatar-dark:  url("/public/bot.svg");
    --brand-avatar-light: url("/public/bot-oscuro.svg");
    --brand-avatar:       var(--brand-avatar-dark); /* fallback compat */
}

/* =============================================================================
   UI BASE — elementos que se ocultan en todos los clientes
   ============================================================================= */
.MuiAvatar-circular  { display: none !important; }
.watermark           { display: none !important; }
.css-1qe6x04         { display: none !important; }
.MuiAlert-standardInfo { display: none !important; }

/* Elimina el primer HR de la lista del sidebar */
ul.MuiList-root hr.css-1a6az2d:first-of-type { display: none; }

/* Links y acciones del chat */
.css-93z3fs {
    color: #f8b900 !important;
    text-decoration: underline #f8b900 !important;
}
#actions-list { color: #f8b900 !important; }

/* Logo del sidebar */
.css-hhc1wx img { max-height: 30px !important; }

/* Plotly — ocultar watermark y controles innecesarios */
.modebar-btn--logo,
.modebar-btn.plotlyjsicon.modebar-btn--logo { display: none !important; }
[data-val="lasso"],
[data-val="zoom"],
[data-val="select"],
[data-val="in"],
[data-val="out"],
[data-val="auto"],
[data-val="pan"] { display: none !important; }

/* Accent (modo claro) */
html.light .bg-accent {
    background-color: hsl(0deg 0% 89.76%) !important;
}

/* Toggle de tema */
#theme-toggle { width: 4rem !important; }

/* =============================================================================
   LOGIN BACKGROUND
   ============================================================================= */
img.absolute.inset-0.h-full.w-full.object-cover {
    content: var(--brand-login-bg) !important;
    filter: none !important;
}
.dark img.absolute.inset-0.h-full.w-full.object-cover {
    filter: none !important;
}

/* =============================================================================
   FONDO DEL CHAT (background del área de mensajes)
   ============================================================================= */
html.dark  .bg-background {
    background-image: var(--brand-bg-dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
html.light .bg-background {
    background-image: var(--brand-bg-light);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* =============================================================================
   ÍCONOS DEL HEADER (nav links)
   ============================================================================= */

/* --- /graphs --- */
html.dark  a[href$="/graphs"] img,
html.light a[href$="/graphs"] img {
    width: 0 !important; height: 0 !important;
    opacity: 0 !important; position: absolute !important;
}
/* fallback content (clases.css legacy — para clientes sin base_path) */
html.dark  a[href="/graphs"] img { content: var(--brand-nav-graphs-dark); }
html.light a[href="/graphs"] img { content: var(--brand-nav-graphs-light); }

a[href$="/graphs"]::before {
    content: "";
    display: inline-block;
    width: 24px; height: 24px;
    background-size: contain; background-repeat: no-repeat;
    vertical-align: middle;
}
html.dark  a[href$="/graphs"]::before { background-image: var(--brand-nav-graphs-dark); }
html.light a[href$="/graphs"]::before { background-image: var(--brand-nav-graphs-light); }

/* --- /conversations-report --- */
html.dark  a[href$="/conversations-report"] img,
html.light a[href$="/conversations-report"] img {
    width: 0 !important; height: 0 !important;
    opacity: 0 !important; position: absolute !important;
}
html.dark  a[href="/conversations-report"] img { content: var(--brand-nav-report-dark); }
html.light a[href="/conversations-report"] img { content: var(--brand-nav-report-light); }

a[href$="/conversations-report"]::before {
    content: "";
    display: inline-block;
    width: 24px; height: 24px;
    background-size: contain; background-repeat: no-repeat;
    vertical-align: middle;
}
html.dark  a[href$="/conversations-report"]::before { background-image: var(--brand-nav-report-dark); }
html.light a[href$="/conversations-report"]::before { background-image: var(--brand-nav-report-light); }

/* --- /portal (Volver al portal) --- */
html.dark  a[href$="/portal"] img,
html.light a[href$="/portal"] img {
    width: 0 !important; height: 0 !important;
    opacity: 0 !important; position: absolute !important;
}
html.dark  a[href="/portal"] img { content: var(--brand-nav-portal-dark); }
html.light a[href="/portal"] img { content: var(--brand-nav-portal-light); }

a[href$="/portal"]::before {
    content: "";
    display: inline-block;
    width: 24px; height: 24px;
    background-size: contain; background-repeat: no-repeat;
    vertical-align: middle;
}
html.dark  a[href$="/portal"]::before { background-image: var(--brand-nav-portal-dark); }
html.light a[href$="/portal"]::before { background-image: var(--brand-nav-portal-light); }

/* =============================================================================
   CHAT PROFILES — Botón exterior del header (#chat-profiles)
   ============================================================================= */

/* Oculta la <img> original */
#chat-profiles img {
    width: 0 !important; height: 0 !important;
    opacity: 0 !important; position: absolute !important;
}

/* Contenedor del pseudo-ícono */
#chat-profiles span > div { position: relative; }
#chat-profiles span > div::before {
    content: "";
    display: inline-block;
    width: 24px; height: 24px;
    background-size: contain; background-repeat: no-repeat;
    margin-right: 0.5rem; vertical-align: middle;
    background-image: var(--profile-icon-url);
}

/* Asigna la variable según perfil y tema */
html.dark  #chat-profiles span > div:has(img[alt*="Modo Normal"])           { --profile-icon-url: var(--brand-profile-normal-dark); }
html.light #chat-profiles span > div:has(img[alt*="Modo Normal"])           { --profile-icon-url: var(--brand-profile-normal-light); }
html.dark  #chat-profiles span > div:has(img[alt*="Razonamiento"])          { --profile-icon-url: var(--brand-profile-deep-dark); }
html.light #chat-profiles span > div:has(img[alt*="Razonamiento"])          { --profile-icon-url: var(--brand-profile-deep-light); }

/* Fallback por src (para compatibilidad con versiones anteriores) */
html.dark  #chat-profiles span > div:has(img[src$="/bot.svg"])              { --profile-icon-url: var(--brand-profile-normal-dark); }
html.light #chat-profiles span > div:has(img[src$="/bot.svg"])              { --profile-icon-url: var(--brand-profile-normal-light); }
html.dark  #chat-profiles span > div:has(img[src$="/brain.svg"])            { --profile-icon-url: var(--brand-profile-deep-dark); }
html.light #chat-profiles span > div:has(img[src$="/brain.svg"])            { --profile-icon-url: var(--brand-profile-deep-light); }

/* =============================================================================
   CHAT PROFILES — Dropdown del selector (menú Radix)
   ============================================================================= */

/* Oculta imágenes originales dentro del dropdown */
:where([role="listbox"], [role="menu"], [data-radix-popper-content]) img[src$="/bot.svg"],
:where([role="listbox"], [role="menu"], [data-radix-popper-content]) img[src$="/brain.svg"] {
    width: 0 !important; height: 0 !important;
    opacity: 0 !important; position: absolute !important;
}

/* Pseudo-ícono en cada item del dropdown */
:where([role="listbox"], [role="menu"], [data-radix-popper-content]) div:has(> img[src$="/bot.svg"]),
:where([role="listbox"], [role="menu"], [data-radix-popper-content]) div:has(> img[src$="/brain.svg"]) {
    position: relative;
}
:where([role="listbox"], [role="menu"], [data-radix-popper-content]) div:has(> img[src$="/bot.svg"])::before,
:where([role="listbox"], [role="menu"], [data-radix-popper-content]) div:has(> img[src$="/brain.svg"])::before {
    content: "";
    display: inline-block;
    width: 24px; height: 24px;
    background-size: contain; background-repeat: no-repeat;
    margin-right: 0.5rem; vertical-align: middle;
    background-image: var(--dropdown-icon-url);
}

/* Asigna la variable según ícon y tema */
html.dark  :where([role="listbox"],[role="menu"],[data-radix-popper-content]) div:has(> img[src$="/bot.svg"])    { --dropdown-icon-url: var(--brand-profile-normal-dark); }
html.light :where([role="listbox"],[role="menu"],[data-radix-popper-content]) div:has(> img[src$="/bot.svg"])    { --dropdown-icon-url: var(--brand-profile-normal-light); }
html.dark  :where([role="listbox"],[role="menu"],[data-radix-popper-content]) div:has(> img[src$="/brain.svg"])  { --dropdown-icon-url: var(--brand-profile-deep-dark); }
html.light :where([role="listbox"],[role="menu"],[data-radix-popper-content]) div:has(> img[src$="/brain.svg"])  { --dropdown-icon-url: var(--brand-profile-deep-light); }

/* =============================================================================
   WELCOME SCREEN — ícono central grande (64×64 px)
   ============================================================================= */

/* Centrar todo el contenido del welcome-screen (ícono + texto + saludo).
   .prose de Tailwind fuerza text-align:left en sus hijos, por eso se necesita
   apuntar tanto a .prose como a los div[role="article"] que genera Chainlit. */
#welcome-screen,
#welcome-screen .prose,
#welcome-screen p,
#welcome-screen [role="article"] {
    text-align: center !important;
}

/* Saludo dinámico inyectado por bootstrap.py como CSS variable al iniciar el servidor.
   Aparece debajo del texto del perfil, únicamente en la welcome screen.
   La variable --current-greeting se escribe en app_styles.css en cada arranque. */
#welcome-screen .prose::after {
    content: var(--current-greeting, "");
    display: block;
    margin-top: 0.75rem;
    font-size: 0.95rem;
    font-style: italic;
    opacity: 0.75;
    text-align: center;
}

/* Oculta la <img> original del welcome screen */
#welcome-screen img[src$="/bot.svg"],
#welcome-screen img[src$="/brain.svg"] {
    width: 0 !important; height: 0 !important;
    opacity: 0 !important; position: absolute !important;
}

/* Contenedor del ícono central */
#welcome-screen div:has(> img[src$="/bot.svg"]),
#welcome-screen div:has(> img[src$="/brain.svg"]) {
    position: relative;
}

/* Pseudo-ícono grande */
#welcome-screen div:has(> img[src$="/bot.svg"])::before,
#welcome-screen div:has(> img[src$="/brain.svg"])::before {
    content: "";
    display: inline-block;
    width: 64px; height: 64px;
    background-size: cover; background-repeat: no-repeat;
    border-radius: 9999px;
    background-image: var(--welcome-icon-url);
}

/* Asigna la variable según tema */
html.dark  #welcome-screen div:has(> img[src$="/bot.svg"])    { --welcome-icon-url: var(--brand-welcome-dark); }
html.light #welcome-screen div:has(> img[src$="/bot.svg"])    { --welcome-icon-url: var(--brand-welcome-light); }
html.dark  #welcome-screen div:has(> img[src$="/brain.svg"])  { --welcome-icon-url: var(--brand-profile-deep-dark); }
html.light #welcome-screen div:has(> img[src$="/brain.svg"])  { --welcome-icon-url: var(--brand-profile-deep-light); }

/* =============================================================================
   AVATAR DE STEPS (respuestas del asistente)
   ============================================================================= */
html.dark  img[src*="/avatars/"] {
    content: var(--brand-avatar-dark) !important;
}
html.light img[src*="/avatars/"] {
    content: var(--brand-avatar-light) !important;
}

/* =============================================================================
   RESPONSIVE — ocultar elementos en móvil
   ============================================================================= */
@media (max-width: 768px) {
    #readme-button                           { display: none !important; }
    #chat-profiles                           { display: none !important; }
    button:has(a[href$="/conversations-report"]) { display: none !important; }
    button:has(a[href$="/graphs"])           { display: none !important; }
}

/* =============================================================================
   FORMATEO SQL / JSON en bloques de código
   ============================================================================= */
.hljs-string {
    white-space: pre-wrap !important;
    word-wrap: break-word;
    display: block;
    line-height: 2 !important;
    padding: 20px !important;
    text-indent: 0 !important;
    word-spacing: 2px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.language-json {
    white-space: pre-wrap !important;
    word-wrap: break-word;
    display: block;
    line-height: 2 !important;
    padding: 20px !important;
    text-indent: 0 !important;
    word-spacing: 2px;
    letter-spacing: 0.5px;
}

/* ============================================================
   Reorder del chip "Herramientas" en el toolbar del composer
   ============================================================
   Aplica a todos los clientes. El botón #command-button lo renderiza
   Chainlit solo cuando se llamó a set_commands(...) en on_chat_start,
   así que este bloque es no-op para clientes sin commands_ui_enabled.

   Orden natural:  audio → attachments → command-button → starters (★)
   Orden deseado:  audio → attachments → starters (★) → command-button
*/
#command-button {
    order: 99 !important;
    margin-left: 0.25rem !important;
}
#starters {
    order: 1 !important;
}
/* Fallback por si Chainlit envuelve los botones en wrappers intermedios. */
:has(> #command-button) {
    order: 99 !important;
}
:has(> #starters) {
    order: 1 !important;
}


/* === Override del cliente === */
@import url("http://localhost:8000/api/dynamic-styles.css");
/*
 * QAgent v3 - CSS Overrides para cliente: dev
 * Este archivo se carga DESPUÉS del CSS base (public/clases.css).
 * Agregar aquí estilos específicos de este cliente.
 *
 * Ejemplos:
 * - Cambiar color primario: --primary: 220 80% 50%;
 * - Ocultar un elemento: .mi-selector { display: none; }
 */


 /* Modificación para la imagen de login - con nuevo nombre para forzar recarga */
img.absolute.inset-0.h-full.w-full.object-cover {
    content: url("/public/login_bg.png") !important;
    filter: none !important;
}

/* Para modo oscuro - eliminamos el filtro */
.dark img.absolute.inset-0.h-full.w-full.object-cover {
    filter: none !important;
}

/* ========== 5) Avatares de Steps - tema claro ========== */
/* Reemplaza el avatar blanco por la versión oscura en modo claro */
html.light img[src*="/avatars/"] {
    content: url("/public/avatar_dark.png") !important;
}

html.dark img[src*="/avatars/"] {
    content: url("/public/avatar_dark.png") !important;
    
}


/*********************************************************************/

:root {
    /* --- Chat Profiles y Dropdown (24×24 px) --- */
   
    /* --- Welcome Screen (ícono central 64×64 px) --- */
    --brand-welcome-dark:  url("/public/bot_dark.png");
    --brand-welcome-light: url("/public/bot_light.png");

    /* --- Fondo del chat (none = sin imagen) --- */
    --brand-bg-dark:  none;
    --brand-bg-light: none;


}