.MuiAvatar-circular { display: none !important; } /* #upload-button { display: none !important; } #new-chat-button { display: none !important; } */ /*.css-1a6az2d*/ .css-1qe6x04 { display: none !important; } /* Elimina el primer HR de la lista*/ ul.MuiList-root hr.css-1a6az2d:first-of-type { display: none; } .watermark { display: none !important; } .MuiAlert-standardInfo { display: none !important; } .css-93z3fs { color: #f8b900 !important; text-decoration: underline #f8b900 !important; } #actions-list { color: #f8b900 !important; } .css-hhc1wx img { max-height: 30px !important; } /* img[src=""] { 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_new.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; } .modebar-btn--logo { display: none !important; } .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; } html.dark a[href="/graphs"] img { content: url("/public/chart.svg"); } /* Si tiene la clase light → usa el ícono oscuro */ html.light a[href="/graphs"] img { content: url("/public/chart-oscuro.svg"); } /* Si tiene la clase light → usa el ícono oscuro */ html.dark a[href="/conversations-report"] img { content: url("/public/message-square-more.svg"); } /* Si tiene la clase light → usa el ícono oscuro */ html.light a[href="/conversations-report"] img { content: url("/public/message-square-more-oscuro.svg"); } /* Oculta las dentro del botón de perfiles */ #chat-profiles img { width: 0 !important; height: 0 !important; opacity: 0 !important; position: absolute !important; } /* El contenedor donde insertaremos el pseudo-elemento (el
que envuelve ícono + texto) */ #chat-profiles span > div { position: relative; } /* Pseudo-elemento que hará de ícono */ #chat-profiles span > div::before { content: ""; display: inline-block; width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; margin-right: 0.5rem; /* espacio antes del texto */ vertical-align: middle; } /* ========== 1) Header: link /graphs ========== */ a[href="/graphs"] img { width: 0 !important; height: 0 !important; opacity: 0 !important; position: absolute !important; } 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: url("/public/chart.svg"); } html.light a[href="/graphs"]::before { background-image: url("/public/chart-oscuro.svg"); } /* ========== 2) Botón de perfiles (#chat-profiles) ========== */ /* Ocultamos el original del botón */ #chat-profiles img { width: 0 !important; height: 0 !important; opacity: 0 !important; position: absolute !important; } /* Contenedor que mostrará el 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(--icon-url); } /* BOT */ html.dark #chat-profiles span > div:has(img[src$="/bot.svg"]), html.dark #chat-profiles span > div:has(img[alt*="Modo Normal"]) { --icon-url: url("/public/bot.svg"); } html.light #chat-profiles span > div:has(img[src$="/bot.svg"]), html.light #chat-profiles span > div:has(img[alt*="Modo Normal"]) { --icon-url: url("/public/bot-oscuro.svg"); } /* BRAIN */ html.dark #chat-profiles span > div:has(img[src$="/brain.svg"]), html.dark #chat-profiles span > div:has(img[alt*="Razonamiento"]) { --icon-url: url("/public/brain.svg"); } html.light #chat-profiles span > div:has(img[src$="/brain.svg"]), html.light #chat-profiles span > div:has(img[alt*="Razonamiento"]) { --icon-url: url("/public/brain-oscuro.svg"); } /* ========== 3) Welcome Screen (ícono central) ========== */ /* Ocultamos el del welcome-screen cuando sea bot.svg */ #welcome-screen img[src$="/bot.svg"] { width: 0 !important; height: 0 !important; opacity: 0 !important; position: absolute !important; } /* El wrapper que contiene ese (padre inmediato) mostrará el pseudo-ícono */ #welcome-screen div:has(> img[src$="/bot.svg"]) { position: relative; } /* Reemplazamos por un pseudo-ícono del mismo tamaño (h-16 w-16 => 64px) */ #welcome-screen div:has(> img[src$="/bot.svg"])::before { content: ""; display: inline-block; width: 64px; height: 64px; background-size: cover; background-repeat: no-repeat; border-radius: 9999px; /* mantiene la forma redondeada */ background-image: var(--welcome-icon-url); } /* Tema oscuro -> bot.svg | Tema claro -> bot-oscuro.svg */ html.dark #welcome-screen div:has(> img[src$="/bot.svg"]) { --welcome-icon-url: url("/public/bot.svg"); } html.light #welcome-screen div:has(> img[src$="/bot.svg"]) { --welcome-icon-url: url("/public/bot-oscuro.svg"); } /* ========== 4) Dropdown del selector de perfiles (menú Radix) ========== */ /* El menú se renderiza en un portal; como no podemos inspeccionarlo, apuntamos de forma segura a elementos con rol de lista/menú y solo a íconos bot/brain. */ /* Ocultamos el original cuando sea bot/brain dentro de menús/listas */ :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; } /* Usamos el contenedor inmediato de ese para pintar el pseudo-ícono */ :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; /* tamaño del ícono en el dropdown */ height: 24px; background-size: contain; background-repeat: no-repeat; margin-right: 0.5rem; vertical-align: middle; background-image: var(--menu-icon-url); } /* Tema oscuro (bot/brain base) */ html.dark :where([role="listbox"], [role="menu"], [data-radix-popper-content]) div:has(> img[src$="/bot.svg"]) { --menu-icon-url: url("/public/bot.svg"); } html.dark :where([role="listbox"], [role="menu"], [data-radix-popper-content]) div:has(> img[src$="/brain.svg"]) { --menu-icon-url: url("/public/brain.svg"); } /* Tema claro (versiones -oscuro) */ html.light :where([role="listbox"], [role="menu"], [data-radix-popper-content]) div:has(> img[src$="/bot.svg"]) { --menu-icon-url: url("/public/bot-oscuro.svg"); } html.light :where([role="listbox"], [role="menu"], [data-radix-popper-content]) div:has(> img[src$="/brain.svg"]) { --menu-icon-url: url("/public/brain-oscuro.svg"); } html.light .bg-accent { background-color: hsl(0deg 0% 89.76%) !important; } #theme-toggle { width: 4rem !important; }