/* Candado en widgets bloqueados */
.form-widget .widget-lock-indicator {
    margin-right: 6px;
    color: #888;
    font-size: 12px;
}
.widget-menu .disabled { pointer-events: none; }
/* Candado en tabs bloqueadas */
.content-tabs .tab-link.locked .lock-indicator {
    margin-right: 6px;
    font-size: 12px;
    color: #888;
}
/* css/style.css */

.w-100{
    width: 100% !important;
}

:root {
    --bg-color: #F9FAFB;
    --sidebar-bg: #FFFFFF;
    --app-sidebar-width: 320px;
    --app-sidebar-min-width: 280px;
    --app-sidebar-max-width: 320px;
    --app-sidebar-bg: #edeff2;
    --border-color: #E5E7EB;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --primary-blue: #2563EB;
    --primary-blue-hover: #1D4ED8;
    --font-family: 'Inter', sans-serif;
    --radius-sm: 4px;
    --radius-md: 8px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --transition-fast: all 0.2s ease-in-out;
}

.d-flex{
    display: flex !important;
}
.d-none{
    display: none !important;
}

.flex-column{
    flex-direction: column !important;
}
.align-items-center{
    align-items: center !important;
}
.align-items-start{
    align-items: start !important;
}
.m-0{margin: 0 !important}

.justify-content-center{
    justify-content: center !important;
}
.justify-content-between{
    justify-content: space-between !important;
}
.opacity-05{
    opacity: 0.5 !important;
}
.fs-13{
    font-size: 13px !important;
}

/* --- Global & Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background: #edeff2;
    color: var(--text-primary);
    font-size: 14px;
    overflow: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}


/*h1*/
.editable-title {
  display: inline-block;
  cursor: text; /* da sensación de editable */
  position: relative;
  outline: 1px solid transparent;
   padding: 2px 6px;
}

.editable-title[contenteditable="true"] {
  outline: 1px solid #ccc;   /* efecto input */
  border-radius: 4px;
  padding: 2px 6px;
  background: #f8f8f8;
}


/* --- Contenedores de Vistas --- */
.view-container { display: none; }
.view-container.active { display: flex; }
#login-section.active {
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #edeff2;
    z-index: 99999;
    position: relative;
}
.view-content { 
    display: none; 
    flex: 1;
    overflow-y: auto;

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

/* --- Login Section --- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #fff;
}
.login-box {
    width: 100%;
    max-width: 380px;
    text-align: center;
}
.login-logo {
    width: 40px;
    margin-bottom: 24px;
}
.login-box h2 {
    font-size: 40px;
    margin:0;
}
.input-group {
    margin-bottom: 16px;
}
.input-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
}
.btn-login {
    width: 100%;
    padding: 12px;
    background-color: #111827;
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}
.login-error-message {
    color: #EF4444;
    margin-top: 10px;
    min-height: 20px;
}
.login-success-message {
    color: #10B981;
    margin-top: 10px;
    min-height: 20px;
}
.login-footer {
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-secondary);
}
/* Modal de restablecimiento de contraseña */
.forgot-password-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.forgot-password-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.forgot-password-content {
    position: relative;
    background-color: #fff;
    border-radius: var(--radius-md);
    width: 90%;
    max-width: 450px;
    padding: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 10001;
}
.forgot-password-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
}
.forgot-password-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}
.forgot-password-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}
.forgot-password-close-btn:hover {
    background-color: var(--bg-color);
    color: var(--text-primary);
}
.forgot-password-body {
    padding: 24px;
}
.forgot-password-body p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}
.login-footer a {
    color: var(--primary-blue);
    font-weight: 500;
}
.footer-links {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 24px;
}
.footer-links a {
    color: var(--text-secondary);
}

/* --- App Layout --- */
.app-container {
    height: 100vh;
}
/*
.sidebar {
    width: 260px;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 16px;
    flex-shrink: 0;
}
*/
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar-header .sidebar-logo {
    width: 32px;
    margin-bottom: 20px;
}

/* Acceso a Modo IA: búho del sidebar */
.sidebar-ai-mode-btn {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 10px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-radius: var(--radius-md, 8px);
    transition: opacity 0.15s ease;
}

.sidebar-ai-mode-btn:hover {
    opacity: 0.85;
}

.sidebar-ai-mode-btn:focus-visible {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
}

.sidebar-ai-mode-btn .sidebar-ai-mode-logo {
    width: 50px;
    flex-shrink: 0;
}

.sidebar-ai-mode-btn h1 {
    font-size: 1.7em;
    margin: 0;
}


.sidebar-search {
    position: relative;
}
.sidebar-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}
.sidebar-search input {
    width: 100%;
    padding: 8px 8px 8px 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
}


.sidebar-search .clear-search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    cursor: pointer;
}

.sidebar-search .clear-search-btn:hover {
    color: #333;
}

/* ============================================
   FILTRO DE ETIQUETAS EN SIDEBAR
   ============================================ */

.sidebar-tags-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding: 0 2px;
}

.sidebar-tags-filter:empty {
    display: none;
}

.sidebar-tags-filter .tag-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    user-select: none;
}

.sidebar-tags-filter .tag-filter-chip:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.sidebar-tags-filter .tag-filter-chip.active {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8), 0 2px 8px rgba(0,0,0,0.2);
    transform: scale(1.05);
}

.sidebar-tags-filter .tag-filter-chip i {
    margin-right: 4px;
    font-size: 9px;
}

/* ============================================
   CHECKBOX PARA MOSTRAR GRUPOS OCULTOS
   ============================================ */

.show-hidden-groups-toggle {
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background-color: var(--sidebar-bg);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.toggle-label:hover {
    color: var(--text-primary);
}

.toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-blue);
    margin: 0;
}

.toggle-text {
    font-weight: 500;
}

.sidebar-tags-filter .tag-filter-chip .tag-remove {
    margin-left: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sidebar-tags-filter .tag-filter-chip.active .tag-remove {
    opacity: 1;
}

.sidebar-tags-filter .tag-filter-chip .tag-remove:hover {
    color: #dc2626;
}

/* Botón para limpiar filtros de tags */
.sidebar-tags-filter .clear-tags-filter {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.sidebar-tags-filter .clear-tags-filter:hover {
    background: #e2e8f0;
    color: #475569;
}

/* Borde de tags en elementos del sidebar */
.sidebar-nav li a[style*="border-left"] {
    border-left-width: 3px !important;
    border-left-style: solid !important;
    padding-left: 17px !important; /* Ajustar padding para compensar el borde */
}

/* Contenedor del nombre del grupo */
.group-name-container {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.group-name-container .group-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-tipo-factura-emoji {
    margin-right: 6px;
    flex-shrink: 0;
    font-size: 1em;
    line-height: 1;
}

/* Icono para grupos ocultos */
.group-hidden-icon {
    margin-left: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
    flex-shrink: 0;
}

/* Contenedor y elementos de resultados */
#search-results-container {
    padding: 0 10px;
    animation: fadeIn 0.3s ease;
}

.search-result-item {
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 5px;
    border-left: 3px solid transparent;
}

.search-result-item:hover {
    background-color: #f0f0f0;
    border-left: 3px solid #007bff;
}

.search-result-item h5 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
}

.search-result-item p {
    margin: 0;
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Estilo para el texto resaltado */
mark {
    background-color: #ffda00;
    color: #000;
    padding: 1px 2px;
    border-radius: 3px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}




/*.sidebar-nav {
    flex-grow: 1;
}
.sidebar-nav ul {
    list-style: none;
}
.sidebar-nav ul ul {
    padding-left: 16px;
}
.sidebar-nav a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 500;
}
.sidebar-nav li.active > a {
    background-color: var(--bg-color);
    color: var(--text-primary);
}
.sidebar-nav a:hover {
    background-color: var(--bg-color);
}*/

.sidebar {
    width: var(--app-sidebar-width);
    min-width: var(--app-sidebar-min-width);
    max-width: var(--app-sidebar-max-width);
    flex-shrink: 0;
    background-color: var(--app-sidebar-bg);
    display: flex;
    flex-direction: column;   
}

.sidebar-header {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-nav {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 10px 0 0 0;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.sidebar-nav > ul,
.sidebar-nav > #search-results-container {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 150px; /* Padding inferior generoso para scroll */
}

.sidebar-nav > ul{
    padding-bottom: 70px !important;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav ul ul {
    padding-left: 1px;
    margin-left: 24px;
    border-left: 1px solid #d5d6d7; /* Línea vertical sutil */
    overflow: hidden;
    max-height: 0; /* Oculto por defecto */
    transition: max-height 0.3s ease-in-out;
}

.sidebar-nav li {
    position: relative;
}

/* Ajuste para los enlaces dentro de subniveles para que no tengan doble margen */
.sidebar-nav ul ul li a {
    margin-left: 5px;
}

.sidebar-nav li.expanded > ul {
    max-height: 999999999999999px; /* Un valor grande para mostrar el contenido */
}

.sidebar-nav li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: center;
    padding: 8px 20px;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 4px;
    margin: 0px 10px;
}

.sidebar-nav li a > div{
    display: flex;
    align-items: center;
}

.sidebar-nav li a:hover {
    background-color: #e5e7e9;
}

.sidebar-nav li.active > a {
    background-color: var(--primary-color);
    color: white;
    font-weight: 500;
}

/* Estilo para el grupo actual (estilo OpenAI) - Mayor especificidad */
.sidebar-nav li.current-group > a {
    background-color: #fff !important;
    color: #202123 !important;
    font-weight: 500 !important;
}

.sidebar-nav li.current-group > a:hover {
    background-color: #fff !important;
}

/* Asegurar que el estilo se aplique incluso cuando hay otras clases */
.sidebar-nav li.current-group.expanded > a {
    background-color: #fff !important;
    color: #202123 !important;
    font-weight: 500 !important;
}

/* Estilo para grupos con fecha de baja (aplicar opacidad) */
.sidebar-nav li.grupo-baja {
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}

.sidebar-nav li.grupo-baja:hover {
    opacity: 0.7;
}

/* Grupo en proceso de eliminación (sidebar) */
.sidebar-nav li.group-deleting {
    opacity: 0.72;
    pointer-events: none;
}
.sidebar-nav li.group-deleting > a {
    cursor: wait !important;
}
.sidebar-nav li.group-deleting .group-name {
    font-style: italic;
    color: var(--text-secondary, #6b7280);
}

/* Icono para expandir/colapsar */
.toggle-icon {
    margin-right: 10px;
    cursor: pointer;
    width: 16px;
    height: 16px;
    display: inline-block;
    transition: transform 0.3s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.sidebar-nav li.expanded > a > div > .toggle-icon {
    transform: rotate(90deg);
}

/* Ocultar el icono si no hay hijos (no ocupa espacio) */
.toggle-icon.hidden {
    display: none !important;
}

.content {
    flex-grow: 1;
    padding: 20px;
}







.sidebar-footer ul {
    list-style: none;
}
.sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 500;
}
.sidebar-footer a:hover {
    background-color: var(--bg-color);
}
.sidebar-footer i {
    width: 16px;
    text-align: center;
}

.template-mode-panel {
    display: none;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    height: 64vh;
}

.template-mode-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 4px;
}

.template-mode-panel-subtitle {
    font-size: 13px;
    color: #64748b;
}

.template-mode-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.template-mode-search i {
    color: #94a3b8;
    font-size: 14px;
}

.template-mode-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #0f172a;
}

.template-mode-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 360px);
    overflow-y: auto;
}

.template-mode-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-mode-item-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.template-mode-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.template-mode-item-emoji {
    flex-shrink: 0;
    min-width: 1.35em;
    text-align: center;
    font-size: 1.1em;
    line-height: 1.2;
}

.template-mode-item-emoji--none {
    color: #cbd5e1;
    font-size: 0.95em;
    font-weight: 500;
}

.template-mode-item-name {
    min-width: 0;
}

.template-mode-item-meta {
    font-size: 12px;
    color: #64748b;
}

.template-mode-item:hover {
    border-color: #a5b4fc;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.template-mode-item.active {
    border-color: #6366f1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(79, 70, 229, 0.05));
}

.template-mode-empty {
    padding: 18px;
    border: 1px dashed #c7d2fe;
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    background: #f8fafc;
}

.template-mode-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 12px 5px 0;
    
}

.template-mode-banner-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.template-mode-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4338ca;
    font-size: 18px;
}

.template-mode-banner-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #312e81;
}

.template-mode-banner-status {
    font-size: 13px;
    color: #4338ca;
}

.template-mode-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.template-mode-action-btn {
    border: 1px solid #c7d2fe;
    background: #ffffff;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-mode-new-btn {
    color: #059669;
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.template-mode-new-btn:hover {
    background: #d1fae5;
}

.template-mode-delete-btn {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.template-mode-delete-btn:hover:not(:disabled) {
    background: #fee2e2;
}

.template-mode-delete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.template-mode-rename-btn {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.template-mode-rename-btn:hover:not(:disabled) {
    background: #dbeafe;
}

.template-mode-rename-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.template-mode-banner-actions .btn-sincronizar-plantilla {
    color: #059669;
    border-color: #a7f3d0;
    background: #ecfdf5;
    padding: 8px 12px;
}

.template-mode-banner-actions .btn-sincronizar-plantilla:hover:not(:disabled) {
    background: #d1fae5;
}

.template-mode-banner-actions .btn-sincronizar-plantilla:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.template-mode-exit-btn {
    border: 1px solid #c7d2fe;
    background: #ffffff;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #4338ca;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-mode-exit-btn:hover {
    background: #eef2ff;
}

body.template-mode-active .template-mode-panel {
    display: flex;
}

body.template-mode-active .sidebar-nav,
body.template-mode-active .sidebar-search,
body.template-mode-active .sidebar-tags-filter {
    display: none;
}

body.template-mode-active #template-mode-banner {
    display: flex;
}

body.template-mode-active #breadcrumb-container {
    display: none !important;
}

body.template-mode-active #floating-chat-input {
    display: none !important;
}

.template-mode-placeholder {
    display: none;
    padding: 48px 24px;
    border: 2px dashed #c7d2fe;
    border-radius: 16px;
    text-align: center;
    background: #f8f9ff;
    color: #4338ca;
    margin-top: 24px;
}

.template-mode-placeholder-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4f46e5;
    font-size: 24px;
}

.template-mode-placeholder h3 {
    margin: 0;
    font-size: 20px;
    color: #312e81;
}

.template-mode-placeholder-message {
    margin-top: 8px;
    font-size: 15px;
    color: #4338ca;
}
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 3px;
    border-bottom: 1px solid var(--border-color);
    background-color: #edeff2;
    flex-shrink: 0;
}



/*
.breadcrumbs {
  font-size: 14px;
  color: #555;
}
.breadcrumbs span {
    color: var(--text-secondary);
}
.breadcrumbs span.active {
    color: var(--text-primary);
    font-weight: 500;
}
*/

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    padding-left: 0 !important;
    border-radius: 8px;
    font-size: 16px;
}

.breadcrumbs span.path-item {
    color: #3b3b3b;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.9em;;
}

.breadcrumbs span.separator {
    color: #ccc;
}
.path-item.clickable {
    cursor: pointer;
    text-decoration: underline;
}

.path-item.clickable:hover {
    color: #007bff; /* O el color que prefieras */
}

/* Estilos del Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-btn {
    background-color: #007bff;
    color: white;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dropdown-btn:hover {
    background-color: #0056b3;
}


.dropdown-btn.classic {

    background: #e0e0e0;
    color: #333;

}

.dropdown-btn.classic:hover {
    background: #d0d0d0 !important;
}


.dropdown-btn.not-classic {
    background:none;
    color: #000;
}
.dropdown-btn.not-classic:hover {
    background: #d0d0d0 !important;
}


.dropdown-content {
    display: none; /* Oculto por defecto */
    position: absolute;
    background-color: white;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
    z-index: 99999;
    border-radius: 6px;
    padding: 8px 0;
    margin-top: 4px;
    max-height: 500px;
    overflow: scroll;
}

.dropdown-content.show {
    display: block; /* Visible con la clase 'show' */
}

.dropdown-content span {
    color: black;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    font-size: 14px;
}

.dropdown-content span:hover {
    background-color: #f1f1f1;
}

.dropdown-content span.active {
    background-color: #e9f5ff;
    color: #007bff;
    font-weight: 600;
}

.dropdown-content span.create {
    color: #007bff;
    font-weight: 500;
    border-top: 1px solid #eee;
    margin-top: 4px;
    padding-top: 12px;
}





/*
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  min-width: 180px;
  text-align: left;
}

.dropdown-btn::after {
  content: "▾";
  float: right;
  color: #888;
}

.dropdown-content {

  position: absolute;
  top: 110%;
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  min-width: 200px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 250px;
  overflow-y: auto;
}

.dropdown-content span {
  display: block;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-content span:hover {
  background: #f5f5f5;
}

.dropdown-content .active {
  background: #f0f0ff;
  font-weight: bold;
  color: #333;
}

.dropdown-content .create {
  border-top: 1px solid #eee;
  color: #007bff;
  font-weight: bold;
  position: sticky;
    bottom: 0;
    background: #fff;
}
*/

/* Mostrar desplegable cuando se hace hover */
/*.dropdown:hover .dropdown-content {
  display: block;
}*/

    





.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}
.search-box {
    
    display: flex;
    gap: 2px;
    padding: 12px 18px;
    border-radius: 50px;
    align-items: center;
    background: #fff;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    z-index: 0;
    cursor: pointer;
    -webkit-transition: background .4s ease .1s, -webkit-transform .4s ease;
    transition: background .4s ease .1s, -webkit-transform .4s ease;
    transition: transform .4s ease, background .4s ease .1s;
    transition: transform .4s ease, background .4s ease .1s, -webkit-transform .4s ease;
    -webkit-backdrop-filter: saturate(100%) blur(20px);
    backdrop-filter: saturate(100%) blur(20px);

}


.search-box:before{
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50px;
    background: linear-gradient(120deg, #7c3aed 0%, #06b6d4 20%, #22c55e 40%, #f59e0b 60%, #ef4444 80%, #7c3aed 100%);
    background-size: 300% 300%;
    animation: aiGradientShift 8s ease infinite;
    z-index: -1;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px;
}


.user-profile {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #111827;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 16px;
}

.widget-separator-horizontal{
    display: none;
}
.content-body {
    padding: 24px 24px 30px 24px;
    flex-grow: 1;
    background-color: #fff;
    border-radius: 13px 0 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.entity-header {
    display: flex;
    margin-top: -9px;
    gap: 7px;
    align-items: center;
    margin-bottom: 0px;
    background-color: #fff;
    flex-shrink: 0;
    padding-top: 0;

}
.entity-header h1 {
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.entity-actions {
    display: flex;
    gap: 8px;
}

/* Ocultar entity-actions en modo edición de plantillas */
body.template-mode-active .entity-actions {
    display: none;
}
.btn {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition-fast);
}
.btn-primary {
    background-color: var(--primary-blue);
    color: #fff;
}
.btn-secondary {
    background-color: #fff;
    border-color: var(--border-color);
    color: var(--text-primary);
}
.btn:hover, .btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.content-tabs {
    display: flex;

    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
    background-color: #fff;
    flex-shrink: 0;
    padding-top: 10px;
    padding-bottom: 0;
}
.content-tabs a {
    padding: 8px 19px 12px 19px;
    color: var(--text-secondary);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: var(--transition-fast);
}
.content-tabs a.active {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}

a.tab-link.locked.active{
    color: #333;
    border-color: #333;
    cursor: not-allowed;
}


.tab-link {
    position: relative; /* Necesario para posicionar el icono */
}

button.tab-link{
        padding: 9px 15px;
    background: none;
    outline: none;
    border: 0;
    font-size: 1.3em;
    cursor: pointer;
}
button.tab-link:hover{
     color: #2563eb;
}

/* Ocultar el icono de lápiz por defecto */
.tab-link .edit-icon {
    display: none;
    position: absolute;
    right: 30px; /* Ajustado para no interferir con el botón de menú */
    top: 49%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #555;
    cursor: pointer;
}

/* Mostrar el icono al pasar el ratón sobre la pestaña */
.tab-link:hover .edit-icon {
    display: block;
    
}
.tab-link .edit-icon:hover {
    color: #307bff;
}

/* Estilos para el modo edición */
.tab-link.editing .tab-link-name {
    background-color: #fff;
    outline: 2px solid #007bff; /* Un borde azul para indicar que se está editando */
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
    cursor: text;
}

/* En modo edición, no queremos que el hover en el icono lo oculte */
.tab-link.editing:hover .edit-icon,
.tab-link.editing .edit-icon {
    display: block;
}

/* Ocultar el lápiz mientras el texto está enfocado para no molestar */
.tab-link .tab-link-name:focus + .edit-icon {
    display: none;
}





/* Posicionar el icono de eliminar (X) */
.tab-link .delete-tab-btn {
    display: none;
    position: absolute;
    left: 8px; /* Ajustado para mejor posicionamiento */
    top: 49%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #888;
    cursor: pointer;
}

.tab-link .delete-tab-btn:hover {
    color: #e63946; /* Rojo al pasar el ratón */
}

/* Indicador de sincronización (punto rojo/verde) */
.tab-link .sync-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.tab-link .sync-indicator.not-synced {
    background-color: #dc3545; /* Rojo para no sincronizado */
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.tab-link .sync-indicator.synced {
    background-color: #28a745; /* Verde para sincronizado */
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

/* Mostrar ambos iconos al hacer hover */
.tab-link:hover .edit-icon,
.tab-link:hover .delete-tab-btn {
    display: block;
}

/* --- AÑADIR ESTILOS PARA VISTA DE DOCUMENTOS --- */
.dynamic-table {
    border-collapse: collapse;
    font-size: 14px;
}

.dynamic-table th, .dynamic-table td {
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    text-align: left;
}

.dynamic-table th {
    background-color: #f8f9fa;
    font-weight: 600;
}





.element-wrapper {
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    position: relative;
}

/* Estilos para drop zone de formulario */
.element-wrapper.form-drop-zone {
    position: relative;
}

.element-wrapper.form-drop-zone.drag-over {
    background-color: #f0f9ff;
    border: 3px dashed #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.element-wrapper.form-drop-zone.drag-over::before {
    content: '📄 Suelta el PDF aquí para autocompletar con IA';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 600;
    color: #3b82f6;
    z-index: 1000;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.98);
    padding: 30px 50px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
    border: 2px solid #3b82f6;
    white-space: nowrap;
    animation: pulse-drop 1.5s ease-in-out infinite;
}

@keyframes pulse-drop {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.9;
    }
}

/* Indicador de carga para procesamiento IA */
.form-ai-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 8px;
}

.form-ai-loading-content {
    text-align: center;
    color: #3b82f6;
}

.form-ai-loading-content i {
    font-size: 48px;
    margin-bottom: 15px;
    color: #3b82f6;
}

.form-ai-loading-content p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 15px;
}

.cancel-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.cancel-ai-badge:hover {
    background-color: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(220, 53, 69, 0.4);
}

.cancel-ai-badge:active {
    transform: translateY(0);
    box-shadow: 0 2px 3px rgba(220, 53, 69, 0.3);
}

.cancel-ai-badge i {
    font-size: 12px;
}

.cancel-ai-badge-small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(220, 53, 69, 0.3);
    margin-left: 10px;
}

.cancel-ai-badge-small:hover {
    background-color: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.4);
}

.cancel-ai-badge-small:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(220, 53, 69, 0.3);
}

.cancel-ai-badge-small i {
    font-size: 10px;
}

.factura-processing {
    display: flex;
    align-items: center;
    gap: 8px;
}

.thinking-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.element-wrapper h3.element-title {
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
}
.element-wrapper h3.element-title:focus {
    outline: 2px solid #007bff;
    border-radius: 4px;
}


.empty-table-cell { text-align: center; padding: 30px; color: #888; }
.file-name-cell i { color: #007bff; margin-right: 10px; font-size: 1.2em; }

.status-tag {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 12px;
    color: #fff;
}
.status-completado { background-color: #28a745; }
.status-pendiente { background-color: #ffc107; color: #333; }
.status-error { background-color: #dc3545; }
.status-desconocido { background-color: #6c757d; }
.status-cancelado { background-color: #dc3545; }

.factura-row-cancelada {
    opacity: 0.8;
}

.factura-row-cancelada:hover {
    opacity: 1;
}

.factura-canceled {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #dc3545;
    font-size: 13px;
    font-weight: 500;
}



/* --- Sistema de Arrastre (jQuery UI) --- */
.draggable-container {
    /*position: relative;
    height: 500px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px;*/
    position: relative;
    min-height: 60vh;
    height: auto;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px;
    
    /* AÑADIDO PARA LA CUADRÍCULA SUTIL */
    background-image: 
        linear-gradient(to right, #f6f6f6 1px, transparent 1px),
        linear-gradient(to bottom, #f6f6f6 1px, transparent 1px);
    background-size: 20px 20px; /* Tamaño de cada celda de la cuadrícula */
    background-position: -1px -1px; /* Ajusta la posición para que las líneas estén 'dentro' */
    /* Para que sea más sutil, puedes cambiar el color de var(--border-color) a algo como rgba(0,0,0,0.05) */



}
.form-widget {
    position: absolute;
    padding: 16px;
    cursor: grab;
    transition: box-shadow 0.2s ease;
    /* El ancho base lo controla el sistema de grid (inline styles en píxeles).
       No forzamos aquí un 50% para permitir widgets de 1 sola columna/cuadrito. */
    border: 1px #eee solid;
}
.form-widget.wide {
    /* En modo "wide" dejamos que el JS asigne el ancho necesario;
       evitamos fijar un 100% rígido para no bloquear el resize. */
    width: auto;
}
.form-widget:active {
    cursor: grabbing;
    z-index: 100;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.form-widget label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-widget input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}


.form-widget label input{
    flex-grow: 1;
    font-weight: 500;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: var(--transition-fast);
    cursor: text;
    margin-left: 1px;
    margin-right: 5px;
    outline: none;
    width: 100%;
    background: none;
    margin-left: 0 !important;
    padding: 0;
}

/* --- Gestor de Archivos Mejorado --- */
.file-breadcrumbs {
    margin-bottom: 16px;
    color: var(--text-secondary);
}
.breadcrumb-part {
    cursor: pointer;
}
.breadcrumb-part:not(:last-child)::after {
    content: '/';
    margin: 0 8px;
}
.breadcrumb-part:hover {
    color: var(--primary-blue);
}
.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.folder-grid .file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}
.folder-grid .file-item:hover {
    transform: scale(1.02);
    background-color: #f3f4f6;
    box-shadow: var(--shadow-sm);
}
.folder-grid .file-item i {
    color: var(--primary-blue);
    font-size: 20px;
}

/* --- Tabla Dinámica Mejorada --- */
.dynamic-table-container {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
}
.table-group {
    margin-bottom: 24px;
}
.table-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    cursor: pointer;
}
.dynamic-table {
    width: 100%;
    border-collapse: collapse;
}
.dynamic-table th, .dynamic-table td {
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    padding: 12px 8px;
    vertical-align: middle;
}
.dynamic-table td[contenteditable="true"]:focus {
    background-color: #f0f8ff;
    outline: 2px solid var(--primary-blue);
}
.tag {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}
.tag-comercial { background-color: #FEF3C7; color: #92400E; }
.tag-director { background-color: #D1FAE5; color: #065F46; }
.tag-incidencias { background-color: #FEE2E2; color: #991B1B; }

.btn-add-row, .btn-add-group {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 8px;
}
.btn-add-row:hover, .btn-add-group:hover {
    color: var(--text-primary);
}

.dynamic-table tr.completed td {
    text-decoration: line-through;
    color: var(--text-secondary);
}
.dynamic-table .row-delete {
    color: var(--text-secondary);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition-fast);
}
.dynamic-table tr:hover .row-delete {
    visibility: visible;
    opacity: 1;
}
.dynamic-table .row-delete:hover {
    color: #EF4444;
}






/* AÑADE ESTO AL FINAL DE TU css/style.css */

/* Controles y salida JSON */
.info-view-controls {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    margin: 0 auto;
    justify-content: center;
    margin-top: 17px !important;
}

/* Estilos para el modo edición del tablero */
.edit-board-btn {
    transition: all 0.3s ease;
}

.edit-board-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.draggable-form-container {
    min-height: 400px;
    border-radius: 8px;
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    max-width: 100%;
}

/* Modo normal: sin cuadrícula, diseño limpio */
.draggable-form-container.readonly-mode {
    background-color: transparent !important;
    border: none !important;
    min-height: auto !important;
    padding: 0 !important;
    background-image: none !important;
    overflow: hidden;
}

/* Cuando el ancho del contenedor es < 1495px, los inputs se acortan para no solaparse con la columna derecha (mapa, galería). */
.draggable-form-container.form-layout-narrow .clean-widget .clean-input,
.draggable-form-container.form-layout-narrow .clean-widget .clean-textarea,
.draggable-form-container.form-layout-narrow .clean-widget select.clean-input {
    font-size: 0.9375em;
}
.draggable-form-container.form-layout-narrow .clean-widget .address-selected-text {
    font-size: 0.9375em;
}

/* En modo edición, permitir overflow para drag & drop */
.element-wrapper.form-drop-zone:has(.draggable-form-container.editing-mode) {
    overflow: visible;
}

/* Modo edición: con sistema de grid basado en columnas */
.draggable-form-container.editing-mode {
    background-color: #f8fafc !important;
    border: 2px dashed #e2e8f0 !important;
    min-height: 700px !important;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: auto;
}

/* ========================================
   SISTEMA DE GRID VISUAL
   ======================================== */

/* Overlay del grid */
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

/* Líneas verticales del grid (columnas) */
.grid-line-vertical {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(148, 163, 184, 0.3);
    pointer-events: none;
}

/* Líneas horizontales del grid (filas) */
.grid-line-horizontal {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(148, 163, 184, 0.3);
    pointer-events: none;
}

/* Indicador de drop durante el arrastre */
.grid-drop-indicator {
    position: absolute;
    background-color: rgba(59, 130, 246, 0.15);
    border: 2px dashed #3b82f6;
    border-radius: 8px;
    pointer-events: none;
    z-index: 5;
    display: none;
    transition: all 0.15s ease;
}

/* Slots clickeables vacíos */
.grid-slot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px dashed transparent;
    border-radius: 6px;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.2s ease;
    z-index: 1;
}

.grid-slot:hover {
    background-color: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.4);
}

.grid-slot-icon {
    font-size: 20px;
    color: rgba(148, 163, 184, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.grid-slot:hover .grid-slot-icon {
    opacity: 1;
    color: #3b82f6;
    transform: scale(1.1);
}

/* Efectos visuales para widgets en modo edición */
.form-widget.editing-mode {
    transition: box-shadow 0.2s ease, transform 0.1s ease;
    z-index: inherit !important;
    background: white;
    border-radius: 8px;
    /*overflow: hidden; /* Evitar que el contenido fuerce el tamaño del widget */
}

.form-widget.editing-mode:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.form-widget.editing-mode.ui-draggable-dragging {
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
    transform: rotate(2deg);
    z-index: 1000;
}

.form-widget.editing-mode.ui-resizable-resizing {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* Estilos para indicadores visuales de drag and drop */
.form-widget.dragging {
    opacity: 0.85;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.form-widget.widget-swap-target {
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    transform: scale(1.02);
    transition: all 0.2s ease;
}

.form-widget.widget-displacing {
    transition: left 0.3s ease, top 0.3s ease;
    background-color: rgba(59, 130, 246, 0.05);
}

/* Estilos para separadores */
.form-widget.widget-separator {
    background: transparent;
    border: none;
    padding: 0;
    cursor: default;
}

.form-widget.widget-separator .widget-header {
    display: none;
}

.form-widget.widget-separator .widget-content {
    padding: 0;
    margin: 0;
}

.widget-separator-horizontal {
    height: 2px;
    min-height: 2px;
    background: linear-gradient(to right, transparent, #d1d5dc, transparent);
    border: none;
    margin: 10px 0;
}

.widget-separator-horizontal.thick {
    height: 4px;
    min-height: 4px;
}

.widget-separator-vertical {
    width: 2px;
    min-width: 2px;
    background: linear-gradient(to bottom, transparent, #d1d5dc, transparent);
    border: none;
    margin: 0 10px;
}

.widget-separator-vertical.thick {
    width: 4px;
    min-width: 4px;
}

/* Estilo para cuando no hay widgets en el tablero */
.draggable-form-container:empty::before {
    content: "Arrastra y suelta las variables aquí para organizarlas";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #9ca3af;
    font-size: 14px;
    text-align: center;
    pointer-events: none;
}

/* Estilos para modo solo lectura */
.form-widget.readonly-mode {
    cursor: default;
    opacity: 0.9;
}

.form-widget.readonly-mode:hover {
    box-shadow: none;
    transform: none;
}

.form-widget.readonly-mode .widget-header label input[readonly] {
    background-color: #f8f9fa;
    color: #495057;
    cursor: default;
}

.form-widget.readonly-mode .content-input[readonly],
.form-widget.readonly-mode .content-input[disabled] {
    background-color: #f8f9fa;
    color: #495057;
    cursor: default;
    border-color: #e9ecef;
}

.form-widget.readonly-mode .widget-menu-toggle {
    display: none !important;
}

.form-widget.readonly-mode .widget-menu {
    display: none !important;
}

.no-image-placeholder {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    background-color: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 4px;
}

/* Estilos para widgets limpios (modo normal) */
.clean-widget {
    position: absolute;
    /*background-color: #ffffff;*/
    /*border: 1px solid #e5e7eb;*/
    border-radius: 8px;
    padding: 10px;
    /*box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);*/
    cursor: default;
}

.clean-widget-header {
    margin-bottom: 5px;
}

.clean-widget-header label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    display: block;
    margin-bottom: 4px;
}

.clean-widget-content {
    width: 100%;
    height: calc(100% - 20px);
}

.clean-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #111827;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.clean-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}

.clean-input:hover {
    border-color: #9ca3af;
}

/* ============================================
   FEEDBACK VISUAL PARA GUARDADO DE VALORES
   ============================================ */

/* Feedback de éxito - borde verde */
.input-feedback-success,
.input-feedback-success:focus,
.input-feedback-success:hover,
.clean-input.input-feedback-success,
.clean-input.input-feedback-success:focus,
.content-input.input-feedback-success,
.content-input.input-feedback-success:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Feedback de error - borde rojo */
.input-feedback-error,
.input-feedback-error:focus,
.input-feedback-error:hover,
.clean-input.input-feedback-error,
.clean-input.input-feedback-error:focus,
.content-input.input-feedback-error,
.content-input.input-feedback-error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Animación de transición al quitar la clase */
.clean-input,
.content-input {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================ */

/* Estilos específicos para textarea en modo clean */
.clean-textarea {
    resize: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: 1.5;
    overflow-y: auto;
}

/* Estilos para número formateado en modo clean */
.clean-number-display {
    user-select: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;
    border: 1px #d1d5dc solid;
    border-radius: 6px;
    min-height: 20px;
    transition: background-color 0.2s;
}

.clean-number-display:hover {
    background-color: #f3f4f6 !important;
}

.clean-number-input {
    font-family: inherit;
    font-size: inherit;
}

/* Estilos para inputs de fecha */
.clean-date-input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.clean-date-input,
.date-input {
    cursor: pointer;
    position: relative;
    background-color: #ffffff;
    /* El input date nativo ya tiene su propio icono de calendario */
    padding-right: 12px;
}

/* Estilos específicos para input date nativo */
input[type="date"].clean-date-input,
input[type="date"].date-input {
    /* El navegador muestra su propio selector de fecha, no necesitamos icono personalizado */
    padding-right: 12px;
    font-family: 'Inter', sans-serif;
}

.clean-date-input-wrapper .clean-date-input.has-clear-btn {
    padding-right: 12px;
}

.clean-date-input:hover,
.date-input:hover {
    border-color: #2563eb;
    background-color: #f9fafb;
}

/* Los inputs date nativos no necesitan z-index especial, el navegador los maneja */

/* Botón para limpiar fecha */
.clean-date-clear-btn {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    color: #6B7280;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    z-index: 10;
}

.clean-date-clear-btn:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.clean-date-clear-btn:active {
    background-color: #e5e7eb;
}

/* Estilos para menú de widget de galería */
.widget-gallery-menu-btn {
    color: #6B7280;
    font-size: 16px;
    transition: all 0.2s ease;
}

.widget-gallery-menu-btn:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.widget-gallery-menu-dropdown {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 150px;
    margin-top: 4px;
}

.widget-gallery-menu-item {
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    color: #374151;
    font-size: 14px;
}

.widget-gallery-menu-item:hover {
    background-color: #f9fafb;
}

.widget-gallery-menu-item i {
    margin-right: 8px;
    color: #6B7280;
}

.clean-image-preview {
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.clean-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);

}
.json-output-container {
    margin-top: 16px;
}
.json-output-container label {
    font-weight: 500;
    color: var(--text-secondary);
}
#json-output {
    background-color: #f3f4f6;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 8px;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: monospace;
    max-height: 200px;
    overflow-y: auto;
}

/* Estructura del Widget mejorada */
.form-widget {
    display: flex;
    flex-direction: column;
    width: 250px; /* Ancho inicial */
    /*min-width: 200px; /* Ancho mínimo */
    max-width: 100%; /* Ancho máximo */
    height: auto; /* Altura automática */
    padding: 5px 0; /* Quitamos padding para ponerlo en los hijos */
    border-radius: 10px;
    background: #fff;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 12px;
    position: relative;
}

.widget-header label {
    flex-grow: 1;
    font-weight: 500;
    padding: 4px 6px; /* Añadimos padding para un mejor look al enfocar */
    margin: -4px -6px; /* Compensamos el padding para mantener la alineación */
    border-radius: var(--radius-sm);
    border: 1px solid transparent; /* Borde invisible por defecto */
    transition: var(--transition-fast);
    cursor: text;
    margin-left: 1px;
    margin-right: 5px;
}
/* Al pasar el ratón, damos una pista visual sutil */
.widget-header label:hover {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}

/* Al hacer clic (focus), se transforma en un input */
.widget-header label:focus {
    background-color: #fff;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 1px var(--primary-blue); /* Anillo de enfoque moderno */
    cursor: text;
    outline: none; /* Quitamos el contorno feo por defecto del navegador */
}


.widget-content {
    padding: 3px 12px;
    flex-grow: 1;
    overflow: hidden; /* Evitar que el contenido fuerce el tamaño del widget */
}

/* Centrar verticalmente el contenido de los widgets de título */
.form-widget[data-type="título"] .widget-content,
.form-widget.widget-title .widget-content,
.clean-widget.widget-title .clean-widget-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 0 12px;
}

.form-widget[data-type="título"] .widget-content .title-input,
.form-widget.widget-title .widget-content .title-input,
.clean-widget.widget-title .clean-widget-content .title-input {
    width: 100%;
    margin: 0;
}

.widget-content input, .widget-content select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

/* Menú de 3 puntos (minimalista) */
.widget-menu-toggle {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}
.widget-menu-toggle:hover {
    background-color: #e5e7eb;
}

.widget-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 38px;
    right: 8px;
    background-color: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    z-index: 999999;
    width: 150px;
    overflow: visible; /* Permitir que el submenú se muestre fuera del menú */

}
.widget-menu.active {
    display: block;
}

.widget-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}
.widget-menu-item:hover {
    background-color: var(--bg-color);
}
.widget-menu-item.destructive:hover {
    background-color: #fef2f2;
    color: #dc2626;
}

/* Tirador para redimensionar (jQuery UI Resizable) */
.ui-resizable-handle.ui-resizable-e {
    width: 10px;
    background: transparent;
    cursor: ew-resize;
    right: -5px;
    top: 0;
    height: 100%;
}
.ui-resizable-e::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 20px;
    background-color: var(--border-color);
    border-radius: 2px;
    transition: var(--transition-fast);
}
.form-widget:hover .ui-resizable-e::after {
    background-color: var(--primary-blue);
}





/* AÑADE ESTO AL FINAL DE TU css/style.css */

/* Estilos para el submenú de cambio de tipo */
.widget-menu-item.with-submenu {
    position: relative; /* Necesario para posicionar el submenú */
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: visible; /* Asegurar que el submenú no se corte */
}

.with-submenu .fa-chevron-right {
    font-size: 0.7em;
    color: var(--text-secondary);
}

.widget-submenu {
    display: none; /* Oculto por defecto */
    position: absolute;
    left: 100%; /* Se posiciona a la derecha del menú principal */
    top: -5px; /* Alineación vertical */
    background-color: #fff; /* Aseguramos un fondo blanco */
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    z-index: 1000000; /* Asegura que esté por encima del widget-menu (999999) */
    width: 140px;
    padding: 4px;
    margin-left: 4px; /* Pequeño espacio entre el menú y el submenú */
}

.widget-submenu-item {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.widget-submenu-item:hover {
    background-color: var(--bg-color);
}

/* Hacemos que el submenú aparezca al pasar el ratón sobre el padre */
.with-submenu.open > .widget-submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Si el submenú se sale por la derecha, mostrarlo a la izquierda */
.widget-menu-item.with-submenu.open.right-edge > .widget-submenu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 4px;
}








.widget-content textarea {
    width: 100%;
    height: 100% !important;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-family); /* Heredar la fuente */
    font-size: inherit; /* Heredar el tamaño de fuente */
    min-height: 40px; /* Altura mínima más pequeña para permitir reducir */
    resize: none; /* Deshabilitamos el tirador nativo del navegador */
    box-sizing: border-box; /* Incluir padding en el cálculo de altura */
}

/* Estilos para los nuevos tiradores de redimensionamiento de jQuery UI */
.ui-resizable-handle.ui-resizable-s {
    height: 10px;
    width: 100%;
    background: transparent;
    cursor: ns-resize;
    bottom: -5px;
    left: 0;
}
.ui-resizable-s::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background-color: var(--border-color);
    border-radius: 2px;
    transition: var(--transition-fast);
}
.form-widget:hover .ui-resizable-s::after {
    background-color: var(--primary-blue);
}

.ui-resizable-handle.ui-resizable-se {
    width: 14px;
    height: 14px;
    background: transparent;
    cursor: nwse-resize;
    bottom: -5px;
    right: -5px;
}







/* Estilos para el campo de imagen (Dropzone) */
.widget-content .image-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: #f9fafb;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-fast);
}

.widget-content .image-dropzone.dz-drag-hover {
    border-color: var(--primary-blue);
}

.widget-content .image-dropzone .dz-message {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Estilos para la imagen ya subida */
.widget-image-preview {
    position: relative;
    width: 100%;
}
.widget-image-preview img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

.remove-image-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    opacity: 0;
    transition: var(--transition-fast);
}

.widget-image-preview:hover .remove-image-btn {
    opacity: 1;
}





/* --- ESTILOS PARA EL CHAT FLOTANTE --- */
#chat-modal-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 400px;
    max-height: 600px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    display: none; /* Se activa con JS */
    color: #ececf1;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    transition: all 0.3s ease;
}

#chat-modal-container.minimized {
    display: none;
}

#chat-modal-container.maximized {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
    z-index: 9999999;
}

.chat-main-layout { 
    display: flex; 
    flex-direction: column;
    height: 100%;
    max-height: 600px;
    position: relative;
}

#chat-modal-container.maximized .chat-main-layout {
    max-height: 100vh;
    height: 100vh;
    flex-direction: row;
}

/* Input flotante Modo IA: desactivado (acceso solo vía búho) */
#floating-chat-input {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Pantallas < 1400px: botón Modo IA flotante en esquina inferior derecha */
@media (max-width: 1399px) {
    #floating-chat-input {
        top: auto !important;
        bottom: 24px;
        right: 24px;
        left: auto;
        background: #000;
    border-radius: 50px;
    }
}

#crm-btn {
    cursor:pointer;
    display: none; /* Oculto por defecto, se mostrará solo si el usuario tiene permisos */
}

/* Ocultar botones de edición por defecto, se mostrarán solo si el usuario tiene permisos */
#master-menu-btn,
.add-workspace-btn {
    display: none;
}

#floating-chat-input.visible {
    display: block !important;
}

.floating-chat-input-container {
    transition: all 0.3s ease;
    cursor: pointer;
}

.floating-chat-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    border-radius: 50px;
    padding: 10px 15px;
    overflow: visible;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background-clip: padding-box;
    max-width: 130px;
}

/* Borde animado multicolor - solo en hover */
.floating-chat-input-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50px;
    background: linear-gradient(90deg, 
        #ff0000 0%, 
        #ff7f00 14.28%, 
        #ffff00 28.56%, 
        #00ff00 42.84%, 
        #0000ff 57.12%, 
        #4b0082 71.4%, 
        #9400d3 85.68%, 
        #ff0000 100%);
    background-size: 400% 400%;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
    animation: gradient-border-rotate 5s linear infinite;
}

.floating-chat-input-wrapper:hover::before {
    opacity: 1;
    animation: gradient-border-rotate 4s linear infinite;
}

@keyframes gradient-border-rotate {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Efecto de brillo adicional en hover */
.floating-chat-input-wrapper::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
    animation: shine-effect 2s ease-in-out infinite;
}

.floating-chat-input-wrapper:hover::after {
    opacity: 1;
    animation: shine-effect 1s ease-in-out infinite;
}

@keyframes shine-effect {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}

/* Icono de lupa con estrella */
.ai-search-icon {
    color: #1f1f1f;
    font-size: 18px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-search-icon::after {
    content: '✨';
    position: absolute;
    top: -8px;
    right: -10px;
    font-size: 12px;
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Texto Modo IA */
.ai-mode-text {
    color: #1f1f1f;
    font-size: 14px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
}

.floating-chat-input-wrapper:hover {
    background-color: #fff;
    /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(99, 102, 241, 0.3);*/
}

/* Asegurar que el contenido sea visible cuando se quita el background */
.floating-chat-input-wrapper:hover .ai-search-icon,
.floating-chat-input-wrapper:hover .ai-mode-text {
    position: relative;
    z-index: 2;
}

/* Panel de historial (deslizamiento desde izquierda en modo normal, integrado en maximizado) */
.chat-history-panel {
    position: absolute;
    top: 0;
    left: -350px;
    width: 300px;
    height: 100%;
    background-color: #f9f9f9;
    z-index: 1001;
    transition: left 0.3s ease;

    display: flex;
    flex-direction: column;

    box-shadow: 0px 0px 18px 6px rgba(0, 0, 0, 0.1);
    border-radius: 15px;

}

.chat-history-panel.open {
    left: 0;
}

/* En modo maximizado, el historial está siempre visible e integrado */
#chat-modal-container.maximized .chat-history-panel {
    position: relative;
    left: 0;
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid #e5e7eb;
    box-shadow: none;
}

#chat-modal-container.maximized .chat-history-panel .close-history-btn {
    display: none;
}

/* Ocultar botón de abrir historial cuando está maximizado */
#chat-modal-container.maximized #open-history-panel-btn {
    display: none;
}

.history-panel-header {
    padding: 14px 17px;
    border-bottom: 1px solid #d6d6d6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 15px 15px 0 0;
}

.history-panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.close-history-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transition: all 0.2s;
}

.close-history-btn:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.history-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Botones del header del chat */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background-color: #fff;
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.history-menu-btn,
.minimize-chat-btn,
.maximize-chat-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.history-menu-btn:hover,
.minimize-chat-btn:hover,
.maximize-chat-btn:hover {
    background-color: #f3f4f6;
    color: #111827;
}

#chat-modal-container.maximized .maximize-chat-btn {
    display: none;
}

#chat-modal-container.maximized .minimize-chat-btn {
    display: flex;
}

#chat-modal-container:not(.maximized) .maximize-chat-btn {
    display: flex;
}

#chat-modal-container:not(.maximized) .minimize-chat-btn {
    display: flex;
}

.new-chat-button {
    width: 100%;
    padding: 8px 17px;
    background-color: #ffffff;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    color: #333;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin-right:5px

}

.new-chat-button:hover { 
    background-color: #efefef; 
}

.chat-history-search-wrap {
    position: relative;
    padding: 0;
}
.chat-history-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 12px;
    pointer-events: none;
}
.chat-history-search-input {
    width: 100%;
    padding: 8px 28px 8px 32px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    outline: none;
}
.chat-history-search-input::placeholder {
    color: #999;
}
.chat-history-search-input:focus {
    border-color: #2563eb;
}
.chat-history-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}
.chat-history-search-clear:hover {
    color: #333;
}

.chat-history-no-results {
    padding: 16px 12px;
    text-align: center;
    color: #666;
    font-size: 13px;
}

.chat-history-load-more {
    padding: 12px;
    text-align: center;
    color: #888;
    font-size: 12px;
}

.chat-history-load-more.is-loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
    border: 2px solid #ddd;
    border-top-color: #666;
    border-radius: 50%;
    animation: chat-history-spin 0.7s linear infinite;
}

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

.history-nav { 
    flex-grow: 1; 
    overflow-y: auto; 
}

.chat-history-list-container {
    padding: 0;
    margin: 0;
}

.chat-history-date-group {
    margin-bottom: 0;
}

.chat-history-date-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 12px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    background: #f9f9f9;
    border-bottom: 1px solid #e5e7eb;
}

.chat-history-group-list {
    list-style: none;
    padding: 0 8px 8px;
    margin: 0;
}

#chat-history-list { list-style: none; padding: 0; margin: 0; }
#chat-history-list.chat-history-list-container .chat-history-group-list .history-link {
    margin-bottom: 0;
}
.history-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}
.history-link .history-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.history-link i { margin-right: 10px; }
.history-link.active { background-color: #eeeeee; }
.history-link:hover { background-color: #e5e5e5; }

.chat-history-actions {
    position: relative;
    flex-shrink: 0;
    margin-left: 4px;
}
.chat-history-menu-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-history-menu-btn:hover {
    background-color: #e5e5e5;
    color: #333;
}
.chat-history-dropdown {
    display: none;
    position: fixed;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10002;
    padding: 4px 0;
}
.chat-history-dropdown.open {
    display: block;
}
.chat-history-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    text-align: left;
}
.chat-history-option i {
    width: 16px;
    color: #666;
}
.chat-history-option:hover {
    background-color: #f3f4f6;
}
.chat-history-option-delete:hover {
    background-color: #fee2e2;
    color: #dc2626;
}
.chat-history-option-delete:hover i {
    color: #dc2626;
}

/* Modal editar nombre del chat (Nexo) */
.chat-edit-name-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.chat-edit-name-modal.is-open {
    display: flex !important;
}
.chat-edit-name-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}
.chat-edit-name-dialog {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    min-width: 320px;
    max-width: 90vw;
}
.chat-edit-name-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}
.chat-edit-name-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.chat-edit-name-close {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}
.chat-edit-name-close:hover {
    background: #f3f4f6;
    color: #333;
}
.chat-edit-name-body {
    padding: 16px;
}
.chat-edit-name-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}
.chat-edit-name-input:focus {
    border-color: #2563eb;
}
.chat-edit-name-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
}
#logout-btn{
    cursor: pointer;
}

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

/* === MASTER POPUP MENU === */
.master-menu-wrapper {
    position: relative;
}

#master-menu-btn {
    cursor: pointer;
}

.master-popup-menu {
    display: none;
    position: absolute;
    left: calc(100% + 8px);
    bottom: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 6px;
    z-index: 1100;
    animation: masterPopupFadeIn 0.15s ease-out;
}

.master-popup-menu.visible {
    display: flex;
    flex-direction: column;
}

@keyframes masterPopupFadeIn {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.master-popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.master-popup-item:hover {
    background: #f3f4f6;
    color: #111827;
}

.master-popup-item i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: #6b7280;
    transition: color 0.15s ease;
}

.master-popup-item:hover i {
    color: #374151;
}
.user-profile-item { display: flex; align-items: center; }
.user-avatar { width: 30px; height: 30px; background-color: #19c37d; color: white; display: grid; place-items: center; border-radius: 4px; margin-right: 10px; font-weight: bold; }

/* --- Ventana principal del chat --- */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* En modo maximizado, el chat-main ocupa el resto del espacio */
#chat-modal-container.maximized .chat-main {
    flex: 1;
    min-width: 0;
}

.model-selector { 
    color: #444; 
    font-size: 14px;
    font-weight: 500;
}

.model-version { 
    opacity: 0.5; 
    font-size: 12px;
}

/* Pantalla de bienvenida */
#chat-welcome-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 0;
    max-width: 400px;
    margin: 0 auto;
}

.welcome-logo { 
    width: 60px; 
    height: 60px; 
    background: white; 
    border-radius: 50%; 
    display: grid; 
    place-items: center; 
    margin-bottom: 16px; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.welcome-logo img { 
    width: 40px; 
}

.suggestion-cards {
    display: grid; 
    grid-template-columns: 1fr 1fr;
    gap: 12px; 
    max-width: 100%;
    width: 100%;
}

.suggestion-cards .card {
    padding: 12px; 
    border: 1px solid #d6d6d6; 
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.suggestion-cards .card:hover { 
    background-color: #efefef; 
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.suggestion-cards .card p { 
    margin: 4px 0 0 0; 
    color: #4d4d4d; 
    font-size: 12px;
}

.suggestion-cards .card strong { 
    color: #444; 
    font-size: 13px;
    display: block;
}

/* Log de mensajes */
#chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 0;
    max-width: 900px;
    margin: 0 auto;
}

.chat-message {
    padding: 12px 16px;
    display: flex;
    margin-bottom: 8px;
}
.chat-message.user { 
    background-color: transparent; 
    flex-direction: row-reverse;
}
.chat-message.user .message-content{
    text-align: right;
} 
.chat-message.ai { 
    background-color: #f7f7f7;
    border-radius: 17px;
    min-width: 800px;
}

/* Pausa human-in-the-loop (LangGraph interrupt) — estilo limpio tipo Apple */
.chat-message.ai.langgraph-interrupt-card {
    background: transparent;
    border-radius: 0;
    padding: 12px 0 28px;
    margin-bottom: 4px;
}

.langgraph-interrupt-card .interrupt-card-inner {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #1d1d1f;
    background: #ffffff;
    border-radius: 18px;
    padding: 22px 22px 20px;
    border: 0.5px solid rgba(60, 60, 67, 0.12);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 28px rgba(0, 0, 0, 0.07);
    -webkit-font-smoothing: antialiased;
}

.langgraph-interrupt-card .interrupt-card-header {
    margin-bottom: 4px;
}

.langgraph-interrupt-card .interrupt-card-title {
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.022em;
    line-height: 1.25;
    margin: 0 0 12px;
    color: #1d1d1f;
}

.langgraph-interrupt-card .interrupt-card-banner {
    font-size: 0.8125rem;
    color: #6e6e73;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: rgba(255, 159, 10, 0.08);
    border-radius: 10px;
    border: 0.5px solid rgba(255, 159, 10, 0.22);
}

.langgraph-interrupt-card .interrupt-card-body {
    font-size: 0.9375rem;
    line-height: 1.47;
    margin-bottom: 20px;
    color: #6e6e73;
}

.langgraph-interrupt-card .interrupt-card-message {
    margin: 0;
}

.langgraph-interrupt-card .interrupt-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

@media (max-width: 540px) {
    .langgraph-interrupt-card .interrupt-options {
        grid-template-columns: 1fr;
    }
}

.langgraph-interrupt-card .interrupt-option-tile {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 16px 16px 15px;
    text-align: left;
    font: inherit;
    cursor: pointer;
    color: inherit;
    background: #fbfbfd;
    border: 0.5px solid rgba(60, 60, 67, 0.14);
    border-radius: 14px;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.langgraph-interrupt-card .interrupt-option-tile:hover {
    background: #ffffff;
    border-color: rgba(60, 60, 67, 0.22);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.langgraph-interrupt-card .interrupt-option-tile:focus {
    outline: none;
}

.langgraph-interrupt-card .interrupt-option-tile:focus-visible {
    box-shadow:
        0 0 0 4px rgba(0, 122, 255, 0.28),
        0 4px 18px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 122, 255, 0.45);
}

.langgraph-interrupt-card .interrupt-option-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.langgraph-interrupt-card .interrupt-option-titleline {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.3;
    color: #1d1d1f;
}

.langgraph-interrupt-card .interrupt-option-subline {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.42;
    color: #86868b;
}

.langgraph-interrupt-card .interrupt-custom-row {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 0.5px solid rgba(60, 60, 67, 0.1);
}

.langgraph-interrupt-card .interrupt-custom-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6e6e73;
    margin-bottom: 8px;
}

#cancel-chat-btn, .cancel-chat-btn{
    width: max-content;
}

.langgraph-interrupt-card .interrupt-custom-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 12px 14px;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #1d1d1f;
    background: #fbfbfd;
    border: 0.5px solid rgba(60, 60, 67, 0.16);
    border-radius: 12px;
    resize: vertical;
    min-height: 72px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.langgraph-interrupt-card .interrupt-custom-input::placeholder {
    color: #aeaeb2;
}

.langgraph-interrupt-card .interrupt-custom-input:hover {
    background: #ffffff;
}

.langgraph-interrupt-card .interrupt-custom-input:focus {
    outline: none;
    background: #ffffff;
    border-color: rgba(0, 122, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18);
}

.langgraph-interrupt-card .interrupt-custom-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 22px;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #ffffff;
    background: #007aff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.langgraph-interrupt-card .interrupt-custom-submit:hover {
    background: #0066d6;
    box-shadow: 0 2px 12px rgba(0, 122, 255, 0.35);
}

.langgraph-interrupt-card .interrupt-custom-submit:active {
    transform: scale(0.98);
}

.langgraph-interrupt-card .interrupt-custom-submit:focus {
    outline: none;
}

.langgraph-interrupt-card .interrupt-custom-submit:focus-visible {
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.35);
}

.langgraph-interrupt-card .interrupt-json-pre {
    font-size: 12px;
    max-height: 180px;
    overflow: auto;
    background: #f5f5f7;
    padding: 12px;
    border-radius: 12px;
    border: 0.5px solid rgba(60, 60, 67, 0.12);
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-reduced-motion: reduce) {
    .langgraph-interrupt-card .interrupt-option-tile,
    .langgraph-interrupt-card .interrupt-custom-input,
    .langgraph-interrupt-card .interrupt-custom-submit {
        transition: none;
    }
    .langgraph-interrupt-card .interrupt-custom-submit:active {
        transform: none;
    }
}

.message-avatar {
    width: 32px; height: 32px;
    border-radius: 4px; margin-right: 20px;
    display: grid; place-items: center; font-weight: bold;
    min-width: 32px;
    max-width: 32px;
}
.message-avatar.user { background-color: #19c37d;  margin-right: 0 !important; margin-left: 20px !important}
.message-avatar.ai { background-color: #9b59b6; }
.message-content { 
    flex-grow: 1; 
    padding-top: 5px; 
    color: #5b5b5b; 
    text-align: left; 
    line-height: 1.6;
}
.message-content.user {
    white-space: pre-wrap;
    text-align: right;
}
.message-content.ai {
    white-space: normal;
}
/* Estilos para markdown en mensajes de IA */
.chat-message.ai .message-content h1,
.chat-message.ai .message-content h2,
.chat-message.ai .message-content h3,
.chat-message.ai .message-content h4,
.chat-message.ai .message-content h5,
.chat-message.ai .message-content h6 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: #2c3e50;
}
.chat-message.ai .message-content h1 { font-size: 1.5em; }
.chat-message.ai .message-content h2 { font-size: 1.3em; }
.chat-message.ai .message-content h3 { font-size: 1.1em; }
.chat-message.ai .message-content p {
    margin: 0.5em 0;
}
.chat-message.ai .message-content ul,
.chat-message.ai .message-content ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
    list-style-type: disc;
}
.chat-message.ai .message-content ol {
    list-style-type: decimal;
}
.chat-message.ai .message-content li {
    margin: 0.25em 0;
    line-height: 1.6;
    display: list-item;
}
/* Indentación para listas anidadas - cada nivel añade más indentación */
.chat-message.ai .message-content ul ul,
.chat-message.ai .message-content ol ol,
.chat-message.ai .message-content ul ol,
.chat-message.ai .message-content ol ul {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    padding-left: 2em; /* Más indentación para el segundo nivel */
    list-style-type: circle; /* Cambiar estilo para listas anidadas */
}
/* Tercer nivel de anidación */
.chat-message.ai .message-content ul ul ul,
.chat-message.ai .message-content ol ol ol,
.chat-message.ai .message-content ul ul ol,
.chat-message.ai .message-content ol ol ul {
    padding-left: 2em; /* Mantener indentación adicional */
    list-style-type: square; /* Otro estilo para el tercer nivel */
}
/* Cuarto nivel y superiores */
.chat-message.ai .message-content ul ul ul ul,
.chat-message.ai .message-content ol ol ol ol {
    padding-left: 2em;
    list-style-type: disc;
}
/* Asegurar que las listas anidadas tengan indentación visual clara */
.chat-message.ai .message-content li > ul,
.chat-message.ai .message-content li > ol {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
.chat-message.ai .message-content strong {
    font-weight: 600;
    color: #2c3e50;
}
.chat-message.ai .message-content em {
    font-style: italic;
}
.chat-message.ai .message-content code {
    background-color: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}
.chat-message.ai .message-content pre {
    background-color: #f4f4f4;
    padding: 12px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 0.5em 0;
}
.chat-message.ai .message-content pre code {
    background-color: transparent;
    padding: 0;
}
.chat-message.ai .message-content blockquote {
    border-left: 3px solid #19c37d;
    padding-left: 1em;
    margin: 0.5em 0;
    color: #666;
    font-style: italic;
}
.chat-message.ai .message-content a {
    color: #19c37d;
    text-decoration: none;
}
.chat-message.ai .message-content a:hover {
    text-decoration: underline;
}
.chat-message.ai .message-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5em 0;
}
.chat-message.ai .message-content table th,
.chat-message.ai .message-content table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.chat-message.ai .message-content table th {
    background-color: #f4f4f4;
    font-weight: 600;
}
.chat-message.ai .message-content hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 1em 0;
}

.agent-message-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 12px;
    color: #6b7280;
}

.agent-action-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    padding: 0;
}

.agent-action-btn i {
    font-size: 14px;
}

.agent-action-btn:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: rgba(0, 0, 0, 0.18);
}

.agent-action-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.agent-action-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.agent-feedback-btn.selected {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.35);
    color: #1d4ed8;
}

.agent-feedback-status {
    margin-left: 6px;
    color: #6b7280;
    min-height: 16px;
}

/* Visualizaciones inline del agente (gráficas y mapas) */
.agent-viz-container {
    width: 100%;
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background: #fff;
}
.agent-viz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    background: #fafafa;
}
.agent-viz-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agent-viz-expand {
    opacity: 0.5;
    color: #555;
    font-size: 12px;
    flex-shrink: 0;
    margin-left: 8px;
    transition: opacity 0.15s;
}
.agent-viz-expand:hover {
    opacity: 1;
    color: #333;
    text-decoration: none;
}
.agent-viz-iframe {
    width: 100%;
    height: 420px;
    border: none;
    display: block;
}

/* Área de input */
.chat-input-area {
    padding: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFF 58.85%);
    border-top: 1px solid #e5e7eb;
}

.chat-input-wrapper {
    background-color: #ffffff;
    border: 1px solid #d6d6d6;
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-family: var(--font-family);
    max-width: 600px;
    margin: 0 auto;
}

#chat-prompt-input {
    font-family: var(--font-family);
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #333;
    font-size: 14px;
    resize: none;
    padding: 4px 8px;
    max-height: 120px;
}

.send-button {
    background: #000000;
    border: none;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    padding: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.send-button:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.send-button:hover { color: #fff; }
.chat-disclaimer { text-align: center; font-size: 12px; opacity: 0.5; margin-top: 10px; color: #000}


/* Keyframes para la animación del barrido de luz */
@keyframes shimmer {
    0% {
        background-position: -800px 0; /* Empieza fuera de la vista a la izquierda */
    }
    100% {
        background-position: 800px 0; /* Termina fuera de la vista a la derecha */
    }
}

/* Thinking container — estilo "plan mode" translúcido */
.thinking-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    opacity: 0.85;
}

.thinking-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.thinking-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(37, 99, 235, 0.18);
    border-top-color: #2563EB;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    flex-shrink: 0;
}

.thinking-title {
    font-weight: 500;
    font-size: 13px;
    color: #4B5563;
    opacity: 0.85;
    letter-spacing: 0.01em;
}

.thinking-steps-log {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 21px;
    font-size: 12.5px;
    line-height: 1.7;
    max-height: 220px;
    overflow-y: auto;
}

.thinking-log-entry {
    color: #6B7280;
    opacity: 0.65;
    transition: opacity 0.35s ease, color 0.35s ease;
    animation: stepFadeIn 0.25s ease both;
}

.thinking-log-entry.active {
    color: #374151;
    opacity: 0.8;
}

.thinking-log-entry.completed {
    color: #9CA3AF;
    opacity: 0.38;
}

@keyframes stepFadeIn {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 0.65;
        transform: translateY(0);
    }
}

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

/* Mantener compatibilidad con el estilo anterior */
.thinking-animation {
    position: relative;
    overflow: hidden;
}

.thinking-animation::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
        transparent 20%, 
        rgba(255, 255, 255, 0.15) 50%, 
        transparent 80%
    );
    
    background-size: 800px 100%; /* Ancho grande para que el barrido sea suave */
    
    /* Aplicar la animación */
    animation: shimmer 2s linear infinite;
}







/* --- AÑADIR ESTILOS PARA EL MODAL DE JSON --- */
#json-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.json-modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    width: 80%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.json-modal-content h3 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.json-modal-content pre {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    white-space: pre-wrap; /* Para que el texto se ajuste */
    word-wrap: break-word; /* Para romper palabras largas */
    font-family: monospace;
}

.json-editor-container {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
}

.json-editor-container .json-key {
    color: #881391;
    font-weight: 500;
}

.json-editor-container .json-value {
    color: #1a1aa6;
}

.json-editor-container .json-bracket {
    color: #000;
    font-weight: bold;
}

.json-editor-container .json-comma {
    color: #000;
}

.json-editor-container .json-indent {
    display: inline-block;
}

.json-editor-container .json-edit-select {
    margin: 0 2px;
    vertical-align: middle;
}

.json-modal-content .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #888;
}

/* Estilo para el botón en la tabla */
.view-json-btn {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.view-json-btn:hover {
    background-color: #5a6268;
}





/* --- ESTILOS PARA EL EDITOR DE OPCIONES --- */
#options-editor-modal {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 3000;
    display: flex; align-items: center; justify-content: center;
}
#connect-dropdown-modal {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 3001;
    display: flex; align-items: center; justify-content: center;
}
.options-editor-content {
    background-color: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    display: flex; flex-direction: column;
    max-height: 80vh;
}
.options-editor-header, .options-editor-footer {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.options-editor-footer { border-top: 1px solid #eee; border-bottom: none; }
.options-editor-body { padding: 15px; overflow-y: auto; }

/* Estilos para los items de Nestable */
.dd-handle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding: 10px 15px;
}
.dd-handle .item-text { cursor: text; }
.item-controls { display: none; } /* Ocultar controles por defecto */
.dd-item:hover > .dd-handle .item-controls { display: flex; align-items: center; } /* Mostrar al hacer hover */
.item-controls button {
    background: none; border: none; cursor: pointer;
    margin-left: 8px; color: #888;
}
.item-controls button:hover { color: #007bff; }
.item-controls .delete-btn:hover { color: #dc3545; }




/* --- NUEVOS ESTILOS PARA EL EDITOR DE OPCIONES REDISEÑADO --- */
#options-editor-modal { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.options-editor-body { padding: 10px 20px; }

/* Lista de opciones */
.option-list {
    list-style: none;
    padding-left: 25px; /* Indentación para anidamiento */
}
.option-list:empty {
    display: none; /* Ocultar listas vacías */
}
#sortable-options-container > .option-list {
    padding-left: 0; /* Sin indentación para el nivel raíz */
}

/* Cada item de la lista */
.option-item-content {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
}
.option-item-content:hover {
    background-color: #f5f5f5;
}

/* Placeholder que aparece al arrastrar */
.option-placeholder {
    height: 40px;
    background-color: #e0e7ff;
    border: 1px dashed #667eea;
    border-radius: 6px;
    margin: 5px 0;
}

/* Icono para arrastrar */
.drag-handle {
    cursor: grab;
    color: #aaa;
    margin-right: 10px;
}

/* Texto e input de edición */
.option-text {
    flex-grow: 1;
    padding: 5px;
}
.option-input {
    flex-grow: 1;
    font-size: 1em;
    border: 1px solid #007bff;
    border-radius: 4px;
    padding: 5px;
    display: none;
}
.option-item.editing .option-text { display: none; }
.option-item.editing .option-input { display: block; }

/* Controles (editar, añadir, borrar) */
.option-controls {
    display: none; /* Ocultos por defecto */
}
.option-item-content:hover .option-controls {
    display: flex; /* Se muestran al hacer hover */
}
.option-controls button {
    background: none; border: none; cursor: pointer;
    margin-left: 8px; color: #888; font-size: 14px;
}
.option-controls button:hover { color: #007bff; }
.option-controls .delete-btn:hover { color: #dc3545; }

/* Botón para añadir nuevas opciones */
.add-sibling-btn {
    color: #888;
    text-decoration: none;
    padding: 8px;
    display: block;
}
.add-sibling-btn:hover {
    color: #000;
}



/* --- NUEVOS ESTILOS PARA EL EDITOR DE OPCIONES (VERSIÓN CONTENTEDITABLE) --- */
.option-list { list-style: none; padding-left: 25px; }
#sortable-options-container > .option-list { padding-left: 0; }
.option-item-content { display: flex; align-items: center; padding: 8px; border-radius: 6px; }
.option-item-content:hover { background-color: #f5f5f5; }
.option-placeholder { height: 40px; background-color: #e0e7ff; border: 1px dashed #667eea; border-radius: 6px; margin: 5px 0; }
.drag-handle { cursor: grab; color: #aaa; margin-right: 10px; }

/* Texto de la opción */
.option-text { flex-grow: 1; padding: 5px; border: 1px solid transparent; border-radius: 4px; }

/* --- ESTILO CLAVE --- */
/* Cuando el texto sea editable, le ponemos un borde para que parezca un input */
.option-text[contenteditable="true"] {
    outline: 2px solid #007bff;
    background-color: #fff;
    cursor: text;
}

/* Controles (editar, añadir, borrar) */
.option-controls { display: none; }
.option-item-content:hover .option-controls { display: flex; }
.option-controls button { background: none; border: none; cursor: pointer; margin-left: 8px; color: #888; font-size: 14px; }
.option-controls button:hover { color: #007bff; }
.option-controls .delete-btn:hover { color: #dc3545; }

/* --- ESTILOS PARA EL EDITOR DE OPCIONES EN MASTER --- */
#master-options-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}
#master-connect-dropdown-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3001;
}
#master-sortable-options-container > .option-list {
    padding-left: 0;
}
#master-sortable-options-container .option-list {
    list-style: none;
    padding-left: 25px;
}
#master-sortable-options-container .option-item {
    margin: 5px 0;
}
#master-sortable-options-container .option-item-content {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
}
#master-sortable-options-container .option-item-content:hover {
    background-color: #f5f5f5;
}
#master-sortable-options-container .option-placeholder {
    height: 40px;
    background-color: #e0e7ff;
    border: 1px dashed #667eea;
    border-radius: 6px;
    margin: 5px 0;
}
#master-sortable-options-container .drag-handle {
    cursor: grab;
    color: #aaa;
    margin-right: 10px;
}
#master-sortable-options-container .option-text {
    flex-grow: 1;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 4px;
}
#master-sortable-options-container .option-text[contenteditable="true"] {
    outline: 2px solid #007bff;
    background-color: #fff;
    cursor: text;
}
#master-sortable-options-container .option-controls {
    display: none;
}
#master-sortable-options-container .option-item-content:hover .option-controls {
    display: flex;
}
#master-sortable-options-container .option-controls button {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 8px;
    color: #888;
    font-size: 14px;
}
#master-sortable-options-container .option-controls button:hover {
    color: #007bff;
}
#master-sortable-options-container .option-controls .delete-btn:hover {
    color: #dc3545;
}

/* --- ESTILOS PARA DROPDOWN DE TIPOS DE WORKSPACE --- */
.workspace-types-dropdown {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
    min-width: 320px;
    max-width: 400px;
    z-index: 1000;
    overflow: hidden;
}

.workspace-types-header {
    padding: 16px 20px 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}

.workspace-types-header h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.workspace-types-header p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.workspace-type-option {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: var(--transition-fast);
    border-bottom: 1px solid #f1f5f9;
}

.workspace-type-option:last-child {
    border-bottom: none;
}

.workspace-type-option:hover {
    background-color: #f8fafc;
}

.workspace-type-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0f2fe;
    border-radius: var(--radius-md);
    margin-right: 12px;
    flex-shrink: 0;
}

.workspace-type-icon i {
    font-size: 18px;
    color: var(--primary-blue);
}

.workspace-type-info {
    flex: 1;
    min-width: 0;
}

.workspace-type-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.workspace-type-description {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Estilos específicos para diferentes tipos de workspace */
.workspace-type-option[data-type="formulario"] .workspace-type-icon {
    background: #e0f2fe;
}

.workspace-type-option[data-type="formulario"] .workspace-type-icon i {
    color: #0284c7;
}

.workspace-type-option[data-type="documentos"] .workspace-type-icon {
    background: #fef3c7;
}


.workspace-type-option[data-type="facturas"] .workspace-type-icon {
    background: #eaeaea;
}

.workspace-type-option[data-type="facturas"] .workspace-type-icon i {
    color: #2b2b2b;
}

.workspace-type-option[data-type="documentos"] .workspace-type-icon i {
    color: #d97706;
}

.workspace-type-option[data-type="tabla"] .workspace-type-icon {
    background: #d1fae5;
}

.workspace-type-option[data-type="tabla"] .workspace-type-icon i {
    color: #059669;
}

.workspace-type-option[data-type="galeria"] .workspace-type-icon {
    background: #e9d5ff;
}

.workspace-type-option[data-type="galeria"] .workspace-type-icon i {
    color: #7c3aed;
}

.workspace-type-option[data-type="grafico"] .workspace-type-icon {
    background: #fed7d7;
}

.workspace-type-option[data-type="grafico"] .workspace-type-icon i {
    color: #e53e3e;
}

/*.workspace-type-option[data-type="calendario"] .workspace-type-icon {
    background: #fed7d7;
}

.workspace-type-option[data-type="calendario"] .workspace-type-icon i {
    color: #e53e3e;
}

.workspace-type-option[data-type="grafico"] .workspace-type-icon {
    background: #c6f6d5;
}

.workspace-type-option[data-type="grafico"] .workspace-type-icon i {
    color: #38a169;
}*/

.workspace-type-option[data-type="mapa-ia"] .workspace-type-icon {
    background: #c3dafe;
}

.workspace-type-option[data-type="mapa-ia"] .workspace-type-icon i {
    color: #3182ce;
}

/* Animación de entrada para el dropdown */
.workspace-types-dropdown {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilo para el botón de crear workspace */
.add-workspace-btn {
    position: relative;
}

.add-workspace-btn:hover {
    background-color: #f8fafc;
    border-radius: var(--radius-md);
}

/* --- ESTILOS PARA MENÚ CONTEXTUAL DE WORKSPACE --- */
.workspace-menu-btn {
    display: none;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #888;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: var(--transition-fast);
}

.workspace-menu-btn:hover {
    color: var(--primary-blue);
    background-color: #f1f5f9;
}

/* Mostrar el botón de menú al hacer hover en la pestaña */
.tab-link:hover .workspace-menu-btn {
    display: block;
}

/* Ajustar el padding de la pestaña para hacer espacio a los iconos */
.tab-link {
    padding-right: 30px !important;
    padding-left: 30px !important;
}

.workspace-context-menu {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
    animation: slideDown 0.2s ease-out;
}

.workspace-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid #f1f5f9;
}

.workspace-menu-item:last-child {
    border-bottom: none;
}

.workspace-menu-item:hover {
    background-color: #f8fafc;
}

.workspace-menu-item.destructive {
    color: #dc2626;
}

.workspace-menu-item.destructive:hover {
    background-color: #fef2f2;
}

.workspace-menu-item i:first-child {
    width: 16px;
    margin-right: 12px;
    font-size: 14px;
    text-align: center;
}

.workspace-menu-item span {
    flex: 1;
}

.workspace-menu-item i:last-child {
    margin-left: auto;
    font-size: 12px;
    color: #9ca3af;
}

.workspace-menu-separator {
    height: 1px;
    background-color: #e5e7eb;
    margin: 4px 0;
}

/* Estilos específicos para iconos de acciones */
.workspace-menu-item[data-action="pin"] i:first-child {
    color: #f59e0b;
}

.workspace-menu-item[data-action="rename"] i:first-child {
    color: var(--primary-blue);
}

.workspace-menu-item[data-action="duplicate"] i:first-child {
    color: #10b981;
}

.workspace-menu-item[data-action="share"] i:first-child {
    color: #8b5cf6;
}

.workspace-menu-item[data-action="lock"] i:first-child {
    color: #f59e0b;
}

.workspace-menu-item[data-action="reorder"] i:first-child {
    color: #6b7280;
}

.workspace-menu-item[data-action="delete"] i:first-child {
    color: #dc2626;
}

/* Estilos para workspaces anclados */
.tab-link.pinned {
    position: relative;
}

.tab-link.pinned::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 16px;
    background-color: #f59e0b;
    border-radius: 1px;
}

.tab-link.pinned .tab-link-name {
    font-weight: 600;
}

/* --- ESTILOS PARA MENÚ CONTEXTUAL DE GRUPOS --- */
.group-menu-btn {
    display: none;
    right: 8px;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: var(--transition-fast);
    z-index: 10;
}

.group-menu-btn:hover {
    color: var(--primary-blue);
    background-color: #f1f5f9;
}

.blocked-dropdown{
    padding: 8px 10px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #6c757d;
    text-align: center;
    cursor: not-allowed;
}

/* Mostrar el botón de menú al hacer hover en el elemento del grupo */
.sidebar-nav li > a:hover .group-menu-btn {
    display: block;
}

.widget-separator{
    background: none !important;
}

/* Estilos para el menú contextual de grupos */
.group-context-menu {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
    min-width: 180px;
    z-index: 1000;
    overflow: hidden;
    animation: slideDown 0.2s ease-out;
}
.group-context-menu.group-context-menu-open-up {
    animation: slideUp 0.2s ease-out;
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.group-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}

.group-menu-item:last-child {
    border-bottom: none;
}

.group-menu-item:hover {
    background-color: #f8fafc;
}

.group-menu-item.destructive {
    color: #dc2626;
}

.group-menu-item.destructive:hover {
    background-color: #fef2f2;
}

.group-menu-item i:first-child {
    width: 16px;
    margin-right: 12px;
    font-size: 14px;
    text-align: center;
}

.group-menu-item span {
    flex: 1;
}

.group-menu-item i:last-child {
    margin-left: auto;
    font-size: 12px;
    color: #9ca3af;
}

.group-menu-separator {
    height: 1px;
    background-color: #e5e7eb;
    margin: 4px 0;
}

/* Estilos para iconos específicos de grupos */
.group-menu-item[data-action="rename"] i:first-child {
    color: var(--primary-blue);
}

.group-menu-item[data-action="duplicate"] i:first-child {
    color: #10b981;
}

.group-menu-item[data-action="move"] i:first-child {
    color: #8b5cf6;
}

.group-menu-item[data-action="delete"] i:first-child {
    color: #dc2626;
}

/* Estilos para elementos deshabilitados */
.group-menu-item.disabled {
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

.group-menu-item.disabled:hover {
    background-color: transparent !important;
    color: #9ca3af !important;
}

.group-menu-item.disabled i {
    color: #9ca3af !important;
}

/* Estilos para el botón de añadir grupo en el sidebar */
.sidebar-nav li a .add-group-btn {
    background: transparent !important;
    color: #202123 !important;
    border: 1px solid #202123 !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 10px !important;
    padding: 0 !important;
    transition: opacity 0.2s !important;
    opacity: 0 !important;
}

.sidebar-nav li > a:hover .add-group-btn {
    opacity: 1 !important;
}

.sidebar-nav li a .add-group-btn:hover {
    background: transparent !important;
    color: #202123 !important;
    border-color: #202123 !important;
}

/* Estilos para el menú de añadir grupo */
.add-group-menu {
    animation: slideDown 0.2s ease-out;
}

.add-group-menu .group-menu-item[data-action="paste-group-sidebar"] i:first-child {
    color: #10b981;
}

.add-group-menu .group-menu-item[data-action="create-new-group"] i:first-child {
    color: #667eea;
}

/* Estilos para el submenú de mover */
.group-move-submenu {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1001;
}

/* Estilos para el submenú de etiquetas */
.group-tags-submenu {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
    min-width: 220px;
    max-height: 350px;
    overflow-y: auto;
    z-index: 1001;
}

.group-tags-header {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #f1f5f9;
}

.group-tags-list {
    padding: 8px 0;
    max-height: 250px;
    overflow-y: auto;
}

.group-tags-item {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.group-tags-item:hover {
    background-color: #f8fafc;
}

.group-tags-item input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-blue);
}

.group-tags-item .tag-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    flex: 1;
}

.group-tags-item .tag-label i {
    margin-right: 6px;
    font-size: 9px;
}

.group-tags-footer {
    padding: 8px 14px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.group-tags-hint {
    font-size: 11px;
    color: #9ca3af;
}

.group-tags-empty {
    padding: 20px 14px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}

.group-tags-empty i {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* Estilos para badges de plantillas */
.template-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #dc2626;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}

.template-connected {
    color: #f59e0b !important;
}

.template-connected i {
    color: #f59e0b !important;
}

/* Modal overlay styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-dialog {
    background: transparent;
    border-radius: 12px;
    max-width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-dialog .modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none;
}

.modal-header button,
.modal-header .modal-close,
.modal-header .modal-close-btn {
    cursor: pointer;
    user-select: auto;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.close-modal-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #374151;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.btn {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: #667eea;
    color: white;
}

.btn-primary:hover {
    background: #5568d3;
}

.btn-secondary {
    background: #e5e7eb;
    color: #374151;
}

.btn-secondary:hover {
    background: #d1d5db;
}

.btn-success {
    background: #10b981;
    color: white;
}

.btn-success:hover {
    background: #059669;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-icon.btn-success {
    background: #10b981;
    color: white;
}

.btn-icon.btn-success:hover {
    background: #059669;
}

.section-description {
    font-size: 14px;
    color: #6b7280;
    margin: 8px 0 0 0;
    font-weight: normal;
}

/* Animación para notificaciones */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.group-move-header {
    padding: 8px 16px;
    background-color: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

.group-move-list {
    max-height: 250px;
    overflow-y: auto;
}

.group-move-option {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid #f1f5f9;
}

.group-move-option:last-child {
    border-bottom: none;
}

.group-move-option:hover {
    background-color: #f8fafc;
}

.group-move-option.disabled {
    color: #9ca3af;
    cursor: not-allowed;
}

.group-move-option.disabled:hover {
    background-color: transparent;
}

/* Estilos para drag and drop */
.sidebar-nav li {
    position: relative;
}

.sidebar-nav li.dragging {
    opacity: 0.5;
}

.sidebar-nav li.drag-over {
    background-color: #dbeafe;
    border-radius: 4px;
}

.sidebar-nav li.drag-over::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--primary-blue);
    border-radius: 1px;
}

/* Estilo para modo reordenamiento (Shift/Ctrl presionado) */
.sidebar-nav li.drag-over-reorder {
    background-color: #fef3c7;
    border-radius: 4px;
    border: 2px dashed #f59e0b;
}

.sidebar-nav li.drag-over-reorder::before {
    content: '↕ Reordenar';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f59e0b;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1000;
}


/* === Monday-like Table Styles === */
.monday-table{border:1px solid #e6e9ef;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.monday-table-header{display:flex;align-items:center;background:#f6f7fb;border-bottom:1px solid #e6e9ef;position:sticky;top:0;z-index:8;padding:8px}
.monday-table-header .row-head-col{min-width:220px}
.monday-table-header .columns-container{flex:1}
.monday-table-header .add-column-wrapper{margin-left:auto}
.monday-table .monday-grid{width:100%;border-collapse:separate;border-spacing:0}
.monday-table-body{overflow:auto; position: relative}
.monday-table-body.shadow-left::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;pointer-events:none;background:linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,0))}
.monday-table-body.shadow-right::after{content:"";position:absolute;right:0;top:0;bottom:0;width:16px;pointer-events:none;background:linear-gradient(270deg, rgba(0,0,0,.08), rgba(0,0,0,0))}
.monday-table-body.dragging{cursor:grabbing}
.monday-table .monday-grid thead th{position:sticky;top:0;background:#f6f7fb;border-bottom:1px solid #e6e9ef;color:#3a3f5c;font-weight:600;font-size:12px;letter-spacing:.02em;text-transform:none;z-index:6}
.monday-table .monday-grid th,.monday-table .monday-grid td{border-right:1px solid #edf0f5}
.monday-table .monday-grid th:last-child,.monday-table .monday-grid td:last-child{border-right:none}
.monday-table .monday-grid tbody tr:nth-child(even){background:#fafbff}
.monday-table .monday-grid td{height:44px;padding:0 8px;vertical-align:middle}
.monday-table .monday-grid td:first-child{position:sticky;left:0;z-index:5;background:#fff}
.monday-table .row-head-col{background:#fff;box-shadow:inset -1px 0 0 #edf0f5;min-width:220px}
.monday-table .column-header:first-child{position:sticky;left:0;z-index:7;background:#f6f7fb}
.monday-table .sticky{position:sticky;left:0;z-index:7;background:#fff}
.monday-table .column-header{min-width:140px}
.monday-table .column-header .header-inner{display:flex;align-items:center;gap:8px;padding:8px 12px;position:relative}
.monday-table .column-header .col-name{outline:none}
.monday-table .column-header .column-menu-btn{cursor:pointer;color:#7a8194}
.monday-table .column-header .col-resize-handle{position:absolute;right:0;top:0;width:6px;height:100%;cursor:col-resize;background:transparent}
.monday-table .cell-input{width:100%;height:32px;border:1px solid transparent;background:transparent;padding:0 8px;border-radius:6px;outline:none;font-family:'Inter', sans-serif;}
.monday-table textarea.cell-input{font-family:'Inter', sans-serif;padding-top: 8px;}

.monday-table .cell-input:focus{border-color:#228be6;background:#f0f7ff}
.monday-table .row-name{display:inline-block;min-width:60px;padding:8px 12px;border-radius:6px}
.monday-table .row-name:focus{outline:none;background:#f0f7ff}
.monday-table .add-column-end{width:40px;min-width:40px;text-align:center;background:#f6f7fb}
.monday-table .add-column-btn.plus-only{width:28px;height:28px;border-radius:6px;border:1px solid #e6e9ef;background:#fff;cursor:pointer;line-height:26px;font-weight:700}
.monday-table .add-column-btn.plus-only:hover{background:#fff;color:#228be6;border-color:#cfe2ff}
.monday-table .row-actions-header{width:50px;min-width:50px;background:#f6f7fb;position:sticky;left:0;z-index:7}
.monday-table .row-actions-cell{width:50px;min-width:50px;text-align:center;position:sticky;left:0;z-index:5;background:inherit;padding:4px}
.monday-table .delete-row-btn{background:transparent;border:none;color:#7a8194;cursor:pointer;padding:6px 8px;border-radius:6px;transition:all 0.2s;opacity:0}
.monday-table .delete-row-btn:hover{background:#fee;color:#e03131}
.monday-table tbody tr:hover .delete-row-btn{opacity:1}
.row-placeholder{background:#e7f1ff !important;height:40px;border:2px dashed #228be6}
.col-placeholder{background:#e7f1ff !important;border:2px dashed #228be6;min-width:120px;height:36px}
.table-column-menu{background:#fff;border:1px solid #e6e9ef;border-radius:8px;box-shadow:0 4px 12px rgba(16,24,40,.12);min-width:220px;padding:6px}
.table-column-menu-item{padding:8px 10px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:8px;color:#344054}
.table-column-menu-item:hover{background:#f6f7fb}
.table-column-menu-item.destructive{color:#b42318}
.table-column-menu .with-submenu{justify-content:space-between;position:relative}
.table-column-menu .with-submenu .submenu{position:absolute;top:0;right:100%;margin-right:6px;background:#fff;border:1px solid #e6e9ef;border-radius:8px;box-shadow:0 4px 12px rgba(16,24,40,.12);display:block;min-width:180px}
.table-column-menu .submenu .submenu-item{padding:8px 10px;cursor:pointer}
.table-column-menu .submenu .submenu-item:hover{background:#f6f7fb}

/* Estilos para el widget de mapa */
.widget-map-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.widget-map-container .map-container {
    flex: 1;
    min-height: 0; /* Permitir que se reduzca completamente */
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e6e9ef;
    pointer-events: auto;
}

.widget-map-container .map-instructions {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: #344054;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Búsqueda de ubicaciones */
.map-search-container {
    margin-bottom: 12px;
    position: relative;
}

.map-search-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.map-search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    font-size: 14px;
    color: #344054;
    transition: border-color 0.2s ease;
}

.map-search-input:focus {
    outline: none;
    border-color: #667eea;
}

.map-search-btn {
    padding: 8px 16px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-search-btn:hover {
    background: #5568d3;
}

.map-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
    z-index: 9999;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.map-search-results-list {
    padding: 4px 0;
}

.map-search-result-item {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f6f7fb;
}

.map-search-result-item:last-child {
    border-bottom: none;
}

.map-search-result-item:hover {
    background-color: #f6f7fb;
}

.map-search-result-item i {
    color: #667eea;
    font-size: 16px;
}

.map-search-result-name {
    flex: 1;
    font-size: 14px;
    color: #344054;
    line-height: 1.4;
}

.map-search-loading,
.map-search-no-results,
.map-search-error {
    padding: 16px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.map-search-error {
    color: #dc2626;
}

/* Display de coordenadas */
.map-coordinates-display {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-coordinates-display label {
    font-size: 14px;
    color: #344054;
    font-weight: 500;
    min-width: 90px;
}

.map-coordinates-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    font-size: 14px;
    color: #344054;
    background: #f9fafb;
    cursor: not-allowed;
}

/* Control de zoom */
.map-zoom-control {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.map-zoom-control label {
    font-size: 14px;
    color: #344054;
    font-weight: 500;
    min-width: 50px;
}

.map-zoom-input {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #e6e9ef;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.map-zoom-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}

.map-zoom-input::-webkit-slider-thumb:hover {
    background: #5568d3;
}

.map-zoom-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}

.map-zoom-input::-moz-range-thumb:hover {
    background: #5568d3;
}

.map-zoom-value {
    min-width: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    padding: 4px 8px;
    background: #f0f4ff;
    border-radius: 4px;
}

/* Control de altura */
.map-height-control {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-height-control label {
    font-size: 14px;
    color: #344054;
    font-weight: 500;
    white-space: nowrap;
}

.map-height-input {
    width: 100px;
    padding: 8px 12px;
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    font-size: 14px;
    color: #344054;
    transition: border-color 0.2s ease;
}

.map-height-input:focus {
    outline: none;
    border-color: #667eea;
}

.map-height-unit {
    font-size: 14px;
    color: #6b7280;
}

.clean-map-preview {
    width: 100%;
    height: 100%;
    /*height: 200px;*/
    min-height: 200px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e6e9ef;
}

.clean-map-preview .map-container {
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

/* Asegurar que los mapas de Leaflet se vean correctamente */
.leaflet-container {
    background: #f8f9fa;
}

.leaflet-popup-content-wrapper {
    border-radius: 8px;
    pointer-events: auto;
}

.leaflet-popup {
    pointer-events: auto;
}

.leaflet-popup-tip-container {
    pointer-events: none;
}

.leaflet-popup-tip {
    background: white;
}

/* Estilos para el menú del grupo */
.group-menu-container {
    position: relative;
    display: inline-block;
}

.group-menu-btn {
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    color: #6b7280;
    transition: all 0.2s ease;
}

.group-menu-btn:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.group-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    z-index: 1000;
    display: none;
    padding: 4px 0;
}

.group-menu.active {
    display: block;
}

.group-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    color: #374151;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.group-menu-item:hover {
    background-color: #f3f4f6;
}

.group-menu-item.destructive {
    color: #dc2626;
}

.group-menu-item.destructive:hover {
    background-color: #fef2f2;
}

.group-menu-item.disabled {
    color: #9ca3af;
    cursor: not-allowed;
}

.group-menu-item.disabled:hover {
    background-color: transparent;
}

/* Estilos para el título del grupo */
.group-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #111827;
}

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

/* ============================================
   ESTILOS GOOGLE DRIVE
   ============================================ */

.gdrive-container {
    background: #fff;
    border-radius: 8px;
    padding: 0;
    min-height: 500px;
    margin: 0 !important;
}

/* Toolbar */
.gdrive-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.gdrive-toolbar-left,
.gdrive-toolbar-center,
.gdrive-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gdrive-toolbar-center {
    flex: 1;
    justify-content: center;
    max-width: 500px;
    margin: 0 20px;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-input-wrapper > i {
    position: absolute;
    left: 14px;
    color: #5f6368;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.gdrive-search-input {
    width: 100%;
    padding: 10px 40px 10px 44px;
    border: 1px solid #dadce0;
    border-radius: 24px;
    font-size: 14px;
    color: #202124;
    background: #f1f3f4;
    transition: all 0.2s ease;
}

.gdrive-search-input:focus {
    outline: none;
    background: #fff;
    border-color: #1a73e8;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

.gdrive-search-input::placeholder {
    color: #5f6368;
}

.btn-clear-search {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #5f6368;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 14px;
}

.btn-clear-search:hover {
    background: #f1f3f4;
    color: #202124;
}

.btn-gdrive {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 24px;
    color: #5f6368;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-gdrive:hover {
    background: #f8f9fa;
    border-color: #dadce0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.btn-gdrive i {
    font-size: 16px;
}

.btn-gdrive-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border: none;
    border-radius: 50%;
    color: #5f6368;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-gdrive-icon:hover {
    background: #f1f3f4;
}

.btn-gdrive-icon.active {
    background: #e8f0fe;
    color: #1a73e8;
}

/* Breadcrumb */
.gdrive-breadcrumb {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    font-size: 14px;
    color: #5f6368;
    gap: 4px;
    flex-wrap: wrap;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.breadcrumb-item:hover:not(.active) {
    background: #f1f3f4;
}

.breadcrumb-item.active {
    color: #202124;
    font-weight: 500;
    cursor: default;
}

.breadcrumb-separator {
    font-size: 12px;
    color: #9aa0a6;
}

/* Vista de cuadrícula */
.gdrive-grid-view {
    padding: 20px;
    display: none;
}

.gdrive-grid-view.active {
    display: block;
}

.gdrive-section {
    margin-bottom: 32px;
}

.gdrive-section-title {
    font-size: 14px;
    font-weight: 500;
    color: #5f6368;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gdrive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.gdrive-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.gdrive-item:hover {
    border-color: #1a73e8;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.gdrive-item.dragging {
    opacity: 0.5;
}

.gdrive-item.drag-over {
    background: #e8f0fe;
    border-color: #1a73e8;
    border-style: dashed;
}

.gdrive-item-icon {
    font-size: 48px;
    color: #5f6368;
    margin-bottom: 8px;
}

.folder-item .gdrive-item-icon {
    color: #5f6368;
}

.file-item .gdrive-item-icon {
    color: #1a73e8;
}

.gdrive-item-name {
    font-size: 13px;
    color: #202124;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.gdrive-item-size {
    font-size: 11px;
    color: #5f6368;
}

.gdrive-item-menu {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.gdrive-item:hover .gdrive-item-menu {
    opacity: 1;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fff;
    border: none;
    border-radius: 50%;
    color: #5f6368;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: #f1f3f4;
}

/* Vista de lista */
.gdrive-list-view {
    padding: 20px;
    display: none;
}

.gdrive-list-view.active {
    display: block;
}

.gdrive-table {
    width: 100%;
    border-collapse: collapse;
}

.gdrive-table thead th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 500;
    color: #5f6368;
    text-transform: uppercase;
    border-bottom: 1px solid #e5e7eb;
}

.gdrive-table tbody tr {
    cursor: pointer;
    transition: background 0.2s;
}

.gdrive-table tbody tr:hover {
    background: #f8f9fa;
}

.gdrive-table tbody td {
    padding: 12px 16px;
    font-size: 14px;
    color: #202124;
    border-bottom: 1px solid #f1f3f4;
}

.gdrive-table tbody td > i {
    margin-right: 12px;
    font-size: 18px;
}

.folder-row i {
    color: #5f6368;
}

.file-row i {
    color: #1a73e8;
}

.gdrive-row.dragging {
    opacity: 0.5;
}

/* Estilos para nombres editables */
.gdrive-table .editable-name {
    cursor: text;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s;
    display: inline-block;
    min-width: 100px;
}

.gdrive-table .editable-name:hover {
    background-color: #f0f0f0;
}

.gdrive-table .editable-name:focus {
    background-color: #fff;
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

.gdrive-row.drag-over {
    background: #e8f0fe;
}

/* Estado vacío */
.gdrive-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #5f6368;
}

.gdrive-empty i {
    color: #dadce0;
}

.gdrive-empty p {
    font-size: 16px;
    margin-bottom: 24px;
}

/* === ESTILOS ESPECÍFICOS PARA GALERÍA === */

/* Contenedor de imagen en la galería */
.gallery-image-item {
    cursor: pointer;
    transition: all 0.2s ease;
}

.gallery-image-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Preview de imagen dentro de la tarjeta */
.gdrive-item-preview {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gdrive-item-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-image-item:hover .gdrive-item-preview img {
    transform: scale(1.05);
}

/* Ajustes para tarjetas con preview */
.gallery-image-item .gdrive-item-icon {
    display: none;
}

.gallery-image-item .gdrive-item-name {
    margin-top: 8px;
}

/* Grid de galería optimizado */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

/* Ajustes para el contenedor de galería */
.galeria-container .gdrive-item {
    height: auto;

}

/* === FIN ESTILOS ESPECÍFICOS PARA GALERÍA === */

/* Menú contextual */
.gdrive-context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px 0;
    min-width: 180px;
    z-index: 10000;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    color: #202124;
    cursor: pointer;
    transition: background 0.2s;
}

.context-menu-item:hover {
    background: #f1f3f4;
}

.context-menu-item i {
    width: 20px;
    color: #5f6368;
}

/* Dropzone dentro de gdrive */
.gdrive-container .dropzone {
    margin: 20px;
    border: 2px dashed #dadce0;
    border-radius: 8px;
    background: #fafafa;
    padding: 40px;
    text-align: center;
    color: #5f6368;
}

.gdrive-container .dropzone:hover {
    border-color: #1a73e8;
    background: #f8f9fa;
}

/* Responsive */
@media (max-width: 768px) {
    .gdrive-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 12px;
    }
    
    .gdrive-toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .gdrive-toolbar-left,
    .gdrive-toolbar-right {
        justify-content: center;
    }
    
    .btn-gdrive span {
        display: none;
    }
}

/* ============ DOCUMENT VIEWER POPUP ============ */
/* Estilos modernos y minimalistas estilo OpenAI */

.document-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    animation: fadeIn 0.2s ease-out;
}

.document-viewer-popup {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 95%;
    max-width: 1600px;
    height: 90%;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideIn 0.3s ease-out;
}

.document-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafafa;
    flex-shrink: 0;
}

.document-viewer-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.document-viewer-title i {
    color: #6b7280;
    font-size: 18px;
}

.document-viewer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.document-viewer-actions .btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.document-viewer-actions .btn-icon:hover {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.document-viewer-actions .btn-close:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.document-viewer-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}

.document-viewer-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: #6b7280;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #2563eb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.document-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #ffffff;
}

.document-pdf-object {
    width: 100%;
    height: 100%;
    border: none;
    background: #ffffff;
}

.document-pdf-embed {
    width: 100%;
    height: 100%;
    border: none;
    background: #ffffff;
    display: block;
}

.gdrive-container.facturas-mode .gdrive-breadcrumb,
.gdrive-container.facturas-mode .gdrive-grid-view,
.gdrive-container.facturas-mode .gdrive-list-view,
.gdrive-container.facturas-mode .gdrive-empty {
    display: none !important;
}
.facturas-table thead{
    position: sticky;
    top: 0;
}
.facturas-list-container {

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 53vh;
}

/* Estilo específico para el Lector Documentos */
.lector-documentos-list-container {
    height: 76vh;
}

/* Ajuste de altura para el contenedor de facturas en el modal */
.facturas-modal .lector-documentos-list-container {
    height: calc(100vh - 100px);
}

.facturas-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0; /* No se encoge */
}

.facturas-selection {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #475569;
}

.facturas-select-all-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #0f172a;
}

.facturas-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-download-selected.is-loading,
.btn-delete-selected.is-loading {
    pointer-events: none;
    opacity: 0.6;
}

.facturas-actions .btn {
    margin-left: 8px;
}

.facturas-actions .btn:first-child {
    margin-left: 0;
}

.facturas-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    flex: 1; /* Ocupa el espacio restante */
    min-height: 0; /* Permite que el flex funcione correctamente */
}

.facturas-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.facturas-table thead {
    background: #f8fafc;
}

.facturas-table th,
.facturas-table td {
    padding: 5px 14px;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
    color: #0f172a;
}

.facturas-table th {
    font-weight: 600;
    font-size: 13px;
    color: #475569;
    letter-spacing: 0.02em;
}

.factura-numero-cell {
    white-space: nowrap;
}

.factura-numero-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.factura-duplicate-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: #fee2e2;
    color: #991b1b;
}

.factura-cups-mismatch-badge,
.factura-contrato-mismatch-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: #fef3c7;
    color: #92400e;
    margin-left: 6px;
}

.factura-cups-ia-pdf-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: #fee2e2;
    color: #991b1b;
    margin-left: 6px;
}

.factura-row-duplicada .factura-numero-text {
    color: #991b1b;
}

/* Factura anulada (rectificada o sustitutiva de otra): tachado de toda la fila */
/* Factura anulada por un abono: tachar toda la fila (la factura a la que se hace abono) */
.factura-row-anulada {
    opacity: 0.75;
}
.factura-row-anulada:hover {
    opacity: 1;
}
.factura-row-anulada td {
    text-decoration: line-through;
    color: #6b7280;
}
.factura-row-anulada td.facturas-actions-cell {
    text-decoration: none;
    color: inherit;
}
.factura-numero-anulada {
    text-decoration: line-through !important;
    color: #6b7280;
}
.factura-row-anulada .factura-tipo-badge {
    text-decoration: line-through;
}
.factura-anulada-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: #f3f4f6;
    color: #6b7280;
    margin-left: 6px;
    text-decoration: none;
}
.factura-row-anulada .factura-anulada-badge {
    text-decoration: none;
    color: #6b7280;
}

/* Estilos para el badge de tipo de documento */
.factura-tipo-cell {
    white-space: normal;
}

.factura-rectificada-numero,
.factura-rectificada-por-numero {
    display: block;
    font-size: 0.8em;
    color: #6b7280;
    margin-top: 3px;
    line-height: 1.2;
    text-decoration: none !important;
}

.factura-row-anulada .factura-rectificada-numero,
.factura-row-anulada .factura-rectificada-por-numero {
    text-decoration: none !important;
    color: #4b5563;
}

.factura-rectificada-por-numero {
    color: #92400e;
}

.factura-tipo-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    background: #f1f5f9;
    color: #475569;
}

.factura-tipo-factura {
    background: #dbeafe;
    color: #1e40af;
}

.factura-tipo-rectificativa {
    background: #fef3c7;
    color: #92400e;
}

.factura-tipo-anulada,
.factura-tipo-abono {
    background: #fee2e2;
    color: #991b1b;
}

.factura-tipo-sustitutiva {
    background: #e9d5ff;
    color: #6b21a8;
}

.factura-tipo-intereses_demora,
.factura-tipo-intereses-demora {
    background: #fee2e2;
    color: #991b1b;
}

.factura-tipo-deuda {
    background: #fee2e2;
    color: #991b1b;
}

.factura-tipo-proforma {
    background: #e0e7ff;
    color: #3730a3;
}

.factura-tipo-presupuesto {
    background: #fce7f3;
    color: #9d174d;
}

.factura-tipo-otros {
    background: #d1fae5;
    color: #065f46;
}

.facturas-actions-cell{
    display: flex;
    align-items: center;
    justify-content: center;
}

.facturas-table tbody tr:hover {
    background: #f8fafc;
}

.facturas-loading-row,
.facturas-empty-row,
.facturas-error-row {
    text-align: center !important;
    color: #475569;
    font-weight: 500;
    padding: 15px !important;
}

.facturas-actions-cell .btn-icon {
    margin-right: 6px;
}

.facturas-empty {
    text-align: center;
    padding: 32px 20px 24px;
    color: #94a3b8;
}

.facturas-empty i {
    font-size: 32px;
    margin-bottom: 12px;
}

.facturas-pagination {
    padding: 6px 20px;
    border-top: 1px solid #f1f5f9;
    background: linear-gradient(to bottom, #ffffff, #fafbfc);
    flex-shrink: 0; /* No se encoge */
}

.facturas-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 100%;
}

.facturas-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 120px;
    height: 40px;
    padding: 0 16px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.facturas-pagination-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.facturas-pagination-btn:hover::before {
    left: 100%;
}

.facturas-pagination-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
}

.facturas-pagination-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}

.facturas-pagination-btn:disabled,
.facturas-pagination-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
}

.facturas-pagination-btn:disabled:hover,
.facturas-pagination-btn[disabled]:hover {
    transform: none;
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
}

.facturas-pagination-btn i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.facturas-pagination-btn:hover:not(:disabled) i {
    transform: scale(1.1);
}

.facturas-pagination-prev:hover:not(:disabled) i {
    transform: translateX(-2px) scale(1.1);
}

.facturas-pagination-next:hover:not(:disabled) i {
    transform: translateX(2px) scale(1.1);
}

.pagination-btn-text {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.facturas-pagination-center {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.facturas-pagination-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #64748b;
    font-weight: 400;
    white-space: nowrap;
}

.facturas-pagination-input {
    width: 60px;
    padding: 4px 8px;
    margin: 0 4px;
    text-align: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    background: #ffffff;
    transition: all 0.2s ease;
}

.facturas-pagination-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.facturas-pagination-input:hover:not(:disabled) {
    border-color: #cbd5e1;
}

.facturas-pagination-input::-webkit-inner-spin-button,
.facturas-pagination-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.facturas-pagination-input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.pagination-page-numbers {
    color: #334155;
    font-weight: 400;
}

.pagination-page-numbers strong {
    color: #1e293b;
    font-weight: 600;
    font-size: 15px;
}

.pagination-separator {
    color: #cbd5e1;
    font-weight: 300;
}

.pagination-total {
    color: #64748b;
    font-size: 13px;
}

/* Responsive para paginación */
@media (max-width: 768px) {
    .facturas-pagination-controls {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .facturas-pagination-btn {
        min-width: 100px;
        padding: 0 12px;
        font-size: 13px;
    }
    
    .pagination-btn-text {
        display: none;
    }
    
    .facturas-pagination-info {
        width: 100%;
        justify-content: center;
        order: 3;
        font-size: 13px;
    }
    
    .facturas-pagination-center {
        width: 100%;
    }
}

/* Estilos para el modal de mover facturas */
#move-facturas-modal {
    position: fixed;
    z-index: 10000;
}

.move-facturas-modal-content {
    user-select: none;
    position: relative;
}

.move-facturas-modal-header {
    user-select: none;
    cursor: move;
}

.grupo-tree-item {
    transition: background-color 0.2s;
    border-radius: 4px;
    margin: 2px 0;
    display: flex;
    align-items: center;
    padding-left: 0 !important;
}

.grupo-tree-item:hover:not(.disabled):not(.current) {
    background-color: #f1f5f9;
}

.grupo-tree-item.selected {
    background-color: #e0f2fe !important;
    border: 1px solid #0ea5e9;
}

.grupo-tree-item.disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.grupo-tree-item.current {
    background-color: #f0f7ff;
    border-left: 3px solid #2563eb;
}

.grupo-tree-toggle {
    cursor: pointer;
    color: #64748b;
}

.grupo-tree-toggle:hover {
    color: #0f172a;
}

.grupo-tree-children {
    margin-left: 0;
    margin-top: 2px;
}

.grupos-search-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.facturas-list-container input[type="checkbox"] {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.factura-processing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #0f172a;
    font-weight: 500;
}

.processing-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #cbd5f5;
    border-top-color: #4f46e5;
    animation: spin 0.8s linear infinite;
}

.factura-ai-loading-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    vertical-align: middle;
    flex-shrink: 0;
}

.factura-ai-loading-badge .processing-indicator {
    width: 12px;
    height: 12px;
    border-width: 2px;
    border-color: #c7d2fe;
    border-top-color: #4f46e5;
}
.facturas-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.facturas-table th .sort-indicator {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    opacity: 0.35;
}

.facturas-table th.sortable .sort-indicator::before {
    content: '↕';
}

.facturas-table th.sortable.active {
    color: #1d4ed8;
}

.facturas-table th.sortable.active .sort-indicator {
    opacity: 0.9;
}

.facturas-table th.sortable.active.asc .sort-indicator::before {
    content: '▲';
}

.facturas-table th.sortable.active.desc .sort-indicator::before {
    content: '▼';
}

.document-pdf-fallback,
.document-office-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
    gap: 16px;
    background: #f9fafb;
}

.document-pdf-fallback i,
.document-office-fallback i {
    font-size: 48px;
    color: #d1d5db;
    margin-bottom: 8px;
}

.document-pdf-fallback h3,
.document-office-fallback h3 {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.document-pdf-fallback p,
.document-office-fallback p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    max-width: 400px;
}

.document-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    background: #f9fafb;
}

.document-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.document-text-container {
    height: 100%;
    overflow: auto;
    padding: 24px;
    background: #ffffff;
}

.document-text {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
}


.document-unsupported,
.document-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
    gap: 16px;
}

.document-unsupported i,
.document-error i {
    font-size: 48px;
    color: #d1d5db;
    margin-bottom: 8px;
}

.document-unsupported h3,
.document-error h3 {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.document-unsupported p,
.document-error p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    max-width: 400px;
}

.btn-download-fallback {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-download-fallback:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-secondary:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    transform: translateY(-1px);
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .document-viewer-popup {
        width: 95%;
        height: 95%;
        border-radius: 12px;
    }
    
    .document-viewer-header {
        padding: 16px 20px;
    }
    
    .document-viewer-title {
        font-size: 14px;
    }
    
    .document-viewer-actions .btn-icon {
        width: 32px;
        height: 32px;
    }
    
    .document-text-container {
        padding: 16px;
    }
    
    .document-text {
        font-size: 13px;
    }
}


/* ========================================
   ESTILOS PARA DASHBOARD Y GRÁFICOS
   ======================================== */

/* Dashboard Container */
.dashboard-element {
    width: 100%;
    min-height: 400px;
}

.dashboard-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 100px;
    gap: 20px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    min-height: 300px;
}

.dashboard-container:empty::after {
    content: 'No hay gráficos en este dashboard. Haz clic en "Editar Dashboard" y luego en "Añadir Gráfico" para empezar.';
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #94a3b8;
    font-size: 16px;
    padding: 60px 20px;
}

.dashboard-error {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #ef4444;
}

.dashboard-error i {
    font-size: 48px;
    margin-bottom: 16px;
}

.dashboard-error p {
    margin: 0;
    font-size: 16px;
}

/* Dashboard Controls */
.dashboard-controls {
    display: flex;
    gap: 12px;
    padding: 20px 0;
    justify-content: flex-start;
}

.dashboard-controls .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-controls .btn-primary {
    background: #3b82f6;
    color: white;
}

.dashboard-controls .btn-primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.dashboard-controls .btn-secondary {
    background: #e5e7eb;
    color: #374151;
}

.dashboard-controls .btn-secondary:hover {
    background: #d1d5db;
}

/* Chart Widget */
.chart-widget {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.2s ease;
    grid-column: span 4;
    grid-row: span 3;
    display: flex;
    flex-direction: column;
    position: relative;
}

.chart-widget:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chart-widget.editing-mode {
    border: 2px solid #3b82f6;
    cursor: move;
}

.chart-widget.dragging {
    opacity: 0.7;
    transform: scale(1.02);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.chart-widget.resizing {
    border: 2px solid #3b82f6;
}

.chart-widget-placeholder {
    background: #e5e7eb !important;
    border: 2px dashed #9ca3af !important;
    border-radius: 12px !important;
    min-height: 200px !important;
}

.dashboard-container.ui-sortable .chart-widget {
    transition: all 0.3s ease;
}

.dashboard-container.ui-sortable .chart-widget.ui-sortable-helper {
    opacity: 0.8;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
    z-index: 1000;
}

.chart-widget.editing-mode .chart-widget-header {
    cursor: move;
}

.chart-widget:not(.editing-mode) .chart-widget-header {
    cursor: default;
}

/* Chart Widget Header */
.chart-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}

.chart-widget-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}

.chart-widget-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chart-widget-action {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.chart-widget-action:hover {
    background: #e5e7eb;
    color: #1f2937;
}

/* Chart Widget Content */
.chart-widget-content {
    flex: 1;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.chart-container {
    width: 100%;
    height: 100%;
}

.chart-container > div {
    width: 100%;
    height: 100%;
}

/* Chart Loading State */
.chart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6b7280;
}

.chart-loading i {
    font-size: 32px;
    animation: spin 1s linear infinite;
}

.chart-loading span {
    font-size: 14px;
}

/* Chart Empty State */
.chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #94a3b8;
    padding: 40px 20px;
}

.chart-empty i {
    font-size: 48px;
}

.chart-empty p {
    margin: 0;
    font-size: 14px;
    text-align: center;
}

/* Chart Error State */
.chart-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ef4444;
    padding: 40px 20px;
}

.chart-error i {
    font-size: 48px;
}

.chart-error p {
    margin: 0;
    font-size: 14px;
    text-align: center;
}

/* Chart Resize Handle */
.chart-widget-resize-handle {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    cursor: se-resize;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.chart-widget-resize-handle::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #3b82f6;
    border-right: 2px solid #3b82f6;
    width: 12px;
    height: 12px;
}

.chart-widget.editing-mode .chart-widget-resize-handle {
    display: block;
    opacity: 0.6;
}

.chart-widget.editing-mode:hover .chart-widget-resize-handle {
    opacity: 1;
}

/* ========================================
   FILTRO DE FECHAS DEL DASHBOARD
   ======================================== */

.dashboard-date-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: white;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
}

.dashboard-date-filter label {
    font-weight: 600;
    color: #374151;
    margin: 0;
    font-size: 14px;
}

.dashboard-date-filter .date-filter-select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #374151;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
}

.dashboard-date-filter .date-filter-select:hover {
    border-color: #3b82f6;
}

.dashboard-date-filter .date-filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dashboard-date-filter .custom-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dashboard-date-filter .custom-date-range input[type="date"] {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #374151;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.dashboard-date-filter .custom-date-range input[type="date"]:hover {
    border-color: #3b82f6;
}

.dashboard-date-filter .custom-date-range input[type="date"]:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dashboard-date-filter .custom-date-range span {
    color: #6b7280;
    font-size: 14px;
}

.dashboard-date-filter .btn-sm {
    padding: 6px 12px;
    font-size: 14px;
}

/* ========================================
   MODAL DE CONFIGURACIÓN DE GRÁFICO
   ======================================== */

#chart-config-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-config-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.chart-config-content {
    position: relative;
    background: white;
    border-radius: 16px;
    max-width: 1200px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease-out;
}

/* Header del Modal */
.chart-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}

.chart-config-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1a202c;
}

.chart-config-close-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.chart-config-close-btn:hover {
    background: #e5e7eb;
    color: #1f2937;
}

/* Body del Modal */
.chart-config-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 32px;
    overflow-y: auto;
    flex: 1;
}

.chart-config-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.chart-config-right {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: fit-content;
}

/* Secciones de Configuración */
.config-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.config-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.config-help-text {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    margin-top: -4px;
    font-style: italic;
}

.btn-add-filter {
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-add-filter:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* Selector de Tipo de Gráfico */
.chart-type-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.chart-type-btn {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}

.chart-type-btn i {
    font-size: 24px;
}

.chart-type-btn:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.chart-type-btn.active {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #3b82f6;
}

/* Tabs de Fuente de Datos */
.data-source-tabs {
    display: flex;
    gap: 8px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 8px;
}

.data-source-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #6b7280;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.data-source-tab:hover {
    color: #374151;
}

.data-source-tab.active {
    background: white;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Inputs y Selects */
.config-select,
.config-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    background: white;
    transition: all 0.2s ease;
}

.config-select:focus,
.config-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.config-select:hover,
.config-input:hover {
    border-color: #9ca3af;
}

/* Date Filter Container */
.date-filter-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-filter-container span {
    color: #6b7280;
    font-size: 14px;
}

.date-filter-container input[type="date"] {
    flex: 1;
    font-family: 'Inter', sans-serif;
}

/* Vista Previa */
.chart-preview-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.chart-preview-section h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}

#chart-preview-container {
    min-height: 300px;
    background: white;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #94a3b8;
    text-align: center;
}

.chart-preview-placeholder i {
    font-size: 64px;
}

.chart-preview-placeholder p {
    margin: 0;
    font-size: 14px;
    max-width: 200px;
}

/* Footer del Modal */
.chart-config-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 32px;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
}

.chart-config-footer .btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chart-config-footer .btn-secondary {
    background: #e5e7eb;
    color: #374151;
}

.chart-config-footer .btn-secondary:hover {
    background: #d1d5db;
}

.chart-config-footer .btn-primary {
    background: #3b82f6;
    color: white;
}

.chart-config-footer .btn-primary:hover {
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Subsecciones de Configuración */
.config-subsection {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Responsive para Modal */
@media (max-width: 1024px) {
    .chart-config-body {
        grid-template-columns: 1fr;
    }
    
    .chart-config-right {
        position: static;
    }
}

/* Single Value Card - Estilo Monday.com */
.single-value-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
}

.single-value-content {
    text-align: center;
}

.single-value-number {
    font-size: 3rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.single-value-label {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;

    letter-spacing: 0.05em;
}

/* Chart Widget - Drag & Drop Enhancements */
.chart-widget {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chart-widget:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.chart-widget.dragging {
    opacity: 0.85;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.chart-widget.resizing {
    border: 2px solid #3b82f6;
    box-shadow: inset 0 0 0 1px #3b82f6, 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Resize Handle */
.chart-widget-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 50%, #3b82f6 50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.chart-widget:hover .chart-widget-resize-handle {
    opacity: 0.6;
}

.chart-widget-resize-handle:active {
    opacity: 1;
}

/* Dashboard Grid - Responsive */
.dashboard-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    min-height: 200px;
}

@media (min-width: 1200px) {
    .dashboard-container {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
}

@media (min-width: 1600px) {
    .dashboard-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Badge de IA para documentos procesados */
.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-bottom: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-badge i {
    font-size: 9px;
    color: white !important;
}


/* Para vista de cuadrícula */
.gdrive-item-name .ai-badge {
    margin-top: 2px;
    align-self: flex-start;
}



/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.2s;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#gallery-manager-modal{
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: white;
    margin: 20px;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideDown 0.3s;
    min-width: 50%;
}

@keyframes slideDown {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.regla-modal-content {
    max-width: 1000px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    background: #f8f9fa;
}

/* ============================================
   ESTILOS PARA FORMULARIO SIMPLIFICADO
   ============================================ */

.regla-formulario-simple {
    padding: 24px;
}

.form-group-simple {
    margin-bottom: 24px;
}

.form-label-bold {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 8px;
}

.form-input-modern {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s ease;
    background: white;
}

.form-input-modern:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-section-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.section-header-simple {
    margin-bottom: 20px;
}

.section-title-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.section-icon {
    font-size: 28px;
}

.section-header-simple h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}

.section-subtitle {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

.empty-state-inline {
    text-align: center;
    padding: 32px;
    background: #f9fafb;
    border-radius: 8px;
    border: 2px dashed #d1d5db;
}

.empty-state-inline p {
    color: #6b7280;
    margin: 0 0 16px 0;
    font-size: 14px;
}

.btn-add-inline {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-add-inline:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-add-more {
    background: white;
    color: #667eea;
    border: 2px solid #667eea;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.btn-add-more:hover {
    background: #667eea;
    color: white;
}

/* Condiciones simplificadas */
.condicion-simple {
    margin-bottom: 16px;
}

.logic-connector {
    text-align: center;
    margin: 12px 0;
}

.logic-select {
    padding: 6px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
    background: white;
    cursor: pointer;
}

.condicion-content {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
}

.condicion-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr auto;
    gap: 12px;
    align-items: center;
}

.campo-select,
.operador-select,
.valor-input {
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    transition: all 0.2s ease;
    max-width: 300px;
}

.campo-select:focus,
.operador-select:focus,
.valor-input:focus {
    outline: none;
    border-color: #667eea;
}

.btn-remove-item {
    background: #fee;
    color: #dc2626;
    border: none;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-item:hover {
    background: #dc2626;
    color: white;
}

/* Acciones simplificadas */
.accion-simple {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.accion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.tipo-accion-select {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    background: white;
    cursor: pointer;
}

.accion-config {
    background: white;
    border-radius: 8px;
    padding: 16px;
}

.form-group-inline {
    margin-bottom: 16px;
}

.form-group-inline label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.form-group-inline input[type="checkbox"] {
    margin-right: 8px;
}

.variables-hint {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.variables-hint code {
    background: #dbeafe;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

/* Destinatarios de email (múltiples) */
.email-destinatarios-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.email-destinatario-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-destinatario-item input {
    flex: 1;
}

.btn-remove-destinatario {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-remove-destinatario:hover {
    background: #fee2e2;
    color: #dc2626;
}

.btn-add-destinatario {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    color: #4b5563;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-destinatario:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #374151;
}

.btn-add-destinatario i {
    font-size: 11px;
}

/* Widget de dirección con modo auto/manual */
.address-widget-container {
    width: 100%;
}

.address-manual-open-btn {
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-size: 13px;
}

.address-manual-open-btn:hover {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0284c7;
}

.address-selected-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #111827;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 38px;
}

.address-selected-container:hover {
    border-color: #9ca3af;
}

.address-selected-container:focus-within {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}

.address-clear-btn:hover {
    color: #b91c1c !important;
}

/* Modal de dirección manual */
.address-manual-modal-overlay {
    animation: fadeIn 0.2s ease;
}

.address-manual-modal {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Opciones avanzadas colapsables */
.form-section-collapsible {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px solid #e5e7eb;
}

.collapsible-toggle {
    background: none;
    border: none;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

.collapsible-toggle:hover {
    color: #1a202c;
}

.collapsible-toggle i {
    transition: transform 0.2s ease;
}

.collapsible-content {
    margin-top: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Botones de acción modernos */
.form-actions-modern {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 24px;
    border-top: 2px solid #e5e7eb;
    margin-top: 24px;
}

.btn-cancel-modern {
    background: white;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-modern:hover {
    background: #f3f4f6;
    color: #1a202c;
}

.btn-save-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-save-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

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

.modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--text-color);
}

.modal-body {
    padding: 24px;
}

.regla-formulario {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-section {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 24px;
}

.form-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.form-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h4 {
    margin: 0;
}

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-small:hover {
    background: var(--primary-color);
    color: white;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.2s;
    margin-bottom: 8px;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin-bottom: 6px;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-checkbox input[type="checkbox"] {
    cursor: pointer;
}

.form-checkbox label {
    cursor: pointer;
    font-size: 14px;
    margin: 0;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

/* ============================================
   VISTA DE REGLAS
   ============================================ */

#reglas-view{
    background: #fff;
    border-radius: 13px 0 0 0;

    flex-grow: 1;
}   

.reglas-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.reglas-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid #e5e7eb;
}

.reglas-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.reglas-header-left h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.reglas-header-left h2 i {
    color: #667eea;
}

.reglas-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.reglas-header-right {
    display: flex;
    gap: 12px;
}

.reglas-list-container {
    display: grid;
    gap: 16px;
}

/* Cards de reglas */
.regla-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
}

.regla-card:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

.regla-card.inactive {
    opacity: 0.6;
    background: #f9fafb;
}

.regla-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.regla-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.regla-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}

.regla-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.regla-badge.grupo {
    background: #e0e7ff;
    color: #4f46e5;
}

.regla-badge.todos {
    background: #fef3c7;
    color: #d97706;
}

.regla-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b7280;
    font-size: 16px;
}

.btn-icon:hover {
    background: #f3f4f6;
    color: #1a202c;
}

.regla-description {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Estado vacío */
.reglas-empty {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
}

.empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.reglas-empty h3 {
    font-size: 22px;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 8px 0;
}

.reglas-empty p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px 0;
}

/* ========================================
   REGLAS v2 — FULLSCREEN
   ======================================== */

#reglas-view.reglas-fs-root {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    flex-direction: column;
    background: #f5f5f7;
    border-radius: 0;
    flex-grow: unset;
}

.reglas-fs-root {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    flex-direction: column;
    background: #f5f5f7;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.reglas-fullscreen-open {
    overflow: hidden;
}

.reglas-fs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.reglas-fs-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.reglas-fs-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reglas-detecciones-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}

.reglas-detecciones-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px 24px;
    overflow: hidden;
}

.reglas-detecciones-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.reglas-detecciones-toolbar .reglas-detecciones-delete-all,
.reglas-detecciones-toolbar .reglas-detecciones-ocultar-todas {
    margin-left: auto;
}

.reglas-detecciones-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
}

.reglas-detecciones-tabs {
    display: inline-flex;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f7;
}

.reglas-detecciones-tab {
    border: 0;
    background: transparent;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #6e6e73;
    cursor: pointer;
}

.reglas-detecciones-tab.is-active {
    background: #fff;
    color: #1d1d1f;
    box-shadow: 0 0 0 1px #d2d2d7;
}

.reglas-detecciones-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.reglas-detecciones-search-wrap .reglas-input {
    min-width: 220px;
}

.reglas-deteccion-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.reglas-deteccion-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.reglas-deteccion-modal-panel {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    background: #fff;
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
}

.reglas-deteccion-modal-panel h4 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #1d1d1f;
}

.reglas-deteccion-modal-panel p {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #515154;
}

.reglas-deteccion-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.reglas-detecciones-eval-progreso {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    flex-shrink: 0;
}

.reglas-detecciones-eval-progreso.is-idle {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.reglas-detecciones-eval-progreso.is-cancelled {
    background: #fff7ed;
    border-color: #fed7aa;
}

.reglas-detecciones-eval-progreso.is-cancelled .reglas-detecciones-eval-progreso-bar {
    background: #ffedd5;
}

.reglas-detecciones-eval-progreso.is-cancelled .reglas-detecciones-eval-progreso-bar-fill {
    background: linear-gradient(90deg, #ea580c, #f97316);
}

.reglas-detecciones-eval-progreso-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reglas-detecciones-eval-cancelar-btn {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.3;
    border-radius: 6px;
    border: 1px solid #fca5a5;
    background: #fff;
    color: #b91c1c;
    cursor: pointer;
    white-space: nowrap;
}

.reglas-detecciones-eval-cancelar-btn:hover:not(:disabled) {
    background: #fef2f2;
    border-color: #f87171;
}

.reglas-detecciones-eval-cancelar-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.reglas-detecciones-eval-progreso-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #0f172a;
}

.reglas-detecciones-eval-progreso-head strong {
    font-weight: 600;
}

.reglas-detecciones-eval-progreso-meta {
    font-size: 12px;
    color: #475569;
    white-space: nowrap;
}

.reglas-detecciones-eval-progreso-bar {
    height: 8px;
    border-radius: 999px;
    background: #e0f2fe;
    overflow: hidden;
}

.reglas-detecciones-eval-progreso-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0284c7, #0ea5e9);
    transition: width 0.35s ease;
    min-width: 0;
}

.reglas-detecciones-eval-progreso-detail {
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}

.reglas-detecciones-filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #515154;
    font-weight: 500;
}

.reglas-detecciones-layout {
    display: grid;
    grid-template-columns: minmax(280px, 38%) 1fr;
    gap: 16px;
    flex: 1;
    min-height: 0;
}

.reglas-detecciones-list-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.reglas-detecciones-list {
    flex: 1;
    overflow-y: auto;
}

.reglas-detecciones-item {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: background 0.15s;
}

.reglas-detecciones-item:hover,
.reglas-detecciones-item.active {
    background: #f5f5f7;
}

.reglas-detecciones-item-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.reglas-detecciones-item-title {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
}

.reglas-detecciones-item-meta {
    font-size: 12px;
    color: #86868b;
    line-height: 1.4;
}

.reglas-detecciones-badge-estado {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.reglas-detecciones-badge-estado.pendiente { background: #fef3c7; color: #92400e; }
.reglas-detecciones-badge-estado.enviado { background: #d1fae5; color: #065f46; }
.reglas-detecciones-badge-estado.rechazado { background: #fee2e2; color: #991b1b; }

.reglas-detecciones-detail-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.reglas-detecciones-detail-placeholder {
    padding: 40px 24px;
    text-align: center;
    color: #86868b;
    font-size: 14px;
}

.reglas-detecciones-detail-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.reglas-detecciones-detail-header {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.reglas-detecciones-detail-header h4 {
    margin: 0 0 8px;
    font-size: 16px;
}

.reglas-detecciones-detail-meta {
    font-size: 12px;
    color: #515154;
    line-height: 1.5;
}

.reglas-detecciones-destinatarios-edit {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0 2px;
}

.reglas-detecciones-destinatarios-edit .reglas-input {
    width: 100%;
    max-width: 520px;
    font-size: 13px;
}

.reglas-detecciones-destinatarios-hint {
    font-size: 11px;
    color: #86868b;
}

.reglas-detecciones-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.reglas-detecciones-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.reglas-detecciones-preview-wrap {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f7;
}

.reglas-detecciones-preview-wrap h5,
.reglas-detecciones-activadores h5 {
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.reglas-detecciones-preview-iframe {
    width: 100%;
    min-height: 320px;
    height: 420px;
    border: none;
    background: #fff;
}

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

.reglas-detecciones-activadores th,
.reglas-detecciones-activadores td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-align: left;
}

.reglas-detecciones-activadores th {
    background: #f9fafb;
    font-weight: 600;
    color: #515154;
}

.reglas-detecciones-pagination {
    padding: 10px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: center;
    gap: 6px;
}

.reglas-detecciones-empty {
    padding: 32px 16px;
    text-align: center;
    color: #86868b;
    font-size: 14px;
}

.reglas-detecciones-loading {
    padding: 20px 16px;
    text-align: center;
    color: #86868b;
    font-size: 13px;
}

#reglas-link-badge {
    vertical-align: middle;
}

@media (max-width: 960px) {
    .reglas-detecciones-layout {
        grid-template-columns: 1fr;
    }
}

.reglas-fs-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #e8e8ed;
    color: #1d1d1f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
}

.reglas-fs-close:hover {
    background: #d2d2d7;
    transform: scale(1.05);
}

.reglas-fs-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
}

.reglas-fs-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: #86868b;
}

.reglas-fs-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.reglas-fs-sidebar {
    width: 320px;
    min-width: 280px;
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reglas-fs-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #86868b;
}

.reglas-fs-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 10px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.reglas-fs-search i {
    color: #86868b;
    font-size: 13px;
}

.reglas-fs-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #1d1d1f;
    min-width: 0;
}

.reglas-fs-search input::placeholder {
    color: #86868b;
}

.reglas-fs-count {
    background: #e8e8ed;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.reglas-fs-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 16px;
}

.reglas-fs-item {
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 6px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.reglas-fs-item:hover {
    background: #f5f5f7;
}

.reglas-fs-item.active {
    background: #f0f7ff;
    border-color: #0071e3;
}

.reglas-fs-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 6px;
}

.reglas-fs-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.reglas-fs-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #e8e8ed;
    color: #515154;
    font-weight: 500;
}

.reglas-fs-badge.email { background: #e3f2fd; color: #1565c0; }
.reglas-fs-badge.inventario { background: #e8f5e9; color: #2e7d32; }
.reglas-fs-badge.consumos { background: #fff3e0; color: #e65100; }
.reglas-fs-badge.datadis { background: #f3e5f5; color: #7b1fa2; }

.reglas-fs-item-status {
    font-size: 11px;
    color: #86868b;
}

.reglas-fs-item-status.off {
    color: #ff3b30;
}

.reglas-fs-main {
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px;
}

.reglas-fs-welcome {
    max-width: 420px;
    margin: 80px auto;
    text-align: center;
}

.reglas-fs-welcome-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #0071e3, #5856d6);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
}

.reglas-fs-welcome h3 {
    font-size: 24px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px;
}

.reglas-fs-welcome p {
    color: #86868b;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 24px;
}

/* Wizard */
.reglas-wizard {
    max-width: 1200px;
    margin: 0 auto;
}

.reglas-wizard-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}

.reglas-wizard-step {
    flex: 1;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 13px;
    font-weight: 500;
    color: #86868b;
    cursor: pointer;
    transition: all 0.15s;
}

.reglas-wizard-step.active {
    background: #0071e3;
    color: #fff;
    border-color: #0071e3;
}

.reglas-wizard-step.done {
    background: #e8f4fd;
    color: #0071e3;
    border-color: #0071e3;
}

.reglas-wizard-panel {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.reglas-wizard-panel h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
}

.reglas-wizard-panel .help {
    color: #86868b;
    font-size: 14px;
    margin: 0 0 24px;
}

.reglas-activador-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.reglas-activador-card {
    padding: 20px;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    background: #fff;
}

.reglas-activador-card:hover:not(.disabled) {
    border-color: #0071e3;
    background: #f0f7ff;
}

.reglas-activador-card.selected {
    border-color: #0071e3;
    background: #f0f7ff;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.reglas-activador-card.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.reglas-activador-card .icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 12px;
    background: #e8e8ed;
    color: #1d1d1f;
}

.reglas-activador-card.selected .icon {
    background: #0071e3;
    color: #fff;
}

.reglas-activador-card h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
}

.reglas-activador-card p {
    margin: 0;
    font-size: 13px;
    color: #86868b;
    line-height: 1.4;
}

.reglas-cond-block {
    background: #f5f5f7;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    overflow: visible;
}

.reglas-cond-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 10px;
    align-items: center;
}

.reglas-cond-row .logic-pill {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    font-size: 12px;
    font-weight: 600;
}

.reglas-field-picker {
    position: relative;
}

.reglas-field-picker-btn {
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reglas-field-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.reglas-field-picker-dropdown.open {
    display: block;
}

.reglas-field-cat {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #86868b;
    letter-spacing: 0.04em;
}

.reglas-field-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    display: block;
}

.reglas-field-option:hover {
    background: #f0f7ff;
}

.reglas-field-option.selected {
    background: #e8f4fd;
    color: #0071e3;
    font-weight: 600;
}

.reglas-field-option .ejemplo {
    display: block;
    font-size: 12px;
    color: #86868b;
    margin-top: 2px;
}

.reglas-input, .reglas-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
}

.reglas-btn-icon {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: #ffebee;
    color: #c62828;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reglas-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: transparent;
    color: #0071e3;
    font-size: 14px;
    cursor: pointer;
    margin-top: 8px;
}

.reglas-btn-add:hover {
    background: #f0f7ff;
    border-color: #0071e3;
}

.reglas-email-section {
    margin-bottom: 20px;
}

.reglas-email-section label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #515154;
    margin-bottom: 8px;
}

.reglas-var-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.reglas-var-chip {
    padding: 4px 10px;
    border-radius: 6px;
    background: #e8f4fd;
    color: #0071e3;
    font-size: 12px;
    cursor: pointer;
    border: none;
}

.reglas-var-chip:hover {
    background: #0071e3;
    color: #fff;
}

.reglas-dest-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.reglas-dest-row select,
.reglas-dest-row input,
.reglas-dest-row .reglas-inv-picker-btn {
    flex: 1;
}

/* Modal selector campo inventario (destinatarios) */
.reglas-inv-picker-btn {
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #86868b;
    min-height: 42px;
}

.reglas-inv-picker-btn.has-value {
    color: #1d1d1f;
}

.reglas-inv-picker-btn:hover {
    border-color: #0071e3;
    background: #f0f7ff;
}

.reglas-inv-picker-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reglas-inv-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.reglas-inv-modal {
    background: #fff;
    border-radius: 16px;
    width: min(720px, 100%);
    max-height: min(85vh, 720px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.reglas-inv-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.reglas-inv-modal-header h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
}

.reglas-inv-modal-header p {
    margin: 0;
    font-size: 13px;
    color: #86868b;
    line-height: 1.4;
}

.reglas-inv-modal-close {
    border: none;
    background: #f5f5f7;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}

.reglas-inv-modal-close:hover {
    background: #e8e8ed;
}

.reglas-inv-modal-body {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
}

.reglas-inv-modal-footer {
    padding: 12px 24px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 12px;
    color: #86868b;
}

.reglas-inv-template {
    margin-bottom: 20px;
}

.reglas-inv-template h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #515154;
}

.reglas-inv-elemento {
    margin-bottom: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.reglas-inv-elemento-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: #f5f5f7;
    font-size: 13px;
    font-weight: 600;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: background 0.15s ease;
}

.reglas-inv-elemento-head:hover {
    background: #ebebed;
}

.reglas-inv-elemento-chevron {
    font-size: 11px;
    color: #86868b;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.reglas-inv-elemento:not(.is-collapsed) .reglas-inv-elemento-chevron {
    transform: rotate(90deg);
}

.reglas-inv-elemento.is-collapsed .reglas-inv-columnas {
    display: none;
}

.reglas-inv-elemento-title {
    flex: 1;
    min-width: 0;
}

.reglas-inv-ws {
    margin-left: auto;
    font-weight: 400;
    color: #86868b;
    font-size: 12px;
}

.reglas-inv-columnas {
    padding: 8px 12px 12px;
}

.reglas-inv-columna {
    margin-top: 8px;
}

.reglas-inv-columna-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.reglas-inv-tipo-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e8f5e9;
    color: #2e7d32;
}

.reglas-inv-subcampos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 8px;
}

.reglas-inv-subcampo {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
}

.reglas-inv-subcampo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.reglas-inv-ejemplo {
    display: block;
    font-size: 11px;
    color: #86868b;
    font-weight: 400;
}

.reglas-inv-subcampo:hover {
    border-color: #0071e3;
    background: #f0f7ff;
    color: #0071e3;
}

.reglas-inv-col-simple {
    font-style: italic;
}

/* Modal catálogo email/facturas */
.reglas-cat-modal {
    width: min(820px, 100%);
    max-height: min(90vh, 800px);
}

.reglas-cat-modal-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 24px 12px;
    padding: 8px 12px;
    background: #f5f5f7;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.reglas-cat-modal-search i {
    color: #86868b;
    font-size: 13px;
}

.reglas-cat-modal-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
}

.reglas-cat-modal-body {
    padding-top: 0 !important;
}

.reglas-cat-section {
    margin-bottom: 20px;
}

.reglas-cat-section-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.reglas-cat-section-head i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e8f4fd;
    color: #0071e3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reglas-cat-section-head h4 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
}

.reglas-cat-section-head p {
    margin: 0;
    font-size: 12px;
    color: #86868b;
}

.reglas-cat-grupo {
    margin-bottom: 14px;
}

.reglas-cat-grupo h5 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #86868b;
}

.reglas-cat-campos {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reglas-cat-campo {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reglas-cat-campo:hover {
    border-color: #0071e3;
    background: #f0f7ff;
}

.reglas-cat-campo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.reglas-cat-campo-label {
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
}

.reglas-cat-campo-desc {
    font-size: 12px;
    color: #515154;
    line-height: 1.4;
}

.reglas-cat-campo-ej {
    font-size: 11px;
    color: #86868b;
}

.reglas-cond-row input.reglas-val-disabled {
    opacity: 0.5;
    background: #f5f5f7;
    cursor: not-allowed;
}

.reglas-cat-empty {
    text-align: center;
    color: #86868b;
    font-size: 14px;
    padding: 24px;
}

.reglas-wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.reglas-logs-panel {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.reglas-logs-panel h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
}

.reglas-log-item {
    padding: 10px 12px;
    background: #f5f5f7;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
}

.reglas-log-item.ejecutada { border-left: 3px solid #34c759; }
.reglas-log-item.error { border-left: 3px solid #ff3b30; }
.reglas-log-item.condiciones_no_cumplidas { border-left: 3px solid #86868b; }

.reglas-cond-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.reglas-btn-add-ai {
    background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
    border-color: #c4b5fd;
    color: #5b21b6;
}

.reglas-cond-block-ai {
    border: 1px solid #ddd6fe;
    background: #faf5ff;
}

.reglas-ai-cond-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.reglas-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #6d28d9;
}

.reglas-textarea.reglas-ai-prompt {
    width: 100%;
    min-height: 96px;
    padding: 12px;
    border: 1px solid #ddd6fe;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
    resize: vertical;
    font-family: inherit;
}

.reglas-ai-cond-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.reglas-ai-status {
    font-size: 12px;
    color: #6d28d9;
}

.reglas-ai-preview {
    margin-top: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e9d5ff;
    border-radius: 10px;
}

.reglas-ai-preview-desc {
    margin: 0 0 10px;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}

.reglas-ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.reglas-ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #ede9fe;
    color: #5b21b6;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.reglas-ai-chip.muted {
    background: #f3f4f6;
    color: #6b7280;
}

.reglas-ai-logic-hint {
    margin: 10px 0 0;
    font-size: 11px;
    color: #86868b;
}

.reglas-var-chip-ai {
    background: #ede9fe !important;
    color: #5b21b6 !important;
    border-color: #c4b5fd !important;
}

.reglas-ai-logs-panel h4 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reglas-ai-log-item {
    margin-bottom: 8px;
    padding: 10px 12px;
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    border-radius: 8px;
    font-size: 13px;
}

.reglas-ai-log-item summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.reglas-ai-log-badge {
    font-size: 10px;
    padding: 2px 8px;
    background: #ede9fe;
    color: #6d28d9;
    border-radius: 999px;
}

.reglas-ai-log-resumen {
    margin: 10px 0 6px;
    line-height: 1.5;
}

.reglas-ai-log-razon {
    margin: 0;
    padding-left: 18px;
    color: #515154;
    font-size: 12px;
}

.reglas-template-section {
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    border-radius: 10px;
    padding: 14px;
}

.reglas-fugas-preview-hint {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    color: #515154;
    line-height: 1.45;
}

.reglas-fugas-preview-hint p {
    margin: 0;
}

@media (max-width: 768px) {
    .reglas-fs-sidebar { width: 100%; max-width: 280px; }
    .reglas-activador-grid { grid-template-columns: 1fr; }
    .reglas-cond-row { grid-template-columns: 1fr; }
}

.campo-select-wrapper {
    position: relative;
}

.campo-empty-hint {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    padding: 16px;
    background: #fffbeb;
    border: 2px solid #fbbf24;
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.campo-empty-hint p {
    line-height: 1.5;
}

/* ========================================
   ESTILOS PARA SPLIT VIEW EDITOR
   ======================================== */

.split-view-container {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
}

.split-view-left {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}

.split-view-divider {
    width: 2px;
    background: #e5e7eb;
    cursor: col-resize;
    transition: background-color 0.2s ease;
}

.split-view-divider:hover {
    background: #2563eb;
}

.split-view-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
}

.json-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafafa;
    flex-shrink: 0;
    position: relative;
}

.json-editor-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.btn-save-json {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-save-json:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-save-json:active {
    transform: scale(0.98);
}

.json-editor-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.json-node {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.json-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.json-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.json-field:hover {
    background: #f3f4f6;
}

.json-key {
    font-weight: 500;
    color: #6b7280;
    min-width: 150px;
    font-size: 13px;
    word-break: break-word;
    flex-shrink: 0;
}

.json-value-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    transition: all 0.2s ease;
    background: white;
}

.json-value-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.json-key-collapsible {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    color: #374151;
    font-size: 13px;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.json-key-collapsible:hover {
    background: #f3f4f6;
}

.json-key-collapsible i {
    color: #6b7280;
    font-size: 12px;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.json-key-collapsible i.rotated {
    transform: rotate(90deg);
}

.json-array-count,
.json-object-count {
    font-size: 12px;
    color: #9ca3af;
    font-weight: normal;
}

.json-children {
    margin-left: 16px;
    border-left: 2px solid #e5e7eb;
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.json-array-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.save-notification {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: slideInRight 0.3s ease-out;
    z-index: 100;
}

.save-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #d1fae5;
}

.save-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fee2e2;
}

.save-notification.hide {
    animation: slideOutRight 0.3s ease-out forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
    to {
        opacity: 0;
        transform: translateY(-50%) translateX(20px);
    }
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .split-view-container {
        flex-direction: column;
    }
    
    .split-view-divider {
        width: 100%;
        height: 2px;
        cursor: row-resize;
    }
    
    .split-view-left {
        flex: 0.5;
    }
    
    .split-view-right {
        flex: 0.5;
        border-left: none;
        border-top: 1px solid #e5e7eb;
    }
    
    .json-editor-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .btn-save-json {
        width: 100%;
        justify-content: center;
    }
}


/* ========================================
   ESTILOS PARA AJUSTES DEL SISTEMA
   ======================================== */

#ajustes-view{
    background: #fff;
    border-radius: 13px 0 0 0;

    flex-grow: 1;
}
.ajustes-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.ajustes-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.ajustes-header-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ajustes-header h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ajustes-subtitle {
    color: #7f8c8d;
    margin: 0;
    font-size: 14px;
}

/* Tabs de Ajustes */
.ajustes-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: white;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.ajustes-tab {
    flex: 1;
    padding: 14px 24px;
    border: none;
    background: #f8f9fa;
    color: #6c757d;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ajustes-tab:hover {
    background: #e9ecef;
    color: #495057;
}

.ajustes-tab.active {
    background: #3498db;
    color: white;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.ajustes-tab i {
    font-size: 16px;
}

/* Contenido de Tabs */
.ajustes-content {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    min-height: 500px;
}

.ajustes-tab-content {
    display: none;
}

.ajustes-tab-content.active {
    display: block;
}

.ajustes-section-header {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ajustes-section-header h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 600;
    color: #2c3e50;
}

.ajustes-section-header .help-text {
    color: #7f8c8d;
    font-size: 14px;
    margin: 0;
    flex: 1;
}

/* Tipos de Grupos */
.tipos-grupos-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Drag and Drop: contenedor de fila con transición suave */
.tipo-grupo-row {
    transition: margin 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tipo-grupo-item {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease, box-shadow 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
}

.tipo-grupo-item:hover {
    border-color: #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
}

.tipo-grupo-item.locked {
    background: #fff5e6;
    border-color: #ffc107;
    cursor: default;
}

/* Estado dragging: elemento siendo arrastrado */
.tipo-grupo-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Estado hover-target: destino sobre el que se puede soltar */
.tipo-grupo-row.hover-target > .tipo-grupo-item {
    border-color: #10a37f;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(16, 163, 127, 0.1), 0 4px 12px rgba(16, 163, 127, 0.15);
    transform: scale(1.02);
}

/* Ghost: indicador visual de anidación */
.tipo-grupo-row.dnd-ghost {
    height: 12px;
    margin-top: 4px;
    margin-bottom: 4px;
    transition: margin 160ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
}

.tipo-grupo-row.dnd-ghost::before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #10a37f 0%, rgba(16, 163, 127, 0.3) 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(16, 163, 127, 0.4);
    animation: ghostPulse 1.2s ease-in-out infinite;
}

@keyframes ghostPulse {
    0%, 100% {
        opacity: 0.85;
        transform: scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scaleX(0.98);
    }
}

.tipo-grupo-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.tipo-grupo-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.tipo-grupo-details {
    flex: 1;
}

.tipo-grupo-nombre-view strong,
.grupo-raiz-nombre-view strong {
    font-size: 16px;
    color: #2c3e50;
    display: inline-block;
    margin-right: 8px;
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge-locked {
    background: #ffc107;
    color: #856404;
}

.badge-info {
    background: #3498db;
    color: white;
}

.badge-incongruencia {
    background: #e67e22;
    color: white;
}

.tipo-grupo-descripcion-view small,
.grupo-raiz-descripcion-view small {
    color: #7f8c8d;
    font-size: 14px;
}

.tipo-grupo-nombre-edit input,
.tipo-grupo-descripcion-edit input,
.grupo-raiz-nombre-edit input,
.grupo-raiz-descripcion-edit input {
    margin: 4px 0;
}

.tipo-grupo-actions,
.grupo-raiz-actions {
    display: flex;
    gap: 8px;
}

/* Grupos Raíz */
.grupos-raiz-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.grupo-raiz-item {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.grupo-raiz-item:hover {
    border-color: #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
}

.grupo-raiz-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.grupo-raiz-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.grupo-raiz-details {
    flex: 1;
}

/* Usuarios y Permisos */
.usuarios-permisos-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.grupo-selector-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #e9ecef;
}

.grupo-selector-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.grupo-selector {
    width: 100%;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 15px;
    background: white;
    transition: all 0.2s ease;
}

.grupo-selector:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.usuarios-grupo-section {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.usuarios-grupo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.usuarios-grupo-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}

.usuarios-grupo-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.usuario-grupo-item {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.usuario-grupo-item:hover {
    border-color: #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
}

.usuario-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.usuario-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.usuario-details {
    display: flex;
    flex-direction: column;
}

.usuario-details strong {
    font-size: 15px;
    color: #2c3e50;
}

.usuario-details small {
    color: #7f8c8d;
    font-size: 13px;
}

.usuario-rol {
    min-width: 200px;
}

.usuario-rol-select {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    transition: all 0.2s ease;
}

.usuario-rol-select:focus {
    outline: none;
    border-color: #3498db;
}

.usuario-actions {
    display: flex;
    gap: 8px;
}

/* Mensajes Empty State */
.empty-message {
    text-align: center;
    padding: 60px 20px;
    color: #7f8c8d;
    font-size: 16px;
}

/* Modal para formularios */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.modal-dialog {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #7f8c8d;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: #f8f9fa;
    color: #2c3e50;
}

/* Cancelar/Cerrar con texto (.btn): aspecto de botón secundario, no icono X */
.btn.modal-close-btn {
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn.modal-close-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #111;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* Botones mejorados */
.btn {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-primary {
    background: #3498db;
    color: white;
}

.btn-primary:hover {
    background: #2980b9;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
}

.btn-danger {
    background: #e74c3c;
    color: white;
}

.btn-danger:hover {
    background: #c0392b;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

/* Responsivo */
@media (max-width: 768px) {
    .ajustes-container {
        padding: 16px;
    }

    .ajustes-tabs {
        flex-direction: column;
    }

    .ajustes-content {
        padding: 20px;
    }

    .tipo-grupo-item,
    .grupo-raiz-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .tipo-grupo-actions,
    .grupo-raiz-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .usuario-grupo-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .usuario-rol {
        width: 100%;
    }
}

/* ===== Estilos para Múltiples Series y Comparación de Períodos ===== */

/* Series Container */
.series-item, .period-item {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.series-item:hover, .period-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.series-header, .period-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.series-title, .period-title {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.btn-remove-series, .btn-remove-period {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.btn-remove-series:hover, .btn-remove-period:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.series-fields, .period-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.config-section-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.config-label-small {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

.btn-add-series, .btn-add-period {
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.btn-add-series:hover, .btn-add-period:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.period-fields {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.period-fields input {
    flex: 1;
    min-width: 120px;
}

.period-fields span {
    color: #6b7280;
    font-size: 14px;
}

/* Agrupación Temporal */
#temporal-grouping-docs {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mejorar estilos del modal de configuración */
.chart-config-content {
    max-height: 90vh;
    overflow-y: auto;
}

.config-section {
    margin-bottom: 20px;
}

.config-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 600;
    color: #111827;
}

.config-help-text {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Control de altura para imagen */
.image-height-control {
    margin-top: 10px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.image-height-control label {
    font-size: 12px;
    color: #495057;
    font-weight: 500;
}

.image-height-control input {
    width: 80px;
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 12px;
}

.image-height-unit {
    font-size: 12px;
    color: #6c757d;
}

/* Widget de galería */
.widget-gallery-container {
    width: 100%;
}

.gallery-images-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 15px;
}

.gallery-image-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
}

.gallery-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-gallery-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

.remove-gallery-image-btn:hover {
    background: rgba(220, 53, 69, 1);
}

.gallery-upload-zone {
    margin-top: 10px;
}

.gallery-dropzone {
    border: 2px dashed #ced4da;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #f8f9fa;
}

.gallery-dropzone:hover {
    border-color: #007bff;
    background: #e7f3ff;
}

.gallery-dropzone.dragover {
    border-color: #007bff;
    background: #cfe2ff;
}

.gallery-dropzone i {
    font-size: 48px;
    color: #6c757d;
    margin-bottom: 10px;
    display: block;
}

.gallery-dropzone .dz-message {
    color: #6c757d;
    font-size: 14px;
}

.gallery-height-control {
    margin-top: 10px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gallery-height-control label {
    font-size: 12px;
    color: #495057;
    font-weight: 500;
}

.gallery-height-control input {
    width: 80px;
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 12px;
}

.gallery-height-unit {
    font-size: 12px;
    color: #6c757d;
}

/* Vista previa de galería en modo edición */
.gallery-edit-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    flex-direction: column;
    gap: 10px;
}

.gallery-preview-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #495057;
}

.gallery-preview-info i {
    font-size: 24px;
    color: #6c757d;
}

.gallery-image-count {
    font-weight: 500;
}

.btn-edit-gallery {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Modal de gestión de galería */
.gallery-manager-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.gallery-manager-upload-zone {
    flex-shrink: 0;
}

.gallery-manager-dropzone {
    border: 2px dashed #ced4da;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #f8f9fa;
}

.gallery-manager-dropzone:hover {
    border-color: #007bff;
    background: #e7f3ff;
}

.gallery-manager-dropzone.dragover {
    border-color: #007bff;
    background: #cfe2ff;
}

.gallery-manager-dropzone.uploading {
    border-color: #28a745;
    background: #d4edda;
    cursor: wait;
    pointer-events: none;
}

.gallery-manager-dropzone.uploading i {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.gallery-manager-dropzone i {
    font-size: 48px;
    color: #6c757d;
    margin-bottom: 10px;
    display: block;
}

.gallery-manager-dropzone .dz-message {
    color: #6c757d;
    font-size: 14px;
}

.gallery-manager-images-container {
    flex: 1;
    overflow-y: auto;
    min-height: 300px;
}

.gallery-manager-images-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    padding: 10px;
}

.gallery-manager-image-item {
    position: relative;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: move;
    transition: all 0.2s;
}

.gallery-manager-image-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

.gallery-manager-image-handle {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: grab;
    z-index: 10;
}

.gallery-manager-image-handle:active {
    cursor: grabbing;
}

.gallery-manager-image-handle i {
    font-size: 14px;
}

.gallery-manager-image-preview {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f8f9fa;
}

.gallery-manager-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-manager-remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
    z-index: 10;
}

.gallery-manager-remove-btn:hover {
    background: rgba(220, 53, 69, 1);
}

.gallery-manager-image-placeholder {
    border: 2px dashed #007bff;
    background: #e7f3ff;
    border-radius: 8px;
    min-height: 150px;
}

/* Carrusel de galería */
.widget-gallery-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    cursor: pointer;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.carousel-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s;
}

.carousel-indicator.active {
    background: white;
}

.no-gallery-placeholder {
    padding: 40px;
    text-align: center;
    color: #6c757d;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px dashed #dee2e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.no-gallery-placeholder .btn-edit-gallery {
    margin-top: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .period-fields {
        flex-direction: column;
        align-items: stretch;
    }
    
    .period-fields input {
        width: 100%;
    }
    
    .gallery-images-list {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
    
    .widget-gallery-carousel {
        height: 300px;
    }
}

/* ============================================
   WIDGET LISTA
   ============================================ */

.widget-list-container,
.widget-list-container-view,
.clean-list-container {
    padding: 0.5rem;
}

/* Estilos para elementos de lista configurables (sortable) */
#list-config-items {
    min-height: 50px;
}

.list-config-item {
    transition: all 0.2s ease;
}

.list-config-item:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

.list-config-item.ui-sortable-helper {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: rotate(2deg);
}

.list-config-item-placeholder {
    background-color: #e2e8f0 !important;
    border: 2px dashed #94a3b8 !important;
    opacity: 0.5;
    height: 50px;
    margin-bottom: 0.5rem;
}

.list-config-item .fa-grip-vertical {
    transition: color 0.2s ease;
}

.list-config-item:hover .fa-grip-vertical {
    color: #374151 !important;
}

.list-config-item.ui-sortable-helper .fa-grip-vertical {
    cursor: grabbing !important;
    cursor: -webkit-grabbing !important;
}

.widget-list-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

/* Botón de configuración en el widget-header para tipo lista */
.widget-header .btn-configure-list {
    margin-right: 8px;
    padding: 4px 8px;
    font-size: 12px;
    height: auto;
    line-height: 1.4;
}

/* Botón de configuración en el widget-header para tipo mapa */
.widget-header .btn-configure-map {
    margin-right: 8px;
    padding: 4px 8px;
    font-size: 12px;
    height: auto;
    line-height: 1.4;
}

.widget-list-items,
.widget-list-items-view,
.clean-list-items {
    min-height: 50px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 0.5rem;
}

.widget-list-item,
.widget-list-item-view,
.clean-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin-bottom: 4px;
    border-radius: 6px;
}

.list-item-label {
    min-width: 50px;
    font-weight: 500;
    color: #1e293b;
    font-size: 0.9em;
}

.list-item-input,
.list-item-input-view,
.clean-list-input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.9rem;
}

.list-item-input:focus,
.list-item-input-view:focus,
.clean-list-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.widget-list-actions,
.widget-list-actions-view {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.no-list-placeholder {
    padding: 2rem;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
}

.unit-acronym{
    margin-left: 3px;
    background: #e8e8e8;

    border-radius: 6px;

    padding: 5px 7px;
    border-radius: 6px;
    position: absolute;
    right: 14px;

}

/* ============================================
   INTERFAZ DE REVISIÓN DE CAMBIOS IA
   ============================================ */

.ai-review-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ai-review-modal {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
    max-width: 1400px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-review-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    cursor: move;
    user-select: none;
}

.ai-review-modal-header button,
.ai-review-modal-header .ai-review-modal-close {
    cursor: pointer;
    user-select: auto;
}

.ai-review-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-review-modal-header h3 i {
    font-size: 20px;
    color: #667eea;
}

.ai-review-modal-close {
    background: none;
    border: none;
    color: #6b7280;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 20px;
    padding: 0;
}

.ai-review-modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.ai-review-modal-body-split {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.ai-review-pdf-viewer {
    width: 50%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e7eb;
    background: #f9fafb;
    overflow: hidden;
}

.ai-review-pdf-header {
    padding: 12px 16px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ai-review-pdf-title {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-review-pdf-title i {
    color: #ef4444;
    font-size: 14px;
}

.ai-review-pdf-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}

.ai-review-pdf-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6b7280;
    font-size: 14px;
}

.ai-review-pdf-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #ffffff;
}

.ai-review-split-divider {
    width: 1px;
    background: #e5e7eb;
    flex-shrink: 0;
}

.ai-review-changes-panel {
    width: 50%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px 28px;
}

.ai-review-modal-body {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1;
}

.ai-review-summary {
    margin: 0 0 20px 0;
    padding: 16px;
    background: #f0f9ff;
    border-left: 4px solid #3b82f6;
    border-radius: 6px;
    color: #1e40af;
    font-size: 14px;
    line-height: 1.6;
    flex-shrink: 0;
}

.ai-review-summary strong {
    color: #1e3a8a;
    font-weight: 600;
}

.ai-review-actions-top {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.ai-review-actions-top .btn {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-review-actions-top .btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.ai-review-changes-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.ai-review-change-item {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px;
    transition: all 0.2s;
}

.ai-review-change-item:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ai-review-change-item.is-new {
    border-color: #10b981;
    background: #f0fdf4;
}

.ai-review-change-item.is-modified {
    border-color: #f59e0b;
    background: #fffbeb;
}

.ai-review-change-item.is-applied {
    border-color: #3b82f6;
    background: #eff6ff;
    opacity: 0.8;
}

.ai-review-change-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ai-review-change-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1;
}

.ai-review-change-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #667eea;
}

.ai-review-change-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #111827;
}

.ai-review-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-review-badge.badge-new {
    background: #10b981;
    color: white;
}

.ai-review-badge.badge-modified {
    background: #f59e0b;
    color: white;
}

.ai-review-change-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 32px;
}

.ai-review-value-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-review-value-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-review-value {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

.ai-review-value.actual {
    background: #fee2e2;
    color: #991b1b;
    border-left: 3px solid #ef4444;
}

.ai-review-value.new {
    background: #dbeafe;
    color: #1e40af;
    border-left: 3px solid #3b82f6;
    font-weight: 500;
}

/* Inputs editables en valores nuevos */
.ai-review-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
    border: 2px solid #3b82f6;
    background: white;
    color: #1e40af;
    transition: all 0.2s;
    box-sizing: border-box;
}

.ai-review-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-review-input[type="date"] {
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.ai-review-input[type="text"] {
    min-height: 40px;
}

.ai-review-input[type="textarea"],
.ai-review-input[type="text"][rows] {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.ai-review-input[type="select"],
.ai-review-input select,
select.ai-review-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.ai-review-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.ai-review-modal-footer .btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-review-modal-footer .btn-secondary {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

.ai-review-modal-footer .btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.ai-review-modal-footer .btn-primary {
    background: #667eea;
    color: white;
}

.ai-review-modal-footer .btn-primary:hover:not(:disabled) {
    background: #5568d3;
}

.ai-review-modal-footer .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ai-review-empty {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1200px) {
    .ai-review-modal-body-split {
        flex-direction: column;
    }
    
    .ai-review-pdf-viewer {
        width: 100%;
        height: 40vh;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .ai-review-split-divider {
        display: none;
    }
    
    .ai-review-changes-panel {
        width: 100%;
        height: 50vh;
    }
}

@media (max-width: 768px) {
    .ai-review-modal {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        width: 100%;
    }
    
    .ai-review-modal-header,
    .ai-review-changes-panel,
    .ai-review-modal-footer {
        padding: 16px 20px;
    }
    
    .ai-review-pdf-viewer {
        height: 35vh;
    }
    
    .ai-review-changes-panel {
        height: 45vh;
    }
    
    .ai-review-change-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    
    .ai-review-change-content {
        margin-left: 0;
    }
}

/* ============================================
   GRÁFICO DE PERÍODOS DE FACTURACIÓN
   ============================================ */

.facturas-periodos-chart {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 20px 10px 20px;
}

.periodos-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.periodos-chart-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}

.periodos-chart-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.periodos-chart-years {
    font-weight: 600;
    color: #374151;
    min-width: 100px;
    text-align: center;
}

.periodos-chart-content {
    position: relative;
    min-height: 100px;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.periodos-chart-content::-webkit-scrollbar {
    height: 8px;
}

.periodos-chart-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.periodos-chart-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.periodos-chart-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.periodos-chart-loading {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

.periodos-chart-timeline {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: fit-content;
}

@media (min-width: 1200px) {
    .periodos-chart-timeline {
        align-items: center;
    }
}

.periodos-year-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    justify-content: flex-start;
    width: 100%;
    min-width: fit-content;
}

@media (min-width: 1200px) {
    .periodos-year-row {
        justify-content: center;
    }
}

.periodos-year-label {
    flex: 0 0 60px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-align: right;
    padding: 5px 10px;
    min-width: 60px;
}

.periodos-timeline-labels {
    display: flex;
    gap: 0;
    min-width: fit-content;
}

.periodo-label {
    flex: 0 0 80px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    padding: 5px;
    min-width: 80px;
}

.periodos-timeline-bars {
    display: flex;
    gap: 0;
    min-width: fit-content;
}

.periodo-bar {
    flex: 0 0 80px;
    height: 30px;
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    min-width: 80px;
    overflow: hidden;
}

.periodo-bar.empty {
    background: #ffffff;
}

.periodo-bar.has-facturas {
    background: #f3f4f6;
}

.periodo-bar.has-overlap {
    background: #f3f4f6;
    /*box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.6);*/
}

.periodo-bar.fuera-rango {
    background: #9ca3af !important; /* Gris para periodos fuera de rango de actividad */
    opacity: 0.6;
}

.periodo-segment {
    position: absolute;
    top: 0;
    height: 100%;
    cursor: pointer;
    transition: opacity 0.2s;
    border-radius: 3px;
}

.periodo-segment:hover {
    opacity: 0.8;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.periodo-overlap-segment {
    position: absolute;
    top: 0;
    height: 100%;    
    background: rgb(255 190 80);
    pointer-events: none;
    border-radius: 0;
}

.periodo-segment[style*="#fbbf24"]:hover {
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3);
}

/* Tooltip de información */
.periodo-info-tooltip {
    position: fixed;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 10000;
    max-width: 400px;
    padding: 0;
    animation: fadeIn 0.2s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.periodo-info-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9fafb;
}

.periodo-info-header strong {
    color: #374151;
    font-size: 14px;
}

.periodo-overlap-badge {
    background: #fef3c7;
    color: #92400e;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.periodo-info-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
}

.periodo-info-item {
    padding: 10px;
    border-bottom: 1px solid #f3f4f6;
}

.periodo-info-item:last-child {
    border-bottom: none;
}

.periodo-info-numero {
    font-weight: 600;
    color: #374151;
    font-size: 13px;
    margin-bottom: 4px;
}

.periodo-info-nombre {
    color: #6b7280;
    font-size: 12px;
    margin-bottom: 4px;
}

.periodo-info-periodo {
    color: #9ca3af;
    font-size: 11px;
    margin-bottom: 4px;
}

.periodo-info-importe {
    color: #059669;
    font-weight: 600;
    font-size: 12px;
}

/* ============================================
   WORKSPACE PERIODOS DE FACTURACIÓN
   ============================================ */

.periodos-facturacion-workspace {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.periodos-facturacion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.periodos-facturacion-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}



.periodos-facturacion-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    width:100%;
}

.periodos-facturacion-search {
    display: flex;
    align-items: center;
}

.periodos-facturacion-search .input-group {
    display: flex;
    align-items: center;
}

.periodos-facturacion-search .input-group-text {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-right: none;
    border-radius: 6px 0 0 6px;
    padding: 8px 12px;
    color: #6b7280;
}

.periodos-facturacion-search .periodos-cups-search {
    border: 1px solid #d1d5db;
    border-left: none;
    border-radius: 0 6px 6px 0;
    padding: 8px 12px;
    font-size: 14px;
    min-width: 120px;
    max-width: 200px;
    width: 100%;
}

.periodos-facturacion-search .periodos-cups-search:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.periodos-facturacion-search .periodos-cups-clear {
    border: 1px solid #d1d5db;
    border-left: none;
    border-radius: 0 6px 6px 0;
    padding: 8px 10px;
    background: white;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.periodos-facturacion-search .periodos-cups-clear:hover {
    background: #f3f4f6;
    color: #374151;
}

.periodos-facturacion-year-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
}

.periodos-facturacion-years {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    min-width: 60px;
    text-align: center;
}

.periodos-facturacion-header .btn-periodos-prev,
.periodos-facturacion-header .btn-periodos-next {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #d1d5db;
    background: white;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    transition: all 0.2s;
    white-space: nowrap;
}

.periodos-facturacion-header .btn-periodos-prev:hover,
.periodos-facturacion-header .btn-periodos-next:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.periodos-facturacion-header .btn-periodos-prev:disabled,
.periodos-facturacion-header .btn-periodos-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.periodos-facturacion-export-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.periodos-consolidado-timeline-years {
    display: flex;
    gap: 0;
    flex: 1;
}

.periodos-consolidado-timeline-years .periodos-consolidado-timeline-year {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    padding: 5px 0;
    border-right: 1px solid #e5e7eb;
}

.periodos-consolidado-timeline-years .periodos-consolidado-timeline-year:last-child {
    border-right: none;
}

.periodos-facturacion-header .btn-export-excel,
.periodos-facturacion-header .btn-export-pdf {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    white-space: nowrap;
}

.periodos-facturacion-header .btn-export-excel {
    background: #10b981;
    color: white;
}

.periodos-facturacion-header .btn-export-excel:hover {
    background: #059669;
}

.periodos-facturacion-header .btn-export-pdf {
    background: #ef4444;
    color: white;
}

.periodos-facturacion-header .btn-export-pdf:hover {
    background: #dc2626;
}

.periodos-facturacion-content {
    position: relative;
    min-height: 100px;
    overflow-y: auto;
    overflow-x: auto;
    max-height: calc(100vh - 300px);
    -webkit-overflow-scrolling: touch;
}

.periodos-facturacion-timeline {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.periodos-consolidado-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    min-width: 0;
}

.periodos-consolidado-year-header {
    font-weight: 700;
    color: #1f2937;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
    margin-bottom: 5px;
}

.periodos-consolidado-timeline-year {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    padding: 5px 0;
}

.periodos-consolidado-header {
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 10px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 8;

}

.all-periodos-group {
    position: sticky;
    top: 0;
    z-index: 9;
    background: #fff;
}

.periodos-consolidado-grupo-label {
    flex: 0 0 180px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    padding: 5px 10px;
    text-align: left;
    min-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;

    flex-direction: column;
    display: flex;

}

.periodos-consolidado-header .periodos-consolidado-grupo-label {
    font-weight: 600;
}

.periodos-consolidado-timeline-labels,
.periodos-consolidado-timeline-bars {
    display: flex;
    gap: 0;
    min-width: 0;
    flex: 1;
}

.periodos-consolidado-timeline-labels .periodo-label {
    flex: 1 1 80px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    padding: 5px 2px;
    min-width: 40px;
}

.periodos-consolidado-timeline-bars .periodo-bar {
    flex: 1 1 80px;
    height: 30px;
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    min-width: 40px;
    overflow: hidden;
    min-height: 38px !important;
}

.periodos-loading-more {
    text-align: center;
    padding: 20px;
    color: #6b7280;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.periodos-loading-more i {
    color: #3b82f6;
}

.periodos-facturacion-loading,
.periodos-facturacion-loading,
.periodos-facturacion-empty,
.periodos-facturacion-error {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

.periodos-facturacion-empty i,
.periodos-facturacion-error i {
    font-size: 48px;
    margin-bottom: 15px;
    color: #9ca3af;
}

.periodos-facturacion-error i {
    color: #ef4444;
}

.periodos-facturacion-empty p,
.periodos-facturacion-error p {
    margin: 0;
    font-size: 14px;
}

/* Opciones de visualización (checkboxes consumo/importe) */
/* Filtro por tipo (Luz, Agua, Gas, Combustibles) en periodos de facturación */
.periodos-facturacion-tipo-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.periodos-tipo-filter-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}
.periodos-tipo-filter-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.periodos-tipo-badge {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.periodos-tipo-badge:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.periodos-tipo-badge.active {
    background: #e0e7ff;
    border-color: #6366f1;
    color: #4338ca;
}
.periodos-grupo-tipo-emoji {
    margin-right: 4px;
    font-size: 1.05em;
}

.periodos-facturacion-display-options {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;


}

.periodos-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    user-select: none;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.periodos-checkbox-label:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.periodos-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #10b981;
    cursor: pointer;
}

.periodos-checkbox-label input[type="checkbox"]:checked + span {
    color: #059669;
    font-weight: 600;
}

/* Valores prorrateados en las celdas */
.periodo-valor-prorrateado {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size:11px;
    font-weight: 600;
    color: #1f2937;
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 2px;
    border-radius: 3px;
    white-space: nowrap;
    text-shadow: 0 0 2px white;
    pointer-events: none;
    line-height: 1.2;
    z-index: 5;
}

.periodo-valor-prorrateado .valor-consumo {
    color: #0369a1;
    font-weight: 700;
}

.periodo-valor-prorrateado .valor-importe {
    color: #047857;
    font-weight: 600;
}

.periodo-bar.has-facturas .periodo-valor-prorrateado {
    background: rgba(255, 255, 255, 0.98);
}

.periodo-bar.fuera-rango .periodo-valor-prorrateado {
    display: none;
}

/* Ajuste de altura de celda cuando hay valores */
.periodo-bar.has-prorrateado-values {
    min-height: 38px;
}

/* Estilos para la columna "Total" */
.periodo-total-label {
    font-weight: 600;
    color: #1f2937;
    background: #f3f4f6;
    border-left: 2px solid #6366f1;
}

.periodo-total-bar {
    background: #f9fafb;
    border-left: 2px solid #6366f1;
    font-weight: 500;
}

.periodo-total-bar.has-prorrateado-values {
    background: #f3f4f6;
}

/* Tooltip mejorado para celdas con prorrateo */
.periodo-bar[title] {
    cursor: help;
}

/* Hacer las celdas clickeables */
.periodo-bar.has-facturas {
    cursor: pointer;
}

.periodo-bar.has-facturas:hover {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4);
}

/* Modal de detalle de prorrateo */
.periodo-detalle-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.periodo-detalle-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.periodo-detalle-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 12px 12px 0 0;
    cursor: move;
    user-select: none;
}

.periodo-detalle-modal-header button,
.periodo-detalle-modal-header .periodo-detalle-modal-close {
    cursor: pointer;
    user-select: auto;
}

.periodo-detalle-modal-header h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.periodo-detalle-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    font-size: 24px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s;
}

.periodo-detalle-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.periodo-detalle-modal-subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.periodo-detalle-grupo {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.periodo-detalle-count {
    background: #10b981;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.periodo-detalle-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.periodo-detalle-factura {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.periodo-detalle-factura-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.periodo-detalle-factura-num {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.periodo-detalle-factura-id {
    color: #6b7280;
    font-size: 13px;
    font-family: monospace;
}

.periodo-detalle-factura-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.periodo-detalle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.periodo-detalle-row.highlight {
    background: #fef3c7;
    margin: 4px -14px;
    padding: 8px 14px;
    border-radius: 0;
}

.periodo-detalle-label {
    color: #6b7280;
}

.periodo-detalle-value {
    font-weight: 600;
    color: #374151;
}

.periodo-detalle-value.consumo {
    color: #0369a1;
}

.periodo-detalle-value.importe {
    color: #047857;
}

.periodo-detalle-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 4px;
}

.periodo-detalle-row.prorrateado {
    font-size: 14px;
    padding-top: 6px;
    border-top: 1px dashed #e5e7eb;
    margin-top: 6px;
}

.periodo-detalle-formula {
    font-size: 11px;
    color: #9ca3af;
    font-family: monospace;
    background: #f3f4f6;
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 6px;
    text-align: center;
}

.periodo-detalle-modal-footer {
    padding: 16px 20px;
    border-top: 2px solid #10b981;
    background: #ecfdf5;
    border-radius: 0 0 12px 12px;
}

.periodo-detalle-totales {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.periodo-detalle-totales-title {
    font-weight: 600;
    color: #047857;
    font-size: 14px;
}

.periodo-detalle-total {
    font-weight: 700;
    font-size: 16px;
    padding: 4px 12px;
    border-radius: 6px;
}

.periodo-detalle-total.consumo {
    background: #dbeafe;
    color: #1d4ed8;
}

.periodo-detalle-total.importe {
    background: #d1fae5;
    color: #047857;
}

/* Responsive modal */
@media (max-width: 600px) {
    .periodo-detalle-modal {
        width: 95%;
        max-height: 90vh;
    }
    
    .periodo-detalle-modal-header h5 {
        font-size: 16px;
    }
    
    .periodo-detalle-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .periodo-detalle-totales {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Responsive para timeline consolidado */
@media (max-width: 768px) {
    .periodos-consolidado-grupo-label {
        flex: 0 0 90px;
        min-width: 80px;
        font-size: 11px;
    }
    
    .periodos-consolidado-timeline-labels .periodo-label,
    .periodos-consolidado-timeline-bars .periodo-bar {
        flex: 1 1 40px;
        min-width: 35px;
        font-size: 9px;
    }
    
    .periodos-facturacion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .periodos-facturacion-display-options {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: 10px;
    }
    
    .periodos-checkbox-label {
        font-size: 12px;
        padding: 5px 8px;
    }
    
    .periodo-valor-prorrateado {
        font-size: 7px;
        padding: 1px 2px;
    }
    
    .periodo-bar.has-prorrateado-values {
        min-height: 32px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .periodos-chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .periodos-chart-controls {
        width: 100%;
        justify-content: space-between;
    }
    
    .periodo-label,
    .periodo-bar {
        flex: 0 0 60px;
        min-width: 60px;
    }
}

/* Estilos para progreso del agente de IA */
.agent-progress-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 10px 0;
    background: #F3F4F6;
    border-radius: 8px;
    border-left: 3px solid #2563EB;
    font-size: 14px;
    color: #374151;
    animation: fadeIn 0.3s ease-in-out;
}

.agent-progress-text {
    flex: 1;
    font-weight: 500;
}

.agent-progress-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid #E5E7EB;
    border-top-color: #2563EB;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

/* Estilos para diálogo de input del usuario */
.user-input-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.user-input-dialog {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.user-input-dialog-header {
    padding: 20px 24px;
    border-bottom: 1px solid #E5E7EB;
}

.user-input-dialog-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.user-input-dialog-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}

.user-input-dialog-body p {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.user-input-dialog-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s;
}

.user-input-dialog-textarea:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.user-input-dialog-footer {
    padding: 16px 24px;
    border-top: 1px solid #E5E7EB;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.user-input-dialog-cancel,
.user-input-dialog-submit {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.user-input-dialog-cancel {
    background: #F3F4F6;
    color: #374151;
}

.user-input-dialog-cancel:hover {
    background: #E5E7EB;
}

.user-input-dialog-submit {
    background: #2563EB;
    color: white;
}

.user-input-dialog-submit:hover {
    background: #1D4ED8;
}

.user-input-dialog-submit:disabled {
    background: #9CA3AF;
    cursor: not-allowed;
}

/* ========== ESTILOS PARA BOTÓN DE SUBIDA DE DOCUMENTOS ========== */
#upload-documents-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    color: #000;
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
}

#upload-documents-btn:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

#upload-documents-btn i {
    font-size: 14px;
}

/* ========== ESTILOS PARA MODAL DE SUBIDA DE DOCUMENTOS ========== */
.upload-documents-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.upload-documents-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.upload-documents-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: 10001;
}

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

.upload-documents-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.upload-documents-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.upload-documents-close-btn:hover {
    color: #111827;
}

.upload-documents-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.upload-documents-input-area {
    margin-bottom: 20px;
}

.upload-documents-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background: #f9fafb;
    transition: all 0.2s;
    cursor: pointer;
}

.upload-documents-dropzone:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.upload-documents-dropzone.dragover {
    border-color: #3b82f6;
    background: #dbeafe;
}

.upload-documents-dropzone i {
    font-size: 48px;
    color: #9ca3af;
    margin-bottom: 12px;
    display: block;
}

.upload-documents-dropzone p {
    margin: 8px 0;
    color: #6b7280;
    font-size: 14px;
}

.upload-documents-dropzone a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.upload-documents-dropzone a:hover {
    text-decoration: underline;
}

.upload-documents-hint {
    font-size: 12px !important;
    color: #9ca3af !important;
}

.upload-documents-file-list {
    margin-top: 24px;
}

.upload-documents-file-list h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.upload-documents-file-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.upload-documents-file-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
    margin-bottom: 8px;
}

.upload-documents-file-list li:last-child {
    margin-bottom: 0;
}

.upload-documents-file-name {
    flex: 1;
    color: #111827;
    font-size: 14px;
}

.upload-documents-file-size {
    color: #6b7280;
    font-size: 12px;
    margin-left: 12px;
}

.upload-documents-file-remove {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    transition: color 0.2s;
}

.upload-documents-file-remove:hover {
    color: #dc2626;
}

.upload-documents-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
}

.upload-documents-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========== ESTILOS PARA TOOLTIP DE PROGRESO ========== */
.documentos-progress-tooltip {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    min-width: 250px;
    max-width: 300px;
    z-index: 9999;
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.documentos-progress-tooltip.fade-out {
    animation: fadeOutDown 0.3s ease-out forwards;
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

.tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.tooltip-header span {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
}

.tooltip-close-btn {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.tooltip-close-btn:hover {
    color: #111827;
}

.tooltip-content {
    font-size: 13px;
    color: #4b5563;
}

.tooltip-content > div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.tooltip-content > div span {
    font-weight: 600;
    color: #111827;
}

#tooltip-procesando {
    color: #3b82f6;
}

#tooltip-completados {
    color: #10b981;
}

#tooltip-errores {
    color: #ef4444;
}

/* ============================================
   HISTORIAL DE CAMBIOS - ESTILOS
   ============================================ */

.historial-workspace {
    padding: 16px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    /*overflow: hidden;*/
}

.historial-header {
    display: flex;
    flex-direction: column;

    flex-shrink: 0;
}

.historial-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.historial-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.historial-header h4 i {
    color: var(--primary-blue);
}

.historial-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.historial-search-container {
    width: 100%;
    margin-bottom: 8px;
}

.historial-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
}

.historial-search-icon {
    position: absolute;
    left: 12px;
    color: #9ca3af;
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 1;
}

.historial-search-input {
    width: 100%;
    padding: 8px 36px 8px 36px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.historial-search-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.historial-search-clear {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    z-index: 1;
}

.historial-search-clear:hover {
    background: #f3f4f6;
    color: #6b7280;
}

.historial-filters-toggle,
.historial-columns-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.historial-filters-toggle:hover,
.historial-columns-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.historial-filters-toggle.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

/* Dropdown de columnas */
.historial-columns-dropdown {
    position: relative;
}

.historial-columns-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px 0;
    min-width: 180px;
    z-index: 100;
    display: none;
}

.historial-columns-menu.show {
    display: block;
}

.historial-columns-header {
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
}

.historial-columns-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #374151;
    transition: background 0.15s;
}

.historial-columns-menu label:hover {
    background: #f9fafb;
}

.historial-columns-menu input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Barra izquierda: Añadir + filtros Gestión/Incidencia */
.historial-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.historial-toolbar-left .historial-add-wrapper {
    margin-right: 4px;
}

/* Badges de categoría */
.historial-categoria-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Filtros avanzados */
.historial-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.historial-filters-collapsed {
    display: none;
}

.historial-filters-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.historial-filters .form-control,
.historial-filters select {
    min-width: 120px;
    max-width: 160px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: white;
    color: #374151;
    transition: all 0.2s;
    cursor: pointer;
}

.historial-filters .form-control:hover,
.historial-filters select:hover {
    border-color: #9ca3af;
}

.historial-filters .form-control:focus,
.historial-filters select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.historial-filter-date-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.historial-date-separator {
    color: #9ca3af;
    font-size: 12px;
}

.historial-filter-date-group input[type="date"] {
    width: 130px;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: white;
    color: #374151;
}

.historial-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}

.historial-clear-filters {
    padding: 6px 12px !important;
    font-size: 13px !important;
    border: 1px solid #d1d5db !important;
    background: white !important;
    color: #6b7280 !important;
}

.historial-clear-filters:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

/* Legacy - mantener compatibilidad */
.historial-filter-date {
    display: flex;
    align-items: center;
    gap: 6px;
}

.historial-date-label {
    font-size: 13px;
    color: #374151;
    white-space: nowrap;
    font-weight: 500;
}

.historial-filter-date input[type="date"]:hover {
    border-color: #9ca3af;
}

.historial-filter-date input[type="date"]:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.historial-clear-filters {
    padding: 8px 16px;
    font-size: 14px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d1d5db;
    background: white;
    color: #6b7280;
    border-radius: 6px;
    transition: all 0.2s;
    cursor: pointer;
}

.historial-clear-filters:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

.historial-clear-filters i {
    font-size: 12px;
}

.historial-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s;
}

.historial-checkbox-label:hover {
    background: #f3f4f6;
}

.historial-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-blue);
}

.historial-add-manual {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: var(--primary-blue);
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.historial-add-manual:hover {
    background: #2563eb;
}

.historial-add-wrapper {
    position: relative;
}

.historial-add-manual .historial-add-chevron {
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.9;
    transition: transform 0.2s;
}

.historial-add-wrapper:has(.historial-add-dropdown.open) .historial-add-chevron {
    transform: rotate(180deg);
}

.historial-add-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 180px;
    padding: 6px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.historial-add-dropdown.open {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.historial-add-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    color: var(--text-primary, #111);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.historial-add-opcion:hover {
    background: var(--bg-secondary, #f3f4f6);
}

.historial-add-opcion i {
    color: var(--text-secondary, #6b7280);
}

.historial-add-opcion[data-categoria="Gestión"] i { color: #059669; }
.historial-add-opcion[data-categoria="Incidencia"] i { color: #dc2626; }

/* Modal nuevo registro Gestiones (Gestión/Incidencia) */
.historial-registro-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.historial-registro-modal.open {
    display: flex;
}

.historial-registro-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.historial-registro-modal-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: auto;
    background: var(--bg-primary, #fff);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.historial-registro-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    flex-shrink: 0;
}

.historial-registro-modal-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #111);
}

.historial-registro-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.historial-registro-modal-close:hover {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary, #111);
}

.historial-registro-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.historial-modal-field {
    margin-bottom: 14px;
}

.historial-modal-field:last-child {
    margin-bottom: 0;
}

.historial-modal-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 4px;
}

.historial-modal-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font-family);
    color: var(--text-primary, #111);
    background: var(--bg-primary, #fff);
    transition: border-color 0.15s;
}

.historial-modal-input:focus {
    outline: none;
    border-color: var(--primary-blue, #3b82f6);
}

.historial-modal-input::placeholder {
    color: var(--text-tertiary, #9ca3af);
}

/* Textareas del modal: misma tipografía que el resto de la plataforma */
.historial-registro-modal textarea.historial-modal-input,
#historial-editar-modal textarea.historial-modal-input {
    font-family: var(--font-family);
    font-size: 13px;
}

.historial-modal-categoria-btns {
    display: flex;
    gap: 8px;
}

.historial-modal-cat-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.historial-modal-cat-btn:hover {
    border-color: var(--primary-blue, #3b82f6);
    color: var(--primary-blue, #3b82f6);
}

.historial-modal-cat-btn.active {
    background: var(--primary-blue, #3b82f6);
    border-color: var(--primary-blue, #3b82f6);
    color: #fff;
}

.historial-modal-cat-btn[data-categoria="Incidencia"].active {
    background: #ef4444;
    border-color: #ef4444;
}

.historial-modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.historial-modal-solicitante {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.historial-modal-field-flex {
    flex: 1;
}

.historial-registro-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    flex-shrink: 0;
}

.historial-modal-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.historial-modal-cancel {
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111);
}

.historial-modal-cancel:hover {
    background: var(--bg-secondary, #f3f4f6);
}

.historial-modal-save {
    border: none;
    background: var(--primary-blue, #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.historial-modal-save:hover {
    background: #2563eb;
}

/* Contenido del historial */
.historial-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.historial-loading,
.historial-empty,
.historial-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.historial-loading i,
.historial-empty i,
.historial-error i {
    font-size: 2.5rem;
    margin-bottom: 15px;
    opacity: 0.5;
}

.historial-error {
    color: #dc2626;
}

.historial-error i {
    color: #dc2626;
}

/* Estadísticas */
.historial-stats {
    margin-bottom: 8px;
    padding: 6px 12px;
    background: transparent;
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.historial-total {
    font-weight: 500;
    color: #6b7280;
}

/* Tabla de historial - Wrapper con scroll */
.historial-table-wrapper {
    flex: 1;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    position: relative;
}

.historial-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
    table-layout: fixed;
}

.historial-table thead {
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 20;
}

.historial-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    background: #f8fafc;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: relative;
}

/* Resizer para redimensionar columnas */
.historial-table th[data-col] {
    position: relative;
}

.historial-col-resizer {
    position: absolute;
    top: 0;
    right: -3px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 30;
    user-select: none;
}

.historial-col-resizer::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 50%;
    background: #cbd5e1;
    border-radius: 1px;
    transition: background 0.2s, width 0.2s;
}

.historial-col-resizer:hover::before,
.historial-resizing-col .historial-col-resizer::before {
    background: #6366f1;
    width: 3px;
}

body.historial-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}

body.historial-resizing * {
    cursor: col-resize !important;
}

.historial-resizing-col {
    background: #e0e7ff !important;
}

.historial-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    background: white;
}

/* Columna sticky (acciones) */
.historial-col-sticky {
    position: sticky;
    left: 0;
    z-index: 10;
    background: white !important;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}

.historial-table thead .historial-col-sticky {
    background: #f8fafc !important;
    z-index: 25;
}

/* Asegurar que la columna sticky no tenga resizer */
.historial-col-sticky .historial-col-resizer {
    display: none !important;
}

/* Columnas ocultas */
.historial-col-hidden {
    display: none !important;
}

/* Modo foco: línea temporal CRM — oculta el resto de filas */
tr.historial-timeline-focus-hidden {
    display: none !important;
}

/* Anchos por defecto de columnas para table-layout: fixed */
.historial-col-acciones { width: 100px; min-width: 100px; }
.historial-col-select { width: 72px; min-width: 72px; text-align: center; }
.historial-col-select-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.historial-select-all-label,
.historial-row-select-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}
.historial-select-all-label input,
.historial-row-select-label input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-blue, #3b82f6);
}
.historial-row-timeline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-secondary, #f9fafb);
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.historial-row-timeline-btn:hover {
    background: var(--primary-blue, #3b82f6);
    color: #fff;
    border-color: var(--primary-blue, #3b82f6);
}
.historial-row-timeline-btn i {
    font-size: 13px;
}
.historial-row-timeline-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}
.historial-row-timeline-btn.loading i {
    animation: historial-timeline-spin 0.8s linear infinite;
}
@keyframes historial-timeline-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.historial-row-timeline-btn.expanded {
    background: var(--primary-blue, #3b82f6);
    color: #fff;
    border-color: var(--primary-blue, #3b82f6);
}
/* Registro principal: fondo más claro que las filas de historial para diferenciarlos */
.historial-table-body tr.historial-row:not(.historial-row-timeline-hijo):not(.historial-subregistros-row) td {
    background: var(--bg-historial-registro, #f5f7f9);
}
.historial-table-body tr.historial-row:not(.historial-row-timeline-hijo):not(.historial-subregistros-row):hover td {
    background: var(--bg-historial-registro-hover, );
}
.historial-table-body tr.historial-row:not(.historial-row-timeline-hijo) .historial-col-sticky {
    background: var(--bg-historial-registro, #f5f7f9) !important;
}
.historial-table-body tr.historial-row:not(.historial-row-timeline-hijo):hover .historial-col-sticky {
    background: var(--bg-historial-registro-hover, #fcfdfd) !important;
}

/* Filas del historial (versiones en el tiempo): tono más oscuro que el registro para distinguir */
.historial-row-timeline-hijo {
    background: var(--bg-timeline-hijo, #e8f0f7) !important;
}
.historial-row-timeline-hijo td {
    vertical-align: middle;
    border-top: 1px solid rgba(56, 189, 248, 0.25);
}
/* Celda del campo que cambió en esta versión: solo color rojo oscuro al texto */
.historial-row-timeline-hijo td.historial-col-ultimo-cambio {
    color: #991b1b;
}
.historial-row-timeline-hijo td.historial-col-ultimo-cambio .historial-estado-badge {
    box-shadow: inset 0 0 0 1px #991b1b;
}

/* Borrador local: campos pendientes de confirmar en la fila */
.historial-row-pending {
    background: rgba(254, 242, 242, 0.45);
}
.historial-campo-pendiente,
td.historial-campo-pendiente,
.historial-texto-preview.historial-campo-pendiente,
.historial-campo-preview.historial-campo-pendiente,
.historial-estado-badge.historial-campo-pendiente {
    color: #991b1b !important;
}
.historial-estado-badge.historial-campo-pendiente {
    outline: 1px solid #991b1b;
}
.historial-row-confirm-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 6px;
}
.historial-row-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    border-radius: 5px;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.historial-row-confirm-btn:hover {
    background: #15803d;
}
.historial-row-confirm-btn:disabled,
.historial-row-confirm-btn.loading {
    opacity: 0.65;
    cursor: wait;
}
.historial-row-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    background: #fff;
    color: #6b7280;
    font-size: 11px;
    cursor: pointer;
}
.historial-row-cancel-btn:hover {
    background: #f3f4f6;
    color: #374151;
}
.historial-col-select-timeline-hijo {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}
.historial-timeline-hijo-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.historial-timeline-hijo-label i {
    margin-right: 4px;
    color: var(--primary-blue, #3b82f6);
    font-size: 12px;
}
.historial-timeline-hijo-momento {
    font-weight: 500;
    color: var(--text-primary, #111);
}
.historial-timeline-hijo-user {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
}
.historial-timeline-hijo-empty,
.historial-row-timeline-empty td {
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}
.historial-row-timeline-empty td {
    padding: 10px 12px;
}
/* Barra flotante de selección (Gestiones) */
.historial-selection-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-primary, #fff);
    border-top: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10;
}
.historial-selection-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111);
}
.historial-selection-bar .historial-selection-excel-btn,
.historial-selection-excel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: #0d9488;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    margin-right: 8px;
}
.historial-selection-bar .historial-selection-excel-btn:hover,
.historial-selection-excel-btn:hover {
    background: #0f766e;
}
.historial-selection-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: #dc2626;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.historial-selection-delete-btn:hover {
    background: #b91c1c;
}
.historial-selection-bar.historial-selection-bar-visible {
    display: flex;
}
.historial-workspace {
    position: relative;
    padding-bottom: 0;
}
.historial-workspace.has-selection-bar .historial-content {
    padding-bottom: 56px;
}
.historial-col-documentos { width: 60px; min-width: 60px; }
.historial-col-categoria { width: 140px; min-width: 100px; }
.historial-col-referencia { width: 120px; min-width: 80px; }
/* Puntito categoría junto a referencia (Gestiones): verde = Gestión, rojo = Incidencia */
.historial-ref-con-ref {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.historial-categoria-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}
.historial-categoria-dot-gestion { background-color: #22c55e; }
.historial-categoria-dot-incidencia { background-color: #ef4444; }
.historial-categoria-dot-otro { background-color: #94a3b8; }
.historial-col-referencia .historial-field-categoria {
    max-width: 100px;
    min-width: 90px;
    display: inline-block;
}

/* ========== Time Capsule (Historial de cambios estilo Apple) ========== */
.time-capsule-overlay {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.time-capsule-overlay.open {
    opacity: 1;
    visibility: visible;
}
.time-capsule-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.time-capsule-panel {
    position: relative;
    width: 92%;
    max-width: 900px;
    max-height: 93vh;
    min-height: 93vh;
    background: #f8fafc;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.time-capsule-overlay.open .time-capsule-panel {
    transform: scale(1);
}
.time-capsule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    flex-shrink: 0;
}
.time-capsule-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}
.time-capsule-close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 1.5rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.time-capsule-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.time-capsule-ahora-wrap {
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: #fff;
}
.time-capsule-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.time-capsule-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    background: #fff;
}
.time-capsule-momento-placeholder {
    padding: 24px;
    text-align: center;
    color: #64748b;
    font-size: 0.9rem;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}
.time-capsule-momento-card {
    animation: time-capsule-fade-in 0.35s ease;
}
@keyframes time-capsule-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.time-capsule-loading,
.time-capsule-error {
    padding: 24px;
    text-align: center;
    color: #64748b;
}
.time-capsule-error { color: #dc2626; }
.time-capsule-timeline {
    width: 300px;
    flex-shrink: 0;
    padding: 16px 12px;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border-left: 1px solid var(--border-color, #cbd5e1);
    overflow-y: auto;
}
.time-capsule-timeline-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 8px;
    padding-left: 8px;
}
.time-capsule-date-filter-wrap {
    display: block;
    margin-bottom: 12px;
}
.time-capsule-date-filter {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.8rem;
    font-family: var(--font-family);
    color: #334155;
    background: #fff;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 6px;
    cursor: pointer;
    appearance: auto;
}
.time-capsule-date-filter:focus {
    outline: none;
    border-color: var(--primary-blue, #3b82f6);
}
.time-capsule-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.time-capsule-timeline-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    font-size: 0.85rem;
    color: #475569;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.time-capsule-timeline-item:hover {
    background: rgba(255, 255, 255, 0.7);
    color: #0f172a;
}
.time-capsule-timeline-item.active {
    background: #fff;
    color: var(--primary-blue, #3b82f6);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.time-capsule-timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94a3b8;
    transition: background 0.2s, transform 0.2s;
}
.time-capsule-timeline-item.active .time-capsule-timeline-dot {
    background: var(--primary-blue, #3b82f6);
    transform: scale(1.2);
}
.time-capsule-timeline-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.time-capsule-timeline-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.time-capsule-timeline-user {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.time-capsule-card {
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.time-capsule-card-title {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #0f172a;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.time-capsule-card-subtitle {
    padding: 8px 14px;
    font-size: 0.8rem;
    color: #64748b;
    background: #f1f5f9;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.time-capsule-card-subtitle i {
    margin-right: 4px;
}
.time-capsule-card-body {
    padding: 14px;
}
.time-capsule-field {
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
}
.time-capsule-field:last-child { border-bottom: none; }
.time-capsule-field-diff .time-capsule-label { display: block; margin-bottom: 4px; }
.time-capsule-diff-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.time-capsule-diff-removed {
    padding: 6px 8px;
    font-size: 0.85rem;
    background: #fef2f2;
    color: #b91c1c;
    border-left: 3px solid #dc2626;
    border-radius: 4px;
    text-decoration: line-through;
}
.time-capsule-diff-added {
    padding: 6px 8px;
    font-size: 0.85rem;
    background: #f0fdf4;
    color: #15803d;
    border-left: 3px solid #22c55e;
    border-radius: 4px;
}
.time-capsule-label {
    display: inline-block;
    min-width: 100px;
    font-weight: 500;
    color: #64748b;
    margin-right: 8px;
}

.historial-col-tipoGestion { width: 130px; min-width: 100px; }
.historial-col-objeto { width: 150px; min-width: 100px; }
.historial-col-solicitante { width: 180px; min-width: 120px; }
.historial-col-descripcion { width: 250px; min-width: 150px; }
.historial-col-actuacion { width: 200px; min-width: 120px; }
.historial-col-estado { width: 120px; min-width: 80px; }
.historial-col-fecha { width: 140px; min-width: 100px; }
.historial-fecha-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}
.historial-fecha-date { font-weight: 500; }
.historial-fecha-time { font-size: 0.8em; color: #64748b; }
.historial-col-usuario { width: 120px; min-width: 80px; }
.historial-col-accion { width: 100px; min-width: 80px; }
.historial-col-columna-recurso { width: 180px; min-width: 120px; }
.historial-col-valor-anterior { width: 200px; min-width: 150px; }
.historial-col-valor-nuevo { width: 200px; min-width: 150px; }

/* Fila de filtros por columna */
.historial-filter-row th {
    padding: 4px 6px;
    vertical-align: middle;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.historial-column-filter {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--font-family);
    background: #fff;
}
.historial-column-filter:focus {
    outline: none;
    border-color: var(--primary-blue, #3b82f6);
}
.historial-column-filter::placeholder {
    color: #9ca3af;
}

/* Filtro Estado: desplegable estilo Excel (selección múltiple) */
.historial-filter-estado-wrapper {
    position: relative;
}
.historial-filter-estado-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    width: 100%;
    min-width: 90px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: #fff;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
}
.historial-filter-estado-btn:hover {
    border-color: var(--primary-blue, #3b82f6);
    background: #f8fafc;
}
.historial-filter-estado-btn i {
    margin-left: auto;
    font-size: 0.7rem;
}
.historial-filter-estado-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
}
.historial-filter-estado-dropdown.show {
    display: block;
}
.historial-filter-estado-list {
    padding: 6px;
}
.historial-filter-estado-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.8rem;
}
.historial-filter-estado-option:hover {
    background: #f1f5f9;
}
.historial-filter-estado-option input {
    margin: 0;
}
.historial-filter-estado-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}
.historial-filter-estado-empty {
    color: #94a3b8;
    font-size: 0.8rem;
    padding: 8px;
}

/* Cabeceras ordenables */
.historial-th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.historial-th-sortable:hover {
    background: #f1f5f9;
}
.historial-sort-icon {
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.6;
}
.historial-th-sortable .historial-sort-icon.fa-sort-up,
.historial-th-sortable .historial-sort-icon.fa-sort-down {
    opacity: 1;
}

.historial-row:hover td {
    background: #f8fafc;
}

.historial-row:hover .historial-col-sticky {
    background: #f8fafc !important;
}

/* Celda de solicitante: icono + nombre; clic abre popup */
.historial-solicitante-cell {
    min-width: 120px;
}

.historial-solicitante-trigger,
.historial-solicitante-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 4px;
    max-width: 100%;
}
.historial-solicitante-trigger:hover,
.historial-solicitante-preview:hover {
    background: #f1f5f9;
}

/* Celda solicitante: toda la celda clicable para editar */
.historial-solicitante-td-click {
    cursor: pointer;
}
.historial-solicitante-td-click:hover {
    background: #f8fafc;
}
.historial-solicitante-cell.historial-campo-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 100%;
}

.historial-solicitante-icon {
    color: #6b7280;
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-right: 5px;
}

.historial-solicitante-name {
    font-size: 13px;
    color: var(--text-primary, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.historial-solicitante-name-input {
    flex: 1;
    min-width: 0 !important;
    padding: 2px 6px !important;
    font-size: 13px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}
.historial-solicitante-name-input:hover {
    border-color: #e5e7eb !important;
    background: #f9fafb !important;
}
.historial-solicitante-name-input:focus {
    border-color: var(--primary-blue) !important;
    background: white !important;
    outline: none;
}

/* Popup solicitante (teléfono y email, copiables) */
.historial-solicitante-popup {
    position: fixed;
    z-index: 99999;
    min-width: 220px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 13px;
    font-family: var(--font-family);
}

.historial-solicitante-popup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #f3f4f6;
}
.historial-solicitante-popup-row:last-child {
    border-bottom: none;
}

.historial-solicitante-popup-label {
    flex-shrink: 0;
    width: 56px;
    color: #6b7280;
    font-size: 12px;
}

.historial-solicitante-popup-value {
    flex: 1;
    min-width: 0;
    user-select: text;
    cursor: text;
    word-break: break-all;
}

.historial-solicitante-popup-copy {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.historial-solicitante-popup-copy:hover {
    background: #f3f4f6;
    color: var(--primary-blue, #3b82f6);
}
.historial-solicitante-popup-copy:disabled,
.historial-solicitante-popup-copy[data-copy="-"] {
    opacity: 0.5;
    cursor: default;
}

/* Descripción / Actuación: texto truncado (140 chars) y popup al clic */
.historial-texto-preview {
    cursor: pointer;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #111);
    transition: color 0.2s;
}
.historial-texto-preview:hover {
    color: var(--primary-blue, #3b82f6);
}

/* Botón lupa al inicio de descripción/actuación */
.historial-texto-lupa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-right: 6px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
    transition: background 0.2s, color 0.2s;
}
.historial-texto-lupa-btn:hover {
    background: #f3f4f6;
    color: var(--primary-blue, #3b82f6);
}
.historial-texto-lupa-btn i {
    font-size: 0.75rem;
}

.historial-texto-popup {
    position: fixed;
    z-index: 99999;
    min-width: 280px;
    max-width: 420px;
    max-height: 360px;
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    font-size: 13px;
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.historial-texto-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.historial-texto-popup-title {
    font-weight: 600;
    color: #374151;
}

.historial-texto-popup-copy {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.historial-texto-popup-copy:hover {
    background: #f3f4f6;
    color: var(--primary-blue, #3b82f6);
}

.historial-texto-popup-body {
    padding: 12px;
    overflow-y: auto;
    /*white-space: pre-wrap;*/
    word-break: break-word;
    color: #374151;
    line-height: 1.5;
    user-select: text;
}

/* Popup editar (descripción/actuación): textarea + Confirmar */
.historial-texto-edit-popup .historial-texto-popup-body.historial-texto-edit-body {
    padding: 12px;
    min-height: 120px;
}
.historial-texto-edit-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font-family);
    line-height: 1.5;
    resize: vertical;
}
.historial-texto-edit-textarea:focus {
    outline: none;
    border-color: var(--primary-blue, #3b82f6);
}
.historial-texto-popup-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 12px;
    border-top: 1px solid #f3f4f6;
    flex-shrink: 0;
}
.historial-texto-popup-confirmar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: var(--primary-blue, #3b82f6);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}
.historial-texto-popup-confirmar:hover {
    background: #2563eb;
}
.historial-texto-popup-confirmar:active {
    opacity: 0.9;
}

/* Descripción y Actuación: lupa a la izquierda del contenido (solo en estas columnas) */
.historial-descripcion-actuacion-cell {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
}
.historial-descripcion-actuacion-cell .historial-texto-lupa-btn {
    flex-shrink: 0;
    margin-right: 0;
    margin-top: 2px;
}
.historial-descripcion-actuacion-cell .historial-texto-preview {
    flex: 1;
    min-width: 0;
}

/* Contenedor descripción/actuación editable: lupa + textarea (flex-row, lupa a la izquierda) */
.historial-textarea-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
}
.historial-textarea-container .historial-texto-lupa-btn {
    flex-shrink: 0;
    margin-right: 0;
    margin-top: 2px;
}
.historial-textarea-container .historial-textarea-campo,
.historial-textarea-container textarea.historial-editable {
    flex: 1;
    min-width: 0;
}

/* Celdas con lupa + preview: wrapper y dot editable */
.historial-campo-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}
.historial-campo-wrapper .historial-campo-preview {
    cursor: pointer;
}
.historial-campo-wrapper .historial-campo-preview:hover {
    color: var(--primary-blue, #3b82f6);
}
.historial-categoria-dot-editable {
    cursor: pointer;
    margin-right: 4px;
}
.historial-categoria-dot-editable:hover {
    opacity: 0.9;
    transform: scale(1.1);
}

/* Popup editar campo: solicitante (3 inputs) */
.historial-campo-edit-solicitante {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.historial-campo-edit-solicitante label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}
.historial-campo-edit-popup .historial-campo-edit-input,
.historial-campo-edit-popup .historial-campo-edit-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
}

.historial-texto-ver-completo-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.historial-texto-ver-completo-btn:hover {
    background: #f3f4f6;
    color: var(--primary-blue, #3b82f6);
}

/* Textarea descripción/actuación: limitar altura visible en celda (~2-3 líneas) */
.historial-col-descripcion .historial-textarea-container textarea,
.historial-col-actuacion .historial-textarea-container textarea {
    max-height: 4.2em;
    min-height: 2.5em;
    resize: vertical;
}

/* Celda combinada de Objeto (tipo + valor) */
.historial-objeto-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.historial-objeto-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.historial-objeto-field i {
    width: 14px;
    color: #9ca3af;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.historial-objeto-field select,
.historial-objeto-field input {
    flex: 1;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    min-width: 0;
    border: 1px solid transparent !important;
    background: transparent !important;
}

.historial-objeto-field select:hover,
.historial-objeto-field input:hover {
    border-color: #e5e7eb !important;
    background: #f9fafb !important;
}

.historial-objeto-field select:focus,
.historial-objeto-field input:focus {
    border-color: var(--primary-blue) !important;
    background: white !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.historial-row-manual {
    background: #f1f1f1;
}

.historial-row-manual:hover {
    background: #f1f1f1;
}

.historial-row-manual.historial-row-clickable {
    cursor: pointer;
}

.historial-display-text {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-primary, #111);
    word-break: break-word;
}

.historial-display-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* Columnas de la tabla */
.historial-fecha {
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.813rem;
}

.historial-usuario {
    font-weight: 500;
    color: var(--text-primary);
}

.historial-tipo {
    white-space: nowrap;
}

.historial-tipo i {
    margin-right: 6px;
    color: var(--primary-blue);
    width: 16px;
    text-align: center;
}

.historial-accion .badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 8px;
}

.historial-recurso {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.historial-cambio {
    max-width: 300px;
    font-size: 0.813rem;
}

.historial-valor-anterior {
    color: #dc2626;
    text-decoration: line-through;
    opacity: 0.7;
}

.historial-valor-nuevo {
    color: #16a34a;
    font-weight: 500;
}

/* Badge de registro manual */
.historial-badge-manual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #f59e0b;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}

/* Paginación */
.historial-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 15px;
}

.historial-pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.historial-pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.historial-pagination-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.historial-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.historial-page-btn:hover:not(.historial-page-active) {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.historial-page-btn.historial-page-active {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
    cursor: default;
}

.historial-page-ellipsis {
    padding: 0 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Botones de acción en historial */
.historial-acciones-btns {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.historial-ver-completo-btn,
.historial-editar-btn {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    background: white;
    color: #6b7280;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.historial-ver-completo-btn:hover {
    background: #f3f4f6;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.historial-editar-btn {
    color: #059669;
}

.historial-editar-btn:hover {
    background: #f0fdf4;
    border-color: #059669;
    color: #047857;
}

/* Filtros de categoría */
.historial-filter-categorias {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.historial-filter-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.historial-categoria-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.historial-categoria-badge {
    padding: 6px 12px;
    border: 2px solid transparent;
    border-radius: 6px;
    font-size: 0.813rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

/* Inactivo: fondo muy suave y borde gris, texto más claro */
.historial-categoria-badge:not(.active) {
    opacity: 0.55;
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #6b7280;
}

.historial-categoria-badge:not(.active):hover {
    opacity: 0.75;
    background: #e5e7eb !important;
    color: #374151;
}

/* Activo: colores pastel y borde visible */
.historial-categoria-badge.active {
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.historial-categoria-badge.active:hover {
    filter: brightness(0.97);
}

.historial-categoria-badge[data-categoria="Gestión"].active {
    background: #a7f3d0;
    border-color: #059669;
    color: #065f46;
}

.historial-categoria-badge[data-categoria="Incidencia"].active {
    background: #fecaca;
    border-color: #dc2626;
    color: #991b1b;
}

/* Filtro de orden */
.historial-filter-orden {
    display: flex;
    align-items: center;
    gap: 8px;
}

.historial-filter-orden-select {
    min-width: 180px;
}

/* Columnas nuevas de la tabla */
.historial-categoria {
    white-space: nowrap;
}

.historial-referencia {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.historial-tipo-gestion {
    white-space: nowrap;
}

.historial-objeto {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.historial-estado,
.historial-col-estado {
    white-space: nowrap;
}
.historial-estado-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    color:#fff !important;
}
.historial-estado-badge.historial-campo-preview:hover {
    opacity: 0.9;
}

/* Select de estado con colores */
.historial-estado-select {
    padding: 4px 24px 4px 8px !important;
    border-radius: 6px !important;
    font-weight: 500;
    font-size: 0.75rem !important;
    transition: all 0.2s;
    min-width: 110px !important;
}

.historial-estado-select:focus {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

.historial-estado-select option {
    padding: 8px 12px;
    font-weight: 500;
}

.historial-acciones {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.historial-expand-btn {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    background: white;
    color: #6b7280;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.historial-expand-btn:hover {
    background: #f3f4f6;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.historial-expand-btn.expanded {
    transform: rotate(90deg);
}

/* Sub-registros expandidos */
.historial-subregistros {
    display: none;
}

.historial-subregistros.expanded {
    display: table-row;
}

.historial-subregistros td {
    background: #f8fafc;
    padding-left: 40px;
}

.historial-subregistros-table {
    width: 100%;
    font-size: 0.813rem;
    margin: 10px 0;
}

.historial-subregistros-table th {
    padding: 8px 12px;
    background: #e5e7eb;
    font-weight: 600;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.historial-subregistros-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
}

/* Campos editables inline - Compactos */
.historial-editable {
    width: 100%;
    min-width: 80px;
    padding: 4px 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.75rem;
    transition: all 0.15s;
    border-radius: 4px;
}

.historial-editable:hover {
    border-color: #e5e7eb;
    background: #f9fafb;
}

.historial-editable:focus {
    outline: none;
    border-color: var(--primary-blue);
    background: white;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Selects en tabla */
.historial-table select.historial-editable {
    padding: 4px 24px 4px 6px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 16px;
}

/* Textareas en tabla (descripción y actuación): misma tipografía que el resto de la plataforma */
.historial-table textarea.historial-editable {
    min-height: 40px;
    max-height: 80px;
    resize: vertical;
    line-height: 1.4;
    font-family: var(--font-family);
    font-size: 13px;
}

.historial-row-new {
    background: #f0f9ff !important;
}

.historial-row-new:hover {
    background: #e0f2fe !important;
}

.historial-row-new .historial-editable {
    border-color: #93c5fd;
    background: white;
}

.historial-save-btn,
.historial-cancel-btn {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    background: white;
    color: #6b7280;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.historial-save-btn {
    color: #059669;
}

.historial-save-btn:hover {
    background: #f0fdf4;
    border-color: #059669;
    color: #047857;
}

.historial-cancel-btn {
    color: #dc2626;
}

.historial-cancel-btn:hover {
    background: #fef2f2;
    border-color: #dc2626;
    color: #b91c1c;
}

/* Ajustes de columnas */
.historial-categoria select,
.historial-tipo-gestion select,
.historial-objeto-tipo select,
.historial-estado select {
    min-width: 120px;
}

.historial-referencia input,
.historial-objeto-valor input,
.historial-solicitante-nombre input,
.historial-solicitante-telefono input,
.historial-solicitante-email input {
    min-width: 150px;
}

.historial-col-descripcion textarea,
.historial-col-actuacion textarea,
.historial-descripcion textarea,
.historial-actuacion textarea {
    min-width: 200px;
    resize: vertical;
    font-family: var(--font-family);
    font-size: 13px;
}

/* Columna de documentos */
.historial-documentos {
    min-width: 120px;
    padding: 8px !important;
}

.historial-docs-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.historial-docs-folder-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f8fafc;
    color: #0d9488;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.historial-docs-folder-btn:hover {
    background: #ccfbf1;
    border-color: #0d9488;
    color: #0f766e;
    box-shadow: 0 2px 4px rgba(13, 148, 136, 0.2);
}

.historial-docs-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: #0d9488;
    border-radius: 8px;
    border: 1px solid #fff;
}

.historial-docs-container {
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
    align-items: center;
    vertical-align: middle;
}

.historial-docs-dropzone {
    position: relative;
    width: 100%;
    min-height: 40px;
    border: 2px dashed #d1d5db;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    transition: all 0.2s;
    cursor: pointer;
}

.historial-docs-dropzone:hover {
    border-color: var(--primary-blue);
    background: #f0f9ff;
}

.historial-docs-dropzone.drag-over {
    border-color: var(--primary-blue);
    background: #e0f2fe;
    border-style: solid;
}

.historial-docs-add-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: #6b7280;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.historial-docs-add-btn:hover {
    color: var(--primary-blue);
    background: rgba(59, 130, 246, 0.1);
}

.historial-docs-thumbnails {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    width: fit-content;
}

.historial-doc-thumbnail {
    position: relative;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.historial-doc-thumbnail:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
}

.historial-doc-thumbnail-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #6366f1;
}

.historial-doc-thumbnail-icon i.fa-file-pdf {
    color: #dc2626;
}

.historial-doc-thumbnail-icon i.fa-file-word {
    color: #2563eb;
}

.historial-doc-thumbnail-icon i.fa-file-excel {
    color: #16a34a;
}

.historial-doc-thumbnail-delete {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dc2626;
    color: white;
    border: 2px solid white;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.historial-doc-thumbnail:hover .historial-doc-thumbnail-delete {
    display: flex;
}

.historial-doc-thumbnail-delete:hover {
    background: #b91c1c;
    transform: scale(1.1);
}

.historial-docs-placeholder {
    color: #9ca3af;
    font-size: 0.75rem;
    text-align: center;
    padding: 8px;
}

.historial-docs-section {
    margin-bottom: 20px;
}

.historial-docs-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #374151;
}

.historial-docs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Popup de documentos (tabla, checkboxes, acciones) */
.historial-docs-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.historial-docs-popup-panel {
    background: var(--bg-primary, #fff);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.historial-docs-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    flex-shrink: 0;
}

.historial-docs-popup-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #111);
    display: flex;
    align-items: center;
    gap: 8px;
}

.historial-docs-popup-title .fa-folder-open {
    color: #0d9488;
}

.historial-docs-popup-count {
    font-weight: 500;
    color: #6b7280;
}

.historial-docs-popup-close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s;
}

.historial-docs-popup-close:hover {
    background: #f3f4f6;
    color: #111;
}

.historial-docs-popup-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    flex-shrink: 0;
}

.historial-docs-popup-select-all {
    margin: 0;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.historial-docs-popup-bulk-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.historial-docs-popup-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.historial-docs-popup-bulk-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.historial-docs-popup-bulk-delete:hover {
    border-color: #dc2626;
    color: #dc2626;
    background: #fef2f2;
}

.historial-docs-popup-body {
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.historial-docs-popup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.historial-docs-popup-table th,
.historial-docs-popup-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.historial-docs-popup-table th {
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
}

.historial-docs-popup-table tbody tr:hover {
    background: #f9fafb;
}

.historial-docs-popup-col-cb {
    width: 36px;
    text-align: center;
    vertical-align: middle;
}

.historial-docs-popup-cb-label {
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.historial-docs-popup-col-name {
    max-width: 220px;
}

.historial-docs-popup-file-icon {
    margin-right: 8px;
    color: #6b7280;
}

.historial-docs-popup-col-type {
    width: 60px;
    color: #6b7280;
}

.historial-docs-popup-col-size {
    width: 70px;
    color: #6b7280;
}

.historial-docs-popup-col-date {
    width: 100px;
    color: #6b7280;
}

.historial-docs-popup-col-actions {
    width: 120px;
    text-align: right;
}

.historial-docs-popup-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    transition: all 0.2s;
}

.historial-docs-popup-btn:hover {
    background: #f3f4f6;
    color: #111;
}

.historial-docs-popup-btn-delete:hover {
    background: #fef2f2;
    color: #dc2626;
}

.historial-docs-popup-empty {
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    padding: 24px !important;
}

.historial-docs-popup-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    flex-shrink: 0;
}

.historial-docs-popup-add-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.historial-docs-popup-add-section h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.historial-docs-popup-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 20px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.historial-docs-popup-dropzone:hover {
    border-color: #0d9488;
    background: #f0fdfa;
}

.historial-docs-popup-dropzone.historial-docs-popup-dropzone-drag-over {
    border-color: #0d9488;
    background: #ccfbf1;
    border-style: solid;
}

.historial-docs-popup-dropzone-icon {
    font-size: 28px;
    color: #9ca3af;
    margin-bottom: 8px;
}

.historial-docs-popup-dropzone:hover .historial-docs-popup-dropzone-icon,
.historial-docs-popup-dropzone.historial-docs-popup-dropzone-drag-over .historial-docs-popup-dropzone-icon {
    color: #0d9488;
}

.historial-docs-popup-dropzone-text {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.historial-docs-popup-dropzone-hint {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.historial-doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: all 0.2s;
}

.historial-doc-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.historial-doc-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #6366f1;
    font-size: 1.25rem;
}

.historial-doc-info {
    flex: 1;
    min-width: 0;
}

.historial-doc-name {
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.historial-doc-meta {
    font-size: 0.75rem;
    color: #6b7280;
}

.historial-doc-actions {
    display: flex;
    gap: 8px;
}

.historial-doc-download-btn,
.historial-docs-eliminar-btn {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    background: white;
    color: #6b7280;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.historial-doc-download-btn:hover {
    background: #f0f9ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

.historial-docs-eliminar-btn:hover {
    background: #fef2f2;
    border-color: #ef4444;
    color: #ef4444;
}

.historial-docs-select {
    width: 100%;
    margin-bottom: 10px;
}

/* Modal de valores completos */
.historial-completo-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.historial-completo-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.historial-completo-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.historial-completo-field span {
    font-size: 0.875rem;
    color: #374151;
}

.historial-badge-manual-inline {
    display: inline-block;
    padding: 2px 8px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.historial-completo-valores {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.historial-completo-valor {
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e5e7eb;
}

.historial-completo-valor-anterior {
    background: #fef2f2;
    border-color: #fecaca;
}

.historial-completo-valor-nuevo {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.historial-completo-valor label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

.historial-completo-valor-anterior label {
    color: #dc2626;
}

.historial-completo-valor-nuevo label {
    color: #16a34a;
}

.historial-completo-valor-content {
    background: white;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    font-size: 0.875rem;
    color: #374151;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 300px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    line-height: 1.6;
}

.historial-completo-detalles {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.historial-completo-detalles label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.historial-completo-detalles-content {
    background: #f8fafc;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    font-size: 0.813rem;
    color: #374151;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 200px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    line-height: 1.6;
}

/* Estilo para el tipo de workspace en el dropdown */
.workspace-type-option[data-type="historial"] .workspace-type-icon {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.workspace-type-option[data-type="historial"] .workspace-type-icon i {
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .historial-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .historial-controls {
        width: 100%;
    }

    .historial-filters {
        flex-direction: column;
        width: 100%;
    }

    .historial-filters .form-control,
    .historial-filters select {
        width: 100%;
    }

    .historial-table {
        display: block;
        overflow-x: auto;
    }

    .historial-cambio {
        max-width: 150px;
    }

    .historial-pagination {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .historial-pagination-info {
        text-align: center;
    }

    .historial-pagination-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .historial-completo-info {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ESTILOS MODAL DE EXPORTACIÓN
   ============================================ */

.export-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.export-modal-content {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
}

.export-modal-header {
    padding: 7px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9fafb;
}

.export-modal-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #111827;
}

.export-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.2s;
}

.export-modal-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.export-modal-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.export-sidebar {
    width: 300px;
    border-right: 1px solid #e5e7eb;
    padding: 20px;
    overflow-y: auto;
    background: #f9fafb;
}

.export-sidebar h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.export-section {
    margin-bottom: 30px;
}

.export-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.export-section h4 i {
    margin-right: 6px;
    color: #6366f1;
}

/* Filtro de fechas */
.export-date-filter {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.export-date-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.export-date-select:hover {
    border-color: #6366f1;
}

.export-date-select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.export-custom-dates {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.export-date-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.export-date-row label {
    font-size: 13px;
    color: #6b7280;
    min-width: 50px;
}

.export-date-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
}

.export-date-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Modal de exportación de facturas */
.export-facturas-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.export-facturas-modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 95%;
    max-width: 1400px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.export-facturas-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
}

.export-facturas-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.export-facturas-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.export-facturas-modal-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.export-facturas-modal-body {
    flex: 1;
    padding: 16px 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Tabla de previsualización de facturas */
.export-facturas-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.export-facturas-preview-table thead {
    background: #f9fafb;
    position: sticky;
    top: 0;
    z-index: 10;
}

.export-facturas-preview-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: move;
    user-select: none;
    transition: background 0.2s;
}

.export-facturas-preview-table th:hover {
    background: #f3f4f6;
}

.export-facturas-preview-table th.dragging {
    opacity: 0.5;
    background: #dbeafe;
}

.export-facturas-preview-table th.drag-over {
    background: #bfdbfe;
    border-left: 2px solid #3b82f6;
}

.export-facturas-preview-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
    color: #6b7280;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.export-facturas-preview-table tbody tr:hover {
    background: #f9fafb;
}

.export-facturas-preview-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.export-facturas-preview-table tbody tr:nth-child(even):hover {
    background: #f3f4f6;
}

.export-facturas-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #fafafa;
}

.export-facturas-template-section {
    margin-bottom: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}

.export-facturas-template-section h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.export-facturas-columns-container {
    margin-left: 28px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.export-facturas-columns-container label {
    display: flex;
    align-items: center;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.export-facturas-columns-container label:hover {
    background: #f3f4f6;
}

.export-facturas-columns-container input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
}

/* Tabs del gestor de columnas (facturas) en jerarquía */
.export-facturas-cm-tabs-tree {
    margin-top: 4px;
}

.export-facturas-cm-tree-node {
    transition: all 0.2s ease;
}

.export-facturas-cm-tree-node[data-level="0"] {
    margin-left: 0 !important;
}

.export-facturas-cm-tree-node[data-level="1"],
.export-facturas-cm-tree-node[data-level="2"],
.export-facturas-cm-tree-node[data-level="3"] {
    border-left: 2px dashed #e5e7eb;
    padding-left: 8px;
}

.export-facturas-cm-tab {
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.export-facturas-cm-tab:hover {
    filter: brightness(0.98);
}

.export-facturas-template-checkbox {
    margin-right: 8px;
    cursor: pointer;
}

.export-date-help {
    margin: 0;
    font-size: 12px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 6px;
}

.export-date-help i {
    color: #6366f1;
}

.export-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.export-checkbox-item {
    display: flex;
    align-items: flex-start;
}

.export-checkbox-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    flex: 1;
}

.export-checkbox-item input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.export-checkbox-item span {
    flex: 1;
}

.export-columna-meta {
    color: #9ca3af;
    font-size: 12px;
    margin-left: 4px;
}

.export-tag-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 6px;
}

.export-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.export-preview-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.export-preview-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.export-workspace-tab {
    padding: 8px 16px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #6b7280;
    transition: all 0.2s;
}

.export-workspace-tab:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.export-workspace-tab.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.btn-export-download {
    padding: 10px 20px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-export-download:hover {
    background: #059669;
}

.btn-export {
    padding: 6px 12px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-export:hover {
    background: #2563eb;
}

.export-preview-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #fff;
}

.export-element-container {
    margin-bottom: 40px;
}

.export-element-container h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
}

.export-table-wrapper {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.export-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.export-preview-table thead {
    background: #f9fafb;
}

.export-preview-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.export-preview-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    color: #6b7280;
}

.export-preview-table tbody tr:hover {
    background: #f9fafb;
}

.export-preview-table tbody tr:last-child td {
    border-bottom: none;
}

/* Estilos optimizados para tablas */
.export-workspace-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.export-workspace-title {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    padding-bottom: 12px;
    border-bottom: 2px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 10px;
}

.export-workspace-title i {
    color: #3b82f6;
}

.export-element-container {
    margin-bottom: 30px;
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    border: 1px solid #e5e7eb;
}

.export-element-title {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.export-element-title i {
    color: #6b7280;
    margin-right: 8px;
}

.export-element-meta {
    font-size: 12px;
    font-weight: 400;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 12px;
}

.export-table-wrapper {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    max-height: 600px;
    overflow-y: auto;
}

.export-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 100%;
}

.export-preview-table thead {
    background: #f9fafb;
    position: sticky;
    top: 0;
    z-index: 10;
}

.export-preview-table th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.export-th-id {
    width: 120px;
    min-width: 120px;
}

.export-th-name {
    width: 200px;
    min-width: 200px;
}

.export-th-col {
    min-width: 150px;
}

.export-preview-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    color: #6b7280;
    vertical-align: top;
}

.export-td-id {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #9ca3af;
}

.export-td-name {
    font-weight: 500;
    color: #374151;
}

.export-td-value {
    max-width: 300px;
    word-wrap: break-word;
    word-break: break-word;
}

.export-preview-table tbody tr:hover {
    background: #f9fafb;
}

.export-preview-table tbody tr:last-child td {
    border-bottom: none;
}

.export-empty-message {
    padding: 40px;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
}

.export-empty-cell {
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    padding: 20px !important;
}

/* Pestañas de layout */
.export-layout-tab {
    padding: 10px 20px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s;
    white-space: nowrap;
}

.export-layout-tab:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.export-layout-tab.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

/* Estilos para previsualización estilo Excel */
.export-excel-preview {
    width: 100%;
    overflow: auto;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

.export-excel-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11pt;
    background: #fff;
}

.export-excel-header-row {
    background: #f0f0f0;
}

.export-excel-header-cell {
    padding: 8px 12px;
    font-weight: bold;
    font-size: 12pt;
    border-bottom: 1px solid #d1d5db;
    color: #1f2937;
}

.export-excel-column-headers {
    background: #f9fafb;
}

.export-excel-th {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 10pt;
    text-align: center;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-bottom: 2px solid #9ca3af;
    color: #374151;
    white-space: nowrap;
}

.export-excel-data-row {
    border-bottom: 1px solid #e5e7eb;
}

.export-excel-data-row:hover {
    background: #f9fafb;
}

.export-excel-td {
    padding: 6px 12px;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
    font-size: 10pt;
    vertical-align: top;
}

.export-excel-td:first-child {
    font-weight: 500;
}

.export-excel-td:last-child {
    border-right: none;
}

/* Estilos para modal de detalle de inventario */
.historial-inventario-detalle {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.historial-inventario-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.historial-inventario-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.historial-inventario-field span {
    font-size: 0.875rem;
    color: #374151;
}

.historial-inventario-valores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
}

.historial-inventario-valor-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.historial-inventario-valor-container label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.historial-inventario-valor {
    padding: 15px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #374151;
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 60px;
    border: 2px solid;
}

.historial-inventario-valor-anterior {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}

.historial-inventario-valor-nuevo {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #166534;
}

.historial-inventario-valor-vacio {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #6b7280;
}

.historial-inventario-valor-vacio em {
    font-style: italic;
    color: #9ca3af;
}

.historial-ver-detalle-inventario-btn {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    background: white;
    color: #6366f1;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.historial-ver-detalle-inventario-btn:hover {
    background: #f3f4f6;
    border-color: #6366f1;
    color: #4f46e5;
}

.historial-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    border-bottom: 2px solid #e5e7eb;
}

.historial-tab {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.historial-tab:hover {
    color: #374151;
    background: #f9fafb;
}

.historial-tab.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
    font-weight: 600;
}

/* Contenedor de textarea con botón */
.historial-textarea-container {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-direction: column;
}

.historial-textarea-container textarea {
    flex: 1;
    min-width: 0;
}

.historial-textarea-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.historial-textarea-modal-btn {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    background: white;
    color: #6b7280;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 28px;
}

.historial-textarea-modal-btn:hover {
    background: #f3f4f6;
    border-color: #6366f1;
    color: #6366f1;
}

.historial-textarea-modal-content {
    font-family: inherit;
    resize: vertical;
}

/* ============================================
   ICONO DE USUARIO Y DESPLEGABLE
   ============================================ */

.user-profile-dropdown {
    position: relative;
    margin-right: 8px;
}

.user-profile-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.user-avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.user-profile-btn:hover .user-avatar-circle {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.user-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.user-profile-menu.show {
    display: block;
}

.user-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    color: #374151;
    font-size: 14px;
}

.user-profile-menu-item:hover {
    background: #f3f4f6;
}

.user-profile-menu-item i {
    width: 16px;
    color: #6b7280;
}

.user-profile-menu-item:hover i {
    color: #ef4444;
}

/* ============================================
   MODAL GESTIONES A PANTALLA COMPLETA
   ============================================ */

.crm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.crm-modal-content {
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    position: relative;
}

.crm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: white;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.crm-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 12px;
}

.crm-modal-header h2 i {
    color: #2563eb;
}

.crm-modal-close {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 20px;
}

.crm-modal-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.crm-modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Asegurar que el historial-workspace dentro del modal ocupe todo el espacio */
.crm-modal-body .historial-workspace {
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    padding: 20px 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.crm-modal-body .historial-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Tabla con scroll horizontal fijo abajo */
.crm-modal-body .historial-table-wrapper {
    flex: 1;
    /* Forzar que el scroll horizontal esté siempre visible */
    overflow-x: scroll;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.crm-modal-body .historial-table-wrapper::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.crm-modal-body .historial-table-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 6px;
}

.crm-modal-body .historial-table-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
    border: 2px solid #f1f5f9;
}

.crm-modal-body .historial-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Forzar que el scroll horizontal esté siempre visible */
.crm-modal-body .historial-table {
    width: max-content;
    min-width: 100%;
}

/* Responsive para el modal Gestiones */
@media (max-width: 768px) {
    .crm-modal-body .historial-workspace {
        padding: 16px;
    }
    
    .crm-modal-header {
        padding: 16px;
    }
    
    .crm-modal-header h2 {
        font-size: 1.25rem;
    }
}

/* ============================================
   CAMBIOS PENDIENTES DE APROBACIÓN
   ============================================ */

/* Badge en el tab de pendientes */
.historial-tab-badge {
    background: #dc2626;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    min-width: 18px;
    text-align: center;
}

/* Badge "No organizados" en Master y Gestor de facturas */
.no-organizados-badge {
    vertical-align: middle;
}

.cambios-pendientes-badge {
    background: #dc2626;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Contenedor principal de cambios pendientes */
.cambios-pendientes-container {
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
    min-height: 200px;
}

.cambios-pendientes-section {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.cambios-pendientes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
}

.cambios-pendientes-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cambios-pendientes-header h4 i {
    font-size: 1.1rem;
    color: #d97706;
}

.cambios-pendientes-count {
    background: #dc2626;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
}

.cambios-pendientes-actions {
    display: flex;
    gap: 8px;
}

.btn-aprobar-todos {
    background: #059669;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-aprobar-todos:hover {
    background: #047857;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}

.cambios-pendientes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Lista dentro del contenedor principal (tab dedicado) */
.cambios-pendientes-container .cambios-pendientes-list {
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}

/* Lista dentro de sección colapsada */
.cambios-pendientes-section .cambios-pendientes-list {
    max-height: 400px;
    overflow-y: auto;
}

.cambios-pendientes-empty {
    text-align: center;
    color: #92400e;
    font-style: italic;
    padding: 20px;
}

.cambio-pendiente-card {
    background: white;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
}

.cambio-pendiente-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.cambio-pendiente-grupo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.cambio-pendiente-grupo i {
    color: #2563eb;
}

.cambio-pendiente-grupo-link {
    color: #1d4ed8;
    font-weight: 500;
    text-decoration: none;
}

.cambio-pendiente-grupo-link:hover {
    color: #1e40af;
    text-decoration: underline;
}

.cambio-pendiente-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cambio-pendiente-campo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
}

.cambio-pendiente-campo i {
    color: #6366f1;
}

.cambio-pendiente-campo strong {
    font-weight: 600;
}

.cambio-pendiente-campo-grupo {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 400;
}

.cambio-pendiente-fecha {
    font-size: 0.8rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cambio-pendiente-valores {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 12px;
}

.cambio-pendiente-valor-actual,
.cambio-pendiente-valor-nuevo {
    flex: 1;
}

.cambio-pendiente-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 4px;
}

.cambio-pendiente-valor-actual .cambio-pendiente-value {
    color: #dc2626;
    background: #fef2f2;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 0.85rem;
    display: inline-block;
}

.cambio-pendiente-valor-nuevo .cambio-pendiente-value {
    color: #059669;
    background: #ecfdf5;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 0.85rem;
    display: inline-block;
}

.cambio-pendiente-flecha {
    color: #9ca3af;
    font-size: 1.2rem;
}

.cambio-pendiente-documento {
    margin-bottom: 12px;
}

.cambio-pendiente-doc-link {
    color: #2563eb;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.cambio-pendiente-doc-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.cambio-pendiente-doc-link i {
    color: #dc2626;
}

.cambio-pendiente-acciones {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-aprobar-cambio {
    background: #10b981;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-aprobar-cambio:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.btn-rechazar-cambio {
    background: #ef4444;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-rechazar-cambio:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.btn-aprobar-cambio:disabled,
.btn-rechazar-cambio:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Scrollbar para lista de cambios pendientes */
.cambios-pendientes-list::-webkit-scrollbar {
    width: 8px;
}

.cambios-pendientes-list::-webkit-scrollbar-track {
    background: rgba(245, 158, 11, 0.1);
    border-radius: 4px;
}

.cambios-pendientes-list::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.3);
    border-radius: 4px;
}

.cambios-pendientes-list::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.5);
}

/* Responsive para cambios pendientes */
@media (max-width: 768px) {
    .cambios-pendientes-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .cambios-pendientes-valores {
        flex-direction: column;
        gap: 12px;
    }
    
    .cambio-pendiente-flecha {
        transform: rotate(90deg);
    }
    
    .cambio-pendiente-acciones {
        justify-content: stretch;
    }
    
    .btn-aprobar-cambio,
    .btn-rechazar-cambio {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================
   RESPONSIVE - OPTIMIZACION MOVIL
   ============================================ */

/* Overlay del sidebar móvil */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Botón cerrar sidebar móvil */
.close-sidebar-btn {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    font-size: 18px;
    color: #374151;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.2s ease;
}

.close-sidebar-btn:hover {
    background: #e5e7eb;
    color: #111827;
}

/* Botón hamburguesa (oculto por defecto en desktop) */
.mobile-menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    font-size: 22px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.mobile-menu-btn:hover {
    background: #f3f4f6;
}

/* Logo móvil (oculto por defecto) */
.mobile-logo {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* Botón búsqueda móvil (oculto por defecto) */
.mobile-search-btn {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    font-size: 18px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.mobile-search-btn:hover {
    background: #f3f4f6;
    color: var(--text-primary);
}

/* Modal de búsqueda móvil */
.mobile-search-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1001;
    flex-direction: column;
}

.mobile-search-modal.active {
    display: flex;
}

.mobile-search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
}

.mobile-search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 0 12px;
    gap: 10px;
}

.mobile-search-input-wrapper i {
    color: var(--text-secondary);
    font-size: 16px;
}

.mobile-search-input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 16px;
    outline: none;
}

.mobile-search-clear {
    display: none;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
}

.mobile-search-clear.visible {
    display: block;
}

.mobile-search-close {
    border: none;
    background: transparent;
    color: var(--primary-blue);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 4px;
    white-space: nowrap;
}

.mobile-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.mobile-search-results .search-result-item {
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mobile-search-results .search-result-item:hover,
.mobile-search-results .search-result-item:active {
    background: #f9fafb;
}

.mobile-search-results .search-result-item h5 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.mobile-search-results .search-result-item small {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ============================================
   RESPONSIVE BREAKPOINTS PARA DESKTOP/LAPTOP
   ============================================ */

/* --- Extra large desktops (1600px+) --- */
@media (max-width: 1600px) {
    :root {
        --app-sidebar-width: 280px;
        --app-sidebar-min-width: 280px;
        --app-sidebar-max-width: 280px;
    }

    .sidebar-nav li a {
        padding: 7px 16px;
        font-size: 13px;
    }

    .mapa-fs-history-item {
        padding: 7px 16px;
        font-size: 13px;
    }
}

/* --- Large laptops (1400px) --- */
@media (max-width: 1400px) {
    :root {
        --app-sidebar-width: 240px;
        --app-sidebar-min-width: 240px;
        --app-sidebar-max-width: 240px;
    }

    .sidebar-nav li a {
        padding: 6px 14px;
        font-size: 12.5px;
    }

    .sidebar-nav ul ul li a {
        margin-left: 3px;
    }

    .sidebar-header,
    .mapa-fs-sidebar-header,
    .mapa-fs-filters {
        padding: 8px 12px;
    }

    .mapa-fs-history-item {
        padding: 6px 14px;
        font-size: 12.5px;
    }

    /* Tipografía general reducida */
    .group-title {
        font-size: 22px;
    }

    .tab-link {
        font-size: 13px;
        padding: 8px 14px;
    }

    /* Periodos: labels más compactos */
    .periodos-consolidado-timeline-labels .periodo-label {
        flex: 0 0 65px;
        min-width: 65px;
        font-size: 11px;
        padding: 4px 2px;
    }

    .periodos-consolidado-timeline-bars .periodo-bar {
        flex: 0 0 65px;
        min-width: 65px;
    }

    .periodos-consolidado-grupo-label {
        flex: 0 0 160px;
        min-width: 160px;
        font-size: 12.5px;
    }

    /* Header periodos compacto */
    .periodos-facturacion-header h4 {
        font-size: 16px;
    }

    .periodos-facturacion-header .btn-periodos-prev,
    .periodos-facturacion-header .btn-periodos-next {
        padding: 4px 8px;
        font-size: 12px;
    }

    .periodos-facturacion-header .btn-export-excel,
    .periodos-facturacion-header .btn-export-pdf {
        padding: 5px 10px;
        font-size: 12px;
    }

    .periodos-facturacion-years {
        font-size: 13px;
        min-width: 55px;
    }

    .periodos-facturacion-search .periodos-cups-search {
        min-width: 100px;
        max-width: 160px;
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* --- Standard laptops (1200px) --- */
@media (max-width: 1200px) {
    :root {
        --app-sidebar-width: 210px;
        --app-sidebar-min-width: 210px;
        --app-sidebar-max-width: 210px;
    }

    .sidebar-nav li a {
        padding: 5px 12px;
        font-size: 12px;
    }

    .mapa-fs-history-item {
        padding: 5px 12px;
        font-size: 12px;
    }

    .sidebar-nav ul ul {
        margin-left: 16px;
    }

    .toggle-icon {
        margin-right: 6px;
    }

    /* Tipografía */
    .group-title {
        font-size: 20px;
    }

    .content-body {
        padding: 14px;
    }

    .tab-link {
        font-size: 12.5px;
        padding: 7px 12px;
    }

    /* Periodos: aún más compactos */
    .periodos-consolidado-timeline-labels .periodo-label {
        flex: 0 0 55px;
        min-width: 55px;
        font-size: 10.5px;
        padding: 3px 1px;
    }

    .periodos-consolidado-timeline-bars .periodo-bar {
        flex: 0 0 55px;
        min-width: 55px;
        min-height: 32px !important;
    }

    .periodos-consolidado-grupo-label {
        flex: 0 0 130px;
        min-width: 130px;
        font-size: 12px;
    }

    /* Single value card */
    .single-value-number {
        font-size: 2.2rem;
    }

    /* Header periodos más compacto */
    .periodos-facturacion-header {
        gap: 8px;
    }

    .periodos-facturacion-header h4 {
        font-size: 15px;
    }

    .periodos-facturacion-controls {
        gap: 6px;
    }

    .periodos-facturacion-header .btn-periodos-prev span,
    .periodos-facturacion-header .btn-periodos-next span {
        display: none;
    }

    .periodos-facturacion-header .btn-export-excel span,
    .periodos-facturacion-header .btn-export-pdf span {
        display: none;
    }

    .periodos-facturacion-header .btn-export-excel,
    .periodos-facturacion-header .btn-export-pdf {
        padding: 5px 8px;
    }

    .periodos-facturacion-years {
        font-size: 12px;
        min-width: 45px;
    }

    .periodos-facturacion-search .periodos-cups-search {
        min-width: 80px;
        max-width: 130px;
        font-size: 12px;
    }
}

/* ============================================
   TABLERO RESPONSIVE (max-width: 1199px)
   Modo edición: widgets pasan a grid CSS en pantallas reducidas
   (Modo readonly usa transform:scale para ajustarse - ver updateBoardZoomToContent)
   ============================================ */
@media (max-width: 1199px) {
    .element-wrapper.form-drop-zone {
        overflow-x: hidden;
    }

    /* Modo edición: forzar grid en pantallas reducidas */
    .element-wrapper.form-drop-zone .draggable-form-container.editing-mode {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
        gap: 12px;
        overflow-x: hidden;
        min-height: auto !important;
    }

    .element-wrapper.form-drop-zone .draggable-form-container.editing-mode .form-widget {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    .element-wrapper.form-drop-zone .draggable-form-container.editing-mode .form-widget.wide {
        grid-column: 1 / -1;
    }

    .element-wrapper.form-drop-zone .draggable-form-container.editing-mode .form-widget.widget-separator {
        grid-column: 1 / -1;
        margin: 4px 0 !important;
    }

    /* Ocultar overlay y slots del grid en pantallas reducidas (el layout ya es grid nativo) */
    .element-wrapper.form-drop-zone .draggable-form-container.editing-mode .grid-overlay,
    .element-wrapper.form-drop-zone .draggable-form-container.editing-mode .grid-line-vertical,
    .element-wrapper.form-drop-zone .draggable-form-container.editing-mode .grid-line-horizontal,
    .element-wrapper.form-drop-zone .draggable-form-container.editing-mode .grid-slot {
        display: none !important;
    }

    /* Periodos: scroll interno controlado */
    .periodos-consolidado-timeline-labels .periodo-label {
        flex: 0 0 50px;
        min-width: 50px;
        font-size: 10px;
        padding: 3px 1px;
    }

    .periodos-consolidado-timeline-bars .periodo-bar {
        flex: 0 0 50px;
        min-width: 50px;
        min-height: 30px !important;
    }

    .periodos-consolidado-grupo-label {
        flex: 0 0 110px;
        min-width: 110px;
        font-size: 11px;
    }
}

/* --- Tablet breakpoint (1024px) --- */
@media (max-width: 1024px) {
    :root {
        --app-sidebar-width: 190px;
        --app-sidebar-min-width: 190px;
        --app-sidebar-max-width: 190px;
    }

    .sidebar-nav li a {
        padding: 5px 10px;
        font-size: 11.5px;
    }

    .mapa-fs-history-item {
        padding: 5px 10px;
        font-size: 11.5px;
    }

    .sidebar-nav > ul {
        padding-bottom: 80px !important;
    }

    .content-body {
        padding: 12px;
    }

    .group-title {
        font-size: 18px;
    }

    .tab-link {
        font-size: 12px;
        padding: 6px 10px;
    }

    /* Reducir tamaño de widgets en tableros */
    .form-widget {
        min-width: 180px;
    }

    /* Tipografía general más pequeña */
    .clean-widget .clean-widget-label {
        font-size: 12px;
    }

    .clean-widget .clean-input,
    .clean-widget .clean-select,
    .clean-widget .clean-textarea {
        font-size: 13px;
    }

    /* Periodos responsive para tablet */
    .periodos-consolidado-timeline-labels .periodo-label {
        flex: 0 0 44px;
        min-width: 44px;
        font-size: 9.5px;
        padding: 2px 1px;
    }

    .periodos-consolidado-timeline-bars .periodo-bar {
        flex: 0 0 44px;
        min-width: 44px;
        min-height: 28px !important;
    }

    .periodos-consolidado-grupo-label {
        flex: 0 0 95px;
        min-width: 95px;
        font-size: 10.5px;
    }

    .periodos-consolidado-row {
        gap: 8px;
    }

    /* Single value cards en tablet */
    .single-value-number {
        font-size: 1.8rem;
    }

    .single-value-label {
        font-size: 0.75rem;
    }
}

/* ============================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    
    /* === LAYOUT PRINCIPAL === */
    .app-container {
        flex-direction: column;
    }

    .clean-map-preview{
        min-height: 250px !important;
    }
    
    /* === SIDEBAR MÓVIL === */
    :root {
        --app-sidebar-width: 85%;
        --app-sidebar-min-width: 0;
        --app-sidebar-max-width: 320px;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: var(--app-sidebar-width);
        max-width: var(--app-sidebar-max-width);
        height: 100vh;
        z-index: 999;
        transition: left 0.3s ease;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15);
        background: #fff;
    }
    
    .sidebar.open {
        left: 0;
    }
    
    .close-sidebar-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .sidebar-header {
        z-index: 1001;
    }

    .clean-widget{
        width: 100% !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }

    .view-content{
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
    #elements-container{
        height: auto !important;
        min-height: 0 !important;
    }

    .element-wrapper{
        height: auto !important;
        min-height: 0 !important;
    }
    
    /* === HEADER MÓVIL === */
    .main-header {
        padding: 8px 12px;
        min-height: 56px;
    }
    
    .mobile-menu-btn,
    .mobile-logo,
    .mobile-search-btn {
        display: flex;
        align-items: center;
    }
    
    /* Ocultar elementos de desktop en móvil */
    #breadcrumb-container {
        display: none;
    }
    
    .header-actions {
        display: none;
    }
    
    /* Header en modo móvil - siempre flex */
    .main-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    /* === CONTENIDO PRINCIPAL === */
    .main-content {
        width: 100%;
    }
    
    .content-body {
        padding: 12px;
        overflow-x: hidden;
    }
    
    /* === TÍTULO DE GRUPO === */
    .entity-header {
       margin-top: 0 !important;
    }
    
    .entity-header .d-flex {
        width: 100%;
    }
    
    .group-title {
        font-size: 20px;
    }
    
    
    /* === TABS === */
    .content-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    
    .content-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .tab-link {
        white-space: nowrap;
        padding: 8px 14px;
        font-size: 13px;
    }
    
    /* === TABLEROS RESPONSIVE === */
    .draggable-form-container {
        min-height: auto !important;
    }
    
    /* MODO MÓVIL: Widgets en columna */
    .draggable-form-container.mobile-mode {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    
    .draggable-form-container.mobile-mode .form-widget {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* Mismo layout en móvil para widgets en modo solo lectura (.clean-widget): 100% ancho, columna */
    .draggable-form-container.mobile-mode .clean-widget {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    .draggable-form-container.mobile-mode .form-widget.widget-separator {
        margin: 8px 0 !important;
    }
    
    /* Ocultar grid overlay en móvil */
    .draggable-form-container.mobile-mode .grid-overlay {
        display: none !important;
    }
    
    /* Ajustar inputs en widgets móviles */
    .draggable-form-container.mobile-mode .form-widget input,
    .draggable-form-container.mobile-mode .form-widget textarea,
    .draggable-form-container.mobile-mode .form-widget select {
        font-size: 16px; /* Prevenir zoom en iOS */
    }
    
    /* === CONTROLES DE TABLERO === */
    .info-view-controls {
        flex-wrap: wrap;
    }
    
    .info-view-controls .btn {
        flex: 1;
        min-width: 120px;
        font-size: 13px;
        padding: 10px 12px;
    }
    
    /* === GESTIÓN DE DOCUMENTOS === */
    .gdrive-toolbar {
        flex-direction: column;
        gap: 12px;
    }
    
    .gdrive-toolbar-left,
    .gdrive-toolbar-right {
        width: 100%;
        justify-content: flex-start;
    }
    
    .search-input-wrapper {
        width: 100% !important;
    }
    
    .gdrive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .gdrive-card {
        padding: 12px;
    }
    
    .gdrive-card-name {
        font-size: 12px;
    }
    
    /* === TABLAS === */
    .monday-table-body {
        overflow-x: auto;
    }
    
    .monday-grid {
        min-width: 600px;
    }
    
    /* === MODALES === */
    .modal-content,
    .options-editor-content,
    .chart-config-content,
    .upload-documents-content {
        width: 95%;
        max-width: 95%;
        max-height: 90vh;
        margin: 16px;
    }
    
    .chart-config-body {
        flex-direction: column;
    }
    
    .chart-config-left,
    .chart-config-right {
        width: 100%;
    }
    
    /* === CHAT === */
    #chat-modal-container {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-height: 100%;
    }

    .chat-main-layout{
        max-height: 100%;
    }
    
    .chat-input-wrapper textarea {
        font-size: 16px;
    }
    
   
    
    /* === TEMPLATE MODE BANNER === */
    #template-mode-banner {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }
    
    .template-mode-banner-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .template-mode-action-btn {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    /* === REGLAS VIEW === */
    .reglas-header {
        flex-direction: column;
        gap: 16px;
    }
    
    .reglas-header-left,
    .reglas-header-right {
        width: 100%;
    }
    
    /* === USER DROPDOWN === */
    .user-profile-dropdown {
        position: fixed;
        bottom: 16px;
        right: 16px;
        z-index: 100;
    }
    
    .user-profile-btn {
        width: 48px;
        height: 48px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }
    
    .user-avatar-circle {
        width: 48px;
        height: 48px;
    }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    
    /* Sidebar más angosto en móviles pequeños */
    :root {
        --app-sidebar-width: 90%;
        --app-sidebar-min-width: 0;
        --app-sidebar-max-width: 300px;
    }
    
    /* Título más pequeño */
    .group-title {
        font-size: 18px;
    }
    
    /* Widgets ocupan ancho completo */
    .draggable-form-container.mobile-mode .form-widget {
        padding: 12px;
    }
    
    /* Grid de documentos en 1 columna */
    .gdrive-grid {
        grid-template-columns: 1fr;
    }
    
    /* Botones más compactos */
    .info-view-controls {
        flex-direction: column;
    }
    
    .info-view-controls .btn {
        width: 100%;
    }
    
    /* Tabs más compactas */
    .tab-link {
        padding: 8px 10px;
        font-size: 12px;
    }
    
    /* Login responsive */
    .login-box {
        padding: 0 20px;
    }
    
    .login-box h2 {
        font-size: 32px;
    }
    
    /* Dashboard widgets */
    .chart-widget {
        min-width: 100%;
    }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    :root {
        --app-sidebar-width: 50%;
        --app-sidebar-min-width: 0;
        --app-sidebar-max-width: 280px;
    }
    
    .mobile-search-modal {
        flex-direction: row;
    }
    
    .mobile-search-header {
        width: 100%;
        max-width: 400px;
        border-right: 1px solid var(--border-color);
        border-bottom: none;
        flex-direction: column;
        padding: 16px;
    }
    
    .mobile-search-results {
        flex: 1;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Aumentar área táctil de botones */
    .btn,
    button {
        min-height: 44px;
    }
    
    /* Mejor scrolling en dispositivos táctiles */
    .sidebar-nav,
    .content-body,
    .gdrive-grid-view,
    .gdrive-list-view {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Remover hover effects que no aplican */
    .form-widget:hover {
        box-shadow: none;
    }
    
    .sidebar-nav li a:hover {
        background-color: transparent;
    }
    
    /* Active states para touch */
    .sidebar-nav li a:active {
        background-color: #e5e7e9;
    }
    
    .btn:active {
        transform: scale(0.98);
    }
}

/* ============================================
   SAFE AREA (para dispositivos con notch)
   ============================================ */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .main-header {
            padding-top: calc(8px + env(safe-area-inset-top));
        }
        
        .sidebar {
            padding-top: env(safe-area-inset-top);
        }
        
        .mobile-search-header {
            padding-top: calc(12px + env(safe-area-inset-top));
        }
    }
}

/* ============================================
   ANIMACIONES MÓVILES SUAVES
   ============================================ */
@media (max-width: 768px) {
    .sidebar {
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .sidebar-overlay {
        transition: opacity 0.3s ease;
    }
    
    .mobile-search-modal {
        animation: slideUp 0.25s ease-out;
    }
    
    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* Mejoras para la experiencia táctil */
    .sidebar-nav li a {
        padding: 12px 20px;
    }
    
    
    /* Login responsive mejorado */
    #login-section.active {
        padding: 20px;
    }
    
    .login-box {
        width: 100%;
        max-width: 100%;
    }
    
    /* Breadcrumb móvil con scroll horizontal */
    .gdrive-breadcrumb {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    
    /* Widget galería responsive */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   MEJORAS ADICIONALES PARA TABLEROS MÓVILES
   ============================================ */
@media (max-width: 768px) {
    /* Ocultar controles de edición en móvil para evitar problemas */
    .draggable-form-container.mobile-mode.editing-mode {
        display: block !important;
    }
    
    .draggable-form-container.mobile-mode .edit-board-btn {
        display: none;
    }
    
    .draggable-form-container.mobile-mode.readonly-mode {
        background: transparent !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    
    /* Widget inputs más grandes para móvil */
    .clean-widget .clean-input,
    .clean-widget .clean-select,
    .clean-widget .clean-textarea {
        font-size: 16px !important;
        padding: 12px !important;
    }
    
    /* Separadores más compactos */
    .clean-widget.widget-separator {
        margin: 4px 0 !important;
    }
    
    /* Mejora para labels */
    .clean-widget .clean-widget-label {
        font-size: 14px;
        margin-bottom: 6px;
    }

    #floating-chat-input {
        right: 10px;
        z-index: 99;
    }

}

/* ============================================
   PRINT STYLES (para exports/reportes)
   ============================================ */
@media print {
    .sidebar,
    .main-header,
    .info-view-controls,
    .mobile-menu-btn,
    .mobile-search-btn,
    #floating-chat-input {
        display: none !important;
    }
    
    .main-content {
        width: 100%;
    }
    
    .draggable-form-container.mobile-mode .form-widget {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ========== Pantalla de carga inicial (estilo Apple/OpenAI) ========== */
.app-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.app-loading-screen.visible {
    display: flex;
}

.app-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.app-loading-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    opacity: 0.92;
}

.app-loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.app-loading-indicator span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #8e8e93;
    animation: app-loading-bounce 1.4s ease-in-out infinite both;
}

.app-loading-indicator span:nth-child(1) { animation-delay: 0s; }
.app-loading-indicator span:nth-child(2) { animation-delay: 0.16s; }
.app-loading-indicator span:nth-child(3) { animation-delay: 0.32s; }

@keyframes app-loading-bounce {
    0%, 80%, 100% { transform: scale(0.75); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.app-loading-text {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0.02em;
}

/* --- Consumo horario (vista + importación, estilo claro tipo Apple) --- */
.consumo-horario-wrapper {
    font-family: var(--font-family);
    color: #1d1d1f;
    max-width: 100%;
}

.ch-surface {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ch-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 4px 2px 0;
}

.ch-panel-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #1d1d1f;
    margin: 0 0 6px;
    line-height: 1.2;
}

.ch-panel-subtitle {
    font-size: 14px;
    color: #86868b;
    margin: 0;
    max-width: 520px;
    line-height: 1.45;
}

.ch-panel-actions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.ch-export-wrap {
    position: relative;
}

.ch-export-btn .ch-export-chevron {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.75;
}

.ch-export-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 240px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 120;
    padding: 4px 0;
}

.ch-export-menu:not([hidden]) {
    display: block;
}

.ch-export-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: #1d1d1f;
}

.ch-export-option:hover {
    background: #f5f5f7;
}

.ch-export-option + .ch-export-option {
    border-top: 1px solid #f3f4f6;
}

.ch-chart-panel.ch-export-capturing .ch-chart-loading,
.ch-chart-panel.ch-export-capturing .ch-export-menu {
    display: none !important;
}

.ch-add-series-wrap {
    position: relative;
}

.ch-add-series-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 220px;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #e8e8ed;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.ch-add-series-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 13px;
    color: #1d1d1f;
    cursor: pointer;
    user-select: none;
}

.ch-add-series-option:hover {
    background: #f5f5f7;
}

.ch-add-series-option input {
    accent-color: #0071e3;
    width: 15px;
    height: 15px;
    margin: 0;
}

.ch-add-series-wrap.is-open .ch-add-series-menu {
    display: block;
}

.ch-add-series-divider {
    height: 1px;
    margin: 6px 0;
    background: #e8e8ed;
}

.ch-add-series-personalizable-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #0071e3;
    cursor: pointer;
    text-align: left;
}

.ch-add-series-personalizable-btn:hover {
    background: #f5f5f7;
}

.ch-custom-series-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    max-height: 220px;
    overflow-y: auto;
}

.ch-custom-series-item {
    display: flex;
    align-items: center;
    gap: 4px;
    border-top: 1px solid #f0f0f5;
    font-size: 12px;
}

.ch-custom-series-option {
    flex: 1;
    min-width: 0;
    padding-right: 4px;
}

.ch-custom-series-option-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ch-custom-series-name {
    font-weight: 500;
    color: #1d1d1f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch-custom-series-unit {
    font-size: 11px;
}

.ch-custom-series-item.is-inactive .ch-custom-series-name {
    color: #86868b;
}

.ch-custom-series-item.is-inactive .ch-custom-series-option-text {
    opacity: 0.72;
}

.ch-gear-visible-label {
    margin-bottom: 14px;
}

.ch-custom-series-actions {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    padding-right: 8px;
}

.ch-btn-icon {
    border: none;
    background: transparent;
    color: #6e6e73;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.ch-btn-icon:hover {
    background: #f5f5f7;
    color: #1d1d1f;
}

.ch-custom-series-wizard .ch-modal-foot {
    justify-content: flex-end;
}

.ch-custom-series-wizard .ch-modal-foot-actions {
    margin-left: 0;
    width: 100%;
}

.ch-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #f5f5f7;
    color: #6e6e73;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.ch-modal-close:hover {
    background: #e8e8ed;
    color: #1d1d1f;
}

.ch-custom-wizard-step-label {
    margin-bottom: 0;
}

.ch-custom-download-wrap {
    margin-top: 4px;
    padding-top: 8px;
}

.ch-custom-file-input {
    display: block;
    width: 100%;
    font-size: 14px;
    color: #1d1d1f;
    padding: 10px 0;
}

.ch-custom-file-name {
    margin-top: 8px;
    min-height: 1.2em;
}

.ch-gear-scale-auto-label {
    margin-bottom: 8px;
}

.ch-gear-scale-auto-hint,
.ch-gear-agg-hint {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.45;
    color: #86868b;
}

.ch-gear-scale-fields.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.ch-gear-scale-fields.is-disabled .ch-label::after {
    content: ' (automático)';
    font-weight: 400;
    color: #86868b;
}

/* Comparativa multi-suministro (grupo raíz) */
.ch-sidebar-compare-banner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 0;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.4;
    color: #515154;
    background: #f0f7ff;
    border: 1px solid #c7e0ff;
    border-radius: 8px;
}

.ch-sidebar-compare-banner-text {
    margin: 0;
}

.ch-sidebar-compare-exit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: #0071e3;
    background: #fff;
    border: 1px solid #c7e0ff;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ch-sidebar-compare-exit-btn:hover {
    background: #e8f2ff;
    border-color: #99c7ff;
}

.ch-sidebar-compare-exit-btn:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 2px;
}

body.sidebar-ch-compare-mode .sidebar-nav li.ch-compare-supply-row > a {
    cursor: default;
}

body.sidebar-ch-compare-mode .sidebar-nav li.ch-compare-supply-row.is-selected > a .group-name {
    font-weight: 600;
    color: #0071e3;
}

body.sidebar-ch-compare-mode .sidebar-nav li.ch-compare-supply-row.ch-compare-template-locked > a {
    opacity: 0.45;
}

.ch-compare-search-item.ch-compare-template-locked {
    opacity: 0.45;
}

.ch-compare-tree-cb-wrap {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.ch-compare-tree-cb {
    width: 15px;
    height: 15px;
    accent-color: #0071e3;
    cursor: pointer;
}

.ch-compare-search-item {
    border-bottom: 1px solid #f0f0f5;
}

.ch-compare-search-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ch-compare-search-match {
    font-size: 11px;
    line-height: 1.35;
}

.ch-compare-search-empty {
    padding: 16px;
    font-size: 12px;
    color: #86868b;
    text-align: center;
}

.ch-compare-panel {
    margin-bottom: 12px;
    padding: 12px 14px;
    background: #f5f5f7;
    border: 1px solid #e8e8ed;
    border-radius: 12px;
}

.ch-compare-panel-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

.ch-compare-panel-desc {
    margin: 0;
    font-size: 12px;
    color: #86868b;
}

.ch-compare-unit-rows {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 10px;
}

.ch-compare-unit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 12px;
}

.ch-compare-unit-label {
    font-weight: 600;
    color: #1d1d1f;
}

.ch-compare-mode-opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.ch-compare-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.ch-compare-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #d2d2d7;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    color: #1d1d1f;
    cursor: pointer;
}

.ch-compare-chip:hover {
    background: #f5f5f7;
}

.ch-compare-hint {
    margin: 0;
    font-size: 12px;
}

.ch-gear-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ch-gear-color-input {
    width: 48px;
    height: 36px;
    padding: 2px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
}

.ch-gear-color-preview {
    margin: 0;
}

.ch-modal-panel--wide {
    max-width: 720px;
    width: min(96vw, 720px);
}

.ch-datadis-status {
    display: none;
    width: 100%;
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: #0071e3;
}

.ch-datadis-status.is-visible {
    display: block;
}

.ch-toggle-table-btn {
    position: relative;
}

.ch-data-quality-dot {
    display: none;
    width: 9px;
    height: 9px;
    margin-left: 6px;
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
    flex-shrink: 0;
}

.ch-toggle-table-btn.has-data-quality-error .ch-data-quality-dot {
    display: inline-block;
}

.ch-table-quality-alert {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin: 0 20px 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 13px;
    line-height: 1.45;
}

.ch-table-quality-alert.is-visible {
    display: flex;
}

.ch-table-quality-alert i {
    margin-top: 2px;
}

.ch-period-duplicate-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
    vertical-align: middle;
    flex-shrink: 0;
}

.ch-data-table tr.ch-row-duplicate-period td:first-child,
.ch-data-table tr.ch-row-duplicate-period td:nth-child(2) {
    background: rgba(254, 242, 242, 0.55);
}

.ch-period-cell-inner {
    display: inline-flex;
    align-items: center;
}

.ch-consumo-cell-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ch-estimated-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
}

.ch-data-table tr.ch-row-estimated-consumo td:nth-child(5) {
    background: rgba(254, 243, 199, 0.35);
}

.ch-apex-tooltip-estimated {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    vertical-align: middle;
}

.ch-datadis-loading-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 14px;
    color: #6e6e73;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
}

.ch-datadis-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 113, 227, 0.2);
    border-top-color: #0071e3;
    border-radius: 50%;
    animation: ch-datadis-spin 0.7s linear infinite;
    flex-shrink: 0;
}

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

.ch-datadis-supply-combo {
    position: relative;
}

.ch-combobox-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 20;
}

.ch-combobox-dropdown.is-open {
    display: block;
}

.ch-combobox-option {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1.35;
}

.ch-combobox-option:hover {
    background: rgba(0, 113, 227, 0.08);
}

.ch-combobox-empty {
    padding: 10px 14px;
    font-size: 13px;
    color: #86868b;
    cursor: default;
}

.ch-clear-data-btn {
    color: #d70015 !important;
}

.ch-clear-data-btn:hover:not(:disabled) {
    background: rgba(215, 0, 21, 0.08) !important;
}

.ch-modal-panel--wide {
    max-width: 600px;
}

.ch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 980px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
    font-family: inherit;
}

.ch-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.ch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ch-btn-primary {
    background: #0071e3;
    color: #fff;
}

.ch-btn-primary:hover:not(:disabled) {
    background: #0077ed;
}

.ch-btn-secondary {
    background: #e8e8ed;
    color: #1d1d1f;
}

.ch-btn-secondary:hover:not(:disabled) {
    background: #d2d2d7;
}

.ch-btn-ghost {
    background: transparent;
    color: #0071e3;
    padding: 8px 14px;
}

.ch-btn-ghost:hover:not(:disabled) {
    background: rgba(0, 113, 227, 0.08);
}

.ch-table-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

body.ch-table-fs-open {
    overflow: hidden;
}

.ch-table-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 10070;
    display: none;
    background: #f5f5f7;
}

.ch-table-fullscreen.is-open {
    display: block;
}

.ch-table-fullscreen-sheet {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
}

.ch-table-fullscreen-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ch-table-fullscreen-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #1d1d1f;
    line-height: 1.2;
}

.ch-table-fullscreen-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: #86868b;
    line-height: 1.35;
}

.ch-table-fullscreen-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.ch-table-fullscreen-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.ch-table-fullscreen-close:active {
    transform: scale(0.96);
}

.ch-table-fullscreen-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ch-table-edit-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ch-table-is-editing .ch-column-filter {
    opacity: 0.45;
    pointer-events: none;
}

.ch-table-is-editing .ch-pagination-btns .ch-btn {
    opacity: 0.45;
    pointer-events: none;
}

.ch-td-editable .ch-cell-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.ch-td-editable .ch-cell-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-cell-history-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #86868b;
    cursor: pointer;
}

.ch-cell-history-btn:hover {
    background: rgba(0, 113, 227, 0.1);
    color: #0071e3;
}

.ch-td-dirty {
    background: rgba(255, 149, 0, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 149, 0, 0.35);
}

.ch-td-editable .ch-cell-input {
    width: 100%;
    min-width: 72px;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    background: #fff;
}

.ch-td-editable .ch-cell-input:focus {
    outline: none;
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18);
}

.ch-td-editable .ch-cell-input-datetime {
    min-width: 150px;
}

.ch-cell-history-popover {
    position: absolute;
    z-index: 10100;
    width: min(360px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid #e8e8ed;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

.ch-cell-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #e8e8ed;
}

.ch-cell-history-title {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
}

.ch-cell-history-close {
    border: none;
    background: transparent;
    color: #86868b;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
}

.ch-cell-history-close:hover {
    background: #f5f5f7;
    color: #1d1d1f;
}

.ch-cell-history-body {
    max-height: 280px;
    overflow: auto;
    padding: 8px 0;
}

.ch-cell-history-loading,
.ch-cell-history-empty {
    margin: 0;
    padding: 12px 14px;
    font-size: 13px;
    color: #86868b;
}

.ch-cell-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ch-cell-history-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border-bottom: 1px solid #f0f0f5;
    font-size: 12px;
}

.ch-cell-history-item:last-child {
    border-bottom: none;
}

.ch-cell-history-when {
    color: #86868b;
    font-size: 11px;
}

.ch-cell-history-who {
    color: #1d1d1f;
    font-weight: 500;
}

.ch-cell-history-diff {
    color: #424245;
    line-height: 1.4;
}

.ch-hist-old {
    text-decoration: line-through;
    color: #86868b;
}

.ch-hist-new {
    color: #0071e3;
    font-weight: 600;
}

.ch-table-fullscreen-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ch-table-fullscreen .ch-table-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.ch-table-fullscreen .ch-table-scroll {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

.ch-table-fullscreen .ch-table-footer {
    flex-shrink: 0;
}

.ch-table-scroll {
    max-height: min(58vh, 480px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.ch-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.ch-data-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f5f5f7;
}

.ch-data-table .ch-th {
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6e6e73;
    padding: 8px 10px 10px;
    border-bottom: 1px solid #e8e8ed;
    vertical-align: bottom;
}

.ch-th-label {
    display: block;
    margin-bottom: 6px;
    white-space: nowrap;
}

.ch-column-filter {
    display: block;
    width: 100%;
    min-width: 72px;
    box-sizing: border-box;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #1d1d1f;
    background: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    outline: none;
}

.ch-column-filter:focus {
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.ch-column-filter::placeholder {
    color: #aeaeb2;
    font-size: 11px;
}

.ch-column-filter-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ch-table-footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.ch-data-table tbody tr {
    background: #fff;
    transition: background 0.15s ease;
}

.ch-data-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.ch-data-table tbody tr:hover {
    background: #f5f5f7;
}

.ch-data-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #f0f0f2;
    color: #1d1d1f;
    vertical-align: middle;
}

.ch-data-table .ch-td-strong {
    font-weight: 500;
    color: #000;
}

.ch-data-table .ch-td-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: #424245;
}

.ch-empty-cell {
    padding: 48px 24px !important;
    border: none !important;
    text-align: center;
}

.ch-empty-inner {
    max-width: 320px;
    margin: 0 auto;
}

.ch-empty-inner .fa-table {
    font-size: 36px;
    color: #c7c7cc;
    margin-bottom: 12px;
}

.ch-empty-title {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 6px;
}

.ch-empty-desc {
    font-size: 14px;
    color: #86868b;
    margin: 0;
    line-height: 1.4;
}

.ch-table-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #fafafa;
    border-top: 1px solid #e8e8ed;
}

.ch-page-info {
    font-size: 13px;
    color: #6e6e73;
}

.ch-pagination-btns {
    display: flex;
    gap: 4px;
}

/* Gráfico consumo horario */
.ch-chart-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fff;
    border: 1px solid #e8e8ed;
    border-radius: 14px;
    padding: 18px 20px 20px;
}

.ch-chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
}

.ch-chart-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    flex: 1;
    min-width: 0;
}

.ch-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ch-filter-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #86868b;
}

.ch-chart-period {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.ch-chart-period[hidden] {
    display: none !important;
}

.ch-chart-my-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ch-chart-my-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ch-chart-my-pair .ch-select {
    min-width: 110px;
}

.ch-chart-nav {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.ch-chart-mount {
    position: relative;
    min-height: 320px;
}

.ch-chart-canvas {
    min-height: 320px;
}

.ch-chart-mount.is-loading .ch-chart-canvas {
    visibility: hidden;
}

.ch-chart-empty,
.ch-chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    margin: 0;
    font-size: 14px;
    color: #86868b;
}

.ch-chart-loading {
    position: absolute;
    inset: 0;
    z-index: 4;
    min-height: 320px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.ch-chart-loading-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e8e8ed;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 500;
}

.ch-chart-loading-inner .fa-spinner {
    color: #0071e3;
    font-size: 16px;
}

.ch-chart-canvas .ch-apex-mount {
    min-height: 320px;
    width: 100%;
}

.ch-chart-canvas .apexcharts-xaxis-annotations {
    z-index: 0;
    pointer-events: none;
}

.ch-chart-canvas .apexcharts-graphical {
    position: relative;
    z-index: 1;
}

.ch-chart-canvas .apexcharts-toolbar {
    top: 2px;
    right: 0;
    z-index: 3;
}

.ch-chart-canvas .apexcharts-toolbar svg {
    fill: #6e6e73;
}

.ch-chart-canvas .apexcharts-selection-icon {
    display: none !important;
}

.ch-chart-filters input[type="date"].ch-select {
    background-image: none;
    padding-right: 14px;
}

.ch-apex-tooltip {
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e8e8ed;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    font-size: 12px;
    line-height: 1.35;
}

.ch-apex-tooltip-title {
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 6px;
}

.ch-apex-tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.ch-apex-tooltip-row:first-of-type {
    margin-top: 0;
}

.ch-apex-tooltip-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ch-apex-tooltip-name {
    color: #6e6e73;
    flex: 1;
    min-width: 0;
}

.ch-apex-tooltip-val {
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
}

.ch-chart-empty,
.ch-chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    margin: 0;
    font-size: 14px;
    color: #86868b;
}

.ch-kpi-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ch-kpi-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ch-kpi-series-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.ch-kpi-series-label {
    font-size: 12px;
    font-weight: 500;
    color: #515154;
    white-space: nowrap;
}

.ch-kpi-series {
    min-width: 160px;
}

.ch-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.ch-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: #fafafa;
    border: 1px solid #e8e8ed;
    border-radius: 10px;
}

.ch-kpi-card-medio.is-hidden {
    display: none;
}

.ch-kpi-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #86868b;
}

.ch-kpi-value {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #1d1d1f;
    line-height: 1.2;
}

.ch-kpi-sub {
    font-size: 12px;
    color: #6e6e73;
}

.ch-chart-filters .ch-select,
.ch-chart-filters input[type="date"] {
    min-width: 132px;
    font-size: 13px;
}

@media (max-width: 720px) {
    .ch-chart-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ch-chart-nav {
        justify-content: flex-end;
    }
}

/* Modal importación */
.ch-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ch-modal-panel {
    width: 100%;
    max-width: 560px;
    max-height: min(92vh, 780px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    box-shadow:
        0 0 1px rgba(0, 0, 0, 0.06),
        0 24px 48px rgba(0, 0, 0, 0.12),
        0 12px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.ch-modal-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
}

.ch-modal-head {
    padding: 24px 28px 16px;
    padding-right: 56px;
    flex-shrink: 0;
    border-bottom: 1px solid #f0f0f2;
    position: relative;
}

.ch-modal-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #1d1d1f;
    margin: 0 0 8px;
}

.ch-modal-filename {
    font-size: 13px;
    color: #6e6e73;
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
}

.ch-modal-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 28px 20px;
    -webkit-overflow-scrolling: touch;
}

.ch-form-section {
    margin-bottom: 28px;
}

.ch-form-section:last-child {
    margin-bottom: 8px;
}

.ch-form-section-muted {
    background: #f5f5f7;
    margin-left: -28px;
    margin-right: -28px;
    padding: 20px 28px;
    border-radius: 12px;
}

.ch-section-head {
    margin-bottom: 14px;
}

.ch-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6e6e73;
    margin: 0 0 4px;
}

.ch-section-desc {
    font-size: 13px;
    color: #86868b;
    margin: 0;
    line-height: 1.35;
}

.ch-segmented {
    display: flex;
    padding: 3px;
    background: #e8e8ed;
    border-radius: 10px;
    gap: 2px;
    margin-bottom: 18px;
}

.ch-segmented-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #424245;
    min-height: 38px;
    padding: 0 10px;
    user-select: none;
}

.ch-segmented-item input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ch-segmented-item span {
    text-align: center;
    line-height: 1.25;
}

.ch-segmented-item.is-active {
    background: #fff;
    color: #1d1d1f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ch-field {
    margin-bottom: 16px;
}

.ch-field:last-child {
    margin-bottom: 0;
}

.ch-field-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.ch-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.ch-field-span2 {
    grid-column: span 2;
}

.ch-field-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.ch-field-span3 {
    grid-column: span 3;
}

@media (max-width: 600px) {
    .ch-field-grid,
    .ch-field-grid-3,
    .ch-field-split {
        grid-template-columns: 1fr;
    }
    .ch-field-span2,
    .ch-field-span3 {
        grid-column: span 1;
    }
}

.ch-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    margin-bottom: 6px;
}

.ch-req {
    font-weight: 400;
    color: #86868b;
}

.ch-select {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: #1d1d1f;
    background: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236e6e73' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ch-select:hover {
    border-color: #b0b0b5;
}

.ch-select:focus {
    outline: none;
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

.ch-preview-wrap {
    border: 1px solid #e8e8ed;
    border-radius: 12px;
    overflow: hidden;
    background: #fafafa;
    max-height: 220px;
    overflow: auto;
}

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

.ch-preview-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.ch-preview-table th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: #6e6e73;
    background: #f5f5f7;
    border-bottom: 1px solid #e8e8ed;
    white-space: nowrap;
}

.ch-preview-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #eee;
    background: #fff;
    color: #1d1d1f;
}

.ch-preview-table tbody tr:last-child td {
    border-bottom: none;
}

.ch-modal-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 16px 28px 22px;
    border-top: 1px solid #f0f0f2;
    background: #fff;
    flex-shrink: 0;
}

.ch-replace-existing-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.35;
    color: #3a3a3c;
    max-width: min(100%, 420px);
    cursor: pointer;
}

.ch-replace-existing-label input {
    margin-top: 2px;
    flex-shrink: 0;
}

.ch-replace-existing-label-locked {
    cursor: default;
    color: #636366;
}

.ch-replace-existing-label-locked input:disabled {
    cursor: default;
    opacity: 1;
}

.ch-modal-foot-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.ch-btn-primary.is-loading {
    opacity: 0.85;
}

.ch-modal-panel-wide {
    max-width: min(920px, 96vw);
}

.ch-import-targets-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ch-import-targets-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6e6e73;
    padding: 8px 10px;
    border-bottom: 1px solid #e8e8ed;
}

.ch-import-targets-table td {
    padding: 10px;
    border-bottom: 1px solid #f0f0f2;
    vertical-align: top;
}

.ch-import-targets-loading {
    text-align: center;
    color: #86868b;
    padding: 24px !important;
}

.ch-import-grupo-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.ch-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.ch-import-grupo-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
}

.ch-import-grupo-search-results {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #e8e8ed;
    border-radius: 8px;
    background: #fff;
}

.ch-import-grupo-search-results .ch-search-hit {
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f7;
}

.ch-import-grupo-search-results .ch-search-hit:hover {
    background: #f5f5f7;
}

.ch-search-hit-title {
    display: block;
    font-weight: 500;
}

.ch-search-hit-sub {
    display: block;
    font-size: 11px;
    color: #86868b;
    margin-top: 2px;
}

.ch-search-loading,
.ch-search-empty {
    padding: 8px 10px;
    font-size: 12px;
    color: #86868b;
}

.ch-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e8f4fd;
    color: #0071e3;
    margin-left: 6px;
}

.ch-warn {
    display: block;
    font-size: 12px;
    color: #b45309;
    line-height: 1.35;
}

.ch-warn-muted {
    font-size: 12px;
    color: #86868b;
}

.ch-ok {
    font-size: 12px;
    color: #248a3d;
}

.ch-muted {
    color: #aeaeb2;
}

.ch-skip-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

/* =========================================================================
   MAPA IA
   ========================================================================= */

.mapa-ia-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 160px);
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--bg-color);
}

.mapa-ia-container.mapa-ia-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    z-index: 10050;
    border-radius: 0;
}

body.mapa-ia-fullscreen-open {
    overflow: hidden;
}

.mapa-fs-close-btn {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1002;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #374151;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.mapa-fs-close-btn:hover {
    background: #f9fafb;
    transform: scale(1.06);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}

.mapa-ia-container.mapa-ia-fullscreen .mapa-fs-close-btn {
    display: flex;
}

.mapa-ia-container.mapa-ia-fullscreen .mapa-fs-toolbar {
    right: 56px;
}

.mapa-fs-sidebar {
    width: var(--app-sidebar-width);
    min-width: var(--app-sidebar-min-width);
    max-width: var(--app-sidebar-max-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--app-sidebar-bg);
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}

.mapa-fs-sidebar-header {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.mapa-fs-sidebar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mapa-fs-sidebar-title i {
    color: var(--primary-blue);
}

.mapa-fs-input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 6px 0 0;
    gap: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.mapa-fs-input-wrapper:focus-within {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.mapa-fs-input-wrapper .mapa-ia-search-icon {
    color: var(--text-secondary);
    font-size: 14px;
    margin-left: 12px;
    flex-shrink: 0;
}

.mapa-fs-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    padding: 8px 8px 8px 8px;
    color: var(--text-primary);
    font-family: inherit;
}

.mapa-fs-input::placeholder {
    color: #9ca3af;
}

.mapa-fs-input:disabled {
    opacity: 0.6;
}

.mapa-fs-send-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--primary-blue);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.15s;
    flex-shrink: 0;
}

.mapa-fs-send-btn:hover:not(:disabled) {
    background: var(--primary-blue-hover);
}

.mapa-fs-send-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.mapa-fs-new-chat-btn {
    margin-top: 10px;
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s;
}

.mapa-fs-new-chat-btn:hover {
    background: #e5e7e9;
}

.mapa-fs-filters {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.mapa-fs-filters-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.mapa-fs-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px;
}

.mapa-fs-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-color);
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.mapa-fs-filter-chip:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.mapa-fs-filter-chip.is-active {
    background: #fff;
    border-color: var(--border-color);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.12);
    font-weight: 600;
}

.mapa-fs-filter-emoji {
    font-size: 14px;
    line-height: 1;
}

.mapa-fs-filter-empty {
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
}

.mapa-fs-history {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0 70px 0;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.mapa-fs-history::-webkit-scrollbar {
    width: 6px;
}

.mapa-fs-history::-webkit-scrollbar-track {
    background: transparent;
}

.mapa-fs-history::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}

.mapa-fs-history-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    padding: 10px 20px 4px 20px;
    letter-spacing: 0.04em;
}

.mapa-fs-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    margin: 0 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    border: 1px solid transparent;
}

.mapa-fs-history-item:hover {
    background: #e5e7e9;
}

.mapa-fs-history-item.is-active {
    background: #fff;
    border-color: transparent;
    color: #202123;
    font-weight: 500;
}

.mapa-fs-history-item i.fa-comment {
    color: var(--text-secondary);
    font-size: 12px;
    flex-shrink: 0;
}

.mapa-fs-history-item.is-active i.fa-comment {
    color: var(--text-primary);
}

.mapa-fs-history-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mapa-fs-history-delete {
    opacity: 0;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}

.mapa-fs-history-item:hover .mapa-fs-history-delete {
    opacity: 1;
}

.mapa-fs-history-delete:hover {
    color: #ef4444;
    background: #fee2e2;
}

.mapa-fs-history-empty {
    padding: 24px 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
}

.mapa-fs-map-panel {
    flex: 1;
    position: relative;
    min-width: 0;
    background: #e5e7eb;
}

.mapa-fs-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-size: 12px;
    color: #374151;
    align-items: center;
}

.mapa-fs-toolbar-counter {
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.mapa-fs-toolbar-btn {
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 4px 8px;
    color: #4b5563;
    cursor: pointer;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s;
}

.mapa-fs-toolbar-btn:hover {
    background: #f3f4f6;
}

.mapa-fs-emoji-marker {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.mapa-fs-reference-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #b91c1c;
    font-size: 22px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.mapa-fs-reference-popup .mapa-fs-point-popup-title {
    color: #991b1b;
}

.mapa-fs-stack-marker-wrap {
    background: transparent;
    border: none;
}

.mapa-fs-stack-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.mapa-fs-stack-emoji {
    font-size: 24px;
}

.mapa-fs-stack-pin {
    font-size: 22px;
    color: #2563eb;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.mapa-fs-stack-count {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.mapa-fs-stack-popup {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 240px;
}

.mapa-fs-stack-popup-header {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.mapa-fs-stack-popup-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}

.mapa-fs-stack-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.mapa-fs-stack-item:hover {
    background: #f3f4f6;
    border-color: #cbd5e1;
}

.mapa-fs-stack-item-emoji {
    font-size: 18px;
    line-height: 1.2;
    flex-shrink: 0;
}

.mapa-fs-stack-item-icon {
    color: #2563eb;
    margin-top: 2px;
    flex-shrink: 0;
}

.mapa-fs-stack-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mapa-fs-stack-item-label {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    word-break: break-word;
}

.mapa-fs-stack-item-tpl {
    font-size: 11px;
    color: #6b7280;
}

.mapa-fs-stack-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.mapa-fs-stack-expand-btn:hover {
    background: #1d4ed8;
}

.mapa-fs-stack-collapse-wrap {
    background: transparent;
    border: none;
}

.mapa-fs-stack-collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.mapa-fs-stack-collapse-btn:hover {
    background: #374151;
}

/* Popup de punto individual en el mapa */
.mapa-fs-point-popup {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
    font-size: 13px;
    line-height: 1.4;
    color: #111827;
}

.mapa-fs-point-popup-title {
    font-size: 14px;
    font-weight: 700;
    word-break: break-word;
}

.mapa-fs-point-popup-meta {
    color: #6b7280;
    font-size: 12px;
}

.mapa-fs-point-popup-address {
    color: #4b5563;
    font-size: 12px;
    word-break: break-word;
}

.mapa-fs-point-popup-metric {
    font-size: 12px;
    padding: 6px 8px;
    background: #f3f4f6;
    border-radius: 6px;
}

.mapa-fs-point-popup-metric.is-query {
    background: #eef2ff;
}

.mapa-fs-point-popup-muted {
    color: #6b7280;
    font-size: 12px;
}

.leaflet-popup-content .mapa-fs-point-popup-btn {
    pointer-events: auto;
    cursor: pointer;
}

.leaflet-popup-content {
    margin: 12px 14px;
    pointer-events: auto;
}

.mapa-fs-point-popup-coords {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    color: #6b7280;
}

.mapa-fs-point-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.mapa-fs-point-popup-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.mapa-fs-point-popup-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
}

.mapa-fs-point-popup-btn.is-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.mapa-fs-point-popup-btn.is-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

/* Modal gráfica consumo mapa */
.mapa-fs-chart-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.mapa-fs-chart-panel {
    width: min(920px, 100%);
    max-height: min(90vh, 720px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mapa-fs-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 10px;
    border-bottom: 1px solid #e5e7eb;
}

.mapa-fs-chart-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.mapa-fs-chart-subtitle {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.mapa-fs-chart-close {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.mapa-fs-chart-close:hover {
    color: #111827;
}

.mapa-fs-chart-body {
    padding: 12px 16px 16px;
    flex: 1;
    min-height: 320px;
}

.mapa-fs-chart-loading,
.mapa-fs-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    color: #6b7280;
    font-size: 14px;
}

.mapa-fs-chart-total {
    font-size: 12px;
    color: #374151;
    margin-bottom: 8px;
}

/* ----------------- Drawer "¿Cómo lo pensé?" ----------------- */

.mapa-fs-trace-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: min(420px, 100%);
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s ease-out;
    overflow: hidden;
}

.mapa-fs-trace-drawer.is-open {
    transform: translateX(0);
}

.mapa-fs-trace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.mapa-fs-trace-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mapa-fs-trace-title i {
    color: #6366f1;
}

.mapa-fs-trace-close {
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 6px;
}

.mapa-fs-trace-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.mapa-fs-trace-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    font-size: 13px;
    color: #1f2937;
    line-height: 1.55;
}

.mapa-fs-trace-section {
    margin-bottom: 18px;
}

.mapa-fs-trace-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mapa-fs-trace-quote {
    background: #f3f4f6;
    border-left: 3px solid #6366f1;
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: #374151;
}

.mapa-fs-trace-kv {
    display: grid;
    grid-template-columns: minmax(80px, max-content) 1fr;
    gap: 6px 14px;
    align-items: baseline;
}

.mapa-fs-trace-kv dt {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
}

.mapa-fs-trace-kv dd {
    margin: 0;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.mapa-fs-trace-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.mapa-fs-trace-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.mapa-fs-trace-warning {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    color: #92400e;
    font-size: 12px;
    margin-bottom: 6px;
}

.mapa-fs-trace-warning i {
    color: #d97706;
    margin-right: 4px;
}

.mapa-fs-trace-meta {
    color: #9ca3af;
    font-size: 11px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
    text-align: center;
}

.mapa-fs-trace-loading,
.mapa-fs-trace-empty {
    text-align: center;
    padding: 30px 16px;
    color: #9ca3af;
    font-size: 13px;
}

.mapa-fs-trace-loading i {
    color: #6366f1;
}

.mapa-fs-trace-timings-bar {
    display: flex;
    width: 100%;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 6px;
}

.mapa-fs-trace-timings-bar > span {
    display: block;
    height: 100%;
}

.mapa-fs-trace-timings-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: #6b7280;
    margin-top: 6px;
}

.mapa-fs-trace-timings-legend .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

/* ----- Pasos seguidos (cronología) ------------------------------------ */

.mapa-fs-trace-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mapa-fs-trace-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    background: #f9fafb;
    border-radius: 6px;
}

.mapa-fs-trace-step-index {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.mapa-fs-trace-step-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.mapa-fs-trace-step-body {
    flex: 1;
    min-width: 0;
}

.mapa-fs-trace-step-label {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mapa-fs-trace-step-count {
    background: #6366f1;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
}

.mapa-fs-trace-step-detail {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
    word-break: break-word;
}

/* ----- Lista de puntos representados (colapsable) --------------------- */

.mapa-fs-trace-points-details {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 10px;
    background: #fff;
}

.mapa-fs-trace-points-details[open] {
    background: #f9fafb;
}

.mapa-fs-trace-points-details summary {
    list-style: none;
    outline: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}

.mapa-fs-trace-points-details summary::-webkit-details-marker {
    display: none;
}

.mapa-fs-trace-points-chevron {
    margin-left: auto;
    font-size: 10px;
    color: #9ca3af;
    transition: transform 0.15s ease;
}

.mapa-fs-trace-points-details[open] .mapa-fs-trace-points-chevron {
    transform: rotate(180deg);
}

.mapa-fs-trace-points {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mapa-fs-trace-point {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.mapa-fs-trace-point:hover {
    background: #eef2ff;
}

.mapa-fs-trace-point-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4338ca;
    text-decoration: none;
    overflow: hidden;
}

.mapa-fs-trace-point-link:hover {
    text-decoration: underline;
}

.mapa-fs-trace-point-icon {
    font-size: 9px;
    color: #9ca3af;
    flex-shrink: 0;
}

.mapa-fs-trace-point-link:hover .mapa-fs-trace-point-icon {
    color: #6366f1;
}

.mapa-fs-trace-point-label {
    font-weight: 500;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mapa-fs-trace-point-tpl {
    color: #9ca3af;
    font-size: 11px;
    white-space: nowrap;
}

.mapa-fs-trace-point-value {
    color: #4338ca;
    font-weight: 700;
    font-size: 11px;
    background: #eef2ff;
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.mapa-fs-toolbar-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mapa-ia-search-bar {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: min(600px, calc(100% - 32px));
}

.mapa-ia-search-input-wrapper {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 6px 4px 14px;
    gap: 8px;
    transition: box-shadow 0.2s;
}

.mapa-ia-search-input-wrapper:focus-within {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.mapa-ia-search-icon {
    color: #6366f1;
    font-size: 16px;
    flex-shrink: 0;
}

.mapa-ia-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    padding: 10px 4px;
    background: transparent;
    color: #1a1a1a;
    font-family: inherit;
}

.mapa-ia-input::placeholder {
    color: #9ca3af;
}

.mapa-ia-input:disabled {
    opacity: 0.6;
}

.mapa-ia-send-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: #6366f1;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s;
}

.mapa-ia-send-btn:hover:not(:disabled) {
    background: #4f46e5;
}

.mapa-ia-send-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.mapa-ia-map-wrapper {
    flex: 1;
    position: relative;
    min-height: 0;
    width: 100%;
    height: 100%;
}

.mapa-ia-map {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.mapa-ia-loading {
    position: absolute;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.mapa-ia-loading-content {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    color: #4b5563;
}

.mapa-ia-loading-content i {
    color: #6366f1;
    font-size: 16px;
}

.mapa-ia-summary {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: min(600px, calc(100% - 32px));
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}

.mapa-ia-summary i {
    color: #6366f1;
    margin-right: 6px;
}

/* Ajustes IA — umbrales alertas fuga (consumo horario) */
.ch-ia-settings-panel {
    margin: 0 0 16px;
    border-top: 1px solid #e5e7eb;
}

.ch-ia-settings-details {
    padding: 12px 16px 0;
}

.ch-ia-settings-summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 12px;
}

.ch-ia-settings-summary::-webkit-details-marker {
    display: none;
}

.ch-ia-settings-body {
    padding: 0 0 16px;
}

.ch-ia-field-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .ch-ia-field-grid {
        grid-template-columns: 1fr;
    }
}

.ch-ia-settings-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.ch-fugas-historial-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ch-fugas-historial-panel {
    background: #fff;
    border-radius: 12px;
    width: min(920px, 100%);
    max-height: min(85vh, 900px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.ch-fugas-historial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #eee;
}

.ch-fugas-historial-body {
    overflow: auto;
    padding: 16px 22px 22px;
}

.ch-fugas-historial-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ch-fugas-historial-table th,
.ch-fugas-historial-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: top;
}

.ch-fugas-historial-table tbody tr {
    cursor: pointer;
}

.ch-fugas-historial-table tbody tr:hover {
    background: #f5f5f7;
}

.ch-fugas-estado-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ch-fugas-estado-badge--enviado { background: #d4edda; color: #155724; }
.ch-fugas-estado-badge--bloqueado_umbrales { background: #fff3cd; color: #856404; }
.ch-fugas-estado-badge--evaluado_no_activada { background: #e2e3e5; color: #383d41; }
.ch-fugas-estado-badge--sin_destinatarios { background: #f8d7da; color: #721c24; }
.ch-fugas-estado-badge--error_envio { background: #f8d7da; color: #721c24; }

.ch-fugas-historial-detail {
    margin-top: 16px;
    padding: 14px;
    background: #f9f9fb;
    border-radius: 8px;
    border: 1px solid #eee;
    font-size: 13px;
    line-height: 1.55;
}

.ch-fugas-historial-detail h4 {
    margin: 0 0 8px;
    font-size: 14px;
}

.ch-fugas-historial-detail pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #e5e5ea;
    max-height: 200px;
    overflow: auto;
}

.ch-ia-save-status {
    font-size: 13px;
    color: #6b7280;
}