@keyframes subtle-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body {
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%);
    background-size: 400% 400%;
    animation: subtle-gradient-animation 20s ease infinite;
    color: #f4f6f7;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
}

/* Estilo Cristalizado */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px) saturate(160%);
    -webkit-backdrop-filter: blur(15px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.nav-glass {
    background: rgba(10, 14, 39, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tablas (base compartida) */
.custom-table { border-collapse: separate; border-spacing: 0 8px; }
.custom-table thead th { color: #a8b3c1; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 12px; }
.custom-table tbody tr { 
    background: rgba(255, 255, 255, 0.02);
    transition: transform 0.2s ease, background 0.2s ease;
}
.custom-table tbody tr:hover { 
    background: rgba(108, 140, 213, 0.1); 
    transform: scale(1.002);
}
.custom-table td { padding: 12px; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.custom-table td:first-child { border-radius: 12px 0 0 12px; border-left: 1px solid rgba(255, 255, 255, 0.05); }
.custom-table td:last-child { border-radius: 0 12px 12px 0; border-right: 1px solid rgba(255, 255, 255, 0.05); }

/* Inputs Modernos */
input, select, textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

input:focus, select:focus, textarea:focus { border-color: #6c8cd5 !important; box-shadow: 0 0 0 4px rgba(108, 140, 213, 0.2) !important; outline: none; }

select option {
    background-color: #1a1f3a;
    color: white;
}
#parentCat option {
    background-color: #1a203c;
    color: white;
}       

/* Botones */
.btn-primary, .btn-gradient {
    background: linear-gradient(135deg, #4a6fa5, #6c8cd5);
    box-shadow: 0 4px 15px rgba(74, 111, 165, 0.3);
    transition: all 0.3s ease;
}
.btn-primary:hover, .btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74, 111, 165, 0.5); }

.btn-secondary {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
    transition: all 0.3s ease;
}
.btn-secondary:hover { background: #16a34a; color: white; }

/* Utilidades */
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Scrollbar Personalizada */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0e27; }
::-webkit-scrollbar-thumb { background: #2d4373; border-radius: 10px; }

.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }

/* Estilo para items encontrados (Auditoria) */
.row-found { background: rgba(34, 197, 94, 0.15) !important; border: 1px solid rgba(34, 197, 94, 0.3) !important; }

/* Animación para el input de escaneo (Auditoria) */
.input-focus-ring:focus {
    box-shadow: 0 0 0 2px rgba(108, 140, 213, 0.5);
}