/* ============================================================
   Nacional Veículos — Redesign 2026 (custom.css)
   Escopo: somente páginas públicas via body[data-nv-route="public"]
   Paleta da marca: vermelho #E31E24 / azul #0066B3
   ============================================================ */

:root {
  --nv-red: #E31E24;
  --nv-red-dark: #B4161B;
  --nv-blue: #0066B3;
  --nv-blue-dark: #005299;
  --nv-ink: #111827;
  --nv-grad-brand: linear-gradient(135deg, #E31E24 0%, #B4161B 55%, #7F0F13 100%);
  --nv-grad-blue: linear-gradient(135deg, #0084E8 0%, #0066B3 55%, #004B85 100%);
  --nv-grad-hero: linear-gradient(180deg, #FFFFFF 0%, #F6F9FC 60%, #EEF3F9 100%);
  --nv-shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 10px 30px -12px rgba(16,24,40,.18);
  --nv-shadow-lift: 0 4px 8px rgba(16,24,40,.06), 0 24px 48px -16px rgba(16,24,40,.28);
  --nv-radius-lg: 18px;
}

/* ---------- Base / tipografia ---------- */
body[data-nv-route="public"] {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
body[data-nv-route="public"] h1,
body[data-nv-route="public"] h2,
body[data-nv-route="public"] h3,
body[data-nv-route="public"] h4,
body[data-nv-route="public"] button,
body[data-nv-route="public"] nav a,
body[data-nv-route="public"] footer {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
}
body[data-nv-route="public"] ::selection {
  background: rgba(227,30,36,.9);
  color: #fff;
}
body[data-nv-route="public"] ::-webkit-scrollbar { width: 10px; }
body[data-nv-route="public"] ::-webkit-scrollbar-track { background: #f1f5f9; }
body[data-nv-route="public"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #E31E24, #0066B3);
  border-radius: 8px;
}

/* ---------- Navbar ---------- */
body[data-nv-route="public"] nav.fixed {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(16,24,40,.06), 0 8px 30px -12px rgba(16,24,40,.12) !important;
  border-bottom: 1px solid rgba(16,24,40,.05) !important;
}
body[data-nv-route="public"] nav.fixed a[href="/"],
body[data-nv-route="public"] nav.fixed a[href="/veiculos"],
body[data-nv-route="public"] nav.fixed a[href="/financiamento"],
body[data-nv-route="public"] nav.fixed a[href="/vender"],
body[data-nv-route="public"] nav.fixed a[href="/contato"] {
  position: relative;
  transition: color .25s ease;
}
body[data-nv-route="public"] nav.fixed .hidden.md\:flex a:not([href="/financiamento"])::after,
body[data-nv-route="public"] nav.fixed .hidden.md\:flex button::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #E31E24, #0066B3);
  border-radius: 2px;
  transition: width .3s ease, left .3s ease;
}
body[data-nv-route="public"] nav.fixed .hidden.md\:flex a:hover::after {
  width: 100%; left: 0;
}
/* botão Passar Financiamento da navbar */
body[data-nv-route="public"] nav.fixed a[href="/financiamento"].text-white {
  background: var(--nv-grad-brand) !important;
  border-radius: 999px !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
  box-shadow: 0 8px 20px -6px rgba(227,30,36,.45) !important;
}
body[data-nv-route="public"] nav.fixed a[href="/financiamento"].text-white:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -6px rgba(227,30,36,.55) !important;
}

/* ---------- Hero ---------- */
body[data-nv-route="public"] section.relative.pt-20.overflow-hidden {
  background: var(--nv-grad-hero) !important;
}
/* brilho decorativo atrás do banner */
body[data-nv-route="public"] section.relative.pt-20.overflow-hidden::before {
  content: "";
  position: absolute;
  top: -180px; right: -180px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(227,30,36,.10) 0%, rgba(227,30,36,0) 65%);
  pointer-events: none;
}
body[data-nv-route="public"] section.relative.pt-20.overflow-hidden::after {
  content: "";
  position: absolute;
  bottom: -220px; left: -160px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(0,102,179,.10) 0%, rgba(0,102,179,0) 65%);
  pointer-events: none;
}
/* imagem do hero (banner-hero.png intocado — só apresentação) */
body[data-nv-route="public"] section.relative.pt-20.overflow-hidden img {
  filter: drop-shadow(0 24px 40px rgba(16,24,40,.18));
}
/* botões do hero (rounded-xl + shadow colorida) */
body[data-nv-route="public"] section.relative.pt-20 a[href="/financiamento"].inline-flex {
  background: var(--nv-grad-brand) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 34px -8px rgba(227,30,36,.5) !important;
  letter-spacing: .2px;
}
body[data-nv-route="public"] section.relative.pt-20 a[href="/vender"].inline-flex {
  background: var(--nv-grad-blue) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 34px -8px rgba(0,102,179,.5) !important;
  letter-spacing: .2px;
}
body[data-nv-route="public"] section.relative.pt-20 a[href="/veiculos"].inline-flex,
body[data-nv-route="public"] section.relative.pt-20 a[href="/veiculos"]:not(.inline-flex) {
  background: rgba(17,24,39,.92) !important;
  backdrop-filter: blur(6px);
  border-radius: 999px !important;
  box-shadow: 0 12px 28px -10px rgba(17,24,39,.45) !important;
}
body[data-nv-route="public"] section.relative.pt-20 a.inline-flex:hover {
  transform: translateY(-3px) scale(1.02) !important;
}

/* ---------- Seção Nossos Números ---------- */
body[data-nv-route="public"] section.py-12.bg-gray-50 .text-center.p-6.bg-white.rounded-xl {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 100%) !important;
  border: 1px solid rgba(16,24,40,.06);
  border-radius: var(--nv-radius-lg) !important;
  box-shadow: var(--nv-shadow-card) !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease !important;
}
body[data-nv-route="public"] section.py-12.bg-gray-50 .text-center.p-6.bg-white.rounded-xl:hover {
  transform: translateY(-6px);
  box-shadow: var(--nv-shadow-lift) !important;
}
body[data-nv-route="public"] section.py-12.bg-gray-50 .text-3xl.font-black,
body[data-nv-route="public"] section.py-12.bg-gray-50 .md\:text-4xl.font-black {
  background: linear-gradient(100deg, #E31E24 0%, #8B1A5E 55%, #0066B3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.5px;
}

/* ---------- Títulos de seção (subtitle pill + heading) ---------- */
body[data-nv-route="public"] section h2 {
  letter-spacing: -.8px;
}
/* selo pequeno em caixa alta acima dos títulos (ex.: "ESTOQUE ATUALIZADO") */
body[data-nv-route="public"] section p.uppercase.tracking-widest,
body[data-nv-route="public"] section span.uppercase.tracking-widest {
  display: table;
  margin-left: auto;
  margin-right: auto;
  background: rgba(227,30,36,.08);
  color: var(--nv-red) !important;
  border: 1px solid rgba(227,30,36,.18);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 2px !important;
}

/* ---------- Cards de veículos (home destaque + /veiculos) ---------- */
body[data-nv-route="public"] .animate-fade-in-up {
  border-radius: var(--nv-radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--nv-shadow-card);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease !important;
  background: #fff;
}
body[data-nv-route="public"] .animate-fade-in-up:hover {
  transform: translateY(-8px);
  box-shadow: var(--nv-shadow-lift);
}
body[data-nv-route="public"] .animate-fade-in-up img {
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
body[data-nv-route="public"] .animate-fade-in-up:hover img {
  transform: scale(1.06);
}
/* preço em destaque */
body[data-nv-route="public"] .animate-fade-in-up p[class*="text-red"],
body[data-nv-route="public"] .animate-fade-in-up span[class*="text-red"],
body[data-nv-route="public"] .animate-fade-in-up div[class*="text-red"] {
  letter-spacing: -.5px;
}

/* ---------- Seção Sobre (features) ---------- */
body[data-nv-route="public"] section.py-16.md\:py-24.bg-white .rounded-full {
  box-shadow: 0 10px 26px -8px rgba(227,30,36,.35);
}

/* ---------- CTA "Como Podemos Ajudar?" ---------- */
body[data-nv-route="public"] section.py-16.md\:py-20.relative.overflow-hidden {
  background: var(--nv-grad-brand) !important;
  position: relative;
}
body[data-nv-route="public"] section.py-16.md\:py-20.relative.overflow-hidden::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(700px 340px at 85% 80%, rgba(0,0,0,.18), transparent 60%);
  pointer-events: none;
}
body[data-nv-route="public"] section.py-16.md\:py-20.relative.overflow-hidden a,
body[data-nv-route="public"] section.py-16.md\:py-20.relative.overflow-hidden button {
  border-radius: 999px !important;
}

/* ---------- Footer ---------- */
body[data-nv-route="public"] footer {
  background: linear-gradient(180deg, #1F2937 0%, #141B26 100%) !important;
}
body[data-nv-route="public"] footer a {
  transition: color .25s ease, transform .25s ease;
}
body[data-nv-route="public"] footer a:hover {
  color: #FF6B70 !important;
}

/* ---------- Página /veiculos (estoque) ---------- */
body[data-nv-route="public"] .bg-\\[\\#1F2937\\] main,
body[data-nv-route="public"] div.min-h-screen.bg-\\[\\#111827\\] {
  background: linear-gradient(180deg, #131A26 0%, #0F1520 100%) !important;
}

/* ---------- Inputs e formulários (público) ---------- */
body[data-nv-route="public"] input,
body[data-nv-route="public"] select,
body[data-nv-route="public"] textarea {
  transition: border-color .25s ease, box-shadow .25s ease;
}
body[data-nv-route="public"] input:focus,
body[data-nv-route="public"] select:focus,
body[data-nv-route="public"] textarea:focus {
  border-color: var(--nv-blue) !important;
  box-shadow: 0 0 0 4px rgba(0,102,179,.12) !important;
  outline: none !important;
}

/* ---------- Animação de entrada genérica (elementos já animados pelo bundle) ---------- */
body[data-nv-route="public"] .animate-fade-in-up {
  animation-duration: .7s;
  animation-fill-mode: forwards;
}

/* ---------- Botões primários vermelhos genéricos das páginas públicas ---------- */
body[data-nv-route="public"] button[class*="bg-red"],
body[data-nv-route="public"] a[class*="bg-red"]:not(nav a) {
  background: var(--nv-grad-brand) !important;
  border-radius: 12px;
}
body[data-nv-route="public"] button[class*="bg-blue"],
body[data-nv-route="public"] a[class*="bg-blue"]:not(nav a) {
  background: var(--nv-grad-blue) !important;
  border-radius: 12px;
}

/* ============================================================
   RESPONSIVO — tablet e celular
   ============================================================ */
@media (max-width: 1024px) {
  /* tablet: hero com respiro menor */
  body[data-nv-route="public"] section.relative.pt-20.overflow-hidden {
    padding-top: 5rem;
  }
}

@media (max-width: 768px) {
  /* mobile: botões do hero ocupam largura total e empilham com mais respiro */
  body[data-nv-route="public"] section.relative.pt-20 a.inline-flex {
    width: calc(100% - 2rem);
    justify-content: center;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    font-size: 1.05rem !important;
  }
  /* stats: 2 colunas mantidas, cards mais compactos */
  body[data-nv-route="public"] section.py-12.bg-gray-50 .text-center.p-6 {
    padding: 1.1rem !important;
  }
  body[data-nv-route="public"] section.py-12.bg-gray-50 .text-3xl {
    font-size: 1.7rem !important;
  }
  /* cards de veículo com radius menor */
  body[data-nv-route="public"] .animate-fade-in-up {
    border-radius: 14px !important;
  }
  /* títulos de seção menores */
  body[data-nv-route="public"] section h2 {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
  }
  /* CTA final: botões full width */
  body[data-nv-route="public"] section.py-16.md\:py-20.relative.overflow-hidden a,
  body[data-nv-route="public"] section.py-16.md\:py-20.relative.overflow-hidden button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  body[data-nv-route="public"] section.relative.pt-20.overflow-hidden {
    padding-top: 4.5rem;
  }
}

/* ---------- Reforços v2 ---------- */
/* badge de categoria (CARRO/MOTO) e ano nos cards */
body[data-nv-route="public"] .animate-fade-in-up span[class*="bg-blue"],
body[data-nv-route="public"] .animate-fade-in-up span[class*="bg-gray-900"],
body[data-nv-route="public"] .animate-fade-in-up span[class*="bg-black"] {
  border-radius: 999px !important;
  backdrop-filter: blur(6px);
}
/* botão seta circular do card */
body[data-nv-route="public"] .animate-fade-in-up a[class*="bg-red"],
body[data-nv-route="public"] .animate-fade-in-up button[class*="bg-red"],
body[data-nv-route="public"] .animate-fade-in-up a[class*="rounded-full"] {
  background: var(--nv-grad-brand) !important;
  box-shadow: 0 10px 22px -6px rgba(227,30,36,.5) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
}
body[data-nv-route="public"] .animate-fade-in-up:hover a[class*="rounded-full"] {
  transform: scale(1.1) rotate(-8deg);
}
/* padrão de pontos sutil no hero */
body[data-nv-route="public"] section.relative.pt-20.overflow-hidden > div:first-child {
  background-image: radial-gradient(rgba(0,102,179,.07) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
}
/* divisor em onda entre hero e stats */
body[data-nv-route="public"] section.py-12.bg-gray-50::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(238,243,249,0) 0%, #F9FAFB 100%);
  pointer-events: none;
}
/* títulos de seção com sublinhado decorativo */
body[data-nv-route="public"] section h2 {
  position: relative;
}
body[data-nv-route="public"] section h2::after {
  content: "";
  display: block;
  margin: 10px auto 0;
  width: 64px; height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #E31E24, #0066B3);
}
/* footer: ícones sociais com hover elevado */
body[data-nv-route="public"] footer a[href*="instagram"],
body[data-nv-route="public"] footer a[href*="facebook"],
body[data-nv-route="public"] footer a[href*="wa.me"],
body[data-nv-route="public"] footer a[href*="whatsapp"] {
  transition: transform .3s ease, background-color .3s ease !important;
}
body[data-nv-route="public"] footer a[href*="instagram"]:hover,
body[data-nv-route="public"] footer a[href*="facebook"]:hover,
body[data-nv-route="public"] footer a[href*="wa.me"]:hover,
body[data-nv-route="public"] footer a[href*="whatsapp"]:hover {
  transform: translateY(-3px);
}
/* links do menu mobile */
body[data-nv-route="public"] nav.fixed .md\:hidden a {
  border-radius: 12px;
  transition: background-color .25s ease;
}
body[data-nv-route="public"] nav.fixed .md\:hidden a:hover {
  background: rgba(227,30,36,.06);
}

/* hero: aproxima botões do banner e adiciona transição suave */
body[data-nv-route="public"] section.relative.pt-20.overflow-hidden {
  padding-bottom: 0 !important;
}
body[data-nv-route="public"] section.relative.pt-20.overflow-hidden > div:last-child {
  padding-bottom: 3.5rem;
}

/* menu mobile aberto: fundo sólido para não vazar o glow do hero */
body[data-nv-route="public"] nav.fixed div.md\:hidden {
  background: rgba(255,255,255,.98) !important;
  backdrop-filter: none;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 24px 48px -16px rgba(16,24,40,.25);
  padding-bottom: .75rem;
}
/* glows do hero ficam atrás do conteúdo */
body[data-nv-route="public"] section.relative.pt-20.overflow-hidden::before,
body[data-nv-route="public"] section.relative.pt-20.overflow-hidden::after {
  z-index: 0;
}
body[data-nv-route="public"] section.relative.pt-20.overflow-hidden > *:not(.absolute) {
  position: relative;
  z-index: 1;
}

/* tablet (768-1023): navbar mais compacta para caber tudo */
@media (min-width: 768px) and (max-width: 1023px) {
  body[data-nv-route="public"] nav.fixed a[href*="instagram"] {
    display: none !important;
  }
  body[data-nv-route="public"] nav.fixed a[href="/financiamento"].text-white {
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 12px !important;
  }
  body[data-nv-route="public"] nav.fixed .hidden.md\:flex {
    gap: 14px !important;
  }
  body[data-nv-route="public"] nav.fixed .hidden.md\:flex a,
  body[data-nv-route="public"] nav.fixed .hidden.md\:flex button {
    font-size: 13px !important;
  }
  body[data-nv-route="public"] nav.fixed img {
    max-height: 44px;
  }
}

/* ================================================================
   ADMIN — Página NFS-e (/admin/nfse): ajustes responsivos
   Escopo: body[data-nv-page="nfse"] (setado pelo script do index.html)
   ================================================================ */

/* Modais da página ficam ACIMA do header fixo do admin (header é z-50) */
body[data-nv-page="nfse"] div.fixed.inset-0.z-50 {
  z-index: 70 !important;
}

/* Tabelas: scroll horizontal suave no touch */
body[data-nv-page="nfse"] .overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  /* Abas: cabem em uma linha sem quebrar o texto */
  body[data-nv-page="nfse"] div.flex.gap-1.border-b > button {
    padding: .7rem .4rem !important;
    font-size: .8rem !important;
    white-space: nowrap;
    letter-spacing: -.1px;
  }

  /* Modais: menos padding no wrapper = mais largura útil */
  body[data-nv-page="nfse"] div.fixed.inset-0.z-50.p-4 {
    padding: .5rem !important;
  }

  /* Formulários dos modais (Emitir NF Avulsa / Novo Tomador): 1 coluna */
  body[data-nv-page="nfse"] div.fixed.inset-0 .grid.grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Filhos com col-span-2 criam colunas implícitas e mantêm o grid em 2 colunas;
     forçar todos a ocupar apenas a coluna única */
  body[data-nv-page="nfse"] div.fixed.inset-0 .grid.grid-cols-2 > [class*="col-span"] {
    grid-column: 1 / -1 !important;
  }

  /* Inputs com 16px: evita zoom automático ao focar no iOS */
  body[data-nv-page="nfse"] div.fixed.inset-0 input,
  body[data-nv-page="nfse"] div.fixed.inset-0 select,
  body[data-nv-page="nfse"] div.fixed.inset-0 textarea {
    font-size: 16px !important;
  }

  /* Tabelas mais compactas (cabe mais coluna antes do scroll) */
  body[data-nv-page="nfse"] table th,
  body[data-nv-page="nfse"] table td {
    padding-left: .6rem !important;
    padding-right: .6rem !important;
  }
  body[data-nv-page="nfse"] table td {
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
  }

  /* Cabeçalhos dos cards (título + botão) podem quebrar linha */
  body[data-nv-page="nfse"] div.p-4.border-b.border-gray-100.flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: .6rem;
  }

  /* Página: menos respiro lateral */
  body[data-nv-page="nfse"] div.p-4.lg\:p-8.max-w-6xl {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  /* Tablet: modais com um pouco mais de fôlego lateral */
  body[data-nv-page="nfse"] div.fixed.inset-0.z-50.p-4 {
    padding: 1.5rem !important;
  }
}

/* ============ NFS-e mobile: tabelas viram cartões ============ */
@media (max-width: 640px) {
  /* Cada linha vira um cartão com todos os campos rotulados (labels = data-label dos tds) */
  body[data-nv-page="nfse"] div.overflow-x-auto {
    overflow-x: visible;
  }
  body[data-nv-page="nfse"] table thead {
    display: none;
  }
  body[data-nv-page="nfse"] table,
  body[data-nv-page="nfse"] table tbody {
    display: block;
    width: 100%;
  }
  body[data-nv-page="nfse"] table tbody > tr {
    display: block;
    margin: .6rem .75rem;
    padding: .25rem .85rem;
    border: 1px solid #e5e7eb !important;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  body[data-nv-page="nfse"] table tbody > tr > td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .9rem;
    padding: .5rem 0 !important;
    border: none;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  body[data-nv-page="nfse"] table tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex: none;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    text-align: left;
  }
  /* Linha de estado vazio ("Nenhuma NFS-e...") sem label */
  body[data-nv-page="nfse"] table tbody > tr > td:not([data-label]) {
    display: block;
    text-align: center;
    padding: 1rem 0 !important;
  }
}