/* =======================================================
   CONECTA DF - ESTILOS PERSONALIZADOS E OTIMIZAÇÕES MOBILE (PWA)
   ======================================================= */

:root {
  --df-green: #008C4A;
  --df-green-dark: #006b38;
  --df-yellow: #F3C51A;
  --df-yellow-light: #fef08a;
  --df-red: #DC2626;
  --df-dark: #111827;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Otimizações de toque e gestos para iOS e Android */
html, body {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior-y: none;
}

/* Safe areas para iPhone com notch e Dynamic Island */
header.app-header {
  padding-top: max(1rem, calc(0.5rem + var(--safe-top)));
}

nav.bottom-nav {
  padding-bottom: max(1.25rem, calc(0.75rem + var(--safe-bottom)));
}

body.has-bottom-nav {
  padding-bottom: max(5.5rem, calc(4.5rem + var(--safe-bottom)));
}

/* Utilitários de Rolagem */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animações e Transições Suaves */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.25s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Efeito de Clique Tátil */
.btn-press:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* Badges de Status de Zeladoria */
.badge-status-pendente {
  background-color: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.badge-status-analise {
  background-color: #DBEAFE;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}

.badge-status-resolvido {
  background-color: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

/* Banner de Instalação PWA */
#pwa-install-banner {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}