/* =========================================================================
   base.css — reset, tokens de design e tipografia
   Sistema de Gestão — Fazenda Dileta
   Paleta do manual da marca: preto #0B0B0B, amarelo ouro #FFD100, off white
   #F7F6F2 e cinza chumbo #2E2E2E (manual recebido em 13/10/2026).
   Versão 2: visual de aplicativo (cartões arredondados,
   sombras leves, alvos de toque de 44 px no celular).
   ========================================================================= */

:root {
  /* --- cores da marca --- */
  --preto-900: #0b0b0b;   /* Preto da marca */
  --preto-800: #161616;
  --preto-700: #2e2e2e;   /* Cinza chumbo da marca */
  --preto-600: #3c3c3c;

  --ouro-600: #e6bc00;   /* ouro escurecido, para preenchimentos sóbrios */
  --ouro-500: #ffd100;   /* Amarelo ouro da marca */
  --ouro-400: #ffdc40;
  --ouro-200: #ffeb99;
  --ouro-100: #fff7d1;
  --ouro-050: #fffbea;
  --ouro-texto: #8a6800; /* ouro legível sobre fundo branco (links, destaques) */

  /* --- cores semânticas (indicadores) --- */
  --verde-700: #23704a;
  --verde-600: #2f8a5b;
  --verde-100: #e2f3e9;

  --vermelho-600: #c2412f;
  --vermelho-700: #9d3123;
  --vermelho-100: #fde8e4;

  --azul-600: #2f6f9f;
  --azul-100: #e3eff8;

  --terra-700: #8a5530;
  --terra-100: #f6ebe1;

  /* --- neutros (levemente quentes, combinam com o ouro) --- */
  --cinza-900: #1b1a17;
  --cinza-800: #2e2d29;
  --cinza-700: #4b4a44;
  --cinza-600: #6b6962;
  --cinza-500: #95938b;
  --cinza-400: #c3c1b9;
  --cinza-300: #dedcd5;
  --cinza-200: #ebe9e3;
  --cinza-100: #f3f2ee;
  --cinza-050: #f9f8f5;
  --branco: #ffffff;

  --fundo: #f7f6f2;       /* Off white da marca */
  --borda: #e6e4dd;

  --raio-g: 18px;
  --raio: 14px;
  --raio-p: 10px;
  --sombra-1: 0 1px 2px rgba(27, 26, 23, .05), 0 1px 1px rgba(27, 26, 23, .03);
  --sombra-2: 0 4px 14px rgba(27, 26, 23, .08), 0 1px 3px rgba(27, 26, 23, .05);
  --sombra-3: 0 24px 60px rgba(11, 11, 10, .28);

  --larg-menu: 252px;
  --alt-topo: 68px;
  --alt-barra-inferior: 66px;

  /* Montserrat e Playfair Display são as fontes da marca; usadas quando
     estiverem em assets/fontes (ou instaladas). Senão, a do sistema. */
  --fonte: "Montserrat", "Segoe UI Variable Text", "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Montserrat", "Segoe UI Variable Display", "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-num: "Segoe UI Variable Text", "Segoe UI", Roboto, -apple-system, Arial, sans-serif;
  --fonte-marca: "Playfair Display", Georgia, "Times New Roman", serif;

  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  --seguro-topo: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cinza-800);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 650;
  color: var(--cinza-900);
  letter-spacing: -.015em;
}

h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

a { color: var(--ouro-texto); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }

small { font-size: 12px; }

code, .num {
  font-variant-numeric: tabular-nums;
}

button, input, select, textarea { font-family: inherit; color: inherit; }

:focus-visible { outline: 3px solid rgba(255, 209, 0, .65); outline-offset: 2px; }

::selection { background: var(--ouro-200); color: var(--preto-900); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cinza-300); border-radius: 6px; border: 2px solid var(--fundo); }
::-webkit-scrollbar-thumb:hover { background: var(--cinza-400); }

/* ícones SVG (App.Icones) ---------------------------------------------- */
.ic {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -3px;
}

/* utilitários ---------------------------------------------------------- */
.texto-menor { font-size: 12.5px; color: var(--cinza-600); }
.texto-corrido { max-width: 64ch; }
.dir { text-align: right; }
.centro { text-align: center; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.negrito { font-weight: 600; }
.sutil { color: var(--cinza-600); font-weight: 400; }
.positivo { color: var(--verde-700); font-weight: 600; }
.negativo { color: var(--vermelho-600); font-weight: 600; }
.nowrap { white-space: nowrap; }
.oculto { display: none !important; }
/* o atributo hidden vale mesmo em elemento com display definido no CSS */
[hidden] { display: none !important; }
.obrigatorio { color: var(--vermelho-600); }

@media (max-width: 860px) {
  body { font-size: 15px; }
}