.button {
    border-radius: 10px !important;
}

:root[data-mode="dark"] 
    .bg-main  {
        background-color: #111111;
    }
:root[data-mode="dark"] aside {
        background-color: #0b0b0b !important;
        border: 0 solid;
    }
    aside {
        border: 0 solid;
    }
:root[data-mode="dark"] .border-b {
    border: 0px solid;
}
:root[data-mode="dark"] .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), #111111 var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
footer {
   
    color: transparent;
    padding-bottom: 1rem;
}
:root[data-mode="dark"] .group-data-sidebar {
    display: none;
}

@media (max-width: 1023px) {

    :root[data-mode="dark"] .bg-main  {
        background-color: #000000;
    }
    
    :root[data-mode="dark"] .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), black var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    
    :root[data-mode="dark"] .navPablos {
        
        background: black !important;
    }
    .navPablos {
        
        background: white;
    }
    
    .inputChats {
        position:fixed;
        bottom:2rem;
        left:1rem;
        right:1rem;
        z-index: 1;
        
    }
    .conversacion {
        padding-top: 5rem;
    }

}

.navHistory {
    background-color: #0b0b0b !important;
}

/* Efectos boing SOLO para móvil - SIN afectar alineación */
@media (max-width: 1023px) {
    
    /* ===== MOBILE NAV ESPECÍFICO ===== */
    nav[x-ref="menu"] button {
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
                    background-color 0.2s ease;
        border-radius: 0.5rem;
        transform-origin: center center;
        transform: scale(1);
    }
    
    nav[x-ref="menu"] button:hover {
        background-color: rgb(var(--color-intermediate));
        transform: scale(1);
    }
    
    nav[x-ref="menu"] button:active {
        transform: scale(0.85);
        transition: transform 0.1s ease;
    }
    
    nav[x-ref="menu"] button:not(:active) {
        transform: scale(1);
    }
    
    nav[x-ref="menu"] a {
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                    background-color 0.2s ease,
                    color 0.2s ease;
        border-radius: 0.5rem;
        transform-origin: center center;
        transform: scale(1);
        left: 0;
        margin-left: 0;
        text-align: left;
    }
    
    nav[x-ref="menu"] a:hover {
        background-color: rgb(var(--color-intermediate)) !important;
        color: rgb(var(--color-intermediate-content)) !important;
        transform: scale(1);
        left: 0;
        margin-left: 0;
    }
    
    nav[x-ref="menu"] a:active {
        transform: scale(0.9);
        transition: transform 0.1s ease;
        background-color: rgb(var(--color-line)) !important;
        left: 0;
        margin-left: 0;
    }
    
    nav[x-ref="menu"] a:not(:active) {
        transform: scale(1);
        left: 0;
        margin-left: 0;
    }
    
    /* ===== BIBLIOTECA - CARDS ESPECÍFICOS ===== */
    a[href*="library/conversations"],
    a[href*="library/documents"],
    a[href*="library/images"],
    a[href*="library/speeches"],
    a[href*="library/transcriptions"],
    a[href*="library/isolated-voices"],
    a[href*="library/classifications"],
    a[href*="library/compositions"],
    a[href*="library/code-documents"] {
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                    background-color 0.2s ease,
                    border-color 0.2s ease;
        transform-origin: center center;
        transform: scale(1);
    }
    
    a[href*="library/conversations"]:hover,
    a[href*="library/documents"]:hover,
    a[href*="library/images"]:hover,
    a[href*="library/speeches"]:hover,
    a[href*="library/transcriptions"]:hover,
    a[href*="library/isolated-voices"]:hover,
    a[href*="library/classifications"]:hover,
    a[href*="library/compositions"]:hover,
    a[href*="library/code-documents"]:hover {
        transform: scale(1);
        border-color: rgb(var(--color-line));
    }
    
    a[href*="library/conversations"]:active,
    a[href*="library/documents"]:active,
    a[href*="library/images"]:active,
    a[href*="library/speeches"]:active,
    a[href*="library/transcriptions"]:active,
    a[href*="library/isolated-voices"]:active,
    a[href*="library/classifications"]:active,
    a[href*="library/compositions"]:active,
    a[href*="library/code-documents"]:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    a[href*="library/conversations"]:not(:active),
    a[href*="library/documents"]:not(:active),
    a[href*="library/images"]:not(:active),
    a[href*="library/speeches"]:not(:active),
    a[href*="library/transcriptions"]:not(:active),
    a[href*="library/isolated-voices"]:not(:active),
    a[href*="library/classifications"]:not(:active),
    a[href*="library/compositions"]:not(:active),
    a[href*="library/code-documents"]:not(:active) {
        transform: scale(1);
    }
    
    /* ===== ELEMENTOS ESPECÍFICOS DE CONTENIDO ===== */
    /* Solo elementos dentro de listas de contenido */
    [x-data] li a[href*="chat/"],
    [x-data] li a[href*="conversation"],
    [x-data] li a[href*="voiceover/"],
    [x-data] li a[href*="imagine/"],
    [x-data] li a[href*="transcriber/"] {
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                    background-color 0.2s ease;
        transform-origin: center center;
        transform: scale(1);
    }
    
    [x-data] li a[href*="chat/"]:hover,
    [x-data] li a[href*="conversation"]:hover,
    [x-data] li a[href*="voiceover/"]:hover,
    [x-data] li a[href*="imagine/"]:hover,
    [x-data] li a[href*="transcriber/"]:hover {
        transform: scale(1);
        background-color: rgb(var(--color-intermediate));
    }
    
    [x-data] li a[href*="chat/"]:active,
    [x-data] li a[href*="conversation"]:active,
    [x-data] li a[href*="voiceover/"]:active,
    [x-data] li a[href*="imagine/"]:active,
    [x-data] li a[href*="transcriber/"]:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    [x-data] li a[href*="chat/"]:not(:active),
    [x-data] li a[href*="conversation"]:not(:active),
    [x-data] li a[href*="voiceover/"]:not(:active),
    [x-data] li a[href*="imagine/"]:not(:active),
    [x-data] li a[href*="transcriber/"]:not(:active) {
        transform: scale(1);
    }
    
    /* ===== VOCES ESPECÍFICAS ===== */
    /* Solo en páginas de voces */
    body[data-page*="voices"] .voice-card,
    body[data-page*="voiceover"] .voice-item,
    .voices-grid .voice-option {
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                    background-color 0.2s ease,
                    border-color 0.2s ease;
        transform-origin: center center;
        transform: scale(1);
    }
    
    body[data-page*="voices"] .voice-card:hover,
    body[data-page*="voiceover"] .voice-item:hover,
    .voices-grid .voice-option:hover {
        transform: scale(1);
        border-color: rgb(var(--color-line));
    }
    
    body[data-page*="voices"] .voice-card:active,
    body[data-page*="voiceover"] .voice-item:active,
    .voices-grid .voice-option:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    body[data-page*="voices"] .voice-card:not(:active),
    body[data-page*="voiceover"] .voice-item:not(:active),
    .voices-grid .voice-option:not(:active) {
        transform: scale(1);
    }
    
    /* ===== BOTONES ESPECÍFICOS ===== */
    /* Solo botones que no sean de navegación */
    .button:not(.nav-button),
    button:not([disabled]):not(.nav-button) {
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                    background-color 0.2s ease;
        transform-origin: center center;
        transform: scale(1);
    }
    
    .button:not(.nav-button):hover,
    button:not([disabled]):not(.nav-button):hover {
        transform: scale(1);
    }
    
    .button:not(.nav-button):active,
    button:not([disabled]):not(.nav-button):active {
        transform: scale(0.9);
        transition: transform 0.1s ease;
    }
    
    .button:not(.nav-button):not(:active),
    button:not([disabled]):not(.nav-button):not(:active) {
        transform: scale(1);
    }
    
    /* ===== CARDS DE HERRAMIENTAS ESPECÍFICOS ===== */
    /* Solo en dashboard y páginas principales */
    .dashboard-tools a,
    .tools-grid a,
    .features-grid a {
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                    background-color 0.2s ease,
                    border-color 0.2s ease;
        transform-origin: center center;
        transform: scale(1);
    }
    
    .dashboard-tools a:hover,
    .tools-grid a:hover,
    .features-grid a:hover {
        transform: scale(1);
        border-color: rgb(var(--color-line));
    }
    
    .dashboard-tools a:active,
    .tools-grid a:active,
    .features-grid a:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    .dashboard-tools a:not(:active),
    .tools-grid a:not(:active),
    .features-grid a:not(:active) {
        transform: scale(1);
    }
    
    /* ===== AVATARES ESPECÍFICOS ===== */
    /* Solo avatares clickeables */
    button x-avatar,
    .clickable-avatar {
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transform-origin: center center;
        transform: scale(1);
    }
    
    button x-avatar:active,
    .clickable-avatar:active {
        transform: scale(0.9);
        transition: transform 0.1s ease;
    }
    
    button x-avatar:not(:active),
    .clickable-avatar:not(:active) {
        transform: scale(1);
    }
    
    /* ===== ELEMENTOS TOUCH ESPECÍFICOS ===== */
    @media (hover: none) and (pointer: coarse) {
        /* Solo elementos específicos en touch */
        nav[x-ref="menu"] a:active,
        nav[x-ref="menu"] button:active,
        [x-data] li a:active,
        .dashboard-tools a:active,
        .button:active {
            transform: scale(0.95);
            transition: transform 0.1s ease;
        }
        
        nav[x-ref="menu"] a:not(:active),
        nav[x-ref="menu"] button:not(:active),
        [x-data] li a:not(:active),
        .dashboard-tools a:not(:active),
        .button:not(:active) {
            transform: scale(1);
        }
    }
    
    /* ===== CORRECCIÓN DE BOTONES DE MENÚ ===== */
    /* Solo ajustar z-index sin afectar posición */
    [x-data] li button,
    [x-data] li .relative button {
        z-index: 10;
        background: transparent;
        border: none;
        padding: 0.5rem;
        border-radius: 0.25rem;
        transition: background-color 0.2s ease, transform 0.1s ease;
    }
    
    [x-data] li button:hover,
    [x-data] li .relative button:hover {
        background-color: rgb(var(--color-intermediate));
    }
    
    [x-data] li button:active,
    [x-data] li .relative button:active {
        transform: scale(0.9);
        transition: transform 0.1s ease;
    }
}

/* ===== EXCLUSIONES IMPORTANTES ===== */
/* Elementos que NO deben tener efectos */
aside,
aside *,
.sidebar,
.sidebar *,
.navigation,
.navigation *,
input,
textarea,
select,
[contenteditable],
.no-effect {
    transform: none !important;
    transition: none !important;
}

/* Elementos deshabilitados */
[disabled],
.disabled,
[aria-disabled="true"] {
    transform: none !important;
    transition: none !important;
    opacity: 0.5;
}

.chat_icon {
    background: #3bf742;
background: linear-gradient(90deg,rgba(59, 247, 66, 1) 0%, rgba(30, 215, 96, 1) 100%);
}

/* CSS BÁSICO - Solo mejorar diseño sin ocultar nada */
/* Mostrar TODO: Avatar + Nombre + Profesión + Descripción + Botón */

/* Selector específico para cards de asistentes */
.box:has(x-avatar):has(.button[href*="chat"]):not([class*="modal"]):not([class*="overlay"]):not([x-show]),
.card:has(x-avatar):has(.button[href*="chat"]):not([class*="modal"]):not([class*="overlay"]):not([x-show]) {
    text-align: center !important;
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 200px !important;
}

/* Avatar más grande */
.box:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) x-avatar,
.card:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) x-avatar {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    margin-bottom: 0rem !important;
    display: block !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Nombres más grandes */
.box:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) h1,
.box:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) h2,
.box:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) h3,
.box:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) h4,
.box:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) h5,
.box:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) h6,
.card:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) h1,
.card:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) h2,
.card:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) h3,
.card:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) h4,
.card:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) h5,
.card:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) h6 {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    color: rgb(var(--color-content)) !important;
}

/* Botones mejorados */
.box:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) .button,
.box:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) button,
.card:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) .button,
.card:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) button {
    margin-top: auto !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    font-weight: 600 !important;
}

/* FALLBACK para navegadores que no soportan :has() */
.box:contains("Iniciar conversación"):not([class*="modal"]),
.card:contains("Iniciar conversación"):not([class*="modal"]) {
    text-align: center !important;
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 200px !important;
}

.box:contains("Iniciar conversación"):not([class*="modal"]) x-avatar,
.card:contains("Iniciar conversación"):not([class*="modal"]) x-avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    margin-bottom: 1rem !important;
    display: block !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Ocultar SOLO la descripción larga en cards de asistentes */
.box:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) p,
.card:has(.button[href*="chat"]):not([class*="modal"]):not([x-show]) p {
    display: none !important;
}

/* Fallback para navegadores sin soporte :has() */
.box:contains("Iniciar conversación"):not([class*="modal"]) p,
.card:contains("Iniciar conversación"):not([class*="modal"]) p {
    display: none !important;
}

/* CSS para bordes más suaves en modo dark */
/* Bordes levemente más claros que el fondo para una apariencia más sutil */

/* Selector del workspace (donde dice "Personal") */
.workspace-selector,
[class*="workspace"],
.workspace-menu,
.workspace-dropdown {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Buscador */
input[type="search"],
input[placeholder*="Buscar"],
input[placeholder*="Search"],
.search-input,
[class*="search"] input {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Cards de asistentes y otros cards */
.box,
.card,
[class*="card"],
[class*="box"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Inputs y formularios en general */
input,
textarea,
select,
.input,
.textarea,
.select {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Botones con bordes */
.button,
button,
.btn {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Menús y dropdowns */
.menu,
.dropdown,
.select-menu,
[class*="menu"],
[class*="dropdown"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Modales y overlays */
.modal,
.overlay,
.dialog,
.popup {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Navegación y sidebar */
.nav,
.navbar,
.sidebar,
.aside,
nav,
aside {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Elementos con clase border específica */
.border,
[class*="border-"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Elementos con outline */
[class*="outline"] {
    outline-color: rgba(255, 255, 255, 0.08) !important;
}

/* Tabs y pestañas */
.tab,
.tabs,
.tab-content,
[class*="tab"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Elementos de lista */
.list-item,
.list-group-item,
[class*="list"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Contenedores principales */
.container,
.panel,
.widget,
[class*="panel"],
[class*="widget"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Elementos específicos de la aplicación */
.chat,
.conversation,
.message,
[class*="chat"],
[class*="conversation"],
[class*="message"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Headers y footers */
.header,
.footer,
header,
footer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Elementos con fondo que pueden tener bordes */
[class*="bg-"]:not(.avatar):not(x-avatar) {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Elementos con sombra que probablemente tienen bordes */
[class*="shadow"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Selectores específicos para elementos comunes de Tailwind */
.border-gray-200,
.border-gray-300,
.border-gray-400,
.border-gray-500,
.border-gray-600,
.border-gray-700,
.border-gray-800,
.border-slate-200,
.border-slate-300,
.border-slate-400,
.border-slate-500,
.border-slate-600,
.border-slate-700,
.border-slate-800 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Elementos con bordes en estados hover y focus */
input:hover,
textarea:hover,
select:hover,
.input:hover,
.button:hover,
button:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

input:focus,
textarea:focus,
select:focus,
.input:focus {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Elementos específicos que se ven en la imagen */
/* Selector del workspace en el sidebar */
.workspace-item,
.workspace-button,
[data-workspace] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Barra de búsqueda específica */
.search-bar,
.search-container,
[role="search"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Cards de la grid de asistentes */
.assistant-card,
.grid .box,
.grid .card {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Elementos con clases de línea/divisor */
.border-line,
.border-line-dimmed,
[class*="line"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Variante aún más sutil para elementos muy sutiles */
.border-subtle,
[class*="subtle"] {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Variante un poco más visible para elementos importantes */
.border-emphasis,
[class*="emphasis"] {
    border-color: rgba(255, 255, 255, 0.12) !important;
}