/* file: /var/www/portal/public/assets/css/theme.css */
/* Por que: tema único (cores, cards, navbar/rodapé consistentes) */
:root{
  --oac-ink:#0a192f;
  --oac-ink-2:#0e223f;
  --oac-primary:#21b6d1;
  --oac-secondary:#278ea5;
  --oac-text:#f5f7fb;
  --oac-muted:#b9c4d6;
  --oac-line:rgba(255,255,255,.14);
  --oac-panel:rgba(255,255,255,.06);
  --oac-shadow:rgba(8,20,39,.45);
  --oac-body:#f7f9fc;

  --accent-cyan:#21b6d1;
  --accent-blue:#3b82f6;
  --accent-green:#10b981;
  --accent-purple:#8b5cf6;
  --accent-orange:#f97316;
}

html,body{height:100%}
body{
  background:var(--oac-body);
  color:#0e1a2f;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif
}
a{color:var(--oac-primary)}

/* Navbar / Footer */
.oac-navbar{
  background:linear-gradient(180deg, rgba(10,25,47,.90) 0%, rgba(10,25,47,.98) 100%);
  border-bottom:2px solid var(--oac-secondary);
}
.oac-brand{height:42px; filter:drop-shadow(0 0 2px rgba(33,182,209,.35))}
.oac-footer{
  background:linear-gradient(180deg, rgba(10,25,47,.90) 0%, rgba(10,25,47,.98) 100%);
  color:#fff;
  border-top:2px solid var(--oac-secondary)
}

/* Cards */
.oac-card, .plan-card{
  background:var(--oac-panel);
  border:1px solid var(--oac-line);
  border-radius:16px;
  box-shadow:0 10px 30px var(--oac-shadow);
  backdrop-filter:blur(8px);
  overflow:hidden;
}
.oac-hover-up{transition:transform .25s ease, box-shadow .25s ease}
.oac-hover-up:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.25)}

/* Acentos coloridos */
.plan-accent{display:block;height:8px;border-radius:12px 12px 0 0}
.accent-cyan{background:var(--accent-cyan)}
.accent-blue{background:var(--accent-blue)}
.accent-green{background:var(--accent-green)}
.accent-purple{background:var(--accent-purple)}
.accent-orange{background:var(--accent-orange)}

/* Badges */
.plan-badge{position:absolute;top:10px;right:12px;z-index:2;font-size:.8rem;padding:4px 8px;border-radius:8px;font-weight:500}
.badge-cyan{background:var(--accent-cyan);color:#000}
.badge-blue{background:var(--accent-blue);color:#fff}
.badge-green{background:var(--accent-green);color:#fff}
.badge-purple{background:var(--accent-purple);color:#fff}
.badge-orange{background:var(--accent-orange);color:#fff}

/* Dark mode */
[data-theme="dark"] body{background:var(--oac-ink);color:var(--oac-text)}
[data-theme="dark"] .plan-card{background:rgba(255,255,255,.08)}
/* ========================================
   CORREÇÃO MENU MOBILE - OAC TECNOLOGIA
   ======================================== */

/* Problema: Texto azul escuro sobre fundo azul escuro = ilegível
   Solução: Fundo branco com texto escuro */

/* ===== OPÇÃO 1: Fundo Branco (Recomendado) ===== */

/* Menu mobile - fundo branco */
@media (max-width: 991px) {
  .navbar-collapse {
    background-color: #ffffff !important;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  
  .navbar-nav {
    background-color: transparent !important;
  }
  
  .navbar-nav .nav-link {
    color: #212529 !important; /* Texto escuro */
    padding: 12px 16px !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
  }
  
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    color: #0d6efd !important; /* Azul no hover */
    background-color: rgba(13, 110, 253, 0.1);
  }
  
  .navbar-nav .nav-link.active {
    color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.15);
    font-weight: 600;
  }
}

/* ===== OPÇÃO 2: Fundo Escuro (Alternativa) ===== */

/* Descomente se preferir fundo escuro com texto claro */
/*
@media (max-width: 991px) {
  .navbar-collapse {
    background-color: #1a2332 !important;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  
  .navbar-nav {
    background-color: transparent !important;
  }
  
  .navbar-nav .nav-link {
    color: #ffffff !important;
    padding: 12px 16px !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
  }
  
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    color: #0dcaf0 !important;
    background-color: rgba(13, 202, 240, 0.15);
  }
  
  .navbar-nav .nav-link.active {
    color: #0dcaf0 !important;
    background-color: rgba(13, 202, 240, 0.2);
    font-weight: 600;
  }
}
*/

/* ===== Melhorias Adicionais ===== */

/* Botão hamburguer - garantir visibilidade */
@media (max-width: 991px) {
  .navbar-toggler {
    border: 2px solid rgba(255,255,255,0.5);
    padding: 8px 12px;
  }
  
  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(255,255,255,0.25);
  }
  
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

/* Espaçamento entre itens do menu */
@media (max-width: 991px) {
  .navbar-nav .nav-item {
    margin-bottom: 4px;
  }
  
  .navbar-nav .nav-item:last-child {
    margin-bottom: 0;
  }
}

/* Melhorar área de toque (touch target) */
@media (max-width: 991px) {
  .navbar-nav .nav-link {
    min-height: 44px; /* Tamanho mínimo recomendado para touch */
    display: flex;
    align-items: center;
  }
}

/* ===== INSTRUÇÕES DE INSTALAÇÃO ===== */

/*
1. Copie todo este código
2. Cole no final do arquivo /assets/css/theme.css
3. Ou crie um arquivo novo: /assets/css/menu-mobile-fix.css
4. Se criar arquivo novo, adicione no header.php:
   <link href="/assets/css/menu-mobile-fix.css" rel="stylesheet">
5. Limpe o cache do navegador (Ctrl+Shift+R)
6. Teste em dispositivo mobile real
*/

/* ===== TESTE DE CONTRASTE ===== */

/*
WCAG 2.1 Requisitos:
- Contraste mínimo: 4.5:1 (texto normal)
- Contraste mínimo: 3:1 (texto grande)

Opção 1 (Fundo Branco):
- Texto: #212529 sobre #ffffff = 16.1:1 ✅ (Excelente)
- Hover: #0d6efd sobre rgba(13,110,253,0.1) = 8.2:1 ✅ (Ótimo)

Opção 2 (Fundo Escuro):
- Texto: #ffffff sobre #1a2332 = 14.8:1 ✅ (Excelente)
- Hover: #0dcaf0 sobre rgba(13,202,240,0.15) = 7.5:1 ✅ (Ótimo)

Ambas as opções atendem WCAG AAA!
*/

/* ========================================
   CORREÇÃO MENU MOBILE FINAL - OAC NAVBAR
   ======================================== */

/* SUBSTITUIR o código anterior por este */

/* Remover o @media anterior e adicionar este: */

@media (max-width: 991px) {
  /* Fundo branco do menu collapse */
  .oac-navbar .navbar-collapse,
  .navbar-collapse {
    background-color: #ffffff !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  }
  
  /* Container dos links */
  .oac-navbar .navbar-nav,
  .navbar-nav {
    background-color: transparent !important;
  }
  
  /* LINKS - FORÇAR TEXTO PRETO */
  .oac-navbar .navbar-nav .nav-link,
  .oac-navbar .nav-link,
  .navbar-collapse .nav-link,
  .navbar-nav .nav-link,
  nav .navbar-nav a,
  .oac-navbar a.nav-link {
    color: #212529 !important; /* PRETO */
    background-color: transparent !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    text-decoration: none !important;
  }
  
  /* HOVER - AZUL */
  .oac-navbar .navbar-nav .nav-link:hover,
  .oac-navbar .nav-link:hover,
  .navbar-collapse .nav-link:hover,
  .navbar-nav .nav-link:hover,
  .oac-navbar .navbar-nav .nav-link:focus,
  .oac-navbar .nav-link:focus {
    color: #0d6efd !important; /* AZUL */
    background-color: rgba(13, 110, 253, 0.1) !important;
  }
  
  /* ATIVO */
  .oac-navbar .navbar-nav .nav-link.active,
  .oac-navbar .nav-link.active,
  .navbar-collapse .nav-link.active,
  .navbar-nav .nav-link.active {
    color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.15) !important;
    font-weight: 600 !important;
  }
  
  /* Espaçamento */
  .oac-navbar .navbar-nav .nav-item,
  .navbar-nav .nav-item {
    margin-bottom: 4px !important;
  }
  
  .oac-navbar .navbar-nav .nav-item:last-child,
  .navbar-nav .nav-item:last-child {
    margin-bottom: 0 !important;
  }
}

/* ===== INSTRUÇÕES ===== */

/*
1. Abrir o arquivo theme.css:
   sudo nano /var/www/portal/public/assets/css/theme.css

2. DELETAR todo o bloco @media (max-width: 991px) que foi adicionado antes
   (da linha "/* Menu mobile - fundo branco */" até o final do @media)

3. Adicionar ESTE código no lugar

4. Salvar: Ctrl+O, Enter, Ctrl+X

5. Limpar cache COMPLETAMENTE:
   - No celular: Fechar aba
   - Abrir em aba anônima/privada
   - Ou limpar cache: Configurações > Limpar dados de navegação

6. Testar novamente
*/