/* Porteira Compras & Estoque - estilos base */
* { -webkit-tap-highlight-color: transparent; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Scrollbar sutil */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d6cfc4; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Sidebar */
.nav-item { transition: all .15s; }
.nav-item.ativo { background: rgba(234,35,47,.12); color: #EA232F; font-weight: 600; }
.nav-item.ativo i { color: #EA232F; }
.nav-sub { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.nav-group.aberto .nav-sub { max-height: 500px; }
.nav-group.aberto .chevron { transform: rotate(90deg); }
.chevron { transition: transform .2s; }

/* Badges de status */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-verde { background: #dcfce7; color: #166534; }
.badge-amarelo { background: #fef3c7; color: #92400e; }
.badge-vermelho { background: #fee2e2; color: #991b1b; }
.badge-azul { background: #dbeafe; color: #1e40af; }
.badge-cinza { background: #f3f4f6; color: #4b5563; }
.badge-roxo { background: #ede9fe; color: #5b21b6; }

/* Cards */
.card { background: #fff; border-radius: 14px; border: 1px solid #ece5da; }
.card-kpi { transition: transform .15s, box-shadow .15s; }
.card-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }

/* Tabela */
.tabela th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #8a8177; font-weight: 600; }
.tabela tbody tr:hover, .tabela tbody tr:hover { background: #faf7f2; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; border-radius: 10px; transition: all .15s; cursor: pointer; }
.btn-primario { background: #EA232F; color: #fff; }
.btn-primario:hover { background: #c81d28; }
.btn-apoio { background: #2500AB; color: #fff; }
.btn-apoio:hover { background: #1d0088; }
.btn-neutro { background: #fff; color: #1F1F1F; border: 1px solid #ddd3c6; }
.btn-neutro:hover { background: #f5f0e8; }

/* Inputs */
.inp { width: 100%; padding: 9px 12px; border: 1px solid #ddd3c6; border-radius: 10px; outline: none; background: #fff; }
.inp:focus { border-color: #EA232F; box-shadow: 0 0 0 3px rgba(234,35,47,.12); }

/* Drawer / modal */
.overlay { background: rgba(31,31,31,.45); backdrop-filter: blur(2px); }
.drawer { transition: transform .28s ease; }

/* Mobile bottom nav */
@media (max-width: 1023px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 1024px) {
  .mobile-only { display: none !important; }
}

.fade-in { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }