/* dark-mode-welcome.css */
/* Modal de bienvenida novedoso */
:root {
     --welcome-primary: #6366f1;
     --welcome-secondary: #8b5cf6;
     --welcome-accent: #ec4899;
 }
 
 /* ============================================
   TEMA OSCURO PARA BOOTSTRAP 4.6
   ============================================ */

 /* Clase principal */
 .dark-mode {
     background-color: var(--dark-bg-primary);
     color: var(--dark-text-primary);
 }

 .dark-mode #content-page {
     background-color: var(--dark-bg-primary) !important;
     color: var(--dark-text-primary) !important;
 }

 .dark-mode #app {
     background-color: var(--dark-bg-primary) !important;
     color: var(--dark-text-primary) !important;
 }

 .dark-mode #loading_page {
     background-color: #000000 !important;
 }

 .dark-mode #loader {
     background-color: var(--dark-bg-secondary) !important;
     opacity: 0.9;
     color: var(--dark-text-primary) !important;
 }
 
 .dark-mode .content-principal {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
 }
 .dark-mode .iq-sub-dropdown {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
 }
 .dark-mode .search-box-intelligent {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
 }
 .dark-mode .search-box-intelligent input    {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
     border-bottom: 1px solid var(--dark-bg-tertiary) !important;
 }
 
 .dark-mode .iq-top-navbar {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
 }
 
 .dark-mode .search-results {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
 }

 .dark-mode .sb-nav-link {
     color: var(--dark-text-primary) !important;
 }

 .dark-mode .font-sepanka {
     color: var(--dark-text-primary) !important;
 }

 .dark-mode .text-blue, .dark-mode .text-company-primary {
     color: var(--dark-text-primary) !important;
 }

 .dark-mode .sb-nav-link:hover {
     background-color: var(--dark-bg-tertiary) !important;
     color: var(--dark-text-primary) !important;
 }
 .dark-mode .results-list li:hover {
     background-color: var(--dark-bg-tertiary) !important;
     color: var(--dark-text-primary) !important;
 }


 .dark-mode .navbar-list li .iq-sub-dropdown .iq-sub-card:hover{
     background-color: var(--dark-bg-tertiary) !important;
     color: var(--dark-text-primary) !important;
 }




 .dark-mode .nav-divider {
     background-color: var(--dark-bg-tertiary) !important;
 }

 .dark-mode .sb-collapse {
     border-left: 1px solid var(--dark-bg-tertiary) !important;
 }

 .dark-mode #MenuInternalId {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
 }
 .dark-mode .sb-nav-pills-submenu {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
 }

 .dark-mode .employee-data-banner {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
 }


/*
LINEAS Y SALTOS DE PAGINA Y BORDERS
 */
 .dark-mode .hr-company-secondary {
     border: 2px solid var(--dark-bg-tertiary)  !important;
 }

 .dark-mode .bb-sepanka {
     border: 2px solid var(--dark-bg-tertiary)  !important;
 }

 .dark-mode hr {
     border: 2px solid var(--dark-bg-tertiary)  !important;
 }




 /*
 INPUTS Y BOTONES
 */
 .dark-mode .bg-lightgray {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
 }

 .dark-mode .btn-light {
     background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
 }

.dark-mode .bg-check {
     background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
 }



 /*
 FIN INPUTS Y BOTONES
 */



 /* ========== TABLAS ========== */
    .dark-mode .table {
        color: var(--dark-text-primary);
        background-color: var(--dark-table);
    }

    
    .dark-mode .thead-sepanka {
        background-color: var(--dark-table-head) !important;
        color: var(--dark-text-primary) !important;
    }
    
    .dark-mode .bg-sepanka {
        background-color: var(--dark-table-head) !important;
        color: var(--dark-text-primary) !important;
    }

    .dark-mode .bg-blue {
        background-color: var(--dark-table-head) !important;
        color: var(--dark-text-primary) !important;
    }
    .dark-mode .bg-company-primary {
        background-color: var(--dark-table-head) !important;
        color: var(--dark-text-primary) !important;
    }
    .dark-mode .bg-company-secondary {
        background-color: var(--dark-table-head) !important;
        color: var(--dark-text-primary) !important;
    }

    .dark-mode .blue_header {
        background-color: var(--dark-table-head) !important;
        color: var(--dark-text-primary) !important;
    }

    .dark-mode .thead-sepanka2 {
        background-color: var(--dark-table-columns) !important;
        color: var(--dark-text-primary) !important;
    }
    .dark-mode .bg-sepanka2,
    .dark-mode .card-header.bg-primary{
        background-color: var(--dark-table-columns) !important;
        color: var(--dark-text-primary) !important;
    }

    .dark-mode .bg-lightblue{
        background-color: var(--dark-table-columns) !important;
        color: var(--dark-text-primary) !important;
    }

    .dark-mode .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .dark-mode .table,
    .dark-mode .table-bordered,
    .dark-mode .table-bordered td,
    .dark-mode .table-bordered th {
        border-color: var(--dark-border) !important;
    }
    .dark-mode .table tbody tr td {
        border-color: var(--dark-border) !important;
    }

    .dark-mode .table thead tr th {
        border-color: var(--dark-border) !important;
    }
    
    .dark-mode .table thead tr {
        border-color: var(--dark-border) !important;
    }
    

    .dark-mode .table-sepanka th, td{
        border-color: var(--dark-border) !important;

    }

    .dark-mode .table-hover tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--dark-text-primary); ;
    }

    .dark-mode .table.dataTable.table-striped.DTFC_Cloned tbody {
        
        background-color: var(--dark-table) !important;
        color: var(--dark-text-primary) !important;

    }
    .dark-mode .dt_group {
        
        background-color: var(--dark-bg-secondary) !important;
        color: var(--dark-text-primary) !important;

    }
    .dark-mode table.dataTable tr.dtrg-group td {
        
        background-color: var(--dark-bg-secondary) !important;
        color: var(--dark-text-primary) !important;

    } 
    .dark-mode .table-secondary, .table-secondary>th, .table-secondary>td {
        
        background-color: var(--dark-bg-secondary) !important;
        color: var(--dark-text-primary) !important;

    }
    .dark-mode table.DTFC_Cloned tr {
        
        background-color: var(--dark-table) !important;
        color: var(--dark-text-primary) !important;

    }
    .dark-mode .bd-callout {
        border-color: var(--dark-border)  !important;
    }




 .dark-mode .iq-submenu {
     background-color: var(--dark-bg-secondary) !important;
 }



 .dark-mode .iq-sidebar-logo {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
 }
 
 .dark-mode .navbar-list li .iq-sub-dropdown .iq-sub-card {
     border-bottom: 1px solid var(--dark-bg-secondary) !important;
 }
 
 .dark-mode .iq-sidebar-menu .iq-menu li a {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
 }
 
 /* ========== FONDOS Y TEXTOS BASE ========== */
 .dark-mode .sb-nav-link.active {
     background-color: var(--dark-bg-tertiary) !important;
     color: var(--dark-text-primary) !important;
 }
 .dark-mode .bg-light {
     background-color: var(--dark-bg-tertiary) !important;
 }
 
 .dark-mode .bg-white {
     background-color: var(--dark-bg-secondary) !important;
     color: var(--dark-text-primary) !important;
 }
 
 .dark-mode .bg-dark {
     background-color: #000000 !important;
 }
 
 
 .dark-mode .bg-client-gray {
     background-color: var(--dark-table-columns) !important;
     border-radius: 0px 10px 10px 0px;
 }
 
 .dark-mode .img-promotion {
    border-radius: 10px 0px 0px 10px;
 }


 .dark-mode .bg-client-gray .bg-blue  {
    border-radius: 0px 10px 0px 0px;
 }
 
 .dark-mode .text-dark {
     color: var(--dark-text-primary) !important;
 }
.dark-mode .tree-indicator.fas.fa-users {
    color: var(--dark-text-secondary) !important;
}

 
.dark-mode .tree-indicator.fas.fa-users.text-white {
    color: transparent !important;
}

 .dark-mode .icon-color-header {
     color: var(--dark-text-primary) !important;
 }
 
 .dark-mode .text-muted {
     color: var(--dark-text-secondary) !important;
 }
 
 .   .text-black-50 {
     color: rgba(255, 255, 255, 0.5) !important;
 }
 
 /* ========== CARDS ========== */
 .dark-mode .card,
 .dark-mode .card-header,
 .dark-mode .card-footer {
     background-color: var(--dark-bg-secondary) !important;
     border-color: var(--dark-border) ;
 }
 
 .dark-mode .iq-card,
 .dark-mode .cardx,
 .dark-mode .cardx .card-header {
     background-color: #1e2027 !important;
     border-color: var(--dark-border) ;
 }
 
 /* ========== MODALES ========== */
 .dark-mode .modal-content {
     background-color: var(--dark-bg-secondary);
     border-color: var(--dark-border);
 }

 .dark-mode .modal .modal-dialog .modal-content .modal-header{
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border) !important;

 }
 
 .dark-mode .modal-header,
 .dark-mode .modal-footer {
     border-color: var(--dark-border);
 }
 
 .dark-mode .close {
     color: var(--dark-text-primary);
 }
 
 /* ========== FORMULARIOS ========== */
 .dark-mode .form-control,
 .dark-mode .input-group-text,
 .dark-mode .custom-file-input,
 .dark-mode .custom-file-label,
 .dark-mode textarea {
     background-color: var(--dark-bg-tertiary);
     border-color: var(--dark-border);
     color: var(--dark-text-primary);
 }
 
 .dark-mode .form-control:focus {
     background-color: var(--dark-bg-tertiary);
     color: var(--dark-text-primary);
     border-color: #007bff;
 }
 
 .dark-mode .form-control::placeholder {
     color: var(--dark-text-secondary);
 }
 
 /* ========== BOTONES ========== */
 .dark-mode .btn-secondary {
     background-color: var(--dark-bg-tertiary);
     border-color: var(--dark-border);
     color: var(--dark-text-primary);
 }
 
 .dark-mode .btn-outline-secondary {
     border-color: var(--dark-border);
     color: var(--dark-text-primary);
 }
 
 .dark-mode .btn-outline-secondary:hover {
     background-color: var(--dark-bg-tertiary);
 }
 
 /* ========== DROPDOWNS ========== */
 .dark-mode .dropdown-menu {
     background-color: var(--dark-bg-tertiary);
     border-color: var(--dark-border);
 }
 
 .dark-mode .dropdown-item {
     color: var(--dark-text-primary);
 }
 
 .dark-mode .dropdown-item:hover {
     background-color: var(--dark-bg-secondary);
     color: var(--dark-text-primary);
 }
 
 .dark-mode .dropdown-item.active, .dropdown-item:active {
     background-color: var(--dark-bg-secondary);
     color: var(--dark-text-primary);
 }
 
 .dark-mode label {
    font-weight: 500 !important;
 }
 
 .dark-mode .dropdown-divider {
     border-color: var(--dark-border);
 }
 
 /* ========== NAVEGACIÓN ========== */
 .dark-mode .navbar-light .navbar-brand,
 .dark-mode .navbar-light .navbar-nav .nav-link {
     color: var(--dark-text-primary);
 }
 
 .dark-mode .navbar-light .navbar-nav .nav-link:hover {
     color: #007bff;
 }
 
 .dark-mode .navbar-light .navbar-toggler {
     border-color: var(--dark-border);
 }
 
 /* ========== LISTAS ========== */
 .dark-mode .list-group-item {
     background-color: var(--dark-bg-secondary);
     border-color: var(--dark-border);
     color: var(--dark-text-primary);
 }
 
 .dark-mode .list-group-item-action:hover {
     background-color: var(--dark-bg-tertiary);
 }
 
 /* ========== ALERTAS ========== */
 .dark-mode .alert-primary {
     background-color: #004085;
     border-color: #002752;
     color: #cce5ff;
 }
 
 .dark-mode .alert-success {
     background-color: #0c3b1f;
     border-color: #071a0e;
     color: #d4edda;
 }
 
 .dark-mode .alert-danger {
     background-color: #721c24;
     border-color: #491217;
     color: #f8d7da;
 }
 
 .dark-mode .alert-warning {
     background-color: #856404;
     border-color: #533f03;
     color: #fff3cd;
 }
 
 .dark-mode .alert-info {
     background-color: #0c5460;
     border-color: #062c33;
     color: #d1ecf1;
 }
 
 /* ========== PROGRESS BARS ========== */
 .dark-mode .progress {
     background-color: var(--dark-bg-tertiary);
 }
 
 /* ========== PAGINACIÓN ========== */
 .dark-mode .page-link {
     background-color: var(--dark-bg-tertiary);
     border-color: var(--dark-border);
     color: var(--dark-text-primary);
 }
 
 .dark-mode .page-link:hover {
     background-color: var(--dark-bg-secondary);
 }
 
 .dark-mode .page-item.disabled .page-link {
     background-color: var(--dark-bg-tertiary);
     color: var(--dark-text-secondary);
 }
 
 /* ========== BADGES ========== */
 .dark-mode .badge-light {
     background-color: var(--dark-bg-tertiary);
     color: var(--dark-text-primary);
 }
 
 .dark-mode .badge-dark {
     background-color: #000;
 }
 
 /* ========== TOOLTIPS & POPOVERS ========== */
 .dark-mode .tooltip-inner {
     background-color: var(--dark-bg-tertiary);
     color: var(--dark-text-primary);
 }
 
 .dark-mode .popover {
     background-color: var(--dark-bg-tertiary);
     border-color: var(--dark-border);
 }
 
 .dark-mode .popover-header {
     background-color: var(--dark-bg-secondary);
     border-color: var(--dark-border);
     color: var(--dark-text-primary);
 }
 
 .dark-mode .popover-body {
     color: var(--dark-text-primary);
 }
 
 .dark-mode .bs-popover-top .arrow::after,
 .dark-mode .bs-popover-auto[x-placement^="top"] .arrow::after {
     border-top-color: var(--dark-bg-tertiary);
 }
 
 /* ========== JUMBOTRON ========== */
 .dark-mode .jumbotron {
     background-color: var(--dark-bg-secondary);
 }
 
 /* ========== INPUT GROUPS ========== */
 .dark-mode .input-group-text {
     background-color: var(--dark-bg-tertiary);
 }
 
 /* ========== BREADCRUMB ========== */
 .dark-mode .breadcrumb {
     background-color: var(--dark-bg-tertiary);
 }
 
 .dark-mode .breadcrumb-item.active {
     color: var(--dark-text-secondary);
 }
 
 /* ========== CUSTOM SELECT ========== */
 .dark-mode .custom-select {
     background-color: var(--dark-bg-tertiary);
     border-color: var(--dark-border);
     color: var(--dark-text-primary);
 }
 
 /* ========== CUSTOM CHECKBOX/RADIO ========== */
 .dark-mode .custom-control-label::before {
     background-color: var(--dark-bg-tertiary);
     border-color: var(--dark-border);
 }

 /* Contenedor del modal */
 .dark-welcome-modal .modal-content {
     background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 100%);
     border: none;
     border-radius: 32px;
     overflow: hidden;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     position: relative;
 }
 
 .dark-mode .dark-welcome-modal .modal-content {
     background: linear-gradient(135deg, rgba(30, 30, 40, 0.98) 0%, rgba(20, 20, 30, 0.98) 100%);
 }
 
 /* Efecto de borde animado */
 .dark-welcome-modal .modal-content::before {
     content: '';
     position: absolute;
     inset: -2px;
     background: linear-gradient(45deg, var(--welcome-primary), var(--welcome-secondary), var(--welcome-accent), var(--welcome-primary));
     background-size: 300%;
     border-radius: 32px;
     z-index: -1;
     animation: borderGlow 6s linear infinite;
     opacity: 0;
     transition: opacity 0.3s ease;
 }
 
 .dark-welcome-modal.show .modal-content::before {
     opacity: 1;
 }
 
 @keyframes borderGlow {
     0% { background-position: 0% 50%; }
     50% { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
 }
 
 /* Header con icono animado */
 .dark-welcome-header {
     text-align: center;
     padding: 25px 40px 0 40px;
     position: relative;
 }
 
 .dark-welcome-icon {
     font-size: 80px;
     animation: iconFloat 3s ease-in-out infinite;
     display: inline-block;
     filter: drop-shadow(0 10px 20px rgba(99, 102, 241, 0.3));
 }
 
 @keyframes iconFloat {
     0%, 100% { transform: translateY(0) rotate(0deg); }
     50% { transform: translateY(-10px) rotate(5deg); }
 }
 
 /* Círculos decorativos */
 .dark-welcome-bg-decoration {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     pointer-events: none;
 }
 
 .circle {
     position: absolute;
     background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0) 70%);
     border-radius: 50%;
     animation: pulse 4s ease-in-out infinite;
 }
 
 .circle-1 {
     width: 200px;
     height: 200px;
     top: -100px;
     right: -50px;
 }
 
 .circle-2 {
     width: 150px;
     height: 150px;
     bottom: -50px;
     left: -50px;
     animation-delay: 1s;
 }
 
 .circle-3 {
     width: 100px;
     height: 100px;
     top: 50%;
     left: 20%;
     animation-delay: 2s;
 }
 
 @keyframes pulse {
     0%, 100% { transform: scale(1); opacity: 0.3; }
     50% { transform: scale(1.2); opacity: 0.6; }
 }
 
 /* Body del modal */
 .dark-welcome-body {
     padding: 30px 40px;
     text-align: center;
 }
 
 .dark-welcome-title {
     font-size: 32px;
     font-weight: 800;
     background: linear-gradient(135deg, var(--welcome-primary), var(--welcome-secondary), var(--welcome-accent));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 12px;
     letter-spacing: -0.5px;
 }
 
 .dark-welcome-subtitle {
     font-size: 16px;
     color: #6b7280;
     margin-bottom: 32px;
     line-height: 1.5;
 }
 
 .dark-mode .dark-welcome-subtitle {
     color: #9ca3af;
 }
 
 /* Ventajas del modo oscuro */
 .dark-welcome-advantages {
     display: flex;
     justify-content: space-between;
     gap: 20px;
     margin-bottom: 32px;
 }
 
 .advantage-card {
     flex: 1;
     background: rgba(99, 102, 241, 0.05);
     border-radius: 20px;
     padding: 20px 12px;
     transition: all 0.3s ease;
     cursor: pointer;
     animation: cardFadeIn 0.5s ease-out backwards;
 }
 
 .advantage-card:nth-child(1) { animation-delay: 0.1s; }
 .advantage-card:nth-child(2) { animation-delay: 0.2s; }
 .advantage-card:nth-child(3) { animation-delay: 0.3s; }
 
 @keyframes cardFadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 .advantage-card:hover {
     transform: translateY(-5px);
     background: rgba(99, 102, 241, 0.1);
 }
 
 .advantage-icon {
     font-size: 36px;
     display: block;
     margin-bottom: 12px;
 }
 
 .advantage-title {
     font-weight: 700;
     font-size: 16px;
     margin-bottom: 6px;
     color: #1f2937;
 }
 
 .dark-mode .advantage-title {
     color: #f3f4f6;
 }
 
 .advantage-desc {
     font-size: 12px;
     color: #6b7280;
 }
 
 .dark-mode .advantage-desc {
     color: #9ca3af;
 }
 
 /* Preview interactivo */
 .dark-welcome-preview {
     background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
     border-radius: 24px;
     padding: 20px;
     margin-bottom: 32px;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }
 
 .dark-mode .dark-welcome-preview {
     background: linear-gradient(135deg, #1f2937, #111827);
 }
 
 .dark-welcome-preview:hover {
     transform: scale(1.02);
 }
 
 .preview-badge {
     position: absolute;
     top: 10px;
     right: 10px;
     background: rgba(99, 102, 241, 0.9);
     color: white;
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 600;
     backdrop-filter: blur(10px);
 }
 
 .preview-content {
     display: flex;
     gap: 12px;
     align-items: center;
 }
 
 .preview-avatar {
     width: 40px;
     height: 40px;
     background: linear-gradient(135deg, var(--welcome-primary), var(--welcome-secondary));
     border-radius: 50%;
     animation: avatarPulse 2s ease-in-out infinite;
 }
 
 @keyframes avatarPulse {
     0%, 100% { transform: scale(1); }
     50% { transform: scale(1.05); }
 }
 
 .preview-text {
     flex: 1;
 }
 
 .preview-line {
     height: 8px;
     background: #9ca3af;
     border-radius: 4px;
     margin-bottom: 8px;
     animation: lineShimmer 1.5s ease-in-out infinite;
 }
 
 .preview-line.short {
     width: 60%;
 }
 
 .preview-line.long {
     width: 100%;
 }
 
 .preview-line.medium {
     width: 80%;
 }
 
 @keyframes lineShimmer {
     0% { opacity: 0.4; }
     50% { opacity: 0.7; }
     100% { opacity: 0.4; }
 }
 
 .dark-mode .preview-line {
     background: #4b5563;
 }
 
 .dark-mode .card-none-bg {
     background: none !important;
 }
 
 /* Botones */
 .dark-welcome-buttons {
     display: flex;
     gap: 16px;
     justify-content: center;
     margin-bottom: 0px;
 }
 
 .btn-welcome-primary {
     background: linear-gradient(135deg, var(--welcome-primary), var(--welcome-secondary));
     color: white;
     border: none;
     padding: 12px 32px;
     border-radius: 40px;
     font-weight: 600;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     flex: 1;
 }
 
 .btn-welcome-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.4);
     color: white;
 }
 
 .btn-welcome-primary:active {
     transform: translateY(0);
 }
 
 .btn-welcome-primary::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     transition: width 0.4s, height 0.4s;
 }
 
 .btn-welcome-primary:active::after {
     width: 200px;
     height: 200px;
 }
 
 .btn-welcome-secondary {
     background: transparent;
     border: 2px solid #e5e7eb;
     color: #4b5563;
     padding: 12px 32px;
     border-radius: 40px;
     font-weight: 600;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     flex: 1;
 }
 
 .btn-welcome-secondary:hover {
     border-color: var(--welcome-primary);
     color: var(--welcome-primary);
     transform: translateY(-2px);
 }
 
 .dark-mode .btn-welcome-secondary {
     border-color: #374151;
     color: #9ca3af;
 }
 
 .dark-mode .btn-welcome-secondary:hover {
     border-color: var(--welcome-primary);
     color: var(--welcome-primary);
 }
 
 /* Checkbox */
 .dark-welcome-checkbox {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     cursor: pointer;
 }
 
 .dark-welcome-checkbox input {
     width: 18px;
     height: 18px;
     cursor: pointer;
     accent-color: var(--welcome-primary);
 }
 
 .dark-welcome-checkbox label {
     margin: 0;
     font-size: 13px;
     color: #6b7280;
     cursor: pointer;
 }
 
 .dark-mode .dark-welcome-checkbox label {
     color: #9ca3af;
 }
 
 /* Footer */
 .dark-welcome-footer {
     padding: 16px 40px 24px;
     text-align: center;
     border-top: 1px solid #e5e7eb;
     background: rgba(0, 0, 0, 0.02);
 }
 
 .dark-mode .dark-welcome-footer {
     border-top-color: #374151;
     background: rgba(255, 255, 255, 0.02);
 }
 
 .dark-welcome-footer small {
     font-size: 12px;
     color: #9ca3af;
 }
 
 /* Responsive */
 @media (max-width: 640px) {
     .dark-welcome-body {
         padding: 20px 24px;
     }
     
     .dark-welcome-header {
         padding: 30px 24px 0;
     }
     
     .dark-welcome-icon {
         font-size: 60px;
     }
     
     .dark-welcome-title {
         font-size: 24px;
     }
     
     .dark-welcome-advantages {
         flex-direction: column;
         gap: 12px;
     }
     
     .advantage-card {
         display: flex;
         align-items: center;
         text-align: left;
         gap: 16px;
         padding: 16px;
     }
     
     .advantage-icon {
         margin-bottom: 0;
         font-size: 28px;
     }
     
     .advantage-text {
         flex: 1;
     }
     
     .advantage-title {
         margin-bottom: 2px;
     }
     
     .dark-welcome-buttons {
         flex-direction: column;
     }
     
     .dark-welcome-footer {
         padding: 16px 24px 20px;
     }
 }
 
 /* Cuando el body tiene la clase dark-mode, aplicar estilos oscuros a Swal */
.dark-mode .swal2-popup {
    background: #1e1e2f !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
  }
  
  .dark-mode .swal2-title {
    color: #e0e0e0 !important;
  }
  
  .dark-mode .swal2-html-container {
    color: #b0b0b0 !important;
  }
  
  .dark-mode .swal2-input,
  .dark-mode .swal2-textarea,
  .dark-mode .swal2-select {
    background: #2d2d3f !important;
    color: #ffffff !important;
    border: 1px solid #3d3d4f !important;
    border-radius: 8px !important;
  }
  
  .dark-mode .swal2-input:focus {
    border-color: #4a90e2 !important;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2) !important;
  }
  
  .dark-mode .swal2-validation-message {
    background: #2d2d3f !important;
    color: #ff6b6b !important;
  }
  
  .dark-mode .swal2-footer {
    border-top-color: #3d3d4f !important;
    color: #888888 !important;
  }
  
  /* Botones */
  .dark-mode .swal2-confirm {
    background-color: #4a90e2 !important;
    color: white !important;
    border-radius: 8px !important;
  }
  
  .dark-mode .swal2-cancel {
    background-color: #2d2d3f !important;
    color: #e0e0e0 !important;
    border: 1px solid #3d3d4f !important;
    border-radius: 8px !important;
  }
  
  .dark-mode .swal2-cancel:hover {
    background-color: #3d3d4f !important;
  }
  
  /* Iconos */
  .dark-mode .swal2-icon.swal2-success {
    border-color: #4caf50 !important;
    color: #4caf50 !important;
  }
  
  .dark-mode .swal2-icon.swal2-error {
    border-color: #f44336 !important;
    color: #f44336 !important;
  }
  
  .dark-mode .swal2-icon.swal2-warning {
    border-color: #ff9800 !important;
    color: #ff9800 !important;
  }
  
  .dark-mode .swal2-icon.swal2-info {
    border-color: #2196f3 !important;
    color: #2196f3 !important;
  }
  
  .dark-mode .swal2-icon.swal2-question {
    border-color: #9c27b0 !important;
    color: #9c27b0 !important;
  }
  
  /* Loading spinner */
  .dark-mode .swal2-loader {
    border-color: #4a90e2 transparent #4a90e2 transparent !important;
  }
  
  /* Close button */
  .dark-mode .swal2-close {
    color: #e0e0e0 !important;
  }
  
  .dark-mode .swal2-close:hover {
    color: #ffffff !important;
  }
  
  /* Timeline (si usas timer) */
  .dark-mode .swal2-timer-progress-bar {
    background: #4a90e2 !important;
  }