/* =========================================
   SIGEM - FILAMENT GLOBAL THEME OVERRIDES
   ========================================= */

/* ===== 0. OCULTAR TOPBAR COMPLETAMENTE ===== */
body:has(.sigem-professional) .fi-topbar { display: none !important; height: 0 !important; overflow: hidden !important; position: absolute !important; }
body:has(.sigem-professional) { padding-top: 0 !important; }
body:has(.sigem-professional) .fi-main { padding-top: 0 !important; margin-top: 0 !important; height: 100% !important; min-height: 100vh !important; }
body:has(.sigem-professional) .fi-main-ctn { max-width: 100% !important; padding-left: 2rem !important; padding-right: 2rem !important; }
body:has(.sigem-professional) .fi-header { margin-bottom: 2rem !important; padding-top: 1.5rem !important; }

/* ===== 1. FONDO GENERAL Y APP ===== */
main.fi-main, body {
    background-color: #f8fafc !important;
    background-image: none !important;
}
.dark main.fi-main, .dark body {
    background-color: #0f172a !important;
}

/* ===== 2. CARDS Y CONTENEDORES ===== */
.fi-ta-ctn, .fi-fo-component-ctn, .fi-section, .fi-card {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03) !important;
}
.fi-ta-ctn::before, .fi-fo-component-ctn::before, .fi-section::before, .fi-card::before {
    display: none !important; /* Quitar la barra de gradiente superior anterior */
}
.dark .fi-ta-ctn, .dark .fi-fo-component-ctn, .dark .fi-section, .dark .fi-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
/* Padding en secciones */
.fi-section-content {
    padding: 1.5rem !important;
}

/* ===== 3. TÍTULOS DE PÁGINA ===== */
h1, .fi-header-heading {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 1.875rem !important;
    letter-spacing: -0.025em !important;
}
.dark h1, .dark .fi-header-heading {
    color: #f1f5f9 !important;
}

/* ===== 4. TABLAS DE LISTADO ===== */
.fi-ta table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.fi-ta-header, .fi-ta-header-cell, th {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.fi-ta-header-cell *, th * {
    color: #475569 !important;
    font-weight: 600 !important;
}
.fi-ta-row, tr {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background-color 0.2s;
}
.fi-ta-row:hover, tr:hover {
    background-color: #f8fafc !important;
}
.fi-ta-row:nth-child(even), tr:nth-child(even) {
    background-color: #ffffff !important;
}
/* Tablas Modo Oscuro */
.dark .fi-ta-header, .dark .fi-ta-header-cell, .dark th {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
.dark .fi-ta-header-cell *, .dark th * {
    color: #94a3b8 !important;
}
.dark .fi-ta-row, .dark tr {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}
.dark .fi-ta-row:hover, .dark tr:hover {
    background-color: #1e293b !important;
}

/* ===== 5. INPUTS, SELECTS, TEXTAREAS ===== */
.fi-input, .fi-select-input, textarea, select {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    color: #0f172a !important;
    transition: all 0.2s;
}
.fi-input:focus, .fi-select-input:focus, textarea:focus, select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.2) !important;
}
.dark .fi-input, .dark .fi-select-input, .dark textarea, .dark select {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}
.dark .fi-input:focus, .dark .fi-select-input:focus, .dark textarea:focus, .dark select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
}

/* ===== 5.1 RADIO, CHECKBOX, TOGGLES (CORREGIDO) ===== */

/* 1. Toggle Buttons (Usados en Estados de Inventario) */
.fi-fo-toggle-buttons label.fi-btn {
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    opacity: 1 !important;
}
.fi-fo-toggle-buttons label.fi-btn * { color: #334155 !important; }

.fi-fo-toggle-buttons input[type="radio"]:checked + label.fi-btn,
.fi-fo-toggle-buttons input[type="checkbox"]:checked + label.fi-btn {
    border: 2px solid #2563eb !important;
    background-color: #eff6ff !important;
    color: #1e40af !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
}
.fi-fo-toggle-buttons input[type="radio"]:checked + label.fi-btn *,
.fi-fo-toggle-buttons input[type="checkbox"]:checked + label.fi-btn * {
    color: #1e40af !important;
}

/* 2. Radio Buttons clásicos */
.fi-fo-radio label {
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}
.fi-fo-radio label:has(input[type="radio"]:checked) {
    border: 2px solid #2563eb !important;
    background-color: #eff6ff !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
}
.fi-fo-radio label:has(input[type="radio"]:checked) * {
    color: #1e40af !important;
}
.fi-fo-radio input[type="radio"]:checked {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* 3. Checkboxes nativos */
.fi-checkbox-input:checked {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox=\'0 0 16 16\' fill=\'white\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\'/%3e%3c/svg%3e") !important;
}

/* 4. Toggle switches */
button[role="switch"][aria-checked="true"] {
    background-color: #2563eb !important;
}

/* ===== MODO OSCURO ===== */
.dark .fi-fo-toggle-buttons label.fi-btn,
.dark .fi-fo-radio label {
    border-color: #30363d !important;
    background-color: #161b22 !important;
    color: #e2e8f0 !important;
}
.dark .fi-fo-toggle-buttons label.fi-btn *,
.dark .fi-fo-radio label * {
    color: #e2e8f0 !important;
}

.dark .fi-fo-toggle-buttons input[type="radio"]:checked + label.fi-btn,
.dark .fi-fo-toggle-buttons input[type="checkbox"]:checked + label.fi-btn,
.dark .fi-fo-radio label:has(input[type="radio"]:checked) {
    border-color: #3b82f6 !important;
    background-color: #1e3a5f !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
}
.dark .fi-fo-toggle-buttons input[type="radio"]:checked + label.fi-btn *,
.dark .fi-fo-toggle-buttons input[type="checkbox"]:checked + label.fi-btn *,
.dark .fi-fo-radio label:has(input[type="radio"]:checked) * {
    color: #93c5fd !important;
}

.dark .fi-fo-radio input[type="radio"]:checked, 
.dark .fi-checkbox-input:checked, 
.dark button[role="switch"][aria-checked="true"] {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* ===== 6. LABELS DE CAMPOS ===== */
.fi-fo-field-wrp-label, .fi-fo-field-wrp-label * {
    color: #334155 !important;
    font-weight: 600 !important;
}
.dark .fi-fo-field-wrp-label, .dark .fi-fo-field-wrp-label * {
    color: #e2e8f0 !important;
}

/* ===== 7. BOTONES ===== */
.fi-btn {
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out !important;
    font-weight: 500 !important;
}

/* Primario */
.fi-btn-color-primary, .btn-primary {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
}
.fi-btn-color-primary *, .btn-primary * { color: #ffffff !important; }
.fi-btn-color-primary:hover, .btn-primary:hover { background-color: #1d4ed8 !important; }

/* Éxito */
.fi-btn-color-success, .btn-success {
    background-color: #10b981 !important;
    color: #ffffff !important;
    border: none !important;
}
.fi-btn-color-success *, .btn-success * { color: #ffffff !important; }
.fi-btn-color-success:hover, .btn-success:hover { background-color: #059669 !important; }

/* Peligro */
.fi-btn-color-danger, .btn-danger {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border: none !important;
}
.fi-btn-color-danger *, .btn-danger * { color: #ffffff !important; }
.fi-btn-color-danger:hover, .btn-danger:hover { background-color: #dc2626 !important; }

/* Advertencia */
.fi-btn-color-warning, .btn-warning {
    background-color: #f59e0b !important;
    color: #ffffff !important;
    border: none !important;
}
.fi-btn-color-warning *, .btn-warning * { color: #ffffff !important; }
.fi-btn-color-warning:hover, .btn-warning:hover { background-color: #d97706 !important; }

/* Info */
.fi-btn-color-info, .btn-info {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
}
.fi-btn-color-info *, .btn-info * { color: #ffffff !important; }
.fi-btn-color-info:hover, .btn-info:hover { background-color: #2563eb !important; }

/* Secundario / Gris */
.fi-btn-color-gray, .btn-secondary {
    background-color: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}
.fi-btn-color-gray *, .btn-secondary * { color: #334155 !important; }
.fi-btn-color-gray:hover, .btn-secondary:hover { 
    background-color: #f1f5f9 !important;
}

/* Modo oscuro botones secundarios */
.dark .fi-btn-color-gray, .dark .btn-secondary {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
.dark .fi-btn-color-gray *, .dark .btn-secondary * { color: #e2e8f0 !important; }
.dark .fi-btn-color-gray:hover, .dark .btn-secondary:hover {
    background-color: #334155 !important;
}

/* ===== 8. BADGES Y ETIQUETAS ===== */
.fi-badge { border-radius: 999px !important; font-weight: 500 !important; }
.fi-badge-color-success { background-color: #d1fae5 !important; color: #059669 !important; }
.fi-badge-color-warning { background-color: #fef3c7 !important; color: #d97706 !important; }
.fi-badge-color-danger { background-color: #fee2e2 !important; color: #dc2626 !important; }
.fi-badge-color-info { background-color: #dbeafe !important; color: #2563eb !important; }
.fi-badge-color-gray { background-color: #f1f5f9 !important; color: #475569 !important; }

.dark .fi-badge-color-success { background-color: rgba(16,185,129,0.2) !important; color: #34d399 !important; }
.dark .fi-badge-color-warning { background-color: rgba(245,158,11,0.2) !important; color: #fbbf24 !important; }
.dark .fi-badge-color-danger { background-color: rgba(239,68,68,0.2) !important; color: #f87171 !important; }
.dark .fi-badge-color-info { background-color: rgba(59,130,246,0.2) !important; color: #60a5fa !important; }
.dark .fi-badge-color-gray { background-color: rgba(148,163,184,0.2) !important; color: #94a3b8 !important; }

/* ===== 9. BREADCRUMBS ===== */
.fi-breadcrumbs { align-items: center; }
.fi-breadcrumbs-item-label { color: #64748b !important; }
.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label { color: #334155 !important; font-weight: 600 !important; }
.fi-breadcrumbs-separator { color: #cbd5e1 !important; }
.dark .fi-breadcrumbs-item-label { color: #94a3b8 !important; }
.dark .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label { color: #e2e8f0 !important; }
.dark .fi-breadcrumbs-separator { color: #334155 !important; }

/* ===== 10. PAGINACIÓN ===== */
.fi-pagination-item { border-radius: 8px !important; margin: 0 2px !important; }
.fi-pagination-item-active, .fi-pagination-item-active button { background-color: #2563eb !important; color: #ffffff !important; }
.fi-pagination-item-active * { color: #ffffff !important; }
.fi-pagination-item:not(.fi-pagination-item-active), .fi-pagination-item:not(.fi-pagination-item-active) button { background-color: #ffffff !important; color: #475569 !important; }
.fi-pagination-item:not(.fi-pagination-item-active):hover { background-color: #f8fafc !important; }
.dark .fi-pagination-item-active, .dark .fi-pagination-item-active button { background-color: #3b82f6 !important; }
.dark .fi-pagination-item:not(.fi-pagination-item-active), .dark .fi-pagination-item:not(.fi-pagination-item-active) button { background-color: #1e293b !important; color: #94a3b8 !important; }
.dark .fi-pagination-item:not(.fi-pagination-item-active):hover { background-color: #334155 !important; }

/* ===== 11. FILTROS Y BÚSQUEDA ===== */
.fi-ta-filters, .fi-ta-search, .fi-global-search {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
}
.dark .fi-ta-filters, .dark .fi-ta-search, .dark .fi-global-search {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* ===== 12. NOTIFICACIONES Y TOASTS ===== */
.fi-no-notification {
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    background-color: #ffffff !important;
}
.fi-no-notification-status-success { border-left: 4px solid #10b981 !important; }
.fi-no-notification-status-danger { border-left: 4px solid #ef4444 !important; }
.fi-no-notification-status-info { border-left: 4px solid #3b82f6 !important; }
.dark .fi-no-notification {
    background-color: #1e293b !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

/* ===== 13. MODALES NATIVOS DE FILAMENT ===== */
.fi-modal-window {
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}
.fi-modal-header {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 12px 12px 0 0 !important;
}
.dark .fi-modal-window {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}
.dark .fi-modal-header {
    background-color: #0f172a !important;
    border-bottom-color: #334155 !important;
}

/* ===== 14. BOTONES DE ACCIÓN EN TABLAS ===== */
.fi-ta-actions .fi-icon-btn {
    border-radius: 8px !important;
    transition: background-color 0.2s !important;
}
.fi-ta-actions .fi-icon-btn-color-primary:hover { background-color: rgba(37,99,235,0.1) !important; }
.fi-ta-actions .fi-icon-btn-color-danger:hover { background-color: rgba(239,68,68,0.1) !important; }

/* ===== 15. WIZARD ===== */
.fi-wizard {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
}
.fi-wizard-step-active .fi-wizard-step-icon { background-color: #2563eb !important; color: #fff !important; }
.fi-wizard-step-completed .fi-wizard-step-icon { background-color: #10b981 !important; color: #fff !important; }
.fi-wizard-step-pending .fi-wizard-step-icon { background-color: #f8fafc !important; color: #94a3b8 !important; }
.dark .fi-wizard {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
.dark .fi-wizard-step-pending .fi-wizard-step-icon { background-color: #334155 !important; color: #94a3b8 !important; }

/* ===== 16. SELECTS CON BÚSQUEDA ===== */
.fi-select-input-dropdown, .choices__list--dropdown {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important;
}
.fi-select-input-option:hover, .choices__item--choice:hover { background-color: #f8fafc !important; }
.fi-select-input-option-selected, .choices__item--selectable.is-highlighted { background-color: #dbeafe !important; color: #2563eb !important; }
.dark .fi-select-input-dropdown, .dark .choices__list--dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
.dark .fi-select-input-option:hover, .dark .choices__item--choice:hover { background-color: #334155 !important; }
.dark .fi-select-input-option-selected, .dark .choices__item--selectable.is-highlighted { background-color: rgba(37,99,235,0.2) !important; color: #60a5fa !important; }


/* ===== 18. TABLAS VACÍAS ===== */
.fi-ta-empty-state-heading { color: #475569 !important; font-weight: 600 !important; }
.fi-ta-empty-state-icon { color: #cbd5e1 !important; }
.dark .fi-ta-empty-state-heading { color: #f1f5f9 !important; }
.dark .fi-ta-empty-state-icon { color: #475569 !important; }

/* ===== TOPBAR ====== */
body:has(.sigem-professional) .fi-topbar {
    background-color: #0b1d3a !important;
    border-bottom: none !important;
    box-shadow: none !important;
    left: 0 !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    position: relative !important;
    z-index: 20 !important;
}
body:has(.sigem-professional) .fi-topbar nav {
    height: 52px !important;
    min-height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body:has(.sigem-professional).dark .fi-topbar {
    background-color: #050e1d !important;
}
body:has(.sigem-professional) .fi-topbar, body:has(.sigem-professional) .fi-topbar * { color: #ffffff !important; }
body:has(.sigem-professional) .fi-topbar .fi-user-menu button { background: transparent !important; border: none !important; }
body:has(.sigem-professional) .fi-topbar .fi-user-menu button:hover { background-color: rgba(255,255,255,0.1) !important; }

/* ===== DROPDOWN / MENU DE USUARIO ===== */
.fi-dropdown-panel, .fi-dropdown-list, .fi-dropdown-list-item, .fi-user-menu { background-color: #ffffff !important; }
.fi-dropdown-panel *, .fi-dropdown-list-item * { color: #1a1a2e !important; }
.fi-dropdown-list-item:hover { background-color: #f1f5f9 !important; }
.dark .fi-dropdown-panel, .dark .fi-dropdown-list, .dark .fi-dropdown-list-item, .dark .fi-user-menu { background-color: #161b22 !important; border-color: #30363d !important; }
.dark .fi-dropdown-panel *, .dark .fi-dropdown-list-item * { color: #e2e8f0 !important; }
.dark .fi-dropdown-list-item:hover { background-color: #1f2937 !important; }

/* ===== LINKS INTERACTIVOS (TEXTO) ===== */
.fi-main a:not([class*="btn"]), .fi-ta-text-item-label a { color: #1b65d4 !important; transition: color 0.2s; }
.fi-main a:not([class*="btn"]):hover, .fi-ta-text-item-label a:hover { color: #0d47a1 !important; }
.dark .fi-main a:not([class*="btn"]), .dark .fi-ta-text-item-label a { color: #3b82f6 !important; }
.dark .fi-main a:not([class*="btn"]):hover, .dark .fi-ta-text-item-label a:hover { color: #60a5fa !important; }

/* JetBrains Mono */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");
.font-mono, .fi-ta-text-item-label code, .fi-ta-text-item-label[style*="monospace"] { font-family: "JetBrains Mono", monospace !important; }

/* ===== LOGIN CUSTOMIZATION ===== */
.fi-simple-layout {
    background-image: url("../images/fondo.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    position: relative;
    z-index: 1;
}
.fi-simple-layout::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(11, 29, 58, 0.75) !important; z-index: -1;
}
.fi-simple-main-ctn > div {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important; border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; border: 1px solid rgba(255,255,255,0.2) !important;
}
.dark .fi-simple-main-ctn > div {
    background: rgba(13, 17, 23, 0.95) !important; border: 1px solid rgba(48, 54, 61, 0.8) !important;
}
.dark .fi-simple-main-ctn h2 { color: #e2e8f0 !important; }

/* ===== ELIMINAR ESPACIO DEL SIDEBAR ===== */
.fi-sidebar-layout { padding-left: 0 !important; }
.fi-sidebar { display: none !important; width: 0 !important; min-width: 0 !important; }
.fi-main { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; padding-left: 24px !important; padding-right: 24px !important; }

/* ===== RESPONSIVIDAD (MOBILE & TABLET) ===== */
.mobile-only { display: none !important; }

@media (max-width: 1024px) {
    /* Tablet adjustments for Dashboard */
    .sigem-professional .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .sigem-professional .grid-3 { grid-template-columns: 1fr !important; }
    .sigem-professional .grid-2 { grid-template-columns: 1fr !important; }
    .fi-main { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* Adaptabilidad de columnas */
    .col-desktop { display: none !important; }
}

@media (max-width: 640px) {
    /* Clases de adaptabilidad */
    .hidden-mobile { display: none !important; }
    .mobile-only { display: block !important; }
    .mobile-only-flex { display: flex !important; }
    .col-tablet { display: none !important; }

    /* Base typography */
    body { font-size: 14px !important; }
    
    /* Layout & padding */
    .fi-main { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .fi-section-content { padding: 1rem !important; }
    .sigem-professional .timeline { padding: 16px !important; }

    /* Grids */
    .sigem-professional .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .sigem-professional .grid-3 { grid-template-columns: 1fr !important; }

    /* Header */
    .sigem-professional .top-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px !important; height: auto !important; margin: -16px -16px 24px -16px !important; gap: 8px !important; width: calc(100% + 32px) !important; border-radius: 0 0 16px 16px !important; }
    .sigem-professional .header-brand { width: auto !important; }
    .sigem-professional .brand-title { font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
    .sigem-professional .brand-subtitle { display: none !important; }
    .sigem-professional .header-user { width: auto !important; justify-content: flex-end !important; gap: 8px !important; }
    .sigem-professional .user-text { display: none !important; }
    
    /* Banner */
    .sigem-professional .welcome-banner { flex-direction: column !important; text-align: center !important; padding: 20px !important; gap: 16px !important; }
    .sigem-professional .banner-greeting { font-size: 20px !important; }
    .sigem-professional .banner-actions { flex-wrap: wrap !important; justify-content: center !important; width: 100% !important; }
    .sigem-professional .banner-actions .btn { width: 100% !important; }

    /* Slide-overs - Transición a página completa */
    .sigem-professional .slide-panel { position: fixed !important; inset: 0 !important; width: 100% !important; border-radius: 0 !important; box-shadow: none !important; }
    .sigem-professional .slide-overlay { background: rgba(15, 23, 42, 0.95) !important; }
    .sigem-professional .slide-header { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 16px !important; border-bottom: 1px solid var(--slate-200) !important; }
    .sigem-professional .slide-title-area { width: auto !important; flex: 1; }
    .sigem-professional .slide-actions { width: auto !important; justify-content: flex-end !important; }
    .sigem-professional .slide-form-card { padding: 16px !important; }
    .sigem-professional .form-actions { flex-direction: column !important; }
    .sigem-professional .form-actions button, .sigem-professional .form-actions a { width: 100% !important; margin-bottom: 8px !important; text-align: center !important; justify-content: center !important; }

    /* Touch areas for buttons */
    .sigem-professional .btn-close, .sigem-professional .btn-back, .sigem-professional .cat-add-btn, .sigem-professional .btn-icon, .sigem-professional .btn, .sigem-professional .btn-blue, .sigem-professional .btn-green, .sigem-professional .recent-chip { min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

    /* Botón cerrar/volver más visible en móvil */
    .sigem-professional .btn-close { font-size: 14px !important; background: var(--slate-100) !important; color: var(--slate-900) !important; border-radius: 8px !important; padding: 0 16px !important; width: auto !important; }

    /* Tables */
    .sigem-professional .mini-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding: 0 10px !important; margin-bottom: 10px !important; }
    .sigem-professional .mod-table { min-width: 450px !important; }
    .sigem-professional .st-wrap { min-width: 600px !important; }
    .sigem-professional .mod-stats { flex-wrap: wrap !important; gap: 12px !important; }
    .sigem-professional .mod-stat { min-width: 45% !important; }
    
    /* Catalogs Section */
    .sigem-professional .block-header { flex-direction: column !important; align-items: flex-start !important; padding: 16px !important; gap: 16px !important; }
    .sigem-professional .catalog-search { width: 100% !important; }
    .sigem-professional .search-input { width: 100% !important; }
    .sigem-professional .catalog-group { padding: 16px !important; }
    .sigem-professional .group-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
    .sigem-professional .slide-footer { flex-direction: column !important; gap: 12px !important; justify-content: center !important; }
}

/* ===== VARIABLES SEMÁNTICAS EXCLUSIVAS PARA MODO OSCURO ===== */
.dark {
    /* Fondos */
    --dark-bg-app: #0f172a;
    --dark-bg-header: #0f172a;
    --dark-bg-surface: #1e293b;
    --dark-bg-card: rgba(30, 41, 59, 0.85);
    --dark-bg-surface-hover: #334155;
    
    /* Texto */
    --dark-text-primary: #f8fafc;
    --dark-text-secondary: #94a3b8;
    --dark-text-muted: #64748b;
    
    /* Bordes y Sombras */
    --dark-border-color: #334155;
    --dark-border-strong: #475569;
    --dark-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --dark-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
    --dark-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
    
    /* Acentos Semi-transparentes (para badges y botones) */
    --dark-accent-blue-bg: rgba(59, 130, 246, 0.15);
    --dark-accent-blue-text: #60a5fa;
    --dark-accent-blue-hover: rgba(59, 130, 246, 0.25);
    
    --dark-accent-green-bg: rgba(16, 185, 129, 0.15);
    --dark-accent-green-text: #34d399;
    
    --dark-accent-amber-bg: rgba(245, 158, 11, 0.15);
    --dark-accent-amber-text: #fbbf24;
    
    --dark-accent-red-bg: rgba(239, 68, 68, 0.15);
    --dark-accent-red-text: #f87171;
}


/* ===== DASHBOARD: Componentes base ===== */
/* Ocultar header nativo de Filament solo en esta pagina */
            body:has(.sigem-professional) .fi-header { display: none !important; }
            body:has(.sigem-professional) .sigem-topbar-brand { display: none !important; }
            
            .sigem-professional {
                /* Color Palette */
                --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-500: #3b82f6; --brand-600: #2563eb; --brand-700: #1d4ed8;
                --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-600: #475569; --slate-700: #334155; --slate-900: #0f172a;
                --emerald-50: #ecfdf5; --emerald-500: #10b981; --emerald-600: #059669;
                --amber-50: #fffbeb; --amber-500: #f59e0b; --amber-600: #d97706;
                --red-50: #fef2f2; --red-500: #ef4444; --red-600: #dc2626;
                --cyan-500: #06b6d4; --indigo-500: #6366f1; --violet-500: #8b5cf6; --rose-500: #f43f5e;
                --purple-500: #a855f7; --fuchsia-500: #d946ef; --teal-500: #14b8a6;
                
                font-family: 'DM Sans', sans-serif;
                color: var(--slate-900);
                background-color: transparent;
                padding-bottom: 40px;
            }
            .sigem-professional * { box-sizing: border-box; }
            .mono-text { font-family: 'JetBrains Mono', monospace; }

            /* Scrollbar */
            .sigem-professional ::-webkit-scrollbar { width: 6px; height: 6px; }
            .sigem-professional ::-webkit-scrollbar-track { background: transparent; }
            .sigem-professional ::-webkit-scrollbar-thumb { background: var(--slate-200); border-radius: 3px; }
            .sigem-professional ::-webkit-scrollbar-thumb:hover { background: var(--slate-600); }

            [x-cloak] { display: none !important; }

            /* Section 1: Header */
            .top-header { position: sticky; top: 0; z-index: 40; background: white; border-bottom: 1px solid var(--slate-200); display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; margin: -24px -24px 24px -24px; }
            .header-brand { display: flex; align-items: center; gap: 12px; }
            .brand-logo { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 20px; box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2); }
            .brand-text-container { display: flex; flex-direction: column; }
            .brand-title { font-weight: 600; font-size: 16px; color: var(--slate-900); }
            .brand-subtitle { font-size: 12px; color: var(--slate-600); }
            .header-user { display: flex; align-items: center; gap: 16px; }
            .btn-theme { position: relative; color: var(--slate-600); background: transparent; border: none; cursor: pointer; padding: 8px; border-radius: 50%; transition: 0.18s; display: flex; align-items: center; justify-content: center; }
            .btn-theme:hover { background: var(--slate-100); color: var(--slate-900); }
            .bell-btn { position: relative; color: var(--slate-600); background: transparent; border: none; cursor: pointer; padding: 4px; transition: 0.18s; }
            .bell-btn:hover { color: var(--brand-600); }
            .bell-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: var(--red-500); border-radius: 50%; border: 2px solid white; }
            .header-divider { width: 1px; height: 24px; background: var(--slate-200); }
            .user-info { display: flex; align-items: center; gap: 12px; }
            .user-text { text-align: right; }
            .user-name { font-weight: 600; font-size: 14px; color: var(--slate-900); line-height: 1.2; }
            .user-role { font-size: 12px; color: var(--slate-600); }
            .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--slate-700), var(--slate-900)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }

            /* Section 2: Banner */
            .welcome-banner { background: linear-gradient(to left, var(--brand-700), var(--brand-600)); border-radius: 20px; padding: 32px 40px; box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2); display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; color: white !important; }
            .banner-greeting { font-size: 28px; font-weight: 600; margin: 0 0 8px 0; color: white !important; }
            .banner-sub { color: white !important; font-size: 15px; margin: 0; }
            .banner-sub strong { color: white !important; font-weight: 700; }
            .banner-actions { display: flex; gap: 12px; }
            .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: 10px; transition: all 0.18s; border: none; cursor: pointer; text-decoration: none; }
            .btn-glass { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); color: white !important; }
            .btn-glass:hover { background: rgba(255, 255, 255, 0.25); }
            .btn-white { background: white; color: var(--brand-600); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
            .btn-white:hover { background: var(--slate-50); transform: translateY(-2px); }

            /* Grid Layouts */
            .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
            .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px; }
            .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 24px; }
            
            /* Section 3: Stats */
            .stat-card { background: white; border: 1px solid var(--slate-200); border-radius: 20px; padding: 24px; transition: all 0.18s; position: relative; overflow: hidden; }
            .stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }
            .stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
            .stat-title { font-size: 12px; font-weight: 600; color: var(--slate-600); text-transform: uppercase; letter-spacing: 0.5px; }
            .stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
            .stat-val { font-size: 32px; font-weight: 700; color: var(--slate-900); margin: 0 0 4px 0; line-height: 1; }
            .stat-sub { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 4px; }
            
            .text-emerald { color: var(--emerald-600); }
            .text-amber { color: var(--amber-600); }
            .text-red { color: var(--red-600); }
            .bg-emerald { background: var(--emerald-50); color: var(--emerald-600); }
            .bg-amber { background: var(--amber-50); color: var(--amber-600); }
            .bg-red { background: var(--red-50); color: var(--red-600); }
            .bg-brand { background: var(--brand-50); color: var(--brand-600); }

            .sparkline { width: 100%; height: 40px; margin-top: 16px; }
            
            /* Custom Progress / Bars */
            .progress-bar-wrap { width: 100%; height: 6px; background: var(--slate-100); border-radius: 3px; margin-top: 20px; overflow: hidden; }
            .progress-bar-fill { height: 100%; background: var(--emerald-500); border-radius: 3px; }
            
            .severity-bars { display: flex; gap: 4px; margin-top: 20px; height: 6px; }
            .severity-bar { flex: 1; border-radius: 3px; background: var(--slate-200); }
            .severity-bar.active { background: var(--red-500); }
            .severity-bar.active-light { background: rgba(239, 68, 68, 0.4); }

/* Section 5: Modules */
            .module-card { background: white; border: 1px solid var(--slate-200); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: 0.18s; }
            .module-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }
            .mod-header { padding: 20px; border-bottom: 1px solid var(--slate-200); display: flex; align-items: center; gap: 12px; }
            .mod-title { font-size: 16px; font-weight: 600; color: var(--slate-900); flex: 1; }
            .mod-badge { background: var(--slate-100); color: var(--slate-700); padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
            
            .mod-stats { display: flex; padding: 16px 20px; gap: 16px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }
            .mod-stat { flex: 1; }
            .mod-stat-val { font-size: 18px; font-weight: 700; color: var(--slate-900); line-height: 1; margin-bottom: 4px; }
            .mod-stat-label { font-size: 11px; color: var(--slate-600); text-transform: uppercase; font-weight: 600; }
            
            .mini-table-wrap { padding: 0 20px; flex: 1; }
            .mod-table { width: 100%; border-collapse: collapse; }
            .mod-table th { padding: 12px 4px; text-align: left; font-size: 11px; font-weight: 600; color: var(--slate-600); text-transform: uppercase; border-bottom: 1px solid var(--slate-200); }
            .mod-table td { padding: 12px 4px; font-size: 13px; color: var(--slate-900); border-bottom: 1px solid var(--slate-100); }
            .mod-table tr:last-child td { border-bottom: none; }
            
            .badge { display: inline-flex; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1; }
            .badge-green { background: var(--emerald-50); color: var(--emerald-600); }
            .badge-blue { background: var(--brand-50); color: var(--brand-600); }
            .badge-amber { background: var(--amber-50); color: var(--amber-600); }
            .badge-red { background: var(--red-50); color: var(--red-600); }
            
            .mod-footer { padding: 16px 20px; border-top: 1px solid var(--slate-200); display: flex; justify-content: space-between; align-items: center; }
            .link-blue { color: var(--brand-600); font-size: 13px; font-weight: 600; text-decoration: none; }
            .link-blue:hover { text-decoration: underline; }
            .btn-blue { background: var(--brand-600); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.18s; }
            .btn-blue:hover { background: var(--brand-700); }
            .btn-green { background: var(--emerald-600); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.18s; }
            .btn-green:hover { background: var(--emerald-500); }

/* ===== DASHBOARD: Catálogos ===== */
/* Section 4: Catalogs */
            .section-block { background: white; border: 1px solid var(--slate-200); border-radius: 20px; overflow: hidden; margin-bottom: 24px; }
            .block-header { padding: 24px; border-bottom: 1px solid var(--slate-200); display: flex; justify-content: space-between; align-items: center; }
            .block-title-wrap { display: flex; align-items: center; gap: 12px; }
            .block-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); display: flex; align-items: center; justify-content: center; }
            .block-title { font-size: 18px; font-weight: 600; color: var(--slate-900); margin: 0 0 4px 0; }
            .block-subtitle { font-size: 13px; color: var(--slate-600); margin: 0; }
            
            .catalog-search { display: flex; align-items: center; gap: 12px; }
            .search-input-wrap { position: relative; }
            .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--slate-600); }
            .search-input { width: 260px; padding: 10px 12px 10px 36px; border: 1px solid var(--slate-200); border-radius: 10px; font-size: 14px; font-family: 'DM Sans', sans-serif; transition: 0.18s; outline: none; }
            .search-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-50); }

            .recent-row { background: var(--slate-50); padding: 16px 24px; border-bottom: 1px solid var(--slate-200); display: flex; align-items: center; gap: 16px; overflow-x: auto; }
            .recent-label { font-size: 11px; font-weight: 600; color: var(--slate-600); letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
            .recent-chip { background: white; border: 1px solid var(--slate-200); padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--slate-700); display: flex; align-items: center; gap: 6px; cursor: pointer; transition: 0.18s; white-space: nowrap; }
            .recent-chip:hover { border-color: var(--brand-500); color: var(--brand-600); }
            
            .catalog-group { padding: 32px 24px; border-bottom: 1px solid var(--slate-200); }
            .group-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
            .group-title-wrap { display: flex; align-items: center; gap: 12px; }
            .group-title-text { font-size: 16px; font-weight: 600; color: var(--slate-900); }
            .group-title-sub { color: var(--slate-600); font-weight: 400; font-size: 14px; }
            .group-count { font-size: 13px; color: var(--slate-600); }
            
            .cat-card { background: white; border: 1px solid var(--slate-200); border-radius: 16px; padding: 20px; cursor: pointer; transition: all 0.18s; position: relative; }
            .cat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); border-color: var(--slate-300); }
            .cat-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
            .cat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
            .cat-icon-sm { width: 40px; height: 40px; }
            .cat-add-btn { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-50); color: var(--brand-600); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.18s; border: none; cursor: pointer; }
            .cat-card:hover .cat-add-btn { opacity: 1; }
            .cat-add-btn:hover { background: var(--brand-100); }
            
            .cat-title { font-size: 16px; font-weight: 600; color: var(--slate-900); margin: 0 0 4px 0; }
            .cat-desc { font-size: 13px; color: var(--slate-600); margin: 0 0 16px 0; }
            .cat-footer { display: flex; justify-content: space-between; align-items: flex-end; }
            .cat-number { font-size: 24px; font-weight: 700; color: var(--slate-900); line-height: 1; }
            .cat-num-label { font-size: 12px; color: var(--slate-600); font-weight: 500; }
            
            .hover-preview { position: absolute; bottom: 0; left: 0; right: 0; background: white; padding: 12px 20px; border-top: 1px solid var(--slate-200); border-radius: 0 0 16px 16px; font-size: 12px; color: var(--slate-600); opacity: 0; transform: translateY(10px); transition: all 0.2s; pointer-events: none; }
            .cat-card:hover .hover-preview { opacity: 1; transform: translateY(0); }
            .cat-card:hover .cat-footer { opacity: 0; }
            
            .avatar-stack { display: flex; align-items: center; }
            .avatar-sm { width: 24px; height: 24px; border-radius: 50%; border: 2px solid white; margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: white; }
            .avatar-sm:first-child { margin-left: 0; }
            
            .block-footer { background: var(--slate-50); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--slate-600); }
            .kbd { background: white; border: 1px solid var(--slate-200); border-radius: 4px; padding: 2px 6px; font-family: monospace; font-size: 11px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Slide-over */
            .slide-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px); z-index: 100; transition: opacity 0.3s; }
            .slide-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 75%; background: var(--slate-50); z-index: 101; box-shadow: -10px 0 25px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
            .slide-header { padding: 24px 32px; background: white; border-bottom: 1px solid var(--slate-200); display: flex; justify-content: space-between; align-items: center; }
            .slide-title-area { display: flex; align-items: center; gap: 16px; }
            .btn-back { background: transparent; border: none; cursor: pointer; color: var(--slate-600); padding: 8px; border-radius: 50%; transition: 0.18s; display: flex; align-items: center; justify-content: center; }
            .btn-back:hover { background: var(--slate-100); color: var(--slate-900); }
            .slide-title { font-size: 20px; font-weight: 700; color: var(--slate-900); margin: 0 0 4px 0; }
            .slide-subtitle { font-size: 13px; color: var(--slate-600); margin: 0; }
            .slide-actions { display: flex; gap: 12px; align-items: center; }
            .btn-close { background: transparent; border: none; cursor: pointer; color: var(--slate-600); padding: 8px; border-radius: 50%; transition: 0.18s; }
            .btn-close:hover { background: var(--red-50); color: var(--red-600); }
            
            .slide-body { flex: 1; overflow-y: auto; padding: 32px; }
            
            /* Slide Table */
            .slide-table-card { background: white; border: 1px solid var(--slate-200); border-radius: 16px; overflow: hidden; }
            .table-toolbar { padding: 16px 24px; border-bottom: 1px solid var(--slate-200); display: flex; justify-content: space-between; align-items: center; }
            .table-results { font-size: 13px; color: var(--slate-600); font-weight: 500; }
            .st-wrap { width: 100%; border-collapse: collapse; }
            .st-wrap th { position: sticky; top: 0; background: var(--slate-50); padding: 14px 24px; text-align: left; font-size: 12px; font-weight: 600; color: var(--slate-600); text-transform: uppercase; border-bottom: 1px solid var(--slate-200); z-index: 10; }
            .st-wrap td { padding: 16px 24px; font-size: 14px; color: var(--slate-900); border-bottom: 1px solid var(--slate-100); }
            .st-wrap tr:hover td { background: var(--slate-50); }
            .btn-icon { background: transparent; border: none; color: var(--slate-500); cursor: pointer; padding: 6px; border-radius: 6px; transition: 0.18s; }
            .btn-icon:hover { background: var(--brand-50); color: var(--brand-600); }
            .btn-icon.del:hover { background: var(--red-50); color: var(--red-600); }

            /* Slide Form */
            .slide-form-card { background: white; border: 1px solid var(--slate-200); border-radius: 16px; padding: 32px; max-width: 600px; margin: 0 auto; }
            .form-title { font-size: 16px; font-weight: 600; color: var(--slate-900); margin: 0 0 24px 0; padding-bottom: 16px; border-bottom: 1px solid var(--slate-200); }
            .form-group { margin-bottom: 20px; }
            .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--slate-700); margin-bottom: 8px; }
            .form-input { width: 100%; padding: 12px 16px; border: 1px solid var(--slate-200); border-radius: 10px; font-size: 14px; font-family: 'DM Sans', sans-serif; transition: 0.18s; color: var(--slate-900); background-color: white; }
            .form-input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-50); }
            .form-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
            .form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--slate-200); }
            .btn-text { background: transparent; border: none; font-size: 14px; font-weight: 600; color: var(--slate-600); padding: 10px 20px; cursor: pointer; border-radius: 10px; transition: 0.18s; }
            .btn-text:hover { background: var(--slate-100); color: var(--slate-900); }

            .slide-footer { background: white; border-top: 1px solid var(--slate-200); padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; }

            /* Toast */
            .toast { position: fixed; bottom: 24px; right: 24px; background: var(--slate-900); color: white; padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2); z-index: 1000; }
            .toast-icon { color: var(--emerald-500); }
            
            /* Utility classes for inline styles */
            .text-primary-util { color: var(--slate-900); }
            .text-secondary-util { color: var(--slate-600); }
            .text-muted-util { color: var(--slate-500); }
            .text-amber-util { color: var(--amber-600); }
            .bg-amber-util { background: var(--amber-50); }

/* ===== DASHBOARD: Tablas y timeline ===== */
/* Section 6: Activity */
            .timeline { padding: 24px; }
            .timeline-item { display: flex; gap: 16px; margin-bottom: 20px; position: relative; }
            .timeline-item:last-child { margin-bottom: 0; }
            .timeline-item::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: -20px; width: 2px; background: var(--slate-100); z-index: 0; }
            .timeline-item:last-child::before { display: none; }
            .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; position: relative; z-index: 1; margin-top: 4px; }
            .dot.create { background: var(--emerald-500); }
            .dot.update { background: var(--brand-500); }
            .dot.auth { background: var(--amber-500); }
            .dot.delete { background: var(--red-500); }
            .tl-content { flex: 1; }
            .tl-text { font-size: 14px; color: var(--slate-700); margin: 0 0 4px 0; }
            .tl-time { font-size: 12px; color: var(--slate-500); }

/* ===== DASHBOARD: Accesos rápidos móvil ===== */
/* (Clases como .mobile-only y .hidden-mobile ya existen arriba en Responsividad) */

/* ===== DASHBOARD: Modo oscuro ===== */
.dark .sigem-professional ::-webkit-scrollbar-thumb { background: var(--dark-border-strong); }
            .dark .sigem-professional ::-webkit-scrollbar-thumb:hover { background: var(--dark-text-muted); }
            
            .dark .top-header { background: var(--dark-bg-header); border-bottom-color: var(--dark-border-color); }
            .dark .brand-title, .dark .user-name { color: var(--dark-text-primary); }
            .dark .brand-subtitle, .dark .user-role { color: var(--dark-text-secondary); }
            .dark .header-divider { background: var(--dark-border-color); }
            .dark .btn-theme, .dark .bell-btn { color: var(--dark-text-secondary); }
            .dark .btn-theme:hover { background: var(--dark-bg-surface); color: var(--dark-text-primary); }
            .dark .bell-dot { border-color: var(--dark-bg-header); }
            .dark .user-avatar { background: linear-gradient(135deg, var(--brand-700), var(--brand-900)); }
            
            .dark .welcome-banner { background: linear-gradient(to left, #0e2a5e, #113370); box-shadow: var(--dark-shadow-lg); }
            
            .dark .stat-card { background: var(--dark-bg-card); border-color: var(--dark-border-color); }
            .dark .stat-card:hover { box-shadow: var(--dark-shadow-lg); }
            .dark .stat-title, .dark .stat-sub { color: var(--dark-text-secondary); }
            .dark .stat-val { color: var(--dark-text-primary); }
            
            .dark .bg-emerald { background: var(--dark-accent-green-bg); color: var(--dark-accent-green-text); }
            .dark .bg-amber { background: var(--dark-accent-amber-bg); color: var(--dark-accent-amber-text); }
            .dark .bg-red { background: var(--dark-accent-red-bg); color: var(--dark-accent-red-text); }
            .dark .bg-brand { background: var(--dark-accent-blue-bg); color: var(--dark-accent-blue-text); }
            .dark .text-emerald { color: var(--dark-accent-green-text); }
            .dark .text-amber { color: var(--dark-accent-amber-text); }
            .dark .text-red { color: var(--dark-accent-red-text); }
            
            .dark .progress-bar-wrap, .dark .severity-bar { background: var(--dark-bg-surface); }
            
            .dark .section-block, .dark .module-card, .dark .cat-card { background: var(--dark-bg-card); border-color: var(--dark-border-color); }
            .dark .section-block:hover, .dark .module-card:hover, .dark .cat-card:hover { box-shadow: var(--dark-shadow-lg); }
            .dark .block-header, .dark .mod-header, .dark .mod-footer, .dark .group-header { border-color: var(--dark-border-color); }
            .dark .block-title, .dark .group-title-text, .dark .cat-title, .dark .mod-title, .dark .cat-number { color: var(--dark-text-primary); }
            .dark .block-subtitle, .dark .group-title-sub, .dark .cat-desc, .dark .cat-num-label, .dark .group-count { color: var(--dark-text-secondary); }
            
            .dark .search-input { background: var(--dark-bg-card); color: var(--dark-text-primary); border-color: var(--dark-border-color); }
            .dark .search-icon { color: var(--dark-text-secondary); }
            .dark .search-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--dark-accent-blue-bg); }
            
            .dark .recent-row, .dark .block-footer, .dark .mod-stats { background: var(--dark-bg-surface); border-color: var(--dark-border-color); }
            .dark .recent-label, .dark .block-footer { color: var(--dark-text-secondary); }
            .dark .recent-chip, .dark .kbd { background: var(--dark-bg-card); border-color: var(--dark-border-color); color: var(--dark-text-primary); }
            
            .dark .block-icon { background: var(--dark-accent-blue-bg); color: var(--dark-accent-blue-text); }
            .dark .cat-icon { box-shadow: var(--dark-shadow-sm); }
            .dark .cat-add-btn { background: var(--dark-accent-blue-bg); color: var(--brand-600); }
            .dark .cat-add-btn:hover { background: var(--dark-accent-blue-hover); }
            .dark .hover-preview { background: var(--dark-bg-card); border-color: var(--dark-border-color); color: var(--dark-text-secondary); }
            .dark .avatar-sm { border-color: var(--dark-bg-card); }
            
            .dark .mod-badge { background: var(--dark-bg-surface); color: var(--dark-text-primary); }
            .dark .mod-stat-val { color: var(--dark-text-primary); }
            .dark .mod-stat-label { color: var(--dark-text-secondary); }
            
            .dark .mod-table th { color: var(--dark-text-secondary); border-color: var(--dark-border-color); }
            .dark .mod-table td { color: var(--dark-text-primary); border-color: var(--dark-bg-surface); }
            
            .dark .badge-green { background: var(--dark-accent-green-bg); color: var(--dark-accent-green-text); }
            .dark .badge-blue { background: var(--dark-accent-blue-bg); color: var(--dark-accent-blue-text); }
            .dark .badge-amber { background: var(--dark-accent-amber-bg); color: var(--dark-accent-amber-text); }
            .dark .badge-red { background: var(--dark-accent-red-bg); color: var(--dark-accent-red-text); }
            
            .dark .timeline-item::before { background: var(--dark-border-color); }
            .dark .dot { border-color: var(--dark-bg-card); }
            .dark .tl-text { color: var(--dark-text-primary); }
            .dark .tl-time { color: var(--dark-text-secondary); }
            
            .dark .slide-panel { background: var(--dark-bg-surface); }
            .dark .slide-header { background: var(--dark-bg-card); border-color: var(--dark-border-color); }
            .dark .btn-back, .dark .btn-close { color: var(--dark-text-secondary); }
            .dark .btn-back:hover { background: var(--dark-bg-surface); color: var(--dark-text-primary); }
            .dark .slide-title { color: var(--dark-text-primary); }
            .dark .slide-subtitle { color: var(--dark-text-secondary); }
            
            .dark .slide-table-card, .dark .slide-form-card { background: var(--dark-bg-card); border-color: var(--dark-border-color); }
            .dark .table-toolbar { border-color: var(--dark-border-color); }
            .dark .table-results { color: var(--dark-text-secondary); }
            .dark .st-wrap th { background: var(--dark-bg-surface); color: var(--dark-text-secondary); border-color: var(--dark-border-color); }
            .dark .st-wrap td { color: var(--dark-text-primary); border-color: var(--dark-bg-surface); }
            .dark .st-wrap tr:hover td { background: var(--dark-bg-surface-hover); }
            .dark .btn-icon { color: var(--dark-text-secondary); }
            
            .dark .form-title { color: var(--dark-text-primary); border-color: var(--dark-border-color); }
            .dark .form-label { color: var(--dark-text-primary); }
            .dark .form-input { background-color: var(--dark-bg-card); border-color: var(--dark-border-color); color: var(--dark-text-primary); }
            .dark .form-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--dark-accent-blue-bg); }
            .dark .form-actions { border-color: var(--dark-border-color); }
            .dark .btn-text { color: var(--dark-text-secondary); }
            .dark .btn-text:hover { background: var(--dark-bg-surface); color: var(--dark-text-primary); }
            
            .dark .slide-footer { background: var(--dark-bg-card); border-color: var(--dark-border-color); }
            .dark .toast { background: var(--dark-text-primary); color: var(--dark-bg-card); box-shadow: var(--dark-shadow-lg); }

            .dark .text-primary-util { color: var(--dark-text-primary) !important; }
            .dark .text-secondary-util, .dark .text-muted-util { color: var(--dark-text-secondary) !important; }
            .dark .text-amber-util { color: var(--dark-accent-amber-text) !important; }
            .dark .bg-amber-util { background: var(--dark-accent-amber-bg) !important; }

/* ===== DASHBOARD: Responsive ===== */
@media (max-width: 1024px) {
                .grid-4 { grid-template-columns: repeat(2, 1fr); }
                .grid-3 { grid-template-columns: 1fr; }
                .grid-2 { grid-template-columns: 1fr; }
                .slide-panel { width: 90%; }
            }
            @media (max-width: 640px) {
                .grid-4 { grid-template-columns: 1fr; }
                .slide-panel { width: 100%; height: 100%; }
                
                /* Horizontal scroll for table */
                .slide-body { padding: 16px; overflow-x: hidden; overflow-y: auto; height: 100%; }
                .slide-table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
                
                /* Sticky header and pagination */
                .slide-header { position: sticky; top: 0; z-index: 110; padding: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
                .table-pagination { position: sticky; bottom: 0; z-index: 110; border-top: 1px solid var(--slate-200); }
                
                /* Table adjustments */
                .st-wrap th, .st-wrap td { white-space: nowrap; padding: 12px 16px; }
                
                /* Compact Action Buttons */
                .slide-actions .btn-blue { font-size: 0; gap: 0 !important; padding: 8px !important; }
                .slide-actions .btn-blue svg { width: 20px; height: 20px; margin: 0; }
                
                .btn-icon { padding: 8px; }
                .btn-icon svg { width: 18px; height: 18px; }
            }