/*
 * Allexys Pro Sistemas - Mobile Fix & Custom Styles
 * Arquitetura: PHPMaster Ultra+++
 *
 * Este arquivo atua como uma camada de segurança (Fallback) para garantir 
 * que o visual carregue perfeitamente em dispositivos móveis, corrigindo
 * falhas de renderização do Tailwind via CDN em conexões lentas ou navegadores mobile.
 */

:root {
    --brand-dark: #0f172a;
    --brand-card: #1e293b;
    --brand-accent: #fbbf24;
    --brand-text: #f8fafc;
}

/* ========================================================
   1. RESET DE RENDERIZAÇÃO MOBILE
======================================================== */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%; /* Previne zoom indesejado em textos no iOS */
    background-color: var(--brand-dark);
    color: var(--brand-text);
    scroll-behavior: smooth;
}

/* ========================================================
   2. FALLBACKS DE CORES DA MARCA
   Garante que as cores carreguem mesmo se o JS do Tailwind falhar
======================================================== */
.bg-brand-dark { background-color: var(--brand-dark) !important; }
.bg-brand-card { background-color: var(--brand-card) !important; }
.text-brand-accent { color: var(--brand-accent) !important; }
.bg-brand-accent { background-color: var(--brand-accent) !important; }
.text-brand-text { color: var(--brand-text) !important; }
.text-brand-dark { color: var(--brand-dark) !important; }

/* ========================================================
   3. CORREÇÃO DE ESTRUTURA PARA CELULAR (MODAIS E CARDS)
======================================================== */
#modalSistema, #modalPrivacidade {
    -webkit-overflow-scrolling: touch; /* Suaviza o scroll no iOS */
}

#modalContent, #modalPrivacidadeContent {
    max-height: 90vh;
    overflow-y: auto;
    width: 95%; /* Garante margem segura em telas pequenas */
    margin: 0 auto;
}

/* Melhoria no grid de imagens do modal no mobile */
#modalImagens {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* ========================================================
   4. OTIMIZAÇÕES DE UX E ACESSIBILIDADE
======================================================== */
/* Evita o highlight azul padrão ao tocar em botões no mobile */
button, a, summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Scrollbar Personalizada para Desktop e Modais */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--brand-dark);
}
::-webkit-scrollbar-thumb {
    background: #475569; /* gray-600 */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brand-accent);
}

/* ========================================================
   5. ANIMAÇÕES NATIVAS
======================================================== */
@keyframes fadeInMobile {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.group-open\:animate-fadeIn[open] > div {
    animation: fadeInMobile 0.3s ease-out forwards;
}