/* ==========================================================================
   Tema base: Loureiro Poceiro · Validacao Contabil e Book
   Identidade visual do manual da marca + estetica Apple.
   Sem dependencias externas. Todas as cores como variaveis no :root.
   ========================================================================== */

/* ----- Fontes da marca (WOFF2 gerados dos originais) ----- */
@font-face {
  font-family: "Zen Antique Soft";
  src: url("/static/fonts/zen-antique-soft-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Accord";
  src: url("/static/fonts/accord-thin.woff2") format("woff2");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Accord";
  src: url("/static/fonts/accord-light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Accord";
  src: url("/static/fonts/accord-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Accord";
  src: url("/static/fonts/accord-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Accord";
  src: url("/static/fonts/accord-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Cores oficiais do manual da marca */
  --grafite: #363233;
  --verde: #30b08e;
  --branco: #ffffff;

  /* Cores de apoio da interface (funcionais, fora do manual) */
  --verde-claro: #a8d5ba;
  --ambar: #e8a13c;

  /* Tons neutros derivados */
  --cinza-texto: #6b6668;
  --cinza-borda: #e6e3e4;
  --cinza-fundo: #f7f6f6;

  /* Papeis semanticos */
  --cor-texto: var(--grafite);
  --cor-texto-suave: var(--cinza-texto);
  --cor-acento: var(--verde);
  --cor-sucesso: var(--verde-claro);
  --cor-alerta: var(--ambar);
  --cor-erro: #c0392b;
  --fundo-pagina: var(--cinza-fundo);
  --fundo-card: var(--branco);

  /* Tipografia */
  --fonte-titulo: "Zen Antique Soft", Georgia, serif;
  --fonte-corpo: "Accord", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", Roboto, sans-serif;

  /* Raios de canto (estetica Apple) */
  --raio-grande: 22px;
  --raio-medio: 14px;
  --raio-pequeno: 10px;

  /* Sombras suaves */
  --sombra-card: 0 1px 3px rgba(54, 50, 51, 0.06),
    0 8px 24px rgba(54, 50, 51, 0.06);
  --sombra-flutuante: 0 8px 32px rgba(54, 50, 51, 0.12);

  /* Espacamentos */
  --espaco-xs: 4px;
  --espaco-sm: 8px;
  --espaco-md: 16px;
  --espaco-lg: 24px;
  --espaco-xl: 40px;
  --espaco-xxl: 64px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-weight: 400;
  color: var(--cor-texto);
  background: var(--fundo-pagina);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  color: var(--grafite);
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* ----- Header com frosted glass ----- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  /* Enrola só quando os itens não cabem (largura estreita): evita rolagem
     horizontal da página em tablet. No desktop tudo fica numa linha só. */
  flex-wrap: wrap;
  gap: var(--espaco-lg);
  padding: var(--espaco-md) var(--espaco-xl);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--cinza-borda);
}

.app-header .logo {
  height: 34px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  text-decoration: none;
  color: var(--cor-texto-suave);
  font-size: 15px;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav a:hover {
  color: var(--grafite);
}

.nav a.ativo {
  color: var(--verde);
  border-bottom-color: var(--verde);
}

/* ----- Cards ----- */
.card {
  background: var(--fundo-card);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-card);
  padding: var(--espaco-lg);
}

/* ----- Botoes ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-sm);
  font-family: var(--fonte-corpo);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--raio-pequeno);
  border: none;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.2s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primario {
  background: var(--verde);
  color: var(--branco);
}

.btn-primario:hover {
  filter: brightness(1.05);
}

.btn-secundario {
  background: var(--cinza-fundo);
  color: var(--grafite);
  border: 1px solid var(--cinza-borda);
}

/* ----- Tags de status ----- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
}

.tag-validado {
  background: var(--verde-claro);
  color: #1f5e47;
}

.tag-atencao {
  background: rgba(232, 161, 60, 0.18);
  color: #8a5a13;
}

.tag-erro {
  background: rgba(192, 57, 43, 0.14);
  color: var(--cor-erro);
}

/* Aviso de documentacao sem CNPJ: sempre em vermelho (regra do escopo) */
.aviso-sem-cnpj {
  color: var(--cor-erro);
  font-weight: 600;
}

.aviso-atencao {
  color: var(--cor-texto);
  font-weight: 500;
  background: rgba(232, 161, 60, 0.12);
  border-left: 3px solid var(--cor-alerta);
  padding: var(--espaco-sm) var(--espaco-md);
  border-radius: var(--raio-pequeno);
  margin: var(--espaco-sm) 0;
}

/* ----- Responsividade ----- */
@media (max-width: 1024px) {
  .app-header {
    padding: var(--espaco-md) var(--espaco-lg);
  }
}

@media (max-width: 640px) {
  .app-header {
    flex-wrap: wrap;
    gap: var(--espaco-md);
  }
  .nav {
    gap: var(--espaco-md);
  }
}

/* ----- Acessibilidade: respeitar reducao de movimento ----- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}