/* 
   Estilos Adicionais Personalizados - KanalZero 2.0
   Design Extravagante com TailwindCSS
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* Variáveis do Tema por Omissão: Kanal Zero (Inspirado no Jobick) */
:root, html {
    --color-primary: #ff5e36; /* Vermelho-Laranja Jobick */
    --color-primary-rgb: 255, 94, 54;
    --grad-start: #ff7e5f;
    --grad-end: #ff5e36;
    --mesh-color-1: rgba(255, 94, 54, 0.04); /* Subtil e plano */
    --mesh-color-2: rgba(140, 136, 165, 0.02);
    --mesh-bg: #0f0d1a; /* Fundo roxo/azul escuro profundo */
}



body {
    font-family: 'Outfit', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Efeito de Vidro (Glassmorphism) */
.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Preload Animado Shimmer & Spinner */
#global-preload {
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.spinner-custom {
    border: 4px solid rgba(255, 255, 255, 0.1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border-left-color: var(--color-primary);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Gradientes extravagantes de fundo */
.grad-cyan-blue {
    background: linear-gradient(135deg, var(--grad-start) 0%, var(--grad-end) 100%);
}

.grad-purple-pink {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
}

.grad-dark-mesh {
    background-color: var(--mesh-bg);
    background-image: 
        radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
        radial-gradient(at 50% 0%, var(--mesh-color-1) 0, transparent 50%), 
        radial-gradient(at 100% 0%, var(--mesh-color-2) 0, transparent 50%);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.05);
}
::-webkit-scrollbar-thumb {
    background: rgba(var(--color-primary-rgb), 0.5);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-primary-rgb), 0.8);
}

/* Classe utilitária para permitir scroll horizontal em select boxes e evitar cortes de texto */
.scroll-x-select {
    overflow-x: auto !important;
}
.scroll-x-select option {
    width: max-content !important;
    min-width: 100% !important;
    white-space: nowrap !important;
    padding-right: 15px !important;
}