/* Extracted from views/institucional/quejas.php */
@layer pages {

/* ══════════════════════════════════════════════════════════════
   QUANTUM ULTRA PRO CORE SYSTEM
   ══════════════════════════════════════════════════════════════ */
:root {
    --q-red: var(--gc-primary, #a62126);
    --q-violet: var(--gc-violet, #8B5CF6);
    --q-cyan: var(--gc-iso-food, #06B6D4);
    --q-dark: var(--gc-slate-950, #020617);
    --q-slate: var(--gc-slate-900, #0f172a);
    --q-green: var(--gc-success, #22C55E);
    --q-blue: var(--gc-info, #3b82f6);
}

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

/* Living Gradient Text */
.quantum-gradient-text {
    background: linear-gradient(135deg, var(--q-red) 0%, var(--q-violet) 50%, var(--q-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Neural Grid Background */
.neural-grid {
    background-image: 
        linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: grid-drift 25s linear infinite;
}

@keyframes grid-drift {
    0% { background-position: 0 0; }
    100% { background-position: 60px 60px; }
}

/* Quantum Orbs */
.quantum-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    animation: orb-float 20s ease-in-out infinite;
    pointer-events: none;
}

.quantum-orb-1 {
    width: clamp(300px, 50vw, 700px);
    height: clamp(300px, 50vw, 700px);
    background: linear-gradient(135deg, rgba(166, 33, 38, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.quantum-orb-2 {
    width: clamp(250px, 40vw, 600px);
    height: clamp(250px, 40vw, 600px);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
    top: 30%;
    right: -200px;
    animation-delay: -7s;
}

.quantum-orb-3 {
    width: clamp(200px, 35vw, 500px);
    height: clamp(200px, 35vw, 500px);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(166, 33, 38, 0.08) 100%);
    bottom: -150px;
    left: 30%;
    animation-delay: -14s;
}

@keyframes orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(20px, 10px) scale(1.02); }
}

/* Glassmorphism Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-card-dark {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Quantum Glow Effects */
.quantum-glow-red {
    box-shadow: 0 0 40px rgba(166, 33, 38, 0.3), 0 0 80px rgba(166, 33, 38, 0.1);
}

.quantum-glow-violet {
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.3), 0 0 80px rgba(139, 92, 246, 0.1);
}

.quantum-glow-cyan {
    box-shadow: 0 0 40px rgba(6, 182, 212, 0.3), 0 0 80px rgba(6, 182, 212, 0.1);
}

/* Quantum Button */
.quantum-btn-primary {
    background: linear-gradient(135deg, var(--q-red) 0%, var(--q-violet) 100%);
    color: white;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.quantum-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--q-violet) 0%, var(--q-cyan) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.quantum-btn-primary:hover::before {
    opacity: 1;
}

.quantum-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
}

.quantum-btn-primary > * {
    position: relative;
    z-index: 1;
}

/* Quantum Input Focus */
.quantum-input:focus {
    border-color: var(--q-violet);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 0 20px rgba(139, 92, 246, 0.1);
}

/* Timeline Connector */
.timeline-connector {
    background: linear-gradient(90deg, var(--q-red) 0%, var(--q-violet) 50%, var(--q-cyan) 100%);
}

/* Pulse Animation */
@keyframes quantum-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

.animate-quantum-pulse {
    animation: quantum-pulse 3s ease-in-out infinite;
}

/* Shine Effect */
@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
}

.shine-effect:hover::after {
    animation: shine 0.8s ease-out;
}

/* Tab Styles */
.tab-active-queja {
    background: linear-gradient(135deg, var(--q-red) 0%, var(--gc-primary-hover, #a62126) 100%);
    box-shadow: 0 10px 30px rgba(166, 33, 38, 0.3);
}

.tab-active-apelacion {
    background: linear-gradient(135deg, var(--q-violet) 0%, var(--q-cyan) 100%);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

/* Floating Animation */
@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-float {
    animation: float-gentle 4s ease-in-out infinite;
}

/* Process Step Hover */
.process-step:hover .step-icon {
    transform: scale(1.1) rotate(5deg);
}

.process-step:hover .step-card {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(139, 92, 246, 0.25);
}

/* Commitment Card Hover */
.commitment-card:hover .commitment-icon {
    transform: scale(1.15) rotate(-5deg);
}

/* FAQ Hover */
.faq-item:hover {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.1);
}

/* Stats Counter Animation */
@keyframes count-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.stat-animate {
    animation: count-up 0.8s ease-out forwards;
}

/* File Upload Drop Zone */
.drop-zone-active {
    border-color: var(--q-violet) !important;
    background: rgba(139, 92, 246, 0.05);
}

/* Normative bar content-visibility */
[aria-label="Marco normativo"] {
    content-visibility: auto;
    contain-intrinsic-size: auto 52px;
}

/* Below-fold sections performance */
#proceso,
#formulario {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* Focus-visible states */
.quantum-btn-primary:focus-visible,
.quantum-input:focus-visible,
.glass-card button:focus-visible,
.faq-item button:focus-visible {
    outline: 2px solid var(--q-violet);
    outline-offset: 2px;
}

input[type="radio"]:focus-visible + div,
input[type="checkbox"]:focus-visible + div {
    outline: 2px solid var(--q-violet);
    outline-offset: 2px;
    border-radius: 1rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .quantum-orb,
    .animate-float,
    .animate-bounce,
    .animate-quantum-pulse,
    .animate-ping,
    .neural-grid {
        animation: none !important;
    }
    .stat-animate {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .process-step:hover .step-card,
    .commitment-card:hover .commitment-icon,
    .process-step:hover .step-icon {
        transform: none !important;
    }
    * {
        transition-duration: 0.01ms !important;
    }
}

} /* end @layer pages */