/* =========================================================
   Mini Farm · LEB5051 · estilo compartilhado
   Verde de folha de soja como cor da casa, papel claro de
   fundo, amarelo-grão só para o que está vivo agora.
   Séries dos gráficos: paleta validada (dataviz), não a da casa.
   ========================================================= */

:root {
    --tinta:        #1b2a22;
    --tinta-fraca:  #5c6b62;
    --campo:        #2d6140;
    --campo-escuro: #224b32;
    --campo-claro:  #e4ede6;
    --papel:        #eef0e9;
    --branco:       #ffffff;
    --linha:        #c9d3cb;
    --linha-fraca:  #e3e9e4;
    --grao:         #e0b84a;
    --grao-escuro:  #8a6a12;
    --grao-fundo:   #fdf3d6;
    --erro:         #a93226;
    --erro-fundo:   #fbe9e7;
    --ok-fundo:     #e1efe4;
    --raio:         6px;

    /* séries (validadas com scripts/validate_palette.js, modo claro) */
    --s-nivel:      #1b8a4a;
    --s-massa:      #2a78d6;
    --s-estimada:   #c98500;
    --s-temp:       #c0392b;
    --s-ur:         #2a78d6;
    --s-ueq:        #1b8a4a;
    --s-gas:        #c98500;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.45;
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

:focus-visible { outline: 3px solid var(--grao); outline-offset: 2px; }

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


/* =========================================================
   CABEÇALHO INSTITUCIONAL
   ========================================================= */

.topo {
    background: var(--branco);
    border-bottom: 1px solid var(--linha);
}

.topo-inst {
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px 24px 10px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
}

.topo-inst img.logos { height: 44px; width: auto; display: block; }

.topo-titulo h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.topo-titulo h1 small {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--tinta-fraca);
    margin-top: 2px;
}

.disciplina {
    text-align: right;
    font-size: 14px;
    color: var(--tinta-fraca);
    line-height: 1.35;
}

.disciplina strong { color: var(--tinta); font-weight: 600; display: block; }

.nav {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav a {
    display: inline-block;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--tinta-fraca);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    font-weight: 500;
}

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

.nav a.ativa { color: var(--campo); border-bottom-color: var(--campo); font-weight: 600; }

.nav .estado {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--tinta-fraca);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--papel);
}

.nav .estado .ponto {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--linha);
}

.nav .estado.vivo .ponto { background: var(--grao); box-shadow: 0 0 0 4px rgba(224,184,74,0.3); }

.nav .estado.fora .ponto { background: var(--erro); }


/* =========================================================
   CONTEÚDO
   ========================================================= */

.conteudo {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 24px 56px;
}

.titulo-pagina {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.titulo-pagina h2 { margin: 0; font-size: 24px; font-weight: 650; }

.titulo-pagina p { margin: 0; color: var(--tinta-fraca); max-width: 70ch; }

.grade { display: grid; gap: 18px; }

.grade.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bloco {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 10px;
    padding: 20px 22px;
    min-width: 0;
}

.bloco h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 650;
}

.bloco .nota { margin: 0 0 14px; color: var(--tinta-fraca); font-size: 14px; }

.bloco.cheio { grid-column: 1 / -1; }


/* ---- cartões de valor (stat tiles) ---- */

.cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.cartao {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 10px;
    padding: 14px 16px 12px;
    min-width: 0;
    position: relative;
}

.cartao .rotulo { font-size: 13px; color: var(--tinta-fraca); margin: 0 0 4px; }

.cartao .valor {
    font-size: 30px;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.cartao .valor small { font-size: 15px; font-weight: 500; color: var(--tinta-fraca); margin-left: 3px; }

.cartao .sub { font-size: 13px; color: var(--tinta-fraca); margin-top: 4px; min-height: 1.3em; }

.cartao .marca {
    position: absolute; top: 14px; right: 14px;
    width: 10px; height: 10px; border-radius: 50%;
}

.cartao.sem .valor { color: var(--tinta-fraca); font-weight: 400; }

.selo {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    background: var(--campo-claro); color: var(--campo);
}

.selo.atencao { background: var(--grao-fundo); color: var(--grao-escuro); }
.selo.alerta  { background: var(--erro-fundo); color: var(--erro); }
.selo.neutro  { background: var(--papel); color: var(--tinta-fraca); }


/* ---- avisos ---- */

.avisos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; min-height: 0; }

.aviso-chip {
    font-size: 14px; padding: 6px 12px; border-radius: 999px;
    background: var(--grao-fundo); color: var(--grao-escuro);
}

.aviso-chip.erro { background: var(--erro-fundo); color: var(--erro); }

.aviso-chip a { color: inherit; }

.aviso {
    padding: 12px 14px; border-radius: var(--raio); font-size: 14px;
    margin: 0 0 14px; display: none;
}

.aviso.mostrar { display: block; }
.aviso.alerta { background: var(--grao-fundo); color: var(--grao-escuro); }
.aviso.erro { background: var(--erro-fundo); color: var(--erro); }
.aviso.ok { background: var(--ok-fundo); color: var(--campo); }


/* ---- formulários e botões ---- */

label { display: block; font-size: 14px; color: var(--tinta-fraca); margin-bottom: 5px; }

input[type="text"], input[type="number"], input[type="password"], input[type="datetime-local"], select, textarea {
    width: 100%; height: 42px; padding: 0 12px;
    border: 1.5px solid var(--linha); border-radius: var(--raio); background: var(--branco);
}

textarea { height: auto; padding: 10px 12px; }

input:hover, select:hover { border-color: #9fb0a4; }

button {
    height: 42px; padding: 0 16px; border-radius: var(--raio);
    border: 1.5px solid var(--campo); background: var(--branco); color: var(--campo);
    font-weight: 600; cursor: pointer; white-space: nowrap;
}

button:hover { background: var(--campo-claro); }

button.principal { background: var(--campo); color: var(--branco); }
button.principal:hover { background: var(--campo-escuro); }

button.perigo { border-color: var(--erro); color: var(--erro); }
button.perigo:hover { background: var(--erro-fundo); }

button.discreto { border-color: transparent; color: var(--tinta-fraca); height: auto; padding: 4px 8px; font-weight: 500; font-size: 14px; }
button.discreto:hover { background: var(--papel); color: var(--tinta); }

button:disabled { opacity: 0.5; cursor: default; }

button.pequeno { height: 34px; padding: 0 12px; font-size: 14px; }

.linha { display: grid; gap: 10px; align-items: end; margin-bottom: 12px; }
.linha.l2 { grid-template-columns: 1fr auto; }
.linha.l3 { grid-template-columns: 1fr 1fr auto; }
.linha.l4 { grid-template-columns: 1fr 1fr 1fr auto; }

.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.detalhe { font-size: 14px; color: var(--tinta-fraca); }

.ultimo { font-size: 13px; color: var(--tinta-fraca); margin-top: 10px; }

.segmentos { display: inline-flex; border: 1.5px solid var(--linha); border-radius: var(--raio); overflow: hidden; }

.segmentos button {
    border: none; border-radius: 0; height: 34px; padding: 0 12px; font-size: 14px;
    color: var(--tinta-fraca); background: var(--branco); font-weight: 500;
}

.segmentos button + button { border-left: 1.5px solid var(--linha); }

.segmentos button.ativo { background: var(--campo); color: var(--branco); }

input[type="range"] { width: 100%; accent-color: var(--campo); }


/* ---- passos (calibração) ---- */

.passos { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: p; }

.passos li {
    counter-increment: p; display: grid; grid-template-columns: 26px 1fr; gap: 10px;
    padding: 8px 0; border-top: 1px solid var(--linha-fraca); font-size: 15px;
}

.passos li::before {
    content: counter(p); width: 22px; height: 22px; border-radius: 50%;
    background: var(--campo-claro); color: var(--campo); font-size: 12px; font-weight: 700;
    display: grid; place-items: center; margin-top: 1px;
}

.passos li > div { min-width: 0; }

.passos li .acoes { margin-top: 8px; }

.passos li .linha { margin-top: 8px; margin-bottom: 0; }


/* ---- progresso de tarefa ---- */

.progresso { margin: 10px 0 0; display: none; }
.progresso.mostrar { display: block; }

.progresso .barra { height: 8px; border-radius: 999px; background: var(--linha-fraca); overflow: hidden; }
.progresso .barra > div { height: 100%; width: 0; background: var(--grao); transition: width 0.4s linear; }
.progresso .texto { font-size: 13px; color: var(--tinta-fraca); margin-top: 4px; }


/* ---- tabelas ---- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linha-fraca); vertical-align: top; }

th { color: var(--tinta-fraca); font-weight: 600; font-size: 13px; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

tr.destaque td { background: var(--ok-fundo); }

.tabela-rolagem { overflow: auto; max-height: 360px; }


/* ---- gráficos ---- */

.grafico { position: relative; height: 240px; }

.grafico.alto { height: 320px; }

.grafico canvas { position: absolute; inset: 0; }

.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--tinta-fraca); margin: 0 0 8px; }

.legenda span::before {
    content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px;
    background: var(--cor, var(--linha)); margin-right: 6px; vertical-align: middle;
}

.cabecalho-grafico { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }

.cabecalho-grafico h4 { margin: 0; font-size: 15px; font-weight: 650; }

.cabecalho-grafico .atual { font-size: 14px; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }


/* ---- silo e mapa de zonas ---- */

.silo-area { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; }

.silo-svg { width: 100%; height: auto; display: block; }

.silo-leitura .grande { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.silo-leitura .grande small { font-size: 18px; font-weight: 500; color: var(--tinta-fraca); margin-left: 4px; }

.silo-leitura .lista { margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--tinta-fraca); display: grid; gap: 4px; }

.silo-leitura .lista b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }

.zonas { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; aspect-ratio: 1; max-width: 260px; }

.zonas.r4 { grid-template-columns: repeat(4, 1fr); }

.zonas div {
    background: var(--linha-fraca); border-radius: 2px; position: relative;
    font-size: 9px; color: rgba(0,0,0,0.55); display: grid; place-items: center;
}

.zonas div.centro { outline: 2px solid var(--tinta); outline-offset: -2px; }

.zonas div.invalida { background: repeating-linear-gradient(45deg, #ddd 0 3px, #f3f3f3 3px 6px); color: transparent; }

.escala-zonas { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-fraca); margin-top: 6px; }

.escala-zonas .faixa { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #e8f3ec, #1b8a4a); }


/* ---- chips ---- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px;
    border: 1px solid var(--linha); border-radius: 999px; font-size: 14px; background: var(--papel);
}

.chip.atual { border-color: var(--campo); background: var(--campo-claro); }

.chip button { height: 24px; padding: 0 8px; border: none; border-radius: 999px; background: transparent; color: var(--tinta-fraca); font-weight: 500; font-size: 13px; }

.chip button:hover { background: var(--linha); color: var(--tinta); }


/* ---- login ---- */

.nav a.sair { margin-left: 8px; font-size: 14px; }

.entrar {
    max-width: 420px;
    margin: 48px auto;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 12px;
    padding: 28px 30px 30px;
}

.entrar h2 { margin: 0 0 6px; font-size: 22px; font-weight: 650; }

.entrar p { margin: 0 0 18px; color: var(--tinta-fraca); font-size: 15px; }

.entrar .campo { margin-bottom: 14px; }

.entrar input { height: 46px; }

.entrar button.principal { width: 100%; height: 46px; margin-top: 6px; }


/* =========================================================
   RODAPÉ
   ========================================================= */

.rodape {
    border-top: 1px solid var(--linha);
    background: var(--branco);
}

.rodape-interno {
    max-width: 1320px; margin: 0 auto; padding: 18px 24px 26px;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 14px; color: var(--tinta-fraca);
}

.rodape strong { color: var(--tinta); font-weight: 600; }


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1000px) {
    .grade.c3, .grade.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topo-inst { grid-template-columns: auto 1fr; }
    .disciplina { grid-column: 1 / -1; text-align: left; }
    .disciplina strong { display: inline; }
}

@media (max-width: 680px) {
    .grade.c2, .grade.c3, .grade.c4 { grid-template-columns: 1fr; }
    .cartoes { grid-template-columns: 1fr; }
    .conteudo { padding: 16px 14px 40px; }
    .topo-inst { padding: 10px 14px 6px; gap: 12px; }
    .topo-inst img.logos { height: 34px; }
    .topo-titulo h1 { font-size: 18px; }
    .nav { padding: 0 6px; overflow-x: auto; }
    .nav a { padding: 10px 10px; font-size: 14px; }
    .nav .estado { display: none; }
    .silo-area { grid-template-columns: 1fr; }
    .linha.l3, .linha.l4 { grid-template-columns: 1fr; }
}