/* =====================================================================
   Sistema de Troca de Recursos entre Pequenos Produtores Rurais
   Folha de estilo unica -- sem framework, sem CDN, sem fonte externa.
   Identidade: papel de campo, tinta quase preta esverdeada, verde lavoura.
   ===================================================================== */

/* --------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* superficies */
    --papel:          #f2f5ee;
    --papel-fundo:    #e8ede3;
    --superficie:     #fbfcf8;
    --superficie-alt: #f6f8f2;

    /* tinta */
    --tinta:        #14201a;
    --tinta-media:  #45564c;
    --tinta-fraca:  #6c7b71;

    /* tracos */
    --linha:       #dce2d6;
    --linha-forte: #c1cbba;

    /* acentos */
    --lavoura:       #1e5c3c;
    --lavoura-forte: #16452d;
    --lavoura-tenue: #e3ece4;
    --ambar:         #856000;
    --ambar-tenue:   #f6eeda;
    --terra:         #8c3d22;
    --terra-tenue:   #f6e6de;

    /* ritmo */
    --raio:     6px;
    --raio-sm:  3px;
    --gap:      1rem;
    --gap-sm:   .5rem;
    --gap-lg:   2rem;
    --largura:  64rem;

    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
    --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular",
             "Liberation Mono", Menlo, monospace;

    --sombra: 0 1px 2px rgba(20, 32, 26, .06);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --papel:          #0f1512;
        --papel-fundo:    #0b100d;
        --superficie:     #161d19;
        --superficie-alt: #1a221d;

        --tinta:        #e6ece5;
        --tinta-media:  #a8b5ab;
        --tinta-fraca:  #7f8d84;

        --linha:       #263029;
        --linha-forte: #364138;

        --lavoura:       #74c191;
        --lavoura-forte: #9ad7b0;
        --lavoura-tenue: #15241b;
        --ambar:         #d9ab52;
        --ambar-tenue:   #2a2214;
        --terra:         #dc8f6d;
        --terra-tenue:   #2c1a13;

        --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    }
}

/* --------------------------------------------------------------
   2. Base
   -------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* O atributo hidden precisa vencer qualquer display de classe. A regra do
   navegador para [hidden] e do user agent, entao ela perde para .botao
   { display: inline-block } -- e um botao marcado hidden continuaria na tela e
   no caminho de tabulacao. Elementos que so fazem sentido com JavaScript
   (#btn-centralizar, #mapa-recado) dependem disto. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tinta);
    background-color: var(--papel);
    background-image: linear-gradient(180deg, var(--papel-fundo) 0, var(--papel) 22rem);
    background-repeat: no-repeat;
}

h1, h2, h3 {
    line-height: 1.2;
    margin: 0 0 .4em;
    font-weight: 600;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem); }
h2 { font-size: 1.1rem; }

p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--lavoura);
    text-decoration-color: color-mix(in srgb, var(--lavoura) 40%, transparent);
    text-underline-offset: .18em;
}
a:hover { color: var(--lavoura-forte); text-decoration-color: currentColor; }

code, .mono, .numero { font-family: var(--fonte-mono); }
code { font-size: .92em; }

:focus-visible {
    outline: 2px solid var(--lavoura);
    outline-offset: 2px;
    border-radius: var(--raio-sm);
}

/* atalho de teclado para o conteudo */
.pular {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: .6rem 1rem;
    background: var(--superficie);
    border: 1px solid var(--lavoura);
    border-radius: var(--raio);
    z-index: 10;
}
.pular:focus { left: .75rem; top: .75rem; }

.oculto-visual {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------
   3. Cabecalho e navegacao
   -------------------------------------------------------------- */
.topo {
    border-top: 3px solid var(--lavoura);
    border-bottom: 1px solid var(--linha);
    background: var(--superficie);
}

.topo-interno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm) var(--gap);
    max-width: var(--largura);
    margin: 0 auto;
    padding: .7rem clamp(.75rem, 3vw, 1.5rem);
}

.marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: inherit;
    text-decoration: none;
}

.marca-selo {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    background: var(--lavoura);
    border-radius: 60% 0 60% 0;      /* folha */
    transform: rotate(-8deg);
}

.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }

.marca-nome { font-size: 1rem; font-weight: 650; letter-spacing: .01em; }

.marca-local {
    font-size: .72rem;
    color: var(--tinta-fraca);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.navegacao { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }

.nav-link {
    padding: .35rem .7rem;
    border-radius: var(--raio-sm);
    color: var(--tinta-media);
    font-size: .92rem;
    text-decoration: none;
}
.nav-link:hover { background: var(--superficie-alt); color: var(--tinta); }

.nav-link.active {
    color: var(--lavoura);
    background: var(--lavoura-tenue);
    box-shadow: inset 0 -2px 0 var(--lavoura);
}

/* Nome de quem esta conectado. Separado dos links por uma divisoria fina para
   nao ser lido como mais um item de menu, e truncado para que um nome longo
   nao empurre o botao Sair para fora da barra. */
.nav-usuario {
    max-width: 12rem;
    margin-left: .5rem;
    padding-left: .75rem;
    border-left: 1px solid var(--linha);
    overflow: hidden;
    color: var(--tinta-fraca);
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O logout e um POST com CSRF, entao precisa de <form>. Ele nao pode virar um
   bloco dentro do flex da navegacao. */
.nav-form { display: flex; margin: 0; }

/* O botao herda .nav-link, mas <button> traz fundo e borda do navegador --
   sem estes zeramentos ele aparece como caixa cinza fora da identidade. */
.nav-sair {
    border: 1px solid transparent;
    background: none;
    font: inherit;
    font-size: .92rem;
    line-height: inherit;
    cursor: pointer;
}
.nav-sair:hover { border-color: var(--linha-forte); color: var(--terra); }

/* --------------------------------------------------------------
   4. Estrutura da pagina
   -------------------------------------------------------------- */
.conteudo {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    max-width: var(--largura);
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 2.5rem) clamp(.75rem, 3vw, 1.5rem) 3rem;
}

.pagina-cabecalho { display: flex; flex-direction: column; gap: .35rem; }

.sobrelinha {
    margin: 0;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

.pagina-cabecalho h1 { margin: 0; max-width: 30ch; }

.etapa {
    margin: 0;
    align-self: start;
    padding: .2rem .55rem;
    font-size: .82rem;
    color: var(--lavoura);
    background: var(--lavoura-tenue);
    border: 1px solid color-mix(in srgb, var(--lavoura) 25%, transparent);
    border-radius: var(--raio-sm);
}

.secao { display: flex; flex-direction: column; gap: .9rem; }

.secao h2 {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--linha);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-media);
}

.contagem {
    font-family: var(--fonte-mono);
    font-size: .8rem;
    letter-spacing: 0;
    color: var(--tinta-fraca);
}

.vazio { color: var(--tinta-fraca); font-size: .92rem; }

/* --------------------------------------------------------------
   5. Faixa de situacao
   -------------------------------------------------------------- */
.faixa {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .9rem 1rem;
    border: 1px solid var(--linha-forte);
    border-left-width: 4px;
    border-radius: var(--raio);
    background: var(--superficie);
}

.faixa--ok       { border-left-color: var(--lavoura); background: var(--lavoura-tenue); }
.faixa--atencao  { border-left-color: var(--ambar);   background: var(--ambar-tenue); }

.faixa-selo {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.6rem; height: 1.6rem;
    border-radius: 50%;
    font-size: .95rem;
    font-weight: 700;
    color: var(--superficie);
}
.faixa--ok .faixa-selo      { background: var(--lavoura); }
.faixa--atencao .faixa-selo { background: var(--ambar); }

.faixa-corpo { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.faixa-titulo { margin: 0; font-weight: 600; }

.faixa-lista {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .92rem;
    color: var(--tinta-media);
}
.faixa-lista li + li { margin-top: .25rem; }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .15rem .5rem;
    border: 1px solid var(--linha-forte);
    border-radius: 999px;
    background: var(--superficie);
    font-family: var(--fonte-mono);
    font-size: .78rem;
}
.chip-estado { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.chip--ok    { border-color: color-mix(in srgb, var(--lavoura) 35%, transparent); }
.chip--ok .chip-estado    { color: var(--lavoura); }
.chip--falta { border-color: color-mix(in srgb, var(--terra) 45%, transparent); }
.chip--falta .chip-estado { color: var(--terra); }

/* --------------------------------------------------------------
   6. Cartoes
   -------------------------------------------------------------- */
.grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
    gap: var(--gap);
}

.cartao {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .85rem 1rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra);
    min-width: 0;
}

.cartao--falha { border-color: color-mix(in srgb, var(--terra) 45%, transparent); }

.cartao-rotulo {
    margin: 0;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

.cartao-valor {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.cartao-valor.numero { font-size: 1.6rem; letter-spacing: -.02em; }

.cartao-nota {
    margin: 0;
    font-size: .82rem;
    color: var(--tinta-fraca);
    overflow-wrap: anywhere;
}
.cartao--falha .cartao-nota { color: var(--terra); }

/* --------------------------------------------------------------
   7. Lista de tabelas do banco
   -------------------------------------------------------------- */
.lista-tabelas {
    columns: 11rem auto;
    column-gap: var(--gap);
    margin: 0;
    padding: .6rem .9rem;
    list-style: none;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    font-size: .86rem;
}

.lista-tabelas li {
    break-inside: avoid;
    padding: .12rem 0;
    color: var(--tinta-media);
}
.lista-tabelas li::before {
    content: "·";
    margin-right: .45rem;
    color: var(--lavoura);
}

/* --------------------------------------------------------------
   8. Tabelas
   -------------------------------------------------------------- */
.rolagem {
    overflow-x: auto;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.tabela th,
.tabela td {
    padding: .55rem .85rem;
    text-align: left;
    border-bottom: 1px solid var(--linha);
    vertical-align: top;
}

.tabela thead th {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    background: var(--superficie-alt);
    white-space: nowrap;
}

.tabela tbody th { font-weight: 500; color: var(--tinta-media); }
.tabela tr:last-child th,
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-alt); }

.metodo {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: var(--raio-sm);
    background: var(--lavoura-tenue);
    color: var(--lavoura);
    font-family: var(--fonte-mono);
    font-size: .76rem;
    letter-spacing: .04em;
}

/* --------------------------------------------------------------
   9. Alertas (flash)
   -------------------------------------------------------------- */
.alertas { display: flex; flex-direction: column; gap: .5rem; }

.alerta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin: 0;
    padding: .6rem .85rem;
    border: 1px solid var(--linha-forte);
    border-left-width: 4px;
    border-radius: var(--raio);
    background: var(--superficie);
    font-size: .94rem;
}

.alerta-rotulo {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.alerta--sucesso { border-left-color: var(--lavoura); background: var(--lavoura-tenue); }
.alerta--sucesso .alerta-rotulo { color: var(--lavoura); }
.alerta--aviso   { border-left-color: var(--ambar); background: var(--ambar-tenue); }
.alerta--aviso .alerta-rotulo   { color: var(--ambar); }
.alerta--erro    { border-left-color: var(--terra); background: var(--terra-tenue); }
.alerta--erro .alerta-rotulo    { color: var(--terra); }
.alerta--info    { border-left-color: var(--linha-forte); }
.alerta--info .alerta-rotulo    { color: var(--tinta-fraca); }

/* --------------------------------------------------------------
   10. Proximo passo, botao e pagina de erro
   -------------------------------------------------------------- */
.proximo {
    padding: 1rem 1.1rem;
    border: 1px dashed color-mix(in srgb, var(--lavoura) 45%, transparent);
    border-radius: var(--raio);
    background: var(--lavoura-tenue);
}

.proximo-titulo {
    margin: 0 0 .2rem;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lavoura);
}

.proximo-texto { margin: 0; font-size: 1.05rem; font-weight: 600; }

.botao {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: var(--raio);
    background: var(--lavoura);
    color: var(--superficie);
    font-weight: 600;
    text-decoration: none;
}
.botao:hover { background: var(--lavoura-forte); color: var(--superficie); }

.erro { max-width: 40ch; }

.erro-codigo {
    margin: 0;
    font-family: var(--fonte-mono);
    font-size: 3rem;
    line-height: 1;
    color: var(--linha-forte);
}

.erro-texto { color: var(--tinta-media); }

/* --------------------------------------------------------------
   11. Rodape
   -------------------------------------------------------------- */
.rodape {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 1.1rem clamp(.75rem, 3vw, 1.5rem) 2rem;
    border-top: 1px solid var(--linha);
    color: var(--tinta-fraca);
    font-size: .8rem;
}

.rodape-linha { margin: 0; }
.rodape-fraco { margin-top: .2rem; opacity: .8; }
.rodape-sep { margin: 0 .4rem; color: var(--linha-forte); }

/* --------------------------------------------------------------
   12. Telas estreitas (a partir de 360px) e preferencias
   -------------------------------------------------------------- */
@media (max-width: 30rem) {
    .topo-interno { align-items: flex-start; }
    .navegacao { width: 100%; }
    .nav-link { padding: .35rem .55rem; }
    .cartao-valor.numero { font-size: 1.35rem; }
    .lista-tabelas { columns: 1; }
    .tabela th, .tabela td { padding: .5rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------
   13. Formularios (Etapa 3 -- cadastro e login)
   -------------------------------------------------------------- */
.autenticacao {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: clamp(1.1rem, 3.5vw, 1.75rem);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra);
}

/* Erro do formulario inteiro (credenciais, bloqueio), acima dos campos. */
.form-alerta {
    margin: 0;
    padding: .6rem .85rem;
    border: 1px solid color-mix(in srgb, var(--terra) 45%, transparent);
    border-left-width: 4px;
    border-radius: var(--raio);
    background: var(--terra-tenue);
    color: var(--tinta);
    font-size: .94rem;
}

.form-rodape {
    margin: 0;
    text-align: center;
    font-size: .92rem;
    color: var(--tinta-media);
}

.campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }

.campos-duplo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1.1rem;
}

.rotulo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--tinta-media);
}

.rotulo-nota {
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

.entrada,
.selecao {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--tinta);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
}

.entrada::placeholder { color: var(--tinta-fraca); }

.entrada:hover,
.selecao:hover { border-color: var(--tinta-fraca); }

/* Mantem o raio do controle no foco; o contorno vem da regra global. */
.entrada:focus-visible,
.selecao:focus-visible {
    border-color: var(--lavoura);
    border-radius: var(--raio);
}

.entrada--erro,
.selecao--erro { border-color: var(--terra); background: var(--terra-tenue); }

.campo-dica {
    margin: 0;
    font-size: .82rem;
    color: var(--tinta-media);
}

.campo-erro {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin: 0;
    font-size: .85rem;
    font-weight: 500;
    color: var(--terra);
}
.campo-erro::before {
    content: "!";
    flex: none;
    font-weight: 700;
}

/* Consentimento LGPD: caixa e texto na mesma linha, alvo de clique inteiro. */
.campo--consentimento {
    padding: .8rem .9rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie-alt);
}

.consentimento {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--tinta-media);
    cursor: pointer;
}

.caixa {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: .22rem 0 0;
    accent-color: var(--lavoura);
    cursor: pointer;
}

.consentimento-texto { min-width: 0; }

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    align-items: center;
}

/* O <button> nao herda fonte nem cursor: completa o .botao ja definido. */
button.botao {
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
}

.botao--secundario {
    background: transparent;
    color: var(--lavoura);
    border-color: var(--linha-forte);
}
.botao--secundario:hover {
    background: var(--lavoura-tenue);
    color: var(--lavoura-forte);
    border-color: var(--lavoura);
}

/* --------------------------------------------------------------
   14. Cartao do painel do produtor
   -------------------------------------------------------------- */
.painel-cartao {
    padding: 1rem 1.1rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra);
}

.painel-cartao--acao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

.painel-cartao-texto {
    margin: 0;
    font-size: .92rem;
    color: var(--tinta-media);
    overflow-wrap: anywhere;
}

.form-sair { margin: 0; }

.resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: .9rem var(--gap);
    margin: 0;
}

.resumo-item { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.resumo-rotulo {
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

.resumo-valor {
    margin: 0;
    font-size: 1rem;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.resumo-vazio { color: var(--tinta-fraca); font-style: italic; }

/* --------------------------------------------------------------
   15. Lista de proximas etapas
   -------------------------------------------------------------- */
.etapas-lista {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    counter-reset: etapa;
    margin: 0;
    padding: 0;
    list-style: none;
}

.etapas-item {
    counter-increment: etapa;
    position: relative;
    padding: .7rem .9rem .7rem 2.6rem;
    border: 1px solid var(--linha);
    border-left: 3px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie);
}

.etapas-item::before {
    content: counter(etapa);
    position: absolute;
    left: .85rem;
    top: .72rem;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--lavoura-tenue);
    color: var(--lavoura);
    font-family: var(--fonte-mono);
    font-size: .78rem;
    font-weight: 700;
}

.etapas-titulo { margin: 0; font-weight: 600; }

.etapas-texto {
    margin: .15rem 0 0;
    font-size: .9rem;
    color: var(--tinta-media);
}

/* --------------------------------------------------------------
   16. Telas estreitas -- ajustes das telas da Etapa 3
   -------------------------------------------------------------- */
@media (max-width: 30rem) {
    .campos-duplo { gap: 1.1rem; grid-template-columns: 1fr; }
    .painel-cartao--acao { align-items: flex-start; }
    .form-sair, .form-sair .botao { width: 100%; text-align: center; }
    .etapas-item { padding-left: 2.4rem; }
}

/* --------------------------------------------------------------
   17. Perfil do produtor (Etapa 4 -- dados da propriedade)
   -------------------------------------------------------------- */
.perfil {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
}

.perfil-form {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* Cada parte do formulario e um fieldset com a mesma moldura dos cartoes.
   min-inline-size: 0 desfaz a largura minima automatica do fieldset, que
   senao estoura o container quando um filho e uma grade. */
.bloco {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-inline-size: 0;
    margin: 0;
    padding: clamp(1.1rem, 3.5vw, 1.75rem);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra);
}

/* A margem negativa alinha o texto da legenda com a borda do bloco. */
.bloco-legenda {
    padding: 0 .45rem;
    margin-inline-start: -.45rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-media);
}

/* Dado que aparece mas nao se edita nesta etapa (o e-mail). O tracejado diz,
   sem precisar de texto, que ali nao ha campo para digitar. */
.valor-fixo {
    margin: 0;
    padding: .5rem .65rem;
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie-alt);
    color: var(--tinta-media);
    overflow-wrap: anywhere;
}

/* Coordenada e numero: o monoespacado alinha sinal e casas decimais. */
.entrada--numero { font-family: var(--fonte-mono); }

.acoes--perfil { padding-top: .2rem; }

/* --------------------------------------------------------------
   18. Mapa da localizacao (Leaflet local, sem CDN)
   -------------------------------------------------------------- */
.mapa-bloco { gap: .9rem; }

/* A altura mora aqui e nunca no HTML: o Leaflet mede o container depois que o
   CSS ja resolveu, e um container sem altura nao desenha nada.
   position + z-index abrem um contexto de empilhamento; com ele as camadas
   (z-index 400) e os controles (1000) do Leaflet ficam presos dentro do mapa,
   sem subir por cima da barra de navegacao nem do link de pular conteudo. */
.mapa {
    position: relative;
    z-index: 0;
    height: 380px;
    overflow: hidden;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie-alt);
}

/* leaflet.css e carregado depois de app.css e repinta o fundo do container
   (#ddd) com a mesma especificidade. O seletor duplo devolve a cor do tema. */
.mapa.leaflet-container {
    background: var(--superficie-alt);
    font-family: var(--fonte);
    font-size: .8rem;
}

/* Enquanto o Leaflet nao montou nada dentro da div ela continua :empty --
   entao o texto de data-vazio explica como seguir sem o mapa. Assim que o
   mapa monta, a div deixa de ser vazia e o recado some sozinho. */
.mapa:empty {
    display: grid;
    place-items: center;
}

.mapa:empty::before {
    content: attr(data-vazio);
    max-width: 34ch;
    padding: 1.25rem;
    color: var(--tinta-fraca);
    font-size: .9rem;
    text-align: center;
}

/* Recado de contingencia quando as imagens do mapa nao chegam. Fica hidden ate
   o mapa.js revelar no primeiro erro de imagem -- o data-vazio acima nao serve
   nesse caso, porque a div ja deixou de ser :empty. */
.mapa-recado {
    margin: 0;
    padding: .7rem .9rem;
    border-radius: var(--raio);
    background: var(--ambar-tenue);
    color: var(--tinta);
    font-size: .92rem;
}

/* Aviso acima do mapa, no mesmo desenho da faixa e do alerta. */
.mapa-aviso {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin: 0;
    padding: .7rem .9rem;
    border: 1px solid var(--linha-forte);
    border-left-width: 4px;
    border-radius: var(--raio);
    background: var(--superficie);
    font-size: .94rem;
}

.mapa-aviso-rotulo {
    flex: none;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mapa-aviso-texto { flex: 1 1 18rem; min-width: 0; }

/* Localizacao provisoria: cor de atencao, a mesma da faixa e do alerta. */
.mapa-aviso--atencao {
    border-color: color-mix(in srgb, var(--ambar) 40%, transparent);
    border-left-color: var(--ambar);
    background: var(--ambar-tenue);
}
.mapa-aviso--atencao .mapa-aviso-rotulo { color: var(--ambar); }

/* Ja marcada: confirmacao discreta, sem peso de aviso. */
.mapa-aviso--ok {
    border-color: color-mix(in srgb, var(--lavoura) 25%, transparent);
    border-left-color: var(--lavoura);
    background: var(--lavoura-tenue);
    font-size: .9rem;
    color: var(--tinta-media);
}
.mapa-aviso--ok .mapa-aviso-rotulo { color: var(--lavoura); }

/* --------------------------------------------------------------
   19. Telas estreitas -- ajustes das telas da Etapa 4
   -------------------------------------------------------------- */
@media (max-width: 48rem) {
    .mapa { height: 320px; }
}

@media (max-width: 30rem) {
    .bloco { padding: 1rem .9rem; }
    .mapa { height: 260px; }
    .acoes--perfil .botao { flex: 1 1 100%; text-align: center; }
}

/* --------------------------------------------------------------
   20. Duas classes orfas -- as views das Etapas 3 e 4 ja as usavam
   -------------------------------------------------------------- */

/* .alerta e uma linha de tres partes: rotulo, texto e -- no painel -- um link
   de acao ("Marcar no mapa"). Como .alerta e flex com wrap, sem base de
   largura o texto encolhe ate o rotulo e o link ficarem grudados nele. Com
   1 1 18rem o texto toma a sobra na tela larga e empurra o link para a linha
   de baixo quando nao cabe mais; min-width: 0 libera a quebra dentro do
   proprio texto, que senao estoura o container. */
.alerta-texto {
    flex: 1 1 18rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* .campo--fixo e um campo sem controle: rotulo, .valor-fixo e dica (hoje, o
   e-mail no perfil). Como nao ha <input>, nao existe foco nem estado de erro
   para sinalizar -- entao o rotulo perde o peso do rotulo de um campo
   editavel, para a linha nao prometer uma caixa de digitar que nao existe. O
   tracejado do .valor-fixo ja da o recado visual; aqui so se acerta o tom. */
.campo--fixo .rotulo { font-weight: 500; color: var(--tinta-fraca); }
.campo--fixo .campo-dica { color: var(--tinta-fraca); }

/* --------------------------------------------------------------
   21. Ofertas e necessidades (Etapas 5 e 6)
   -------------------------------------------------------------- */

/* Formulario de recurso. .conteudo tem 64rem e uma linha de campo dessa
   largura cansa de ler; 46rem mantem o formulario proximo do desenho do
   perfil sem precisar mexer no .formulario, que tambem serve ao login. */
.recurso-form {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
}

.recurso-lista {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cartao de borda fina, sem sombra: sao muitos itens em coluna e a sombra do
   .cartao, repetida dez vezes, vira sujeira na pagina. A borda basta para
   separar um item do outro. Nada de overflow: hidden aqui -- ele cortaria o
   contorno de foco dos botoes que ficam colados na borda de baixo. */
.recurso-item {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
    padding: .9rem 1rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
}

/* Item que saiu de circulacao (reservado, trocado, arquivado). O tracejado e a
   superficie recuada dizem "isto nao esta valendo agora" sem usar opacity, que
   derrubaria o contraste do texto junto com o destaque. */
.recurso-item--inativo {
    border-style: dashed;
    background: var(--superficie-alt);
}
.recurso-item--inativo .recurso-titulo { color: var(--tinta-media); }

.recurso-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem .8rem;
}

.recurso-titulo {
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Nome da categoria em destaque e o tipo como sobrelinha, no mesmo desenho de
   .sobrelinha e .cartao-rotulo. O :not([class]) no <span> e proposital: quem
   escrever <span class="prioridade"> aqui dentro mantem o estilo do proprio
   selo, sem esta regra atropelar a cor dele. */
.recurso-categoria {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem .6rem;
    margin: 0;
    min-width: 0;
    font-size: .92rem;
    color: var(--tinta-media);
}
.recurso-categoria strong { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.recurso-categoria > span:not([class]) {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

/* Quantidade, janela de datas, raio, prioridade. A grade cai sozinha para uma
   coluna quando 8.5rem nao cabem -- em 360px o item fica empilhado sem
   nenhuma media query. */
.recurso-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: .5rem .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.recurso-meta-item {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    min-width: 0;
    font-size: .92rem;
}
.recurso-meta-item > span:not([class]) {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}
.recurso-meta-item strong { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.recurso-item--inativo .recurso-meta-item strong { color: var(--tinta-media); }

/* Rodape do item. O filete de cima separa a leitura da acao -- sem ele o
   "Arquivar" parece mais um dado do recurso. */
.recurso-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-sm);
    padding-top: .6rem;
    border-top: 1px solid var(--linha);
}
.recurso-acoes form { display: flex; margin: 0; }
.recurso-acoes .botao { padding: .35rem .8rem; font-size: .92rem; }

/* No lugar dos botoes, quando a oferta esta reservada ou ja foi trocada: o
   motivo, em portugues. Cor de atencao (nao de erro) porque nada deu errado --
   o recurso so esta comprometido com um ciclo que ainda nao foi decidido. */
.recurso-bloqueio {
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: .6rem .8rem;
    border: 1px solid color-mix(in srgb, var(--ambar) 35%, transparent);
    border-left: 3px solid var(--ambar);
    border-radius: var(--raio-sm);
    background: var(--ambar-tenue);
    color: var(--tinta-media);
    font-size: .9rem;
}
.recurso-bloqueio::before {
    content: "!";
    flex: none;
    font-weight: 700;
    color: var(--ambar);
}

/* --------------------------------------------------------------
   22. Selos de estado
   -------------------------------------------------------------- */

/* Pastilha do status. flex: none impede que ela seja espremida pelo titulo do
   item, e white-space: nowrap mantem "Disponivel" em uma linha so. */
.selo {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .14rem .55rem;
    border: 1px solid var(--linha-forte);
    border-radius: 999px;
    background: var(--superficie-alt);
    color: var(--tinta-media);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Em circulacao: verde lavoura sobre o verde tenue, o mesmo par de .faixa--ok. */
.selo--disponivel,
.selo--ativo {
    border-color: color-mix(in srgb, var(--lavoura) 35%, transparent);
    background: var(--lavoura-tenue);
    color: var(--lavoura);
}

/* Comprometido com um ciclo que aguarda confirmacao: ambar, a mesma cor de
   .faixa--atencao e de .recurso-bloqueio, que explica o porque logo abaixo. */
.selo--reservado {
    border-color: color-mix(in srgb, var(--ambar) 40%, transparent);
    background: var(--ambar-tenue);
    color: var(--ambar);
}

/* Concluido. O contrato nao fixou cor para 'trocado' nem para 'atendido': sao
   os dois desfechos felizes, entao ficam no verde -- mas cheio, e nao tenue,
   para nao serem confundidos com um recurso que ainda esta em circulacao. */
.selo--trocado,
.selo--atendido {
    border-color: var(--lavoura);
    background: var(--lavoura);
    color: var(--superficie);
}

/* Retirado pelo proprio produtor: neutro. Nada aconteceu de errado nem de bom;
   e historico, e some do primeiro plano. */
.selo--arquivado,
.selo--cancelado {
    border-color: var(--linha-forte);
    background: var(--superficie-alt);
    color: var(--tinta-fraca);
}

/* Venceu sem ser atendido: terra. E a unica saida involuntaria da lista, e o
   produtor precisa notar que perdeu a janela. */
.selo--expirado {
    border-color: color-mix(in srgb, var(--terra) 45%, transparent);
    background: var(--terra-tenue);
    color: var(--terra);
}

/* --------------------------------------------------------------
   23. Faixas de prioridade (necessidades)
   -------------------------------------------------------------- */

/* Retangulo com faixa lateral, deliberadamente diferente da pastilha redonda
   do .selo: numa mesma linha o produtor le duas informacoes distintas
   (situacao e urgencia) e a forma ja as separa antes da cor.
   A escala sobe do neutro ao terra: 1 baixa, 2 media, 3 alta. */
.prioridade {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .14rem .55rem;
    border: 1px solid var(--linha-forte);
    border-left: 3px solid var(--linha-forte);
    border-radius: var(--raio-sm);
    background: var(--superficie-alt);
    color: var(--tinta-media);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.prioridade--1 { color: var(--tinta-fraca); }

.prioridade--2 {
    border-color: color-mix(in srgb, var(--ambar) 35%, transparent);
    border-left-color: var(--ambar);
    background: var(--ambar-tenue);
    color: var(--ambar);
}

.prioridade--3 {
    border-color: color-mix(in srgb, var(--terra) 40%, transparent);
    border-left-color: var(--terra);
    background: var(--terra-tenue);
    color: var(--terra);
}

/* --------------------------------------------------------------
   24. Estado vazio de tela inteira
   -------------------------------------------------------------- */

/* .vazio nasceu como uma linha de texto (<p class="vazio">) e continua assim
   nas telas de inicio e painel. Quando a ausencia E a tela -- nenhuma oferta
   cadastrada -- ela precisa virar um bloco que explica e convida. O seletor
   qualificado por elemento separa os dois usos sem redefinir nada do que ja
   existe: <p class="vazio"> segue linha, <div class="vazio"> vira bloco.
   O tracejado repete o vocabulario do .proximo e do .valor-fixo: moldura de
   algo que ainda nao foi preenchido. */
div.vazio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    padding: clamp(1.1rem, 4vw, 1.75rem);
    border: 1px dashed color-mix(in srgb, var(--lavoura) 40%, transparent);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--tinta-media);
    font-size: 1rem;
}
div.vazio h3 { margin: 0; font-size: 1.05rem; color: var(--tinta); }
div.vazio p { margin: 0; max-width: 62ch; }

/* --------------------------------------------------------------
   25. Foco de teclado nas telas de recurso
   -------------------------------------------------------------- */

/* A regra global de :focus-visible ja pinta o contorno, mas ela tambem impoe
   border-radius: var(--raio-sm) a qualquer elemento focado -- e um .botao
   focado encolheria o proprio canto no meio da navegacao por teclado. Aqui o
   raio do botao e devolvido, como .entrada:focus-visible ja faz com os campos. */
.recurso-acoes .botao:focus-visible,
.recurso-form .botao:focus-visible,
div.vazio .botao:focus-visible {
    outline: 2px solid var(--lavoura);
    outline-offset: 2px;
    border-radius: var(--raio);
}

/* Tabulando por uma lista longa, o contorno sozinho diz qual botao esta em
   foco mas nao de qual item ele e. A borda do cartao reforca o conjunto. */
.recurso-item:focus-within { border-color: var(--linha-forte); }

/* --------------------------------------------------------------
   26. Telas estreitas -- ajustes das telas das Etapas 5 e 6
   -------------------------------------------------------------- */
@media (max-width: 30rem) {
    .recurso-item { padding: .8rem .85rem; }
    .recurso-titulo { flex-basis: 100%; }
    .recurso-meta { grid-template-columns: 1fr; }

    /* Em 360px dois botoes lado a lado ficam com alvo de toque estreito
       demais; cada um passa a ocupar a linha inteira. */
    .recurso-acoes { gap: .45rem; }
    .recurso-acoes > * { flex: 1 1 100%; }
    .recurso-acoes .botao { width: 100%; text-align: center; }

    div.vazio { align-items: stretch; }
    div.vazio .botao { text-align: center; }
}

/* Botao principal logo abaixo do titulo da pagina: sem isto ele encosta no h1. */
.pagina-cabecalho > .acoes { margin-top: var(--gap-sm); }

/* --------------------------------------------------------------
   27. Area administrativa
   -------------------------------------------------------------- */
/* Borda de cima em ambar: o administrador nunca confunde em que site esta. */
.topo--admin { border-top-color: var(--ambar); }

.nav-papel {
    padding: .12rem .5rem;
    border: 1px solid color-mix(in srgb, var(--ambar) 55%, transparent);
    border-radius: 999px;
    color: var(--ambar);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.chip--proxima {
    border-color: color-mix(in srgb, var(--ambar) 55%, transparent);
    color: var(--ambar);
}

/* Estado da etapa dentro do titulo: afastado do texto, alinhado a ele. */
.etapas-titulo .chip { margin-left: .5rem; vertical-align: .1em; }

/* --------------------------------------------------------------
   28. Pagina de apresentacao (inicio publico)
   A serifada so aparece aqui, nos titulos: e a voz de almanaque do
   agricultor. O restante do sistema segue a sans do sistema.
   -------------------------------------------------------------- */
:root {
    --fonte-titulo: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                    Georgia, serif;
}

.ap-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: var(--gap-lg);
    padding: clamp(.5rem, 3vw, 2.5rem) 0 var(--gap);
}

.ap-hero-texto { display: flex; flex-direction: column; gap: var(--gap); }
.ap-hero-texto .sobrelinha,
.ap-hero-texto .acoes { margin: 0; }

.ap-titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.ap-lede {
    margin: 0;
    max-width: 34rem;
    font-size: 1.1rem;
    color: var(--tinta-media);
}

.ap-figura {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin: 0;
}

.ap-legenda {
    max-width: 26rem;
    font-size: .9rem;
    color: var(--tinta-fraca);
    text-align: center;
}

/* A roda de troca -- a assinatura da pagina. As setas tracejadas andam
   devagar no sentido da troca: o recurso circulando entre os tres. */
.ciclo { width: 100%; max-width: 24rem; height: auto; overflow: visible; }
.ciclo-trilho { fill: none; stroke: var(--linha); stroke-width: 10; }

.ciclo-seta {
    fill: none;
    stroke: var(--lavoura);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 7 7;
    animation: ciclo-girar 2.8s linear infinite;
}

.ciclo-ponta { fill: var(--lavoura); }
.ciclo-no circle { fill: var(--superficie); stroke: var(--lavoura); stroke-width: 2.5; }
.ciclo-no text { fill: var(--tinta); font: 600 15px var(--fonte); }
.ciclo-recurso { fill: var(--lavoura); font: italic 600 15px var(--fonte-titulo); }
.ciclo-centro { fill: var(--tinta-fraca); font: 600 11px var(--fonte); letter-spacing: .12em; }

@keyframes ciclo-girar { to { stroke-dashoffset: -28; } }

/* Secoes da apresentacao. Nao usam .secao de proposito: la o h2 e um rotulo
   pequeno em caixa alta; aqui o titulo e o assunto. */
.ap-secao {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    scroll-margin-top: 1.5rem;
}

.ap-secao-cabeca { display: flex; flex-direction: column; gap: .3rem; }
.ap-secao-cabeca .sobrelinha { margin: 0; }

.ap-secao-titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
}

.ap-duas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    gap: var(--gap-lg);
}

.ap-texto {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    max-width: 36rem;
    color: var(--tinta-media);
}
.ap-texto p { margin: 0; }

/* Calendario do trator: doze meses, duas linhas, tres estados. */
.calendario-figura {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 0;
    padding: 1rem 1.1rem;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.calendario { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: .8rem; }
.calendario caption {
    caption-side: top;
    padding-bottom: .5rem;
    font-weight: 600;
    color: var(--tinta);
    text-align: left;
}
.calendario th { font-weight: 500; color: var(--tinta-fraca); }
.calendario thead th {
    padding-bottom: .15rem;
    font-family: var(--fonte-mono);
    font-size: .7rem;
    text-align: center;
}
.calendario abbr { text-decoration: none; }
/* O rotulo da linha quebra em duas: sem quebra ele empurrava novembro e
   dezembro -- justamente os meses que contam a historia -- para fora da area
   visivel. */
.calendario tbody th {
    max-width: 7rem;
    padding-right: .5rem;
    color: var(--tinta-media);
    line-height: 1.25;
    text-align: left;
}

.calendario-mes {
    height: 1.9rem;
    min-width: 1.3rem;
    border-radius: var(--raio-sm);
    background: var(--superficie-alt);
}

/* No celular os doze meses precisam caber sem rolagem, pelo mesmo motivo. */
@media (max-width: 30rem) {
    .calendario { border-spacing: 2px; }
    .calendario thead th { font-size: .6rem; }
    .calendario tbody th { max-width: 4.6rem; font-size: .72rem; }
    .calendario-mes { height: 1.6rem; min-width: .95rem; }
    .calendario-figura { padding: .8rem .7rem; }
}

.calendario-mes--uso,
.calendario-chave--uso::before { background: var(--lavoura); }

.calendario-mes--livre,
.calendario-chave--livre::before {
    background: var(--lavoura-tenue);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lavoura) 30%, transparent);
}

.calendario-mes--falta,
.calendario-chave--falta::before { background: var(--terra); }

.calendario-legenda { font-size: .85rem; color: var(--tinta-media); }
.calendario-chaves { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .45rem; }

.calendario-chave {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--tinta-fraca);
}
.calendario-chave::before { content: ""; width: .85rem; height: .85rem; border-radius: 2px; }

/* Como funciona: sequencia de verdade, entao o numero tem razao de estar ali. */
.ap-passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--gap-lg);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: passo;
}

.ap-passo {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding-top: .9rem;
    border-top: 1px solid var(--linha-forte);
    counter-increment: passo;
}

.ap-passo::before {
    content: counter(passo);
    font-family: var(--fonte-titulo);
    font-size: 2.1rem;
    line-height: 1;
    color: var(--lavoura);
}

.ap-passo h3 { margin: 0; font-size: 1.05rem; }
.ap-passo p { margin: 0; font-size: .95rem; color: var(--tinta-media); }

/* Objetivo, missao e para quem. */
.ap-proposito {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--gap);
}

.ap-proposito-item {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.1rem;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.ap-proposito-item h3 {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 1.2rem;
    color: var(--lavoura);
}
.ap-proposito-item p { margin: 0; color: var(--tinta-media); }

/* Principios: o marcador e a folha da marca, nao um ponto qualquer. */
.ap-principios { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ap-principios li { position: relative; padding-left: 1.4rem; color: var(--tinta-media); }
.ap-principios li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: .65rem;
    height: .65rem;
    background: var(--lavoura);
    border-radius: 60% 0 60% 0;
    transform: rotate(-8deg);
}
.ap-principios strong { color: var(--tinta); }

/* Perguntas frequentes: <details> nativo, abre no teclado sem JavaScript. */
.ap-faq { display: flex; flex-direction: column; border-top: 1px solid var(--linha); }
.ap-pergunta { border-bottom: 1px solid var(--linha); }

.ap-pergunta summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem .25rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}
.ap-pergunta summary::-webkit-details-marker { display: none; }
.ap-pergunta summary::after {
    content: "+";
    flex: none;
    font-family: var(--fonte-mono);
    font-size: 1.15rem;
    color: var(--lavoura);
}
.ap-pergunta[open] summary::after { content: "\2212"; }
.ap-pergunta summary:hover { color: var(--lavoura); }
.ap-pergunta p { max-width: 44rem; margin: 0 .25rem 1rem; color: var(--tinta-media); }

/* Chamada final. */
.ap-chamada {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--lavoura-tenue);
    border: 1px solid color-mix(in srgb, var(--lavoura) 25%, transparent);
    border-radius: var(--raio);
}
.ap-chamada p { max-width: 36rem; margin: 0; color: var(--tinta-media); }
.ap-chamada .acoes { margin: 0; }

@media (max-width: 52rem) {
    .ap-hero,
    .ap-duas { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .ciclo-seta { animation: none; }
}

/* --------------------------------------------------------------
   29. Trocas do produtor (ciclos propostos)
   -------------------------------------------------------------- */
/* Na tabela da roda, as linhas em que o produtor entrega ou recebe. */
.tabela tr.linha-voce td { background: var(--lavoura-tenue); }
.tabela tr.linha-voce td:first-child { box-shadow: inset 3px 0 0 var(--lavoura); }

/* Recusar fica recolhido: um clique a mais protege de recusa sem querer. */
.recusa { margin-top: .25rem; }
.recusa summary {
    display: inline-block;
    padding: .35rem 0;
    color: var(--terra);
    font-weight: 600;
    cursor: pointer;
}
.recusa[open] summary { margin-bottom: .6rem; }
.recusa .formulario { max-width: 32rem; }

/* --------------------------------------------------------------
   30. Avisos (caixa de notificacoes)
   -------------------------------------------------------------- */
/* Selo com o numero de avisos por ler, ao lado do item do menu. */
.nav-selo {
    display: inline-block;
    min-width: 1.25rem;
    margin-left: .35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--ambar);
    color: #1b1205;
    font-family: var(--fonte-mono);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

/* Aviso ainda nao lido: barra na lateral e fundo levemente destacado. */
.aviso-novo {
    border-left: 3px solid var(--ambar);
    background: var(--ambar-tenue);
}

.aviso-texto {
    margin: .4rem 0 0;
    color: var(--tinta-media);
    overflow-wrap: anywhere;
}

.aviso-data {
    margin: .35rem 0 0;
    color: var(--tinta-fraca);
    font-family: var(--fonte-mono);
    font-size: .82rem;
}

/* --------------------------------------------------------------
   31. Avaliacao da troca
   -------------------------------------------------------------- */
.avaliacao-notas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.avaliacao-notas legend { width: 100%; margin-bottom: .5rem; padding: 0; }

.avaliacao-nota {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie);
    cursor: pointer;
}
.avaliacao-nota:hover { border-color: var(--lavoura); }
.avaliacao-nota:has(input:checked) {
    border-color: var(--lavoura);
    background: var(--lavoura-tenue);
    box-shadow: inset 0 0 0 1px var(--lavoura);
}
.avaliacao-nota input { margin: 0; accent-color: var(--lavoura); }

.avaliacao-comentario {
    margin: .5rem 0 0;
    color: var(--tinta-media);
    font-style: italic;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------
   32. Roda gerada e mapas da area administrativa
   -------------------------------------------------------------- */
.roda-figura { margin: .75rem 0 1rem; }
.roda-figura .ciclo {
    display: block;
    width: 100%;
    max-width: 34rem;
    height: auto;
    margin: 0 auto;
}
/* Letra grande de proposito: a roda encolhe junto com a tela (DesenhoCiclo). */
.roda .ciclo-recurso { font-size: 18px; }
.roda .ciclo-no text { font-size: 16px; }
.ciclo-no--destaque circle { fill: var(--lavoura-tenue); stroke-width: 4; }

.mapa-admin {
    height: 30rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie-alt);
}

.mapa-admin-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--tinta-media);
    font-size: .9rem;
}
.mapa-admin-chave { display: inline-flex; align-items: center; gap: .4rem; }
.mapa-admin-chave::before {
    content: "";
    width: .8rem;
    height: .8rem;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--linha-forte);
}
.mapa-admin-chave--confirmada::before { background: #1e7a4c; }
.mapa-admin-chave--provisoria::before { background: #c28a00; }
.mapa-admin-recado { margin: .5rem 0 0; color: var(--ambar); font-size: .9rem; }

@media (max-width: 40rem) {
    .mapa-admin { height: 22rem; }
}

/* --------------------------------------------------------------
   33. Seus dados (exclusao da conta)
   -------------------------------------------------------------- */
/* Recolhido: a unica acao sem volta do sistema pede um clique a mais. */
.zona-perigo { margin-top: 1rem; }
.zona-perigo summary {
    display: inline-block;
    padding: .35rem 0;
    color: var(--terra);
    font-weight: 600;
    cursor: pointer;
}
.zona-perigo[open] summary { margin-bottom: .6rem; }
.zona-perigo .painel-cartao { border-left: 3px solid var(--terra); }
.zona-perigo .formulario { max-width: 26rem; margin-top: .75rem; }
.zona-perigo-lista { margin: .25rem 0 .75rem; padding-left: 1.2rem; color: var(--tinta-media); }

.botao--perigo {
    background: var(--terra);
    border-color: var(--terra);
    color: #fff;
}
.botao--perigo:hover { filter: brightness(1.08); }