/* agroalertas — folha de estilo única.
   Direção: "agronomy paper" — a mesma identidade da agrisentinel-frontend
   (Bricolage Grotesque + IBM Plex Sans/Mono, papel esverdeado, cartões com
   sombra suave). A cor de marca (--brand) é o verde; o fenómeno continua a
   ter o seu próprio matiz, reservado só para isso. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --papel:      #f3f5ef;
  --papel-2:    #ffffff;
  --papel-3:    #eef1e9;
  --tinta:      #12241a;
  --tinta-2:    #5f6b5e;
  --tinta-3:    #869080;
  --linha:      #e3e8dd;
  --linha-forte:#cbd4c2;

  --marca:        #1f7a44;
  --marca-viva:   #46b25b;

  --f-quente: #b0431c;
  --f-frio:   #35678d;
  --f-agua:   #1b8f7a;
  --f-vento:  #6d6450;
  --f-neutro: #869080;

  --ok:       #1f7a44;
  --atencao:  #d99a2b;
  --erro:     #c24a38;

  --raio: 12px;
  --sombra: 0 1px 2px rgba(18,36,26,.05), 0 10px 26px -16px rgba(18,36,26,.22);
  --largura-lateral: 56px;

  --serif: 'Bricolage Grotesque', 'IBM Plex Sans', sans-serif;
  --sans:  'IBM Plex Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --grao: 0.02;
}

/* Tema escuro: pelo sistema quando não há escolha explícita do utilizador,
   ou sempre que a marca data-theme="dark" estiver no <html> (ver o botão de
   alternância). data-theme="light" força claro mesmo com o SO em escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:      #0f1712;
    --papel-2:    #17211a;
    --papel-3:    #1d2a21;
    --tinta:      #e7ede6;
    --tinta-2:    #9db09b;
    --tinta-3:    #6c7c6b;
    --linha:      #2a382e;
    --linha-forte:#3a4c3d;

    --marca:      #46b25b;
    --marca-viva: #6fd485;

    --f-quente: #e07a4a;
    --f-frio:   #7bb0d8;
    --f-agua:   #38c2a8;
    --f-vento:  #b0a68a;
    --f-neutro: #869080;

    --ok:       #52c96b;
    --atencao:  #e0ad4f;
    --erro:     #e0765c;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -16px rgba(0,0,0,.5);
    --grao: 0.04;
  }
}

:root[data-theme="dark"] {
  --papel:      #0f1712;
  --papel-2:    #17211a;
  --papel-3:    #1d2a21;
  --tinta:      #e7ede6;
  --tinta-2:    #9db09b;
  --tinta-3:    #6c7c6b;
  --linha:      #2a382e;
  --linha-forte:#3a4c3d;

  --marca:      #46b25b;
  --marca-viva: #6fd485;

  --f-quente: #e07a4a;
  --f-frio:   #7bb0d8;
  --f-agua:   #38c2a8;
  --f-vento:  #b0a68a;
  --f-neutro: #869080;

  --ok:       #52c96b;
  --atencao:  #e0ad4f;
  --erro:     #e0765c;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -16px rgba(0,0,0,.5);
  --grao: 0.04;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--papel);
  background-image:
    radial-gradient(1200px 520px at 100% -12%, rgba(70,178,91,.08), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(31,122,68,.05), transparent 55%);
  background-attachment: fixed;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}

a { color: inherit; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

.subtitulo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.subtitulo .obsoleto { color: var(--erro); }

.alterna-lang {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  overflow: hidden;
}
.alterna-lang a {
  padding: 5px 10px;
  text-decoration: none;
  color: var(--tinta-2);
}
.alterna-lang a.ativo { background: var(--marca); color: #fff; }
.alterna-lang a:hover:not(.ativo) { color: var(--tinta); }


/* ─────────────────────────── barra lateral ────────────────────────── */

body.tem-barra-lateral { padding-left: var(--largura-lateral); }

nav.principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: var(--largura-lateral);
  padding: 14px 0 16px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.1) blur(8px);
  border-right: 1px solid var(--linha);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1200;
}
:root[data-theme="dark"] nav.principal { background: rgba(15,23,18,.82); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) nav.principal { background: rgba(15,23,18,.82); }
}

nav.principal .marca-lateral img { width: 28px; height: 28px; display: block; }
nav.principal .marca-lateral {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--marca);
  text-decoration: none;
}

nav.principal a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--tinta-2);
  text-decoration: none;
}
nav.principal a svg { width: 17px; height: 17px; }
nav.principal a.ativo,
nav.principal a:hover { color: var(--tinta); background: var(--papel-3); text-decoration: none; }

main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 34px 24px 80px;
}

/* ────────────────────────── tipografia ────────────────────────── */

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 4px;
}
h2 {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 40px 0 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--linha);
}
h3 { font-family: var(--serif); font-weight: 600; font-size: 19px; margin: 0; }

.chapeu {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 6px;
}
.entrada { color: var(--tinta-2); max-width: 62ch; margin: 6px 0 0; }
.nota { font-size: 13px; color: var(--tinta-2); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vazio {
  border: 1px dashed var(--linha-forte);
  padding: 30px;
  text-align: center;
  color: var(--tinta-2);
  font-family: var(--mono);
  font-size: 13px;
}

/* ──────────────────────────── cartões ─────────────────────────── */

.grelha-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.cartao {
  position: relative;
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px 20px 16px 22px;
  text-decoration: none;
  display: block;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  animation: subir .4s ease both;
  overflow: hidden;
}
.cartao::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--f-neutro);
  transition: width .18s ease;
}
.cartao:hover {
  border-color: var(--linha-forte);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(18,36,26,.05), 0 16px 34px -18px rgba(18,36,26,.3);
}
.cartao:hover::before { width: 6px; }
.cartao.f-quente::before { background: var(--f-quente); }
.cartao.f-frio::before   { background: var(--f-frio); }
.cartao.f-agua::before   { background: var(--f-agua); }
.cartao.f-vento::before  { background: var(--f-vento); }
.cartao.calmo::before    { background: var(--linha-forte); }

.cartao .coords {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinta-3);
  letter-spacing: 0.04em;
}
.cartao .contagem {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cartao .contagem.zero { color: var(--tinta-3); }
.cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.cartao-rodape {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-3);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.grelha-cartoes > *:nth-child(1) { animation-delay: .02s }
.grelha-cartoes > *:nth-child(2) { animation-delay: .06s }
.grelha-cartoes > *:nth-child(3) { animation-delay: .10s }
.grelha-cartoes > *:nth-child(4) { animation-delay: .14s }
.grelha-cartoes > *:nth-child(n+5) { animation-delay: .18s }
@media (prefers-reduced-motion: reduce) {
  .cartao { animation: none; }
  * { transition: none !important; }
}

/* ───────────────────────────── avisos ─────────────────────────── */

.aviso {
  border: 1px solid var(--linha);
  border-left: 3px solid var(--f-neutro);
  border-radius: var(--raio);
  background: var(--papel-2);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.aviso.f-quente { border-left-color: var(--f-quente); }
.aviso.f-frio   { border-left-color: var(--f-frio); }
.aviso.f-agua   { border-left-color: var(--f-agua); }
.aviso.f-vento  { border-left-color: var(--f-vento); }

.aviso-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.aviso-id { font-size: 12.5px; color: var(--tinta-3); }
.dias { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.dia {
  font-family: var(--mono);
  font-size: 11.5px;
  border: 1px solid var(--linha-forte);
  padding: 3px 8px;
  white-space: nowrap;
  background: var(--papel);
}
.dia .p { color: var(--tinta-3); margin-left: 6px; }
.dia.iminente { border-color: currentColor; font-weight: 600; }

/* medidor de probabilidade: traços, não barra arredondada */
.medidor { display: inline-flex; gap: 2px; align-items: flex-end;
           height: 15px; vertical-align: -3px; margin-left: 7px; }
.medidor i { width: 4px; height: 6px; background: var(--linha-forte); display: block; }
.medidor i.on { background: currentColor; height: 15px; }

/* ──────────────────────────── crachás ─────────────────────────── */

.crachá, .badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
  display: inline-block;
}
.badge.ok              { color: var(--ok); border-color: currentColor; }
.badge.duvidoso        { color: var(--atencao); border-color: currentColor; }
.badge.limiar_em_falta { color: var(--erro); border-color: currentColor; }
.badge.documentado_nao_operacional { color: var(--atencao); border-color: currentColor; }
.badge.aprox { color: var(--atencao); border-color: currentColor; border-style: dashed; }
.badge.calculavel { color: var(--ok); border-color: currentColor; }
.badge.sem_dados  { color: var(--atencao); border-color: currentColor; }
.badge.sem_limiar { color: var(--erro); border-color: currentColor; }

/* ────────────────────────── pill de estado ───────────────────────
   3 níveis reutilizados no painel, mapa e /limiares — normal/atencao/
   critico, ver web/severidade.py:estado_severidade. */
.estado-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  white-space: nowrap;
}
.estado-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado-pill.normal  { color: var(--ok); }
.estado-pill.atencao { color: var(--atencao); }
.estado-pill.critico { color: var(--erro); }

/* ──────────────────────────── tabelas ─────────────────────────── */

.tabela-envolvente {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-2);
  box-shadow: var(--sombra);
}
th[data-ordenavel] { cursor: pointer; user-select: none; }
th[data-ordenavel]:hover { color: var(--tinta); }
th[data-ordenavel]::after { content: "↕"; margin-left: 5px; opacity: .5; font-size: 9px; }
th[data-ordenavel][data-ordem="asc"]::after  { content: "↑"; opacity: 1; }
th[data-ordenavel][data-ordem="desc"]::after { content: "↓"; opacity: 1; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-align: left;
  font-weight: 500;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linha-forte);
  white-space: nowrap;
}
td { padding: 9px 14px; border-bottom: 1px solid var(--linha); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--papel-3); }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
td.cod { font-family: var(--mono); font-size: 12px; }

.form-limiar { display: flex; gap: 6px; align-items: center; }
.form-limiar input {
  width: 56px;
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 7px;
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  color: var(--tinta);
  text-align: right;
}
.form-limiar .unidade-inline {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta-2);
  margin-left: -2px;
}
.form-limiar button { padding: 5px 12px; font-size: 10.5px; }

/* ───────────────────────────── gráfico ────────────────────────── */

.painel {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-2);
  box-shadow: var(--sombra);
  padding: 18px 20px 10px;
}
.seletor-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.seletor-vars a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid var(--linha-forte);
  padding: 3px 9px;
  color: var(--tinta-2);
}
.seletor-vars a:hover { color: var(--tinta); border-color: var(--tinta-2); }
.seletor-vars a.ativo { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

svg.grafico { width: 100%; height: auto; display: block; overflow: visible; }
svg.grafico .grelha { stroke: var(--linha); stroke-width: 1; }
svg.grafico .banda  { fill: var(--f-quente); opacity: .1; }
svg.grafico .limiar { stroke: var(--erro); stroke-width: 1; stroke-dasharray: 5 4; opacity: .85; }
svg.grafico .linha  { fill: none; stroke: var(--marca); stroke-width: 2; stroke-linejoin: round; }
svg.grafico .ponto  { fill: var(--marca); }
svg.grafico .barra  { fill: var(--f-frio); }
svg.grafico .tick, svg.grafico .unidade, svg.grafico .rot-limiar {
  font-family: var(--mono);
  fill: var(--tinta-3);
  font-size: 10px;
}
svg.grafico .rot-limiar { fill: var(--erro); font-size: 9px; }
svg.grafico .unidade { fill: var(--tinta-2); }

/* ──────────────────────────── formulários ─────────────────────── */

form.folha {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-2);
  box-shadow: var(--sombra);
  padding: 20px 22px;
}
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-bottom: 5px;
}
input[type=text], input[type=number], input[type=email], input[type=date], input[type=password], select {
  width: 100%;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  padding: 8px 10px;
  border-radius: 8px;
}
input:focus, select:focus { outline: 2px solid var(--marca); outline-offset: -2px; }

.culturas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.culturas label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--tinta-2);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--papel);
}
.culturas label:has(input:checked) {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}
.culturas input { accent-color: var(--marca); margin: 0; }

button, .botao {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--marca);
  color: #fff;
  border: 1px solid var(--marca);
  padding: 9px 20px;
  cursor: pointer;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}
button:active, .botao:active { transform: translateY(1px); }
button:hover, .botao:hover { background: var(--marca-viva); border-color: var(--marca-viva); color: #fff; }
button.perigo { background: transparent; color: var(--erro); border-color: var(--erro); }
button.perigo:hover { background: var(--erro); color: #fff; }
button.discreto { background: transparent; color: var(--tinta-2); border-color: var(--linha-forte); }
button.discreto:hover { color: var(--tinta); border-color: var(--tinta); background: transparent; }

/* Seletor de localização (nova exploração) — ver static/mapa.js. */
.seletor-local .morada { display: flex; gap: 8px; }
.seletor-local .morada input { flex: 1; min-width: 0; }
.seletor-local #morada-estado:empty { display: none; }
.seletor-local #morada-estado { margin: 6px 0 0; }
.morada-resultados { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.morada-resultados:empty { display: none; }
.morada-resultados button {
  width: 100%; text-align: left; text-transform: none; letter-spacing: 0;
  font-family: var(--sans); font-size: 12.5px; padding: 6px 12px; border-radius: 8px;
}
.morada-resultados button.escolhido { color: var(--tinta); border-color: var(--marca); }
.mapa {
  height: 360px;
  margin-top: 10px;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  z-index: 0; /* abaixo da barra lateral */
}
.seletor-local .coords {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 6px;
}
@media (max-width: 600px) { .mapa { height: 280px; } }

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

.alerta-erro {
  border: 1px solid var(--erro);
  border-left-width: 3px;
  border-radius: var(--raio);
  color: var(--erro);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 13.5px;
  background: var(--papel-2);
}

/* ────────────────────────────── KPIs ──────────────────────────── */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.kpi {
  --kpi-cor: var(--marca);
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px 18px 18px;
}
.kpi .k-lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.kpi .k-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
  background: linear-gradient(var(--kpi-cor), var(--kpi-cor)) left 100% / 100% 3px no-repeat;
  padding-bottom: 6px;
}
.kpi .k-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 34px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi .k-sub { font-size: 11.5px; color: var(--tinta-2); margin-top: 8px; }

/* ────────────────────────────── mapa ──────────────────────────── */

.mapa-secao {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  background: var(--papel-2);
  overflow: hidden;
  margin-bottom: 22px;
}
#mapa-explora { height: 340px; width: 100%; background: var(--papel-3); }
.mapa-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--linha);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--tinta-2);
}
.mapa-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.mapa-legenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mapa-legenda i.normal  { background: var(--ok); }
.mapa-legenda i.atencao { background: var(--atencao); }
.mapa-legenda i.critico { background: var(--erro); }

/* leaflet popup, retemado para a paleta */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--papel-2); color: var(--tinta); }
.leaflet-popup-content { font-family: var(--sans); font-size: 13px; margin: 10px 12px; }
.leaflet-popup-content b { font-family: var(--serif); }

/* ─────────────────────────── utilitários ──────────────────────── */

.duas-colunas { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .duas-colunas { grid-template-columns: 1fr; } }

.linha-filtros { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.linha-filtros > div { flex: 1 1 150px; }
.linha-filtros button { flex: 0 0 auto; }

.lista-nua { list-style: none; padding: 0; margin: 0; }
.lista-nua li { padding: 9px 0; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lista-nua li:last-child { border-bottom: none; }

.regra { border-bottom: 1px solid var(--linha); padding: 16px 0; }
.regra:last-child { border-bottom: none; }
.regra .condicao { font-family: var(--mono); font-size: 13px; margin: 6px 0 4px; }
.regra .meta { font-family: var(--mono); font-size: 11px; color: var(--tinta-3); letter-spacing: 0.04em; }
.regra .obs { font-size: 13px; color: var(--tinta-2); margin-top: 8px; max-width: 78ch; border-left: 2px solid var(--linha-forte); padding-left: 12px; }


/* ─────────────────────── entrar / registar ─────────────────────── */
/* Mesma composição da entrada do AgriSentinel: painel escuro inclinado à
   esquerda (sempre escuro, nos dois temas), formulário à direita. Ver
   templates/partials/auth_painel.html. */

main.ecra-auth { max-width: none; padding: 0; }

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  min-height: 100vh;
}

.auth-painel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 44px 56px 40px;
  background: linear-gradient(165deg, #0f2116 0%, #12281b 46%, #16321f 100%);
  color: #e9efe6;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}
.auth-painel .curvas {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  opacity: .16;
  stroke: #7fcb8e;
  fill: none;
  stroke-width: 1;
}
.auth-painel .varrimento {
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, rgba(126,203,142,.10) 45%, rgba(126,203,142,.03) 55%, transparent);
  animation: auth-varrer 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes auth-varrer {
  0%, 100% { transform: translateY(-160px); }
  50%      { transform: translateY(100vh); }
}

.auth-texto, .auth-tabela { position: relative; z-index: 2; }


.auth-texto { margin-top: auto; max-width: 460px; }
.auth-chapeu {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9fcb9f;
  margin-bottom: 18px;
}
.auth-chapeu::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7fe08b;
  box-shadow: 0 0 0 3px rgba(127,224,139,.18);
  animation: auth-pulsar 2.4s ease-in-out infinite;
}
@keyframes auth-pulsar { 50% { opacity: .35; } }

.auth-texto h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 16px;
  color: #f7faf4;
}
.auth-texto p { font-size: 14.5px; line-height: 1.6; color: #b8cbb6; max-width: 410px; margin: 0; }

.auth-tabela {
  margin-top: 34px;
  max-width: 560px;
  border: 1px solid rgba(233,239,230,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
  font-family: var(--mono);
}
.auth-tabela-cab, .auth-tabela-linha {
  display: grid;
  grid-template-columns: 1.4fr 1.1fr .5fr .5fr;
  padding: 9px 14px;
  align-items: center;
}
.auth-tabela-cab {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7e9a7e;
  border-bottom: 1px solid rgba(233,239,230,.10);
}
.auth-tabela-linha {
  font-size: 12px;
  color: #dce7d8;
  border-bottom: 1px solid rgba(233,239,230,.07);
}
.auth-tabela-linha .alto  { color: #e8967d; }
.auth-tabela-linha .medio { color: #e0b862; }
.auth-tabela-linha .baixo { color: #7fe08b; }
.auth-tabela-linha .ponto {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e0a63d;
  margin-right: 6px;
  vertical-align: middle;
}
.auth-tabela-pe {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 10px;
  color: #6f8c6e;
}

.auth-form {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}
.auth-form::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--linha-forte) 0 6px, transparent 6px 12px);
}
.auth-lang { position: absolute; top: 24px; right: 28px; }

.auth-cartao { width: 100%; max-width: 372px; }
.auth-logo { display: block; width: 220px; height: auto; margin: 0 0 32px; }
/* O castanho da marca não se lê sobre o papel escuro: no tema escuro o
   logótipo assenta numa placa clara. */
:root[data-theme="dark"] .auth-logo { background: #f3f5ef; padding: 10px 14px; border-radius: 10px; box-sizing: content-box; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-logo { background: #f3f5ef; padding: 10px 14px; border-radius: 10px; box-sizing: content-box; }
}
.auth-cartao h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--tinta);
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
.auth-cartao h2:has(+ .auth-entrada) { margin-bottom: 5px; }
.auth-entrada { color: var(--tinta-2); font-size: 13px; margin: 0 0 26px; }
.auth-cartao .alerta-erro, .auth-cartao .vazio { margin: 0 0 18px; }
.auth-cartao .vazio { padding: 12px 16px; text-align: left; border-radius: 9px; }

.auth-cartao label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--tinta-2);
  margin: 16px 0 6px;
}
.auth-cartao label:first-of-type { margin-top: 0; }
.auth-cartao input[type=text], .auth-cartao input[type=email], .auth-cartao input[type=password] {
  font-family: var(--sans);
  font-size: 14px;
  padding: 11px 13px;
  background: var(--papel-2);
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
.auth-cartao input:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(31,122,68,.14);
}

.campo-password { position: relative; }
.campo-password input { padding-right: 42px !important; }
.auth-cartao .mostrar-password {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--tinta-2);
}
.auth-cartao .mostrar-password svg { width: 18px; height: 18px; }
.auth-cartao .mostrar-password:hover { color: var(--tinta); background: var(--papel-3); }
.auth-cartao .mostrar-password[aria-pressed="true"] { color: var(--marca); }

.auth-esqueceu { margin: 8px 0 0; text-align: right; font-size: 12.5px; }
.auth-esqueceu a { color: var(--tinta-2); }

.auth-cartao .auth-principal, .auth-cartao .auth-google {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 20px;
  border-radius: 10px;
}
.auth-cartao .auth-principal {
  margin-top: 22px;
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}
.auth-cartao .auth-principal:hover { background: var(--marca); border-color: var(--marca); color: #fff; }
.auth-cartao .auth-principal:disabled { opacity: .5; cursor: not-allowed; }
.auth-cartao .auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--papel-2);
  border-color: var(--linha-forte);
  color: var(--tinta);
}
.auth-cartao .auth-google svg { width: 18px; height: 18px; flex: none; }
.auth-cartao .auth-google:hover { background: var(--papel-3); border-color: var(--tinta-2); color: var(--tinta); }

.auth-ou {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.auth-ou::before, .auth-ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

.auth-troca { margin: 22px 0 0; font-size: 13px; color: var(--tinta-2); }
.auth-troca a { color: var(--marca); font-weight: 600; text-decoration: none; }
.auth-troca a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .auth-painel .varrimento { display: none; }
  .auth-chapeu::before { animation: none; }
}

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-painel { clip-path: none; padding: 28px 16px 30px; }
  .auth-texto { margin-top: 26px; }
  .auth-texto h1 { font-size: 26px; }
  .auth-tabela { margin-top: 24px; }
  .auth-form::before { display: none; }
  .auth-form { flex-direction: column; padding: 20px 16px 44px; }
  .auth-lang { position: static; align-self: flex-end; margin-bottom: 18px; }
}
@media (max-width: 520px) {
  .auth-tabela { display: none; }
}