:root {
    color-scheme: dark;
    /* Proporción de división de columnas de tablas (Fase 3 y 4) */
    --table-split-left-pct: 32%;

    /* Paleta base refinada y moderna (Dark Theme) */
    --bg-base: #0B0A0F;
    --bg-panel: rgba(22, 22, 30, 0.6);
    --bg-panel-hover: rgba(30, 30, 42, 0.8);

    --accent-primary: #6366F1;
    /* Indigo */
    --accent-primary-hover: #4F46E5;
    --accent-secondary: #06B6D4;
    /* Cyan */
    --accent-success: #10B981;
    /* Emerald */
    --accent-success-hover: #059669;

    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #475569;

    --border-color: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(255, 255, 255, 0.15);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 15px rgba(99, 102, 241, 0.3);

    --font-sans: 'Inter', system-ui, sans-serif;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevenir cursor de texto (caret) y selección no deseada en iconos, logos y controles interactivos */
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.logo-icon,
.logo-icon-container,
.sidebar-header,
.logo-text,
.sidebar-author-text,
.btn,
button,
.tab-btn,
.view-toggle,
.phase-tab,
.phase-tabs,
.history-item,
.sidebar-icon-btn,
.sidebar-collapsed-controls,
.sidebar-toggle-btn,
.theme-toggle-btn,
.nav-item,
.pill,
.badge,
.chemical-btn,
.accordion-header,
.glass-panel-header,
.right-tab-btn {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    caret-color: transparent !important;
    -webkit-user-drag: none;
    outline: none;
}

/* Ocultar barra de desplazamiento globalmente (scroll solo con rueda) */
::-webkit-scrollbar {
    display: none;
}

* {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-sans);
    min-height: 100vh;
    overflow-x: hidden;
    /* Un ligero gradiente de fondo para dar profundidad */
    background-image:
        radial-gradient(circle at 10% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 100%, rgba(6, 182, 212, 0.1) 0%, transparent 40%);
    background-attachment: fixed;
}

/* Typography Utilities */
h1,
h2,
h3,
h4 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Contenedor Principal */
.app-container {
    display: grid;
    grid-template-columns: 280px 1fr 85px;
    grid-template-rows: 100vh;
    height: 100vh;
    overflow: hidden;
    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-container.sidebar-collapsed {
    grid-template-columns: 85px 1fr 85px;
}

.app-container.sidebar-right-expanded {
    grid-template-columns: 85px 1fr var(--right-sidebar-width, 60vw);
}

.app-container.sidebar-collapsed.sidebar-right-expanded {
    grid-template-columns: 85px 1fr var(--right-sidebar-width, 60vw);
}

/* Ocultar etiquetas de texto de las fases cuando la barra derecha está expandida para mostrar únicamente los números (0, 1, 2, ...) */
.phase-tabs .tab-btn .tab-label {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.app-container.sidebar-right-expanded .phase-tabs .tab-btn .tab-label {
    display: none !important;
}

.app-container.sidebar-right-expanded .phase-tabs .tab-btn {
    padding: 0 4px !important;
    gap: 0 !important;
}

.app-container.sidebar-right-expanded .phase-tabs .tab-btn .step-num {
    margin-right: 0 !important;
}

/* Elementos del sidebar expandido con transiciones suaves */
.history-section,
.sidebar-footer,
.sidebar-right-expanded-body {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        visibility 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.12s;
}

.sidebar-collapsed .history-section,
.sidebar-collapsed .sidebar-footer {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-15px);
    pointer-events: none;
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: none;
    border-bottom: none;
    transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.12s cubic-bezier(0.4, 0, 0.2, 1),
        max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado contraído de la barra lateral derecha */
.app-container:not(.sidebar-right-expanded) .sidebar-right-expanded-body {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

.app-container:not(.sidebar-right-expanded) .sidebar-right .sidebar-header {
    padding: 24px 0;
    justify-content: center;
    gap: 0;
}

.app-container:not(.sidebar-right-expanded) .sidebar-right .sidebar-text-container {
    display: none !important;
}

.app-container.sidebar-right-expanded .sidebar-right .sidebar-header,
.app-container.sidebar-right-expanded .sidebar-right .sidebar-collapsed-controls,
.app-container.sidebar-right-expanded .sidebar-right .collapsed-phase-badges,
.app-container.sidebar-right-expanded .sidebar-right .sidebar-collapsed-footer {
    display: none !important;
}

.sidebar-collapsed #toggle-sidebar {
    display: none;
}

/* Controles compactos del sidebar izquierdo: visibles solo cuando está contraído */
.sidebar:not(.sidebar-right) .sidebar-collapsed-controls,
.sidebar:not(.sidebar-right) .sidebar-collapsed-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-top: none;
    border-bottom: none;
    overflow: hidden;
    pointer-events: none;
    gap: 16px;
    transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.12s cubic-bezier(0.4, 0, 0.2, 1),
        max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-collapsed .sidebar:not(.sidebar-right) .sidebar-collapsed-controls {
    opacity: 1;
    visibility: visible;
    max-height: 180px;
    padding-top: 8px;
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    pointer-events: auto;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        visibility 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        padding 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        margin 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s;
}

.sidebar-collapsed .sidebar:not(.sidebar-right) .sidebar-collapsed-footer {
    opacity: 1;
    visibility: visible;
    max-height: 100px;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    pointer-events: auto;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        visibility 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        padding 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        margin 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s;
}

/* Sidebar Derecho: Cuando NO está expandido, sus herramientas SIEMPRE deben ser visibles (incluso con sidebar izquierdo abierto) */
.app-container:not(.sidebar-right-expanded) .sidebar-right .sidebar-collapsed-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 350px !important;
    padding-top: 12px !important;
    padding-bottom: 16px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid var(--border-color) !important;
    overflow: visible !important;
    pointer-events: auto !important;
    gap: 14px !important;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-container.sidebar-right-expanded .sidebar-right .sidebar-collapsed-controls {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    max-height: 0 !important;
    pointer-events: none !important;
}

/* Sidebar Derecho: Footer colapsado abajo de todo */
.app-container:not(.sidebar-right-expanded) .sidebar-right .sidebar-collapsed-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: auto !important;
    padding-bottom: 16px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--border-color) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.app-container.sidebar-right-expanded .sidebar-right .sidebar-collapsed-footer {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.sidebar-icon-btn--logout {
    color: var(--text-muted) !important;
}

.sidebar-icon-btn--logout:hover,
.btn-auth-logout:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.25) !important;
}

.sidebar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0;
}

.sidebar-icon-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: scale(1.08);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.25);
}

.sidebar-icon-btn .material-icons-outlined {
    font-size: 24px;
    color: inherit;
}

/* El botón + tiene acento especial */
#btn-new-search-collapsed:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--accent-success);
    color: var(--accent-success);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

/* Botón Guardar Colapsado en formato Cápsula / Píldora (Estilo Referencia) */
.sidebar-icon-btn--save {
    width: 58px !important;
    height: 32px !important;
    border-radius: 9999px !important;
    border: 1.5px solid #10b981 !important;
    background: rgba(16, 185, 129, 0.08) !important;
    color: #10b981 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.15) !important;
}

.sidebar-icon-btn--save .material-icons-outlined {
    font-size: 19px !important;
    color: #10b981 !important;
}

.sidebar-icon-btn--save:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #34d399 !important;
    color: #34d399 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important;
    transform: scale(1.05) !important;
}

.sidebar-icon-btn--save:hover .material-icons-outlined {
    color: #34d399 !important;
}

[data-theme="light"] .sidebar-icon-btn--save {
    border-color: #059669 !important;
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
}

[data-theme="light"] .sidebar-icon-btn--save .material-icons-outlined {
    color: #059669 !important;
}

[data-theme="light"] .sidebar-icon-btn--save:hover {
    background: rgba(16, 185, 129, 0.22) !important;
    border-color: #047857 !important;
    color: #047857 !important;
}

/* ─── Botones Prominentes de Herramientas en el Sidebar Derecho ─── */
.sidebar-icon-btn--pdf-prominent {
    border-color: rgba(16, 185, 129, 0.3) !important;
    background: rgba(16, 185, 129, 0.08) !important;
    color: #10b981 !important;
}

.sidebar-icon-btn--pdf-prominent:hover {
    background: rgba(16, 185, 129, 0.22) !important;
    border-color: #34d399 !important;
    color: #34d399 !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.35) !important;
    transform: scale(1.08) !important;
}

.sidebar-icon-btn--pdf-prominent .material-icons-outlined {
    color: #10b981 !important;
    font-size: 22px !important;
}

.sidebar-icon-btn--pdf-prominent:hover .material-icons-outlined {
    color: #34d399 !important;
}

.sidebar-icon-btn--connections-prominent {
    border-color: rgba(236, 72, 153, 0.3) !important;
    background: rgba(236, 72, 153, 0.08) !important;
    color: #ec4899 !important;
}

.sidebar-icon-btn--connections-prominent:hover {
    background: rgba(236, 72, 153, 0.22) !important;
    border-color: #f472b6 !important;
    color: #f472b6 !important;
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.35) !important;
    transform: scale(1.08) !important;
}

.sidebar-icon-btn--connections-prominent .material-icons-outlined {
    color: #ec4899 !important;
    font-size: 22px !important;
}

.sidebar-icon-btn--connections-prominent:hover .material-icons-outlined {
    color: #f472b6 !important;
}

.sidebar-icon-btn--split-prominent {
    border-color: rgba(6, 182, 212, 0.3) !important;
    background: rgba(6, 182, 212, 0.08) !important;
    color: #06b6d4 !important;
}

.sidebar-icon-btn--split-prominent:hover {
    background: rgba(6, 182, 212, 0.22) !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.35) !important;
    transform: scale(1.08) !important;
}

.sidebar-icon-btn--split-prominent .material-icons-outlined {
    color: #06b6d4 !important;
    font-size: 22px !important;
}

.sidebar-icon-btn--split-prominent:hover .material-icons-outlined {
    color: #38bdf8 !important;
}

/* Adaptación para Tema Claro */
[data-theme="light"] .sidebar-icon-btn--pdf-prominent {
    border-color: rgba(5, 150, 105, 0.35) !important;
    background: rgba(5, 150, 105, 0.08) !important;
    color: #059669 !important;
}

[data-theme="light"] .sidebar-icon-btn--pdf-prominent .material-icons-outlined {
    color: #059669 !important;
}

[data-theme="light"] .sidebar-icon-btn--connections-prominent {
    border-color: rgba(219, 39, 119, 0.35) !important;
    background: rgba(219, 39, 119, 0.08) !important;
    color: #db2777 !important;
}

[data-theme="light"] .sidebar-icon-btn--connections-prominent .material-icons-outlined {
    color: #db2777 !important;
}

[data-theme="light"] .sidebar-icon-btn--split-prominent {
    border-color: rgba(3, 105, 161, 0.35) !important;
    background: rgba(3, 105, 161, 0.08) !important;
    color: #0369a1 !important;
}

[data-theme="light"] .sidebar-icon-btn--split-prominent .material-icons-outlined {
    color: #0369a1 !important;
}

[data-theme="light"] .sidebar-icon-btn--stats-prominent {
    border-color: rgba(124, 58, 237, 0.35) !important;
    background: rgba(124, 58, 237, 0.08) !important;
    color: #7c3aed !important;
}

[data-theme="light"] .sidebar-icon-btn--stats-prominent .material-icons-outlined {
    color: #7c3aed !important;
}

[data-theme="light"] .sidebar-icon-btn--tutorial-prominent {
    border-color: rgba(8, 145, 178, 0.35) !important;
    background: rgba(8, 145, 178, 0.08) !important;
    color: #0891b2 !important;
}

[data-theme="light"] .sidebar-icon-btn--tutorial-prominent .material-icons-outlined {
    color: #0891b2 !important;
}

[data-theme="light"] .sidebar-icon-btn--sync {
    border-color: rgba(5, 150, 105, 0.35) !important;
    background: rgba(5, 150, 105, 0.08) !important;
    color: #059669 !important;
}

/* Glassmorphism Panels */
.glass-panel {
    background: var(--bg-panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

/* =========================================
   Sidebar
========================================= */
.sidebar,
.sidebar-right {
    display: flex;
    flex-direction: column;
    margin: 16px 0 16px 16px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    background: var(--bg-panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    min-width: 0;
}

.sidebar {
    overflow: hidden;
}

.sidebar-right {
    margin: 16px 16px 16px 0;
    overflow: visible !important;
}

.sidebar-right .sidebar-right-expanded-body {
    overflow: hidden;
    border-radius: var(--radius-xl);
}

/* Tabs de herramientas del sidebar derecho expandido */
.right-panel-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.15);
    padding: 0 12px;
    height: 48px;
    gap: 8px;
    flex-shrink: 0;
}

.right-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
}

.right-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.right-tab-btn.active-pdf {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.right-tab-btn.active-blender {
    color: #ec4899;
    background: rgba(236, 72, 153, 0.1);
    border-color: rgba(236, 72, 153, 0.3);
}

.right-tab-btn.active-split {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.35);
}

.right-tab-btn.active-stats {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.35);
}

/* Botones Prominentes y Llamativos de la Barra Derecha */
.sidebar-icon-btn--pdf-prominent {
    width: 56px !important;
    height: 38px !important;
    border-radius: 9999px !important;
    border: 1.5px solid #10b981 !important;
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

.sidebar-icon-btn--pdf-prominent .material-icons-outlined {
    font-size: 20px !important;
    color: #10b981 !important;
}

.sidebar-icon-btn--pdf-prominent:hover {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: #34d399 !important;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.55) !important;
    transform: scale(1.08) !important;
}

.sidebar-icon-btn--connections-prominent {
    width: 56px !important;
    height: 38px !important;
    border-radius: 9999px !important;
    border: 1.5px solid #ec4899 !important;
    background: rgba(236, 72, 153, 0.12) !important;
    color: #ec4899 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.3) !important;
}

.sidebar-icon-btn--connections-prominent .material-icons-outlined {
    font-size: 20px !important;
    color: #ec4899 !important;
}

.sidebar-icon-btn--connections-prominent:hover {
    background: rgba(236, 72, 153, 0.25) !important;
    border-color: #f472b6 !important;
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.55) !important;
    transform: scale(1.08) !important;
}

.sidebar-icon-btn--split-prominent {
    width: 56px !important;
    height: 38px !important;
    border-radius: 9999px !important;
    border: 1.5px solid #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38bdf8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3) !important;
}

.sidebar-icon-btn--split-prominent .material-icons-outlined {
    font-size: 20px !important;
    color: #38bdf8 !important;
}

.sidebar-icon-btn--split-prominent:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #7dd3fc !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.55) !important;
    transform: scale(1.08) !important;
}

/* Botón Estadística (En construcción - Barra de Herramientas) */
.sidebar-icon-btn--stats-prominent {
    width: 56px !important;
    height: 38px !important;
    border-radius: 9999px !important;
    border: 1.5px solid #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.12) !important;
    color: #8b5cf6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3) !important;
    position: relative;
}

.sidebar-icon-btn--stats-prominent .material-icons-outlined {
    font-size: 20px !important;
    color: #8b5cf6 !important;
}

.sidebar-icon-btn--stats-prominent:hover {
    background: rgba(139, 92, 246, 0.25) !important;
    border-color: #a78bfa !important;
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.55) !important;
    transform: scale(1.08) !important;
}

.sidebar-icon-btn--stats-prominent::after {
    content: "WIP";
    position: absolute;
    bottom: -3px;
    right: -2px;
    font-size: 7.5px;
    font-weight: 800;
    line-height: 1;
    background: #7c3aed;
    color: #ffffff;
    padding: 1.5px 3.5px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Botón Tutorial & Guía (Slides de Onboarding) */
.sidebar-icon-btn--tutorial-prominent {
    width: 56px !important;
    height: 38px !important;
    border-radius: 9999px !important;
    border: 1.5px solid #06b6d4 !important;
    background: rgba(6, 182, 212, 0.12) !important;
    color: #06b6d4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.3) !important;
}

.sidebar-icon-btn--tutorial-prominent .material-icons-outlined {
    font-size: 20px !important;
    color: #06b6d4 !important;
}

.sidebar-icon-btn--tutorial-prominent:hover {
    background: rgba(6, 182, 212, 0.25) !important;
    border-color: #22d3ee !important;
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.55) !important;
    transform: scale(1.08) !important;
}

/* Botón Sincronización Compacto (Solo Ícono con Dot) en Barra Derecha */
.sidebar-icon-btn--sync {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    background: rgba(16, 185, 129, 0.08) !important;
    color: #34d399 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.15) !important;
}

.sidebar-icon-btn--sync:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #34d399 !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.45) !important;
    transform: scale(1.06) !important;
}

.sidebar-icon-btn--sync .material-icons-outlined {
    font-size: 22px !important;
}

.sidebar-icon-btn--sync.sync-syncing {
    background: rgba(6, 182, 212, 0.12) !important;
    border-color: rgba(6, 182, 212, 0.45) !important;
    color: #22d3ee !important;
}

.sidebar-icon-btn--sync.sync-offline {
    background: rgba(100, 116, 139, 0.08) !important;
    border-color: rgba(100, 116, 139, 0.25) !important;
    color: var(--text-muted) !important;
}

.sync-status-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    pointer-events: none;
    transition: all 0.3s ease;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite !important;
}

/* Modal / Overlay Pantalla Dividida Full Screen (100vw x 100vh) */
.split-fullscreen-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 999999 !important;
    background: #0b0f19 !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    display: none;
    flex-direction: column;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
}

.split-fullscreen-overlay.active {
    display: flex !important;
}

.btn-split-fs-close:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.02);
}

/* Divisor interactivo para modo Pantalla Dividida (entre Pizarra y PDF) */
.split-divider-resizer {
    width: 8px;
    margin: 0;
    cursor: col-resize;
    z-index: 30;
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.split-divider-resizer:hover,
.split-divider-resizer.is-resizing {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: rgba(56, 189, 248, 0.6) !important;
}

.split-divider-handle {
    width: 2px;
    height: 32px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.2s ease;
}

.split-divider-resizer:hover .split-divider-handle,
.split-divider-resizer.is-resizing .split-divider-handle {
    background: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
}

/* Divisor desplazable ubicado en el espacio en blanco (gutter) entre los paneles */
.right-sidebar-resizer {
    position: absolute;
    left: -16px;
    /* Abarca exactamente el gutter de 16px */
    top: 0;
    bottom: 0;
    width: 16px;
    cursor: col-resize;
    background: transparent;
    z-index: 99999;
    display: none;
    pointer-events: auto !important;
}

.app-container.sidebar-right-expanded .right-sidebar-resizer {
    display: block;
}

.right-sidebar-resizer::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 20px;
    bottom: 20px;
    width: 3px;
    border-radius: 9999px;
    background: transparent;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    pointer-events: none;
}

.right-sidebar-resizer:hover::after,
.right-sidebar-resizer.is-resizing::after,
.app-container.is-resizing .right-sidebar-resizer::after {
    background: #06b6d4 !important;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.95) !important;
}

.app-container.is-resizing {
    transition: none !important;
    user-select: none !important;
    cursor: col-resize !important;
}

.app-container.is-resizing iframe,
.app-container.is-resizing embed,
.app-container.is-resizing object {
    pointer-events: none !important;
}

.sidebar-header {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.sidebar-collapsed .sidebar-header {
    padding: 24px 0;
    justify-content: center;
    gap: 0;
}

.logo-icon-container {
    margin-right: 8px;
}

.sidebar-collapsed .logo-icon-container {
    margin-right: 0 !important;
}


.logo-icon {
    font-size: 33px;
    color: var(--accent-secondary);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}

.logo-icon:hover {
    color: var(--accent-primary);
    transform: rotate(15deg) scale(1.05);
}

.sidebar-text-container {
    margin-left: 12px;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s;
}

.sidebar-collapsed .sidebar-text-container {
    margin-left: 0;
    transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-text {
    font-size: 27px;
    font-weight: 700;
    background: linear-gradient(90deg, var(--text-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        visibility 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        background 0.4s ease;
}

.logo-text.logo-x2 {
    background: linear-gradient(90deg, var(--text-primary), #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-text.logo-x3 {
    background: linear-gradient(90deg, var(--text-primary), #10B981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar-author-text {
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        visibility 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s;
}

.sidebar-collapsed .logo-text,
.sidebar-collapsed .sidebar-author-text {
    opacity: 0 !important;
    visibility: hidden;
    transform: translateX(-15px);
    pointer-events: none;
    max-width: 0;
    /* Al colapsar, se oculta y encoge horizontalmente de inmediato */
    transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.12s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.history-section {
    flex: 1;
    padding: 24px 16px;
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.history-section::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.history-title {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    padding-left: 8px;
    margin-bottom: 0;
}

/* Cabecera del historial: título + botón Nueva en la misma fila */
.history-section-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 16px;
    padding-right: 4px;
}

/* Botón compacto "+" Nueva Búsqueda (sidebar expandido) */
.btn-new-search {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 6px;
    border-radius: 20px;
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.08);
    color: var(--accent-success);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-new-search:hover {
    background: rgba(16, 185, 129, 0.18);
    border-color: var(--accent-success);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
    transform: scale(1.04);
}

.btn-new-search .material-icons-outlined {
    font-size: 15px;
}

.btn-new-search-label {
    line-height: 1;
}

/* Ícono historial en sidebar contraído */
.sidebar-icon-btn--history:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
}

.history-list {
    list-style: none;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    border: 1px solid transparent;
    border-left: 3px solid transparent;
}

.history-item:hover {
    background: var(--border-highlight);
}

/* Elemento del historial activo (navegando entre fases) */
.history-item.active {
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.14) 0%, rgba(6, 182, 212, 0.03) 100%);
    border-color: rgba(6, 182, 212, 0.35);
    border-left: 3px solid var(--accent-primary, #06b6d4);
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.12), inset 0 0 12px rgba(6, 182, 212, 0.03);
}

.history-item.active:hover {
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.06) 100%);
}

.history-item.active .material-icons-outlined {
    color: var(--accent-primary, #06b6d4);
}

.history-item.active .history-drug {
    color: #ffffff;
    font-weight: 600;
}

.history-item.active .history-area {
    color: #94a3b8;
}

/* Animación / Resaltado sutil y notorio para elementos recién creados/agregados */
.history-item.new-item-highlight {
    animation: historyItemNewPulse 3.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes historyItemNewPulse {
    0% {
        background: linear-gradient(90deg, rgba(16, 185, 129, 0.38) 0%, rgba(6, 182, 212, 0.28) 100%);
        border-color: rgba(16, 185, 129, 0.7);
        border-left: 3px solid #10b981;
        box-shadow: 0 0 16px rgba(16, 185, 129, 0.45), inset 0 0 12px rgba(16, 185, 129, 0.25);
        transform: translateY(-2px) scale(1.015);
    }

    25% {
        background: linear-gradient(90deg, rgba(6, 182, 212, 0.28) 0%, rgba(6, 182, 212, 0.14) 100%);
        border-color: rgba(6, 182, 212, 0.6);
        border-left: 3px solid var(--accent-primary, #06b6d4);
        box-shadow: 0 0 14px rgba(6, 182, 212, 0.35), inset 0 0 10px rgba(6, 182, 212, 0.15);
        transform: translateY(0) scale(1);
    }

    65% {
        background: linear-gradient(90deg, rgba(6, 182, 212, 0.18) 0%, rgba(6, 182, 212, 0.06) 100%);
        border-color: rgba(6, 182, 212, 0.45);
        border-left: 3px solid var(--accent-primary, #06b6d4);
        box-shadow: 0 2px 10px rgba(6, 182, 212, 0.2);
    }

    100% {
        background: linear-gradient(90deg, rgba(6, 182, 212, 0.14) 0%, rgba(6, 182, 212, 0.03) 100%);
        border-color: rgba(6, 182, 212, 0.35);
        border-left: 3px solid var(--accent-primary, #06b6d4);
        box-shadow: 0 2px 10px rgba(6, 182, 212, 0.12), inset 0 0 12px rgba(6, 182, 212, 0.03);
    }
}

.history-item .material-icons-outlined {
    font-size: 20px;
    color: var(--text-muted);
}

.history-data {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.history-drug {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-area {
    font-size: 12px;
    color: var(--text-secondary);
}

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
}

/* =========================================
   Main Area
========================================= */
.main-content {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100vh;
    overflow: hidden;
}

/* Controles de Búsqueda */
.search-controls {
    padding: 24px;
}

.search-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
    /* Ajustando la animacion de Slide */
    max-height: 200px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
}

#search-content.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: -10px;
    pointer-events: none;
}

#toggle-search span {
    transition: transform 0.3s ease;
}

#toggle-search:not(.collapsed) span {
    /* Estado expandido normal */
}

#toggle-search.collapsed span {
    transform: rotate(180deg);
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 140px;
}

.input-group.action-group {
    flex: 0 0 auto;
    min-width: auto;
}

.input-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

input[type="text"],
input[type="email"],
select.glass-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
select.glass-input:focus {
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 1px var(--accent-primary);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea.glass-input::placeholder {
    color: var(--text-muted);
}

textarea.glass-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

textarea.glass-input:focus {
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 1px var(--accent-primary);
}

/* === Accordion / Subtablas === */
#results-accordion {
    padding: 0 16px 16px 16px !important;
}

.app-container.sidebar-right-expanded #results-accordion {
    padding: 0 8px 8px 8px !important;
}

#results-accordion > .accordion-source:first-child {
    margin-top: 0 !important;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-source {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.accordion-source.open {
    overflow: visible;
    width: 100%;
}

.accordion-source:hover {
    border-color: var(--border-highlight);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 46px;
    height: 46px;
    padding: 0 16px;
    background: #0f172a;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
    position: sticky;
    top: 0;
    z-index: 30;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.accordion-header:hover {
    background: rgba(0, 0, 0, 0.35);
}

.accordion-header .source-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.accordion-header .result-count {
    background: var(--accent-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.accordion-header .pubmed-query-badge {
    font-size: 11px;
    font-weight: 500;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 3px 8px;
    max-width: clamp(160px, 32vw, 450px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 1;
    transition: all 0.2s ease;
}

.accordion-header .pubmed-query-badge:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #f8fafc;
}

.accordion-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
}

.btn-fetch-all-pdfs-p4 {
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.4);
    color: #38bdf8;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-weight: 600;
}

.btn-fetch-all-pdfs-p4:hover {
    background: rgba(14, 165, 233, 0.22);
    border-color: rgba(14, 165, 233, 0.7);
}

.btn-export-search-p4 {
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s;
    font-weight: 600;
}

.btn-export-search-p4:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.5);
}

.btn-delete-search-p4,
.btn-delete-search-table {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    border-radius: 6px;
    padding: 0;
    width: 28px;
    height: 28px;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s;
    font-weight: 600;
}

.btn-delete-search-p4:hover,
.btn-delete-search-table:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.6);
    color: #ef4444;
}

.accordion-header .chevron-icon {
    transition: transform 0.3s ease;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.accordion-header.open .chevron-icon {
    transform: rotate(180deg);
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.accordion-body.open {
    max-height: 30000px;
    /* Aumentado de 2000px a 30000px para evitar el corte en listas largas (FDA) */
    overflow: visible;
    transition: max-height 0.8s cubic-bezier(0.15, 0.85, 0.3, 1);
}

.accordion-body .subtable-controls {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
}

.accordion-body .subtable-controls input {
    padding: 6px 10px;
    font-size: 12px;
    flex: 1;
    max-width: 250px;
}

.accordion-body .subtable-controls .sort-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-fast);
}

.accordion-body .subtable-controls .sort-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.accordion-body table.subtable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.accordion-body table.subtable>thead>tr>th {
    background: #0f172a;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 46px;
    z-index: 25;
    border-bottom: 2px solid rgba(99, 102, 241, 0.45);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
}

.accordion-body table.subtable>tbody>tr>td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    /* Línea divisoria de artículos más visible */
    color: var(--text-primary);
}

.accordion-body table.subtable>tbody>tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

.accordion-body table.subtable>tbody>tr:hover {
    background: rgba(6, 182, 212, 0.04);
}

.accordion-body table.subtable>tbody>tr td.col-nombre_guia,
.accordion-body table.subtable>tbody>tr td.col-brand_name,
.accordion-body table.subtable>tbody>tr td.col-generic_name,
.accordion-body table.subtable>tbody>tr td.col-fda_card,
.accordion-body table.subtable>tbody>tr .pubmed-article-title {
    cursor: pointer;
    transition: color 0.15s ease;
}

.accordion-body table.subtable>tbody>tr td.col-nombre_guia:hover,
.accordion-body table.subtable>tbody>tr .pubmed-article-title:hover {
    color: var(--accent-primary, #06b6d4) !important;
}

.accordion-body table.subtable>tbody>tr td.col-brand_name:hover {
    color: #38bdf8 !important;
}

.drawer-row-item {
    cursor: pointer;
    transition: background 0.15s ease;
}

.drawer-row-item:hover {
    background: rgba(6, 182, 212, 0.06) !important;
}

select.glass-input option {
    background-color: var(--bg-base);
    color: var(--text-primary);
}

/* Tabs */
.phase-tabs {
    display: flex;
    gap: 8px;
    padding: 0;
    align-self: flex-start;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 8px 6px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-sizing: border-box;
    min-width: 0;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.tab-btn.active {
    background: var(--bg-panel-hover);
    color: var(--text-primary);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-highlight);
}

.tab-label {
    white-space: nowrap;
    letter-spacing: -0.015em;
}

.step-num {
    background: rgba(255, 255, 255, 0.1);
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.tab-btn.active .step-num {
    background: var(--accent-secondary);
    color: white;
}

/* Panel de Resultados */
.results-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #25252b;
}

.panel-header h2 {
    font-size: 18px;
    color: var(--accent-secondary);
}

/* Nombre del fármaco activo a la derecha del título de la Fase (sin contorno, sin emoji, en gris claro) */
.active-drug-header-display {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-secondary, #94a3b8);
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 0 2px !important;
    user-select: text;
    transition: color 0.2s ease;
    animation: fadeInDrugName 0.2s ease-in-out;
}

.active-drug-header-display .active-drug-separator {
    color: var(--text-muted, #64748b);
    opacity: 0.6;
    font-weight: 300;
    user-select: none;
}

.active-drug-header-display .active-drug-name-text {
    color: var(--text-secondary, #94a3b8);
    font-weight: 400;
    letter-spacing: -0.2px;
}

@keyframes fadeInDrugName {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.panel-actions {
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.view-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 1px;
    /* Para evitar colapso de márgenes */
}

.view-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.view-sources-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    width: 100%;
}

/* Adaptación de Cabecera y Controles de Fuentes cuando Blender está Abierto (Panel 45% / Media Pantalla) */
.view-sources-header.compact-header,
.results-panel.blender-active .view-sources-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.view-sources-header.compact-header>div,
.results-panel.blender-active .view-sources-header>div {
    width: 100% !important;
    max-width: 100% !important;
}

.view-sources-header.compact-header #manual-source-controls,
.results-panel.blender-active #manual-source-controls {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    background: rgba(0, 0, 0, 0.25);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    margin-top: 4px;
}

.view-sources-header.compact-header #manual-source-controls input,
.results-panel.blender-active #manual-source-controls input {
    flex: 1 1 80px !important;
    min-width: 70px !important;
    max-width: none !important;
}

.view-sources-header.compact-header #manual-design-controls,
.results-panel.blender-active #manual-design-controls {
    display: flex !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.25);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    margin-top: 4px;
}

/* Tabla Moderna */
.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.modern-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.modern-table th,
.modern-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    word-break: normal;
    overflow-wrap: break-word;
}

.source-primary-row td {
    padding: 6px 12px !important;
    word-break: normal;
    overflow-wrap: break-word;
    max-width: 100%;
}

.modern-table th {
    font-size: 11.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    font-weight: 600;
    position: sticky;
    top: 0;
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.modern-table tbody tr {
    transition: background var(--transition-fast);
}

.modern-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Acordeón de agrupamiento (Fase 1 por Especialidad, Fase 5 por Indicación) */
.accordion-group-header:hover {
    filter: brightness(1.15);
}

.accordion-group-header td {
    border-bottom: none !important;
}

.row-drag-hover {
    background: rgba(6, 182, 212, 0.15) !important;
    outline: 2px dashed rgba(6, 182, 212, 0.5);
}

/* Vista JSON */
#view-json {
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
}

.json-content {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    color: #A6ACCD;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Panel Footer */
.panel-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

/* =========================================
   Componentes Botones y Varios
========================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--transition-fast);
}

.btn-primary {
    background: var(--accent-secondary);
    color: white;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
}

.btn-primary:hover {
    background: #0891b2;
    /* cyan un poco más oscuro para el hover */
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--border-highlight);
    width: 100%;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-success {
    background: var(--accent-success);
    color: white;
}

.btn-success:hover {
    background: var(--accent-success-hover);
}

.btn-icon {
    padding: 6px;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    border: none;
    outline: none;
    cursor: pointer;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.btn-icon.active {
    background: var(--border-highlight);
    color: var(--accent-secondary);
}

.btn-link {
    color: var(--accent-secondary);
    text-decoration: none;
    font-weight: 500;
}

.btn-link:hover {
    text-decoration: underline;
}

.flag {
    font-size: 16px;
    margin-right: 8px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* --- Animación de Reacción Química --- */
@keyframes chemical-reaction {
    0% {
        color: #a855f7;
        transform: translateY(0px) scale(1);
        filter: drop-shadow(0 0 5px #a855f7);
    }

    33% {
        color: #3b82f6;
        transform: translateY(-2px) scale(1.15);
        filter: drop-shadow(0 0 10px #3b82f6);
    }

    66% {
        color: #10b981;
        transform: translateY(1px) scale(1.05);
        filter: drop-shadow(0 0 12px #10b981);
    }

    100% {
        color: #a855f7;
        transform: translateY(0px) scale(1);
        filter: drop-shadow(0 0 5px #a855f7);
    }
}

.chemical-btn-loading {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #2a1b4d, #14324f, #0d3623, #2a1b4d);
    background-size: 300% 300%;
    animation: beaker-fluid 3s ease infinite;
    color: white !important;
    border-color: #a855f7 !important;
    box-shadow: inset 0 0 15px rgba(168, 85, 247, 0.4) !important;
}

@keyframes beaker-fluid {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes chemical-reaction {
    0% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(-15deg) scale(1.1);
    }

    50% {
        transform: rotate(15deg) scale(0.95);
    }

    75% {
        transform: rotate(-10deg) scale(1.05);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Animación pulse para el icono de parámetros */
@keyframes pulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(6, 182, 212, 0));
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.5));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(6, 182, 212, 0));
    }
}

/* Estilo de fila al arrastrar un archivo PDF por encima */
tr.row-drag-hover {
    background: rgba(6, 182, 212, 0.15) !important;
    border: 2px dashed var(--accent-secondary) !important;
    transition: background 0.15s ease, border 0.15s ease;
}

/* Resaltado dinámico al hacer clic en un elemento de la Pizarra Blender */
.table-row-focus-highlight,
.item-highlight-pulse {
    outline: 2.5px solid var(--accent-primary, #06b6d4) !important;
    background: rgba(6, 182, 212, 0.28) !important;
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.75), inset 0 0 16px rgba(6, 182, 212, 0.35) !important;
    animation: itemHighlightPulse 1.8s ease-in-out infinite !important;
    border-radius: 6px;
    position: relative;
    z-index: 30;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes itemHighlightPulse {
    0% {
        outline-color: rgba(6, 182, 212, 0.95);
        box-shadow: 0 0 25px rgba(6, 182, 212, 0.75), inset 0 0 12px rgba(6, 182, 212, 0.35);
        background: rgba(6, 182, 212, 0.32);
    }

    50% {
        outline-color: rgba(168, 85, 247, 0.95);
        box-shadow: 0 0 40px rgba(168, 85, 247, 0.85), inset 0 0 20px rgba(168, 85, 247, 0.45);
        background: rgba(168, 85, 247, 0.32);
    }

    100% {
        outline-color: rgba(6, 182, 212, 0.95);
        box-shadow: 0 0 25px rgba(6, 182, 212, 0.75), inset 0 0 12px rgba(6, 182, 212, 0.35);
        background: rgba(6, 182, 212, 0.32);
    }
}

/* Premium dynamic highlights inside Abstract cells */
.highlighted-text {
    background-color: rgba(6, 182, 212, 0.22);
    border-bottom: 2.5px solid var(--accent-secondary);
    color: var(--text-primary);
    border-radius: 2px;
    padding: 0 1px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.highlighted-text:hover {
    background-color: rgba(6, 182, 212, 0.35);
}

/* =========================================
   Módulo Blender (Fase 5)
   ========================================= */
.blender-col-list {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.blender-col-list::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.blender-col.is-empty-hidden {
    display: none !important;
}

.blender-resizer.is-hidden {
    display: none !important;
}

.blender-global-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 32px 20px;
    text-align: center;
    color: var(--text-muted);
    gap: 12px;
    z-index: 30;
}

.blender-node-card {
    background: rgba(30, 41, 59, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--accent-primary) !important;
    border-radius: 6px;
    padding: 7px 9px !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
    min-height: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.blender-node-card[data-phase="phase-1"] {
    border-left-color: #38bdf8 !important;
}

.blender-node-card[data-phase="phase-2"] {
    border-left-color: #06b6d4 !important;
}

.blender-node-card[data-phase="phase-3"] {
    border-left-color: #10b981 !important;
}

.blender-node-card[data-phase="phase-4"] {
    border-left-color: #8b5cf6 !important;
}

.blender-node-card[data-phase="phase-5"] {
    border-left-color: #f59e0b !important;
}

.blender-node-card:hover {
    background: rgba(51, 65, 85, 0.65);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1.5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 10px rgba(56, 189, 248, 0.15);
}

.blender-node-card.highlighted {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--accent-primary);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.35);
}

.blender-node-card.faded {
    opacity: 0.25;
    transform: scale(0.97);
}

.blender-node-title {
    font-size: 11.5px !important;
    font-weight: 600;
    color: #f8fafc;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 18px;
    /* Espacio para el botón de ocultar */
    word-break: break-word;
}

.blender-node-meta {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 5px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px !important;
    align-items: center;
}

.blender-node-tag {
    padding: 1px 5px !important;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-size: 9px !important;
    font-weight: 500;
    line-height: 1.2 !important;
    transition: all 0.2s ease;
    user-select: none;
}

.blender-node-tag:hover {
    transform: translateY(-1px);
    filter: brightness(1.15);
}

/* Efectos de foco e iluminación en hover */
.blender-dashboard-container.has-hover-focus .blender-node-card:not(.is-hover-connected):not(.is-hover-target) {
    opacity: 0.25 !important;
    filter: grayscale(0.5);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.blender-dashboard-container.has-hover-focus .blender-node-card.is-hover-target,
.blender-dashboard-container.has-hover-focus .blender-node-card.is-hover-connected {
    opacity: 1 !important;
    transform: scale(1.02);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
    z-index: 15;
}

.blender-dashboard-container.has-hover-focus .blender-svg-line:not(.is-hover-line) {
    opacity: 0.1 !important;
    transition: opacity 0.15s ease;
}

.blender-svg-line.is-hover-line {
    stroke-width: 4px !important;
    opacity: 1 !important;
}

/* ==========================================================================
   VISIBILIDAD CONDICIONAL DE COLUMNAS EN PIZARRA BLENDER
   Fase 1 (Guías) y Fase 5 (Diseños) SOLO aparecen en Full Screen o Pantalla Dividida
   ========================================================================== */
#x1-blender-panel:not(.fullscreen-mode) .blender-columns-wrapper>.blender-col[data-phase="phase-1"],
#x1-blender-panel:not(.fullscreen-mode) .blender-columns-wrapper>.blender-col[data-phase="phase-5"],
#x1-blender-panel:not(.fullscreen-mode) .blender-columns-wrapper>.blender-resizer:first-of-type,
#x1-blender-panel:not(.fullscreen-mode) .blender-columns-wrapper>.blender-resizer:last-of-type {
    display: none !important;
}

#x1-blender-panel.fullscreen-mode .blender-columns-wrapper>.blender-col[data-phase="phase-1"]:not(.is-empty-hidden),
#x1-blender-panel.fullscreen-mode .blender-columns-wrapper>.blender-col[data-phase="phase-5"]:not(.is-empty-hidden),
#split-fullscreen-overlay #x1-blender-panel .blender-columns-wrapper>.blender-col[data-phase="phase-1"]:not(.is-empty-hidden),
#split-fullscreen-overlay #x1-blender-panel .blender-columns-wrapper>.blender-col[data-phase="phase-5"]:not(.is-empty-hidden) {
    display: flex !important;
}

.blender-code-nct {
    font-family: 'SF Pro Display', -apple-system, monospace;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.blender-code-doi {
    font-family: 'SF Pro Display', -apple-system, monospace;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.blender-svg-line {
    fill: none;
    stroke-linecap: round;
    stroke-width: 2.8px;
    transition: stroke-width 0.15s ease, opacity 0.15s ease;
    opacity: 0.85;
}

.blender-svg-line.highlighted {
    stroke-width: 4.8px;
    opacity: 1;
}

.blender-node-card.linked-node {
    background: rgba(99, 102, 241, 0.04);
    border-color: rgba(99, 102, 241, 0.15);
}

.blender-resizer {
    width: 8px;
    margin: 0 -4px;
    cursor: col-resize;
    z-index: 25;
    position: relative;
    background: transparent;
    transition: background 0.2s ease;
    flex-shrink: 0;
    align-self: stretch;
}

.blender-resizer:hover,
.blender-resizer.dragging {
    background: rgba(99, 102, 241, 0.25) !important;
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.4);
}

/* Pantalla completa para el panel de Blender (CSS y Nativo) */
.results-panel:fullscreen,
.results-panel.fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background: #0d0e12 !important;
    /* Fondo oscuro sólido para evitar transparencias del sistema */
    backdrop-filter: blur(20px) !important;
    margin: 0 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Tarjetas dinámicas secundarias en Blender */
.blender-node-card.dynamic-pubmed-linked {
    background: rgba(139, 92, 246, 0.04);
    border-color: rgba(139, 92, 246, 0.25);
    border-left: 3px solid rgba(139, 92, 246, 0.7);
    box-shadow: -2px 0 8px rgba(139, 92, 246, 0.12);
}

.blender-node-card.dynamic-pubmed-linked.linked-node {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.4);
    border-left: 3px solid rgba(139, 92, 246, 0.9);
}

.blender-node-card.dynamic-ct-linked {
    background: rgba(245, 158, 11, 0.04);
    border-color: rgba(245, 158, 11, 0.25);
    border-left: 3px solid rgba(245, 158, 11, 0.7);
    box-shadow: -2px 0 8px rgba(245, 158, 11, 0.12);
}

.blender-node-card.dynamic-ct-linked.linked-node {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.4);
    border-left: 3px solid rgba(245, 158, 11, 0.9);
}

/* Filas dinámicas en subtabla */
.subtable tbody tr.dynamic-linked-row:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Círculos de fase colapsados en el sidebar */
/* Círculos y rectángulos de fase colapsados en el sidebar */
.collapsed-phase-badges {
    display: none;
}

.sidebar-collapsed .collapsed-phase-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 14px 0;
    width: 100%;
}

.collapsed-phase-badge {
    width: 48px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 1px dashed var(--border-color, rgba(148, 163, 184, 0.3));
    color: var(--text-muted);
    background: transparent !important;
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

.collapsed-phase-badge:hover {
    transform: scale(1.06);
    background: rgba(255, 255, 255, 0.03) !important;
    border-style: solid;
}

.collapsed-phase-badge.active-f1 {
    border: 1px solid #6366F1 !important;
    color: #6366F1 !important;
    background: transparent !important;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.35);
}

.collapsed-phase-badge.active-f2 {
    border: 1px solid #06B6D4 !important;
    color: #06B6D4 !important;
    background: transparent !important;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.35);
}

.collapsed-phase-badge.active-f3 {
    border: 1px solid #10B981 !important;
    color: #10B981 !important;
    background: transparent !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
}

.collapsed-phase-badge.active-f4 {
    border: 1px solid #8B5CF6 !important;
    color: #8B5CF6 !important;
    background: transparent !important;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.35);
}

.collapsed-phase-badge.active-f5 {
    border: 1px solid #F59E0B !important;
    color: #F59E0B !important;
    background: transparent !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}

.collapsed-phase-badge.active-f6 {
    border: 1px solid #EC4899 !important;
    color: #EC4899 !important;
    background: transparent !important;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.35);
}

/* Botón de Ocultar Tarjetas en Blender */
.blender-node-card .btn-hide-card {
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.blender-node-card:hover .btn-hide-card {
    opacity: 0.6;
}

.blender-node-card:hover .btn-hide-card:hover {
    opacity: 1;
    color: #EF4444 !important;
    transform: scale(1.15);
}

/* Layout flexible de X1 con Panel Derecho Regulable de Pizarra Blender */
.x1-body-container {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    gap: 0;
}

.x1-right-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--bg-panel, rgba(15, 23, 42, 0.85));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 10;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), flex 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.x1-right-panel.collapsed {
    display: none !important;
}

#x1-blender-panel .blender-columns-wrapper {
    overflow-x: auto;
    scroll-behavior: smooth;
}

#x1-blender-panel .blender-col {
    min-width: 220px;
}

/* Habilitar ocultamiento responsive de texto en botones de Blender cuando el panel es estrecho */
#x1-blender-panel.narrow-header .blender-btn-label {
    display: none !important;
}

/* Solapa / Botón flotante emergente derecho para Pizarra Blender (Estilo X3 exacto) */
#x1-toggle-blender-tab {
    top: 150px !important;
    right: 12px !important;
    z-index: 2000 !important;
}

.x1-toggle-blender-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(236, 72, 153, 0.4);
    border-right: none;
    border-radius: 12px 0 0 12px;
    color: #f472b6;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: -4px 0 20px rgba(236, 72, 153, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.x1-toggle-blender-tab:hover {
    background: rgba(236, 72, 153, 0.18);
    border-color: rgba(236, 72, 153, 0.7);
    color: #ffffff;
    box-shadow: -6px 0 25px rgba(236, 72, 153, 0.4);
    transform: translateY(-50%) translateX(-4px);
}

.x1-toggle-blender-tab.active {
    background: rgba(236, 72, 153, 0.25);
    border-color: #ec4899;
    color: #ffffff;
    box-shadow: -6px 0 25px rgba(236, 72, 153, 0.5);
}

/* Input de Búsqueda de Columna en Blender */
.blender-col-search-input {
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.25) !important;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blender-col-search-input:focus {
    border-color: var(--accent-secondary) !important;
    box-shadow: 0 0 6px rgba(6, 182, 212, 0.3) !important;
}

/* Modal de Detalles PAMI */
.pami-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(11, 10, 15, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast) ease;
}

.pami-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.pami-modal-content {
    background: rgba(22, 22, 30, 0.9);
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), var(--shadow-glow);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    transform: scale(0.95);
    transition: transform var(--transition-fast) ease;
}

.pami-modal-overlay.active .pami-modal-content {
    transform: scale(1);
}

.pami-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.pami-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-secondary);
}

.pami-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.pami-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.pami-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.pami-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.pami-detail-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pami-detail-value {
    font-size: 13px;
    color: var(--text-primary);
}

.pami-formula-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 12px;
}

.pami-formula-table th {
    background: rgba(6, 182, 212, 0.08);
    color: var(--accent-secondary);
    text-align: left;
    padding: 8px;
    font-weight: 600;
    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
}

.pami-formula-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.fda-doc-tab-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.btn-fda-details:hover {
    background: rgba(6, 182, 212, 0.22) !important;
    border-color: rgba(6, 182, 212, 0.55) !important;
    color: #67e8f9 !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   APP SWITCHER – X¹ X² X³
   ═══════════════════════════════════════════════════════════════ */
.app-switcher {
    display: flex;
    gap: 6px;
    padding: 12px 8px 4px 8px;
    justify-content: center;
    width: 100%;
}

.sidebar-collapsed .app-switcher {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 0 14px 0;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
}

.app-switcher-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    height: 46px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
}

.app-switcher-btn .switcher-icon {
    font-size: 15px;
    line-height: 1;
    font-family: "Material Icons Outlined", sans-serif;
    font-weight: 400;
}

.app-switcher-btn .switcher-label {
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
}

.sidebar-collapsed .app-switcher-btn {
    flex: none;
    width: 52px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-switcher-btn:hover {
    transform: translateY(-1px);
}

.app-switcher-btn#btn-switch-x1:not(.active-x1):hover {
    border-color: rgba(6, 182, 212, 0.5);
    color: var(--accent-secondary);
    background: rgba(6, 182, 212, 0.08);
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.1);
}

.app-switcher-btn#btn-switch-x2:not(.active-x2):hover {
    border-color: rgba(139, 92, 246, 0.5);
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.1);
}

.app-switcher-btn#btn-switch-x3:not(.active-x3):hover {
    border-color: rgba(16, 185, 129, 0.5);
    color: #34d399;
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.1);
}

.app-switcher-btn.active-x1 {
    border-color: rgba(6, 182, 212, 0.5);
    color: var(--accent-secondary);
    background: rgba(6, 182, 212, 0.1);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.15);
}

.app-switcher-btn.active-x2 {
    border-color: rgba(124, 58, 237, 0.5);
    color: #8b5cf6;
    background: rgba(124, 58, 237, 0.1);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.15);
}

.app-switcher-btn.active-x3 {
    border-color: rgba(16, 185, 129, 0.5);
    color: #34d399;
    background: rgba(16, 185, 129, 0.1);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
}

.app-switcher-btn.disabled-x3 {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   THEME X² – Módulo Monitor (Paleta más clara)
   ═══════════════════════════════════════════════════════════════ */
.view-x2 {
    --accent-primary: #8b5cf6;
    --accent-secondary: #a78bfa;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
    overflow-y: auto;
    height: 100%;
}

.view-x2 .x2-header,
.x2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
}

.x2-title {
    font-size: 18px;
    font-weight: 700;
    color: #a78bfa;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.x2-title .material-icons-outlined {
    font-size: 22px;
    color: #a78bfa;
}

/* ── ANIMACIÓN LOGO – FLIP 3D CINEMATOGRÁFICO ── */

/* Contenedor con perspectiva para el flip 3D */
.logo-icon-container {
    perspective: 160px;
    transform-style: preserve-3d;
}

/* ── SALIDA: gira hacia atrás y explota en luz ── */
@keyframes icon-flip-leave {
    0% {
        transform: rotateY(0deg) scale(1);
        opacity: 1;
        filter: brightness(1) blur(0px);
    }

    35% {
        transform: rotateY(40deg) scale(1.25);
        opacity: 1;
        filter: brightness(3.5) blur(0px);
    }

    50% {
        transform: rotateY(90deg) scale(1.1);
        opacity: 0;
        filter: brightness(6) blur(2px);
    }

    100% {
        transform: rotateY(90deg) scale(0.9);
        opacity: 0;
        filter: brightness(1) blur(0px);
    }
}

/* ── ENTRADA: aparece desde el otro lado del giro con rebote ── */
@keyframes icon-flip-enter {
    0% {
        transform: rotateY(-90deg) scale(0.9);
        opacity: 0;
        filter: brightness(6) blur(2px);
    }

    40% {
        transform: rotateY(-15deg) scale(1.3);
        opacity: 1;
        filter: brightness(2.5) blur(0px);
    }

    60% {
        transform: rotateY(8deg) scale(1.05);
        opacity: 1;
        filter: brightness(1.5) blur(0px);
    }

    78% {
        transform: rotateY(-3deg) scale(1.02);
        opacity: 1;
        filter: brightness(1.2) blur(0px);
    }

    90% {
        transform: rotateY(1deg) scale(1.01);
        opacity: 1;
        filter: brightness(1.05) blur(0px);
    }

    100% {
        transform: rotateY(0deg) scale(1);
        opacity: 1;
        filter: brightness(1) blur(0px);
    }
}

/* ── PULSO DE ENERGÍA que se expande por todo el panel ── */
@keyframes logo-pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0.8;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -50%) scale(35);
        opacity: 0;
    }
}

/* Clases de aplicación */
.logo-anim-leave {
    animation: icon-flip-leave 0.45s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.logo-anim-enter {
    animation: icon-flip-enter 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

/* Anillo de pulso que aparece programáticamente */
.logo-pulse-ring {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: currentColor;
    animation: logo-pulse-ring 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    z-index: -1;
}

/* Transición de color e interacción en el logo principal */
#main-logo-icon {
    cursor: pointer !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease, color 0.45s ease !important;
}

#main-logo-icon:hover {
    transform: scale(1.18) rotate(6deg) !important;
    filter: drop-shadow(0 0 14px rgba(6, 182, 212, 0.8)) !important;
}

.sidebar-collapsed #main-logo-icon:hover {
    transform: scale(1.22) rotate(8deg) !important;
}

.x2-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-x2-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(124, 58, 237, 0.4);
    background: rgba(124, 58, 237, 0.15);
    color: #8b5cf6;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-sans);
}

.btn-x2-primary:hover {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.6);
    transform: translateY(-1px);
}

.btn-x2-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-x2-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-sans);
}

.btn-x2-danger:hover {
    background: rgba(239, 68, 68, 0.2);
}

.btn-x2-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-highlight);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-sans);
}

.btn-x2-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-primary);
}

.x2-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.x2-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.15);
    user-select: none;
}

.x2-section-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.x2-section-header h3 .material-icons-outlined {
    font-size: 16px;
    color: #8b5cf6;
}

.x2-section-body {
    padding: 16px;
}

.x2-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-sm);
}

.x2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.x2-table thead th {
    padding: 10px 12px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e2e8f0;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    white-space: nowrap;
}

.x2-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.x2-table thead th.sortable:hover {
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
}

.x2-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.x2-table tbody tr:hover {
    background: rgba(139, 92, 246, 0.08);
}

.x2-table tbody td {
    padding: 10px 12px;
    color: #f8fafc;
    text-align: center;
    vertical-align: middle;
}

.x2-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}

.x2-badge-source {
    background: rgba(124, 58, 237, 0.15);
    color: #8b5cf6;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.x2-badge-ok {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.x2-badge-new {
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.x2-badge-error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.x2-details-row {
    display: none;
}

.x2-details-row.open {
    display: table-row;
}

.x2-details-row td {
    padding: 0;
}

.x2-details-inner {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.15);
    border-left: 3px solid rgba(139, 92, 246, 0.5);
}

.x2-sub-table-wrapper {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.x2-sub-table-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.x2-sub-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.x2-sub-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 4px;
}

.x2-sub-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.5);
}

.x2-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--font-sans);
    width: 100%;
    transition: border-color 0.2s;
}

.x2-input:focus {
    outline: none;
    border-color: rgba(124, 58, 237, 0.5);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.x2-select {
    background: rgba(22, 22, 30, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: border-color 0.2s;
}

.x2-select:focus {
    outline: none;
    border-color: rgba(124, 58, 237, 0.5);
}

.x2-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: x2-spin 0.8s linear infinite;
}

@keyframes x2-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Animaciones de Carga Secuencial para el Botón de Búsqueda */
.btn-charging {
    animation: btn-tremble 0.2s infinite;
    background: linear-gradient(135deg, var(--accent-primary), #d946ef) !important;
    box-shadow: 0 0 15px #d946ef, inset 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

@keyframes btn-tremble {
    0% {
        transform: translate(1px, 1px) rotate(0deg) scale(1.05);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg) scale(1.1);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg) scale(1.08);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg) scale(1.15);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg) scale(1.12);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg) scale(1.2);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg) scale(1.18);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg) scale(1.25);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg) scale(1.22);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg) scale(1.28);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg) scale(1.3);
    }
}

.btn-explode {
    animation: btn-nova-explosion 1.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
    pointer-events: none;
    z-index: 9999;
}

@keyframes btn-nova-explosion {
    0% {
        transform: scale(1.3);
        box-shadow: 0 0 20px #d946ef;
        background: #d946ef;
    }

    10% {
        transform: scale(20);
        box-shadow: 0 0 500px #d946ef;
        background: #fff;
        opacity: 1;
    }

    100% {
        transform: scale(30);
        box-shadow: 0 0 0px transparent;
        background: transparent;
        opacity: 0;
    }
}

.main-content {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100vh;
    overflow: hidden;
}

/* ── Módulo X³ – PubMed Reader & QA ────────────────────────────────────────── */
.view-x3 {
    display: flex;
    font-family: var(--font-sans);
    height: 100%;
    width: 100%;
    overflow: hidden;
    transition: gap 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.view-x3.collapsed-layout {
    gap: 0px !important;
}

/* Animación de desplazamiento y escalado para las burbujas (pills) de indicación */
.animated-pill {
    animation: slide-in-pill 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes slide-in-pill {
    from {
        opacity: 0;
        transform: translateX(-40px) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

#x2-btn-iniciar:hover {
    background: #7c3aed !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.45) !important;
    transform: translateY(-1.5px);
}

#x2-btn-iniciar:active {
    transform: translateY(0);
}


/* ── Módulo X³ – PubMed Reader & QA ────────────────────────────────────────── */
.view-x3 {
    display: flex;
    font-family: var(--font-sans);
    transition: gap 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.view-x3.collapsed-layout {
    gap: 0px !important;
}

.x3-left-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 35%;
    /* Ancho inicial: tabla ocupa 35% */
    min-width: 0;
    max-width: 70%;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.x3-right-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    /* Ocupa el resto del espacio (65% inicial) */
    min-width: 0;
    opacity: 1;
    overflow: hidden;
    transition: flex 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
}

.x3-right-panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0% !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.x3-left-panel.expanded {
    width: 100% !important;
    max-width: 100% !important;
}

.x3-right-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 15px);
    box-sizing: border-box;
    opacity: 1;
    overflow: hidden;
    transition: flex 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
}

/* Desactivar animaciones durante el arrastre manual con resizer */
.x3-resizing .x3-left-panel,
.x3-resizing .x3-right-panel {
    transition: none !important;
}

/* Divider arrastrable entre paneles */
.x3-panel-resizer {
    width: 6px;
    flex-shrink: 0;
    background: transparent;
    cursor: col-resize;
    position: relative;
    z-index: 20;
    transition: background 0.2s ease;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.x3-panel-resizer:hover,
.x3-panel-resizer.dragging {
    background: rgba(139, 92, 246, 0.35);
    border-color: rgba(139, 92, 246, 0.6);
}

.x3-panel-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 32px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
}

/* Deshabilitar selección de texto durante resize */
.x3-resizing * {
    user-select: none !important;
    cursor: col-resize !important;
}

/* Pestañas flotantes para abrir/cerrar visor y pizarra */
.x3-toggle-tab {
    position: absolute;
    top: 80px;
    right: 12px;
    width: 38px;
    height: 38px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10B981;
    cursor: pointer;
    z-index: 2000 !important;
    transition: all 0.2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.x3-toggle-tab.dragging {
    transition: none !important;
}

.x3-toggle-tab:hover {
    background: rgba(16, 185, 129, 0.25);
    transform: scale(1.08);
    color: #34d399;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
}

/* Estilos para la tabla interactiva de PubMed */
.dynamic-linked-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.dynamic-linked-row.active {
    background: rgba(16, 185, 129, 0.08) !important;
    border-left: 3px solid #10b981 !important;
}

/* Recuadros/Badges interactivos sobre el PDF para DOIs */
.x3-doi-badge-overlay {
    position: absolute;
    z-index: 15;
    background: rgba(139, 92, 246, 0.22);
    border: 1.5px solid #a78bfa;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-family: var(--font-sans);
    color: #f3e8ff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
    transition: all 0.2s ease;
    user-select: none;
    backdrop-filter: blur(4px);
}

.x3-doi-badge-overlay:hover {
    background: rgba(139, 92, 246, 0.45);
    border-color: #c4b5fd;
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.5);
    color: #ffffff;
}

/* Animación de destello para resaltar foco cruzado */
.flash-highlight {
    animation: doi-flash 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes doi-flash {
    0% {
        box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.8);
        border-color: #a78bfa;
        background-color: rgba(167, 139, 250, 0.35);
    }

    30% {
        box-shadow: 0 0 18px 6px rgba(167, 139, 250, 0.6);
        border-color: #c4b5fd;
        background-color: rgba(167, 139, 250, 0.45);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(167, 139, 250, 0);
        border-color: transparent;
        background-color: transparent;
    }
}

.dynamic-linked-row.active td {
    color: #fff !important;
}

/* Efecto Drag and Drop en filas de PubMed */
.x3-row-dragover {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 2px dashed #10b981 !important;
}


.x3-card-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.x3-status-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.x3-status-badge.undownloaded {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.x3-status-badge.downloading {
    background: rgba(99, 102, 241, 0.12);
    color: #8b5cf6;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.x3-status-badge.downloaded {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* PDF Viewer page rendering styles */
.x3-pdf-page-container {
    position: relative;
    display: block;
    margin: 12px auto;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.x3-pdf-canvas {
    display: block;
    position: relative;
    z-index: 1;
    pointer-events: none;
    /* El canvas solo muestra el PDF, no debe interceptar eventos de selección */
}

.x3-pdf-annotation-layer {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    /* Permitir que la selección de texto pase a la capa de texto inferior */
    z-index: 2;
    /* Debajo de la capa de texto para mantener la nitidez */
}

.x3-pdf-annotation-layer.pan-mode {
    cursor: grab;
    pointer-events: auto;
    /* Permitir arrastrar para desplazamiento si está en modo pan */
}

.x3-pdf-annotation-layer.pan-mode:active {
    cursor: grabbing;
}

/* Cajas de anotaciones sobre el canvas */
.x3-highlight-box {
    position: absolute;
    border-radius: 2px;
    pointer-events: auto;
    /* Permitir interacción como clic para ver notas o borrar */
    cursor: pointer;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Modo Resaltador (Highlight) */
.x3-highlight-box.x3-mode-highlight {
    mix-blend-mode: multiply;
}

.x3-highlight-box.x3-mode-highlight.x3-highlight-yellow {
    background: rgba(254, 240, 138, 0.55);
}

.x3-highlight-box.x3-mode-highlight.x3-highlight-green {
    background: rgba(167, 243, 208, 0.55);
}

.x3-highlight-box.x3-mode-highlight.x3-highlight-blue {
    background: rgba(191, 219, 254, 0.55);
}

.x3-highlight-box.x3-mode-highlight.x3-highlight-pink {
    background: rgba(251, 207, 232, 0.55);
}

.x3-highlight-box.x3-mode-highlight.x3-highlight-purple {
    background: rgba(221, 214, 254, 0.55);
}

/* Modo Subrayado (Underline - Trazo nítido pegado a la línea base del texto) */
.x3-highlight-box.x3-mode-underline {
    background: transparent !important;
    mix-blend-mode: normal !important;
}

.x3-highlight-box.x3-mode-underline::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 2.5px;
    border-radius: 1px;
}

.x3-highlight-box.x3-mode-underline.x3-highlight-yellow::after {
    background: #eab308;
}

.x3-highlight-box.x3-mode-underline.x3-highlight-green::after {
    background: #10b981;
}

.x3-highlight-box.x3-mode-underline.x3-highlight-blue::after {
    background: #3b82f6;
}

.x3-highlight-box.x3-mode-underline.x3-highlight-pink::after {
    background: #ec4899;
}

.x3-highlight-box.x3-mode-underline.x3-highlight-purple::after {
    background: #8b5cf6;
}

/* Modo Tachado (Strikethrough - Trazo al centro óptico del texto) */
.x3-highlight-box.x3-mode-strikethrough {
    background: transparent !important;
    mix-blend-mode: normal !important;
}

.x3-highlight-box.x3-mode-strikethrough::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    border-radius: 1px;
}

.x3-highlight-box.x3-mode-strikethrough.x3-highlight-yellow::after {
    background: #eab308;
}

.x3-highlight-box.x3-mode-strikethrough.x3-highlight-green::after {
    background: #10b981;
}

.x3-highlight-box.x3-mode-strikethrough.x3-highlight-blue::after {
    background: #3b82f6;
}

.x3-highlight-box.x3-mode-strikethrough.x3-highlight-pink::after {
    background: #ec4899;
}

.x3-highlight-box.x3-mode-strikethrough.x3-highlight-purple::after {
    background: #8b5cf6;
}

/* Capa de texto para PDF.js */
.textLayer,
.x3-pdf-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 1;
    pointer-events: auto !important;
    z-index: 3;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

.textLayer span,
.x3-pdf-text-layer span {
    color: transparent;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

.textLayer ::selection,
.x3-pdf-text-layer ::selection {
    background: rgba(147, 197, 253, 0.4);
}

/* Pop-up flotante de selección de texto de PDF */
#x3-pdf-selection-popup {
    position: absolute;
    z-index: 99;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(22, 22, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    transform: translate(-50%, -100%);
    margin-top: -8px;
}


/* Chat QA container styles */
.x3-tab-content {
    display: none;
    height: 100%;
}

.x3-tab-content.active {
    display: flex;
}

/* Globos de mensaje para el Chat */
.x3-msg {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    line-height: 1.5;
    word-break: break-word;
}

.x3-msg-user {
    align-self: flex-end;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border-bottom-right-radius: 2px;
}

.x3-msg-ai {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-bottom-left-radius: 2px;
}

.x3-msg-time {
    font-size: 9px;
    color: var(--text-muted);
    align-self: flex-end;
    margin-top: 4px;
}

/* DOIs interactivos en lista */
.x3-doi-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease;
}

.x3-doi-item:hover {
    background: rgba(167, 139, 250, 0.08);
    border-color: rgba(167, 139, 250, 0.2);
}

.x3-color-dot {
    transition: all 0.2s ease;
}

.x3-color-dot:hover {
    transform: scale(1.15);
}

.x3-color-dot.active {
    border: 2px solid white !important;
    box-shadow: 0 0 6px var(--accent-primary) !important;
}

/* Hover styles for edit and delete buttons in history items */
.btn-edit-history,
.btn-delete-history {
    transition: color 0.2s ease !important;
}

#history-list .btn-edit-history:hover {
    color: #06b6d4 !important;
}

#x2-history-list .btn-edit-history:hover {
    color: #a78bfa !important;
}

#x3-history-list .btn-edit-history:hover {
    color: #10B981 !important;
}

.btn-delete-history:hover {
    color: #ef4444 !important;
}

/* Burbuja de animación X2 */
.x2-anim-bubble {
    position: fixed;
    border-radius: 8px;
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
    z-index: 9999;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.6, -0.28, 0.735, 0.045), border-radius 0.2s ease-out;
}

/* Partícula de explosión */
.x2-anim-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c4b5fd;
    z-index: 9999;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.5s ease-out;
}

/* ─── Pizarra de Conexiones Módulo X3 ─────────────────────────────────────── */
#x3-connections-panel.narrow-pizarra .x3-pizarra-btn-text {
    display: none !important;
}

#x3-connections-panel.narrow-pizarra .x3-pizarra-header-btn {
    padding: 0 6px !important;
}

.x3-pizarra-node {
    user-select: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s;
    z-index: 5;
    background: #110e2e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* Para permitir que se vea el botón de eliminar fuera del borde */
}

.x3-pizarra-node:hover {
    transform: scale(1.04);
}

.x3-pizarra-node.selected-origin {
    outline: 3px solid #F59E0B !important;
    outline-offset: 2px;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.8) !important;
}

.node-circle {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    border: 2px solid #8b5cf6;
    background: rgba(139, 92, 246, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.node-circle .node-content {
    padding: 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    max-height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    width: 100%;
}

.node-rectangle {
    width: 210px;
    min-height: 65px;
    border-radius: 8px;
    border: 2px solid #10b981;
    background: rgba(16, 185, 129, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.node-rectangle .node-content {
    padding: 8px 12px;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    width: 100%;
    word-break: break-word;
}

.node-text {
    width: 150px;
    min-height: 55px;
    border-radius: 6px;
    border: 2px dashed #ec4899;
    background: rgba(236, 72, 153, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.node-text .node-content {
    padding: 8px 10px;
    text-align: center;
    font-size: 11px;
    font-style: italic;
    line-height: 1.3;
    width: 100%;
}

.node-delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    padding: 0;
}

.x3-pizarra-node:hover .node-delete-btn {
    display: none;
}

.node-delete-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.x3-pizarra-line {
    opacity: 0.75;
    stroke-dasharray: 6 3;
    animation: dashDraw 40s linear infinite;
    stroke-linecap: round;
    cursor: pointer;
    transition: stroke-width 0.2s, stroke 0.2s, opacity 0.2s;
}

.x3-pizarra-line:hover {
    opacity: 1;
    animation: dashDraw 15s linear infinite;
}

/* Barra de herramientas emergente al hacer hover en nodos de la pizarra */
.node-hover-toolbar {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    display: flex;
    gap: 4px;
    background: #17153b;
    border: 1.5px solid #8b5cf6;
    border-radius: 20px;
    padding: 3px 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

.x3-pizarra-node:hover .node-hover-toolbar {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

.toolbar-btn {
    background: transparent;
    border: none;
    color: #c4b5fd;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
    width: 24px;
    height: 24px;
}

.toolbar-btn:hover {
    background: rgba(139, 92, 246, 0.25);
    color: #ffffff;
}

.toolbar-btn.btn-delete:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

/* Animación de brillo para destacar artículos al hacer clic en nodos */
@keyframes rowGlow {
    0% {
        background-color: rgba(139, 92, 246, 0.1);
        box-shadow: inset 0 0 8px rgba(139, 92, 246, 0.2);
    }

    30% {
        background-color: rgba(139, 92, 246, 0.4);
        box-shadow: inset 0 0 20px rgba(139, 92, 246, 0.6);
    }

    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

.x3-row-highlight-glow {
    animation: rowGlow 2s ease-out;
}

/* Filas excluidas en tabla de resultados X3 */
tr.x3-row-excluded td {
    opacity: 0.4;
}

tr.x3-row-excluded td .x3-title-cell-content {
    text-decoration: line-through;
    color: var(--text-muted) !important;
}

.x3-exclude-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    font-size: 13px;
    line-height: 1;
    transition: color 0.15s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.x3-exclude-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    transform: scale(1.15);
}

.x3-row-excluded .x3-exclude-btn {
    color: #ef4444;
}

/* Animación fadeInUp para toasts */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ==========================================================================
   TEMA CLARO (BRIGHT MODE) - Estética de Fondos Blancos y Colores Intensificados Oscuros
   X1: Celeste / Cyan Intenso (#0369a1 / #075985)
   X2: Violeta / Purple Profundo (#5b21b6 / #4c1d95)
   X3: Verde / Emerald Oscuro (#064e3b / #022c22)
   ========================================================================== */

.btn-theme-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-sm);
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.08);
    color: #fbbf24;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.btn-theme-toggle:hover {
    background: rgba(251, 191, 36, 0.18);
    transform: scale(1.08) rotate(12deg);
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

[data-theme="light"] {
    color-scheme: light;
    --bg-base: #FFFFFF;
    --bg-panel: #F1F3F5;
    --bg-panel-hover: #E9ECEF;

    --accent-primary: #00BCD4;
    --accent-primary-hover: #00ACC1;
    --accent-secondary: #8E24AA;
    --accent-secondary-hover: #7B1FA2;

    --badge-quality-green: #C5E1A5;
    --badge-phase-orange: #FFD180;
    --badge-guide-blue: #B3E5FC;
    --badge-state-pink: #F48FB1;

    --text-primary: #333333;
    --text-secondary: #555555;
    --text-muted: #777777;

    --border-color: rgba(0, 0, 0, 0.08);
    --border-highlight: rgba(0, 0, 0, 0.16);

    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 15px rgba(0, 188, 212, 0.2);
}

[data-theme="light"] body,
[data-theme="light"] .app-container {
    background-color: #FFFFFF !important;
    color: #333333 !important;
}

/* Regla global en modo claro PharmaX: Títulos en gris oscuro suave y acentos secundarios */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] label,
[data-theme="light"] strong,
[data-theme="light"] b {
    color: #333333 !important;
}

[data-theme="light"] .sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .sidebar-header {
    border-bottom: 1px solid #f1f3f5 !important;
}

[data-theme="light"] #sidebar-logo-text,
[data-theme="light"] #main-logo-icon {
    color: #00bcd4 !important;
}

[data-theme="light"] .logo-container span,
[data-theme="light"] .history-section-header h3,
[data-theme="light"] .history-title,
[data-theme="light"] .sidebar-header h2 {
    color: #1a237e !important;
    font-weight: 700 !important;
}

[data-theme="light"] .history-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    color: #333333 !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] .history-item .history-drug {
    color: #333333 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .history-item .history-area {
    color: #777777 !important;
    font-size: 11px !important;
}

[data-theme="light"] .history-item:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

/* Pastillas de fases en historial (PharmaX Bright Mode: F1 violeta, F2 cián, F3 verde pastel) */
[data-theme="light"] .history-phase-badge.badge-phase-1 {
    background: rgba(142, 36, 170, 0.12) !important;
    color: #8e24aa !important;
    border: 1px solid rgba(142, 36, 170, 0.3) !important;
}

[data-theme="light"] .history-phase-badge.badge-phase-2 {
    background: rgba(0, 188, 212, 0.12) !important;
    color: #00838f !important;
    border: 1px solid rgba(0, 188, 212, 0.3) !important;
}

[data-theme="light"] .history-phase-badge.badge-phase-3 {
    background: #c5e1a5 !important;
    color: #2e5618 !important;
    border: 1px solid #aed581 !important;
}

[data-theme="light"] .history-phase-badge.badge-phase-4 {
    background: rgba(126, 87, 194, 0.12) !important;
    color: #5e35b1 !important;
    border: 1px solid rgba(126, 87, 194, 0.3) !important;
}

[data-theme="light"] .history-phase-badge.badge-phase-5 {
    background: #ffd180 !important;
    color: #8d4004 !important;
    border: 1px solid #ffb74d !important;
}

[data-theme="light"] .history-phase-badge.badge-phase-6 {
    background: #f48fb1 !important;
    color: #880e4f !important;
    border: 1px solid #f06292 !important;
}

[data-theme="light"] .sidebar-footer,
[data-theme="light"] .sidebar-collapsed-footer {
    border-top: 1px solid #f1f3f5 !important;
}

[data-theme="light"] .btn-secondary {
    background: #f1f3f5;
    color: #333333 !important;
    border: 1px solid #e2e8f0;
    font-weight: 600;
}

[data-theme="light"] .btn-secondary:hover {
    background: #e2e8f0;
    color: #1a237e !important;
}

[data-theme="light"] #btn-save,
[data-theme="light"] #btn-new-search {
    background: #f1f3f5 !important;
    color: #00838f !important;
    border: 1px solid rgba(0, 188, 212, 0.35) !important;
    font-weight: 600 !important;
}

[data-theme="light"] #btn-save:hover,
[data-theme="light"] #btn-new-search:hover {
    background: rgba(0, 188, 212, 0.12) !important;
    border-color: #00bcd4 !important;
}

/* Sol en modo claro: Cián vibrante (#00BCD4) */
[data-theme="light"] .btn-theme-toggle {
    background: rgba(0, 188, 212, 0.12) !important;
    border: 1px solid rgba(0, 188, 212, 0.3) !important;
    outline: none !important;
    color: #00bcd4 !important;
    box-shadow: none !important;
}

[data-theme="light"] .btn-theme-toggle:hover {
    background: rgba(0, 188, 212, 0.22) !important;
    border-color: #00bcd4 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   MODO CLARO - X1 (BARRA SUPERIOR, PESTAÑAS MODULARES Y NAVEGACIÓN PHARMAX)
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .app-switcher-btn.active#btn-switch-x1,
[data-theme="light"] .app-switcher-btn#btn-switch-x1:hover {
    background: rgba(0, 188, 212, 0.14) !important;
    color: #00838f !important;
    border-color: rgba(0, 188, 212, 0.4) !important;
    font-weight: 700 !important;
}

[data-theme="light"] #view-x1 {
    background: #ffffff;
}

[data-theme="light"] .active-drug-header-display,
[data-theme="light"] .active-drug-header-display .active-drug-name-text {
    color: #00838f !important;
    font-weight: 700 !important;
}

[data-theme="light"] .active-drug-header-display .active-drug-separator {
    color: #00bcd4 !important;
    opacity: 0.8;
}

/* X1: Barra de fases superior modular en gris frío (#F1F3F5) con activa en Cián (#00BCD4) */
[data-theme="light"] .phase-tabs>div {
    background: #f1f3f5 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .phase-tabs .tab-btn {
    background: #ffffff !important;
    color: #555555 !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] .phase-tabs .tab-btn:hover {
    background: #f8fafc !important;
    color: #00bcd4 !important;
    border-color: rgba(0, 188, 212, 0.4) !important;
}

/* Pestaña Activa: Cián vibrante (#00BCD4) con texto blanco */
[data-theme="light"] .phase-tabs .tab-btn.active {
    background: #00bcd4 !important;
    color: #ffffff !important;
    border: 1px solid #00acc1 !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 12px rgba(0, 188, 212, 0.35) !important;
}

[data-theme="light"] .phase-tabs .tab-btn.active .step-num {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

[data-theme="light"] .phase-tabs .tab-btn.active .tab-label {
    color: #ffffff !important;
}

/* Botón Rayo / Iniciar arriba en Cián (#00BCD4) */
[data-theme="light"] #btn-start {
    background: #00bcd4 !important;
    color: #ffffff !important;
    border: 1px solid #00acc1 !important;
    box-shadow: 0 3px 12px rgba(0, 188, 212, 0.35) !important;
}

[data-theme="light"] #btn-start:hover {
    background: #00acc1 !important;
    transform: translateY(-1px);
}

[data-theme="light"] .panel-actions {
    background: #f1f3f5 !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .panel-actions .view-toggle {
    background: transparent !important;
    color: #555555 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .panel-actions .view-toggle.active {
    background: #ffffff !important;
    color: #00838f !important;
    border: 1px solid #00bcd4 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(0, 188, 212, 0.15) !important;
}

/* X1: Acordeón de Fuentes y Tablas de Resultados (Fases 1 a 4) en Bright Mode */
[data-theme="light"] .accordion-source {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    border-radius: 10px !important;
}

[data-theme="light"] .accordion-header {
    background: #f1f3f5 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .accordion-header .source-name {
    color: #1a237e !important;
    font-weight: 700 !important;
}

[data-theme="light"] .accordion-header .result-count {
    background: #00bcd4 !important;
    color: #ffffff !important;
    border-radius: 99px !important;
    padding: 2px 8px !important;
    font-weight: 700 !important;
}

[data-theme="light"] .accordion-header .chevron-icon {
    color: #00bcd4 !important;
}

[data-theme="light"] .accordion-body table.subtable>thead>tr>th {
    background: #f8fafc !important;
    color: #1a237e !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

[data-theme="light"] .accordion-body table.subtable>tbody>tr>td {
    border-bottom: 1px solid #f1f5f9 !important;
    color: #333333 !important;
}

[data-theme="light"] .accordion-body table.subtable>tbody>tr:hover {
    background: #f8fafc !important;
}

[data-theme="light"] .sortable-date-header {
    color: #1a237e !important;
}

[data-theme="light"] .search-controls,
[data-theme="light"] .search-card,
[data-theme="light"] .glass-panel,
[data-theme="light"] .drug-phase-section,
[data-theme="light"] .fda-table-container,
[data-theme="light"] .blender-container {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    color: #000000 !important;
}

/* ==========================================================================
   BLENDER (FASE 6): PIZARRA ESPACIAL 2D INFINITA (SPATIAL WHITEBOARD CANVAS)
   ========================================================================== */

/* Contenedor principal de la Pizarra */
.blender-dashboard-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #080c16;
    user-select: none;
}

/* Viewport con soporte para arrastre y zoom */
.blender-canvas-viewport {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    cursor: grab;
    background-color: #080c16;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px),
        radial-gradient(rgba(255, 255, 255, 0.03) 1.2px, transparent 1.2px);
    background-size: 32px 32px, 160px 160px;
    background-position: 0 0, 0 0;
    transition: background-color 0.3s ease;
}

.blender-canvas-viewport.is-panning {
    cursor: grabbing !important;
}

/* Escenario transformable (Stage) */
.blender-canvas-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 4500px;
    height: 3500px;
    transform-origin: 0 0;
    will-change: transform;
    pointer-events: none;
}

/* Columnas Guía Verticales (Miro / Whiteboard Phase Columns) */
.blender-tier-guides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.blender-tier-col,
.blender-tier-lane {
    position: absolute;
    border-radius: 16px;
    border: 1.5px dashed rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.012);
    pointer-events: none;
    transition: border-color 0.2s, background 0.2s;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
}

.blender-tier-col.tier-phase-1,
.blender-tier-lane.tier-phase-1 {
    border-color: rgba(6, 182, 212, 0.25);
    background: rgba(6, 182, 212, 0.015);
}

.blender-tier-col.tier-phase-2,
.blender-tier-lane.tier-phase-2 {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.015);
}

.blender-tier-col.tier-phase-3,
.blender-tier-lane.tier-phase-3 {
    border-color: rgba(168, 85, 247, 0.25);
    background: rgba(168, 85, 247, 0.015);
}

.blender-tier-col.tier-phase-4,
.blender-tier-lane.tier-phase-4 {
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.015);
}

.blender-tier-col.tier-phase-5,
.blender-tier-lane.tier-phase-5 {
    border-color: rgba(59, 130, 246, 0.25);
    background: rgba(59, 130, 246, 0.015);
}

.blender-tier-col.tier-custom-notes,
.blender-tier-lane.tier-custom-notes {
    border-color: rgba(236, 72, 153, 0.28);
    background: rgba(236, 72, 153, 0.02);
}

.blender-tier-label {
    position: absolute;
    top: 14px;
    left: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 8px;
    background: rgba(10, 15, 28, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   BOTÓN FILTRO OJO: OCULTAR BLOQUES SIN FÁRMACO ACTIVO
   ========================================================================== */
#btn-blender-toggle-drug-only {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
}

#btn-blender-toggle-drug-only:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

#btn-blender-toggle-drug-only.active {
    background: rgba(6, 182, 212, 0.16) !important;
    border-color: rgba(6, 182, 212, 0.6) !important;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.35) !important;
}

#btn-blender-toggle-drug-only.active #blender-toggle-drug-eye-icon {
    color: #06b6d4 !important;
}

/* ==========================================================================
   1. CLUSTERS (CONTENEDORES SEMÁNTICOS DE PIZARRA)
   ========================================================================== */
.blender-clusters-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.blender-cluster-box {
    position: absolute;
    border-radius: 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.blender-cluster-box.cluster-phase-1 {
    border-color: rgba(6, 182, 212, 0.38);
    background: radial-gradient(circle at 15% 10%, rgba(6, 182, 212, 0.08) 0%, rgba(15, 23, 42, 0.55) 75%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 35px rgba(6, 182, 212, 0.08);
}

.blender-cluster-box.cluster-phase-2 {
    border-color: rgba(16, 185, 129, 0.38);
    background: radial-gradient(circle at 15% 10%, rgba(16, 185, 129, 0.08) 0%, rgba(15, 23, 42, 0.55) 75%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 35px rgba(16, 185, 129, 0.08);
}

.blender-cluster-box.cluster-phase-3 {
    border-color: rgba(168, 85, 247, 0.38);
    background: radial-gradient(circle at 15% 10%, rgba(168, 85, 247, 0.08) 0%, rgba(15, 23, 42, 0.55) 75%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 35px rgba(168, 85, 247, 0.08);
}

.blender-cluster-box.cluster-phase-4 {
    border-color: rgba(245, 158, 11, 0.38);
    background: radial-gradient(circle at 15% 10%, rgba(245, 158, 11, 0.08) 0%, rgba(15, 23, 42, 0.55) 75%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 35px rgba(245, 158, 11, 0.08);
}

.blender-cluster-box.cluster-phase-5 {
    border-color: rgba(59, 130, 246, 0.38);
    background: radial-gradient(circle at 15% 10%, rgba(59, 130, 246, 0.08) 0%, rgba(15, 23, 42, 0.55) 75%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 35px rgba(59, 130, 246, 0.08);
}

.blender-cluster-box.cluster-custom-notes {
    border-color: rgba(236, 72, 153, 0.4);
    background: radial-gradient(circle at 15% 10%, rgba(236, 72, 153, 0.09) 0%, rgba(15, 23, 42, 0.55) 75%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 35px rgba(236, 72, 153, 0.08);
}

.blender-cluster-header {
    position: absolute;
    top: 14px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2;
}

.blender-cluster-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.blender-cluster-title-badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid currentColor;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    width: fit-content;
}

.blender-cluster-subtitle {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    margin-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.blender-cluster-count-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

/* ==========================================================================
   3. NODOS CONCENTRADORES / SISTEMA DE BUS (HUB NODES)
   ========================================================================== */
.blender-floating-card.blender-card-hub-node {
    border-color: #f59e0b !important;
    border-width: 2px !important;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.4), 0 14px 40px rgba(0, 0, 0, 0.8) !important;
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
}

.blender-card-tag.tag-hub-node {
    background: rgba(245, 158, 11, 0.2) !important;
    border: 1.2px solid rgba(245, 158, 11, 0.6) !important;
    color: #fbbf24 !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
}

/* ==========================================================================
   4. ESTILIZACIÓN DE CONECTORES Y LÍNEAS BÉZIER
   ========================================================================== */
.blender-conn-bus-trunk {
    stroke-dasharray: 6 3;
    animation: dashTrunk 30s linear infinite;
}

@keyframes dashTrunk {
    to {
        stroke-dashoffset: -1000;
    }
}

/* Capa SVG para Conexiones Bézier */
.blender-svg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

.blender-svg-line {
    fill: none;
    stroke-width: 2.8px;
    opacity: 0.85;
    pointer-events: stroke;
    cursor: pointer;
    transition: stroke-width 0.15s ease, opacity 0.15s ease;
    stroke-linecap: round;
}

.blender-svg-line:hover,
.blender-svg-line.highlighted,
.blender-svg-line.is-hover-line {
    stroke-width: 4.8px !important;
    opacity: 1 !important;
}

/* Capa de Nodos y Bloques Flotantes */
.blender-nodes-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

/* Tarjetas Flotantes (Floating Node Cards) */
.blender-floating-card {
    position: absolute;
    width: 350px;
    min-height: 108px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: grab;
    user-select: none;
    display: flex;
    flex-direction: column;
    overflow: visible;
    pointer-events: auto;
    z-index: 21;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    box-sizing: border-box;
}

.blender-floating-card:hover {
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.7), 0 0 24px var(--phase-glow, rgba(6, 182, 212, 0.25));
    transform: translateY(-2px);
    z-index: 25;
}

.blender-floating-card.is-dragging {
    cursor: grabbing !important;
    opacity: 0.94;
    transform: scale(1.02) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.8), 0 0 28px var(--phase-glow, rgba(6, 182, 212, 0.4)) !important;
    z-index: 99 !important;
}

.blender-floating-card.highlighted,
.blender-floating-card.is-hover-target,
.blender-floating-card.is-hover-connected {
    border-color: var(--phase-accent, #06b6d4) !important;
    box-shadow: 0 0 26px var(--phase-glow, rgba(6, 182, 212, 0.5)), 0 10px 28px rgba(0, 0, 0, 0.65) !important;
}

.blender-floating-card.faded {
    opacity: 0.25;
    filter: grayscale(0.5);
}

/* Tarjeta destacada por coincidencia directa con fármaco */
.blender-floating-card.is-starred-card {
    border-color: rgba(251, 191, 36, 0.48) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 16px rgba(251, 191, 36, 0.2) !important;
}

[data-theme="light"] .blender-floating-card.is-starred-card {
    border-color: rgba(217, 119, 6, 0.6) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 14px rgba(245, 158, 11, 0.22) !important;
}

.blender-card-star-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(251, 191, 36, 0.16);
    border: 1px solid rgba(251, 191, 36, 0.45);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.25);
}

/* Sombreado de Tarjetas Descartadas en la Pizarra (Triage Espejo) */
.blender-floating-card.card-dismissed {
    opacity: 0.42 !important;
    filter: grayscale(0.85) contrast(0.9) !important;
    border: 1.5px dashed rgba(239, 68, 68, 0.7) !important;
    border-top: 3.5px dashed #ef4444 !important;
    box-shadow: inset 0 0 16px rgba(239, 68, 68, 0.12), 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    transition: opacity 0.25s ease, filter 0.25s ease, border-color 0.25s ease, transform 0.2s ease !important;
}

.blender-floating-card.card-dismissed:hover {
    opacity: 0.85 !important;
    filter: grayscale(0.2) contrast(0.95) !important;
    border-color: rgba(239, 68, 68, 0.9) !important;
    box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.22), 0 10px 24px rgba(0, 0, 0, 0.65) !important;
    transform: translateY(-2px);
    z-index: 30 !important;
}

.blender-floating-card.card-dismissed .blender-card-title {
    text-decoration: line-through !important;
    text-decoration-color: #ef4444 !important;
    text-decoration-thickness: 1.8px !important;
    color: #94a3b8 !important;
}

.blender-floating-card.card-dismissed .blender-card-badge {
    opacity: 0.75;
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

.blender-svg-line.line-dismissed {
    opacity: 0.25 !important;
    stroke-dasharray: 4, 4 !important;
    stroke: #ef4444 !important;
}

[data-theme="light"] .blender-floating-card.card-dismissed {
    background: rgba(248, 250, 252, 0.92) !important;
    opacity: 0.55 !important;
    border-color: rgba(239, 68, 68, 0.65) !important;
}

.blender-floating-card.is-origin-linking {
    outline: 2.5px solid var(--accent-secondary, #06b6d4) !important;
    outline-offset: 3px;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.7) !important;
    animation: pulseLink 1.5s infinite;
}

@keyframes pulseLink {
    0%, 100% {
        outline-color: #06b6d4;
    }
    50% {
        outline-color: #8b5cf6;
    }
}

/* Bordes y Acentos por Fase */
.blender-floating-card[data-phase="phase-1"] {
    --phase-accent: #06b6d4;
    --phase-glow: rgba(6, 182, 212, 0.45);
    border-top: 3.5px solid #06b6d4;
}

.blender-floating-card[data-phase="phase-2"] {
    --phase-accent: #10b981;
    --phase-glow: rgba(16, 185, 129, 0.45);
    border-top: 3.5px solid #10b981;
}

.blender-floating-card[data-phase="phase-3"] {
    --phase-accent: #a855f7;
    --phase-glow: rgba(168, 85, 247, 0.45);
    border-top: 3.5px solid #a855f7;
}

.blender-floating-card[data-phase="phase-4"] {
    --phase-accent: #f59e0b;
    --phase-glow: rgba(245, 158, 11, 0.45);
    border-top: 3.5px solid #f59e0b;
}

.blender-floating-card[data-phase="phase-5"] {
    --phase-accent: #3b82f6;
    --phase-glow: rgba(59, 130, 246, 0.45);
    border-top: 3.5px solid #3b82f6;
}

/* Header de la Tarjeta */
.blender-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px 6px 12px;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

.blender-card-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--phase-accent, #cbd5e1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blender-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.blender-card-btn {
    background: none;
    border: none;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
}

.blender-card-btn .material-icons-outlined {
    font-size: 16px !important;
}

.blender-card-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.blender-card-btn.btn-note:hover,
.blender-card-btn.btn-note.has-note {
    color: #fbbf24 !important;
    background: rgba(245, 158, 11, 0.16) !important;
}

.blender-card-btn.btn-plus:hover,
.blender-card-btn.btn-plus.active {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.18) !important;
}

.blender-card-btn.btn-hide:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.14) !important;
}

/* Pop-up Menú Resumido del Botón + */
.blender-card-plus-popup {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    display: none;
    flex-direction: column;
    gap: 3px;
    min-width: 145px;
}

.blender-card-plus-popup.visible {
    display: flex;
}

.blender-card-plus-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #f1f5f9;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.blender-card-plus-item .material-icons-outlined {
    font-size: 15px !important;
}

.blender-card-plus-item.item-pdf {
    color: #38bdf8;
}

.blender-card-plus-item.item-pdf:hover {
    background: rgba(56, 189, 248, 0.16);
}

.blender-card-plus-item.item-epicot {
    color: #d8b4fe;
}

.blender-card-plus-item.item-epicot:hover {
    background: rgba(168, 85, 247, 0.18);
}

/* Post-it Adhesivo para Bloques de Pizarra */
.blender-card-postit {
    margin: 4px 10px 10px 10px;
    background: linear-gradient(135deg, rgba(254, 240, 138, 0.14) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.38);
    border-left: 3.5px solid #f59e0b;
    border-radius: 8px;
    padding: 8px 10px;
    display: none;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    position: relative;
    box-sizing: border-box;
}

.blender-card-postit.visible {
    display: flex;
}

.blender-postit-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}

.blender-postit-textarea {
    width: 100%;
    min-height: 46px;
    max-height: 180px;
    background: transparent;
    border: none;
    outline: none;
    color: #fef08a;
    font-size: 11.5px;
    line-height: 1.4;
    resize: vertical;
    font-family: inherit;
    padding: 0;
    box-sizing: border-box;
}

.blender-postit-textarea::placeholder {
    color: rgba(254, 240, 138, 0.45);
}

/* Sección de Códigos en Inspector / Modal */
.blender-inspector-codes-section {
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 12px;
}

.btn-blender-codes-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-blender-codes-trigger:hover {
    background: rgba(56, 189, 248, 0.16);
    border-color: rgba(56, 189, 248, 0.6);
}

.blender-inspector-codes-content {
    margin-top: 8px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: none;
    flex-direction: column;
    gap: 8px;
}

.blender-inspector-codes-content.visible {
    display: flex;
}

/* Cuerpo de la Tarjeta */
.blender-card-body {
    padding: 10px 14px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.blender-card-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #f8fafc;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.15s ease;
}

.blender-card-title:hover {
    color: var(--phase-accent, #38bdf8);
    text-decoration: underline;
}

.blender-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-top: 3px;
}

.blender-card-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Puntos de Anclaje de Conexión (Anchor Points) */
.blender-card-anchor {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--phase-accent, #06b6d4);
    border: 2px solid #0f172a;
    box-shadow: 0 0 6px var(--phase-accent, #06b6d4);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
    cursor: crosshair;
}

.blender-card-anchor.top {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.blender-card-anchor.bottom {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.blender-card-anchor.left {
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.blender-card-anchor.right {
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.blender-floating-card:hover .blender-card-anchor,
.blender-custom-block:hover .blender-card-anchor {
    opacity: 0.95;
}

.blender-card-anchor.top:hover,
.blender-card-anchor.bottom:hover {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1.4);
}

.blender-card-anchor.left:hover,
.blender-card-anchor.right:hover {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.4);
}

/* Bloques de Notas Personalizadas (Custom Notes) */
.blender-custom-block {
    position: absolute;
    width: 290px;
    min-height: 120px;
    border-radius: 12px;
    background: rgba(26, 16, 37, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px dashed var(--custom-color, #ec4899);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(236, 72, 153, 0.15);
    cursor: grab;
    user-select: none;
    display: flex;
    flex-direction: column;
    overflow: visible;
    pointer-events: auto;
    z-index: 22;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    box-sizing: border-box;
    padding: 8px 10px;
}

.blender-custom-block:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 20px var(--custom-color, rgba(236, 72, 153, 0.35));
    transform: translateY(-2px);
    z-index: 26;
}

.blender-custom-block.is-dragging {
    cursor: grabbing !important;
    opacity: 0.92;
    transform: scale(1.02) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 25px var(--custom-color, rgba(236, 72, 153, 0.5)) !important;
    z-index: 99 !important;
}

.blender-custom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}

.blender-custom-title-input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--custom-color, #f472b6);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 4px;
    outline: none;
    transition: border-color 0.2s;
}

.blender-custom-title-input:focus {
    border-bottom-color: var(--custom-color, #ec4899);
}

.blender-custom-textarea {
    width: 100%;
    min-height: 55px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 11px;
    line-height: 1.4;
    padding: 6px 8px;
    resize: vertical;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.blender-custom-textarea:focus {
    border-color: var(--custom-color, #ec4899);
}

.blender-custom-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    gap: 6px;
}

.blender-color-palette {
    display: flex;
    align-items: center;
    gap: 4px;
}

.blender-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.15s ease;
}

.blender-color-dot:hover {
    transform: scale(1.3);
}

.blender-color-dot.active {
    border: 2px solid #ffffff;
    box-shadow: 0 0 6px currentColor;
}

/* Barra de Herramientas Flotante de Zoom y Navegación (Bottom Right) */
.blender-floating-toolbar {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 30px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.blender-tool-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.blender-tool-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    transform: scale(1.08);
}

.blender-zoom-badge {
    font-size: 11px;
    font-weight: 700;
    color: #38bdf8;
    min-width: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 0 4px;
}

.blender-tool-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.14);
    margin: 0 2px;
}

/* Hit-area invisible para captura suave de hover en conexiones SVG */
.blender-conn-hit-area {
    pointer-events: stroke !important;
    cursor: pointer;
}

.blender-conn-group:hover .blender-svg-line {
    stroke-width: 4.8px !important;
    opacity: 1 !important;
}

/* Pop-up sutil y compacto para conexiones en la Pizarra Blender */
.blender-link-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 2147483647 !important;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(6, 182, 212, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #f8fafc;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform: translateY(2px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blender-link-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

[data-theme="light"] .blender-link-tooltip {
    background: rgba(255, 255, 255, 0.96);
    border-color: #cbd5e1;
    color: #0f172a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   BLENDER (FASE 6) EN MODO CLARO (BRIGHT MODE)
   ========================================================================== */
[data-theme="light"] .blender-dashboard-container,
[data-theme="light"] .blender-canvas-viewport {
    background-color: #f8fafc !important;
    background-image:
        radial-gradient(rgba(0, 0, 0, 0.08) 1.2px, transparent 1.2px),
        radial-gradient(rgba(0, 0, 0, 0.03) 1.2px, transparent 1.2px) !important;
}

[data-theme="light"] .blender-tier-lane {
    border-color: rgba(0, 0, 0, 0.1) !important;
    background: rgba(0, 0, 0, 0.015) !important;
}

[data-theme="light"] .blender-tier-label {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .blender-floating-card {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .blender-floating-card:hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .blender-card-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

[data-theme="light"] .blender-card-tag {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

[data-theme="light"] .blender-floating-toolbar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .blender-tool-btn {
    color: #475569 !important;
}

[data-theme="light"] .blender-tool-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .blender-tool-divider {
    background: #cbd5e1 !important;
}

[data-theme="light"] .blender-custom-block {
    background: #ffffff !important;
    border-color: #ec4899 !important;
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.12) !important;
}

[data-theme="light"] .blender-custom-textarea {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] input[type="text"],
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #94a3b8 !important;
    font-weight: 500 !important;
}

[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] select:focus {
    background: #ffffff !important;
    border-color: #00bcd4 !important;
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.2) !important;
}

[data-theme="light"] .btn-primary,
[data-theme="light"] #btn-search {
    background: #00bcd4 !important;
    color: #ffffff !important;
    border: 1px solid #00acc1 !important;
    box-shadow: 0 4px 14px rgba(0, 188, 212, 0.35) !important;
    font-weight: 700 !important;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] #btn-search:hover {
    background: #00acc1 !important;
}

[data-theme="light"] .history-item.active {
    background: linear-gradient(90deg, rgba(0, 188, 212, 0.12) 0%, rgba(0, 188, 212, 0.02) 100%) !important;
    border-color: rgba(0, 188, 212, 0.4) !important;
    border-left: 3px solid #00bcd4 !important;
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.14) !important;
}

[data-theme="light"] .history-item.active .material-icons-outlined {
    color: #00bcd4 !important;
}

[data-theme="light"] .history-item.active .history-drug {
    color: #00838f !important;
    font-weight: 700 !important;
}

[data-theme="light"] .history-item.active .history-area {
    color: #555555 !important;
}

[data-theme="light"] .history-item.new-item-highlight {
    animation: historyItemNewPulseLight 3.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes historyItemNewPulseLight {
    0% {
        background: linear-gradient(90deg, rgba(197, 225, 165, 0.45) 0%, rgba(0, 188, 212, 0.2) 100%) !important;
        border-color: #aed581 !important;
        border-left: 3px solid #7cb342 !important;
        box-shadow: 0 0 16px rgba(124, 179, 66, 0.35) !important;
        transform: translateY(-2px) scale(1.015);
    }

    25% {
        background: linear-gradient(90deg, rgba(0, 188, 212, 0.2) 0%, rgba(0, 188, 212, 0.06) 100%) !important;
        border-color: rgba(0, 188, 212, 0.5) !important;
        border-left: 3px solid #00bcd4 !important;
        box-shadow: 0 0 14px rgba(0, 188, 212, 0.25) !important;
        transform: translateY(0) scale(1);
    }

    100% {
        background: linear-gradient(90deg, rgba(0, 188, 212, 0.12) 0%, rgba(0, 188, 212, 0.02) 100%) !important;
        border-color: rgba(0, 188, 212, 0.4) !important;
        border-left: 3px solid #00bcd4 !important;
        box-shadow: 0 2px 8px rgba(0, 188, 212, 0.14) !important;
    }
}

[data-theme="light"] .fda-table th {
    background: #f8fafc !important;
    color: #1a237e !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-weight: 700 !important;
}

[data-theme="light"] .fda-table td {
    border-bottom: 1px solid #f1f5f9 !important;
    color: #333333 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   PHARMAX BRIGHT MODE: BOTONES DE ACCIÓN Y PASTILLAS SEMÁNTICAS (PASTEL)
   ────────────────────────────────────────────────────────────────────────── */
/* Botón 'Ver E-PICOT' en Púrpura/Violeta (#8E24AA) */
[data-theme="light"] .btn-picot-trigger,
[data-theme="light"] .btn-inspector-run-epicot,
[data-theme="light"] .btn-epicot-full-audit {
    background: rgba(142, 36, 170, 0.08) !important;
    color: #8e24aa !important;
    border: 1px solid rgba(142, 36, 170, 0.3) !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] .btn-picot-trigger:hover,
[data-theme="light"] .btn-inspector-run-epicot:hover,
[data-theme="light"] .btn-epicot-full-audit:hover {
    background: #8e24aa !important;
    color: #ffffff !important;
    border-color: #8e24aa !important;
    box-shadow: 0 2px 8px rgba(142, 36, 170, 0.3) !important;
}

/* Botones 'Detalles' y de Inspección en Cián (#00BCD4 / #00838F) */
[data-theme="light"] .btn-inspect-phase,
[data-theme="light"] .btn-row-details,
[data-theme="light"] .btn-table-action-details,
[data-theme="light"] .badge-pub-doi {
    background: rgba(0, 188, 212, 0.1) !important;
    color: #00838f !important;
    border: 1px solid rgba(0, 188, 212, 0.35) !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] .btn-inspect-phase:hover,
[data-theme="light"] .btn-row-details:hover,
[data-theme="light"] .btn-table-action-details:hover,
[data-theme="light"] .badge-pub-doi:hover {
    background: #00bcd4 !important;
    color: #ffffff !important;
    border-color: #00acc1 !important;
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3) !important;
}

/* Códigos Identificados (NCTs, Acrónimos, etc.): Naranja Pastel (#FFD180) */
[data-theme="light"] .blender-simple-code-pill,
[data-theme="light"] .blender-table-code-pill,
[data-theme="light"] .badge-pub-nct,
[data-theme="light"] .badge-p3-acronym {
    background: #ffd180 !important;
    color: #8d4004 !important;
    border: 1px solid #ffb74d !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

/* Indicador de Conexión / Contador de Vínculos: Magenta Neón / Rosa Pastel */
[data-theme="light"] .blender-conn-counter-badge,
[data-theme="light"] #blender-connections-badge {
    background: rgba(244, 143, 177, 0.18) !important;
    border: 1.5px solid #f48fb1 !important;
    color: #c2185b !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(244, 143, 177, 0.35) !important;
}

/* Alta Calidad / Calidad Metodológica: Verde Pastel (#C5E1A5) */
[data-theme="light"] .badge-high-quality,
[data-theme="light"] .triage-star-badge {
    background: #c5e1a5 !important;
    color: #2e5618 !important;
    border: 1px solid #aed581 !important;
    font-weight: 600 !important;
}

/* Guías Clínicas / Categoría: Azul Pastel (#B3E5FC) */
[data-theme="light"] .badge-p3-cond,
[data-theme="light"] .badge-p3-sponsor {
    background: #b3e5fc !important;
    color: #01579b !important;
    border: 1px solid #81d4fa !important;
    font-weight: 600 !important;
}

/* Botón Principal Blender: Magic Gradient Turquesa / Cián */
[data-theme="light"] #btn-blender-run-cross-analysis {
    background: linear-gradient(135deg, #00bcd4, #0097a7) !important;
    color: #ffffff !important;
    border: 1px solid #00acc1 !important;
    box-shadow: 0 4px 14px rgba(0, 188, 212, 0.35) !important;
    font-weight: 700 !important;
}

[data-theme="light"] #btn-blender-run-cross-analysis:hover {
    background: linear-gradient(135deg, #00acc1, #00838f) !important;
    box-shadow: 0 6px 18px rgba(0, 188, 212, 0.45) !important;
}

#btn-blender-run-cross-analysis.chemical-btn-loading {
    min-width: 140px;
    white-space: nowrap;
    justify-content: center;
    gap: 6px;
}

#btn-blender-run-cross-analysis.chemical-btn-loading .blender-btn-label {
    display: inline !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* ──────────────────────────────────────────────────────────────────────────
   MODO CLARO - X2 (MONITOR DE EMPRESAS: VIOLETA MÁS OSCURO Y INTENSO)
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .app-switcher-btn.active#btn-switch-x2,
[data-theme="light"] .app-switcher-btn#btn-switch-x2:hover {
    background: rgba(91, 33, 182, 0.14) !important;
    color: #5b21b6 !important;
    border-color: rgba(91, 33, 182, 0.4) !important;
    font-weight: 700 !important;
}

[data-theme="light"] #view-x2,
[data-theme="light"] .view-x2 {
    background: #faf5ff;
}

/* X2: Cabeceras y Acordeones en Violeta (#f3e8ff / #5b21b6) */
[data-theme="light"] .x2-header>div {
    background: #f3e8ff !important;
    border: 1px solid rgba(91, 33, 182, 0.35) !important;
    box-shadow: 0 2px 8px rgba(91, 33, 182, 0.08) !important;
}

[data-theme="light"] .x2-header .x2-title span {
    color: #3b0764 !important;
    font-weight: 700 !important;
}

[data-theme="light"] .x2-section-header {
    background: #f3e8ff !important;
    border: 1px solid rgba(91, 33, 182, 0.3) !important;
}

[data-theme="light"] .x2-section-header h3 {
    color: #3b0764 !important;
    font-weight: 700 !important;
}

[data-theme="light"] .x2-section-header h3 .material-icons-outlined,
[data-theme="light"] .x2-section-header .material-icons-outlined {
    color: #5b21b6 !important;
}

[data-theme="light"] .view-x2 .x2-header,
[data-theme="light"] .x2-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#x2-btn-iniciar,
[data-theme="light"] #x2-btn-iniciar {
    border: none !important;
    outline: none !important;
}

[data-theme="light"] .x2-section,
[data-theme="light"] .x2-config-body,
[data-theme="light"] .x2-busqueda-body,
[data-theme="light"] .x2-table-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(91, 33, 182, 0.22) !important;
    box-shadow: 0 4px 16px rgba(91, 33, 182, 0.05) !important;
    color: #000000 !important;
}

[data-theme="light"] .x2-table thead th {
    background: #f3e8ff !important;
    color: #3b0764 !important;
    border-bottom: 2px solid rgba(91, 33, 182, 0.3) !important;
    font-weight: 700 !important;
}

[data-theme="light"] .x2-table tbody tr {
    background: #ffffff !important;
    border-bottom: 1px solid #e9d5ff !important;
    color: #000000 !important;
}

[data-theme="light"] .x2-table tbody tr td {
    color: #000000 !important;
}

[data-theme="light"] .x2-table tbody tr:hover {
    background: #f3e8ff !important;
}

[data-theme="light"] .x2-badge-source {
    background: rgba(91, 33, 182, 0.14) !important;
    color: #4c1d95 !important;
    border: 1px solid rgba(91, 33, 182, 0.35) !important;
    font-weight: 700 !important;
}

[data-theme="light"] .x2-btn-monitorear,
[data-theme="light"] .btn-x2-primary {
    background: linear-gradient(135deg, #5b21b6, #4c1d95) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

[data-theme="light"] #x2-btn-settings {
    background: rgba(91, 33, 182, 0.1) !important;
    color: #5b21b6 !important;
    border-color: rgba(91, 33, 182, 0.35) !important;
    font-weight: 600 !important;
}

[data-theme="light"] #x2-history-list .history-item.active {
    background: rgba(91, 33, 182, 0.15) !important;
    border-color: #5b21b6 !important;
    color: #3b0764 !important;
    font-weight: 700 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   MODO CLARO - X3 (PUBMED READER & PIZARRA CONEXIONES EN BLANCO Y LETRAS NEGRAS)
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .app-switcher-btn.active#btn-switch-x3,
[data-theme="light"] .app-switcher-btn#btn-switch-x3:hover {
    background: rgba(4, 120, 87, 0.14) !important;
    color: #047857 !important;
    border-color: rgba(4, 120, 87, 0.4) !important;
    font-weight: 700 !important;
}

[data-theme="light"] #view-x3,
[data-theme="light"] .view-x3 {
    background: #ecfdf5;
}

[data-theme="light"] .x3-header-panel,
[data-theme="light"] .x3-card,
[data-theme="light"] .x3-pdf-sidebar,
[data-theme="light"] .x3-chat-container,
[data-theme="light"] .x3-tab-btn-container {
    background: #ffffff !important;
    border: 1px solid rgba(4, 120, 87, 0.22) !important;
    box-shadow: 0 4px 16px rgba(4, 120, 87, 0.05) !important;
    color: #000000 !important;
}

/* X3: Pizarra de Conexiones en Fondo Blanco y Letras Negras Absolutas */
[data-theme="light"] #x3-connections-panel,
[data-theme="light"] #x3-pizarra-canvas,
[data-theme="light"] #x3-pizarra-inner {
    background: #ffffff !important;
}

[data-theme="light"] #x3-pizarra-nodes-container {
    background: transparent !important;
}

[data-theme="light"] .x3-pizarra-line,
[data-theme="light"] #x3-pizarra-svg path {
    stroke: #047857 !important;
    stroke-width: 3px !important;
    stroke-dasharray: 6 4 !important;
    opacity: 1 !important;
}

[data-theme="light"] #x3-pizarra-arrow path {
    fill: #047857 !important;
}

[data-theme="light"] .x3-connection-label {
    background: #047857 !important;
    color: #ffffff !important;
    border: 1px solid #064e3b !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    font-weight: 700 !important;
}

[data-theme="light"] .x3-pizarra-header,
[data-theme="light"] #x3-pizarra-status-bar {
    background: #ecfdf5 !important;
    border-bottom: 1px solid rgba(4, 120, 87, 0.2) !important;
    color: #000000 !important;
}

[data-theme="light"] #x3-pizarra-status,
[data-theme="light"] #x3-pizarra-empty-message div,
[data-theme="light"] #x3-pizarra-empty-message span {
    color: #000000 !important;
}

[data-theme="light"] .x3-pizarra-node {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .x3-pizarra-node .node-content,
[data-theme="light"] .x3-pizarra-node div,
[data-theme="light"] .x3-pizarra-node p,
[data-theme="light"] .x3-pizarra-node span,
[data-theme="light"] .x3-pizarra-node strong,
[data-theme="light"] .x3-pizarra-node em {
    color: #000000 !important;
    font-weight: 700 !important;
}

[data-theme="light"] .node-rectangle {
    background: rgba(236, 253, 245, 0.98) !important;
    border: 2px solid #047857 !important;
}

[data-theme="light"] .node-circle {
    background: rgba(243, 232, 255, 0.98) !important;
    border: 2px solid #5b21b6 !important;
}

[data-theme="light"] .node-text {
    background: rgba(253, 242, 248, 0.98) !important;
    border: 2px dashed #be185d !important;
}

/* Toolbar emergente de cada nodo en Bright Mode (fondo verde esmeralda y botones blancos visibles) */
[data-theme="light"] .node-hover-toolbar {
    background: #047857 !important;
    border: 1.5px solid #064e3b !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] .node-hover-toolbar .toolbar-btn,
[data-theme="light"] .node-hover-toolbar .toolbar-btn .material-icons-outlined,
[data-theme="light"] .node-hover-toolbar .toolbar-btn span {
    color: #ffffff !important;
}

[data-theme="light"] .node-hover-toolbar .toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

[data-theme="light"] .x3-pdf-viewport,
[data-theme="light"] .x3-pdf-main-area {
    background: #cbd5e1 !important;
}

[data-theme="light"] .x3-article-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #000000 !important;
}

[data-theme="light"] .x3-article-card:hover {
    border-color: rgba(4, 120, 87, 0.45) !important;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.1) !important;
}

[data-theme="light"] .x3-article-title,
[data-theme="light"] .x3-title-toggle-abstract,
[data-theme="light"] .x3-title-cell-content {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Dynamic Abstract Font Size (X3 & X1 Phase 4) */
:root {
    --abstract-font-size: 13px;
}

.abstract-cell,
.x3-abstract-content-text,
.guide-abstract,
#x3-tbody-results .abstract-cell,
#table-phase-4 .abstract-cell {
    font-size: var(--abstract-font-size, 13px) !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;
}

/* X3: Colapso vertical y desaparición suave de filas excluidas */
.x3-row-collapsing {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transform: scaleY(0) !important;
    transform-origin: top !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

.x3-row-collapsing td,
.x3-row-collapsing th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    border: none !important;
    opacity: 0 !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* X3: Tabla de Resultados de PubMed – Cabecera Fija (Sticky Header) */
.x3-table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
}

.x3-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
    background: var(--bg-panel, #0f172a) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.x3-table th:last-child,
.x3-table td:last-child {
    padding-right: 16px !important;
}

.x3-col-resizer {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    user-select: none;
    z-index: 20;
    transition: background 0.15s ease;
}

.x3-col-resizer:hover,
.x3-col-resizer.resizing {
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.x3-authors-container {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    transition: max-height 0.25s ease;
}

.x3-authors-container.expanded {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
}

.x3-btn-authors-more {
    background: none;
    border: none;
    color: #10b981;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0 0 0;
    line-height: 1;
    display: inline-block;
    transition: color 0.15s ease;
}

.x3-btn-authors-more:hover {
    color: #34d399;
    text-decoration: underline;
}

[data-theme="light"] .x3-table thead th,
[data-theme="light"] #x3-results-container table thead th,
[data-theme="light"] #x3-results-container table thead tr {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border-bottom: 2px solid rgba(4, 120, 87, 0.3) !important;
    font-weight: 700 !important;
}

[data-theme="light"] .x3-table tbody tr,
[data-theme="light"] #x3-results-container table tbody tr,
[data-theme="light"] #x3-tbody-results tr,
[data-theme="light"] #x3-tbody-results td {
    background: #ffffff !important;
    color: #000000 !important;
}

[data-theme="light"] .x3-table tbody tr:hover,
[data-theme="light"] #x3-tbody-results tr:hover {
    background: #f0fdf4 !important;
}

[data-theme="light"] #x3-th-year,
[data-theme="light"] #x3-th-star {
    color: #047857 !important;
}

[data-theme="light"] #x3-results-table td,
[data-theme="light"] #x3-results-table th,
[data-theme="light"] .x3-table td,
[data-theme="light"] .x3-table th {
    color: #000000 !important;
}

[data-theme="light"] .x3-article-journal,
[data-theme="light"] .x3-article-authors,
[data-theme="light"] .x3-article-pmid,
[data-theme="light"] .x3-article-abstract {
    color: #000000 !important;
}

[data-theme="light"] .x3-doi-item {
    background: rgba(236, 253, 245, 0.95) !important;
    border: 1px solid rgba(4, 120, 87, 0.3) !important;
    color: #022c22 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .x3-doi-item span {
    color: #022c22 !important;
}

[data-theme="light"] .x3-chat-msg.bot {
    background: #d1fae5 !important;
    border: 1px solid rgba(4, 120, 87, 0.3) !important;
    color: #022c22 !important;
}

[data-theme="light"] .x3-chat-msg.bot p,
[data-theme="light"] .x3-chat-msg.bot div {
    color: #022c22 !important;
}

[data-theme="light"] .x3-chat-msg.user {
    background: linear-gradient(135deg, #047857, #064e3b) !important;
    color: #ffffff !important;
}

[data-theme="light"] #x3-btn-settings {
    background: rgba(4, 120, 87, 0.1) !important;
    color: #047857 !important;
    border-color: rgba(4, 120, 87, 0.35) !important;
    font-weight: 600 !important;
}

[data-theme="light"] #x3-btn-save-search,
[data-theme="light"] #x3-btn-new-search {
    background: rgba(4, 120, 87, 0.1) !important;
    color: #047857 !important;
    border-color: rgba(4, 120, 87, 0.35) !important;
    font-weight: 600 !important;
}

[data-theme="light"] #x3-history-list .history-item {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #000000 !important;
}

[data-theme="light"] #x3-history-list .history-item span,
[data-theme="light"] #x3-history-list .history-item div {
    color: #000000 !important;
}

[data-theme="light"] #x3-history-list .history-item.active {
    background: rgba(4, 120, 87, 0.14) !important;
    border-color: #047857 !important;
    color: #022c22 !important;
    font-weight: 700 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   BOTONES DE RAYO POR MÓDULO (X1: CELESTE | X2: VIOLETA | X3: VERDE)
   ────────────────────────────────────────────────────────────────────────── */

/* X1 - Botón Rayo Celeste (#0284c7 / #0369a1) */
#btn-start {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(14, 165, 233, 0.4) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
}

#btn-start:hover {
    background: linear-gradient(135deg, #0369a1, #075985) !important;
}

[data-theme="light"] #btn-start {
    background: linear-gradient(135deg, #075985, #0369a1) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(7, 89, 133, 0.35) !important;
}

[data-theme="light"] #btn-start:hover {
    background: linear-gradient(135deg, #0c4a6e, #075985) !important;
}

/* X2 - Botón Rayo Violeta (#7c3aed / #5b21b6) */
#x2-btn-iniciar {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    color: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

#x2-btn-iniciar:hover {
    background: linear-gradient(135deg, #5b21b6, #4c1d95) !important;
}

[data-theme="light"] #x2-btn-iniciar {
    background: linear-gradient(135deg, #5b21b6, #4c1d95) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(91, 33, 182, 0.35) !important;
}

[data-theme="light"] #x2-btn-iniciar:hover {
    background: linear-gradient(135deg, #3b0764, #5b21b6) !important;
}

/* X3 - Botón Rayo Verde (#10b981 / #047857) */
#x3-btn-search {
    background: linear-gradient(135deg, #10b981, #047857) !important;
    color: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

#x3-btn-search:hover {
    background: linear-gradient(135deg, #047857, #064e3b) !important;
}

[data-theme="light"] #x3-btn-search {
    background: linear-gradient(135deg, #047857, #064e3b) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35) !important;
}

[data-theme="light"] #x3-btn-search:hover {
    background: linear-gradient(135deg, #064e3b, #022c22) !important;
}

/* ─── RESPONSIVE: Phase Tabs ───────────────────────────────────────────── */
@media (max-width: 1100px) {
    .phase-tabs {
        gap: 6px;
        padding: 3px;
    }

    .tab-btn {
        font-size: 12px;
        padding: 9px 10px;
        gap: 5px;
    }

    .step-num {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
}

@media (max-width: 900px) {
    .phase-tabs {
        gap: 3px;
        padding: 2px;
    }

    .tab-btn {
        font-size: 10px;
        padding: 7px 7px;
        gap: 3px;
        border-radius: 6px;
    }

    .step-num {
        width: 17px;
        height: 17px;
        font-size: 9px;
    }
}

@media (max-width: 700px) {
    .phase-tabs {
        gap: 2px;
        padding: 2px;
    }

    .tab-btn {
        font-size: 9px;
        padding: 5px 5px;
        gap: 2px;
    }

    .step-num {
        width: 14px;
        height: 14px;
        font-size: 8px;
    }
}

/* ==========================================================================
   Estilos del Visor de PDF Global y Pestañas Flotantes
   ========================================================================== */

#global-pdf-panel {
    display: none;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 101px;
    z-index: 2500;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
    transform: translateX(calc(100% + 110px));
    box-sizing: border-box;
    width: 60%;
}

#global-pdf-panel.collapsed {
    transform: translateX(calc(100% + 110px)) !important;
    opacity: 0;
    pointer-events: none;
}

#global-pdf-panel:not(.collapsed) {
    transform: translateX(0) !important;
    opacity: 1;
    pointer-events: auto;
}

/* Animación del pulso para el placeholder */
@keyframes pulse {

    0%,
    100% {
        opacity: 0.25;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.03);
    }
}

/* Contenedor de solapas flotantes */
#global-floating-tabs {
    transition: top 0.1s ease;
}

#global-floating-tabs.dragging {
    transition: none !important;
}

/* Mejorar visualmente las solapas flotantes */
.x3-toggle-tab {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 12px !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.x3-toggle-tab:hover {
    transform: scale(1.12) translate(-2px, 0);
    filter: brightness(1.2);
}

/* Chat de IA del PDF Global */
#global-pdf-chat-messages {
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Estilo para los mensajes del chat IA del PDF */
.global-pdf-chat-msg {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    animation: fadeIn 0.25s ease;
    margin-bottom: 4px;
}

.global-pdf-chat-msg.user {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #e2e8f0;
    align-self: flex-end;
    max-width: 85%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.global-pdf-chat-msg.ai {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    align-self: flex-start;
    max-width: 85%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Bienvenida de IA en el chat con contraste óptimo */
.x3-ai-welcome {
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    font-size: 12px;
    color: #e2e8f0 !important;
    line-height: 1.5;
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.x3-ai-welcome.pubmed {
    background: rgba(139, 92, 246, 0.08) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
}

/* Botón de pestañas del PDF Global */
.global-pdf-tab-btn {
    transition: all 0.2s ease;
    color: var(--text-muted) !important;
}

.global-pdf-tab-btn:hover {
    color: #10B981 !important;
    background: rgba(16, 185, 129, 0.04);
}

.global-pdf-tab-btn.active {
    color: #10B981 !important;
    border-bottom: 2px solid #10B981 !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.x3-panel-resizer:hover {
    background: #10B981 !important;
    opacity: 0.8;
}

/* ==========================================================================
   OPTIMIZACIÓN DE TODAS LAS TABLAS DE TODAS LAS FASES CUANDO LA BARRA DERECHA ESTÁ EXPANDIDA
   ========================================================================== */
.app-container.sidebar-right-expanded .results-panel,
.app-container.sidebar-right-expanded .view-sources-content,
.app-container.sidebar-right-expanded .table-responsive,
.app-container.sidebar-right-expanded .x2-table-wrapper,
.app-container.sidebar-right-expanded #results-accordion,
.app-container.sidebar-right-expanded .x1-body-container {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* El cuerpo y contenedor del acordeón DEBEN ser overflow: visible para que el header sticky de la subtabla funcione sin despegarse cuando está abierto */
.accordion-body.open,
.app-container.sidebar-right-expanded .accordion-body.open,
.app-container.sidebar-right-expanded .accordion-source.open,
.app-container.sidebar-right-expanded .accordion-source.open .subtable-wrapper {
    overflow: visible !important;
    max-height: none !important;
}

/* Cuando el acordeón NO está abierto, asegurar que se oculte y colapse totalmente aún con la barra derecha expandida */
.accordion-body:not(.open),
.app-container.sidebar-right-expanded .accordion-body:not(.open) {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    display: none !important;
}

/* Tabla de Fuentes en modo compacto (Sin scroll horizontal) */
.app-container.sidebar-right-expanded .modern-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 13px !important;
    table-layout: fixed !important;
}

.app-container.sidebar-right-expanded .modern-table th,
.app-container.sidebar-right-expanded .modern-table td {
    padding: 8px 10px !important;
    font-size: 13px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.app-container.sidebar-right-expanded .modern-table th:first-child,
.app-container.sidebar-right-expanded .modern-table td:first-child {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    text-align: center !important;
}

.app-container.sidebar-right-expanded .modern-table th:nth-child(2),
.app-container.sidebar-right-expanded .modern-table td:nth-child(2) {
    width: 155px !important;
    min-width: 140px !important;
    max-width: 180px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.app-container.sidebar-right-expanded .modern-table th:nth-child(3),
.app-container.sidebar-right-expanded .modern-table td:nth-child(3) {
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Tablas de Resultados y Subtablas (Fase 1, 2, 3, 4, 5) en modo compacto (100% ancho y sin scroll) */
.app-container.sidebar-right-expanded .accordion-body table.subtable,
.app-container.sidebar-right-expanded .x2-table,
.app-container.sidebar-right-expanded .x3-table,
.app-container.sidebar-right-expanded .fda-table,
.app-container.sidebar-right-expanded .pami-formula-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 11.5px !important;
    table-layout: fixed !important;
}

/* Ocultar columnas secundarias (Fecha, Detalles, etc.) cuando el panel derecho está abierto para evitar scroll horizontal */
.app-container.sidebar-right-expanded .subtable th.col-fecha,
.app-container.sidebar-right-expanded .subtable td.col-fecha,
.app-container.sidebar-right-expanded .subtable th.col-detalles,
.app-container.sidebar-right-expanded .subtable td.col-detalles,
.app-container.sidebar-right-expanded .subtable th.col-therapeutic_area,
.app-container.sidebar-right-expanded .subtable td.col-therapeutic_area,
.app-container.sidebar-right-expanded .subtable th.col-classe_terapeutica,
.app-container.sidebar-right-expanded .subtable td.col-classe_terapeutica,
.app-container.sidebar-right-expanded .subtable th.col-sponsor,
.app-container.sidebar-right-expanded .subtable td.col-sponsor {
    display: none !important;
}

/* Columnas de ancho controlado en modo panel derecho abierto */
.app-container.sidebar-right-expanded .subtable th.col-starred,
.app-container.sidebar-right-expanded .subtable td.col-starred {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 4px 2px !important;
    text-align: center !important;
}

.app-container.sidebar-right-expanded .subtable th.col-fase_estudio,
.app-container.sidebar-right-expanded .subtable td.col-fase_estudio {
    width: 60px !important;
    min-width: 50px !important;
    max-width: 70px !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

.app-container.sidebar-right-expanded .subtable th.col-estado,
.app-container.sidebar-right-expanded .subtable td.col-estado {
    width: 80px !important;
    min-width: 70px !important;
    max-width: 85px !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

.app-container.sidebar-right-expanded .subtable th.col-nct,
.app-container.sidebar-right-expanded .subtable td.col-nct {
    width: 90px !important;
    min-width: 80px !important;
    max-width: 95px !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

.app-container.sidebar-right-expanded .subtable th.col-nombre_guia,
.app-container.sidebar-right-expanded .subtable td.col-nombre_guia {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    padding: 6px 8px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.app-container.sidebar-right-expanded .subtable th.col-brand_name,
.app-container.sidebar-right-expanded .subtable td.col-brand_name {
    width: 35% !important;
    min-width: 0 !important;
    padding: 6px 8px !important;
}

.app-container.sidebar-right-expanded .subtable th.col-generic_name,
.app-container.sidebar-right-expanded .subtable td.col-generic_name {
    width: 35% !important;
    min-width: 0 !important;
    padding: 6px 8px !important;
}

.app-container.sidebar-right-expanded .subtable th.col-link,
.app-container.sidebar-right-expanded .subtable td.col-link {
    width: 75px !important;
    min-width: 65px !important;
    padding: 6px 4px !important;
    text-align: center !important;
}

.app-container.sidebar-right-expanded .accordion-body table.subtable>thead>tr>th,
.app-container.sidebar-right-expanded .accordion-body table.subtable>tbody>tr>td,
.app-container.sidebar-right-expanded .x2-table thead th,
.app-container.sidebar-right-expanded .x2-table tbody td,
.app-container.sidebar-right-expanded .x3-table thead th,
.app-container.sidebar-right-expanded .x3-table tbody td,
.app-container.sidebar-right-expanded .fda-table th,
.app-container.sidebar-right-expanded .fda-table td,
.app-container.sidebar-right-expanded .pami-formula-table th,
.app-container.sidebar-right-expanded .pami-formula-table td {
    padding: 6px 8px !important;
    font-size: 11.5px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.app-container.sidebar-right-expanded .accordion-body table.subtable th,
.app-container.sidebar-right-expanded .x2-table th,
.app-container.sidebar-right-expanded .x3-table th,
.app-container.sidebar-right-expanded .fda-table th,
.app-container.sidebar-right-expanded .pami-formula-table th {
    white-space: nowrap !important;
}

/* Badges, estados, banderas y elementos inline en modo compacto */
.app-container.sidebar-right-expanded .badge,
.app-container.sidebar-right-expanded .status-badge,
.app-container.sidebar-right-expanded .country-badge,
.app-container.sidebar-right-expanded [class*="status-"],
.app-container.sidebar-right-expanded [class*="badge-"] {
    white-space: nowrap !important;
    font-size: 9.5px !important;
    padding: 1px 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
}

/* Ajustes de cabeceras de fase y acordeones en modo compacto */
.app-container.sidebar-right-expanded .view-sources-header {
    gap: 6px !important;
    margin-bottom: 8px !important;
}

.app-container.sidebar-right-expanded .view-sources-header h3 {
    font-size: 13.5px !important;
}

.app-container.sidebar-right-expanded .accordion-header {
    padding: 0 10px !important;
    font-size: 11.5px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   CABECERA DE FILTROS Y CONTROLES DE RESULTADOS (VERSIÓN EXTENDIDA)
   ========================================================================== */
.header-filters,
#header-filters {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    max-width: 520px;
    margin: 0 10px;
}

.header-filter-search-box,
#header-filter-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

#filter-text {
    padding: 6px 12px;
    font-size: 12.5px;
    height: 34px;
    width: 240px;
    min-width: 160px;
    max-width: 320px;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

#filter-text:focus {
    width: 280px;
}

#results-count {
    display: none !important;
}

/* Botón Agregar Búsqueda en Fase 4 (Versión Extendida) */
#btn-add-search-phase4,
.btn-custom-add-phase4 {
    display: none;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    height: 34px;
    width: auto !important;
    max-width: max-content !important;
    white-space: nowrap;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    border: 1px solid rgba(139, 92, 246, 0.45);
    background: rgba(139, 92, 246, 0.12);
    color: #c4b5fd;
    cursor: pointer;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

#btn-add-search-phase4:hover,
.btn-custom-add-phase4:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.7);
    color: #ffffff;
}

#btn-add-search-phase4 .material-icons-outlined,
.btn-custom-add-phase4 .material-icons-outlined {
    font-size: 16px;
    color: #a78bfa;
}

/* ==========================================================================
   CABECERA COMPACTA CUANDO EL PANEL DERECHO ESTÁ DESPLEGADO (VERSIÓN REDUCIDA)
   ========================================================================== */
.app-container.sidebar-right-expanded .panel-header {
    padding: 6px 10px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    min-height: 42px !important;
}

.app-container.sidebar-right-expanded .panel-header h2 {
    font-size: 13px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.app-container.sidebar-right-expanded .header-filters:not(.is-hidden):not([style*="display: none"]),
.app-container.sidebar-right-expanded #header-filters:not(.is-hidden):not([style*="display: none"]) {
    margin: 0 !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.header-filters.is-hidden,
#header-filters.is-hidden,
.header-filters[style*="display: none"],
#header-filters[style*="display: none"] {
    display: none !important;
}

.app-container.sidebar-right-expanded .header-filter-search-box,
.app-container.sidebar-right-expanded #header-filter-search-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

.app-container.sidebar-right-expanded #filter-text {
    width: 110px !important;
    min-width: 70px !important;
    max-width: 130px !important;
    height: 28px !important;
    font-size: 11px !important;
    padding: 2px 7px !important;
}

.app-container.sidebar-right-expanded #results-count {
    font-size: 10px !important;
    line-height: 1.1 !important;
    padding-left: 2px !important;
    margin-top: 1px !important;
    color: var(--accent-secondary) !important;
    white-space: nowrap !important;
}

/* Respetar cuando results-count está oculto con display:none (por ejemplo en Fase 4) */
#results-count[style*="display: none"],
.app-container.sidebar-right-expanded #results-count[style*="display: none"] {
    display: none !important;
}

/* Botón Agregar Búsqueda en Modo Reducido */
.app-container.sidebar-right-expanded #btn-add-search-phase4,
.app-container.sidebar-right-expanded .btn-custom-add-phase4 {
    padding: 2px 7px !important;
    height: 28px !important;
    font-size: 10.5px !important;
    gap: 3px !important;
    width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
}

.app-container.sidebar-right-expanded #btn-add-search-phase4 .material-icons-outlined,
.app-container.sidebar-right-expanded .btn-custom-add-phase4 .material-icons-outlined {
    font-size: 14px !important;
}

/* Botón Zotero Settings en Modo Reducido */
.app-container.sidebar-right-expanded #btn-open-zotero-settings {
    height: 28px !important;
    padding: 2px 7px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
    gap: 3px !important;
}

.app-container.sidebar-right-expanded #btn-open-zotero-settings .material-icons-outlined {
    font-size: 14px !important;
}

/* Botón Exportar en Modo Reducido */
.app-container.sidebar-right-expanded #btn-export-trigger {
    height: 28px !important;
    padding: 2px 7px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
    gap: 3px !important;
}

/* Botones Fuentes y Resultados */
.app-container.sidebar-right-expanded .panel-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 3px !important;
    padding: 2px !important;
    margin-left: auto !important;
}

.app-container.sidebar-right-expanded .panel-actions .view-toggle {
    padding: 2px 6px !important;
    font-size: 10.5px !important;
    height: 26px !important;
    gap: 2px !important;
    white-space: nowrap !important;
}

.app-container.sidebar-right-expanded .panel-actions .view-toggle span.material-icons-outlined {
    font-size: 13px !important;
    margin-right: 2px !important;
}

/* ==========================================================================
   SUB-PANELES DE DETALLES DE FUENTES (FASES 1, 2, 3, 4)
   ========================================================================== */
.source-drawer-row {
    transition: all 0.2s ease-in-out;
}

.source-drawer-row td {
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="light"] .source-drawer-row td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.source-drawer-row a:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
    transition: all 0.15s ease;
}

/* ==========================================================================
   PANTALLA COMPLETA NATIVA PARA EL VISOR DE PDF (MONITOR COMPLETO)
   ========================================================================== */
#global-pdf-subpanel:fullscreen,
#global-pdf-panel:fullscreen,
#global-pdf-subpanel:-webkit-full-screen,
#global-pdf-panel:-webkit-full-screen,
#global-pdf-subpanel:-moz-full-screen,
#global-pdf-panel:-moz-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    background: #0f172a !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   BOTONES DE LA BARRA DE OPCIONES DE PIZARRA BLENDER (AGRANDADOS Y MODERNOS)
   ========================================================================== */
.blender-hdr-btn-lg {
    width: auto !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    user-select: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

.blender-hdr-btn-lg:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px);
}

.blender-hdr-btn-lg:active {
    transform: translateY(0px) scale(0.97);
}

/* Botón Destacado Magic Blender */
.blender-btn-magic {
    background: linear-gradient(135deg, #6366F1 0%, #06B6D4 50%, #a855f7 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 14px rgba(99, 102, 241, 0.45) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 4s ease infinite !important;
}

.blender-btn-magic:hover {
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.65), 0 0 12px rgba(6, 182, 212, 0.5) !important;
    transform: translateY(-1.5px) scale(1.02) !important;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Dropdown Inteligente de Herramientas de Edición */
.blender-tools-dropdown-container {
    position: relative !important;
    display: inline-flex !important;
}

.blender-tools-popup {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    background: rgba(15, 23, 42, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255,255,255,0.3) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 195px !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.blender-tools-dropdown-container:hover .blender-tools-popup,
.blender-tools-popup:hover,
.blender-tools-popup.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.blender-popup-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: all 0.15s ease !important;
}

.blender-popup-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(2px);
}

/* Botón Full Screen / Pantalla Dividida Mejorado */
.blender-fullscreen-btn-enhanced {
    background: rgba(6, 182, 212, 0.14) !important;
    border: 1.5px solid rgba(6, 182, 212, 0.45) !important;
    color: #22d3ee !important;
    font-weight: 700 !important;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.2) !important;
}

.blender-fullscreen-btn-enhanced:hover {
    background: rgba(6, 182, 212, 0.25) !important;
    border-color: #22d3ee !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(6, 182, 212, 0.45) !important;
}

/* Botón Icono Hub (Agregar a Pizarra) debajo de la estrella en todas las fases */
.btn-blender-pin-toggle {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    color: var(--text-muted, rgba(255, 255, 255, 0.35)) !important;
    transition: all 0.2s ease !important;
    margin-top: 3px !important;
}

.btn-blender-pin-toggle:hover {
    color: #ec4899 !important;
    transform: scale(1.15);
    filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.5));
}

.btn-blender-pin-toggle.is-pinned {
    color: #ec4899 !important;
    filter: drop-shadow(0 0 7px rgba(236, 72, 153, 0.7)) !important;
}

/* ==========================================================================
   PANTALLA DIVIDIDA EN FULL SCREEN (LADO DERECHO: INSPECTOR & VISOR PDF)
   ========================================================================== */
.blender-fs-inspector {
    width: 480px;
    min-width: 320px;
    max-width: 55vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(13, 19, 33, 0.97);
    border-left: 1.5px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(24px);
    z-index: 50;
    transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.blender-fs-inspector.is-expanded {
    width: 50vw !important;
}

.blender-fs-inspector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
    min-height: 42px;
}

.blender-fs-inspector-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px;
    border-radius: 8px;
}

.blender-fs-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.blender-fs-tab-btn:hover {
    color: #ffffff;
}

.blender-fs-tab-btn.active {
    background: var(--accent-primary, #6366f1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.blender-fs-inspector-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.15s ease;
}

.blender-fs-inspector-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.blender-fs-inspector-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blender-inspector-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 260px;
    text-align: center;
    padding: 30px 20px;
}

.blender-fs-resizer {
    width: 6px;
    cursor: col-resize;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.blender-fs-resizer:hover {
    background: var(--accent-secondary, #06b6d4);
}

.blender-header-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Modo Pantalla Completa para la Pizarra de Conexiones Blender */
#x1-blender-panel:fullscreen,
#x1-blender-panel:-webkit-full-screen,
#x1-blender-panel:-moz-full-screen,
#x1-blender-panel:-ms-fullscreen,
#x1-blender-panel.fullscreen-mode {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #080c16 !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   MODAL DE DETALLE SIMPLIFICADO Y CÓDIGOS VINCULANTES EN PIZARRA BLENDER
   ========================================================================== */
.blender-detail-modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(4, 7, 18, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 2147483647 !important;
    /* Capa superior máxima en modo normal y pantalla completa */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    animation: blenderModalFadeIn 0.18s ease-out;
}

.blender-detail-modal-overlay.closing {
    animation: blenderModalFadeOut 0.15s ease-in forwards;
}

@keyframes blenderModalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes blenderModalFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.blender-detail-modal-container {
    width: 100%;
    max-width: min(640px, 94%);
    max-height: min(88vh, 92%);
    background: #0b1120;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(6, 182, 212, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: blenderModalScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.blender-detail-modal-overlay.closing .blender-detail-modal-container {
    animation: blenderModalScaleOut 0.15s ease-in forwards;
}

@keyframes blenderModalScaleIn {
    from {
        transform: scale(0.95) translateY(8px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes blenderModalScaleOut {
    from {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    to {
        transform: scale(0.96) translateY(6px);
        opacity: 0;
    }
}

.blender-simple-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
}

.blender-simple-sec-title {
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.blender-simple-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.blender-simple-link-row:hover {
    background: rgba(15, 23, 42, 1);
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.blender-simple-code-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.4);
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.blender-simple-code-pill:hover {
    background: rgba(6, 182, 212, 0.25);
    border-color: #22d3ee;
    transform: translateY(-1px);
}

.blender-simple-peer-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
}

.blender-simple-peer-title {
    font-size: 12px;
    color: #f1f5f9;
    font-weight: 500;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blender-simple-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.blender-simple-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.blender-simple-table tr:last-child {
    border-bottom: none;
}

.blender-td-label {
    width: 32%;
    padding: 6px 8px;
    font-weight: 600;
    color: #94a3b8;
    vertical-align: top;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.blender-td-value {
    padding: 6px 8px;
    color: #f1f5f9;
    vertical-align: top;
    line-height: 1.45;
}

.blender-td-value.highlight-val {
    color: #38bdf8;
    font-weight: 600;
}

.blender-table-code-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
    margin: 2px 4px 2px 0;
    cursor: pointer;
    transition: all 0.15s ease;
}

.blender-table-code-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.blender-table-code-pill.is-binding {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    color: #34d399;
}

.blender-table-code-pill.is-binding:hover {
    background: rgba(16, 185, 129, 0.28);
    border-color: #34d399;
}

.blender-table-code-pill .binding-dot {
    font-size: 9px;
    font-weight: 800;
    color: #34d399;
    margin-left: 3px;
    text-transform: uppercase;
}

.blender-simple-textbox {
    font-size: 11.5px;
    line-height: 1.55;
    color: #cbd5e1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 8px 12px;
    max-height: 130px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.blender-text-code-mark {
    background: rgba(6, 182, 212, 0.3);
    color: #38bdf8;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, monospace;
    border-bottom: 2px solid #06b6d4;
    padding: 1px 4px;
    border-radius: 3px;
}

[data-theme="light"] .blender-detail-modal-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .blender-detail-modal-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .blender-detail-modal-header h3 {
    color: #1a237e !important;
    font-weight: 700 !important;
}

[data-theme="light"] .blender-detail-modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .blender-simple-section {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
}

[data-theme="light"] .blender-simple-section-title {
    color: #1a237e !important;
    font-weight: 700 !important;
}

[data-theme="light"] .blender-simple-link-row {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
}

[data-theme="light"] .blender-td-label {
    color: #64748b !important;
    font-weight: 700 !important;
}

[data-theme="light"] .blender-td-value {
    color: #333333 !important;
}

[data-theme="light"] .blender-simple-peer-title {
    color: #1a237e !important;
    font-weight: 600 !important;
}

[data-theme="light"] .blender-simple-textbox {
    background: #f8fafc !important;
    color: #333333 !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .blender-text-code-mark {
    background: #ffd180 !important;
    color: #8d4004 !important;
    border-bottom: 2px solid #ffb74d !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   SUBTABLA DE FUENTES (FASE 1 Y FASE 5)
   ========================================================================== */
.drawer-row-item {
    transition: background 0.15s ease;
}

.drawer-row-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .drawer-row-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* ==========================================================================
   MODAL DE ANÁLISIS E-PICOT Y BIOESTADÍSTICA
   ========================================================================== */
dialog#modal-picot-analysis {
    display: none;
}

dialog#modal-picot-analysis[open] {
    display: flex !important;
    flex-direction: column;
}

dialog#modal-picot-analysis::backdrop {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
}

/* ==========================================================================
   FASE 4 (PUBMED / BIBLIOGRAFÍA) — COLUMNA IZQUIERDA Y BOTONES
   ========================================================================== */
.pubmed-article-title {
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary, #f8fafc);
    line-height: 1.45;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

[data-theme="light"] .pubmed-article-title {
    color: #0f172a;
}

.badge-pub-year,
.badge-pub-doi,
.badge-pub-nct {
    transition: all 0.2s ease;
}

.badge-pub-doi:hover {
    background: rgba(6, 182, 212, 0.2) !important;
    border-color: rgba(6, 182, 212, 0.6) !important;
    color: #38bdf8 !important;
    transform: translateY(-1px);
}

.btn-picot-trigger,
.btn-open-pdf-trigger,
.btn-get-pdf-trigger {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.btn-picot-trigger:hover:not(:disabled),
.btn-open-pdf-trigger:hover,
.btn-get-pdf-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-picot-trigger:active:not(:disabled),
.btn-open-pdf-trigger:active,
.btn-get-pdf-trigger:active {
    transform: translateY(0);
}

.pubmed-row-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    width: fit-content;
    min-width: 140px;
}

tr.row-active-inspecting {
    background: rgba(16, 185, 129, 0.09) !important;
    border-left: 3px solid #10b981 !important;
    box-shadow: inset 0 0 16px rgba(16, 185, 129, 0.08);
    transition: background 0.3s ease, border-left 0.3s ease;
}

[data-theme="light"] tr.row-active-inspecting {
    background: rgba(16, 185, 129, 0.12) !important;
    border-left: 3px solid #059669 !important;
}

/* Clinical Trials v2 Details & Publications */
.btn-ct-details {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: #22d3ee;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ct-details:hover {
    background: rgba(6, 182, 212, 0.25);
    border-color: rgba(6, 182, 212, 0.7);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
    transform: translateY(-1px);
}

.ct-ref-tab-btn {
    transition: all 0.15s ease;
}

.ct-ref-tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}

.btn-copy-single-doi {
    opacity: 0.7;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.btn-copy-single-doi:hover {
    opacity: 1;
    transform: scale(1.15);
    color: #38bdf8 !important;
}

/* ==========================================================================
   PANTALLA COMPLETA REAL PARA LA PIZARRA BLENDER (100VW x 100VH)
   ========================================================================== */
#x1-blender-panel:fullscreen,
#x1-blender-panel.fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 999999 !important;
    background: #080c16 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   ANIMACIÓN MÁGICA: VUELO DESDE EL BOTÓN BLENDER HASTA EL RAYO
   ========================================================================== */
.blender-flying-magic-orb {
    position: fixed;
    pointer-events: none;
    z-index: 1000000;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec4899, #6366f1, #06b6d4);
    box-shadow: 0 0 22px rgba(6, 182, 212, 0.95), 0 0 40px rgba(236, 72, 153, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    will-change: transform, opacity;
    transform: translate(-50%, -50%);
}

.blender-magic-sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8, 0 0 16px #ec4899;
    will-change: transform, opacity;
    transform: translate(-50%, -50%);
    animation: sparkleFade 0.45s ease-out forwards;
}

@keyframes sparkleFade {
    0% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.95;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }
}

@keyframes boltEnergyPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(6, 182, 212, 0);
    }

    35% {
        transform: scale(1.42) rotate(-8deg);
        box-shadow: 0 0 32px #06b6d4, 0 0 55px #ec4899;
        filter: brightness(1.55);
    }

    65% {
        transform: scale(1.25) rotate(5deg);
        box-shadow: 0 0 25px #6366f1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 0 14px rgba(6, 182, 212, 0.45);
    }
}

.bolt-energy-burst {
    animation: boltEnergyPulse 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

/* ==========================================================================
   FASE 3: ELEMENTOS AGRANDADOS, BADGES CLÍNICOS Y AUDITORÍA E-PICOT PREVIEW
   ========================================================================== */

.phase3-trial-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.45;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    transition: color 0.15s ease;
}

.phase3-trial-title:hover {
    color: #38bdf8;
}

.phase3-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.phase3-epicot-strip {
    margin-top: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(6, 182, 212, 0.06) 100%);
    border: 1px solid rgba(168, 85, 247, 0.28);
    border-left: 3px solid #a855f7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.phase3-epicot-strip:hover {
    border-color: rgba(168, 85, 247, 0.55);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.14) 0%, rgba(6, 182, 212, 0.1) 100%);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.2);
}

.epicot-chip-p,
.epicot-chip-i,
.epicot-chip-c,
.epicot-chip-o,
.epicot-chip-t {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 8px;
    border-radius: 5px;
    font-size: 11px;
    line-height: 1.35;
    transition: all 0.15s ease;
}

.epicot-chip-p {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #bae6fd;
}

.epicot-chip-i {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: #a7f3d0;
}

.epicot-chip-c {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fde68a;
}

.epicot-chip-o {
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.3);
    color: #fecdd3;
}

.epicot-chip-t {
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: #ddd6fe;
}

/* Phase 3 E-PICOT Extended Design */
.phase3-protocol-preview-card {
    transition: all 0.2s ease;
}

.phase3-protocol-preview-card:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.phase3-epicot-expanded-card {
    transition: all 0.25s ease;
}

.phase3-epicot-expanded-card:hover {
    border-color: rgba(168, 85, 247, 0.45) !important;
    box-shadow: 0 6px 22px rgba(168, 85, 247, 0.12) !important;
}

.phase3-picot-grid>div {
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.phase3-picot-grid>div:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ==========================================================================
   ESTILOS DEL MODAL DE CONFIGURACIÓN GLOBAL PROFESIONAL
   ========================================================================== */

/* Botones de Navegación por Pestañas */
.settings-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
}

.settings-nav-btn .material-icons-outlined {
    font-size: 17px;
    transition: transform 0.2s ease;
}

.settings-nav-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.settings-nav-btn:hover .material-icons-outlined {
    transform: scale(1.1);
}

.settings-nav-btn.active {
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
    border-color: rgba(6, 182, 212, 0.45);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
}

/* Cajas de Configuración (Cards) */
.settings-card-box {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-card-box:hover {
    border-color: rgba(255, 255, 255, 0.14);
}

/* Opciones de Selección de Tema */
.settings-theme-option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
    text-align: left;
}

.settings-theme-option-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.settings-theme-option-btn.active {
    background: rgba(6, 182, 212, 0.12);
    border-color: #06b6d4;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.25);
}

/* Presets de Tamaño de Fuente */
.btn-font-preset {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
}

.btn-font-preset:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-font-preset.active {
    background: rgba(167, 139, 250, 0.16);
    border-color: #a78bfa;
    color: #c4b5fd;
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.25);
    font-weight: 700;
}

.font-size-badge {
    font-size: 11px;
    font-weight: 700;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.15);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(167, 139, 250, 0.35);
}

/* Vista Previa de Tipografía */
.settings-preview-card {
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Densidad de Tablas */
.settings-density-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    text-align: left;
}

.settings-density-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.settings-density-btn.active {
    background: rgba(52, 211, 153, 0.12);
    border-color: #10b981;
    color: #34d399;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* Tarjetas de Guía por Fases */
.phase-guide-card {
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.phase-guide-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(2px);
}

.phase-guide-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

/* Adaptación para Tema Claro */
[data-theme="light"] .settings-nav-btn {
    color: #475569;
}

[data-theme="light"] .settings-nav-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #0f172a;
}

[data-theme="light"] .settings-nav-btn.active {
    background: rgba(2, 132, 199, 0.12);
    color: #0284c7;
    border-color: rgba(2, 132, 199, 0.4);
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.15);
}

[data-theme="light"] .settings-card-box {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .settings-theme-option-btn {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #0f172a;
}

[data-theme="light"] .settings-theme-option-btn.active {
    background: rgba(2, 132, 199, 0.08);
    border-color: #0284c7;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.15);
}

[data-theme="light"] .settings-preview-card {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="light"] .phase-guide-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

[data-theme="light"] .btn-font-preset {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #475569;
}

[data-theme="light"] .btn-font-preset.active {
    background: rgba(124, 58, 237, 0.1);
    border-color: #7c3aed;
    color: #6d28d9;
}

/* ==========================================================================
   FASE 4: SISTEMA DE TRIAGE, DESCARTE, NOTAS CLÍNICAS Y ETIQUETAS RÁPIDAS
   ========================================================================== */

/* 1. Sombreado y estilo de fila descartada (sin eliminar) */
tr.row-dismissed,
tr.row-discarded {
    opacity: 0.52 !important;
    filter: saturate(0.35) !important;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.22) 0%, rgba(244, 63, 94, 0.10) 140px, rgba(15, 23, 42, 0.92) 320px, rgba(15, 23, 42, 0.88) 100%) !important;
    border-left: 5px solid #ef4444 !important;
    box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.08) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

tr.row-dismissed td,
tr.row-discarded td {
    background: transparent !important;
    color: #94a3b8 !important;
}

tr.row-dismissed .item-title,
tr.row-dismissed a.item-title-link,
tr.row-dismissed .col-nombre-guia strong,
tr.row-dismissed .guide-name,
tr.row-dismissed .text-primary-emphasis,
tr.row-dismissed .col-articulo strong,
tr.row-dismissed .phase3-trial-title,
tr.row-dismissed .col-titulo strong,
tr.row-dismissed .col-titulo a {
    text-decoration: line-through !important;
    text-decoration-color: rgba(239, 68, 68, 0.85) !important;
    text-decoration-thickness: 1.8px !important;
    color: #94a3b8 !important;
}

tr.row-dismissed .badge,
tr.row-dismissed .btn-link-pdf,
tr.row-dismissed .btn-open-pdf-trigger,
tr.row-dismissed .btn-get-pdf-trigger,
tr.row-dismissed .inline-paper-note-widget,
tr.row-dismissed .badge-origin-phase,
tr.row-dismissed .badge-p3-sponsor,
tr.row-dismissed .badge-p3-acronym,
tr.row-dismissed .badge-p3-cond,
tr.row-dismissed .phase3-protocol-preview-card {
    opacity: 0.65 !important;
    filter: grayscale(0.6) !important;
}

tr.row-dismissed:hover,
tr.row-discarded:hover {
    opacity: 0.88 !important;
    filter: saturate(0.75) !important;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.30) 0%, rgba(244, 63, 94, 0.15) 140px, rgba(30, 41, 59, 0.94) 320px, rgba(30, 41, 59, 0.90) 100%) !important;
    border-left: 5px solid #ef4444 !important;
}

[data-theme="light"] tr.row-dismissed,
[data-theme="light"] tr.row-discarded {
    opacity: 0.65 !important;
    filter: saturate(0.4) !important;
    background: linear-gradient(90deg, #fee2e2 0%, #fff1f2 140px, #f8fafc 320px, #f8fafc 100%) !important;
    border-left: 5px solid #dc2626 !important;
    box-shadow: inset 0 0 10px rgba(220, 38, 38, 0.06) !important;
}

[data-theme="light"] tr.row-dismissed td,
[data-theme="light"] tr.row-discarded td {
    background: transparent !important;
    color: #64748b !important;
}

[data-theme="light"] tr.row-dismissed .item-title,
[data-theme="light"] tr.row-dismissed a.item-title-link,
[data-theme="light"] tr.row-dismissed .col-nombre-guia strong,
[data-theme="light"] tr.row-dismissed .guide-name,
[data-theme="light"] tr.row-dismissed .text-primary-emphasis,
[data-theme="light"] tr.row-dismissed .col-articulo strong,
[data-theme="light"] tr.row-dismissed .phase3-trial-title,
[data-theme="light"] tr.row-dismissed .col-titulo strong,
[data-theme="light"] tr.row-dismissed .col-titulo a {
    text-decoration: line-through !important;
    text-decoration-color: rgba(220, 38, 38, 0.9) !important;
    text-decoration-thickness: 1.8px !important;
    color: #64748b !important;
}

[data-theme="light"] tr.row-dismissed:hover,
[data-theme="light"] tr.row-discarded:hover {
    opacity: 0.92 !important;
    filter: saturate(0.85) !important;
    background: linear-gradient(90deg, #fecdd3 0%, #fee2e2 140px, #f1f5f9 320px, #f1f5f9 100%) !important;
    border-left: 5px solid #dc2626 !important;
}

/* 2. Botón de descarte (cruz debajo de la estrella) */
.col-actions-triage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-dismiss-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    padding: 3px 5px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.btn-dismiss-toggle:hover {
    color: #ffffff !important;
    background: rgba(239, 68, 68, 0.85) !important;
}

.btn-dismiss-toggle.active {
    color: #ffffff !important;
    background: #ef4444 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.55) !important;
}

/* 3. Badge persistente de PDF No Disponible */
.badge-pdf-unavailable {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.35);
    color: #fb7185;
    width: 100%;
    box-sizing: border-box;
}

.btn-retry-pdf-inline {
    background: none;
    border: none;
    color: #fda4af;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.btn-retry-pdf-inline:hover {
    color: #ffffff;
    transform: rotate(180deg);
}

/* 4. Barra de Triage en Cabecera de Fase 4 */
.phase4-triage-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mini-triage-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.btn-triage-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    height: 28px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.btn-triage-filter:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary, #f8fafc);
}

.btn-triage-filter.active {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.5);
    color: #22d3ee;
    font-weight: 600;
}

.btn-triage-filter.active-toggle {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.35);
    color: #fb7185;
}

.select-triage-tag {
    height: 28px !important;
    padding: 2px 6px 2px 8px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
    width: auto !important;
    min-width: 95px !important;
    max-width: 140px !important;
    cursor: pointer !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    color: var(--text-primary) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.select-triage-tag:hover,
.select-triage-tag:focus {
    border-color: rgba(245, 158, 11, 0.8) !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.25) !important;
}

[data-theme="light"] .select-triage-tag {
    background: #ffffff !important;
    border-color: rgba(217, 119, 6, 0.45) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .select-triage-tag:hover,
[data-theme="light"] .select-triage-tag:focus {
    border-color: rgba(217, 119, 6, 0.85) !important;
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.2) !important;
}

/* 5. Recuadro de Texto en Línea y Menú Desplegable (+) para Etiquetas Rápidas */
.inline-paper-note-widget {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 380px;
    margin-top: 6px;
    position: relative;
}

.inline-paper-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 0;
}

.inline-paper-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1.5px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f8fafc;
    transition: all 0.15s ease;
}

.inline-paper-tag-chip .btn-remove-tag-chip {
    background: none;
    border: none;
    padding: 0;
    color: currentColor;
    opacity: 0.7;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    margin-left: 2px;
    transition: opacity 0.15s;
}

.inline-paper-tag-chip .btn-remove-tag-chip:hover {
    opacity: 1;
}

.inline-paper-note-input-box {
    display: flex;
    align-items: stretch;
    position: relative;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    min-height: 28px;
}

.inline-paper-note-input-box:focus-within {
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.22);
    background: rgba(0, 0, 0, 0.55);
}

.inline-paper-note-input {
    flex: 1;
    min-width: 0;
    min-height: 26px;
    height: auto;
    padding: 5px 8px;
    background: transparent;
    border: none;
    color: #f1f5f9;
    font-size: 11.5px;
    font-style: italic;
    font-family: inherit;
    line-height: 1.45;
    outline: none;
    resize: none;
    overflow-y: hidden;
    word-break: break-word;
    white-space: pre-wrap;
    box-sizing: border-box;
}

.inline-paper-note-input::placeholder {
    color: var(--text-muted, #94a3b8);
    font-size: 11px;
    font-style: italic;
    opacity: 0.75;
}

.btn-inline-tag-dropdown-toggle {
    width: 26px;
    min-height: 26px;
    background: rgba(245, 158, 11, 0.12);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    color: #fbbf24;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 5px 5px 0;
    transition: all 0.15s ease;
    flex-shrink: 0;
    align-self: stretch;
}

.btn-inline-tag-dropdown-toggle:hover {
    background: rgba(245, 158, 11, 0.28);
    color: #ffffff;
}

.btn-inline-tag-dropdown-toggle.active {
    background: rgba(245, 158, 11, 0.4);
    color: #ffffff;
}

/* Menú Desplegable Flotante de Etiquetas Rápidas */
.inline-tags-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
    min-width: 250px;
    max-width: 320px;
    max-height: 230px;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    animation: fadeInScale 0.15s ease;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.inline-tags-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 6px 5px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fbbf24;
}

.inline-tag-option-item {
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    cursor: pointer;
    border-radius: 5px;
    color: var(--text-primary, #f8fafc);
    transition: background 0.15s ease;
    user-select: none;
}

.inline-tag-option-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.inline-tag-option-item.selected {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
    font-weight: 700;
}

/* 6. Gestor de Etiquetas en Settings y Configuración por Fases */
.btn-phase-config-toggle {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn-phase-config-toggle:hover {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.4);
    color: #22d3ee;
}

.btn-phase-config-toggle.active {
    background: rgba(6, 182, 212, 0.18);
    border-color: #06b6d4;
    color: #22d3ee;
}

.phase-config-panel {
    transition: all 0.2s ease;
}

.phase-config-empty-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    font-size: 11px;
    color: var(--text-muted);
}

.settings-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-primary, #f8fafc);
}

.settings-tag-item .btn-remove-tag {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    transition: color 0.15s;
}

.settings-tag-item .btn-remove-tag:hover {
    color: #f43f5e;
}

/* Light theme overrides */
[data-theme="light"] .inline-paper-note-input-box {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .inline-paper-note-input {
    color: #0f172a !important;
}

[data-theme="light"] .inline-tags-dropdown-menu {
    background: #ffffff !important;
    border-color: #f59e0b !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

[data-theme="light"] .inline-tag-option-item {
    color: #1e293b !important;
}

[data-theme="light"] .inline-tag-option-item:hover {
    background: #f1f5f9 !important;
}

[data-theme="light"] .inline-paper-tag-chip {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Contextual Confirm Popup */
@keyframes contextPopupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(-3px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.reguai-context-popup {
    animation: contextPopupFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

.reguai-context-popup .btn-cancel-ctx:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

.reguai-context-popup .btn-confirm-ctx:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

[data-theme="light"] .reguai-context-popup {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .reguai-context-popup .btn-cancel-ctx {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

[data-theme="light"] .reguai-context-popup .btn-cancel-ctx:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   FASE 4: ESTRUCTURA PIÉ DE NOTAS Y MINICUADRO HIPER RESUMIDO E-PICOT
   ========================================================================== */
.accordion-body table.subtable>tbody>tr>td.col-nombre_guia {
    vertical-align: top !important;
    height: 100% !important;
}

.pubmed-card-cell-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.pubmed-card-top-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.pubmed-card-footer-notes {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    flex-shrink: 0;
}

[data-theme="light"] .pubmed-card-footer-notes {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   MINI CUADRO HIPER-RESUMEN E-PICOT (UBICADO DEBAJO DEL BOTÓN E-PICOT)
   ========================================================================== */
.epicot-hyper-summary-card {
    width: 100%;
    margin-top: 6px;
    border-radius: 6px;
    overflow: hidden;
    border: 1.5px solid #e11d48;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.15);
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    background: #ffe4e6;
    box-sizing: border-box;
}

.epicot-hyper-summary-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.3);
    border-color: #f43f5e;
}

.epicot-hyper-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.epicot-hyper-header-row {
    background: #e11d48;
    color: #ffffff;
    font-weight: 700;
}

.epicot-hyper-header-label {
    width: 52px;
    padding: 5px 8px;
    font-weight: 800;
    font-size: 11.5px;
    color: #ffffff;
    border-right: 1.5px solid rgba(255, 255, 255, 0.35);
    vertical-align: middle;
    letter-spacing: -0.01em;
}

.epicot-hyper-header-value {
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
    vertical-align: middle;
    word-break: break-word;
}

.epicot-hyper-row {
    background: #fce7ea;
    border-top: 1px solid #fecdd3;
    color: #1e293b;
    transition: background 0.15s ease;
}

.epicot-hyper-row:hover {
    background: #fbd5dc;
}

.epicot-hyper-letter {
    width: 52px;
    padding: 4px 8px;
    font-weight: 800;
    font-size: 12px;
    color: #881337;
    text-align: center;
    border-right: 1.5px solid #fecdd3;
    vertical-align: middle;
    user-select: none;
}

.epicot-hyper-text {
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.35;
    color: #1e293b;
    vertical-align: middle;
    word-break: break-word;
}

/* Dark Theme Adaptations for Epicot Hyper Summary */
[data-theme="dark"] .epicot-hyper-summary-card {
    background: rgba(225, 29, 72, 0.08);
    border-color: rgba(225, 29, 72, 0.55);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .epicot-hyper-summary-card:hover {
    border-color: rgba(244, 63, 94, 0.85);
    box-shadow: 0 6px 20px rgba(225, 29, 72, 0.25);
}

[data-theme="dark"] .epicot-hyper-header-row {
    background: linear-gradient(90deg, #e11d48 0%, #be123c 100%);
    color: #ffffff;
}

[data-theme="dark"] .epicot-hyper-header-label {
    border-right-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

[data-theme="dark"] .epicot-hyper-header-value {
    color: #ffffff;
}

[data-theme="dark"] .epicot-hyper-row {
    background: rgba(15, 23, 42, 0.75);
    border-top: 1px solid rgba(225, 29, 72, 0.22);
    color: #f1f5f9;
}

[data-theme="dark"] .epicot-hyper-row:hover {
    background: rgba(225, 29, 72, 0.18);
}

[data-theme="dark"] .epicot-hyper-letter {
    color: #fda4af;
    border-right: 1px solid rgba(225, 29, 72, 0.22);
}

[data-theme="dark"] .epicot-hyper-text {
    color: #f1f5f9;
}

/* Minicuadro Hiper Resumido E-PICOT */
.epicot-mini-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(168, 85, 247, 0.35);
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.epicot-mini-card:hover {
    border-color: rgba(168, 85, 247, 0.55);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.15);
}

.epicot-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.18) 0%, rgba(6, 182, 212, 0.12) 100%);
    border-bottom: 1px solid rgba(168, 85, 247, 0.25);
    flex-wrap: wrap;
}

.epicot-mini-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.epicot-mini-badge-quality {
    font-size: 10px;
    font-weight: 600;
    padding: 1.5px 7px;
    border-radius: 99px;
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}

.epicot-mini-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-epicot-toggle-abstract,
.btn-epicot-full-audit {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2.5px 8px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-epicot-toggle-abstract {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
}

.btn-epicot-toggle-abstract:hover,
.btn-epicot-toggle-abstract.active {
    background: rgba(255, 255, 255, 0.14);
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-epicot-full-audit {
    background: rgba(168, 85, 247, 0.16);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #f0abfc;
}

.btn-epicot-full-audit:hover {
    background: rgba(168, 85, 247, 0.3);
    border-color: rgba(217, 70, 239, 0.7);
    color: #ffffff;
}

.epicot-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.epicot-mini-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: background 0.15s ease;
}

.epicot-mini-table tbody tr:last-child {
    border-bottom: none;
}

.epicot-letter-cell {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    text-align: center;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 800;
    padding: 7px 4px;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    user-select: none;
}

.epicot-content-cell {
    padding: 7px 12px;
    vertical-align: middle;
    line-height: 1.45;
    color: #e2e8f0;
    word-break: break-word;
}

/* Colores de cada dimensión alineados con la app */
.epicot-row-e .letter-e {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: #ffffff;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
}

.epicot-row-e .content-e {
    background: rgba(168, 85, 247, 0.06);
    color: #f1f5f9;
}

.epicot-row-p .letter-p {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

.epicot-row-p .content-p {
    background: rgba(56, 189, 248, 0.03);
}

.epicot-row-i .letter-i {
    background: rgba(52, 211, 153, 0.18);
    color: #34d399;
}

.epicot-row-i .content-i {
    background: rgba(52, 211, 153, 0.03);
}

.epicot-row-c .letter-c {
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
}

.epicot-row-c .content-c {
    background: rgba(251, 191, 36, 0.03);
}

.epicot-row-o .letter-o {
    background: rgba(244, 63, 94, 0.18);
    color: #fb7185;
}

.epicot-row-o .content-o {
    background: rgba(244, 63, 94, 0.03);
}

.epicot-row-t .letter-t {
    background: rgba(167, 139, 250, 0.18);
    color: #c084fc;
}

.epicot-row-t .content-t {
    background: rgba(167, 139, 250, 0.03);
}

.epicot-mini-abstract-drawer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 11.5px;
    line-height: 1.5;
    color: #94a3b8;
}

.epicot-mini-abstract-header {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 4px;
    letter-spacing: 0.04em;
}

.epicot-mini-abstract-text {
    color: #cbd5e1;
    font-size: 11.5px;
    line-height: 1.5;
}

/* Adaptación para Light Theme */
[data-theme="light"] .epicot-mini-card {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .epicot-mini-header {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .epicot-mini-title {
    color: #1e293b !important;
}

[data-theme="light"] .epicot-mini-table tbody tr {
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .epicot-letter-cell {
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .epicot-row-e .letter-e {
    background: #7c3aed !important;
    color: #ffffff !important;
}

[data-theme="light"] .epicot-row-e .content-e {
    background: #faf5ff !important;
    color: #1e293b !important;
}

[data-theme="light"] .epicot-row-p .letter-p {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}

[data-theme="light"] .epicot-row-p .content-p {
    background: #f0f9ff !important;
    color: #1e293b !important;
}

[data-theme="light"] .epicot-row-i .letter-i {
    background: #d1fae5 !important;
    color: #059669 !important;
}

[data-theme="light"] .epicot-row-i .content-i {
    background: #ecfdf5 !important;
    color: #1e293b !important;
}

[data-theme="light"] .epicot-row-c .letter-c {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

[data-theme="light"] .epicot-row-c .content-c {
    background: #fffbeb !important;
    color: #1e293b !important;
}

[data-theme="light"] .epicot-row-o .letter-o {
    background: #ffe4e6 !important;
    color: #e11d48 !important;
}

[data-theme="light"] .epicot-row-o .content-o {
    background: #fff1f2 !important;
    color: #1e293b !important;
}

[data-theme="light"] .epicot-row-t .letter-t {
    background: #ede9fe !important;
    color: #7c3aed !important;
}

[data-theme="light"] .epicot-row-t .content-t {
    background: #f5f3ff !important;
    color: #1e293b !important;
}

[data-theme="light"] .epicot-mini-abstract-drawer {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

[data-theme="light"] .epicot-mini-abstract-text {
    color: #334155 !important;
}

/* ========================================================
   Fase 4: Flex Pinning para Columna Izquierda (Nombre Guía)
   ======================================================== */
.modern-table td.col-nombre_guia {
    vertical-align: top;
    height: 100%;
}

.pubmed-card-cell-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.pubmed-card-top-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pubmed-card-footer-notes {
    margin-top: auto;
    padding-top: 10px;
    width: 100%;
}

/* ========================================================
   Fase 4: Mini Cuadro Hiper-Resumen E-PICOT
   ======================================================== */
.epicot-hyper-summary-card {
    margin-top: 6px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(225, 29, 72, 0.4);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    width: 100%;
    box-sizing: border-box;
}

.epicot-hyper-summary-card:hover {
    border-color: rgba(244, 63, 94, 0.85);
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25);
    transform: translateY(-1px);
}

.epicot-hyper-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    table-layout: auto;
}

.epicot-hyper-header-row {
    background: #e11d48;
    color: #ffffff;
}

.epicot-hyper-header-label {
    padding: 5px 8px;
    font-weight: 800;
    font-size: 11.5px;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    white-space: nowrap;
    width: 1%;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    vertical-align: middle;
}

.epicot-hyper-header-value {
    padding: 5px 8px;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.3;
    color: #ffffff;
    vertical-align: middle;
    word-break: normal;
    overflow-wrap: break-word;
}

.epicot-hyper-row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease;
}

.epicot-hyper-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.epicot-hyper-letter {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    text-align: center;
    font-weight: 800;
    font-size: 11px;
    color: #fb7185;
    background: rgba(225, 29, 72, 0.12);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 4px 0;
    user-select: none;
    vertical-align: middle;
}

.epicot-hyper-text {
    padding: 4px 8px;
    color: #cbd5e1;
    font-size: 11px;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
    vertical-align: middle;
}

/* Light Mode Styles for Hyper Summary (PharmaX Violet Clinical Palette) */
[data-theme="light"] .epicot-hyper-summary-card {
    background: #ffffff !important;
    border: 1px solid rgba(142, 36, 170, 0.28) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .epicot-hyper-summary-card:hover {
    border-color: rgba(142, 36, 170, 0.5) !important;
    box-shadow: 0 4px 14px rgba(142, 36, 170, 0.08) !important;
}

[data-theme="light"] .epicot-hyper-header-row {
    background: rgba(142, 36, 170, 0.08) !important;
    border-bottom: 1px solid rgba(142, 36, 170, 0.2) !important;
}

[data-theme="light"] .epicot-hyper-header-label {
    color: #8e24aa !important;
    font-weight: 800 !important;
    border-right: 1px solid rgba(142, 36, 170, 0.18) !important;
}

[data-theme="light"] .epicot-hyper-header-value {
    color: #1e293b !important;
    font-weight: 600 !important;
}

[data-theme="light"] .epicot-hyper-row {
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .epicot-hyper-row:hover {
    background: #f8fafc !important;
}

[data-theme="light"] .epicot-hyper-letter {
    background: rgba(142, 36, 170, 0.09) !important;
    color: #8e24aa !important;
    font-weight: 800 !important;
    border-right: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .epicot-hyper-text {
    color: #334155 !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   TÍTULOS, TARJETAS DE PROTOCOLO Y BLENDER EN MODO CLARO (BRIGHT MODE)
   ========================================================================== */
.pubmed-article-title,
.phase3-trial-title {
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
    transition: color 0.15s ease;
}

[data-theme="light"] .pubmed-article-title,
[data-theme="light"] .phase3-trial-title {
    color: #1a237e !important; /* Azul Marino Clínico Ultra-Nítido */
}

[data-theme="light"] .pubmed-article-title:hover,
[data-theme="light"] .phase3-trial-title:hover {
    color: #00838f !important;
}

/* Preview del Protocolo Clínico en Fase 3 */
.phase3-protocol-preview-card {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 12px 14px;
    transition: all 0.2s ease;
}

.phase3-protocol-preview-header {
    color: #94a3b8;
}

.phase3-summary-body {
    font-size: 12.5px;
    color: #cbd5e1;
    line-height: 1.55;
}

.btn-extract-epicot-trigger {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #818cf8;
    transition: all 0.2s ease;
}

[data-theme="light"] .phase3-protocol-preview-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .phase3-protocol-preview-header {
    color: #1a237e !important;
}

[data-theme="light"] .phase3-protocol-preview-header .material-icons-outlined {
    color: #00838f !important;
}

[data-theme="light"] .phase3-summary-body {
    color: #334155 !important; /* Texto oscuro, de alto contraste y legibilidad impecable */
}

[data-theme="light"] .btn-extract-epicot-trigger {
    background: rgba(142, 36, 170, 0.08) !important;
    border: 1px solid rgba(142, 36, 170, 0.3) !important;
    color: #8e24aa !important;
}

[data-theme="light"] .btn-extract-epicot-trigger:hover {
    background: rgba(142, 36, 170, 0.16) !important;
    border-color: rgba(142, 36, 170, 0.5) !important;
}

/* Badges y Pastillas de Metadatos en Tablas */
[data-theme="light"] .badge-p3-phase {
    background: rgba(142, 36, 170, 0.09) !important;
    border: 1px solid rgba(142, 36, 170, 0.3) !important;
    color: #8e24aa !important;
}

[data-theme="light"] .badge-p3-date,
[data-theme="light"] .badge-pub-year {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

[data-theme="light"] .badge-p3-date strong,
[data-theme="light"] .badge-pub-year strong {
    color: #1e293b !important;
}

[data-theme="light"] .badge-p3-date .material-icons-outlined,
[data-theme="light"] .badge-pub-year .material-icons-outlined {
    color: #64748b !important;
}

[data-theme="light"] .badge-p3-sponsor {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

[data-theme="light"] .badge-p3-sponsor strong {
    color: #1e293b !important;
}

[data-theme="light"] .badge-p3-sponsor .material-icons-outlined {
    color: #64748b !important;
}

[data-theme="light"] .badge-p3-cond {
    background: rgba(0, 188, 212, 0.08) !important;
    border: 1px solid rgba(0, 188, 212, 0.3) !important;
    color: #00838f !important;
}

[data-theme="light"] .badge-p3-acronym {
    background: rgba(142, 36, 170, 0.08) !important;
    border: 1px solid rgba(142, 36, 170, 0.3) !important;
    color: #8e24aa !important;
}

[data-theme="light"] .badge-pub-doi {
    background: rgba(0, 188, 212, 0.08) !important;
    border: 1px solid rgba(0, 188, 212, 0.3) !important;
    color: #00838f !important;
}

[data-theme="light"] .badge-pub-nct {
    background: rgba(0, 188, 212, 0.09) !important;
    border: 1px solid rgba(0, 188, 212, 0.35) !important;
    color: #00838f !important;
}

/* Barra Superior de Blender y Botones de Cabecera */
.x1-blender-header {
    background: rgba(15, 23, 42, 0.75);
}

[data-theme="light"] .x1-blender-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .blender-hdr-btn-lg.btn-secondary,
[data-theme="light"] #btn-blender-edit-tools,
[data-theme="light"] #btn-blender-restore,
[data-theme="light"] #btn-blender-fullscreen {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .blender-hdr-btn-lg.btn-secondary:hover,
[data-theme="light"] #btn-blender-edit-tools:hover,
[data-theme="light"] #btn-blender-restore:hover,
[data-theme="light"] #btn-blender-fullscreen:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

[data-theme="light"] .blender-hdr-btn-lg .material-icons-outlined {
    color: #00838f !important;
}

[data-theme="light"] .blender-hdr-btn-lg .blender-btn-label {
    color: #1e293b !important;
    font-weight: 600 !important;
}

[data-theme="light"] #blender-connections-badge,
[data-theme="light"] .blender-conn-counter-badge {
    background: rgba(236, 72, 153, 0.1) !important;
    border: 1.5px solid #f472b6 !important;
    color: #be185d !important;
    box-shadow: 0 1px 6px rgba(236, 72, 153, 0.12) !important;
}

[data-theme="light"] #blender-connections-badge span,
[data-theme="light"] #blender-connections-badge .blender-badge-text,
[data-theme="light"] #blender-connections-badge #blender-connections-count {
    color: #be185d !important;
}

/* Sidebar Derecho y Pestañas de Herramientas */
[data-theme="light"] .sidebar-right {
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .right-panel-tabs {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .right-tab-btn {
    color: #475569 !important;
}

[data-theme="light"] .right-tab-btn.active-blender,
[data-theme="light"] #tab-btn-blender-right.active-pdf,
[data-theme="light"] #tab-btn-blender-right {
    background: rgba(142, 36, 170, 0.08) !important;
    color: #8e24aa !important;
    border: 1px solid rgba(142, 36, 170, 0.3) !important;
    font-weight: 700 !important;
}

[data-theme="light"] #tab-btn-blender-right .material-icons-outlined,
[data-theme="light"] #right-logo-icon-expanded {
    color: #8e24aa !important;
}

/* ==========================================================================
   RESALTADO LUMINOSO AL SELECCIONAR ELEMENTO EN PIZARRA (MODO DIVIDIDO)
   ========================================================================== */
@keyframes itemHighlightPulse {
    0% {
        background-color: rgba(56, 189, 248, 0.45) !important;
        box-shadow: 0 0 20px rgba(56, 189, 248, 0.6), inset 0 0 10px rgba(56, 189, 248, 0.3) !important;
        border-color: rgba(56, 189, 248, 0.9) !important;
    }
    50% {
        background-color: rgba(56, 189, 248, 0.25) !important;
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.4), inset 0 0 6px rgba(56, 189, 248, 0.2) !important;
        border-color: rgba(56, 189, 248, 0.7) !important;
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

.item-highlight-pulse {
    animation: itemHighlightPulse 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* ==========================================================================
   MENÚ DESPLEGABLE '+' DE ACCIONES MASIVAS EN CABECERA DE TABLAS (PDFs & E-PICOT)
   ========================================================================== */
.table-batch-actions-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.btn-table-batch-plus {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    border-radius: 6px;
    padding: 0;
    width: 28px;
    height: 28px;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.btn-table-batch-plus:hover {
    background: rgba(56, 189, 248, 0.22);
    border-color: rgba(56, 189, 248, 0.6);
    color: #7dd3fc;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.btn-p3-view-toggle {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.btn-search-ct-papers {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    background: rgba(6, 182, 212, 0.12) !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
    color: #22d3ee !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.btn-search-ct-papers:hover {
    background: rgba(6, 182, 212, 0.22) !important;
    border-color: rgba(6, 182, 212, 0.7) !important;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.25) !important;
}

.table-triage-filter-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.btn-group-triage-trigger {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border-radius: 6px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    transition: all 0.2s ease;
    box-sizing: border-box;
    flex-shrink: 0;
    pointer-events: none;
}

.table-triage-filter-wrapper:hover .btn-group-triage-trigger {
    border-color: rgba(245, 158, 11, 0.8);
    background: rgba(245, 158, 11, 0.22);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.25);
}

[data-theme="light"] .btn-group-triage-trigger {
    background: #ffffff;
    border-color: rgba(217, 119, 6, 0.45);
    color: #b45309;
}

[data-theme="light"] .table-triage-filter-wrapper:hover .btn-group-triage-trigger {
    border-color: rgba(217, 119, 6, 0.85);
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.2);
}

.select-group-triage-filter {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.table-batch-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 230px;
    backdrop-filter: blur(16px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65), 0 0 15px rgba(0, 0, 0, 0.4);
    z-index: 100000;
    animation: batchPopupFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.table-batch-popup.visible {
    display: flex;
}

@keyframes batchPopupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.table-batch-popup-item {
    background: transparent;
    border: none;
    color: var(--text-primary, #f8fafc);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 11.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all 0.15s ease;
}

.table-batch-popup-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #38bdf8;
}

[data-theme="light"] .table-batch-popup {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

[data-theme="light"] .table-batch-popup-item {
    color: #1e293b;
}

[data-theme="light"] .table-batch-popup-item:hover {
    background: #f1f5f9;
    color: #0284c7;
}

/* ==========================================================================
   BARRA DESPLAZABLE Y ANCHOS DINÁMICOS EN TABLAS DE FASE 3 Y FASE 4
   ========================================================================== */
.accordion-body table.subtable {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Columna de estrella/favorito */
.accordion-body table.subtable th.col-starred,
.accordion-body table.subtable td.col-starred {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    text-align: center !important;
}

/* Cabecera Sticky Unificada para TODAS las columnas de la tabla (Evita que el header se despegue o flote sobre filas) */
.accordion-body table.subtable>thead>tr>th,
.accordion-body table.subtable.table-split-view th,
.app-container.sidebar-right-expanded .accordion-body table.subtable>thead>tr>th,
.app-container.sidebar-right-expanded .accordion-body table.subtable.table-split-view th {
    position: sticky !important;
    top: 46px !important;
    z-index: 25 !important;
    background: #0f172a !important;
    box-sizing: border-box !important;
}

[data-theme="light"] .accordion-body table.subtable>thead>tr>th,
[data-theme="light"] .accordion-body table.subtable.table-split-view th,
[data-theme="light"] .app-container.sidebar-right-expanded .accordion-body table.subtable>thead>tr>th,
[data-theme="light"] .app-container.sidebar-right-expanded .accordion-body table.subtable.table-split-view th {
    background: #f0f9ff !important;
}

/* Columna Izquierda: Estudio / Ensayo & Metadatos (Tablas divididas de Fase 3 E-PICOT y Fase 4) */
.accordion-body table.subtable.table-split-view th.col-nombre_guia,
.accordion-body table.subtable th.col-nombre_guia {
    width: var(--table-split-left-pct, 32%) !important;
    min-width: 140px !important;
    max-width: none !important;
}

.accordion-body table.subtable.table-split-view td.col-nombre_guia,
.accordion-body table.subtable td.col-nombre_guia {
    width: var(--table-split-left-pct, 32%) !important;
    min-width: 140px !important;
    max-width: none !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Columna Derecha: Abstract (Fase 4) y Protocolo / E-PICOT (Fase 3) */
.accordion-body table.subtable.table-split-view th.col-abstract,
.accordion-body table.subtable.table-split-view td.col-abstract,
.accordion-body table.subtable.table-split-view th.col-epicot_protocol,
.accordion-body table.subtable.table-split-view td.col-epicot_protocol,
.accordion-body table.subtable th.col-abstract,
.accordion-body table.subtable td.col-abstract,
.accordion-body table.subtable th.col-epicot_protocol,
.accordion-body table.subtable td.col-epicot_protocol {
    width: calc(100% - 38px - var(--table-split-left-pct, 32%)) !important;
    min-width: 180px !important;
    box-sizing: border-box !important;
}

/* Compatibilidad total de redimensionamiento cuando el panel lateral derecho está abierto */
.app-container.sidebar-right-expanded .accordion-body table.subtable.table-split-view th.col-nombre_guia,
.app-container.sidebar-right-expanded .accordion-body table.subtable th.col-nombre_guia {
    width: var(--table-split-left-pct, 32%) !important;
    min-width: 40px !important;
    max-width: none !important;
}

.app-container.sidebar-right-expanded .accordion-body table.subtable.table-split-view td.col-nombre_guia,
.app-container.sidebar-right-expanded .accordion-body table.subtable td.col-nombre_guia {
    width: var(--table-split-left-pct, 32%) !important;
    min-width: 40px !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.app-container.sidebar-right-expanded .accordion-body table.subtable.table-split-view th.col-abstract,
.app-container.sidebar-right-expanded .accordion-body table.subtable.table-split-view td.col-abstract,
.app-container.sidebar-right-expanded .accordion-body table.subtable.table-split-view th.col-epicot_protocol,
.app-container.sidebar-right-expanded .accordion-body table.subtable.table-split-view td.col-epicot_protocol,
.app-container.sidebar-right-expanded .accordion-body table.subtable th.col-abstract,
.app-container.sidebar-right-expanded .accordion-body table.subtable td.col-abstract,
.app-container.sidebar-right-expanded .accordion-body table.subtable th.col-epicot_protocol,
.app-container.sidebar-right-expanded .accordion-body table.subtable td.col-epicot_protocol {
    width: calc(100% - 32px - var(--table-split-left-pct, 32%)) !important;
    min-width: 50px !important;
    box-sizing: border-box !important;
}

/* Elemento visual de la barra de redimensionamiento */
.table-col-resizer-grip {
    position: absolute;
    right: -7px;
    top: 0;
    bottom: 0;
    width: 14px;
    cursor: col-resize;
    user-select: none;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.table-col-resizer-handle {
    width: 3px;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    transition: all 0.15s ease;
    pointer-events: none;
}

.table-col-resizer-grip:hover .table-col-resizer-handle,
.table-col-resizer-grip.is-dragging .table-col-resizer-handle {
    background: #a855f7;
    box-shadow: 0 0 10px #a855f7, 0 0 4px #c084fc;
    width: 4px;
}

.table-col-resizer-grip:hover,
.table-col-resizer-grip.is-dragging {
    background: rgba(168, 85, 247, 0.15);
}

[data-theme="light"] .table-col-resizer-handle {
    background: rgba(0, 0, 0, 0.22);
}

[data-theme="light"] .table-col-resizer-grip:hover .table-col-resizer-handle,
[data-theme="light"] .table-col-resizer-grip.is-dragging .table-col-resizer-handle {
    background: #7c3aed;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
}

body.is-resizing-table-columns {
    cursor: col-resize !important;
    user-select: none !important;
}

body.is-resizing-table-columns * {
    user-select: none !important;
    cursor: col-resize !important;
}

/* ==========================================================================
   CHIPS DE SINÓNIMOS, VARIANTES E IDIOMAS (FASE 0)
   ========================================================================== */
.synonym-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--text-secondary);
    transition: all 0.15s ease;
    box-shadow: none;
    animation: fadeInTag 0.2s ease-out;
    line-height: 1.2;
}

@keyframes fadeInTag {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.synonym-chip:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
}

.synonym-chip .chip-type-badge {
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 3px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    line-height: 1;
}

/* Colores sutiles para cada tipo de etiqueta */
.synonym-chip .chip-type-es {
    background: rgba(6, 182, 212, 0.12);
    color: #67e8f9;
    border: 1px solid rgba(6, 182, 212, 0.25);
}

.synonym-chip .chip-type-en {
    background: rgba(99, 102, 241, 0.12);
    color: #c7d2fe;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.synonym-chip .chip-type-pt {
    background: rgba(245, 158, 11, 0.12);
    color: #fde68a;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.synonym-chip .chip-type-codigo {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.synonym-chip .chip-type-sinonimo {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.synonym-chip .chip-type-indicacion {
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.synonym-chip .chip-term-text {
    font-weight: 500;
    color: var(--text-primary);
}

.synonym-chip .btn-remove-chip {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    margin-left: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0.6;
    transition: all 0.15s ease;
}

.synonym-chip .btn-remove-chip:hover {
    color: #f87171;
    opacity: 1;
    transform: scale(1.15);
}

[data-theme="light"] .synonym-chip {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}

[data-theme="light"] .synonym-chip:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #1e293b;
}

/* ==========================================================================
   ESTILOS: MODAL DE AUTENTICACIÓN Y CONTROL DE LICENCIAS (SUPABASE / RUTA 2)
   ========================================================================== */
.auth-dialog {
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 30px rgba(6, 182, 212, 0.15);
    animation: authDialogPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-dialog::backdrop {
    background: rgba(10, 15, 29, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@keyframes authDialogPop {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.auth-tab-btn {
    transition: all 0.2s ease;
}

.auth-tab-btn:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.user-license-pill {
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.user-license-pill:hover {
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

/* ==========================================================================
   DESACOPLE DE FASES Y NUEVOS CONTROLES DE PODER POR ETAPA (PHARMAX)
   ========================================================================== */

.phase-action-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.phase-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    user-select: none;
}

.phase-action-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.phase-action-btn:active {
    transform: translateY(0);
}

.phase-action-btn.phase1-action-btn {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(8, 145, 178, 0.15));
    border-color: rgba(6, 182, 212, 0.5);
    color: #22d3ee;
}
.phase-action-btn.phase1-action-btn:hover {
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3);
}

.phase-action-btn.phase2-action-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15));
    border-color: rgba(16, 185, 129, 0.5);
    color: #34d399;
}
.phase-action-btn.phase2-action-btn:hover {
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.phase-action-btn.phase3-action-btn {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(147, 51, 234, 0.15));
    border-color: rgba(168, 85, 247, 0.5);
    color: #c084fc;
}
.phase-action-btn.phase3-action-btn:hover {
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
}

.phase-action-btn.phase4-action-btn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}
.phase-action-btn.phase4-action-btn:hover {
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.phase-action-btn.phase5-action-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.15));
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}
.phase-action-btn.phase5-action-btn:hover {
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.phase-action-counter-badge {
    padding: 1px 6px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(168, 85, 247, 0.35);
    border: 1px solid rgba(168, 85, 247, 0.7);
    color: #ffffff;
    margin-left: 2px;
}

.phase-btn-loading {
    opacity: 0.9 !important;
    pointer-events: none !important;
}

@keyframes spinFastIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin-fast {
    animation: spinFastIcon 0.8s linear infinite !important;
    display: inline-block !important;
}

/* ==========================================================================
   ILUMINACIÓN Y SOMBRA DE BLOQUES EN BLENDER (COINCIDENCIA DE FÁRMACO)
   ========================================================================== */

/* Bloques con coincidencia directa de Fármaco (Encendidos) */
.blender-floating-card.blender-card-drug-lit,
.blender-custom-block.blender-card-drug-lit {
    opacity: 1 !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.22), 0 0 1px rgba(16, 185, 129, 0.8) !important;
    transform: translateZ(0);
}

.blender-floating-card.blender-card-drug-lit::before,
.blender-custom-block.blender-card-drug-lit::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10b981, #06b6d4);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* Bloques contextuales sin mención inicial de Fármaco (En Sombra) */
.blender-floating-card.blender-card-drug-shadowed,
.blender-custom-block.blender-card-drug-shadowed {
    opacity: 0.48 !important;
    filter: grayscale(35%) brightness(0.85);
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}

.blender-floating-card.blender-card-drug-shadowed:hover,
.blender-custom-block.blender-card-drug-shadowed:hover {
    opacity: 1 !important;
    filter: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.65) !important;
}

.tag-drug-lit {
    background: rgba(16, 185, 129, 0.2) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #34d399 !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}

/* ==========================================================================
   PÍLDORA DE SUGERENCIA INTELIGENTE DE NCT EN FASE 4 (OPCIÓN C)
   ========================================================================== */

.p4-nct-suggestion-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    margin: 4px 0;
    border-radius: 99px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px dashed rgba(168, 85, 247, 0.45);
    color: #d8b4fe;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.p4-nct-suggestion-pill:hover {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.7);
}

.p4-nct-suggestion-pill .btn-import-nct {
    background: rgba(168, 85, 247, 0.3);
    border: 1px solid rgba(168, 85, 247, 0.6);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.p4-nct-suggestion-pill .btn-import-nct:hover {
    background: #a855f7;
    border-color: #c084fc;
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.4);
}