/* Os SVG dos gráficos. A regra vive aqui, e não num atributo style, para o CSP
   poder proibir estilo embutido sem abrir exceção. */
.grafico-svg { display: block; max-width: 100%; }

:root {
  --forest: #173d2d;
  --forest-2: #235841;
  --ink: #173028;
  /* Medido: 4,57:1 sobre --soft, 4,84 sobre --paper, 5,37 sobre --surface.
     O valor anterior (#637169) ficava em 4,28 sobre --soft, abaixo do mínimo
     da WCAG AA para texto normal. Conferir com scripts/medir-contraste.mjs. */
  --muted: #5f6c65;
  --paper: #f4f1e8;
  --surface: #fffdf8;
  --line: #d9ddd4;
  --soft: #e8ece3;
  --acid: #d8ee7c;
  --acid-dark: #42611e;
  /* Medido: 4,53:1 com texto branco, no selo do bloco de calcário. Em
     #b75f3d dava 4,45. */
  --clay: #b55e3c;
  /* Texto secundário sobre os fundos ESCUROS (cabeçalho do resultado, hero).
     Medido: 7,74:1 sobre --forest. Escurecer --muted resolveu os fundos claros
     e quebrou estes: são dois problemas opostos e precisam de dois tokens. */
  --muted-no-escuro: #c6d2cb;
  --gold: #dda83a;
  --blue: #5a93a2;
  --danger: #a4412d;
  --shadow: 0 18px 60px rgba(32, 51, 42, .08);
  /* --- Escala tipográfica -------------------------------------------------
     Havia 56 tamanhos distintos em rem, 36 deles usados uma única vez, entre
     0,52 e 2,65. Nenhum sistema — só valores escolhidos um a um ao longo do
     tempo, e o resultado é que dois textos de mesma importância saíam com 0,66
     e 0,68 sem que nada justificasse a diferença.

     Os sete degraus abaixo não foram inventados: cada um é o valor que o app
     JÁ usava mais nessa faixa, para a consolidação não deslocar a aparência.
     Os mais frequentes eram .72 (14 usos), .68 (12), .66 (10), .7 (10), .78
     (9), .82 (7) e .62 (7).

     ATENÇÃO AO ALCANCE: a folha impressa usa este mesmo CSS. Estes degraus só
     são aplicados no que o @media print ESCONDE — cabeçalho, hero, stepper, o
     formulário inteiro, rodapé, faixa de referências e blocos .no-print. Os
     blocos da recomendação continuam com os tamanhos de antes, porque mudá-los
     mudaria a prescrição no papel. */
  --texto-xs: .62rem;
  --texto-sm: .66rem;
  --texto-md: .72rem;
  --texto-lg: .78rem;
  --texto-xl: .88rem;
  --titulo-sm: 1.08rem;
  --titulo-md: 1.42rem;

  /* --- Escala de espaçamento ---------------------------------------------
     Eram 28 valores de gap e 72 de padding. Seis degraus cobrem o que existe,
     e a progressão é a que o app já praticava: 4, 8, 12, 16, 22, 32. */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 22px;
  --espaco-6: 32px;

  /* --- Raio e sombra -------------------------------------------------------
     22 raios e 18 sombras distintos. Quatro e três dão conta, e mantêm a
     mesma linguagem: --radius grande para painel, médio para cartão, pequeno
     para campo e botão, e a pílula. */
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 18px;
  --raio-pill: 999px;
  --sombra-sutil: 0 2px 8px rgba(32, 51, 42, .06);
  --sombra-media: 0 8px 20px rgba(32, 51, 42, .10);
  --sombra-forte: 0 18px 44px rgba(32, 51, 42, .16);

  /* Curva única para todo estado que anima: hover, foco, pressionado. */
  --transicao: .16s ease;

  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: var(--forest-2); }
[hidden] { display: none !important; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: white; padding: .8rem 1rem; border-radius: 8px; }
.skip-link:focus { top: 1rem; }
/* Fixo na tela, o link se repetia no pé de cada página do PDF. No papel não
   há teclado para pular até o conteúdo. */
@media print { .skip-link { display: none !important; } }

.app-header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  margin: auto;
  padding: 0 32px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand img { border-radius: 14px; object-fit: contain; background: #fff; box-shadow: 0 3px 12px rgba(25,61,43,.12); }
.brand span { display: grid; line-height: 1.02; letter-spacing: -.02em; }
.brand strong { font-size: var(--titulo-sm); }
.brand small { color: var(--muted); font-size: var(--texto-md); text-transform: uppercase; letter-spacing: .18em; margin-top: 4px; }
.header-meta { display: flex; align-items: center; gap: 10px; }
.source-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #d7dbd2; border-radius: 999px; color: var(--muted); font-size: var(--texto-lg); background: rgba(255,255,255,.45); }
.source-pill i { width: 7px; height: 7px; border-radius: 50%; background: #6a9e3a; box-shadow: 0 0 0 4px rgba(106,158,58,.13); }

main { max-width: 1180px; margin: 0 auto; padding: 22px 28px 64px; }
.hero {
  min-height: 285px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 52px 58px;
  border-radius: 30px;
  background: var(--forest);
  color: white;
  box-shadow: 0 24px 70px rgba(23,61,45,.16);
}
.hero::before { content: ""; position: absolute; width: 400px; height: 400px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; right: -130px; top: -180px; box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.018); }
.eyebrow { margin: 0 0 13px; color: var(--acid); text-transform: uppercase; letter-spacing: .16em; font-size: var(--texto-md); font-weight: 800; }
.hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(2.25rem, 5vw, 4rem); line-height: .98; letter-spacing: -.055em; }
.hero-copy { max-width: 610px; margin: 23px 0 0; color: rgba(255,255,255,.72); font-size: var(--titulo-sm); }
.hero-button { position: relative; z-index: 2; margin-top: 22px; background: var(--acid); color: var(--forest); box-shadow: 0 10px 24px rgba(0,0,0,.14); }
.hero-button:hover { background: #e4f59d; }
.creator-mark { margin: 14px 0 0; color: rgba(255,255,255,.58); font-size: var(--texto-sm); letter-spacing: .025em; }
.creator-mark strong { color: var(--acid); }
.hero-logo { width: 235px; max-height: 235px; object-fit: contain; border-radius: 28px; box-shadow: 0 18px 45px rgba(0,0,0,.22); background: white; }
.hero-mark { position: relative; flex: 0 0 270px; display: grid; justify-items: center; text-align: center; z-index: 1; }
.hero-mark svg { width: 250px; height: 150px; overflow: visible; }
.hero-mark svg path:first-child { fill: var(--acid); opacity: .92; }
.hero-mark svg path:not(:first-child) { stroke: var(--forest); fill: none; stroke-width: 5; stroke-linecap: round; }
.hero-mark span { margin-top: -9px; font-family: Georgia, serif; font-size: var(--titulo-md); }
.hero-mark small { color: rgba(255,255,255,.62); font-size: var(--texto-md); letter-spacing: .06em; margin-top: 4px; }

.stepper { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; margin: 34px auto 27px; max-width: 880px; padding: 0 10px; }
.stepper > i { height: 1px; background: #ccd2c8; margin: 0 19px; }
.step { appearance: none; border: 0; background: none; display: grid; grid-template-columns: 35px auto; grid-template-rows: 20px 16px; column-gap: 11px; text-align: left; color: var(--muted); padding: 0; }
.step span { grid-row: 1 / 3; width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #cbd0c9; border-radius: 50%; background: var(--paper); font-size: var(--texto-lg); font-weight: 700; }
.step b { font-size: var(--texto-lg); letter-spacing: .01em; color: inherit; }
.step small { font-size: var(--texto-sm); white-space: nowrap; }
.step.active { color: var(--forest); }
.step.active span { background: var(--acid); border-color: var(--acid); color: var(--forest); box-shadow: 0 0 0 5px rgba(216,238,124,.28); }
.step.complete span { background: var(--forest); color: white; border-color: var(--forest); }

.panel { scroll-margin-top: 20px; background: var(--surface); border: 1px solid rgba(52,75,63,.10); border-radius: var(--radius); padding: 34px 38px; box-shadow: var(--shadow); }
.panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.panel-heading > div { display: flex; align-items: center; gap: 13px; }
.panel-heading h2 { margin: 0; font-family: Georgia, serif; font-weight: 500; font-size: 1.65rem; letter-spacing: -.025em; }
.panel-heading p { margin: 0; max-width: 420px; color: var(--muted); font-size: var(--texto-lg); text-align: right; }
.session-history { margin: 0 0 28px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #f9faf5; }
.session-history h3 { margin: 0 0 5px; color: var(--forest); font-size: var(--titulo-sm); }
.session-history p { margin: 0 0 13px; color: var(--muted); font-size: var(--texto-sm); line-height: 1.45; }
.session-history-list { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
.session-history-item { width: 100%; display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); text-align: left; cursor: pointer; }
.session-history-item:hover, .session-history-item:focus-visible { border-color: var(--forest-2); background: var(--soft); }
.session-history-item small { color: var(--muted); line-height: 1.35; }
.local-library .session-history-list { max-height: 390px; }
.local-library-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.local-library-row .session-history-item { min-width: 0; }
.local-library-delete { min-width: 44px; padding: 8px 12px; border: 1px solid #d4b5aa; border-radius: 9px; background: #fff8f4; color: #853c2b; font: inherit; font-size: var(--texto-sm); font-weight: 700; cursor: pointer; }
.local-library-delete:hover, .local-library-delete:focus-visible { background: #fae1d9; }
.local-library .form-message { margin: 0 0 12px; }
.section-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--forest); color: white; font-size: var(--texto-sm); font-weight: 800; letter-spacing: .04em; }

.form-grid { display: grid; gap: 18px 16px; }
.context-grid { grid-template-columns: 1.1fr 1fr 1fr 1fr; }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: 1 / -1; }
.context-core { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, .85fr); gap: 16px; align-items: start; }
.context-core .field { grid-template-rows: minmax(36px, auto) 46px minmax(34px, auto); align-content: start; }
.context-core .field > span { align-self: start; line-height: 1.35; }
.context-core .field input, .context-core .field select { height: 46px; min-height: 46px; line-height: 1.25; }
.context-core .field small { align-self: start; min-height: 34px; }
.base-selector { padding: 14px 16px; border: 1px solid #c8d7bd; border-radius: 12px; background: #f7faf0; }
.base-selector label > span { color: var(--forest); font-size: var(--texto-md); font-weight: 800; }
.base-selector .base-notas { display: grid; gap: 7px; }
.base-selector .field-fixo { min-height: 38px; }
.base-selector small { color: var(--muted); }
.nutrient-targets { padding: 15px 16px; border: 1px solid #c8d7bd; border-radius: 12px; background: #f7faf0; }
.nutrient-targets > .field { max-width: 410px; }
.nutrient-targets #manualTargets { display: grid; gap: 12px; margin-top: 14px; }
.nutrient-targets #manualTargets[hidden] { display: none; }
.nutrient-targets p { margin: 0; color: var(--muted); font-size: var(--texto-sm); line-height: 1.45; }
.nutrient-targets .target-mode-notice { margin-top: 9px; color: var(--forest-2); font-weight: 700; }
.target-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr) minmax(145px, 1fr) minmax(145px, 1fr) minmax(120px, .75fr); gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.target-row[data-target="P"], .target-row.diagnostic-target { grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr) minmax(145px, 1fr) minmax(145px, 1fr); }
.target-check { display: flex; gap: 8px; align-items: center; color: var(--forest); font-weight: 750; }
.target-check input { width: 19px; height: 19px; flex: none; }
.target-k-condition { grid-column: 1 / -1; font-size: var(--texto-sm); font-weight: 600; }
.target-k-condition[hidden] { display: none; }
.target-row > span { font-size: var(--texto-sm); color: var(--ink); }
.target-row .field > span { font-size: var(--texto-sm); }
.target-message { grid-column: 1 / -1; color: var(--muted); font-size: var(--texto-sm); }
.target-message.error, .nutrient-targets .target-summary.error { color: var(--danger); font-weight: 700; }
.nutrient-targets .target-unavailable { padding: 9px 11px; border-left: 3px solid var(--line); }
@media (max-width: 900px) { .target-row, .target-row[data-target="P"], .target-row.diagnostic-target { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .target-row, .target-row[data-target="P"], .target-row.diagnostic-target { grid-template-columns: 1fr; } }
.diagnostic-target-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.diagnostic-target-results article { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); break-inside: avoid; }
.diagnostic-target-results strong { display: block; color: var(--forest-2); font-size: var(--texto-md); }
.diagnostic-target-results span, .diagnostic-target-results small { display: block; color: var(--muted); font-size: var(--texto-sm); line-height: 1.4; }
@media (max-width: 540px) { .diagnostic-target-results { grid-template-columns: 1fr; } }
/* Valor que não se escolhe: a borda tracejada o separa dos campos editáveis,
   sem o cinza de "desabilitado", que leria como defeito. */
.field-fixo { margin: 0; display: flex; align-items: center; min-height: 46px; padding: 0 14px; border: 1px dashed var(--line); border-radius: 9px; background: rgba(35,88,65,.04); color: var(--forest-2); font-weight: 650; line-height: 1.3; }
.field { position: relative; display: grid; gap: 7px; }
.field > span { color: #43524a; font-size: var(--texto-md); font-weight: 750; letter-spacing: .025em; }
.field > span em { color: var(--muted); font-style: normal; font-weight: 500; float: right; }
.field input, .field select {
  width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #cfd5cd; border-radius: 10px; background: white; color: var(--ink); transition: .18s ease;
}
.field select { padding-right: 32px; }
.field input::placeholder { color: var(--muted); }
.field input:hover, .field select:hover { border-color: #98a59c; }
.field input:focus, .field select:focus { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(35,88,65,.10); }
.field small { color: var(--muted); font-size: var(--texto-xs); line-height: 1.3; }
.field.required > span::before { content: "•"; color: var(--clay); margin-right: 4px; }
.field.imported input { border-color: #779f50; background: #fbfff1; box-shadow: inset 3px 0 #91bd59; }
.field.imported::after { content: "Importado"; position: absolute; right: 8px; top: -1px; color: #537632; font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: .08em; }
.context-grid .field.imported::after { display: none; }

.advanced { margin-top: 23px; border: 1px solid var(--line); border-radius: 12px; background: #f9faf5; }
.advanced summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 14px 16px; color: #4b5951; font-size: var(--texto-lg); font-weight: 700; list-style: none; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::after { content: "+"; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); color: var(--forest); font-size: var(--titulo-sm); }
.advanced[open] summary::after { content: "−"; }
.technical-panel { padding-top: 0; overflow: hidden; border-color: #a9bf8d; border-left: 4px solid var(--forest-2); background: #fbfcf7; box-shadow: 0 12px 32px rgba(35,88,65,.08); }
.technical-settings-group { display: grid; }
.lime-goal { display: grid; grid-template-columns: minmax(250px, 1.5fr) repeat(2, minmax(170px, .65fr)); gap: 14px; align-items: end; margin-top: 20px; padding: 17px; border: 1px solid #c8d7bd; border-radius: 13px; background: linear-gradient(135deg, #f4f8ec, #fbfcf7); }
.lime-goal > div { display: flex; align-items: center; gap: 12px; align-self: center; }
.lime-goal h3 { margin: 0; color: var(--forest); font-family: Georgia, serif; font-size: var(--titulo-sm); }
.lime-goal p { margin: 4px 0 0; color: var(--muted); font-size: var(--texto-sm); line-height: 1.4; }
.technical-panel > summary { min-height: 74px; padding: 18px 20px; background: linear-gradient(135deg, #eef4e2, #f8faef); }
.technical-panel > summary > span { display: grid; gap: 3px; }
.technical-panel > summary b { color: var(--forest); font-family: Georgia, serif; font-size: var(--titulo-sm); letter-spacing: .035em; }
.technical-panel > summary small { color: #58685f; font-size: var(--texto-sm); font-weight: 600; }
.technical-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; border-bottom: 1px solid var(--line); margin-bottom: 12px; background: #f3f6ec; }
.technical-heading > div { display: flex; align-items: center; gap: 11px; }
.technical-heading h3 { margin: 0; font-family: Georgia, serif; font-size: var(--titulo-sm); font-weight: 600; }
.technical-heading p { margin: 0; color: var(--muted); font-size: var(--texto-sm); text-align: right; }
.technical-grid { grid-template-columns: repeat(4, 1fr); padding: 5px 16px 18px; }
/* O perfil técnico é o rótulo mais longo do painel: com uma coluna só ele sai
   cortado, e as duas opções começam igual — ficariam indistinguíveis fechadas. */
.technical-grid .field-larga { grid-column: 1 / -1; }
.data-review { padding: 0 16px 16px; }
.data-review .analysis-sections { display: grid; gap: 18px; }
.technical-update-action { display: flex; justify-content: flex-end; padding: 0 16px 18px; }
.result-technical-slot { margin: 17px 0; }
.result-technical-slot:empty { display: none; }
.result-technical-slot .technical-settings-group { gap: 14px; }
.result-technical-slot .lime-goal, .result-technical-slot .technical-panel { margin-top: 0; }
.history-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 5px 16px 9px; }
.history-grid > div { display: grid; grid-template-columns: 1fr 105px; gap: 7px; padding: 12px; border: 1px solid #dce1d8; border-radius: 10px; background: white; }
.history-grid strong { grid-column: 1 / -1; color: #506057; font-size: var(--texto-sm); }
.history-grid select, .history-grid input { min-width: 0; min-height: 44px; padding: 8px 9px; border: 1px solid #cfd5cd; border-radius: 8px; background: white; color: var(--ink); font-size: var(--texto-md); }
.history-note { margin: 0; padding: 0 16px 16px; color: var(--muted); font-size: var(--texto-xs); }

.panel-actions { display: flex; gap: 12px; margin-top: 28px; }
.panel-actions.end { justify-content: flex-end; }
.panel-actions.between { justify-content: space-between; align-items: center; }
.panel-actions > div { display: flex; gap: 10px; }
.recommendation-note { margin: 16px 0 4px; padding: 13px 15px; border-left: 4px solid var(--leaf); border-radius: 8px; background: #f4f8ec; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.recommendation-note strong, .recommendation-note b { color: var(--forest); }
.button { appearance: none; border: 1px solid transparent; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 17px; border-radius: 10px; font-weight: 750; font-size: .76rem; text-decoration: none; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--forest); color: white; box-shadow: 0 8px 18px rgba(23,61,45,.15); }
.button.primary:hover { background: #0e3324; }
.button.secondary { border-color: var(--forest); color: var(--forest); background: white; }
.button.ghost { border-color: #ccd3cb; color: #4c5b52; background: transparent; }
.button.compact { min-height: 36px; padding: 7px 12px; font-size: .68rem; border-radius: 8px; }
.button:disabled { cursor: not-allowed; transform: none; opacity: .45; box-shadow: none; }

.upload-zone { position: relative; min-height: 132px; display: grid; grid-template-columns: 54px 1fr auto; grid-template-rows: 1fr auto; align-items: center; gap: 8px 18px; padding: 24px; border: 1.5px dashed #a9b4ac; border-radius: 15px; background: #fbfcf7; transition: .18s ease; }
/* Num celular nao ha como soltar arquivo nenhum: o convite "solte aqui" e uma
   instrucao impossivel bem no comeco da leitura. Onde nao ha ponteiro, o
   titulo passa a ser o que a pessoa realmente faz - anexar pelo seletor. */
.only-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .only-pointer { display: none; }
  .only-touch { display: inline; }
}
.upload-zone.dragging { border-color: var(--forest); background: #f2f8e5; box-shadow: inset 0 0 0 2px rgba(216,238,124,.5); }
.upload-icon { width: 52px; height: 52px; display: grid; place-items: center; grid-row: 1; border-radius: 14px; background: #eaf2d1; }
.upload-icon svg { width: 24px; fill: none; stroke: var(--forest); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.upload-zone > div:nth-child(3) { display: grid; }
.upload-zone strong { font-family: Georgia, serif; font-size: var(--titulo-sm); font-weight: 600; }
.upload-zone span { color: var(--muted); font-size: var(--texto-md); margin-top: 3px; }
.upload-status { grid-column: 1 / -1; min-height: 18px; font-size: var(--texto-md); color: var(--muted); }
.upload-status.success { color: #397026; }
.upload-status.error { color: var(--danger); }
.upload-status.warning { color: #8b641b; }
.upload-status.loading::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border: 2px solid #c5ccc5; border-top-color: var(--forest); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.import-tools { display: flex; justify-content: center; gap: 7px; color: var(--muted); font-size: var(--texto-sm); margin: 11px 0 27px; }
.import-tools a, .link-button { color: var(--forest-2); font-weight: 700; background: none; border: 0; padding: 0; font-size: inherit; }

.sample-panel { margin: 0 0 25px; padding: 23px; border: 1px solid #ccd8be; border-radius: 16px; background: linear-gradient(145deg, #fbfff2, #f5f8ed); }
.sample-panel-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .42fr); gap: 24px; align-items: end; }
.sample-panel-head h3 { margin: 7px 0 3px; font-family: Georgia, serif; font-size: var(--titulo-md); font-weight: 600; }
.sample-panel-head p { margin: 0; color: var(--muted); font-size: var(--texto-md); }
.read-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: #dcefb4; color: #365924; font-size: var(--texto-xs); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.read-badge::before { content: "✓"; }
.sample-select { min-width: 0; }
.extraction-score { display: grid; grid-template-columns: minmax(160px, 320px) 1fr; gap: 13px; align-items: center; margin: 21px 0 16px; }
.extraction-score > span { height: 7px; overflow: hidden; border-radius: 99px; background: #dfe5d7; }
.extraction-score i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--forest-2), #78a342); transition: width .3s ease; }
.extraction-score p { margin: 0; color: var(--muted); font-size: var(--texto-sm); }
.extracted-values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.extracted-item { min-width: 0; display: grid; gap: 4px; padding: 11px 10px; border: 1px solid #d9e1d1; border-radius: 10px; background: rgba(255,255,255,.72); }
.extracted-item span { color: #69766d; font-size: var(--texto-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.extracted-item strong { color: var(--forest); font-family: Georgia, serif; font-size: var(--texto-xl); font-weight: 600; }
.extracted-item strong small { color: var(--muted); font-family: inherit; font-size: var(--texto-xs); font-weight: 400; }
.extracted-item.missing { border-style: dashed; background: transparent; }
.extracted-item.missing strong { color: var(--muted); font-family: inherit; font-size: var(--texto-xs); font-weight: 500; }
.auto-note { margin: 15px 0 0; padding-top: 14px; border-top: 1px solid #d9dfd2; color: #657269; font-size: var(--texto-sm); }
.auto-note strong { color: var(--forest); }

.analysis-sections { display: grid; gap: 23px; }
fieldset { margin: 0; padding: 22px 20px 20px; border: 1px solid var(--line); border-radius: 14px; }
legend { padding: 0 8px; display: inline-flex; align-items: baseline; gap: 10px; }
legend span { font-family: Georgia, serif; font-size: var(--titulo-sm); font-weight: 600; }
legend small { color: var(--muted); font-size: var(--texto-xs); }
.soil-grid { grid-template-columns: repeat(4, 1fr); }
.compact-grid { grid-template-columns: repeat(5, 1fr); }
.micronutrients { margin: 0; }
.micronutrients > .soil-grid { padding: 5px 16px 18px; }
.form-message { margin-top: 18px; padding: 11px 14px; border-radius: 9px; background: #fff0eb; border: 1px solid #efc6b8; color: #8d3c27; font-size: var(--texto-lg); }

.results-panel { padding: 0; background: transparent; border: 0; box-shadow: none; }
.result-header { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 32px 36px; border-radius: var(--radius); background: var(--forest); color: white; box-shadow: var(--shadow); }
.result-header .eyebrow { margin-bottom: 7px; }
.result-header h2 { margin: 0; font-family: Georgia, serif; font-size: 2rem; font-weight: 500; }
.result-stale { margin: 0 0 18px; padding: 13px 16px; border: 1px solid #d8ad4a; border-left-width: 4px; border-radius: 10px; background: #fff8e7; color: #6e5418; font-size: .72rem; line-height: 1.5; }
.result-stale strong { display: block; margin-bottom: 4px; font-size: .78rem; }
.result-stale p { margin: 0; }
.result-provenance { margin: 9px 0 0; color: var(--muted-no-escuro); font-size: .62rem; line-height: 1.5; }
.result-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }
.result-meta span { padding: 5px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: rgba(255,255,255,.72); font-size: .62rem; }
.result-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; width: min(100%, 450px); flex: 0 0 450px; }
.result-actions .button { min-width: 0; text-align: center; }
@media (max-width: 1050px) {
  .result-header { align-items: stretch; flex-direction: column; }
  .result-actions { width: 100%; flex: none; }
}
.readiness-summary { margin: 17px 0; padding: 18px 21px; border: 1px solid #c8d7bd; border-left: 5px solid #68934c; border-radius: 13px; background: #f7faf2; }
.readiness-summary[data-level="review"], .readiness-summary[data-level="incomplete"] { border-color: #e0cf9a; border-left-color: #b68121; background: #fffaf0; }
.readiness-summary[data-level="blocked"] { border-color: #e0b3aa; border-left-color: #ae4430; background: #fff7f5; }
.readiness-summary h3 { margin: 3px 0 5px; color: var(--forest); font-family: Georgia, serif; font-size: var(--titulo-sm); }
.readiness-summary p { margin: 0; color: #4d5c52; font-size: var(--texto-sm); line-height: 1.45; }
.readiness-modules { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0; }
.readiness-module { display: inline-flex; gap: 5px; align-items: center; padding: 5px 8px; border-radius: 999px; background: #e8f3d8; color: #315421; font-size: var(--texto-xs); font-weight: 750; }
.readiness-module.pending, .readiness-module.partial { background: #fff0c9; color: #775219; }
.readiness-module.blocked { background: #fae1d9; color: #8d3727; }
.readiness-summary #readinessAlert { padding-top: 2px; }
.readiness-link { display: inline-block; margin-top: 8px; color: var(--forest); font-size: var(--texto-sm); font-weight: 750; }
.result-header .button.ghost { color: white; border-color: rgba(255,255,255,.25); }
.result-header .button.secondary { color: var(--forest); border-color: white; }

.result-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; margin: 17px 0; }
.result-card { --accent-card: var(--acid); min-height: 242px; display: flex; flex-direction: column; padding: 22px; border: 1px solid rgba(41,62,51,.1); border-radius: 18px; background: var(--surface); box-shadow: 0 10px 32px rgba(32,51,42,.05); }
.result-card.gypsum { --accent-card: #b4cfce; }
.result-card.nitrogen { --accent-card: #8fbd79; }
.result-card.phosphorus { --accent-card: #efbd61; }
/* #dc8260 dava 4,25:1 com o símbolo em --forest; #de8a6a dá 4,56. Os outros
   cinco acentos já passavam (5,10 a 9,44). */
.result-card.potassium { --accent-card: #de8a6a; }
.result-card.micronutrients { --accent-card: #a9a3d4; }
.card-top { display: flex; align-items: center; gap: 9px; }
.card-top p { margin: 0; color: #59685f; font-size: .69rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.card-symbol { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-card); color: var(--forest); font-family: Georgia, serif; font-weight: 700; }
.dose { display: grid; margin: 21px 0 5px; }
.dose strong { font-family: Georgia, serif; font-size: 2.65rem; line-height: 1; letter-spacing: -.05em; font-weight: 500; }
.dose span { color: var(--muted); font-size: .68rem; margin-top: 5px; }
/* Dose parcial: a etiqueta fica ANTES do numero, porque e ela que muda o
   sentido do numero. Depois dele, quem ja leu "150" nao volta. */
/* Campo calculado: a conta fica embaixo do numero, para quem tiver o laudo
   na mao poder refazer. A borda em ambar separa do que foi lido. */
.extracted-item.calculado { border-color: #e3c56a; background: #fffdf3; }
.extracted-conta { display: block; margin-top: 5px; color: #8a6115; font-size: var(--texto-xs); line-height: 1.5; }
.extracted-conta b { font-weight: 850; }
.dose-parcial { align-self: center; padding: 2px 7px; border-radius: 6px; background: #fff0c9; color: #8a6115; font-size: .55rem; font-style: normal; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.card-parcial { margin: 0 0 4px; color: #8a6115; font-size: .6rem; font-weight: 700; line-height: 1.4; }
.card-status { margin: 5px 0 18px; color: var(--forest-2); font-size: .7rem; font-weight: 700; }
.card-total { display: grid; gap: 4px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.card-total span { font-size: .72rem; }
.card-total small { color: var(--muted); font-size: .6rem; line-height: 1.35; }

.application-block, .limestone-block { margin: 0 0 15px; padding: 25px 27px; border: 1px solid rgba(41,62,51,.1); border-radius: 18px; background: var(--surface); }
.application-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.application-card { min-width: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fbfcf7; }
.application-card-head { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); background: #f0f4e8; }
.application-card-head > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--forest); color: white; font-family: Georgia, serif; font-size: .72rem; font-weight: 700; }
.application-card-head > div { display: grid; }
.application-card-head strong { font-size: .78rem; }
.application-card-head small { color: var(--muted); font-size: .58rem; }
.application-steps { padding: 4px 14px 10px; }
.application-step { display: grid; grid-template-columns: 25px 1fr; gap: 9px; padding: 13px 0; border-bottom: 1px solid #e4e8e0; }
.application-step:last-child { border-bottom: 0; }
.application-step > i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--acid); color: var(--forest); font-size: .58rem; font-style: normal; font-weight: 850; }
.application-step > div { display: grid; gap: 3px; min-width: 0; }
.application-step strong { color: var(--forest); font-size: .72rem; line-height: 1.35; }
.application-step p { margin: 0; color: #4f6057; font-size: .66rem; font-weight: 700; }
.application-step span { color: var(--muted); font-size: .62rem; }
.application-step small { color: var(--muted); font-size: .55rem; line-height: 1.4; }
/* Operação de nutriente parcial: o selo fica do tamanho do texto, e o motivo no
   mesmo âmbar do cartão, para não se confundir com a nota de uma operação. */
.application-step .dose-parcial { justify-self: start; }
.application-step small.card-parcial { color: #8a6115; font-weight: 700; }
/* Micronutrientes: uma linha por elemento. Grade fluida em vez de tabela, para
   nao estourar a largura no celular - sao ate seis elementos com teor, classe,
   dose e localizacao, e uma tabela de cinco colunas nao cabe em 360 px. */
.micronutrient-table { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.micronutrient-row { display: grid; gap: 6px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcf7; }
.micronutrient-row header { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.micronutrient-row header strong { color: var(--forest); font-size: .73rem; }
.micronutrient-row header > span { color: var(--muted); font-size: .63rem; }
.micronutrient-dose strong { color: var(--forest); font-size: 1.12rem; font-weight: 850; }
.micronutrient-dose strong.sem-dose { color: var(--muted); font-size: .7rem; font-weight: 700; }
.micronutrient-dose span { color: var(--muted); font-size: .62rem; }
.micronutrient-where { margin: 0; color: #4f6057; font-size: .63rem; font-weight: 700; }
.micronutrient-parcels { margin: 0; padding-left: 15px; display: grid; gap: 3px; }
.micronutrient-parcels li { color: #4f6057; font-size: .62rem; line-height: 1.4; }
.micronutrient-row small { color: var(--muted); font-size: .56rem; line-height: 1.45; }
.micronutrient-dose strong.dose-do-manual { color: #8a6115; }
.micronutrient-notes.block { margin: 13px 0 0; padding-left: 17px; display: grid; gap: 5px; }
.micronutrient-extra { margin-top: 13px; }
.micronutrient-extra summary { cursor: pointer; color: var(--forest); font-size: .66rem; font-weight: 700; }
.micronutrient-notes { margin: 9px 0 0; padding-left: 17px; display: grid; gap: 6px; }
.micronutrient-notes li { color: #4f6057; font-size: .63rem; line-height: 1.5; }
.limestone-block { display: grid; grid-template-columns: 1.1fr 1.6fr; gap: 20px; background: linear-gradient(145deg, #f6f8ed, #fffdf8); }
.limestone-summary { display: grid; grid-template-columns: 48px 1fr; gap: 13px; align-items: start; }
.limestone-summary > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--clay); color: white; font-family: Georgia, serif; font-size: .74rem; font-weight: 700; }
.limestone-summary small { color: var(--muted); font-size: .59rem; text-transform: uppercase; letter-spacing: .06em; }
.limestone-summary h3 { margin: 4px 0 5px; font-family: Georgia, serif; font-size: 1.24rem; font-weight: 600; }
.limestone-summary p { margin: 0; color: #5d6c63; font-size: .66rem; line-height: 1.5; }
.limestone-summary em { display: block; margin-top: 8px; color: #7b6841; font-size: .6rem; font-style: normal; font-weight: 700; }
.limestone-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.limestone-options article { display: grid; align-content: start; gap: 4px; padding: 13px; border: 1px solid #d9ded5; border-radius: 11px; background: white; }
.limestone-options strong { font-size: .72rem; }
.limestone-options span { color: var(--clay); font-size: .58rem; font-weight: 750; }
.limestone-options p { margin: 3px 0 0; color: var(--muted); font-size: .57rem; line-height: 1.45; }

.result-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 15px; }
.diagnosis-block, .attention-block, .memory-block { padding: 25px 27px; border: 1px solid rgba(41,62,51,.1); border-radius: 18px; background: var(--surface); }
.subheading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.subheading h3 { margin: 0; font-family: Georgia, serif; font-size: 1.22rem; font-weight: 600; }
.subheading span { color: var(--muted); font-size: .63rem; }
.diagnosis-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; }
.diagnosis-item { display: flex; justify-content: space-between; gap: 12px; padding: 15px 0; border-bottom: 1px solid #e8ebe5; }
.diagnosis-item > div { display: grid; align-content: center; gap: 3px; }
.diagnosis-item > div:last-child { justify-items: end; text-align: right; }
.diagnosis-item span { color: #657169; font-size: .64rem; }
.diagnosis-item strong { font-family: Georgia, serif; font-size: 1.15rem; font-weight: 600; }
.diagnosis-item strong small { font-family: inherit; color: var(--muted); font-size: .57rem; font-weight: 400; }
.diagnosis-item > div > small { color: var(--muted); font-size: .55rem; max-width: 120px; }
.status { display: inline-flex; padding: 3px 7px; border-radius: 999px; font-size: .57rem; font-style: normal; font-weight: 800; }
.status.good { color: #3e6c29; background: #e8f3d8; }
.status.warning { color: #8a6115; background: #fff0c9; }
.status.danger { color: #9a3b29; background: #fae1d9; }
.status.neutral { color: #53645b; background: #e9ede8; }
.empty-state { color: var(--muted); font-size: .75rem; }
.attention-block ul { list-style: none; padding: 0; margin: 0; }
.attention-block li { display: grid; grid-template-columns: 24px 1fr; gap: 9px; padding: 13px 0; border-bottom: 1px solid #e8ebe5; }
.attention-block li:last-child { border-bottom: 0; }
.attention-block li > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f8e0d6; color: var(--danger); font-weight: 900; font-size: .68rem; }
.attention-block li p { margin: 1px 0 0; color: #5b6961; font-size: .68rem; line-height: 1.45; }
.attention-block li.all-good > span { color: #3e6c29; background: #e8f3d8; }

.memory-block { margin-top: 15px; }
.memory-list details { border-bottom: 1px solid var(--line); }
.memory-list details:last-child { border-bottom: 0; }
.memory-list summary { min-height: 61px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; padding: 12px 5px; }
.memory-list summary::-webkit-details-marker { display: none; }
.memory-list summary span { font-size: .75rem; font-weight: 750; }
.memory-list summary strong { color: var(--forest-2); font-family: Georgia, serif; font-size: .94rem; font-weight: 500; }
.memory-content { display: grid; grid-template-columns: 1.1fr 1.35fr .9fr; gap: 25px; padding: 1px 5px 20px; }
.memory-content > div { display: grid; align-content: start; gap: 5px; }
.memory-content small { color: var(--muted); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; }
.memory-content p, .memory-content code { margin: 0; color: #506057; font-family: inherit; font-size: .66rem; line-height: 1.5; }
.memory-content code { color: var(--forest); background: #eef2e7; padding: 7px 9px; border-radius: 7px; }

.disclaimer { display: grid; grid-template-columns: 28px 1fr; gap: 12px; margin: 16px 0 0; padding: 17px 20px; border: 1px solid #dec991; border-radius: 13px; background: #fff8df; }
.disclaimer svg { width: 24px; fill: none; stroke: #8b641b; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.disclaimer p { margin: 0; color: #6f5c31; font-size: .68rem; line-height: 1.5; }
.reference-strip { display: grid; grid-template-columns: 130px 1fr; gap: 25px; align-items: center; margin-top: 28px; padding: 18px 24px; border-top: 1px solid #cfd5cc; border-bottom: 1px solid #cfd5cc; }
.reference-strip > span { color: var(--muted); font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: .13em; }
.reference-strip p { margin: 0; color: #647169; font-size: var(--texto-md); }
.reference-strip strong { color: #3d4c44; }
.reference-links { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.reference-links a { padding: 5px 8px; border: 1px solid #ccd7ca; border-radius: 999px; color: var(--forest); background: #f7faf4; font-size: .6rem; font-weight: 750; text-decoration: none; }
.reference-links a:hover { border-color: var(--leaf); }

.extraction-consistency { margin: 0 0 16px; padding: 13px 15px; border: 1px solid var(--danger); border-left-width: 4px; border-radius: 10px; background: #fdf1ec; color: #6d3222; font-size: var(--texto-md); line-height: 1.5; }
.extraction-consistency strong { display: block; margin-bottom: 4px; font-size: var(--texto-md); }
.extraction-consistency p { margin: 0 0 8px; }
.extraction-consistency ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.extraction-review { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; padding: 13px; border: 1px solid #d8ad4a; border-radius: 10px; background: #fff8e7; color: #6e5418; font-size: var(--texto-md); line-height: 1.45; }
.extraction-review input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--forest); }
.extraction-review strong { display: block; }

.sources-block { margin: 12px 0; padding: 25px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.source-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.source-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 14px; padding: 14px; border: 1px solid var(--line); border-left: 4px solid #9aab91; border-radius: 10px; background: #fbfcf8; }
.source-entry.applied { border-left-color: var(--leaf); }
.source-entry > div { display: grid; gap: 3px; }
.source-entry span { color: var(--leaf); font-size: .56rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.source-entry.contextual span { color: #826927; }
.source-entry strong { font-size: .72rem; }
.source-entry small, .source-entry p { color: var(--muted); font-size: .61rem; }
.source-entry p { grid-column: 1; margin: 0; line-height: 1.45; }
.source-entry a { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--forest); font-size: .61rem; font-weight: 750; text-decoration: none; }

footer { display: flex; justify-content: space-between; max-width: 1180px; margin: auto; padding: 22px 28px 42px; color: var(--muted); font-size: var(--texto-xs); }
.toast { position: fixed; z-index: 50; left: 50%; bottom: -80px; transform: translateX(-50%); padding: 11px 17px; border-radius: 10px; background: var(--ink); color: white; box-shadow: 0 12px 30px rgba(0,0,0,.2); font-size: var(--texto-md); transition: .25s ease; }
.toast.show { bottom: 24px; }

@media (max-width: 980px) {
  .context-grid { grid-template-columns: repeat(2, 1fr); }
  .technical-grid { grid-template-columns: repeat(2, 1fr); }
  .application-grid { grid-template-columns: 1fr; }
  .limestone-block { grid-template-columns: 1fr; }
  .soil-grid { grid-template-columns: repeat(3, 1fr); }
  .compact-grid { grid-template-columns: repeat(3, 1fr); }
  .result-cards { grid-template-columns: repeat(3, 1fr); }
  .result-layout { grid-template-columns: 1fr; }
  .hero-mark { flex-basis: 220px; }
  .hero-mark svg { width: 210px; }
  .extracted-values { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .context-core { grid-template-columns: 1fr; }
  .context-core .field { grid-template-rows: auto 46px auto; }
  .context-core .field small { min-height: 0; }
}

@media (max-width: 720px) {
  .app-header { height: 68px; padding: 0 18px; }
  .source-pill { display: none; }
  .brand img { width: 48px; height: 48px; }
  .brand small { max-width: 180px; letter-spacing: .09em; }
  main { padding: 10px 13px 45px; }
  .hero { min-height: auto; padding: 35px 28px; border-radius: 22px; }
  .hero h1 { font-size: 2.35rem; }
  .hero-copy { font-size: var(--texto-xl); }
  .hero-mark { display: none; }
  .stepper { margin: 26px auto 20px; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .stepper > i { display: none; }
  .step { grid-template-columns: 29px 1fr; grid-template-rows: auto; gap: 7px; align-items: center; min-height: 44px; }
  .step span { grid-row: auto; width: 29px; height: 29px; }
  .step small { display: none; }
  .panel { padding: 24px 18px; border-radius: 17px; }
  .panel-heading { align-items: start; margin-bottom: 22px; padding-bottom: 20px; }
  .panel-heading p { display: none; }
  .panel-heading h2 { font-size: var(--titulo-md); }
  .context-grid, .soil-grid, .compact-grid, .technical-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lime-goal { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lime-goal > div { grid-column: 1 / -1; }
  .limestone-options { grid-template-columns: 1fr; }
  .history-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 2; }
  .span-4 { grid-column: 1 / -1; }
  .upload-zone { grid-template-columns: 43px 1fr; padding: 18px; }
  .upload-icon { width: 42px; height: 42px; }
  .upload-zone .button { grid-column: 1 / -1; width: 100%; }
  .sample-panel { padding: 18px; }
  .sample-panel-head { grid-template-columns: 1fr; gap: 17px; }
  .extraction-score { grid-template-columns: 1fr; gap: 7px; }
  .extracted-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-actions.between { align-items: stretch; gap: 10px; }
  .panel-actions.between, .panel-actions.between > div { flex-direction: column-reverse; }
  .panel-actions .button { width: 100%; }
  .result-header { padding: 26px 22px; align-items: start; flex-direction: column; }
  .result-actions { width: 100%; flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .result-card { min-height: 215px; padding: 17px 15px; }
  .dose strong { font-size: 2.1rem; }
  .diagnosis-block, .attention-block, .memory-block { padding: 21px 18px; }
  .diagnosis-grid { grid-template-columns: 1fr; }
  .memory-content { grid-template-columns: 1fr; gap: 13px; }
  .memory-list summary { align-items: start; flex-direction: column; gap: 2px; }
  .reference-strip { grid-template-columns: 1fr; gap: 5px; }
  .reference-links { grid-column: 1; }
  .source-list { grid-template-columns: 1fr; }
  .source-entry { grid-template-columns: 1fr; }
  .source-entry a { grid-column: 1; grid-row: auto; }
  footer { padding: 20px 17px 35px; flex-direction: column; gap: 3px; }
}

@media (max-width: 430px) {
  .context-grid, .soil-grid, .compact-grid, .technical-grid { grid-template-columns: 1fr; }
  .lime-goal { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .span-4 { grid-column: span 1; }
  .result-cards { grid-template-columns: 1fr; }
  .history-grid > div { grid-template-columns: 1fr; }
  .history-grid strong { grid-column: auto; }
  .result-card { min-height: 205px; }
  fieldset { padding: 18px 14px 16px; }
  legend { display: grid; gap: 1px; }
  .extracted-values { grid-template-columns: 1fr; }
  .step b { font-size: var(--texto-sm); }
  .step { grid-template-columns: 26px 1fr; }
  .step span { width: 26px; height: 26px; }
}

/* LEIA ANTES DE MEXER NAS REGRAS RESPONSIVAS ACIMA.

   A folha impressa tem 703 px de largura: A4 mede 210 mm, o @page abaixo tira
   12 mm de cada lado, sobram 186 mm — 7,32 pol × 96 = 702,8 px. Ou seja, ao
   imprimir o navegador TAMBÉM aplica "@media (max-width: 980px)" e
   "@media (max-width: 720px)". Só "max-width: 700px" e "430px" ficam de fora,
   e o 700 por 3 px de folga.

   Consequência, medida e não suposta: parte do que foi escrito para celular já
   governa o papel. O bloco de impressão abaixo reescreve .result-header,
   .result-cards, .result-card e .result-layout, então esses quatro estão
   protegidos. Continuam vindo do bloco de 720 px, e aparecem assim na
   prescrição de hoje:

     .dose strong                                  font-size 2,1rem
     .diagnosis-block, .attention-block,
     .memory-block                                 padding 21px 18px
     .diagnosis-grid                               uma coluna
     .memory-content                               uma coluna, gap 13px
     .memory-list summary                          empilhado
     .source-list, .source-entry                   uma coluna
     .application-grid, .limestone-block (980 px)  uma coluna

   ISTO NÃO É DEFEITO A CORRIGIR AQUI. É como a prescrição sai hoje, é o que
   está aprovado, e "arrumar" qualquer uma dessas linhas MUDA O PDF — que é
   justamente o que não se pode fazer sem pedido explícito. A nota existe para
   que ninguém mexa nelas achando que mexe só no celular, e para que uma regra
   nova destinada à tela nasça dentro de "@media screen and (...)", como as do
   acabamento visual no fim deste arquivo.

   Conferir a largura: 210mm − 2×12mm = 186mm; 186 / 25,4 × 96 = 702,8 px. */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: white; color: #111; font-size: 10pt; }
  .app-header, .hero, .stepper, form, footer, .reference-strip, .no-print, .result-actions, .toast { display: none !important; }
  main { max-width: none; padding: 0; }
  .results-panel { display: block !important; }
  .result-header { padding: 18px 20px; box-shadow: none; break-inside: avoid; }
  .result-cards { grid-template-columns: repeat(2, 1fr); }
  .result-card { min-height: 170px; box-shadow: none; break-inside: avoid; }
  /* Blocos longos precisam poder continuar na página seguinte; prender o
     bloco inteiro deixava quase uma página A4 vazia no relatório completo. */
  .result-layout { display: block; }
  .diagnosis-block, .attention-block, .memory-block, .sources-block { box-shadow: none; break-inside: auto; }
  .diagnosis-item, .attention-block li, .memory-list details, .source-entry { break-inside: avoid; }
  /* Título de bloco não fica sozinho no pé da página, com o conteúdo na
     seguinte: "Memória técnica" e "Rastreabilidade científica" ficavam assim. */
  .subheading { break-after: avoid; }
  /* No papel nao ha onde clicar: o que esta recolhido na tela tem de sair
     aberto, senao a folha impressa esconde as recomendacoes complementares e
     as lacunas do manual - justamente o que alguem leva para conferir. */
  .micronutrient-extra > div { display: block !important; }
  .micronutrient-table { grid-template-columns: repeat(2, 1fr); }
  .micronutrient-row { break-inside: avoid; }
  .memory-list details { display: block; }
  .memory-list details > .memory-content { display: grid !important; }
  .disclaimer { break-inside: avoid; }
}

/* A folha de campo é uma segunda saída de impressão, acionada explicitamente.
   As regras do relatório completo acima continuam valendo quando ela não está
   ativa. Conteúdo pendente ou alertas nunca são cortados para caber no papel. */
.field-sheet { display: none; }
@media print {
  body.field-sheet-print .results-panel > :not(#fieldSheet) { display: none !important; }
  body.field-sheet-print #fieldSheet { display: block !important; color: #111; font: 10pt/1.35 Arial, sans-serif; }
  .field-sheet h1 { margin: 0 0 4mm; color: #183e2d; font-size: 17pt; }
  .field-sheet h2 { margin: 5mm 0 2mm; padding-bottom: 1mm; border-bottom: 1px solid #abc2ad; color: #183e2d; font-size: 11pt; }
  .field-sheet p { margin: 1.5mm 0; }
  .field-sheet .field-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 5mm; padding: 3mm; border: 1px solid #cbd8cc; }
  .field-sheet .field-meta p { margin: 0; }
  .field-sheet table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .field-sheet th, .field-sheet td { padding: 2mm; border-bottom: 1px solid #d6ddd5; text-align: left; vertical-align: top; }
  .field-sheet th { color: #224d35; }
  .field-sheet tr, .field-sheet li { break-inside: avoid; }
  .field-sheet h2 { break-after: avoid; }
  .field-sheet .field-alerts { padding-left: 5mm; }
  .field-sheet .field-foot { margin-top: 5mm; padding-top: 2mm; border-top: 1px solid #abc2ad; font-size: 8.5pt; }
}

.account-pill { color: var(--muted); font-size: .82rem; font-weight: 700; }
.logout-button { min-height: 35px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--green-deep); font: inherit; font-size: var(--texto-lg); font-weight: 800; cursor: pointer; }
.logout-button:hover { border-color: var(--green); background: var(--green-pale); }
.logout-button:disabled { opacity: .55; cursor: wait; }

/* Ajuste Tecnico trazido para a etapa da leitura do laudo. Reserva o espaco
   com o mesmo respiro dos demais blocos do passo, para a revelacao nao
   provocar salto de layout. */
.step-two-technical-slot { margin: 26px 0 0; }
.step-two-technical-slot[hidden] { display: none; }
.step-two-technical-actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }

/* Mesma razao do formulario publico: abaixo de 16px o iOS amplia a pagina ao
   focar o campo. A area tecnica e usada no celular, em campo. */
.field input, .field select, .history-grid input, .history-grid select { font-size: 16px; }

/* Acabamento: numeros e navegacao por teclado.

   Em fonte proporcional o "1" ocupa menos largura que o "8", entao uma coluna
   de doses sai com as casas desalinhadas e a leitura de cima para baixo, que e
   como se confere uma prescricao, fica ruidosa. tabular-nums fixa a largura do
   algarismo sem trocar a fonte. */
.dose strong,
.extracted-item strong,
.diagnosis-item strong,
.application-item strong,
.memory-content,
.result-card .dose { font-variant-numeric: tabular-nums; }

/* A area tecnica nao tinha nenhum :focus-visible: quem navega por teclado nao
   enxergava onde estava. O anel so aparece na navegacao por teclado, entao o
   clique de mouse continua limpo. */
:where(input, select, button, a, summary, [tabindex]):focus-visible {
  /* Alfa medido, nao escolhido: com .45 o anel dava 2,11:1 sobre o branco do
     campo e 2,04 sobre --paper, abaixo dos 3:1 que a WCAG 2.1 (1.4.11) exige de
     indicador de foco. Com .7 sao 3,53 e 3,42. Conferir com
     scripts/medir-contraste.mjs. */
  outline: 3px solid rgba(40, 98, 70, .7);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Enquadramento dos campos do formulario.

   Cada .field era uma grade independente, entao dimensionava as proprias
   linhas: um rotulo que quebrava em duas linhas empurrava o seu controle para
   baixo, e o campo ao lado, com rotulo de uma linha, ficava mais alto. Medido
   antes da correcao: ate 17px de diferenca entre controles da mesma linha.

   Com subgrid os campos passam a usar as linhas da grade do formulario, entao
   rotulo, controle e dica se alinham entre todos os campos da mesma faixa,
   independentemente de quantas linhas cada texto ocupe. Custa 1px de altura
   total; a alternativa de fixar a altura do rotulo custava 61px e nao
   resolvia, porque a dica abaixo do campo tambem varia. */
.form-grid > .field {
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 7px;
}
/* Blocos que nao sao campo ocupam as mesmas tres linhas, para nao quebrar o
   ritmo da grade. */
.form-grid > :not(.field) { grid-row: span 3; }

/* Gráficos do laudo. Apoio ao diagnóstico, não prescrição. */
.charts-block { display: grid; gap: 14px; margin: 0 0 18px; }
.charts-note { margin: 0; padding: 9px 11px; border-left: 3px solid var(--acid); border-radius: 0 8px 8px 0; background: var(--soft); color: var(--muted); font-size: .78rem; line-height: 1.45; }
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; }
/* Um grid só para réguas e relações: colunas alinhadas de ponta a ponta. */
.chart-grid { display: grid; gap: 10px 14px; align-items: start; }
.chart-group { grid-column: 1 / -1; margin: 6px 0 0; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 720px) { .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print {
  .charts-block { break-inside: auto; }
  .chart { break-inside: avoid; }
  .chart svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Critérios que sustentam o tipo de calcário indicado. */
.limestone-options .criterio-ok { color: #3e6c29; }
.limestone-options .criterio-fora { color: #9a3b29; }
.limestone-options .criterio-fora::after { content: " ·  fora da faixa"; font-size: .8em; font-weight: 700; }

/* O contexto da recomendação acompanha o passo ativo. Nos passos 2 e 3 ele
   aparece como bloco secundário, com título próprio, já que o cabeçalho "01"
   fica no passo 1. */
.moved-context-slot { margin: 17px 0; padding: 15px 16px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.moved-context-slot:empty { display: none; }
.moved-context-title { margin: 0 0 12px; color: var(--muted); font-size: var(--texto-md); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.moved-context-slot .context-grid { margin: 0; }
@media print { .moved-context-slot { display: none !important; } }

/* Botão de instalar, criado pelo pwa.js quando o navegador sinaliza que o app
   é instalável. Fica fora do fluxo para não empurrar nada da página. */
.pwa-install-button { position: fixed; right: 16px; bottom: 16px; z-index: 60; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--forest); border-radius: 999px; background: var(--forest); color: #fff;
  font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; box-shadow: 0 10px 30px rgba(23, 61, 45, .28); }
.pwa-install-button:hover { background: var(--forest-2); }
.pwa-install-button:disabled { opacity: .6; cursor: progress; }
.pwa-install-button:focus-visible { outline: 3px solid var(--acid); outline-offset: 2px; }
@media print { .pwa-install-button { display: none !important; } }

/* Aviso de campo: combinacao de opcoes que o motor nao pode atender. Herda o
   tamanho do <small> do formulario e so muda a cor e o peso, para o usuario
   ver antes de calcular. */
.field-alerta {
  color: var(--danger);
  font-weight: 600;
}

/* Conferencia campo a campo, dentro do painel de leitura da etapa 2.
   Campo marcado fica aberto; o resto fica recolhido, para nao obrigar o
   usuario a revisar o que as contas do laudo ja conferiram. */
.conferencia { margin: 18px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(35,88,65,.03); }
.conferencia h4 { margin: 0 0 4px; font-size: var(--texto-xl); }
.conferencia-resumo { margin: 0 0 12px; font-size: var(--texto-lg); color: var(--forest-2); }
.conferencia-chamada { margin: 0 0 10px; font-weight: 650; color: var(--danger); }
.conferencia-ok { margin: 0; font-size: var(--texto-xl); }
.conferencia-campo { margin: 0 0 10px; padding: 12px; border: 1px solid var(--danger); border-radius: 10px; background: #fff; }
.conferencia-campo header { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: baseline; }
.conferencia-valor { font-variant-numeric: tabular-nums; font-weight: 650; }
.conferencia-motivos { margin: 8px 0; padding-left: 18px; font-size: var(--texto-lg); }
.conferencia-campo footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.conferencia-ir { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: var(--texto-lg); }
.conferencia-ir:hover { background: rgba(35,88,65,.06); }
.conferencia-bloqueio { flex-basis: 100%; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--danger); border-radius: 10px; background: #fff; font-size: var(--texto-xl); }
.conferencia-assumir { margin-top: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: var(--texto-lg); }
.conferencia-assumir:hover { background: rgba(35,88,65,.06); }
.conferencia-contas { margin: 0 0 14px; padding-left: 18px; font-size: var(--texto-lg); }
.conferencia-contas li { margin-bottom: 8px; }
.conferencia-contas small { color: var(--forest-2); }
.conferencia-participa { margin: 6px 0 0; font-size: var(--texto-lg); color: var(--forest-2); }
.conferencia-bloco { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.conferencia-bloco summary { cursor: pointer; font-size: var(--texto-xl); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.conferencia-linha { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 5px 0; border-bottom: 1px dotted var(--line); font-size: var(--texto-lg); }
.conferencia-linha strong { font-variant-numeric: tabular-nums; }
.conferencia-linha em { grid-column: 1 / -1; font-style: normal; font-size: var(--texto-lg); color: var(--forest-2); }
.conferencia-nota { margin: 0 0 8px; font-size: var(--texto-lg); color: var(--forest-2); }
.conferencia-avisos { margin: 10px 0 0; padding-left: 18px; font-size: var(--texto-lg); color: var(--forest-2); }

/* Destaque passageiro no campo para onde a conferencia levou o usuario. */
.campo-em-conferencia { outline: 2px solid var(--danger); outline-offset: 2px; }

@media (max-width: 700px) {
  .conferencia { padding: 12px; }
  .conferencia-campo footer { flex-direction: column; align-items: stretch; }
  .conferencia-ir { width: 100%; }
}

/* --- Calcular formulado ---------------------------------------------------
   Seção aditiva, depois dos cartões de dose. Reaproveita .application-block
   (moldura), .form-message (erro) e .status (saldo), para não estrear um
   segundo vocabulário visual dentro da mesma tela. */
.formulado-block { margin-top: 15px; }
.formulado-indisponivel { margin: 17px 0 0; padding: 13px 15px; border: 1px dashed var(--line); border-radius: 12px; background: var(--soft); color: var(--muted); font-size: var(--texto-lg); }
.formulado-intro { margin: 17px 0 0; color: var(--muted); font-size: var(--texto-lg); }

.formulado-entrada { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-top: 15px; }
.formulado-garantia { margin: 0; padding: 0; border: 0; }
.formulado-garantia legend { padding: 0 0 7px; }
.formulado-garantia legend span { font-family: Georgia, serif; font-size: var(--titulo-sm); font-weight: 600; }
.formulado-garantia legend em { color: var(--muted); font-family: Inter, sans-serif; font-size: var(--texto-md); font-style: normal; }
.formulado-campos { display: flex; align-items: flex-end; gap: 7px; }
.formulado-campos label { display: grid; gap: 4px; justify-items: center; }
.formulado-campos label span { color: var(--muted); font-size: var(--texto-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.formulado-campos input {
  width: 66px; min-height: 48px; padding: 0 6px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--ink); font-family: Georgia, serif; font-size: var(--titulo-md); text-align: center;
}
.formulado-campos input:focus-visible { outline: 2px solid var(--forest-2); outline-offset: 2px; border-color: var(--forest-2); }
.formulado-campos i { padding-bottom: 12px; color: var(--muted); font-size: var(--titulo-md); font-style: normal; }
.formulado-block .form-message { margin-top: 15px; }

.formulado-escolha { margin: 19px 0 0; font-size: var(--texto-lg); }
.formulado-opcoes { display: grid; gap: 13px; margin-top: 13px; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.formulado-opcao { padding: 16px 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.formulado-opcao header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.formulado-opcao header span { flex: 1 0 100%; color: var(--muted); font-size: var(--texto-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.formulado-opcao header strong { font-family: Georgia, serif; font-size: 2.3rem; line-height: 1; letter-spacing: -.05em; font-weight: 500; }
.formulado-opcao header small { color: var(--muted); font-size: var(--texto-md); }

.formulado-tabela { width: 100%; table-layout: fixed; margin-top: 11px; border-collapse: collapse; font-size: var(--texto-md); }
.formulado-tabela col.coluna-nutriente { width: 27%; }
.formulado-tabela col.coluna-numero { width: 19%; }
.formulado-tabela col.coluna-saldo { width: 35%; }
.formulado-tabela caption { caption-side: bottom; padding-top: 9px; color: var(--muted); font-size: var(--texto-sm); text-align: left; }
.formulado-tabela th, .formulado-tabela td { padding: 6px 4px; text-align: right; }
.formulado-tabela thead th { color: var(--muted); font-size: var(--texto-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.formulado-tabela thead th:first-child, .formulado-tabela tbody th { text-align: left; }
.formulado-tabela tbody th { color: var(--forest); font-family: Georgia, serif; font-weight: 600; white-space: nowrap; }
.formulado-tabela tbody th small { color: var(--muted); font-family: Inter, sans-serif; font-size: var(--texto-xs); font-weight: 400; }
.formulado-tabela tbody tr + tr th, .formulado-tabela tbody tr + tr td { border-top: 1px solid var(--line); }
.formulado-tabela tbody td:last-child { white-space: normal; }
.formulado-tabela tbody td:last-child .status, .formulado-tabela tbody td.status { white-space: normal; text-align: left; }

.formulado-unidade { margin: 13px 0 0; color: var(--muted); font-size: var(--texto-sm); }
.formulado-fonte { margin: 17px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--texto-sm); }

/* 360 px: os três campos da garantia continuam na mesma linha — a máscara
   00-00-00 só se lê como rótulo se ela não quebrar — e o botão passa a ocupar
   a largura toda, que é o alvo de toque confortável no celular. */
@media (max-width: 430px) {
  .formulado-campos input { width: 100%; min-width: 0; }
  .formulado-campos label { flex: 1 1 0; }
  .formulado-campos { width: 100%; }
  .formulado-entrada { gap: 13px; }
  .formulado-garantia { width: 100%; }
  .formulado-entrada .button { width: 100%; }
  .formulado-opcao header strong { font-size: 2rem; }
  .formulado-opcao { padding: 14px 13px; }
  .formulado-tabela { font-size: var(--texto-sm); }
  .formulado-tabela th, .formulado-tabela td { padding: 6px 2px; }
  .formulado-tabela thead th { font-size: var(--texto-xs); }
}

/* --- Formulado: escolha e folha impressa ---------------------------------- */
.formulado-escolher { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; cursor: pointer; }
.formulado-escolher input { width: 17px; height: 17px; flex: 0 0 auto; margin: 0; accent-color: var(--forest); cursor: pointer; }
.formulado-escolher:hover { color: var(--ink); }
.formulado-escolher input:focus-visible { outline: 2px solid var(--forest-2); outline-offset: 2px; }
.formulado-opcao:has(.formulado-escolher input:checked) { border-color: var(--forest-2); box-shadow: 0 0 0 2px rgba(35,88,65,.12); background: var(--surface); }
.formulado-opcao:has(.formulado-escolher input:checked) .formulado-escolher { color: var(--forest); font-weight: 700; }

.formulado-impressao { margin-top: 15px; }
.formulado-impressao-dose { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 17px; }
.formulado-impressao-dose > div { display: grid; }
.formulado-impressao-dose small { color: var(--muted); font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.formulado-impressao-dose strong { font-family: Georgia, serif; font-size: 1.9rem; line-height: 1.1; letter-spacing: -.04em; font-weight: 500; }
.formulado-impressao-dose span { color: var(--muted); font-size: .68rem; }
.formulado-impressao .formulado-tabela { margin-top: 17px; max-width: 620px; }
.formulado-impressao-nota { margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; }

@media (max-width: 430px) {
  .formulado-impressao-dose { gap: 15px; }
  .formulado-impressao-dose strong { font-size: 1.6rem; }
}

/* No papel o quadro do formulado é conteúdo da prescrição: sai inteiro, sem
   sombra e sem quebrar no meio, como os demais blocos da folha. */
@media print {
  .formulado-impressao { box-shadow: none; break-inside: avoid; }
  .formulado-impressao .formulado-tabela { max-width: none; }
}

/* === Acabamento visual ======================================================
   Escrito no fim do arquivo de propósito: assim estas regras vencem por ordem
   sem precisar de seletor mais específico nem de !important, e ficam juntas
   para quem for revisar.

   TODAS as regras abaixo atingem apenas o que o @media print esconde
   (.app-header, .hero, .stepper, form, footer, .reference-strip, .no-print,
   .result-actions, .toast) ou o que ele sobrescreve. A folha impressa não
   muda. */

/* --- Alvo de toque: 44 px -------------------------------------------------
   Medido em 360 px: seis controles ficavam abaixo do mínimo — "Sair" com 35,
   "Imprimir relatório" e "Calcular dose" com 36, a caixa de conferência com
   17×17, o resumo recolhível com 16 e o link de fonte com 15. Num celular, no
   campo, com a mão suja de terra, alvo de 17 px é alvo que erra. */
@media screen and (max-width: 720px) {
  .logout-button,
  .result-actions .button,
  .button.compact,
  #formuladoCalcular { min-height: 44px; }

  /* A caixa cresce e o rótulo inteiro vira área de toque, que é como ela já
     funciona no teclado. */
  .extraction-review { min-height: 44px; padding: var(--espaco-2) 0; align-items: center; }
  .extraction-review input[type="checkbox"] { width: 24px; height: 24px; }
  .formulado-escolher { min-height: 44px; align-items: center; }
  .formulado-escolher input { width: 24px; height: 24px; }

  /* Resumo recolhível e links de fonte ganham altura sem mudar o texto. */
  .micronutrient-extra > summary,
  .conferencia-bloco > summary { min-height: 44px; display: flex; align-items: center; }
  .source-entry a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Os links das fontes na faixa de rodape tinham 26 px de altura. */
  .reference-links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- Cabeçalho da tabela do formulado -------------------------------------
   "RECOMENDADO" transbordava 31 px em 360 px. O texto não muda; o que muda é
   o espaço em que ele cabe. */
@media screen and (max-width: 430px) {
  .formulado-tabela thead th { hyphens: auto; word-break: normal; overflow-wrap: anywhere; }
}

/* --- Estado pressionado ---------------------------------------------------
   O app tinha 11 regras de :hover e nenhuma de :active. No celular não existe
   hover: sem :active, tocar um botão não devolve resposta nenhuma até a tela
   trocar, e a pessoa toca de novo. */
.button { transition: transform var(--transicao), background-color var(--transicao), box-shadow var(--transicao); }
.button:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--sombra-sutil); }
.logout-button:active,
.link-button:active,
.step:active { transform: translateY(1px); }

/* Hover só onde existe ponteiro de verdade. Em tela de toque o :hover fica
   "grudado" depois do toque, e o botão parece pressionado sem estar. */
@media screen and (hover: none) {
  .button:hover { transform: none; }
}

/* --- Grade dos cartões de dose --------------------------------------------
   São seis cartões numa grade de cinco colunas: cinco na primeira linha e
   Micronutrientes sozinho na segunda, com quatro vazios ao lado, e 69 px mais
   baixo que os irmãos. Três colunas dão duas linhas cheias de três.

   O @media print sobrescreve esta grade para duas colunas, então a folha
   impressa não é afetada. */
@media screen and (min-width: 981px) {
  .result-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Ritmo vertical do formulário -----------------------------------------
   Os espaços entre blocos do formulário vinham de sete valores diferentes.
   Aqui eles passam a sair da escala. */
/* O :not(.results-panel) não é detalhe. O painel de resultado carrega as
   MESMAS classes "panel step-panel", e ele imprime: sem esta exclusão o raio
   dele caía de 22 px para 18 também na folha — exatamente o que não podia
   mudar. Conferido no site publicado antes de corrigir. */
.panel.step-panel:not(.results-panel) { border-radius: var(--raio-lg); }
.form-grid { gap: var(--espaco-3); }
.panel-actions { gap: var(--espaco-3); padding-top: var(--espaco-4); }

/* --- Campos ---------------------------------------------------------------
   Raio e sombra pela escala, e a transição que faltava no foco. */
.field input, .field select {
  border-radius: var(--raio-md);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

/* --- Base de recomendação -------------------------------------------------
   O aviso de compatibilidade fica junto do seletor: diz o que no laudo não
   serve para a base escolhida, sem apagar nada. */
/* O campo da base usa as tres linhas do subgrid (rotulo, seletor, notas): o
   titulo, o "Exige" e os avisos ficam empilhados num bloco so, sem sobrepor. */
.base-notas { display: grid; gap: 6px; align-content: start; min-width: 0; }
.base-notas > * { margin: 0; }
.base-disponibilidade { margin: 8px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--soft); color: var(--muted); font-size: var(--texto-lg); }
.base-compatibilidade { margin: 8px 0 0; padding: 10px 12px; border: 1px solid #efc6b8; border-radius: 10px; background: #fff0eb; color: #8d3c27; font-size: var(--texto-lg); }

/* Referência curta da dose, nas bases novas: obra, tabela e página. */
.card-ref { margin: 10px 0 0; padding-top: 8px; border-top: 1px dotted var(--line); color: var(--muted); font-size: var(--texto-sm); }

/* Faixas publicadas à espera da escolha do responsável técnico (R6).
   Reaproveita .application-block e .field; só a grade é própria. */
.faixas-lista { display: grid; gap: 14px; margin-top: 15px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.faixa-item { margin: 0; }
.faixa-item small { color: var(--muted); }
.faixas-acoes { display: flex; justify-content: flex-end; margin-top: 15px; }
@media screen and (max-width: 700px) { .faixas-acoes .button { width: 100%; } }
@media print { .faixas-acoes { display: none !important; } }