/*

Aqui ficam os elementos reset, tipografia e tema claro fixo.

Observação: os NOMES das variáveis foram mantidos exatamente como estavam.
Somente os valores/estilos foram modernizados.

*/

:root {
  color-scheme: light;
  --azul-950: #0b2545;
  --azul-800: #12508f;
  --azul-600: #1c6dd0;
  --azul-100: #e8f1fd;
  --verde-600: #0f7a58;
  --cinza-950: #101a26;
  --cinza-700: #5a6a7b;
  --cinza-300: #dbe3ec;
  --cinza-100: #f4f7fb;
  --branco: #ffffff;
  --erro: #b42318;
  --sombra: 0 24px 60px -30px rgb(11 37 69 / 28%);
  --sombra-suave: 0 1px 2px rgb(11 37 69 / 8%);
  --raio: 18px;
  --fonte: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --superficie-2: #f7fafd;
  --realce: rgb(28 109 208 / 8%);
  --anel: 0 0 0 4px rgb(28 109 208 / 18%);
  --transicao: 160ms cubic-bezier(.2, .7, .3, 1);
  --fundo-pagina:
    radial-gradient(1100px 620px at 12% -10%, rgb(28 109 208 / 12%), transparent 60%),
    radial-gradient(900px 520px at 105% 0%, rgb(15 122 88 / 8%), transparent 55%),
    var(--cinza-100);
}

* { box-sizing: border-box; }

html {
  background-color: var(--cinza-100);
  color: var(--cinza-950);
  font-family: var(--fonte);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--fundo-pagina);
  background-attachment: fixed;
  color: var(--cinza-950);
  margin: 0;
  min-height: 100vh;
  min-width: 320px;
}

button, input, select, textarea { font: inherit; }

input, select, textarea {
  background-color: var(--branco);
  border: 1px solid var(--cinza-300);
  border-radius: 12px;
  color: var(--cinza-950);
  padding: .7rem .85rem;
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
  width: auto;
}

input:hover, select:hover, textarea:hover { border-color: color-mix(in oklab, var(--azul-600) 45%, var(--cinza-300)); }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--azul-600);
  box-shadow: var(--anel);
  outline: none;
}

input[type="number"] { max-width: 14rem; }

input[type="radio"], input[type="checkbox"] {
  accent-color: var(--azul-600);
  height: 1.05rem;
  padding: 0;
  width: 1.05rem;
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - .75rem) 55%;
  background-repeat: no-repeat;
  background-size: .32rem .32rem, .32rem .32rem;
  cursor: pointer;
  padding-right: 2.2rem;
}

input[type="file"] {
  background: var(--superficie-2);
  border-style: dashed;
  cursor: pointer;
  display: block;
  max-width: 100%;
  min-width: min(100%, 28rem);
  padding: 1rem;
  width: 100%;
}

input[type="file"]:hover { background: var(--realce); border-color: var(--azul-600); }
input::placeholder, textarea::placeholder { color: var(--cinza-700); opacity: 1; }

input::file-selector-button {
  background: var(--azul-600);
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  margin-right: .8rem;
  padding: .5rem .9rem;
  transition: background var(--transicao), transform var(--transicao);
}

input::file-selector-button:hover { background: var(--azul-800); transform: translateY(-1px); }

button { cursor: pointer; }
h1, h2, p { margin-top: 0; }

h1, h2, h3, p, li, label, legend, output, td, th, button {
  overflow-wrap: break-word;
  text-overflow: clip;
}

h1 { color: var(--azul-950); font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -.02em; line-height: 1.12; margin-bottom: .75rem; }
h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.015em; margin-bottom: .6rem; }
h3 { font-size: 1.05rem; letter-spacing: -.01em; }
a { color: inherit; }
code { background: var(--superficie-2); border: 1px solid var(--cinza-300); border-radius: 6px; font-size: .85em; padding: .1rem .35rem; }
small { color: var(--cinza-700); display: block; margin-top: .35rem; }

.container { margin: 0 auto; max-width: 1040px; padding-left: 1.25rem; padding-right: 1.25rem; }
.app-header > .container {
  max-width: none;
  padding-left: 2rem;
  padding-right: 2rem;
}
.app-main { padding-bottom: 4rem; padding-top: 2rem; }

.app-header {
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--branco) 78%, transparent);
  border-bottom: 1px solid var(--cinza-300);
  color: var(--cinza-950);
  position: sticky;
  top: 0;
  transition: border-color .28s ease, color .28s ease;
  z-index: 20;
}

.app-header__content { align-items: center; display: flex; gap: 1rem; justify-content: space-between; min-height: 70px; }
.app-header__brand-group { align-items: center; display: flex; gap: .8rem; min-width: 0; }
.app-header__divider { background: var(--cinza-300); height: 40px; width: 1px; }

.brand {
  background: linear-gradient(92deg, var(--azul-600), var(--verde-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
}

.app-header__status { color: var(--cinza-700); font-size: .88rem; margin: 0; overflow-wrap: break-word; }
.app-header__actions { align-items: center; display: flex; gap: .75rem; }

.botao-desfazer {
  background: transparent;
  border: 1px solid var(--vermelho-500, #d64545);
  border-radius: 999px;
  color: var(--vermelho-500, #d64545);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  padding: .45rem .85rem;
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.botao-desfazer:hover { background: var(--vermelho-500, #d64545); color: #fff; transform: translateY(-1px); }
.botao-desfazer[hidden] { display: none; }

.app-logo { display: block; flex: 0 0 auto; height: 40px; max-width: 145px; object-fit: contain; }
.app-logo-button { background: transparent; border: 0; cursor: pointer; display: inline-flex; padding: 0; }
.app-logo-button:focus-visible { border-radius: 6px; outline: 2px solid var(--azul-300); outline-offset: 3px; }
.geoapta-logo-button { background: transparent; border: 0; cursor: pointer; display: inline-flex; padding: 0; }
.geoapta-logo-button:focus-visible { border-radius: 6px; outline: 2px solid var(--azul-300); outline-offset: 3px; }
/* O arquivo institucional inclui uma margem branca generosa. O quadro recorta
   somente a marca, preservando suas proporções sem alterar o arquivo-fonte. */
.geoapta-logo-frame { align-items: flex-start; display: flex; height: 44px; justify-content: flex-start; overflow: hidden; width: 130px; }
.geoapta-logo { display: block; height: auto; object-fit: initial; transform: translateY(-26px); width: 130px; }
.column-treatment { border: 1px solid var(--cinza-300); border-radius: 12px; margin: 1.1rem 0; padding: .8rem 1rem; }
.column-treatment summary { color: var(--azul-800); cursor: pointer; font-weight: 750; }
.column-treatment__grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: .8rem 0; }
.column-treatment fieldset { border: 1px solid var(--cinza-300); border-radius: 10px; margin: .85rem 0; padding: .8rem; }
.column-treatment__checks { display: grid; gap: .3rem; margin: .6rem 0; max-height: 10rem; overflow: auto; }
.column-treatment__checks label { align-items: center; display: flex; gap: .45rem; }
.column-treatment__hint { color: var(--cinza-700); font-size: .9rem; }

.lead { color: var(--cinza-700); font-size: 1.08rem; max-width: 65ch; }
.eyebrow { color: var(--azul-600); display: block; font-size: .75rem; font-weight: 800; letter-spacing: .12em; margin-bottom: .5rem; text-transform: uppercase; }

/* A página nunca exibe duas etapas: o HTML inicia em "Início" e o router transfere a classe is-active para a tela escolhida. */

.wizard-screen { display: none; }
.wizard-screen.is-active { animation: surgir .3s var(--transicao) both; display: block; }
.wizard-screen[hidden] { display: none; }

@keyframes surgir {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.wizard-progress {
  background: color-mix(in oklab, var(--cinza-300) 70%, transparent);
  border-radius: 999px;
  height: 8px;
  margin: 0 0 1.75rem;
  overflow: hidden;
}

.wizard-progress span {
  background: linear-gradient(90deg, var(--azul-600), var(--verde-600));
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width .35s ease;
  width: 0;
}

@media (max-width: 600px) {
  .app-header > .container { padding-left: 1rem; padding-right: 1rem; }
  .app-header__content { align-items: flex-start; flex-direction: column; justify-content: center; padding-bottom: .7rem; padding-top: .7rem; }
  .app-header__actions { flex-wrap: wrap; }
  .app-logo { height: 32px; max-width: 115px; }
  .app-header__divider { height: 32px; }
  .geoapta-logo-frame { height: 33px; width: 98px; }
  .geoapta-logo { height: auto; transform: translateY(-19px); width: 98px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}