/* =====================================================================
   Haras Ambar Amaral - identidade visual
   Cores da logo: verde-terra #295C41 e verde-folha #279E54.
   Fundo creme quente (painel), verde profundo (TV) e dourado para o que
   vai no balde.
   ===================================================================== */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'), url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations'), url('/assets/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* marca */
  --verde-terra: #295C41;
  --verde-folha: #279E54;
  --verde-950: #0B1C13;
  --verde-900: #10261A;
  --verde-850: #153122;
  --verde-800: #1B3D2B;
  --verde-100: #E4F0E8;
  --verde-50:  #F1F7F3;
  --dourado: #F2C230;
  --dourado-escuro: #3A2C00;

  /* painel (claro) */
  --fundo: #F6F4EE;
  --superficie: #FFFFFF;
  --superficie-2: #FBFAF6;
  --tinta: #18231D;
  --tinta-2: #55625B;
  --tinta-3: #646F69;
  --linha: #E5E2D9;
  --linha-forte: #A9A496;
  --primaria: var(--verde-terra);
  --primaria-hover: #1F4A33;
  --acento: var(--verde-folha);
  --perigo: #B4372F;
  --perigo-fundo: #FBECEA;
  --aviso: #8A5A00;
  --aviso-fundo: #FDF3DA;

  --raio: 10px;
  --raio-g: 16px;
  --sombra: 0 1px 2px rgba(16, 38, 26, .06), 0 4px 16px rgba(16, 38, 26, .06);
  --fonte: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1;
}
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
a { color: var(--primaria); }
img { max-width: 100%; display: block; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- controles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: var(--raio);
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta);
  font: 600 15px/1 var(--fonte); cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--superficie-2); border-color: var(--tinta-3); }
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.btn-primario:hover { background: var(--primaria-hover); border-color: var(--primaria-hover); }
.btn-bloco { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

.campo { display: block; margin-bottom: 16px; }
.campo > span { display: block; font-size: 13px; font-weight: 600; color: var(--tinta-2); margin-bottom: 6px; }
.entrada {
  width: 100%; height: 46px; padding: 0 14px; border-radius: var(--raio);
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta);
  font: 500 16px var(--fonte);
}
.entrada::placeholder { color: var(--tinta-3); font-weight: 500; opacity: 1; }
textarea.entrada { height: auto; padding: 10px 14px; line-height: 1.4; resize: vertical; }
.entrada:focus { outline: none; border-color: var(--verde-folha); box-shadow: 0 0 0 3px rgba(39, 158, 84, .18); }
:focus-visible { outline: 3px solid rgba(39, 158, 84, .55); outline-offset: 2px; }

.alerta { border-radius: var(--raio); padding: 10px 14px; font-size: 14px; margin-bottom: 16px; }
.alerta-erro { background: var(--perigo-fundo); color: var(--perigo); }
.alerta-aviso { background: var(--aviso-fundo); color: var(--aviso); }

.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g); box-shadow: var(--sombra); }
.selo { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.selo-verde { background: var(--verde-100); color: var(--verde-terra); }
.selo-aviso { background: var(--aviso-fundo); color: var(--aviso); }
.selo-perigo { background: var(--perigo-fundo); color: var(--perigo); }
.selo-neutro { background: #EFEDE6; color: var(--tinta-2); }
.mudo { color: var(--tinta-2); }