/* ==========================================================================
           1. VARIABLES GLOBALES Y PALETA CORPORATIVA AE NEXT
           ========================================================================== */
        :root {
            --verde-oscuro: #0e5155;
            --verde-claro: #147379;
            --amarillo: #ffc20e;
            --verde-esmeralda: #2e9a73;
            --blanco: #ffffff;
            --negro: #0f172a;
            --gris-fondo: #f1f5f9;
            --gris-texto: #64748b;
            --gris-borde: #e2e8f0;
            --rojo-alerta: #ef4444;
            --azul-info: #0ea5e9;
            --sombra-suave: 0 4px 15px rgba(0, 0, 0, 0.03);
            --sombra-hover: 0 10px 30px rgba(14, 81, 85, 0.12);
            --sombra-fuerte: 0 20px 40px rgba(0, 0, 0, 0.4);
            --transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        @font-face {
        font-family: 'Gotham-Bold';
        src: url('../fonts/Gotham-Bold.otf');
        }
        @font-face {
        font-family: 'Gotham-Medium';
        src: url('../fonts/Gotham-Medium.otf');
        }
        @font-face {
        font-family: 'Alright-Regular';
        src: url('../fonts/AlrightSans-Regular.otf');
        }
        @font-face {
        font-family: 'Alright-Bold';
        src: url('../fonts/AlrightSans-Bold.otf');
        }
        @font-face {
        font-family: 'Alright-Black';
        src: url('../fonts/AlrightSans-Black.otf');
        }
        @font-face {
        font-family: 'Gotham-Book';
        src: url('../fonts/Gotham-Book.otf');
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Gotham-Book'; }
        body { 
            background-color: var(--gris-fondo); 
            color: var(--negro); 
            overflow-y: visible; 
            overflow-x: hidden; 
            
            margin: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(rgba(14, 81, 85, 0.88), rgba(10, 34, 64, 0.95)), 
                        url('../img/fondologin.jpeg') center/cover no-repeat;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        /* ==========================================================================
           2. PANTALLA DE LOGIN (ACCESO SEGURO)
           ========================================================================== */
        #login-section {
            margin-top: 50px;
            padding-bottom: 50px;
            display: flex; justify-content: center; align-items: center; height: auto; width: 100%; position: absolute; z-index: 9999;
            transition: opacity 0.6s ease, visibility 0.6s ease;
        }

        .login-box {
            background: var(--blanco); padding: 50px 45px; border-radius: 24px;
            box-shadow: var(--sombra-fuerte); width: 100%; max-width: 420px;
            text-align: center; position: relative; overflow: hidden;
            animation: fadeInDown 0.8s ease;
        }
        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }

        .login-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, var(--amarillo), var(--verde-esmeralda)); }
        .logo-text { font-size: 38px; font-weight: 900; color: var(--verde-oscuro); letter-spacing: -1px; }
        .logo-accent { color: var(--amarillo); }
        .tagline { font-size: 11px; font-weight: 800; color: #888; letter-spacing: 3px; text-transform: uppercase; margin-top: 5px; margin-bottom: 35px; }
        
        .login-box h1 { font-size: 22px; margin-bottom: 8px; font-weight: 800; color: var(--negro); letter-spacing: -0.5px;}
        .login-box p { color: var(--gris-texto); font-size: 14px; margin-bottom: 30px; }

        .input-group { text-align: left; margin-bottom: 20px; }
        .input-group label { display: block; font-size: 12px; font-weight: 700; color: var(--gris-texto); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;}
        .input-group input, .input-group textarea, .input-group select { 
            width: 100%; padding: 15px 16px; border: 2px solid var(--gris-borde); border-radius: 12px; font-size: 14px; transition: var(--transicion); background-color: #f8fafc; color: var(--negro);
        }
        .input-group input:focus, .input-group textarea:focus, .input-group select:focus { 
            outline: none; border-color: var(--verde-esmeralda); background-color: var(--blanco); box-shadow: 0 0 0 4px rgba(46, 154, 115, 0.15); transform: translateY(-2px);
        }

        .btn-primary { 
            width: 100%; padding: 16px; background: linear-gradient(135deg, var(--verde-oscuro), var(--verde-claro)); color: var(--blanco); border: none; 
            border-radius: 12px; font-size: 15px; font-weight: bold; cursor: pointer; transition: var(--transicion); text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(14,81,85,0.3);
        }
        .btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 25px rgba(14,81,85,0.4); background: linear-gradient(135deg, var(--amarillo), #e5ad00); color: var(--verde-oscuro); }
        .btn-secondary { background: var(--blanco); color: var(--verde-oscuro); border: 2px solid var(--verde-oscuro); padding: 12px 20px; border-radius: 10px; font-weight: bold; cursor: pointer; transition: var(--transicion); text-align: center; }
        .btn-secondary:hover { background: var(--verde-oscuro); color: var(--blanco); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(14,81,85,0.2); }

        #error-mensaje { background: #fee2e2; border-left: 4px solid var(--rojo-alerta); color: #991b1b; padding: 12px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-bottom: 20px; display: none; animation: shake 0.4s ease; }
        @keyframes shake { 0%, 100% {transform: translateX(0);} 25% {transform: translateX(-5px);} 75% {transform: translateX(5px);} }

        /* ==========================================================================
           3. ESTRUCTURA PRINCIPAL DEL PORTAL (APP LAYOUT)
           ========================================================================== */
        #portal-section { display: none; height: 100vh; width: 100%; background: var(--gris-fondo); padding: 15px; gap: 15px; opacity: 0; animation: fadeIn 0.5s forwards; }
        @keyframes fadeIn { to { opacity: 1; } }
        
        /* -- BARRA LATERAL (SIDEBAR) -- */
        .sidebar { 
            width: 300px; background: var(--verde-oscuro); color: var(--blanco); border-radius: 24px; 
            display: flex; flex-direction: column; box-shadow: var(--sombra-fuerte); overflow: hidden; position: relative; flex-shrink: 0;
        }
        .sidebar::after { content: ''; position: absolute; bottom: -50px; right: -50px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(46,154,115,0.2) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
        
        .sidebar-header { padding: 35px 20px 15px; text-align: center; }
        .sidebar-header .logo-text { color: var(--blanco); font-size: 30px; }
        
        .sidebar-menu { flex-grow: 1; padding: 10px 15px; display: flex; flex-direction: column; gap: 4px; z-index: 2; overflow-y: auto; }
        .sidebar-menu::-webkit-scrollbar { width: 4px; }
        .sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }
        
        .sidebar-category { font-size: 10px; color: #8ba8a9; font-weight: 800; margin: 25px 10px 8px; text-transform: uppercase; letter-spacing: 2px; }
        
        .menu-item { padding: 12px 16px; cursor: pointer; font-weight: 600; transition: var(--transicion); display: flex; align-items: center; gap: 12px; font-size: 13.5px; border-radius: 12px; color: #cbd5e1; position: relative; overflow: hidden; }
        .menu-item::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--amarillo); transition: var(--transicion); opacity: 0; }
        .menu-item:hover { background-color: rgba(255,255,255,0.08); color: var(--blanco); transform: translateX(5px); }
        .menu-item.active { background-color: rgba(255,255,255,0.1); color: var(--amarillo); }
        .menu-item.active::before { width: 4px; opacity: 1; }

        .btn-logout { margin: 15px; padding: 15px; background-color: rgba(255,255,255,0.05); border-radius: 16px; text-align: center; cursor: pointer; font-weight: bold; font-size: 14px; transition: var(--transicion); z-index: 2; border: 1px solid rgba(255,255,255,0.1); color: #cbd5e1;}
        .btn-logout:hover { background-color: var(--rojo-alerta); color: white; border-color: var(--rojo-alerta); }

        /* -- ÁREA CENTRAL Y BARRA SUPERIOR -- */
        .main-container { flex-grow: 1; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; min-width: 0; }
        
        .top-bar { background: var(--blanco); padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; border-radius: 24px; box-shadow: var(--sombra-suave); margin-bottom: 15px; flex-shrink: 0; transition: var(--transicion); }
        .top-bar h2 { color: var(--verde-oscuro); font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
        
        .user-welcome { display: flex; align-items: center; gap: 15px; font-weight: 600; color: var(--verde-oscuro); background: #f8fafc; padding: 6px 15px; border-radius: 30px; border: 1px solid var(--gris-borde); cursor: pointer; transition: var(--transicion); }
        .user-welcome:hover { border-color: var(--verde-esmeralda); background: #f0fdf4; }
        .mini-avatar { width: 38px; height: 38px; background: linear-gradient(135deg, var(--amarillo), #f59e0b); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--negro); box-shadow: 0 2px 10px rgba(255,194,14,0.4); }

        /* -- CONTENEDOR DE PANTALLAS -- */
        .main-content { background: transparent; flex-grow: 1; border-radius: 24px; overflow-y: auto; position: relative; scroll-behavior: smooth;}
        .main-content::-webkit-scrollbar { width: 8px; }
        .main-content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        
        .content-section { display: none; animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1); padding-bottom: 40px;}
        .content-section.active { display: block; }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

        /* ==========================================================================
           4. COMPONENTES REUTILIZABLES (CARDS, GRIDS, BADGES, TABLAS)
           ========================================================================== */
        .card { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: 20px; padding: 30px; transition: var(--transicion); margin-bottom: 20px; position: relative; overflow: hidden; box-shadow: var(--sombra-suave);}
        .card:hover { box-shadow: var(--sombra-hover); transform: translateY(-3px); border-color: #cbd5e1; }
        .card h3 { color: var(--negro); margin-bottom: 15px; font-size: 18px; display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.3px;}
        .card p { color: var(--gris-texto); line-height: 1.6; font-size: 14px; }
        
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 25px; }

        .badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
        .badge-green { background: #dcfce7; color: #166534; }
        .badge-red { background: #fee2e2; color: #991b1b; }
        .badge-yellow { background: #fef9c3; color: #854d0e; }
        .badge-blue { background: #e0f2fe; color: #0369a1; }

        .table-custom { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 13.5px; }
        .table-custom th { color: var(--gris-texto); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; text-align: left; padding: 0 15px 5px; border-bottom: 2px solid var(--gris-borde); }
        .table-custom td { padding: 16px 15px; background: var(--blanco); border-top: 1px solid var(--gris-borde); border-bottom: 1px solid var(--gris-borde);}
        .table-custom tr td:first-child { border-radius: 12px 0 0 12px; font-weight: 600; color: var(--verde-oscuro); border-left: 1px solid var(--gris-borde);}
        .table-custom tr td:last-child { border-radius: 0 12px 12px 0; border-right: 1px solid var(--gris-borde);}
        .table-custom tr { transition: var(--transicion); }
        .table-custom tr:hover td { background: #f8fafc; transform: scale(1.005); box-shadow: var(--sombra-suave);}

        .file-upload { border: 2px dashed var(--gris-borde); padding: 30px; text-align: center; border-radius: 12px; cursor: pointer; transition: var(--transicion); background: #f8fafc; }
        .file-upload:hover { border-color: var(--verde-esmeralda); background: #f0fdf4; }

        /* ==========================================================================
           5. ESTILOS ESPECÍFICOS POR MÓDULO
           ========================================================================== */
        /* Perfil y Desempeño */
        .profile-header { position: relative; height: 220px; border-radius: 20px; background: linear-gradient(rgba(14,81,85,0.4), rgba(14,81,85,0.8)), url('https://images.unsplash.com/photo-1508514177221-188b1c77eca2?q=80&w=1200&auto=format&fit=crop') center/cover; margin-bottom: 70px; box-shadow: var(--sombra-suave);}
        .profile-avatar { width: 140px; height: 140px; background: var(--verde-oscuro); color: var(--amarillo); border: 6px solid var(--gris-fondo); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 52px; font-weight: 900; position: absolute; bottom: -60px; left: 40px; box-shadow: var(--sombra-suave); }
        .profile-info { padding: 0 40px; margin-bottom: 30px;}
        .profile-info h3 { font-size: 32px; color: var(--verde-oscuro); margin-bottom: 5px; font-weight: 900; letter-spacing: -1px;}
        .profile-info h4 { font-size: 16px; color: var(--verde-esmeralda); font-weight: 700; display: inline-block; background: #e8f5f0; padding: 6px 15px; border-radius: 20px; }
        .progress-container { width: 100%; background: var(--gris-borde); border-radius: 10px; height: 12px; margin-top: 10px; overflow: hidden;}
        .progress-bar { height: 100%; background: var(--verde-esmeralda); border-radius: 10px; transition: width 1s ease-in-out;}

        /* Directorio Corporativo */
        .directory-card { display: flex; align-items: center; gap: 15px; padding: 20px; border: 1px solid var(--gris-borde); border-radius: 16px; background: var(--blanco); transition: var(--transicion); box-shadow: var(--sombra-suave);}
        .directory-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-hover); border-color: var(--verde-esmeralda);}
        .directory-avatar { width: 55px; height: 55px; background: #f1f5f9; color: var(--verde-oscuro); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; flex-shrink: 0;}
        
        /* Documentos y Elementos de Lista */
        .doc-item { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border: 1px solid var(--gris-borde); border-radius: 12px; margin-bottom: 12px; transition: var(--transicion); background: var(--blanco);}
        .doc-item:hover { border-color: var(--verde-esmeralda); background: #f8fafc; transform: translateX(5px);}

        /* Tarjetas de Estadísticas (Dashboard y Vacaciones) */
        .stat-card { background: linear-gradient(135deg, var(--verde-oscuro), var(--verde-claro)); color: white; padding: 25px; border-radius: 20px; text-align: center; box-shadow: var(--sombra-suave); position: relative; overflow: hidden; transition: var(--transicion);}
        .stat-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-hover); }
        .stat-card::before { content: ''; position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; }
        .stat-card h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; margin-bottom: 10px; font-weight: 700; }
        .stat-card .number { font-size: 46px; font-weight: 900; color: var(--amarillo); letter-spacing: -2px; }

        /* Calculadoras y Recibos (Salarios/Extras) */
        .receipt-box { background: var(--blanco); padding: 30px; border-radius: 20px; border: 1px solid var(--gris-borde); height: 100%; box-shadow: var(--sombra-suave);}
        .receipt-box.dark { background: linear-gradient(180deg, var(--verde-oscuro), #0a3a3d); color: white; border: none; box-shadow: var(--sombra-fuerte);}
        .receipt-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 15px; border-bottom: 1px dashed var(--gris-borde); padding-bottom: 12px; font-weight: 500;}
        .receipt-box.dark .receipt-row { border-bottom: 1px solid rgba(255,255,255,0.1); }
        .receipt-total { display: flex; justify-content: space-between; margin-top: 25px; font-size: 26px; font-weight: 900; color: var(--verde-oscuro); border-top: 3px solid var(--verde-oscuro); padding-top: 20px; letter-spacing: -1px;}
        .receipt-box.dark .receipt-total { color: var(--amarillo); border-top: 3px solid rgba(255,255,255,0.2); }

        /* Activos Fijos */
        .asset-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 35px 20px; border: 1px solid var(--gris-borde); border-radius: 20px; transition: var(--transicion); background: var(--blanco); box-shadow: var(--sombra-suave);}
        .asset-card:hover { transform: translateY(-8px); box-shadow: var(--sombra-hover); border-color: var(--verde-esmeralda); }
        .asset-icon { font-size: 55px; margin-bottom: 20px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); transition: transform 0.3s; }
        .asset-card:hover .asset-icon { transform: scale(1.15) rotate(5deg); }

        /* Buzón de Mejora (Banner Seguro) */
        .safe-space-banner { background: #f0fdfa; border-left: 6px solid var(--verde-esmeralda); padding: 25px; border-radius: 12px; margin-bottom: 25px; display: flex; align-items: flex-start; gap: 20px; box-shadow: var(--sombra-suave);}
        .safe-space-icon { font-size: 36px; }
        .safe-space-text h4 { color: #115e59; font-size: 19px; margin-bottom: 8px; font-weight: 800;}
        .safe-space-text p { color: #134e4a; font-size: 14.5px; line-height: 1.6; margin: 0; }

        /* ==========================================================================
           6. SISTEMA DE NOTIFICACIONES (TOASTS)
           ========================================================================== */
        .toast-container { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 10000; pointer-events: none;}
        .toast { background: var(--blanco); color: var(--negro); padding: 20px 25px; border-radius: 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 15px; min-width: 320px; max-width: 450px; transform: translateX(120%); transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); border-left: 6px solid var(--verde-esmeralda); pointer-events: auto;}
        .toast.show { transform: translateX(0); }
        .toast-icon { font-size: 24px; }
        .toast-content h4 { margin: 0 0 5px 0; font-size: 16px; color: var(--verde-oscuro); font-weight: 800;}
        .toast-content p { margin: 0; font-size: 13.5px; color: var(--gris-texto); line-height: 1.4;}
        .toast.error { border-left-color: var(--rojo-alerta); }
        .toast.error .toast-content h4 { color: #991b1b; }
        .toast.info { border-left-color: var(--azul-info); }
        .toast.info .toast-content h4 { color: #0369a1; }