/**
 * LUUK UI Refresh - Global Modernization Layer
 * v1.0 - 2026-02-24
 *
 * Capa final de pulido visual para todo el dashboard.
 * Carga DESPUES de luuk-bootstrap-fixes.css
 *
 * Mejoras incluidas:
 * - Tipografia Inter aplicada globalmente
 * - Fondo general gris claro (#f9fafb)
 * - Navegacion horizontal modernizada (active indicator)
 * - Submenu dropdown refinado
 * - Paneles/cards con border-radius mayor
 * - Botones con hover suavizado (sin scale agresivo)
 * - Inputs unificados con focus de color de marca
 * - Tablas con contenedor card y paginacion pill
 * - Dashboard widgets mejorados
 * - Micro-interacciones sutiles
 * - Scrollbar refinado
 * - Modales con border-radius generoso
 * - Badges con colores semánticos suaves
 * - Responsive refinado
 * - Accesibilidad mejorada
 */

/* ============================================
   1. TYPOGRAPHY - Inter Font Global
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap');

body,
html,
.site-navbar,
.site-menubar,
.dataTables_wrapper,
.panel,
.modal,
.dropdown-menu,
input,
select,
textarea,
button,
.form-control,
.btn,
.site-menu-title,
.badge,
.label,
.alert,
.tooltip,
.popover,
h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
    font-size: 14px !important;
    color: #374151 !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================
   2. BODY & BACKGROUND
   ============================================ */

body.dashboard,
body.site-navbar-small {
    background: #edf0f4 !important;
}

.page,
.site-page,
.page-content {
    background: #edf0f4 !important;
}

/* ============================================
   3. TYPOGRAPHY HIERARCHY
   ============================================ */

h1, .page-title, .formularios-page-title, .luuk-page-title {
    font-weight: 700 !important;
    color: #111827 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
}

h2, .panel-title, .section-title {
    font-weight: 600 !important;
    color: #1f2937 !important;
    letter-spacing: -0.2px !important;
}

h3, h4 {
    font-weight: 500 !important;
    color: #374151 !important;
}

small, .text-muted, .help-block {
    color: #6b7280 !important;
}

/* ============================================
   4. NAVIGATION - Horizontal Menu Bar
   ============================================ */

/* Menubar: white background with subtle border */
.site-menubar {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.site-menubar-body {
    background: transparent !important;
}

/* Menu items - cleaner typography */
.site-menu > .site-menu-item > a {
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 16px 18px !important;
    transition: color 0.2s ease !important;
    position: relative !important;
    border-bottom: none !important;
}

/* Hover */
.site-menu > .site-menu-item > a:hover {
    color: #111827 !important;
    background: transparent !important;
}

/* Active tab - color change only, no underline */
.site-menu > .site-menu-item.active > a,
.site-menu > .site-menu-item.open > a {
    color: var(--color, #29c178) !important;
    font-weight: 600 !important;
    border-bottom: none !important;
    background: transparent !important;
}

/* Menu icons - subtler */
.site-menu > .site-menu-item > a .site-menu-icon {
    font-size: 18px !important;
    margin-right: 6px !important;
    opacity: 0.65;
    transition: opacity 0.15s ease !important;
}

.site-menu > .site-menu-item.active > a .site-menu-icon,
.site-menu > .site-menu-item > a:hover .site-menu-icon {
    opacity: 1;
}

/* Disable aggressive icon hover animation from bootstrap-fixes */
.site-menu-item:hover > a .site-menu-icon {
    transform: none !important;
}

/* Hide submenu arrows in horizontal mode */
.site-menu > .site-menu-item > a .site-menu-arrow {
    display: none;
}

/* ============================================
   5. SUBMENU DROPDOWN - Modern
   ============================================ */

.site-menu-sub {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 6px !important;
    min-width: 220px !important;
    overflow: hidden !important;
}

.site-menu-sub .site-menu-item > a {
    padding: 10px 14px !important;
    color: #4b5563 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    border-radius: 6px !important;
    transition: all 0.12s ease !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Higher specificity to override MyCss.css colored hover */
.site-menubar .site-menu-sub .site-menu-item > a:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

.site-menubar .site-menu-sub .site-menu-item > a:hover .site-menu-icon,
.site-menubar .site-menu-sub .site-menu-item > a:hover .iconoMenu,
.site-menubar .site-menu-sub .site-menu-item > a:hover .site-menu-title {
    color: #111827 !important;
}

.site-menu-sub .site-menu-item.active > a,
.site-menu-sub .site-menu-item > a.active {
    color: var(--color, #29c178) !important;
    background: rgba(41, 193, 120, 0.06) !important;
    font-weight: 500 !important;
}

.site-menu-sub .site-menu-item.active > a .site-menu-icon,
.site-menu-sub .site-menu-item.active > a .iconoMenu,
.site-menu-sub .site-menu-item.active > a .site-menu-title {
    color: var(--color, #29c178) !important;
    opacity: 1 !important;
}

.site-menu-sub .site-menu-item > a .site-menu-icon {
    font-size: 16px !important;
    opacity: 0.6;
    flex-shrink: 0 !important;
}

.site-menu-sub .site-menu-item > a:hover .site-menu-icon {
    opacity: 1;
}

/* ============================================
   6. HEADER NAVBAR - Subtle shadow
   ============================================ */

.site-navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border-bottom: none !important;
}

/* ============================================
   7. PANELS / CARDS - Elevated Modern Look
   ============================================ */

.panel {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
    margin-bottom: 20px !important;
    transition: box-shadow 0.2s ease !important;
}

.panel:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.panel-default > .panel-heading {
    background: #ffffff !important;
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 16px 20px !important;
    border-radius: 12px 12px 0 0 !important;
}

.panel-default > .panel-heading .panel-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.panel-body {
    padding: 20px !important;
}

.panel-footer {
    background: #fafafa !important;
    border-top: 1px solid #f3f4f6 !important;
    padding: 14px 20px !important;
    border-radius: 0 0 12px 12px !important;
}

/* ============================================
   8. BUTTONS - Refined, Less Aggressive
   ============================================ */

.btn {
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Softer hover - override the aggressive scale from bootstrap-fixes */
.btn:hover {
    transform: translateY(-1px) !important;
}

.btn:active {
    transform: translateY(0) !important;
}

/* Reduce hover shadow intensity */
.btn-primary:hover {
    box-shadow: 0 4px 12px var(--coloro2, rgba(41, 193, 120, 0.25)) !important;
}

.btn-danger:hover {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
}

.btn-warning:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25) !important;
}

.btn-success:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

.btn-default:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Icon in button - no rotate on hover */
.btn:hover .icon,
.btn:hover [class*="icon-"],
a:hover .icon,
a:hover [class*="icon-"] {
    transform: none !important;
}

/* ============================================
   9. FORM CONTROLS - Unified Focus
   ============================================ */

.form-control {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus {
    border-color: var(--color, #29c178) !important;
    box-shadow: 0 0 0 3px var(--coloro2, rgba(41, 193, 120, 0.15)) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: #9ca3af !important;
}

/* Select2 refinements */
.select2-container .select2-choice,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    min-height: 40px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--color, #29c178) !important;
    box-shadow: 0 0 0 3px var(--coloro2, rgba(41, 193, 120, 0.15)) !important;
}

/* Select2 dropdown */
.select2-dropdown {
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
}

.select2-results__option--highlighted {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

.select2-results__option--selected {
    background: var(--coloro2, rgba(41, 193, 120, 0.15)) !important;
    color: var(--color2, #092825) !important;
}

/* ============================================
   10. SEARCH INPUTS - More Prominent
   ============================================ */

input[type="search"],
.BuscarProcesos,
.formularios-search,
.dataTables_filter input {
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    background: #f9fafb !important;
    transition: all 0.2s ease !important;
}

input[type="search"]:focus,
.BuscarProcesos:focus,
.formularios-search:focus,
.dataTables_filter input:focus {
    background: #ffffff !important;
    border-color: var(--color, #29c178) !important;
    box-shadow: 0 0 0 3px var(--coloro2, rgba(41, 193, 120, 0.15)) !important;
}

/* ============================================
   11. TABLES - Card Container + Pagination Pills
   ============================================ */

/* DataTable wrapper as a card */
.dataTables_wrapper {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: visible;
}

/* Top controls spacing */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: 16px 20px 8px 20px !important;
}

/* Bottom info + pagination */
.dataTables_wrapper .dataTables_info {
    padding: 12px 20px !important;
    color: #6b7280 !important;
    font-size: 13px !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding: 12px 20px 16px !important;
}

/* Pagination pill buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    font-size: 13px !important;
    border: 1px solid transparent !important;
    transition: all 0.15s ease !important;
    color: #374151 !important;
    background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--color, #29c178) !important;
    color: #fff !important;
    border-color: var(--color, #29c178) !important;
    box-shadow: 0 2px 6px rgba(41, 193, 120, 0.25) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #d1d5db !important;
    cursor: default !important;
}

/* ============================================
   12. BADGE REFINEMENTS
   ============================================ */

.badge, .label {
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.2px !important;
}

/* Disable pulse animation on badges - too distracting */
.badge-danger,
.badge-warning {
    animation: none !important;
}

/* ============================================
   13. MODAL REFINEMENTS
   ============================================ */

.modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16) !important;
}

.modal-header {
    padding: 20px 24px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.modal-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.modal-body {
    padding: 24px !important;
}

.modal-footer {
    padding: 16px 24px !important;
    border-top: 1px solid #f3f4f6 !important;
    background: #fafafa !important;
    border-radius: 0 0 16px 16px !important;
}

/* Modal backdrop - more blur */
.modal-backdrop.in {
    opacity: 0.4 !important;
    backdrop-filter: blur(4px) !important;
}

/* ============================================
   14. DASHBOARD WIDGETS
   ============================================ */

.grid-stack-item-content {
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease !important;
}

.grid-stack-item-content:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Big numbers in widgets */
.widget-number,
.metric-value,
.stat-number {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    letter-spacing: -1px !important;
    line-height: 1.1 !important;
}

/* Widget labels */
.widget-label,
.metric-label,
.stat-label {
    font-size: 12px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Empty state in widgets */
.no-data,
.empty-state,
.widget-empty {
    color: #9ca3af !important;
    font-size: 13px !important;
    text-align: center !important;
    padding: 24px !important;
}

/* ============================================
   15. FAB BUTTONS - Cleaner Shadow
   ============================================ */

.luuk-ia-avatar-container,
.fab-button,
#bugReportBtn {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s ease !important;
}

.luuk-ia-avatar-container:hover,
.fab-button:hover,
#bugReportBtn:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   16. SCROLLBAR - Refined
   ============================================ */

::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
    border-radius: 10px !important;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af !important;
}

/* ============================================
   17. MICRO-INTERACTIONS
   ============================================ */

/* Staggered panel fade-in */
.panel {
    animation: luukRefreshFadeIn 0.35s ease-out both;
}

.panel:nth-child(1) { animation-delay: 0ms; }
.panel:nth-child(2) { animation-delay: 50ms; }
.panel:nth-child(3) { animation-delay: 100ms; }
.panel:nth-child(4) { animation-delay: 150ms; }
.panel:nth-child(5) { animation-delay: 200ms; }
.panel:nth-child(6) { animation-delay: 250ms; }

@keyframes luukRefreshFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Table row hover - smooth */
table.dataTable tbody tr {
    transition: background-color 0.12s ease !important;
}

/* Smooth collapse */
.panel-collapse.collapsing {
    transition: height 0.25s ease !important;
}

/* Link hover - no color jump, use opacity */
a:hover {
    opacity: 0.85;
}

/* Disable rotate on icon hover (too playful) */
.btn:hover .icon,
.btn:hover [class*="icon-"],
a:hover .icon,
a:hover [class*="icon-"] {
    transform: none !important;
}

/* Disable list-group-item translateX (too much motion) */
.list-group-item:hover {
    transform: none !important;
    border-left-width: 1px !important;
}

/* ============================================
   18. DROPDOWN MENUS - Modern
   ============================================ */

.dropdown-menu {
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    padding: 6px !important;
    overflow: hidden !important;
}

.dropdown-menu > li > a {
    padding: 9px 14px !important;
    font-size: 13px !important;
    color: #4b5563 !important;
    border-radius: 6px !important;
    transition: all 0.12s ease !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* ============================================
   19. ALERT REFINEMENTS
   ============================================ */

.alert {
    border-radius: 10px !important;
    padding: 14px 18px !important;
    border-width: 1px !important;
    font-size: 14px !important;
}

/* ============================================
   20. PROCESS CARDS - Process page enhancements
   ============================================ */

/* Process action buttons - ghost style instead of colored pills */
.CardTarea .btn,
.card-actions .btn,
.TareasActions .btn,
.TareasActions button {
    font-size: 12px !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}

/* Process card hover effect */
.CardTarea,
.card-tarea,
.ContenidoProceso {
    transition: all 0.2s ease !important;
}

.CardTarea:hover,
.card-tarea:hover,
.ContenidoProceso:hover {
    background: #f9fafb !important;
}

/* Area section headers - subtle divider */
.TituloProceso,
.NombreArea {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 0 8px !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 12px !important;
}

/* ============================================
   21. STEP WIZARD - Modern Redesign
   Targets both .wizard/.steps and .step class patterns
   ============================================ */

/* === Pattern A: .wizard > .steps > ul > li (jquery-steps plugin) === */
.wizard > .steps {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 4px !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
}

.wizard > .steps > ul {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.wizard > .steps > ul > li {
    flex: 1 !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.wizard > .steps > ul > li > a,
.wizard > .steps > ul > li > a:hover,
.wizard > .steps > ul > li > a:focus {
    padding: 14px 20px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.wizard > .steps > ul > li .number {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f3f4f6 !important;
    border: 2px solid #e5e7eb !important;
    color: #9ca3af !important;
}

.wizard > .steps > ul > li.current > a {
    background: var(--coloro2, rgba(41, 193, 120, 0.1)) !important;
}

.wizard > .steps > ul > li.current .number {
    background: var(--color, #29c178) !important;
    border-color: var(--color, #29c178) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.wizard > .steps > ul > li.done .number {
    background: #d1fae5 !important;
    border-color: #10b981 !important;
    color: #059669 !important;
}

/* === Pattern B: .steps .step (custom Luuk editor steps) === */
.steps.steps-sm {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 4px !important;
    margin-bottom: 24px !important;
    display: flex !important;
    overflow: hidden !important;
}

.steps .step,
.steps .step.StepBotones2 {
    flex: 1 !important;
    padding: 14px 20px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    color: #9ca3af !important;
    margin: 0 !important;
}

.steps .step .step-number {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 50% !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f3f4f6 !important;
    border: 2px solid #e5e7eb !important;
    color: #9ca3af !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

.steps .step .step-desc {
    margin-left: 0 !important;
    position: static !important;
    top: auto !important;
}

.steps .step .step-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    margin: 0 !important;
}

.steps .step .step-desc small,
.steps .step .step-desc p {
    font-size: 12px !important;
    color: #d1d5db !important;
    margin: 2px 0 0 0 !important;
}

/* Current step */
.steps .step.current,
.steps .step.StepBotones2.current {
    background: var(--coloro2, rgba(41, 193, 120, 0.1)) !important;
    color: #1f2937 !important;
}

.steps .step.current .step-number {
    background: var(--color, #29c178) !important;
    border-color: var(--color, #29c178) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.steps .step.current .step-title {
    color: #1f2937 !important;
    font-weight: 600 !important;
}

.steps .step.current .step-desc small,
.steps .step.current .step-desc p {
    color: #6b7280 !important;
}

/* Done step */
.steps .step.done .step-number {
    background: #d1fae5 !important;
    border-color: #10b981 !important;
    color: #059669 !important;
}

.steps .step.done .step-title {
    color: #374151 !important;
}

/* Hover on non-current steps */
.steps .step:not(.current):hover {
    background: #f9fafb !important;
}

.steps .step:not(.current):hover .step-title {
    color: #374151 !important;
}

/* Override MyCss .StepBotones styling */
.StepBotones,
.StepBotones2 {
    background: transparent !important;
    border: none !important;
}

/* Responsive steps — scroll horizontal en pantallas angostas */
@media (max-width: 900px) {
    .steps.steps-sm {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .steps .step,
    .steps .step.StepBotones2 {
        flex: 0 0 auto !important;
        min-width: 130px !important;
        padding: 10px 12px !important;
    }
    .steps .step .step-title {
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    .steps .step .step-desc small,
    .steps .step .step-desc p {
        font-size: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 110px !important;
    }
    .steps .step .step-number {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 12px !important;
    }
    .steps .step .step-desc {
        gap: 0 !important;
    }

    /* Pattern A (wizard) */
    .wizard > .steps > ul {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .wizard > .steps > ul > li {
        flex: 0 0 auto !important;
        min-width: 130px !important;
    }
    .wizard > .steps > ul > li > a,
    .wizard > .steps > ul > li > a:hover,
    .wizard > .steps > ul > li > a:focus {
        padding: 10px 12px !important;
    }
}

/* ============================================
   22. TOOLTIP REFINEMENTS
   ============================================ */

.tooltip-inner {
    background: #1f2937 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 6px 10px !important;
    max-width: 250px !important;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #1f2937 !important;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #1f2937 !important;
}

/* ============================================
   23. DATE PICKER - Softer
   ============================================ */

.daterangepicker {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    border-radius: 6px !important;
}

/* ============================================
   24. RESPONSIVE REFINEMENTS
   ============================================ */

@media (max-width: 991px) {
    /* Sidebar style for tablet/mobile */
    .site-menubar {
        background: #ffffff !important;
    }

    .site-menu > .site-menu-item > a {
        padding: 14px 20px !important;
        border-bottom: none !important;
    }

    .site-menu > .site-menu-item.active > a {
        border-left: 3px solid var(--color, #29c178) !important;
        border-bottom: none !important;
        background: rgba(41, 193, 120, 0.04) !important;
    }

    .site-menu-sub {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 0 0 16px !important;
    }
}

@media (max-width: 768px) {
    .panel {
        border-radius: 10px !important;
        margin-bottom: 16px !important;
    }

    .modal-content {
        border-radius: 12px !important;
    }

    .dataTables_wrapper {
        border-radius: 10px;
    }

    .dropdown-menu {
        border-radius: 8px !important;
    }

    /* Popup containers — reduce padding on mobile for full-width content */
    #PopUpExcel,
    #PopUpExcel2 {
        padding: 0 8px 16px !important;
        margin: 0 !important;
    }

    #PopUpExcel2 {
        margin: 0 !important;
    }

    /* DivFiltros — tighter on mobile */
    .VerDetalleUsuario > #DivFiltros {
        margin-left: -8px !important;
        margin-right: -8px !important;
        padding-left: 8px !important;
        padding-right: 36px !important;
    }

    /* Hilo detail — reduce internal padding */
    .VerDetalleUsuario {
        padding: 0 8px 16px !important;
    }

    .VerDetalleUsuario .TituloTareaCompleta {
        padding: 10px 12px !important;
        gap: 6px 10px !important;
    }

    .VerDetalleUsuario .FiltrosInforme {
        padding: 8px 12px !important;
    }

    .VerDetalleUsuario .botonExportarExcel {
        padding: 8px 12px !important;
    }

    /* Metadata chips — stack on mobile */
    .hilo-detail-meta {
        gap: 4px !important;
    }

    /* Stats and content cards */
    .VerDetalleUsuario .HILO {
        border-radius: 4px !important;
        margin-top: 8px !important;
    }
}

/* ============================================
   25. ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Better focus indicators using brand color */
*:focus-visible {
    outline: 2px solid var(--color, #29c178) !important;
    outline-offset: 2px !important;
}

/* Remove green focus from inputs (use brand color shadow instead) */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible {
    outline: none !important;
}

/* ============================================
   26. SWEETALERT2 REFINEMENTS
   ============================================ */

.swal2-popup {
    border-radius: 16px !important;
    padding: 24px !important;
}

.swal2-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.swal2-content,
.swal2-html-container {
    font-size: 14px !important;
    color: #6b7280 !important;
}

/* Fix: MyCss.css sets all swal2 icons/text to var(--colort) (white)
   which becomes invisible on our white popup background.
   Use .swal2-popup prefix for higher specificity than MyCss selectors. */
.swal2-popup .swal2-icon {
    border-color: inherit !important;
    color: inherit !important;
}
.swal2-popup .swal2-icon.swal2-success.swal2-icon-show {
    border-color: #a5dc86 !important;
    color: #a5dc86 !important;
}
.swal2-popup .swal2-icon.swal2-success.swal2-icon-show .swal2-success-ring {
    border-color: rgba(165, 220, 134, 0.3) !important;
}
.swal2-popup .swal2-icon.swal2-success.swal2-icon-show [class^=swal2-success-line] {
    background-color: #a5dc86 !important;
}
.swal2-popup .swal2-icon.swal2-error {
    border-color: #f27474 !important;
    color: #f27474 !important;
}
.swal2-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    background-color: #f27474 !important;
}
.swal2-popup .swal2-icon.swal2-warning {
    border-color: #facea8 !important;
    color: #f8bb86 !important;
}
.swal2-popup .swal2-icon.swal2-info {
    border-color: #9de0f6 !important;
    color: #3fc3ee !important;
}
.swal2-popup .swal2-icon.swal2-question {
    border-color: #c9dae1 !important;
    color: #87adbd !important;
}
.swal2-popup .swal2-icon-content {
    color: inherit !important;
}

/* Fix: MyCss.css sets swal2 backdrop to var(--color) background.
   Our section 46 already overrides popup bg to white, but ensure
   the container backdrop is not green. */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Fix: MyCss.css sets swal2-input background to var(--color) (green).
   Restore white input fields inside SweetAlert. */
.swal2-input,
.swal2-file,
.swal2-textarea {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
}

/* Fix: MyCss.css sets swal2 placeholder to var(--colort) (white).
   Restore visible placeholder text inside SweetAlert. */
.swal2-popup input::placeholder,
.swal2-popup textarea::placeholder,
.swal2-popup .swal2-input::placeholder,
.swal2-content input::placeholder {
    color: #9ca3af !important;
}

.swal2-confirm {
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
}

.swal2-cancel {
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
}

/* ============================================
   27. CONTENT MAX-WIDTH
   Prevent content from stretching on ultra-wide
   ============================================ */

@media (min-width: 1600px) {
    .page > .Principal,
    .formularios-page-redesign,
    .luuk-page {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================
   28–47. COMPLETE DESIGN SYSTEM OVERHAUL
   Direction: "Calm Precision" — Linear/Vercel-inspired
   Font: DM Sans | Palette: near-black + warm grays
   Color used ONLY for CTAs & active states
   ============================================ */

/* ── Design Tokens (local, not :root to avoid conflicts) ── */

/* ─────────────────────────────────────────────
   28. PAGE CONTAINER — warm gray canvas
   ───────────────────────────────────────────── */

#PopUpExcel,
#PopUpExcel2 {
    background: #fafaf9 !important;
    padding: 0 28px 32px !important;
}

/* Override MyCss margin: 0 10px!important on inner container */
#PopUpExcel2,
#PopUpExcel2Eliminados {
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   29. FILTER BAR — flexbox toolbar (from-scratch v2)

   Approach: flex-wrap for natural responsive.
   X button in flow via order, not absolute.
   DOM order: [Row1] [Row2] [FiltrarBtn] [PhoneChev] [GenChev] [X]
   Visual order: [Row1] [FiltrarBtn] [GenChev] [X] / [Row2]
   ═══════════════════════════════════════════════════════════════ */

/* ─── Container ─── */

#PopUpExcel #DivFiltros,
#PopUpExcel2 #DivFiltros,
#DivFiltros {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    color: #0a0a0a !important;
    border: none !important;
    border-bottom: 2px solid #e5e5e5 !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 16px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    padding: 8px 16px !important;
    overflow: visible !important;
}

/* ─── Hide labels ─── */

#DivFiltros label,
#DivFiltros .floating-label,
#DivFiltros .InformeEntreText {
    display: none !important;
}

/* ─── All direct children: reset Bootstrap ─── */

#DivFiltros > * {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ─── Row 1: Date + Groups + Users (takes remaining space) ─── */

#DivFiltros #FiltroBuscarFechas {
    flex: 100 1 0% !important;
    min-width: 300px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    width: auto !important;
    order: 1 !important;
}

#DivFiltros #FiltroBuscarFechas > [class*="col-"] {
    width: auto !important;
    flex: 1 1 180px !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

#DivFiltros #BuscarPorFechasDiv {
    flex: 1 1 220px !important;
}

/* ─── Filtrar button wrapper ─── */

#DivFiltros > .col-sm-12:has(.BotonFiltrarInforme) {
    flex: 1 0 auto !important;
    width: auto !important;
    order: 2 !important;
}

#DivFiltros .BotonFiltrarInforme {
    width: 100% !important;
}

/* ─── Chevron general ─── */

#MostrarMasGeneral {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    order: 3 !important;
    margin-left: -4px !important;
}

/* ─── Close button (X) — in flow, not absolute ─── */

#CerrarPopUpExcel {
    flex: 0 0 auto !important;
    order: 4 !important;
    margin-left: auto !important;
    color: #525252 !important;
    background: #f5f5f4 !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 6px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
    line-height: 1 !important;
    position: static !important;
    z-index: 20 !important;
}

#CerrarPopUpExcel:hover {
    background: #e5e5e5 !important;
    color: #0a0a0a !important;
    border-color: #d4d4d4 !important;
}

/* ─── Refresh button — same style as close (X) ─── */

#RefreshHiloBtn {
    flex: 0 0 auto !important;
    order: 3 !important;
    color: #525252 !important;
    background: #f5f5f4 !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 6px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
    line-height: 1 !important;
    position: static !important;
    margin-right: 6px !important;
}

#RefreshHiloBtn:hover {
    background: #e5e5e5 !important;
    color: #0a0a0a !important;
    border-color: #d4d4d4 !important;
}

/* ─── Phone chevron — always hidden ─── */

#MostrarMasPhone {
    display: none !important;
}

/* ─── Row 2: Advanced filters (full-width new line) ─── */

#DivFiltros > .col-sm-12:has(#BuscarPorTermimosDiv) {
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    order: 10 !important;
    min-height: 0 !important;
}

/* Separator when Row 2 visible */
#DivFiltros > .col-sm-12:has(#BuscarPorTermimosDiv:not([style*="display: none"]):not([style*="display:none"])) {
    padding-top: 10px !important;
    margin-top: 2px !important;
    border-top: 1px solid #f0efed !important;
}

/* Row 2 children — reset Bootstrap */
#DivFiltros > .col-sm-12:has(#BuscarPorTermimosDiv) > [class*="col-"],
#DivFiltros > .col-sm-12:has(#BuscarPorTermimosDiv) > .FiltrarEstadosGlobalDiv,
#DivFiltros > .col-sm-12:has(#BuscarPorTermimosDiv) > #DuracionDiv {
    width: auto !important;
    float: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Row 2 proportions */
#BuscarPorTermimosDiv:not([style*="display: none"]):not([style*="display:none"]) {
    flex: 1 1 200px !important;
}
#DivFiltros .FiltrarEstadosGlobalDiv { flex: 0 1 180px !important; }
#DivFiltros #DuracionDiv { flex: 2 1 300px !important; }

/* ─── BuscarPor — category select + input inline ─── */

#BuscarPorTermimosDiv[style*="display: none"],
#BuscarPorTermimosDiv[style*="display:none"] {
    display: none !important;
}

#BuscarPorTermimosDiv:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

#BuscarPorTermimosDiv > .col-sm-4 {
    flex: 0 0 auto !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
}

#BuscarPorTermimosDiv > .col-sm-8 {
    flex: 1 1 0% !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
}

/* ─── Duration controls ─── */

#DuracionDiv > .col-sm-12 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

.BuscarPorDuracionDiv {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
}

.BuscarPorDuracionDiv > div {
    flex: 1 !important;
    min-width: 0 !important;
}

.BuscarPorDuracionDiv > .BuscarPorDuracion0 { flex: 2 !important; }
.BuscarPorDuracionDiv > .BuscarPorDuracion1 { flex: 0.7 !important; }
.BuscarPorDuracionDiv > .BuscarPorDuracion2 { flex: 0.6 !important; }
.BuscarPorDuracionDiv > .BuscarPorDuracion3 { flex: 0.7 !important; }

.BuscarPorDuracionDiv select,
.BuscarPorDuracionDiv input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#DivFiltros #DuracionDiv .BuscarPorDuracionDiv select,
#DivFiltros #DuracionDiv .BuscarPorDuracionDiv input {
    font-size: 11.5px !important;
    padding: 0 4px !important;
    padding-right: 20px !important;
}

#DivFiltros #DuracionDiv .BuscarPorDuracionDiv input {
    padding-right: 4px !important;
}

/* ─── Unified controls — 32px ─── */

#DivFiltros input,
#DivFiltros select,
#DivFiltros .tagify {
    background: #fafaf9 !important;
    border: 1px solid #e5e5e5 !important;
    color: #0a0a0a !important;
    border-radius: 5px !important;
    font-size: 12.5px !important;
    padding: 0 8px !important;
    height: 32px !important;
    line-height: 32px !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Tagify */
#DivFiltros .tagify {
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    --tagify-hover-border-color: #a3a3a3 !important;
}

#DivFiltros .tagify .tagify__input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Select — custom chevron */
#DivFiltros select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='2.5,4.5 6,8 9.5,4.5' fill='none' stroke='%23a3a3a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 12px !important;
    padding-right: 22px !important;
    cursor: pointer !important;
}

#DivFiltros select:hover { border-color: #d4d4d4 !important; }

/* Focus — gray ring (override tagify) */
#DivFiltros input:focus,
#DivFiltros select:focus,
#DivFiltros .tagify--focus,
#DivFiltros .tagify.tagify--focus,
#PopUpExcel #DivFiltros .tagify--focus,
#PopUpExcel2 #DivFiltros .tagify--focus {
    border-color: #a3a3a3 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
    background: #fff !important;
}

/* Number input — no spinners */
#DivFiltros input[type="number"] { -moz-appearance: textfield !important; }
#DivFiltros input[type="number"]::-webkit-outer-spin-button,
#DivFiltros input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ─── Tagify dropdown ─── */

#DivFiltros .tagify__dropdown,
.tagify__dropdown {
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
    margin-top: 4px !important;
    overflow: hidden !important;
}

#DivFiltros .tagify__dropdown__wrapper,
.tagify__dropdown__wrapper {
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 0 !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

#DivFiltros .tagify__dropdown__item,
.tagify__dropdown__item {
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: background 0.1s ease !important;
}

#DivFiltros .tagify__dropdown__item:hover,
.tagify__dropdown__item:hover { background: #f5f5f4 !important; }

#DivFiltros .tagify__dropdown__item--active,
.tagify__dropdown__item--active { background: #f0f0ef !important; color: #0a0a0a !important; }

.tagify__dropdown__wrapper::-webkit-scrollbar { width: 6px !important; }
.tagify__dropdown__wrapper::-webkit-scrollbar-track { background: transparent !important; }
.tagify__dropdown__wrapper::-webkit-scrollbar-thumb { background: #d4d4d4 !important; border-radius: 3px !important; }
.tagify__dropdown__wrapper::-webkit-scrollbar-thumb:hover { background: #a3a3a3 !important; }

/* ─── Date picker ─── */

#DivFiltros .input-group.InformeEntreDates {
    display: flex !important;
    align-items: center !important;
    height: 32px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 5px !important;
    background: #fafaf9 !important;
    overflow: visible !important;
}

#DivFiltros .input-group-addon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    min-width: 36px !important;
    height: 100% !important;
    padding: 0 !important;
    background: #f0efed !important;
    border: none !important;
    border-right: 1px solid #e5e5e5 !important;
    border-radius: 4px 0 0 4px !important;
    color: #737373 !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

#DivFiltros .input-group .form-control,
#DivFiltros .input-group input {
    border: none !important;
    border-radius: 0 !important;
    height: 100% !important;
    flex: 1 !important;
    background: transparent !important;
}

/* ─── Chevron toggle ─── */

#MostrarMasGeneral a,
#MostrarMasPhone a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 5px !important;
    background: #f5f5f4 !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

#MostrarMasGeneral a:hover,
#MostrarMasPhone a:hover {
    background: #e7e5e4 !important;
    border-color: #a8a29e !important;
}

#MostrarMasGeneral .MostrarMasFiltros,
#MostrarMasPhone .MostrarMasFiltros {
    color: #78716c !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#MostrarMasGeneral a:hover .MostrarMasFiltros,
#MostrarMasPhone a:hover .MostrarMasFiltros {
    color: #292524 !important;
}

/* ═══════════════════════════════════════════════════════════════
   30. FILTRAR BUTTON — compact inline pill
   ═══════════════════════════════════════════════════════════════ */

.BotonFiltrarInforme,
p.BotonFiltrarInforme,
.BotonFiltrarInforme.progress-bar-success,
p.progress-bar-success.BotonFiltrarInforme {
    background: var(--color, #0a0a0a) !important;
    color: var(--colort, #fafaf9) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0 20px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    width: auto !important;
    display: inline-block !important;
    margin: 0 !important;
    text-align: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    white-space: nowrap !important;
}

.BotonFiltrarInforme:hover,
p.BotonFiltrarInforme:hover {
    background: var(--color2, #262626) !important;
    color: var(--colort, #fafaf9) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────
   31. TITLES & SECTION LABELS — typographic hierarchy
   ───────────────────────────────────────────── */

#TituloPopUpInformeH3,
.Principal > h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    margin: 24px 0 4px !important;
    letter-spacing: -0.4px !important;
    line-height: 1.2 !important;
}

#NombreTablaActiva {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #a3a3a3 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 8px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

#TituloCambiarTipoDeTabla {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #a3a3a3 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 4px 0 8px !important;
    padding: 0 !important;
}

/* ─────────────────────────────────────────────
   32. STATS CARDS — minimal, data-forward
   ───────────────────────────────────────────── */

.stats-cards-wrapper {
    margin: 16px 0 24px !important;
}

.stats-cards-header {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #a3a3a3 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
    padding-left: 0 !important;
}

.stats-cards-container {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    padding: 24px 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.stats-card {
    padding: 4px 28px !important;
}

.stats-card:not(:last-child)::after {
    background: #e5e5e5 !important;
    height: 32px !important;
}

.stats-card-value {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -1.5px !important;
    line-height: 1 !important;
}

.stats-card-success .stats-card-value { color: #16a34a !important; }
.stats-card-warning .stats-card-value { color: #d97706 !important; }
.stats-card-info .stats-card-value    { color: #737373 !important; }

.stats-card-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #a3a3a3 !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
}

/* ─────────────────────────────────────────────
   33. TABLE TOOLBAR — card container for controls + table
   ───────────────────────────────────────────── */

.RespuestasHilosDiv {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    margin-top: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

/* ─────────────────────────────────────────────
   34. TOGGLE BUTTONS — segmented control
   ───────────────────────────────────────────── */

.BotonCambiarQueTabla {
    display: inline-block !important;
    margin-right: -1px !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

/* Segmented control: first two toggles connect, rest are standalone */
.BotonCambiarQueTabla:first-of-type .BotonFiltrarHilos {
    border-radius: 8px 0 0 8px !important;
}
.BotonCambiarQueTabla:nth-of-type(2) .BotonFiltrarHilos {
    border-radius: 0 8px 8px 0 !important;
}
/* 3rd+ toggle (Filtrar columnas) is standalone — full radius */
.BotonCambiarQueTabla:nth-of-type(n+3) .BotonFiltrarHilos {
    border-radius: 8px !important;
    margin-left: 8px !important;
}
.BotonCambiarQueTabla:nth-of-type(n+3) {
    margin-right: 0 !important;
    margin-left: 4px !important;
}

.BotonFiltrarHilos,
.BotonFiltrarHilos.progress-bar-success,
.BotonFiltrarHilos.BotonOpciones,
.BotonFiltrarHilos.progress-bar-success.BotonOpciones,
p.BotonFiltrarHilos,
p.BotonFiltrarHilos.progress-bar-success,
p.BotonFiltrarHilos.progress-bar-success.BotonOpciones {
    background: #fff !important;
    color: #525252 !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 8px !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    width: auto !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
    display: inline-block !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.BotonFiltrarHilos:hover,
p.BotonFiltrarHilos:hover,
.BotonFiltrarHilos.BotonOpciones:hover {
    background: #fafaf9 !important;
    color: #0a0a0a !important;
    z-index: 1 !important;
    position: relative !important;
    border-color: #a3a3a3 !important;
}

.BotonFiltrarHilos.active,
.BotonFiltrarHilos.selected,
.BotonOpciones.active {
    background: var(--color, #0a0a0a) !important;
    color: var(--colort, #fafaf9) !important;
    border-color: var(--color, #0a0a0a) !important;
    font-weight: 600 !important;
    z-index: 2 !important;
    position: relative !important;
}

/* BotonFiltrarHilos inside BotonOpciones combo */
.BotonFiltrarHilos.BotonOpciones,
p.BotonFiltrarHilos.BotonOpciones {
    width: auto !important;
}

/* ─────────────────────────────────────────────
   35. EXCEL BUTTON — dark accent
   ───────────────────────────────────────────── */

.BotonExcel,
button.BotonExcel,
.BotonExcel.dt-button,
.BotonExcel.dt-button.buttons-excel {
    background: var(--color, #0a0a0a) !important;
    color: var(--colort, #fafaf9) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 7px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    width: auto !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    margin-top: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    letter-spacing: 0.1px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.BotonExcel:hover,
button.BotonExcel:hover {
    background: var(--color2, #262626) !important;
    color: var(--colort, #fafaf9) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

.BotonExcel span {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--colort, #fafaf9) !important;
}

.botonExportarExcel { display: inline-block !important; margin-top: 4px !important; }
.botonExportarExcel h4 {
    background: var(--color, #0a0a0a) !important;
    color: var(--colort, #fafaf9) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    display: inline-block !important;
    transition: all 0.15s ease !important;
}
.botonExportarExcel h4:hover { background: var(--color2, #262626) !important; color: var(--colort, #fafaf9) !important; }

/* ─────────────────────────────────────────────
   36. COLUMN FILTER & HIDDEN COLUMNS
   ───────────────────────────────────────────── */

div[id="FiltroColumnasHilos"]:not(.BotonCambiarQueTabla),
div[style*="margin-top: 45px"] {
    margin-top: 10px !important;
}

#FiltroColumnasHilosList {
    margin-top: 10px !important;
    padding: 14px 18px !important;
    background: #fafaf9 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
}

#FiltroColumnasHilosList .control-group { margin-bottom: 4px !important; }
#FiltroColumnasHilosList label {
    font-size: 13px !important;
    color: #525252 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: color 0.1s ease !important;
}
#FiltroColumnasHilosList label:hover { color: #0a0a0a !important; }

#FiltrosSeleccionados { margin-top: 10px !important; }

#FiltrosSeleccionados .btn,
#FiltrosSeleccionados button,
#FiltrosSeleccionados .btn.btn-sm {
    background: #fafaf9 !important;
    color: #737373 !important;
    border: 1px dashed #d4d4d4 !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
}

#FiltrosSeleccionados .btn:hover,
#FiltrosSeleccionados button:hover {
    background: #f5f5f4 !important;
    border-color: #a3a3a3 !important;
    color: #0a0a0a !important;
    border-style: solid !important;
}

/* ─────────────────────────────────────────────
   37. DATA TABLE — refined grid
   ───────────────────────────────────────────── */

#DetalleRespuestas thead th,
#Respuestas thead th {
    background: #fafaf9 !important;
    color: #374151 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 8px 8px !important;
    border-bottom: 2px solid #e5e5e5 !important;
    border-top: none !important;
    white-space: nowrap !important;
}

#DetalleRespuestas tbody tr,
#Respuestas tbody tr {
    border: none !important;
    border-left: none !important;
}

#DetalleRespuestas tbody td,
#Respuestas tbody td {
    font-size: 12px !important;
    padding: 5px 8px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f5f5f4 !important;
    border-left: none !important;
    border-right: none !important;
    color: #262626 !important;
    transition: background-color 0.08s ease !important;
}

#DetalleRespuestas tbody tr:hover td,
#Respuestas tbody tr:hover td {
    background-color: #fafaf9 !important;
}

#DetalleRespuestas tbody tr td,
#Respuestas tbody tr td {
    background-color: #fff !important;
}
#Respuestas tbody tr:nth-child(odd) td {
    background-color: #f9fafb !important;
}

#Respuestas thead th.action-group-even { background: #f5f5f4 !important; }
#Respuestas thead th.action-group-border,
#Respuestas tbody td.action-group-border {
    border-right: 1px solid #f0f0f0 !important;
}

.dataTables_wrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

#DetalleRespuestas,
#Respuestas {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e5e5e5 !important;
}

/* Pagination — pills */
.dataTables_wrapper .dataTables_info {
    font-size: 12px !important;
    color: #a3a3a3 !important;
    padding: 14px 4px !important;
}

.dataTables_wrapper .dataTables_paginate { padding: 14px 0 !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
    color: #737373 !important;
    margin: 0 1px !important;
    transition: all 0.1s ease !important;
    background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--color, #0a0a0a) !important;
    color: var(--colort, #fafaf9) !important;
    border-color: var(--color, #0a0a0a) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f5f5f4 !important;
    border-color: #e5e5e5 !important;
    color: #0a0a0a !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    background: #fff !important;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    background: #fafaf9 !important;
    transition: all 0.15s ease !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--color, #29c178) !important;
    box-shadow: 0 0 0 3px var(--coloro2, rgba(41, 193, 120, 0.08)) !important;
    outline: none !important;
    background: #fff !important;
}

/* ─────────────────────────────────────────────
   38. BADGES & STATUS
   ───────────────────────────────────────────── */

.hiloid-link {
    background: none !important;
    color: #525252 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-family: 'DM Sans', ui-monospace, monospace !important;
    letter-spacing: 0.3px !important;
    border: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.hiloid-link:hover {
    background: none !important;
    color: #78716c !important;
    text-decoration: underline !important;
}

/* Hilo ID pill badges — plain label, not interactive */
.BarraPorcentaje0,
.BarraPorcentaje0.BotonOpcionesHilo,
p.BarraPorcentaje0,
p.BarraPorcentaje0.BotonOpcionesHilo,
[class*="BarraPorcentaje"] {
    background: #f5f5f4 !important;
    color: #525252 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    font-family: 'DM Sans', ui-monospace, monospace !important;
    letter-spacing: 0.3px !important;
    text-align: center !important;
    cursor: default !important;
    pointer-events: none !important;
}

[class*="BarraPorcentaje"]:hover {
    background: #f5f5f4 !important;
    color: #525252 !important;
}

/* Parent <a> wrapping hilo ID — kill clickability */
a[puntaje],
a[totalpuntaje],
a:has(> .BarraPorcentaje0),
a:has(> p.BarraPorcentaje0) {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Status badges — semantic color chips */
.ColorEstado0,
.ColorEstado1,
.ColorEstado2,
.ColorEstado3,
[class*="ColorEstado"] {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.5 !important;
}

/* En proceso — warm amber */
.ColorEstado0 {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

/* Completado — green */
.ColorEstado1 {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

/* Otros estados */
.ColorEstado2 {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

.ColorEstado3 {
    background: #f0f0f0 !important;
    color: #525252 !important;
    border: 1px solid #e5e5e5 !important;
}

td .badge,
td .label {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    letter-spacing: 0.2px !important;
    border: none !important;
}

.btn-hilo-action {
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    border: none !important;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
}

.btn-hilo-action:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.btn-hilo-ver {
    background: var(--color, #0a0a0a) !important;
    color: var(--colort, #fafaf9) !important;
}

.btn-hilo-pdf {
    background: #525252 !important;
    color: #fff !important;
}

.opciones-hilos-btns {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: center !important;
}

td.td-opciones-hilos {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
}

/* ─────────────────────────────────────────────
   39. HILO DETAIL — inline button bar
   ───────────────────────────────────────────── */

#EnviarHilo,
#DescargarHilo,
#EliminarHilo {
    width: auto !important;
    display: inline-block !important;
    margin-top: 4px !important;
    margin-right: 6px !important;
}

#EnviarHilo { background: transparent !important; }
#EnviarHilo .botonBotoneraTarea {
    background: var(--color, #0a0a0a) !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
}
#EnviarHilo .botonBotoneraTarea h4 {
    color: var(--colort, #fafaf9) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: transparent !important;
    margin: 0 !important; padding: 0 !important;
}
#EnviarHilo .botonBotoneraTarea:hover { background: var(--color2, #262626) !important; }

#DescargarHilo { background: transparent !important; }
#DescargarHilo .botonBotoneraTarea {
    background: #fff !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
}
#DescargarHilo .botonBotoneraTarea h4 {
    color: #525252 !important;
    font-size: 13px !important; font-weight: 500 !important;
    background: transparent !important;
    margin: 0 !important; padding: 0 !important;
}
#DescargarHilo .botonBotoneraTarea:hover { background: #fafaf9 !important; border-color: #a3a3a3 !important; }

#EliminarHilo { background: transparent !important; }
#EliminarHilo .botonBotoneraTarea {
    background: transparent !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
}
#EliminarHilo .botonBotoneraTarea h4 {
    color: #dc2626 !important;
    font-size: 13px !important; font-weight: 500 !important;
    background: transparent !important;
    margin: 0 !important; padding: 0 !important;
}
#EliminarHilo .botonBotoneraTarea:hover { background: #fef2f2 !important; border-color: #dc2626 !important; }

/* ─────────────────────────────────────────────
   40. OPTION BUTTONS & EDITOR SECTIONS
   ───────────────────────────────────────────── */

.BotonOpciones {
    background: #fafaf9 !important;
    color: #525252 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
}
.BotonOpciones:hover { background: #f5f5f4 !important; color: #0a0a0a !important; }

/* BotonEditarForzada — Editar/Eliminar buttons inside hilo response table.
   These are compact inline buttons in the Opciones column and checkpoint rows.
   Override the inflated .BotonOpciones styles for this specific context. */
.BotonEditarForzada {
    background: transparent !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    min-width: auto !important;
    width: auto !important;
    display: inline-block !important;
    margin: 1px 2px !important;
    line-height: 1.4 !important;
}
.BotonEditarForzada:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    border-color: #9ca3af !important;
}
/* Eliminar variant — subtle red hint */
a[onclick*="EliminarRespuestaForzada"] .BotonEditarForzada {
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}
a[onclick*="EliminarRespuestaForzada"] .BotonEditarForzada:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #dc2626 !important;
}

/* Checkpoint row — visual separator banner spanning full width via box-shadow */
.VerDetalleUsuario table.table-bordered tbody td.CheckCheckpoint,
.VerDetalleUsuario table.dataTable tbody td.CheckCheckpoint {
    background: #f0f9f6 !important;
    border-top: 2px solid var(--color, #29c178) !important;
    border-bottom: 2px solid var(--color, #29c178) !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--color, #29c178) !important;
}
.CheckCheckpoint .BotonEditarForzada,
.CheckCheckpoint .BotonOpciones.BotonEditarForzada {
    float: none !important;
    margin-top: 0 !important;
}

/* Opciones column in hilo detail table — layout the buttons inline */
td.CheckOpciones {
    white-space: nowrap !important;
}
td.CheckOpciones a {
    display: inline-block !important;
}

/* Formulario list action buttons — monochrome system */
.botonBotoneraTarea {
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
    text-decoration: none !important;
}

/* RESPUESTAS — primary brand-colored button (ID specificity beats formularios.css which loads later) */
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:first-child,
#listaTareas .TareaPrincipal .botoneraTareasCol12 > div:first-child .botonBotoneraTarea,
a.botonBotoneraTarea[onclick*="InformeTarea"] {
    background: var(--color, #0a0a0a) !important;
    color: var(--colort, #fafaf9) !important;
    border: 1px solid var(--color, #0a0a0a) !important;
}
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:first-child:hover,
#listaTareas .TareaPrincipal .botoneraTareasCol12 > div:first-child .botonBotoneraTarea:hover,
a.botonBotoneraTarea[onclick*="InformeTarea"]:hover {
    background: var(--color2, #262626) !important;
    border-color: var(--color2, #262626) !important;
}
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:first-child h4,
#listaTareas .TareaPrincipal .botoneraTareasCol12 > div:first-child .botonBotoneraTarea h4,
a.botonBotoneraTarea[onclick*="InformeTarea"] h4 {
    color: var(--colort, #fafaf9) !important;
    background: transparent !important;
    margin: 0 !important;
}

/* EDITAR — ghost outlined (ID specificity) */
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:nth-child(2),
#listaTareas .TareaPrincipal .botoneraTareasCol12 > div:nth-child(2) .botonBotoneraTarea,
a.botonBotoneraTarea[onclick*="EditarTarea"] {
    background: #fff !important;
    color: #525252 !important;
    border: 1px solid #d4d4d4 !important;
}
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:nth-child(2):hover,
#listaTareas .TareaPrincipal .botoneraTareasCol12 > div:nth-child(2) .botonBotoneraTarea:hover,
a.botonBotoneraTarea[onclick*="EditarTarea"]:hover {
    border-color: #0a0a0a !important;
    color: #0a0a0a !important;
}
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:nth-child(2) h4,
#listaTareas .TareaPrincipal .botoneraTareasCol12 > div:nth-child(2) .botonBotoneraTarea h4,
a.botonBotoneraTarea[onclick*="EditarTarea"] h4 {
    color: #525252 !important;
    background: transparent !important;
    margin: 0 !important;
}
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:nth-child(2):hover h4,
#listaTareas .TareaPrincipal .botoneraTareasCol12 > div:nth-child(2) .botonBotoneraTarea:hover h4,
a.botonBotoneraTarea[onclick*="EditarTarea"]:hover h4 {
    color: #0a0a0a !important;
}

/* ELIMINAR + DUPLICAR — text-only ghost buttons */
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:nth-child(3),
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:nth-child(4),
a.botonBotoneraTarea[onclick*="BorrarTarea"],
a.botonBotoneraTarea[onclick*="DuplicarTarea"] {
    background: transparent !important;
    color: #737373 !important;
    border: 1px solid transparent !important;
}
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:nth-child(3):hover,
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:nth-child(4):hover,
a.botonBotoneraTarea[onclick*="BorrarTarea"]:hover,
a.botonBotoneraTarea[onclick*="DuplicarTarea"]:hover {
    background: #f5f5f4 !important;
    color: #0a0a0a !important;
    border-color: #e5e5e5 !important;
}
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:nth-child(3) h4,
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:nth-child(4) h4,
a.botonBotoneraTarea[onclick*="BorrarTarea"] h4,
a.botonBotoneraTarea[onclick*="DuplicarTarea"] h4 {
    color: #737373 !important;
    background: transparent !important;
    margin: 0 !important;
}
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:nth-child(3):hover h4,
#listaTareas .TareaPrincipal .botoneraTareasCol12 > .botonBotoneraTarea:nth-child(4):hover h4,
a.botonBotoneraTarea[onclick*="BorrarTarea"]:hover h4,
a.botonBotoneraTarea[onclick*="DuplicarTarea"]:hover h4 {
    color: #0a0a0a !important;
}

.editarformularios-section-header,
.editar-section-title,
.TituloSeccion {
    background: #fafaf9 !important;
    color: #0a0a0a !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* ─────────────────────────────────────────────
   41. SORTABLE ITEMS & CREAR PROCESO
   ───────────────────────────────────────────── */

.sortable-item, .AccionItem, .accion-sortable {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin-bottom: 8px !important;
    transition: all 0.15s ease !important;
}
.sortable-item:hover, .AccionItem:hover, .accion-sortable:hover {
    border-color: #d4d4d4 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
.sortable-item .badge, .AccionItem .tipo-badge, .accion-sortable .tipo {
    background: #f5f5f4 !important;
    color: #737373 !important;
    border: none !important;
    font-size: 11px !important; font-weight: 500 !important;
    padding: 2px 8px !important; border-radius: 4px !important;
}

#AgregarTareaBoton, .btn-crear-proceso, .CrearTarea {
    background: var(--color, #0a0a0a) !important;
    color: var(--colort, #fafaf9) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important; font-size: 14px !important;
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}
#AgregarTareaBoton:hover, .btn-crear-proceso:hover, .CrearTarea:hover {
    background: var(--color2, #262626) !important;
    box-shadow: 0 4px 12px var(--coloro2, rgba(0, 0, 0, 0.08)) !important;
    transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────
   42. NAVIGATION & GENERAL
   ───────────────────────────────────────────── */

.site-menu-sub .site-menu-item.active > a {
    color: var(--color, #29c178) !important;
    background: var(--coloro2, rgba(41, 193, 120, 0.04)) !important;
    font-weight: 500 !important;
}

a:hover { opacity: 1 !important; }

.checkbox-custom:checked + .checkbox-custom-label::before,
input[type="checkbox"]:checked {
    border-color: var(--color, #29c178) !important;
    background-color: var(--color, #29c178) !important;
}

.empty-state, .no-data-message, .SinDatos {
    text-align: center !important; padding: 48px 24px !important;
    color: #a3a3a3 !important; font-size: 14px !important;
}

.nav-tabs > li > a {
    color: #737373 !important; font-weight: 500 !important; font-size: 13px !important;
    border: none !important; border-bottom: 2px solid transparent !important;
    padding: 10px 16px !important; transition: all 0.12s ease !important;
}
.nav-tabs > li > a:hover { color: #0a0a0a !important; background: transparent !important; border-bottom-color: #e5e5e5 !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--color, #0a0a0a) !important; border-bottom-color: var(--color, #0a0a0a) !important;
    background: transparent !important; font-weight: 600 !important;
}

.switchery > small { transition: all 0.15s ease !important; }

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { opacity: 0.3 !important; font-size: 10px !important; }
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { opacity: 0.7 !important; color: #0a0a0a !important; }

/* ─────────────────────────────────────────────
   43. IA CONFIG & MISC
   ───────────────────────────────────────────── */

.ia-config-header, .configuracion-ia-header,
#PasoConfigIA > .panel > .panel-heading {
    background: #fafaf9 !important; color: #0a0a0a !important;
    border: 1px solid #e5e5e5 !important; border-radius: 10px !important;
}

.ia-resumen-bar, .ResumenIA {
    background: #fafaf9 !important; color: #525252 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important; padding: 12px 18px !important; font-size: 13px !important;
}

.PorcentajesDiv { margin-bottom: 4px !important; }
.H3PorcentajesDiv {
    font-size: 11px !important; font-weight: 600 !important; color: #a3a3a3 !important;
    text-transform: uppercase !important; letter-spacing: 0.5px !important;
}

.columnas-ocultas-header {
    background: #fafaf9 !important; border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important; padding: 10px 16px !important;
    font-size: 12px !important; color: #737373 !important; font-weight: 500 !important;
}
.columnas-ocultas-header:hover { background: #f5f5f4 !important; color: #0a0a0a !important; }

td .badge, td .label, .badge[class*="bg-"], .label[class*="bg-"] {
    font-size: 11px !important; font-weight: 600 !important;
    padding: 3px 10px !important; border-radius: 6px !important;
    letter-spacing: 0.2px !important; border: none !important;
}

/* ─────────────────────────────────────────────
   44. FILTER CONTAINER — layout fix (consolidated)
   ───────────────────────────────────────────── */

#DivFiltros .col-sm-12 {
    padding: 0 !important;
    margin-bottom: 4px !important;
}

/* ─────────────────────────────────────────────
   45. HILO DETAIL VIEW — clean editorial layout
   ───────────────────────────────────────────── */

/* === 45.1 Container === */
.VerDetalleUsuario {
    padding: 0 24px 32px !important;
    background: #f8f8f7 !important;
}

/* === 45.1b Top bar — title + X, sticky === */
.VerDetalleUsuario > #DivFiltros {
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding: 10px 24px !important;
    min-height: 0 !important;
    align-items: center !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    margin-bottom: 0 !important;
}

/* === 45.2 Header title — inside the top bar === */
#TituloVerDetalleUsuarioH3 {
    margin: 0 !important;
    flex: 1 !important;
    order: -1 !important;
}
#TituloVerDetalleUsuarioH3 > strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.2px !important;
}

/* === 45.3 Metadata chips — inside title h3, below the strong === */
.hilo-detail-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 4px !important;
}

.hilo-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #737373 !important;
    line-height: 1.3 !important;
}
.hilo-meta-item + .hilo-meta-item::before {
    content: "·" !important;
    margin-right: 4px !important;
    color: #d4d4d4 !important;
    font-weight: 700 !important;
}

.hilo-meta-label {
    color: #a3a3a3 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    display: inline !important;
}

.hilo-meta-value {
    color: #525252 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace !important;
    display: inline !important;
}

/* === 45.4 Completion toggle — compact bar below top bar === */
.VerDetalleUsuario > div:has(#labelCompletado),
.VerDetalleUsuario > div:has(#inputCompletado) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 12px 0 16px !important;
}
.VerDetalleUsuario > div > label,
#labelCompletado {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #525252 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    vertical-align: middle !important;
}
.VerDetalleUsuario .switchery {
    vertical-align: middle !important;
    margin: 0 !important;
}

#labelCompletadoEstado {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 3px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

/* === 45.5 IA analysis placeholder === */
.VerDetalleUsuario .alert,
.VerDetalleUsuario [style*="background-color: #fff3cd"],
.VerDetalleUsuario .ia-notice {
    background: #fefce8 !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    color: #713f12 !important;
    font-size: 13px !important;
    margin: 0 0 16px !important;
}

.VerDetalleUsuario .ia-analisis-container {
    margin-bottom: 8px !important;
}

/* Hide "IA no configurado" message — if not configured, don't show anything */
.VerDetalleUsuario .ia-sin-analisis {
    display: none !important;
}

/* === 45.6 Section header card (OPERACIONES + date + buttons) === */
.VerDetalleUsuario .HILO {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
}

.VerDetalleUsuario .TituloTareaCompleta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 16px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #f5f5f4 !important;
    background: #fff !important;
}

/* Group name (e.g. "INSPECCIÓN OBRA") */
.VerDetalleUsuario .TituloTareaCompleta h3,
.VerDetalleUsuario .TituloTareaCompleta h3#NombreGrupo {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    flex: 0 0 auto !important;
}

/* Date */
.VerDetalleUsuario .TituloTareaCompleta p {
    font-size: 12px !important;
    color: #737373 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
}

.VerDetalleUsuario .TituloTareaCompleta p strong,
.VerDetalleUsuario .FechaTareaCompleta {
    font-weight: 500 !important;
    color: #525252 !important;
}

/* === 45.7 Action buttons in header === */
.VerDetalleUsuario #EnviarHilo,
.VerDetalleUsuario #DescargarHilo,
.VerDetalleUsuario #EliminarHilo {
    width: auto !important;
    display: inline-flex !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    flex: 0 0 auto !important;
}

/* All botonBotoneraTarea inside hilo detail — reset legacy */
.VerDetalleUsuario .botonBotoneraTarea {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

/* All h4 inside botonBotoneraTarea — kill legacy colored backgrounds */
.VerDetalleUsuario .botonBotoneraTarea h4 {
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    line-height: 1 !important;
}

/* Enviar — brand primary */
.VerDetalleUsuario #EnviarHilo .botonBotoneraTarea {
    background: var(--color, #0a0a0a) !important;
}
.VerDetalleUsuario #EnviarHilo .botonBotoneraTarea h4 {
    color: var(--colort, #fafaf9) !important;
    font-weight: 600 !important;
}
.VerDetalleUsuario #EnviarHilo .botonBotoneraTarea:hover {
    background: var(--color2, #262626) !important;
}

/* Descargar — outline */
.VerDetalleUsuario #DescargarHilo .botonBotoneraTarea {
    background: #fff !important;
    border: 1px solid #d4d4d4 !important;
}
.VerDetalleUsuario #DescargarHilo .botonBotoneraTarea h4 {
    color: #525252 !important;
}
.VerDetalleUsuario #DescargarHilo .botonBotoneraTarea:hover {
    border-color: #0a0a0a !important;
    background: #fafaf9 !important;
}
.VerDetalleUsuario #DescargarHilo .botonBotoneraTarea:hover h4 {
    color: #0a0a0a !important;
}

/* Eliminar — subtle danger, pushed to far right */
.VerDetalleUsuario #EliminarHilo {
    background: transparent !important;
    margin-left: auto !important;
}
.VerDetalleUsuario #EliminarHilo .botonBotoneraTarea {
    background: transparent !important;
    border: 1px solid #e5e5e5 !important;
}
.VerDetalleUsuario #EliminarHilo .botonBotoneraTarea h4 {
    color: #a3a3a3 !important;
}
.VerDetalleUsuario #EliminarHilo .botonBotoneraTarea:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
}
.VerDetalleUsuario #EliminarHilo .botonBotoneraTarea:hover h4 {
    color: #dc2626 !important;
}

/* === 45.8 Filter checkboxes — separated from content === */
.VerDetalleUsuario .FiltrosInforme {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 6px !important;
    padding: 8px 14px !important;
    margin: 0 0 12px !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 4px !important;
}

.VerDetalleUsuario .FiltrosInforme h4 {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #a3a3a3 !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    flex: 0 0 auto !important;
    background: transparent !important;
}

.VerDetalleUsuario .FiltrosInforme .control-group {
    float: none !important;
    display: inline-flex !important;
    margin: 0 !important;
}

.VerDetalleUsuario .FiltrosInforme .control.control-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    color: #525252 !important;
    font-weight: 400 !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 3px !important;
    padding: 3px 8px !important;
    padding-left: 8px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.1s ease !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    position: relative !important;
}

.VerDetalleUsuario .FiltrosInforme .control.control-checkbox:hover {
    border-color: #a3a3a3 !important;
}

/* Hide the custom indicator — use native checkbox instead */
.VerDetalleUsuario .FiltrosInforme .control_indicator {
    display: none !important;
}

/* Show native checkbox in filter area */
.VerDetalleUsuario .FiltrosInforme .control input[type="checkbox"] {
    position: relative !important;
    opacity: 1 !important;
    z-index: 1 !important;
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: var(--color, #29c178) !important;
    flex-shrink: 0 !important;
}

/* === 45.9 Excel download button === */
.VerDetalleUsuario .botonExportarExcel {
    display: inline-block !important;
    margin: 0 0 8px !important;
    padding: 0 14px 8px !important;
}

.VerDetalleUsuario .botonExportarExcel h4 {
    background: var(--color, #0a0a0a) !important;
    color: var(--colort, #fafaf9) !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: background 0.12s ease !important;
}

.VerDetalleUsuario .botonExportarExcel h4:hover {
    background: var(--color2, #262626) !important;
    color: var(--colort, #fafaf9) !important;
}

/* === 45.10 Responses table === */
.VerDetalleUsuario table.dataTable,
.VerDetalleUsuario table.table-bordered {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Override legacy TituloCelda gray background — bold headers */
.VerDetalleUsuario .TituloCelda,
.VerDetalleUsuario table.dataTable thead th,
.VerDetalleUsuario table.table-bordered thead th {
    background: #f9fafb !important;
    color: #374151 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 6px 10px !important;
    border-bottom: 2px solid #e5e5e5 !important;
    border-top: none !important;
}

.VerDetalleUsuario table.dataTable tbody td,
.VerDetalleUsuario table.table-bordered tbody td {
    padding: 5px 8px !important;
    border-bottom: 1px solid #f5f5f4 !important;
    font-size: 12px !important;
    color: #374151 !important;
    vertical-align: top !important;
    background: #fff !important;
}

.VerDetalleUsuario table.dataTable tbody tr:hover td {
    background: #fafaf9 !important;
}

/* === 45.11 Editar/Ver mapa buttons in table === */
.VerDetalleUsuario table .btn,
.VerDetalleUsuario table button:not(.btn-hilo-action) {
    background: #fff !important;
    color: #525252 !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 4px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
    margin-bottom: 4px !important;
    display: block !important;
    text-align: center !important;
}

.VerDetalleUsuario table .btn:hover,
.VerDetalleUsuario table button:not(.btn-hilo-action):hover {
    background: #f5f5f4 !important;
    border-color: #0a0a0a !important;
    color: #0a0a0a !important;
}

/* === 45.12 Filtrar label === */
.VerDetalleUsuario h4[style*="color"],
.VerDetalleUsuario .filtrar-excel-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #a3a3a3 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

/* === 45.13 Checkpoints timeline === */
.VerDetalleUsuario .timelineCheckpoints {
    margin: 16px 0 !important;
    padding: 0 18px !important;
}

/* ─────────────────────────────────────────────
   46. EDIT SECTION SELECTOR — SweetAlert2 override (issue #6)
   ───────────────────────────────────────────── */

/* Override SweetAlert2 popup — white card, not red */
.swal2-popup {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16) !important;
    padding: 32px !important;
}

.swal2-title {
    color: #0a0a0a !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 24px !important;
}

/* Backdrop — dark blur, not red */
.swal2-container.swal2-backdrop-show {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
}

/* Step option cards */
.step.StepBotones,
.swal2-html-container .step {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
}

.step.StepBotones:hover,
.swal2-html-container .step:hover {
    background: #f9fafb !important;
    border-color: var(--color, #29c178) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px) !important;
}

/* Step number badge */
.step .step-number,
.swal2-html-container .step-number {
    background: var(--color, #0a0a0a) !important;
    color: var(--colort, #fff) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    margin-right: 14px !important;
}

/* Step title */
.step .step-title,
.swal2-html-container .step-title {
    color: #0a0a0a !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: block !important;
}

/* Step description */
.step .DetalleStep,
.swal2-html-container .DetalleStep {
    color: #737373 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin: 2px 0 0 !important;
    opacity: 1 !important;
}

/* Cancel button in SweetAlert — high specificity to beat MyCss.css */
body .swal2-container .swal2-popup .swal2-actions .swal2-cancel,
body .swal2-container .swal2-popup .swal2-actions .swal2-styled.swal2-cancel {
    background: #f5f5f4 !important;
    color: #525252 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.12s ease !important;
}

body .swal2-container .swal2-popup .swal2-actions .swal2-cancel:hover,
body .swal2-container .swal2-popup .swal2-actions .swal2-styled.swal2-cancel:hover {
    background: #e5e5e5 !important;
    color: #0a0a0a !important;
    border: 1px solid #d4d4d4 !important;
}

/* Confirm button in SweetAlert — high specificity to beat MyCss.css */
body .swal2-container .swal2-popup .swal2-actions .swal2-confirm,
body .swal2-container .swal2-popup .swal2-actions .swal2-styled.swal2-confirm {
    background: var(--color, #0a0a0a) !important;
    color: var(--colort, #fafaf9) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.12s ease !important;
}

body .swal2-container .swal2-popup .swal2-actions .swal2-confirm:hover,
body .swal2-container .swal2-popup .swal2-actions .swal2-styled.swal2-confirm:hover {
    background: #374151 !important;
    color: #fff !important;
    border: none !important;
    filter: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ─────────────────────────────────────────────
   47. PROCESS LIST — refined cards (issue #7)
   ───────────────────────────────────────────── */

/* Process card container */
.TareaPrincipal {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin-bottom: 8px !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
}

.TareaPrincipal:hover {
    border-color: #d4d4d4 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Process name */
.TareaPrincipal h3,
.TareaPrincipal .NombreTarea {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0a0a0a !important;
    margin: 0 !important;
    flex: 1 !important;
}

/* Process icon placeholder — clean circle */
.TareaPrincipal .iconTarea,
.TareaPrincipal > div:first-child > div:first-child {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: #f5f5f4 !important;
    border: 1px solid #e5e5e5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-right: 14px !important;
    color: #a3a3a3 !important;
    font-size: 14px !important;
}

/* Buttons row alignment */
.botoneraTareasCol12 {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

/* Area/group title */
.TituloProceso, .NombreArea {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #a3a3a3 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 20px 0 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f5f5f4 !important;
}

/* ─────────────────────────────────────────────
   48. COLUMN FILTER PANEL — #FiltroColumnas
   ───────────────────────────────────────────── */

#FiltroColumnas {
    margin-top: 16px !important;
    padding: 14px 18px !important;
    background: #fafaf9 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 16px !important;
}

#FiltroColumnas > h4 {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #737373 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

#FiltroColumnas .control-group {
    margin: 0 !important;
}

#FiltroColumnas .control.control-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 12.5px !important;
    color: #525252 !important;
    font-weight: 400 !important;
    transition: all 0.12s ease !important;
    position: relative !important;
    min-height: unset !important;
    padding-left: 10px !important;
}

#FiltroColumnas .control.control-checkbox:hover {
    background: #f0f0f0 !important;
    color: #0a0a0a !important;
}

/* Hide legacy custom indicator, use native checkbox */
#FiltroColumnas .control_indicator {
    display: none !important;
}

#FiltroColumnas .control.control-checkbox input[type="checkbox"] {
    position: relative !important;
    z-index: 1 !important;
    opacity: 1 !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: var(--color, #0a0a0a) !important;
    flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────
   49. EMPTY TABLE STATE
   ───────────────────────────────────────────── */

#DetalleRespuestas .dataTables_empty,
#DetalleRespuestas td.dataTables_empty,
#Respuestas .dataTables_empty,
#Respuestas td.dataTables_empty {
    padding: 40px 20px !important;
    text-align: center !important;
    color: #a3a3a3 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    background: #fafaf9 !important;
    border-bottom: none !important;
}

/* ─────────────────────────────────────────────
   50. TOOLBAR LAYOUT FIX — spacing between toggle + excel + filter
   ───────────────────────────────────────────── */

#TituloCambiarTipoDeTabla + .BotonCambiarQueTabla,
.BotonCambiarQueTabla + .BotonExcel {
    vertical-align: middle !important;
}

.BotonExcel {
    margin-top: 0 !important;
    margin-left: 12px !important;
    vertical-align: middle !important;
}

/* ─────────────────────────────────────────────
   51. PRINT
   ───────────────────────────────────────────── */

@media print {
    #DivFiltros { display: none !important; }
    .panel { box-shadow: none !important; border: 1px solid #e5e5e5 !important; }
}