/* Estilos para UI GD-INFOLAB - Layout AdminLTE (navbar y sidebar común con ayuda) */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap");

/* ========== Navbar superior (main-header) ========== */
.layout-navbar-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    background: rgba(0, 123, 255, 0.15);
    color: #007bff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.main-header .navbar-nav .layout-navbar-username,
.main-header .navbar-nav .layout-navbar-tenant {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    line-height: 1.2;
}
.main-header .navbar-nav .layout-navbar-tenant {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.15rem;
}
.main-header .icon-sidebar-toggle {
    width: 1.54rem;
    height: 1.54rem;
    color: #212529;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.15s ease;
}
.main-header .navbar-nav .nav-link:hover .icon-sidebar-toggle {
    color: #007bff;
}
body.sidebar-collapse .main-header .navbar-nav .icon-sidebar-toggle {
    transform: rotate(180deg);
}
/* Notificaciones en navbar */
.nav-link-notifications {
    padding: 0.4rem 0.6rem;
}
.nav-notifications-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.65rem;
    min-width: 1.1rem;
    padding: 0.15em 0.4em;
}
.nav-link-chat {
    padding: 0.4rem 0.6rem;
}
.nav-chat-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
    padding: 0.1em 0.35em;
}
.notification-item-dropdown {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    cursor: pointer;
    white-space: normal;
}
.notification-item-dropdown:last-of-type { border-bottom: none; }
.notification-item-dropdown:hover { background-color: rgba(0,0,0,0.04); }
.notification-item-dropdown.unread { background-color: rgba(13, 110, 253, 0.06); }
.notification-item-modal {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    border-radius: 0.35rem;
    margin-bottom: 0.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
}
.notification-item-modal:last-child { margin-bottom: 0; }
.notification-item-modal:hover { background-color: #f8fafc; border-color: #cbd5e1; }
.notification-item-modal.unread { background-color: #eff6ff; border-color: #bfdbfe; }
.notification-item-modal .notification-meta { font-size: 0.8rem; color: #64748b; }
.notification-item-modal .notification-title { font-size: 1rem; font-weight: 600; color: #1e293b; }
.notification-item-modal .notification-message-plain { font-size: 0.9rem; color: #475569; white-space: pre-wrap; word-break: break-word; }
/* Campos estructurados en el modal de notificaciones */
.notification-modal-fields { margin-top: 0.5rem; }
.notification-field { margin-bottom: 0.5rem; }
.notification-field:last-child { margin-bottom: 0; }
.notification-field-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    margin-bottom: 0.15rem;
}
.notification-field-value {
    font-size: 0.9rem;
    color: #334155;
    display: block;
}
.notification-field-details pre {
    font-size: 0.8rem;
    background: #f1f5f9;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid #e2e8f0;
    color: #475569;
    max-height: 8rem;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.main-header .dropdown-menu-arrow::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 1rem;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    transform: rotate(45deg);
}
.main-header .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* ========== Sidebar lateral (main-sidebar) estilo light ========== */
.main-sidebar.sidebar-light-primary {
    background: #f8f9fa;
}
.main-sidebar {
    transition: width 0.3s ease, margin-left 0.3s ease;
}
.content-wrapper {
    transition: margin-left 0.3s ease;
}
.main-sidebar.sidebar-light-primary .brand-link {
    background: #fff;
    color: #212529;
}
.main-sidebar.sidebar-light-primary .brand-link.brand-link-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    min-height: 3.25rem;
}
.main-sidebar.sidebar-light-primary .brand-link.brand-link-logo .brand-image {
    flex-shrink: 0;
    height: 2.25rem;
    width: auto;
    max-width: 2.25rem;
    object-fit: contain;
}
.main-sidebar.sidebar-light-primary .brand-link.brand-link-logo .brand-text {
    color: #212529;
    font-size: 1rem;
}
.main-sidebar.sidebar-light-primary .brand-link.brand-link-logo:hover .brand-text {
    color: #007bff;
}
.main-sidebar.sidebar-light-primary .nav-sidebar .nav-link {
    color: #495057;
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
}
.main-sidebar.sidebar-light-primary .nav-sidebar .nav-link:hover {
    background: rgba(0, 123, 255, 0.08);
    color: #007bff;
}
.main-sidebar.sidebar-light-primary .nav-sidebar .nav-link.active {
    background: rgba(0, 123, 255, 0.12);
    color: #007bff;
}
.main-sidebar.sidebar-light-primary .nav-header {
    color: #6c757d;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Tipografía área de contenido: misma fuente que el sidebar lateral (todas las páginas) */
.content-wrapper .content-header.content-header-tabler .page-title,
.content-wrapper .content-header.content-header-tabler .breadcrumb,
.content-wrapper .content-header.content-header-tabler .breadcrumb a,
.content-wrapper .content.page-body-tabler,
.content-wrapper .content.page-body-tabler .card,
.content-wrapper .content.page-body-tabler .card-title,
.content-wrapper .content.page-body-tabler .table,
.content-wrapper .content.page-body-tabler .form-control,
.content-wrapper .content.page-body-tabler .form-select,
.content-wrapper .content.page-body-tabler .breadcrumb,
.content-wrapper .content.page-body-tabler .breadcrumb a,
.content-wrapper .content.page-body-tabler .page-title,
.content-wrapper .content.page-body-tabler .btn,
.content-wrapper .content.page-body-tabler .modal .modal-title,
.content-wrapper .content.page-body-tabler .modal .form-label,
.content-wrapper .content.page-body-tabler .modal .form-control {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Área de contenido: mismo aspecto que antes (Tabler), sin afectar navbar/sidebar AdminLTE */
.content-wrapper .content-header.content-header-tabler {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    background: transparent;
    border-bottom: none;
}
.content-wrapper .content.page-body-tabler {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    background-color: var(--tblr-body-bg, #f6f8fb);
    min-height: calc(100vh - 3.5rem);
}
.content-wrapper .content.page-body-tabler .page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--tblr-body-color, #212529);
}

/* ========== Content header tecnológico (todas las páginas) — una sola línea ========== */
.content-wrapper .content-header.content-header-tabler {
    padding: 0;
    margin-bottom: 1rem;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.content-wrapper .content-header.content-header-tabler .container-xl {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 1px 3px rgba(30, 41, 59, 0.08);
}
.content-wrapper .content-header.content-header-tabler .row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 0;
}
.content-wrapper .content-header.content-header-tabler .row .col-sm-6:first-child {
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
    padding: 0;
}
.content-wrapper .content-header.content-header-tabler .row .col-sm-6:last-child {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    flex: 0 0 auto;
    padding: 0;
}
.content-wrapper .content-header.content-header-tabler .row .col-sm-6:last-child .breadcrumb {
    margin: 0;
}
.content-wrapper .content-header.content-header-tabler .page-title,
.content-wrapper .content-header.content-header-tabler .breadcrumb {
    font-family: "DM Sans", system-ui, -apple-system, sans-serif;
}
.content-wrapper .content-header.content-header-tabler .page-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.01em;
    margin: 0;
    border: none;
    padding: 0;
}
/* Icono + texto en título (p. ej. Explorer) */
.content-wrapper .content-header.content-header-tabler .page-title-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.content-wrapper .content-header.content-header-tabler .page-title-icon {
    font-size: 1.25rem;
    color: #1e293b;
    opacity: 0.9;
}
.content-wrapper .content-header.content-header-tabler .breadcrumb {
    float: none;
    padding: 0;
    margin: 0;
    background: none;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.content-wrapper .content-header.content-header-tabler .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #64748b;
    font-weight: 600;
    margin: 0 0.35rem;
}
.content-wrapper .content-header.content-header-tabler .breadcrumb-link-inicio {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #475569;
    text-decoration: none;
    transition: color 0.15s ease;
}
.content-wrapper .content-header.content-header-tabler .breadcrumb-link-inicio:hover {
    color: #1e293b;
    text-decoration: none;
}
.content-wrapper .content-header.content-header-tabler .breadcrumb-link-inicio .fa-house {
    color: #64748b;
    font-size: 0.75rem;
}
.content-wrapper .content-header.content-header-tabler .breadcrumb-link-inicio:hover .fa-house {
    color: #1e293b;
}

/* Header en móvil: evitar superposición título/breadcrumb (todas las páginas) */
@media (max-width: 767.98px) {
    .content-wrapper .content-header.content-header-tabler .row {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.5rem;
    }
    .content-wrapper .content-header.content-header-tabler .row .col-sm-6:first-child {
        width: 100%;
        text-align: left;
    }
    .content-wrapper .content-header.content-header-tabler .row .col-sm-6:last-child {
        position: static;
        transform: none;
        width: 100%;
    }
    .content-wrapper .content-header.content-header-tabler .breadcrumb {
        flex-wrap: wrap;
    }
    .content-wrapper .content-header.content-header-tabler .page-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .content-wrapper .content-header.content-header-tabler .container-xl {
        padding: 0.75rem 1rem;
    }
}

/* Mismo header en página Ayuda (ui/help): refuerzo para que help.css no lo anule) */
body.page-help .content-wrapper .content-header.content-header-tabler {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
body.page-help .content-wrapper .content-header.content-header-tabler .container-xl {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 1px 3px rgba(30, 41, 59, 0.08);
}
body.page-help .content-wrapper .content-header.content-header-tabler .row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 0;
}
body.page-help .content-wrapper .content-header.content-header-tabler .row .col-sm-6:first-child {
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
    padding: 0;
}
body.page-help .content-wrapper .content-header.content-header-tabler .row .col-sm-6:last-child {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    flex: 0 0 auto;
    padding: 0;
}
body.page-help .content-wrapper .content-header.content-header-tabler .page-title,
body.page-help .content-wrapper .content-header.content-header-tabler .breadcrumb {
    font-family: "DM Sans", system-ui, -apple-system, sans-serif;
}
body.page-help .content-wrapper .content-header.content-header-tabler .page-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.01em;
    margin: 0;
    border: none;
    padding: 0;
}
body.page-help .content-wrapper .content-header.content-header-tabler .page-title-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
body.page-help .content-wrapper .content-header.content-header-tabler .page-title-icon {
    font-size: 1.25rem;
    color: #1e293b;
    opacity: 0.9;
}
body.page-help .content-wrapper .content-header.content-header-tabler .breadcrumb {
    float: none;
    padding: 0;
    margin: 0;
    background: none;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
body.page-help .content-wrapper .content-header.content-header-tabler .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #64748b;
    font-weight: 600;
    margin: 0 0.35rem;
}
body.page-help .content-wrapper .content-header.content-header-tabler .breadcrumb-link-inicio {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #475569;
    text-decoration: none;
    transition: color 0.15s ease;
}
body.page-help .content-wrapper .content-header.content-header-tabler .breadcrumb-link-inicio:hover {
    color: #1e293b;
    text-decoration: none;
}
body.page-help .content-wrapper .content-header.content-header-tabler .breadcrumb-link-inicio .fa-house {
    color: #64748b;
    font-size: 0.75rem;
}
body.page-help .content-wrapper .content-header.content-header-tabler .breadcrumb-link-inicio:hover .fa-house {
    color: #1e293b;
}

/* Overrides mínimos para mantener compatibilidad con explorer.js */

/* Asegurar que los botones con iconos SVG se vean bien */
.btn svg.icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Toolbar Explorer: layout de botones (ghost primary de Tabler) */
.explorer-toolbar .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
}
.explorer-toolbar .btn svg.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
/* Iconos Font Awesome en botones Explorer: más densos y alineados */
.explorer-btn-icon {
    font-size: 1.125rem;
    width: 1.25em;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}
.explorer-btn-icon-sm {
    font-size: 0.95rem;
    width: 1.1em;
}
/* Fallback estilos ghost si Tabler solo usa variantes compuestas */
.btn-ghost.btn-primary,
.btn.btn-ghost.btn-primary {
    background: transparent;
    border-color: transparent;
    color: var(--tblr-primary, #066fd1);
}
.btn-ghost.btn-primary:hover:not(:disabled),
.btn.btn-ghost.btn-primary:hover:not(:disabled) {
    background: var(--tblr-primary-bg-subtle, rgba(6, 111, 209, 0.1));
    border-color: transparent;
    color: var(--tblr-primary, #066fd1);
}
.btn-ghost.btn-info,
.btn.btn-ghost.btn-info {
    background: transparent;
    border-color: transparent;
    color: var(--tblr-info, #4299e1);
}
.btn-ghost.btn-info:hover:not(:disabled),
.btn.btn-ghost.btn-info:hover:not(:disabled) {
    background: var(--tblr-info-bg-subtle, rgba(66, 153, 225, 0.1));
    border-color: transparent;
    color: var(--tblr-info, #4299e1);
}
.btn-ghost.btn-success,
.btn.btn-ghost.btn-success {
    background: transparent;
    border-color: transparent;
    color: var(--tblr-success, #2fb344);
}
.btn-ghost.btn-success:hover:not(:disabled),
.btn.btn-ghost.btn-success:hover:not(:disabled) {
    background: var(--tblr-success-bg-subtle, rgba(47, 179, 68, 0.1));
    border-color: transparent;
    color: var(--tblr-success, #2fb344);
}
.btn-ghost.btn-warning,
.btn.btn-ghost.btn-warning {
    background: transparent;
    border-color: transparent;
    color: var(--tblr-warning, #f59f00);
}
.btn-ghost.btn-warning:hover:not(:disabled),
.btn.btn-ghost.btn-warning:hover:not(:disabled) {
    background: var(--tblr-warning-bg-subtle, rgba(245, 159, 0, 0.12));
    border-color: transparent;
    color: var(--tblr-warning, #f59f00);
}
.btn-ghost.btn-dark,
.btn.btn-ghost.btn-dark {
    background: transparent;
    border-color: transparent;
    color: var(--tblr-dark, #1f2937);
}
.btn-ghost.btn-dark:hover:not(:disabled),
.btn.btn-ghost.btn-dark:hover:not(:disabled) {
    background: var(--tblr-dark-bg-subtle, rgba(31, 41, 55, 0.08));
    border-color: transparent;
    color: var(--tblr-dark, #1f2937);
}
.btn-ghost.btn-primary:disabled,
.btn.btn-ghost.btn-primary:disabled,
.btn-ghost.btn-info:disabled,
.btn.btn-ghost.btn-info:disabled,
.btn-ghost.btn-success:disabled,
.btn.btn-ghost.btn-success:disabled,
.btn-ghost.btn-warning:disabled,
.btn.btn-ghost.btn-warning:disabled,
.btn-ghost.btn-dark:disabled,
.btn.btn-ghost.btn-dark:disabled {
    opacity: 0.6;
}
.btn-ghost.btn-secondary,
.btn.btn-ghost.btn-secondary {
    background: transparent;
    border-color: transparent;
    color: var(--tblr-secondary-color, #6b7280);
}
.btn-ghost.btn-secondary:hover:not(:disabled),
.btn.btn-ghost.btn-secondary:hover:not(:disabled) {
    background: var(--tblr-secondary-bg-subtle, rgba(107, 114, 128, 0.1));
    border-color: transparent;
    color: var(--tblr-secondary, #6b7280);
}
.btn-ghost.btn-secondary:disabled,
.btn.btn-ghost.btn-secondary:disabled {
    opacity: 0.6;
}
@media (max-width: 575.98px) {
    .explorer-toolbar .btn-label {
        display: none;
    }
    .explorer-toolbar .btn {
        padding: 0.5rem 0.75rem;
    }
}

/* Ajustes para list-group en foldersList - mejor contraste */
#foldersList .list-group-item {
    cursor: pointer;
    color: var(--tblr-body-color, #212529);
    background-color: var(--tblr-bg-surface, #ffffff);
}

#foldersList .list-group-item:hover {
    background-color: var(--tblr-bg-surface-secondary, #f8f9fa);
    color: var(--tblr-body-color, #212529);
}

#foldersList .list-group-item.active {
    background-color: var(--tblr-primary, #206bc4);
    color: white;
    border-color: var(--tblr-primary, #206bc4);
}

#foldersList .list-group-item.active:hover {
    background-color: var(--tblr-primary-dark, #1a5a9e);
    color: white;
}

/* Ajustes para la tabla de documentos - mejor contraste */
.table-vcenter td {
    vertical-align: middle;
    color: var(--tblr-body-color, #212529);
}

.table-vcenter th {
    color: var(--tblr-body-color, #212529);
    font-weight: 600;
}

/* Botones de acción en tabla de documentos (Explorer) */
.page-explorer .explorer-docs-actions .explorer-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.page-explorer .explorer-docs-actions .explorer-table-action:hover {
    transform: none;
}
.page-explorer .explorer-table-btn-icon {
    font-size: 0.95rem;
    width: 1em;
    text-align: center;
    line-height: 1;
}
.page-explorer .explorer-docs-actions .explorer-table-action .explorer-table-btn-label {
    margin-left: 0.35rem;
}
@media (max-width: 991.98px) {
    .page-explorer .explorer-docs-actions .explorer-table-action .explorer-table-btn-label {
        display: none;
    }
}

/* Asegurar contraste en textos de tabla */
.table td.text-dark,
.table th.text-dark {
    color: var(--tblr-body-color, #212529) !important;
}

.table td.text-muted {
    color: var(--tblr-secondary, #6c757d) !important;
}

/* Ajustes para modales - mejor contraste */
.modal-blur {
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: var(--tblr-bg-surface, #ffffff);
    color: var(--tblr-body-color, #212529);
}

.modal-header {
    border-bottom-color: var(--tblr-border-color, #dee2e6);
}

.modal-footer {
    border-top-color: var(--tblr-border-color, #dee2e6);
}

.modal-title {
    color: var(--tblr-body-color, #212529);
}

.modal-body {
    color: var(--tblr-body-color, #212529);
}

.modal-body .form-label {
    color: var(--tblr-body-color, #212529);
}

.modal-body .form-control,
.modal-body .form-select {
    color: var(--tblr-body-color, #212529);
    background-color: var(--tblr-bg-surface, #ffffff);
}

/* Ajustes para badges de estado - mejor contraste */
.badge {
    font-weight: 500;
    color: white;
}

.badge.bg-success {
    background-color: var(--tblr-success, #2fb344) !important;
    color: white;
}

.badge.bg-secondary {
    background-color: var(--tblr-secondary, #6c757d) !important;
    color: white;
}

.badge.bg-info {
    background-color: var(--tblr-info, #467fcf) !important;
    color: white;
}

.badge.bg-primary {
    background-color: var(--tblr-primary, #206bc4) !important;
    color: white;
}

.badge.bg-danger {
    background-color: var(--tblr-danger, #d63384) !important;
    color: white;
}

.badge.bg-warning {
    background-color: var(--tblr-warning, #f76707) !important;
    color: white;
}

/* Dropdown menú usuario: que no lo corte overflow del navbar (AdminLTE suele usar overflow hidden) */
.main-header,
.main-header.navbar,
.main-header .navbar,
.main-header .navbar-nav,
.main-header .nav-item.dropdown {
    overflow: visible !important;
}
.main-header .nav-item.dropdown {
    position: relative;
}
.main-header .navbar-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 10rem;
    z-index: 1060;
    display: none;
}
.main-header .navbar-nav .dropdown-menu.show {
    display: block;
}

/* Submenú usuario: iconos y hover */
.dropdown-item-ayuda:hover,
.dropdown-item-ayuda:focus,
#navLinkHelp:hover, #navLinkHelp:focus {
    background-color: rgba(66, 153, 225, 0.12);
    color: #4299e1;
}
.dropdown-item-logout:hover,
.dropdown-item-logout:focus {
    background-color: rgba(214, 57, 57, 0.12);
    color: #d63939;
}
.dropdown-item-ayuda .fa-circle-info,
.dropdown-item-logout .fa-right-from-bracket {
    width: 1.1em;
    text-align: center;
}

/* ========== Menú dropdown de usuario (moderno) ========== */
.main-header #userMenuDropdown .nav-link {
    border-radius: 0.5rem;
    padding: 0.35rem 0.6rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.main-header #userMenuDropdown .nav-link:hover,
.main-header #userMenuDropdown .nav-link:focus,
.main-header #userMenuDropdown .nav-link.show {
    background-color: rgba(0, 84, 166, 0.08);
    color: #0054a6;
}
/* Icono de usuario en navbar: mismo aspecto que la página ui/help */
.main-header #userMenuDropdown .layout-navbar-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    background: rgba(0, 123, 255, 0.15);
    color: #007bff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}
.main-header #userMenuDropdown .nav-link:hover .layout-navbar-avatar,
.main-header #userMenuDropdown .nav-link.show .layout-navbar-avatar {
    background: rgba(0, 123, 255, 0.25);
}
/* Ocultar el caret por defecto de Bootstrap (los dos triángulos) en el menú usuario; usamos nuestro chevron */
.main-header #userMenuDropdown .dropdown-toggle::after {
    display: none;
}
/* Icono chevron para desplegar el menú */
.main-header #userMenuDropdown .user-menu-chevron {
    font-size: 0.65rem;
    color: #64748b;
    opacity: 0.9;
    flex-shrink: 0;
    transition: transform 0.25s ease, color 0.2s ease;
}
.main-header #userMenuDropdown .nav-link:hover .user-menu-chevron,
.main-header #userMenuDropdown .nav-link.show .user-menu-chevron {
    color: #0054a6;
}
.main-header #userMenuDropdown .nav-link.show .user-menu-chevron {
    transform: rotate(180deg);
}

/* Panel del dropdown */
.main-header .user-menu-dropdown {
    min-width: 260px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-top: 0.5rem;
}
.main-header .user-menu-dropdown.dropdown-menu-arrow::before {
    top: -5px;
    right: 1.25rem;
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.04);
}

/* Cabecera: usuario + tenant */
.user-menu-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.user-menu-dropdown-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #0054a6 0%, #0d6efd 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.user-menu-dropdown-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.user-menu-dropdown-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu-dropdown-tenant {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cuerpo: ítems del menú */
.user-menu-dropdown-body {
    padding: 0.5rem 0.4rem;
}
.user-menu-dropdown .user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    border: none;
    width: 100%;
    text-align: left;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.user-menu-dropdown .user-menu-item:hover,
.user-menu-dropdown .user-menu-item:focus {
    background-color: rgba(0, 84, 166, 0.08);
    color: #0054a6;
}
.user-menu-dropdown .user-menu-item .user-menu-icon {
    width: 1.1rem;
    text-align: center;
    color: #64748b;
    flex-shrink: 0;
}
.user-menu-dropdown .user-menu-item:hover .user-menu-icon,
.user-menu-dropdown .user-menu-item:focus .user-menu-icon {
    color: #0054a6;
}
.user-menu-dropdown .user-menu-item.active {
    background-color: rgba(0, 84, 166, 0.1);
    color: #0054a6;
}
.user-menu-dropdown .user-menu-item.active .user-menu-icon {
    color: #0054a6;
}

/* Cerrar sesión: estilo danger */
.user-menu-dropdown .user-menu-item-logout {
    color: #dc2626;
}
.user-menu-dropdown .user-menu-item-logout .user-menu-icon {
    color: #dc2626;
}
.user-menu-dropdown .user-menu-item-logout:hover,
.user-menu-dropdown .user-menu-item-logout:focus {
    background-color: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
}
.user-menu-dropdown .user-menu-item-logout:hover .user-menu-icon,
.user-menu-dropdown .user-menu-item-logout:focus .user-menu-icon {
    color: #b91c1c;
}

/* Divisor */
.user-menu-dropdown .user-menu-divider {
    margin: 0.35rem 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Asegurar que los iconos en botones pequeños se vean bien */
.btn-sm svg.icon {
    width: 14px;
    height: 14px;
}

/* Ajustes para el toast de descarga */
.toast-container {
    z-index: 1111;
}


/* Botón colapsar: en navbar superior, al límite con el sidebar (solo icono; “contraer menú” (solo visible en Explorer por JS) */


/* Ajustes para sidebar - mejor contraste */
.main-sidebar .nav-sidebar .nav-link {
    color: var(--tblr-body-color, #212529);
}

.main-sidebar .nav-sidebar .nav-link:hover {
    color: var(--tblr-primary, #206bc4);
    background-color: var(--tblr-bg-surface-secondary, #f8f9fa);
}

.main-sidebar .nav-sidebar .nav-link.active {
    color: var(--tblr-primary, #206bc4);
    background-color: var(--tblr-bg-surface-secondary, #f8f9fa);
}

/* Ajustes para card headers */
.card-header {
    background-color: var(--tblr-bg-surface, #ffffff);
    border-bottom-color: var(--tblr-border-color, #dee2e6);
}

.card-title {
    color: var(--tblr-body-color, #212529);
}

/* Loading overlay */
#loadingOverlay {
    z-index: 9999;
}

/* Mejoras de accesibilidad y UX */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn .spinner-border-sm {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125em;
}

/* Vista previa de archivo */
#filePreview {
    animation: fadeIn 0.3s ease-in;
}

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

/* Mejoras para botones con estado de carga */
.btn-loading {
    pointer-events: none;
}

/* Toast de éxito */
.toast.text-bg-success {
    background-color: var(--tblr-success, #2fb344) !important;
    color: white;
}

/* Indicador de última actualización */
#folderLabel small {
    font-size: 0.75rem;
    font-weight: normal;
}

/* Mejoras de accesibilidad */
[aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Focus visible para accesibilidad */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--tblr-primary, #206bc4);
    outline-offset: 2px;
}

/* Mejora #39: Drag & drop zone */
#fileDropZone {
    transition: all 0.3s ease;
    border-color: var(--tblr-border-color, #dee2e6);
}

#fileDropZone:hover {
    background-color: var(--tblr-bg-surface-secondary, #f8f9fa);
    border-color: var(--tblr-primary, #206bc4);
}

#fileDropZone.border-primary {
    background-color: var(--tblr-primary-light, rgba(32, 107, 196, 0.1));
    border-color: var(--tblr-primary, #206bc4);
    border-width: 2px;
}

/* Mejora #12: Barra de progreso */
#uploadProgress {
    margin-top: 0.5rem;
}

#uploadProgressBar {
    transition: width 0.3s ease;
    font-size: 0.875rem;
    line-height: 25px;
}

/* Mejora #48: Columna de checkboxes dentro de la tabla, sin sticky (solo anular en esta columna) */
.page-explorer .table-responsive .table.card-table th.explorer-select-col,
.page-explorer .table-responsive .table.card-table td.explorer-select-col {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    text-align: center;
    vertical-align: middle;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: rgba(0, 0, 0, 0.02);
    position: static !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    box-sizing: border-box;
}

.page-explorer .explorer-select-col .form-check-input {
    margin: 0;
    cursor: pointer;
}

.table-active {
    background-color: var(--tblr-primary-light, rgba(32, 107, 196, 0.1)) !important;
}

.doc-checkbox {
    cursor: pointer;
}

/* Mejora #25: Indicadores de ordenamiento */
.sortable {
    cursor: pointer;
    user-select: none;
}

.sortable:hover {
    text-decoration: underline;
}

.sort-indicator {
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

/* Mejora #23: Paginación */
#paginationContainer {
    border-top: 1px solid var(--tblr-border-color, #dee2e6);
    padding: 0.75rem 1rem;
}

/* Mejora #48: Acciones en lote */
#bulkActions {
    border-top: 1px solid var(--tblr-border-color, #dee2e6);
    border-bottom: 1px solid var(--tblr-border-color, #dee2e6);
}

/* Mejora #27: Árbol de carpetas – colores intuitivos sin molestar */
.folder-tree-item {
    padding: 0.25rem 0;
}

.folder-tree-btn {
    display: flex;
    align-items: center;
    text-align: left;
    width: 100%;
    min-width: 0;
    padding: 0.5rem;
    border: none;
    background: none;
    color: var(--tblr-body-color, #212529);
}
.folder-tree-btn .folder-tree-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.folder-tree-btn .folder-favorite-btn,
.folder-tree-btn .folder-action-btn {
    flex-shrink: 0;
}

.folder-tree-btn:hover {
    background-color: var(--tblr-tertiary-bg, rgba(0, 0, 0, 0.03));
}

.folder-tree-btn.active {
    background-color: var(--tblr-primary-bg-subtle, rgba(6, 111, 209, 0.12));
    color: var(--tblr-primary, #066fd1);
}
.folder-tree-btn.active .text-warning {
    color: var(--tblr-warning, #f59f00) !important;
}

/* Chevrones: color secundario para que se lean como control, no como contenido */
.folder-toggle {
    cursor: pointer;
    user-select: none;
    display: inline-block;
    width: 1rem;
    min-width: 1rem;
    text-align: center;
    color: var(--tblr-secondary-color, #6b7280);
}
.folder-toggle .fa-chevron-right,
.folder-toggle .fa-chevron-down {
    font-size: 0.65rem;
}

/* Línea de jerarquía: gris muy suave para no competir con el contenido */
.folder-children {
    margin-left: 0.5rem;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    padding-left: 0.25rem;
}

/* Botón filtro favoritos: estado activo visible (mostrando solo favoritos) */
#btnToggleFavorites.active {
    background-color: var(--tblr-warning-bg-subtle, rgba(245, 159, 0, 0.12));
    color: var(--tblr-warning, #f59f00);
}
#btnToggleFavorites.active:hover {
    background-color: var(--tblr-warning-bg-subtle, rgba(245, 159, 0, 0.18));
    color: var(--tblr-warning, #f59f00);
}

/* Lista plana de carpetas (búsqueda/favoritos): nombre truncado, botones siempre visibles */
#foldersList .folder-list-item {
    display: flex;
    align-items: center;
    min-width: 0;
    text-align: left;
}
#foldersList .folder-list-item .folder-list-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#foldersList .folder-list-item .folder-favorite-btn,
#foldersList .folder-list-item .folder-action-btn {
    flex-shrink: 0;
}

/* Explorer responsive: toolbar y panel de carpetas en móvil */
@media (max-width: 575.98px) {
    .explorer-toolbar .btn-label {
        display: none;
    }
}
@media (max-width: 767.98px) {
    #foldersList {
        max-height: min(45vh, 320px) !important;
    }
}

/* Card Documentos: header alineado, sin solapamientos */
.documents-card-header {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.documents-header-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2rem;
}
.documents-header-row .card-title {
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
    margin: 0;
}
.documents-current-folder {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    font-size: 0.875rem;
    font-weight: 500;
}
.documents-current-folder #folderLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Fallback si Tabler no define bg-primary-lt */
.documents-current-folder.bg-primary-lt {
    background-color: var(--tblr-primary-bg-subtle, rgba(6, 111, 209, 0.12));
    color: var(--tblr-primary, #066fd1);
}
.documents-header-row #btnRefreshDocs {
    flex-shrink: 0;
}
.documents-filters-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}
/* Estilos AdminLTE para buscador y filtro de estado en la tabla de documentos */
.documents-filters-row .explorer-filter-input,
.documents-filters-row .explorer-filter-select {
    min-width: 0;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: #fff;
    font-size: 0.875rem;
    min-height: 31px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.documents-filters-row .explorer-filter-input:focus,
.documents-filters-row .explorer-filter-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
    outline: 0;
}
.documents-filters-row .explorer-filter-select {
    width: auto;
    min-width: 8rem;
}
.documents-filters-row .btn-group {
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .documents-filters-row {
        grid-template-columns: 1fr;
    }
    .documents-filters-row .explorer-filter-select {
        min-width: 0;
    }
}
.documents-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    background: var(--tblr-primary-bg-subtle, rgba(6, 111, 209, 0.08));
    border-radius: var(--tblr-border-radius-sm, 4px);
    font-size: 0.8125rem;
}
.documents-bulk-actions .btn {
    flex-shrink: 0;
}

/* Filas de subcarpeta en la tabla de documentos: clic para entrar */
.doc-table-subfolder-row {
    cursor: pointer;
}
.doc-table-subfolder-row:hover {
    background-color: var(--tblr-tertiary-bg, rgba(0, 0, 0, 0.03));
}
.doc-table-subfolder-row:focus {
    outline: 2px solid var(--tblr-primary, #066fd1);
    outline-offset: -2px;
}

/* Mejora #28: Breadcrumbs */
.breadcrumb {
    margin-bottom: 0;
}

.breadcrumb-item a {
    color: var(--tblr-primary, #206bc4);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

/* Mejora #46: Panel de historial de notificaciones */
#notificationHistoryPanel {
    max-width: 400px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

#notificationHistoryList {
    max-height: 300px;
    overflow-y: auto;
}

/* Mejora #38: Autocompletado */
.autocomplete-list {
    position: absolute;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    background-color: var(--tblr-bg-surface, #ffffff);
    border: 1px solid var(--tblr-border-color, #dee2e6);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.autocomplete-item {
    padding: 0.5rem;
    cursor: pointer;
}

.autocomplete-item:hover {
    background-color: var(--tblr-bg-surface-secondary, #f8f9fa);
}

/* Mejora #43: Favoritos */
.btn-outline-warning.active {
    background-color: var(--tblr-warning, #f76707);
    border-color: var(--tblr-warning, #f76707);
    color: white;
}

/* Mejora #41: Indicador de espacio */
#spaceIndicator {
    margin-bottom: 1rem;
}

/* Mejora #49: Modal de detalles */
#docDetailsContent dl {
    margin-bottom: 0;
}

#docDetailsContent dt {
    font-weight: 600;
}

/* Mejora #50: Comparación de versiones */
#compareContent1,
#compareContent2 {
    background-color: var(--tblr-bg-surface-secondary, #f8f9fa);
    font-family: monospace;
    font-size: 0.875rem;
}

/* Mejora #44: Tooltips mejorados */
.tooltip {
    font-size: 0.875rem;
}

/* Mejora #30: Navegación por teclado */
.keyboard-shortcut {
    font-size: 0.75rem;
    color: var(--tblr-secondary, #6c757d);
    margin-left: 0.5rem;
}

/* Mejora #45: Modo oscuro/claro (ya manejado por Bootstrap/Tabler) */
[data-bs-theme="dark"] {
    color-scheme: dark;
}

/* Mejora #24: Campos de búsqueda */
#docSearch,
#folderSearch {
    transition: border-color 0.3s ease;
}

#docSearch:focus,
#folderSearch:focus {
    border-color: var(--tblr-primary, #206bc4);
    box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25);
}

/* ============================================
   UI POLISH: Leyendas, Tooltips y Badges
   ============================================ */

/* Badges de estado de documentos */
.status-badge {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-draft {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.status-in-review {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #60a5fa;
}

.status-approved {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #34d399;
}

.status-published {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.status-obsolete {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Panel de ayuda/leyenda */
.help-legend-card {
    background-color: var(--tblr-bg-surface-secondary, #f8f9fa);
    border: 1px solid var(--tblr-border-color, #dee2e6);
}

.help-legend-card .card-header {
    background-color: var(--tblr-bg-surface-tertiary, #e9ecef);
    border-bottom: 1px solid var(--tblr-border-color, #dee2e6);
}

.help-legend-card .card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tblr-body-color, #212529);
    display: flex;
    align-items: center;
}

.help-legend-card .card-body {
    font-size: 0.875rem;
    line-height: 1.6;
}

.help-legend-card h6 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tblr-body-color, #212529);
    margin-bottom: 0.5rem;
}

.help-legend-card code {
    background-color: var(--tblr-bg-surface, #ffffff);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    color: var(--tblr-primary, #206bc4);
    border: 1px solid var(--tblr-border-color, #dee2e6);
}

.help-legend-card ul {
    padding-left: 1.25rem;
}

.help-legend-card li {
    margin-bottom: 0.5rem;
}

/* Leyenda y Ayuda (offcanvas): más intuitivo para el usuario */
#legendOffcanvas .offcanvas-header {
    border-bottom: 1px solid var(--tblr-border-color, #e5e7eb);
    padding: 1rem 1.25rem;
}
#legendOffcanvas .offcanvas-title {
    font-weight: 600;
    color: var(--tblr-body-color, #1f2937);
}
#legendOffcanvas .offcanvas-body {
    padding: 1rem 1.25rem;
    line-height: 1.6;
}
#legendOffcanvas .offcanvas-body > div {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--tblr-border-color, #e5e7eb);
}
#legendOffcanvas .offcanvas-body > div:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
#legendOffcanvas .offcanvas-body h6 {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--tblr-primary, #066fd1);
    margin-bottom: 0.5rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--tblr-primary, #066fd1);
}
#legendOffcanvas .offcanvas-body p {
    font-size: 0.875rem;
    color: var(--tblr-body-color, #374151);
    margin-bottom: 0;
}
#legendOffcanvas .offcanvas-body ul {
    padding-left: 0;
    list-style: none;
}
#legendOffcanvas .offcanvas-body li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--tblr-body-color, #374151);
}
#legendOffcanvas .offcanvas-body li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--tblr-primary, #066fd1);
    opacity: 0.7;
}
#legendOffcanvas .offcanvas-body li strong {
    color: var(--tblr-body-color, #1f2937);
}
#legendOffcanvas .offcanvas-body code {
    font-size: 0.8125rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--tblr-bg-surface-secondary, #f3f4f6);
    color: var(--tblr-primary, #066fd1);
    border: 1px solid var(--tblr-border-color, #e5e7eb);
}

/* Tooltips mejorados */
[data-bs-toggle="tooltip"] {
    cursor: help;
}

.tooltip {
    font-size: 0.8125rem;
    max-width: 300px;
}

.tooltip-inner {
    text-align: left;
    padding: 0.5rem 0.75rem;
}

/* Microcopy y textos de ayuda */
.help-text {
    font-size: 0.8125rem;
    color: var(--tblr-secondary, #6c757d);
    margin-top: 0.25rem;
}

.help-text code {
    font-size: 0.75rem;
    background-color: var(--tblr-bg-surface-secondary, #f8f9fa);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

/* Iconos de ayuda inline */
.help-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 0.25rem;
    vertical-align: middle;
    cursor: help;
    color: var(--tblr-secondary, #6c757d);
}

.help-icon:hover {
    color: var(--tblr-primary, #206bc4);
}

/* Espaciado y tipografía mejorados */
.card-body h6 + p,
.card-body h6 + ul {
    margin-top: 0.5rem;
}

/* Responsive: ocultar leyenda en pantallas pequeñas si es necesario */
@media (max-width: 768px) {
    .help-legend-card .card-body {
        font-size: 0.8125rem;
    }
    
    .status-badge {
        font-size: 0.6875rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Explorer: enlace título documento → detalle */
.doc-title-link:hover {
    text-decoration: underline !important;
}
.doc-title-link:focus {
    outline: 2px solid var(--tblr-primary, #206bc4);
    outline-offset: 2px;
}

/* SweetAlert2: Personalización para integrar con Tabler */
.swal2-popup {
    font-family: var(--tblr-font-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    border-radius: var(--tblr-border-radius-lg, 0.5rem);
}

.swal2-title {
    color: var(--tblr-body-color, #212529);
    font-weight: 600;
}

.swal2-content {
    color: var(--tblr-body-color, #212529);
}

.swal2-confirm {
    background-color: var(--tblr-primary, #206bc4) !important;
    border-color: var(--tblr-primary, #206bc4) !important;
}

.swal2-confirm:hover {
    background-color: var(--tblr-primary-dark, #1a5a9e) !important;
    border-color: var(--tblr-primary-dark, #1a5a9e) !important;
}

.swal2-popup-custom {
    font-family: var(--tblr-font-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

/* ============================================
   MEJORAS DEL SIDEBAR: Estilos mejorados
   ============================================ */

/* Campo de búsqueda del sidebar */
.sidebar-search-container {
    border-bottom: 1px solid var(--tblr-border-color, #dee2e6);
    margin-bottom: 0.5rem;
}

#sidebarSearch {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

#sidebarSearch:focus {
    border-color: var(--tblr-primary, #206bc4);
    box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25);
}

/* Separadores entre grupos */
.sidebar-divider {
    height: 1px;
    background-color: var(--tblr-border-color, #dee2e6);
    margin: 0.5rem 0;
}

/* Títulos de sección */
.sidebar-section-title {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    padding: 0.25rem 0;
}

/* Mejoras en elementos del menú */
.sidebar-menu-item {
    position: relative;
}

.sidebar-menu-item .nav-link {
    padding: 0.625rem 1rem;
    display: flex;
    align-items: center;
    transition: all 0.15s ease;
    border-radius: 0.375rem;
    margin: 0.125rem 0.5rem;
}

.sidebar-menu-item .nav-link:hover {
    background-color: var(--tblr-bg-surface-secondary, #f8f9fa);
    color: var(--tblr-primary, #206bc4);
}

/* Estado activo mejorado */
.sidebar-menu-item .nav-link.active {
    background-color: var(--tblr-primary-bg-subtle, rgba(6, 111, 209, 0.12));
    color: var(--tblr-primary, #206bc4);
    font-weight: 600;
    position: relative;
}

.sidebar-menu-item .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background-color: var(--tblr-primary, #206bc4);
    border-radius: 0 2px 2px 0;
}

/* Botón de favorito */
.sidebar-favorite-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.sidebar-menu-item:hover .sidebar-favorite-btn,
.sidebar-menu-item .nav-link.active + .sidebar-favorite-btn,
.sidebar-favorite-btn:hover {
    opacity: 1;
}

.sidebar-favorite-btn i {
    font-size: 0.875rem;
}

/* Sección de favoritos */
#sidebarFavoritesSection {
    margin-bottom: 0.5rem;
}

#sidebarFavoritesList .sidebar-menu-item {
    margin: 0.125rem 0.5rem;
}

/* Mejoras de espaciado */
.navbar-vertical .navbar-nav {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-vertical .nav-item {
    margin-bottom: 0.125rem;
}

/* Tooltips mejorados para modo colapsado */
#sidebarVertical.sidebar-collapsed .nav-link {
    justify-content: center;
    padding: 0.75rem;
}

#sidebarVertical.sidebar-collapsed .sidebar-favorite-btn {
    display: none;
}

#sidebarVertical.sidebar-collapsed .sidebar-section-title,
#sidebarVertical.sidebar-collapsed .sidebar-divider,
#sidebarVertical.sidebar-collapsed #sidebarSearch {
    display: none !important;
}

#sidebarVertical.sidebar-collapsed #sidebarFavoritesSection {
    display: none !important;
}

/* Responsive: mejoras en móvil */
@media (max-width: 991.98px) {
    .sidebar-search-container {
        padding: 0.75rem;
    }
    
    .sidebar-menu-item .nav-link {
        margin: 0.125rem 0.25rem;
        padding: 0.5rem 0.75rem;
    }
    
    .sidebar-section-title {
        padding: 0.5rem 0.75rem;
    }
}

/* Animaciones suaves */
.sidebar-menu-item {
    animation: fadeIn 0.2s ease-in;
}

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

/* Mejoras de accesibilidad */
.sidebar-menu-item .nav-link:focus-visible {
    outline: 2px solid var(--tblr-primary, #206bc4);
    outline-offset: 2px;
}

.sidebar-favorite-btn:focus-visible {
    outline: 2px solid var(--tblr-primary, #206bc4);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Indicador visual de página activa mejorado */
.sidebar-menu-item.active .nav-link-icon {
    color: var(--tblr-primary, #206bc4);
}

.sidebar-menu-item.active .nav-link-title {
    font-weight: 600;
}

/* ========== Help Offcanvas (Leyenda y Ayuda) - Explorer y páginas que usan helpLoader ========== */
.help-offcanvas-modern .offcanvas-body {
    background: #f8fafc;
}
.help-offcanvas-content h3,
.help-offcanvas-content h4 {
    color: var(--tblr-primary, #206bc4);
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
}
.help-offcanvas-content h3 {
    font-size: 1.25rem;
    border-bottom: 2px solid rgba(32, 107, 196, 0.2);
}
.help-offcanvas-content h4 {
    font-size: 1.1rem;
    border-left: 4px solid var(--tblr-primary, #206bc4);
    padding-left: 0.6rem;
}
.help-offcanvas-content h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}
.help-offcanvas-content .alert {
    border-radius: 0.5rem;
    border-left-width: 4px;
}
.help-offcanvas-content .table {
    font-size: 0.875rem;
}
.help-offcanvas-content .table thead th {
    background: var(--tblr-primary, #206bc4);
    color: #fff;
    font-weight: 600;
    border-color: rgba(255,255,255,0.2);
}
.help-offcanvas-content .table td {
    vertical-align: middle;
}
.help-offcanvas-content .badge {
    font-weight: 500;
}
.help-offcanvas-content .lead {
    font-size: 1rem;
    color: #495057;
}
.help-offcanvas-content ul,
.help-offcanvas-content ol {
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}
.help-offcanvas-content li {
    margin-bottom: 0.35rem;
}
.help-offcanvas-content code {
    background: rgba(0,0,0,0.06);
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
}

/* ========== Paneles de ayuda (Explorer y resto de páginas): leyenda completa, visual e intuitivo ========== */
.explorer-help-offcanvas .offcanvas-body,
.page-help-offcanvas .offcanvas-body {
    background: #f1f5f9;
    overflow-y: auto;
}
.explorer-help-header,
.page-help-offcanvas .offcanvas-header {
    background: linear-gradient(135deg, var(--tblr-primary, #206bc4) 0%, #1a5a9e 100%);
    color: #fff;
    border: none;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(32, 107, 196, 0.25);
}
.explorer-help-header .offcanvas-title,
.page-help-offcanvas .offcanvas-header .offcanvas-title {
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}
.explorer-help-content {
    padding: 1.25rem 1.25rem 2rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #1e293b;
}
.explorer-help-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.explorer-help-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.explorer-help-intro {
    padding-top: 0;
}
.explorer-help-h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tblr-primary, #206bc4);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid rgba(32, 107, 196, 0.25);
    display: flex;
    align-items: center;
}
.explorer-help-h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.6rem;
    padding-left: 0.75rem;
    border-left: 4px solid var(--tblr-primary, #206bc4);
    line-height: 1.4;
    display: flex;
    align-items: center;
}
.explorer-help-lead {
    font-size: 0.95rem;
    color: #475569;
    margin: 0 0 0.5rem;
    line-height: 1.6;
}
.explorer-help-text {
    font-size: 0.9rem;
    color: #475569;
    margin: 0 0 0.5rem;
}
.explorer-help-list {
    margin: 0;
    padding-left: 1.35rem;
    list-style: disc;
}
.explorer-help-list li {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}
.explorer-help-list li:last-child {
    margin-bottom: 0;
}
.explorer-help-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 0.25rem;
}
.explorer-help-badge-primary { background: rgba(32, 107, 196, 0.15); color: #1a5a9e; }
.explorer-help-badge-info    { background: rgba(13, 202, 240, 0.2);  color: #0c5460; }
.explorer-help-badge-success { background: rgba(25, 135, 84, 0.15);  color: #146c43; }
.explorer-help-badge-warning { background: rgba(255, 193, 7, 0.35);  color: #664d03; }
.explorer-help-badge-secondary { background: rgba(108, 117, 125, 0.2); color: #495057; }
.explorer-help-table {
    font-size: 0.85rem;
    margin: 0.5rem 0;
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.explorer-help-table thead th {
    background: var(--tblr-primary, #206bc4);
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 0.65rem;
    border: none;
}
.explorer-help-table tbody td {
    padding: 0.5rem 0.65rem;
    vertical-align: top;
    border-color: #e2e8f0;
}
.explorer-help-table tbody tr:nth-child(even) {
    background: #f8fafc;
}
.explorer-help-table code {
    background: #e2e8f0;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.8em;
    color: #475569;
}
.explorer-help-alert {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin: 0.5rem 0;
    border-left: 4px solid;
    font-size: 0.9rem;
}
.explorer-help-alert-warning {
    background: rgba(255, 193, 7, 0.12);
    border-left-color: #ffc107;
    color: #664d03;
}
.explorer-help-alert-info {
    background: rgba(13, 202, 240, 0.1);
    border-left-color: #0dcaf0;
    color: #055160;
}
.explorer-help-section-workflow .badge {
    font-weight: 600;
}
.explorer-help-content kbd {
    background: #e2e8f0;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.8em;
    border: 1px solid #cbd5e1;
}