/* Cultivve — tema claro de campo: papel, verde-mata, terra e trigo */

:root {

  --paper: #f5efe2;

  --paper-2: #ece3cf;

  --card: #fffdf7;

  --ink: #26281f;

  --ink-2: #5d5c4f;

  --line: #dcd1b9;

  --line-2: #e9e1cd;

  --green: #2f5d3a;

  --green-d: #244a30;

  --green-dd: #1a3622;

  --green-l: #e4ecd9;

  --soil: #7d5230;

  --wheat: #d0a13f;

  --wheat-d: #a87a1e;

  --wheat-l: #f5e8c8;

  --good: #3b7a3a;

  --good-l: #e2eed9;

  --warn: #b07a12;

  --warn-l: #f7ebcc;

  --bad: #a63d2c;

  --bad-l: #f6e0da;

  --info: #2f5f86;

  --info-l: #e1ebf3;

  --radius: 10px;

  --shadow: 0 1px 0 rgba(60, 45, 20, .04), 0 2px 8px rgba(60, 45, 20, .06);

  --shadow-2: 0 2px 4px rgba(60, 45, 20, .06), 0 8px 24px rgba(60, 45, 20, .10);

  --serif: Merriweather, Georgia, "Times New Roman", serif;

  --sans: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --safe-b: env(safe-area-inset-bottom, 0px);

  --safe-t: env(safe-area-inset-top, 0px);

  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;

}



* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {

  margin: 0;

  background: var(--paper);

  color: var(--ink);

  font: 16.5px/1.55 var(--sans);

  padding-top: calc(64px + var(--safe-t));

  padding-bottom: calc(74px + var(--safe-b));

  overflow-x: hidden;

}

h1, h2, h3 { font-family: var(--serif); line-height: 1.25; margin: 0 0 .5em; color: var(--green-dd); font-weight: 700; }

p { margin: 0 0 1em; }

.muted { color: var(--ink-2); }

.small { font-size: 14px; }

b, strong { font-weight: 700; }



.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.ico-xl { width: 40px; height: 40px; }

.ico-inline { width: 17px; height: 17px; vertical-align: -3px; }



/* ---------- Barra superior */

.topbar {

  position: fixed; inset: 0 0 auto 0; z-index: 20;

  height: calc(64px + var(--safe-t)); padding: var(--safe-t) 16px 0;

  display: flex; align-items: center; justify-content: space-between; gap: 12px;

  background: var(--green-d); color: #f4ecd8;

  border-bottom: 3px solid var(--wheat);

  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);

}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

.brand img { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }

.brand strong { display: block; font-family: var(--serif); font-size: 19px; font-weight: 900; letter-spacing: .01em; color: #fff8e6; line-height: 1.1; }

.brand small { display: block; font-size: 12.5px; color: #c9d6bf; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }



main { max-width: 1080px; margin: 0 auto; padding: 20px 16px 8px; }



/* ---------- Barra de abas */

.tabbar {

  position: fixed; inset: auto 0 0 0; z-index: 20;

  display: grid; grid-template-columns: repeat(5, 1fr);

  padding-bottom: var(--safe-b);

  background: var(--card);

  border-top: 1px solid var(--line);

  box-shadow: 0 -2px 10px rgba(60, 45, 20, .06);

}

.tab {

  position: relative; appearance: none; border: 0; background: none; color: var(--ink-2);

  display: flex; flex-direction: column; align-items: center; gap: 3px;

  padding: 10px 4px 9px; font: 600 12.5px var(--sans); cursor: pointer;

  transition: color .2s;

}

.tab::before {

  content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px;

  background: var(--green); transform: scaleX(0); transition: transform .3s var(--ease);

}

.tab.active { color: var(--green); }

.tab.active::before { transform: scaleX(1); }

.tab.active .ico { animation: pop .35s var(--ease); }



/* ---------- Botões */

.btn {

  appearance: none; border: 1.5px solid transparent; border-radius: 8px;

  display: inline-flex; align-items: center; justify-content: center; gap: 9px;

  min-height: 48px; padding: 11px 18px; font: 700 16px var(--sans); cursor: pointer;

  color: var(--ink); background: var(--paper-2); text-decoration: none;

  transition: transform .12s var(--ease), background .2s, box-shadow .2s, border-color .2s;

  position: relative; overflow: hidden;

}

.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary { background: var(--green); color: #fffaf0; box-shadow: 0 2px 0 var(--green-dd); }

.btn-primary:hover { background: var(--green-d); }

.btn-wheat { background: var(--wheat); color: #2c2108; box-shadow: 0 2px 0 var(--wheat-d); }

.btn-wheat:hover { background: #d9ad50; }

.btn-ghost { background: var(--card); border-color: var(--line); color: var(--green-d); }

.btn-ghost:hover { border-color: var(--green); }

.btn-outline-light { background: transparent; border-color: rgba(255, 248, 230, .55); color: #fff8e6; }

.btn-outline-light:hover { background: rgba(255, 255, 255, .08); }

.btn-lg { min-height: 54px; padding: 14px 22px; font-size: 17px; }

.btn-sm { min-height: 38px; padding: 7px 13px; font-size: 14.5px; border-radius: 7px; }

.btn-block { width: 100%; }

.btn[disabled] { opacity: .5; pointer-events: none; }

.btn .ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .18; transform: scale(0); animation: ripple .55s ease-out forwards; pointer-events: none; }

.row { display: flex; flex-wrap: wrap; }

.gap { gap: 10px; }

.row > .btn { flex: 1 1 150px; }



/* ---------- Início */

.hero {

  margin: -20px -16px 0; padding: 30px 16px 34px; color: #f1ead6;

  background:

    linear-gradient(180deg, rgba(26, 54, 34, .0) 60%, rgba(26, 54, 34, .35)),

    repeating-linear-gradient(100deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 26px),

    linear-gradient(160deg, #2f5d3a 0%, #244a30 55%, #3a3a22 100%);

  border-bottom: 6px solid var(--soil);

  position: relative;

}

.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 6px; background: repeating-linear-gradient(90deg, var(--wheat) 0 18px, transparent 18px 26px); opacity: .55; }

.hero-inner { max-width: 1080px; margin: 0 auto; }

.eyebrow { display: inline-block; color: #2c2108; background: var(--wheat-l); padding: 4px 11px; border-radius: 4px; font-size: 13px; font-weight: 700; letter-spacing: .02em; margin-bottom: 14px; }

.hero h1 { font-size: clamp(25px, 6.4vw, 40px); color: #fff8e6; max-width: 780px; font-weight: 900; letter-spacing: -.005em; }

.hero p { max-width: 640px; color: #dfe6d2; font-size: 17px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.hero-actions .btn { flex: 1 1 220px; max-width: 320px; }



.section-title { font-size: 20px; margin: 34px 0 14px; display: flex; align-items: center; gap: 12px; }

.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

.page-title { font-size: 26px; margin-bottom: 4px; }

.page-sub { margin-bottom: 16px; }



.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.steps li { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }

.steps p { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }

.step-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--wheat-l); color: var(--soil); font: 900 16px var(--serif); border: 1.5px solid var(--wheat); }



.feature-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.feature, .calc-tile {

  appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer;

  display: flex; gap: 14px; align-items: flex-start;

  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px;

  box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;

}

.feature:hover, .calc-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: #cbbd9c; }

.feature:active, .calc-tile:active { transform: translateY(0); }

.fi { flex: none; width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: var(--green-l); color: var(--green); border: 1px solid #cfdcc0; }

.feature h3, .calc-tile h3 { font-size: 16.5px; margin: 1px 0 3px; }

.feature p, .calc-tile p { color: var(--ink-2); font-size: 14.5px; margin: 0; line-height: 1.45; }

.calc-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.calc-tile .chev { margin-left: auto; align-self: center; color: var(--line); transition: transform .2s, color .2s; }

.calc-tile:hover .chev { color: var(--green); transform: translateX(3px); }



.topic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); column-gap: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px; box-shadow: var(--shadow); }

.topic { padding: 14px 0; border: 0; border-bottom: 1px dashed var(--line); cursor: pointer; background: none; text-align: left; color: inherit; font: inherit; display: flex; gap: 10px; align-items: center; }

.topic:last-child { border-bottom: 0; }

.topic h3 { font-size: 16px; margin-bottom: 2px; }

.topic p { color: var(--ink-2); margin: 0; font-size: 14.5px; }

.topic .chev { margin-left: auto; color: var(--wheat-d); transition: transform .2s; }

.topic:hover .chev { transform: translateX(3px); }



.disclaimer { color: var(--ink-2); font-size: 14px; margin-top: 30px; border-left: 4px solid var(--wheat); background: var(--wheat-l); padding: 12px 14px; border-radius: 0 8px 8px 0; }

.foot { text-align: center; color: #9a927c; font-size: 13px; padding: 20px 0 6px; font-family: var(--serif); }



/* ---------- Painéis e formulários */

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; margin-bottom: 16px; box-shadow: var(--shadow); }

.panel.center { text-align: center; max-width: 480px; margin: 8px auto; }

.panel.center .btn { margin-top: 10px; }

.perm-icon { width: 80px; height: 80px; border-radius: 50%; margin: 4px auto 16px; display: grid; place-items: center; background: var(--green-l); color: var(--green); border: 2px solid #cfdcc0; animation: breathe 2.6s ease-in-out infinite; }

.panel h2 { font-size: 20px; }

.tips { text-align: left; margin: 16px 0 0; padding: 12px 14px 12px 32px; background: var(--paper); border-radius: 8px; color: var(--ink-2); font-size: 14.5px; }

.tips li + li { margin-top: 4px; }



#laudoForm fieldset { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 12px; box-shadow: var(--shadow); min-width: 0; }

fieldset { border: 0; padding: 0; margin: 0 0 18px; }

legend { font-family: var(--serif); font-weight: 700; font-size: 16.5px; color: var(--green-dd); padding: 0; margin-bottom: 12px; float: left; width: 100%; display: flex; align-items: center; gap: 10px; }

legend + * { clear: both; }

.legend-n { width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff8e6; display: grid; place-items: center; font: 700 13px var(--sans); flex: none; }

.fields { display: grid; gap: 12px; align-items: end; grid-template-columns: repeat(auto-fill, minmax(min(100%, 145px), 1fr)); }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.field label { font-size: 14px; color: var(--ink); font-weight: 600; }

.field .hint { font-size: 12.5px; color: var(--ink-2); }

input, select {

  width: 100%; min-width: 0; min-height: 48px; font: 17px var(--sans); color: var(--ink);

  background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px;

  transition: border-color .2s, box-shadow .2s, background .3s;

}

select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235d5c4f' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }

input:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 93, 58, .18); }

input.ocr-filled { border-color: #8fb0cc; background: var(--info-l); animation: fillIn .8s var(--ease) both; }

.input-unit { display: flex; }

.input-unit input { border-radius: 8px 0 0 8px; }

.input-unit select { width: auto; flex: none; border-radius: 0 8px 8px 0; border-left: 0; font-size: 14px; padding: 0 26px 0 8px; background-color: var(--paper); background-position: right 8px center; }



/* ---------- Alertas */

.alert { border-radius: 8px; padding: 12px 14px; font-size: 15px; margin: 12px 0; text-align: left; border: 1px solid; border-left-width: 4px; animation: rise .35s var(--ease) both; }

.alert-bad { color: #6e2418; background: var(--bad-l); border-color: #e3b5aa; border-left-color: var(--bad); }

.alert-warn { color: #6a4a08; background: var(--warn-l); border-color: #e8d29a; border-left-color: var(--warn); }

.alert-good { color: #24502a; background: var(--good-l); border-color: #bcd5ad; border-left-color: var(--good); }

.alert-info { color: #1f4466; background: var(--info-l); border-color: #b8cde0; border-left-color: var(--info); }

.alert ul, .alert ol { margin: 6px 0 0; padding-left: 18px; }



/* ---------- Câmera */

.camera { position: fixed; inset: 0; z-index: 100; height: 100vh; height: 100dvh; background: #000; display: flex; flex-direction: column; animation: fade .25s ease both; }

.camera video { flex: 1; width: 100%; height: 100%; object-fit: cover; min-height: 0; }

.cam-guide { position: absolute; inset: calc(84px + var(--safe-t)) 20px calc(150px + var(--safe-b)); pointer-events: none; display: flex; justify-content: center; }

.cam-guide i { position: absolute; width: 34px; height: 34px; border: 4px solid var(--wheat); animation: guide 1.8s ease-in-out infinite; }

.cam-guide i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }

.cam-guide i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }

.cam-guide i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }

.cam-guide i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }

.cam-guide span { margin-top: 14px; background: rgba(20, 30, 20, .7); color: #fff8e6; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 99px; height: fit-content; }

.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

.cam-flash.go { animation: flash .35s ease-out; }

.cam-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px calc(26px + var(--safe-b)); display: flex; align-items: center; justify-content: space-around; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }

.cam-top { position: absolute; top: calc(16px + var(--safe-t)); left: 16px; right: 16px; display: flex; justify-content: space-between; }

.cam-side { appearance: none; background: none; border: 0; padding: 0; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #fff8e6; font: inherit; cursor: pointer; }

.cam-side small { font: 600 13px var(--sans); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

.cam-side:active .cam-btn { background: rgba(255, 255, 255, .35); }

.cam-btn { width: 50px; height: 50px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s; }

.cam-btn.on { background: var(--wheat); color: #2c2108; }

.cam-shutter { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff8e6; background: rgba(255, 255, 255, .25); cursor: pointer; transition: transform .1s, background .1s; box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); }

.cam-shutter:active { transform: scale(.92); background: #fff8e6; }



.shot-wrap { position: relative; border-radius: 8px; overflow: hidden; background: #1d1d18; margin-bottom: 14px; border: 1px solid var(--line); }

.shot { width: 100%; max-height: 58vh; object-fit: contain; display: block; }

.scanline { display: none; position: absolute; left: 0; right: 0; height: 3px; background: var(--wheat); box-shadow: 0 0 16px 4px rgba(208, 161, 63, .7); top: 0; }

.shot-wrap.reading .scanline { display: block; animation: scan 1.8s ease-in-out infinite alternate; }

.shot-wrap.reading::after { content: ""; position: absolute; inset: 0; background: rgba(36, 74, 48, .18); }

.progress { margin-bottom: 14px; }

.progress-bar { height: 10px; background: var(--paper-2); border-radius: 99px; overflow: hidden; margin-bottom: 8px; border: 1px solid var(--line); }

.progress-bar span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(45deg, var(--green) 0 10px, #3c7048 10px 20px); background-size: 28px 28px; transition: width .3s var(--ease); animation: stripes 1s linear infinite; }



/* ---------- Relatório de resultados */

.report-head { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--green); }

.report-head .rh-ico { width: 40px; height: 40px; border-radius: 8px; background: var(--green); color: #fff8e6; display: grid; place-items: center; flex: none; }

.report-head h2 { margin: 0; font-size: 21px; }

.report-head .muted { display: block; font-size: 14px; font-family: var(--sans); font-weight: 400; }

.sub-title { font-size: 16px; margin: 16px 0 8px; color: var(--soil); }

.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 155px), 1fr)); margin-bottom: 14px; }

.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }

.kpi .k-label { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }

.kpi .k-value { font-family: var(--serif); font-size: 25px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.25; }

.kpi .k-unit { font-family: var(--sans); font-size: 14px; color: var(--ink-2); font-weight: 600; margin-left: 4px; }

.kpi .k-sub { font-size: 13px; color: var(--ink-2); }

.kpi.hl { background: var(--green); border-color: var(--green-d); }

.kpi.hl .k-label, .kpi.hl .k-sub, .kpi.hl .k-unit { color: #d6e2cc; }

.kpi.hl .k-value { color: #fff8e6; }



.indicators { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }

.ind { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; box-shadow: var(--shadow); }

.ind-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }

.ind .i-name { font-weight: 700; font-size: 15.5px; }

.ind .i-val { font: 900 19px var(--serif); white-space: nowrap; font-variant-numeric: tabular-nums; }

.ind .i-val small { font: 600 13px var(--sans); color: var(--ink-2); }

.ind .i-range { font-size: 13px; color: var(--ink-2); }

.badge { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; margin-top: 2px; }

.badge.good { background: var(--good-l); color: var(--good); }

.badge.warn { background: var(--warn-l); color: var(--warn); }

.badge.bad { background: var(--bad-l); color: var(--bad); }

.ind .i-diag { font-size: 14.5px; color: var(--ink-2); margin-top: 8px; }

.scale { position: relative; margin: 12px 0 4px; }

.scale-track { display: flex; gap: 2px; height: 9px; border-radius: 99px; overflow: hidden; }

.scale-track span { flex: 1; }

.scale-track .good { background: #a9c99a; }

.scale-track .warn { background: #e6cc8a; }

.scale-track .bad { background: #dfa496; }

.scale-mark { position: absolute; top: -5px; left: var(--p); width: 4px; height: 19px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--card); animation: mark 1s var(--ease) both; }



.formula { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; background: var(--paper); border: 1px dashed #cdbf9f; border-radius: 8px; padding: 11px 13px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 8px 0 12px; color: #3d3a2c; }



.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }

th, td { padding: 10px 10px; border-bottom: 1px solid var(--line-2); text-align: right; white-space: nowrap; }

th:first-child, td:first-child { text-align: left; }

th { color: var(--green-dd); font-size: 13px; font-weight: 700; background: var(--paper); text-transform: uppercase; letter-spacing: .03em; }

tr:last-child td { border-bottom: 0; }

tbody tr { transition: background .2s; }

tbody tr:hover { background: #faf6ea; }

tr.best td { background: var(--good-l); }

.tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin-left: 6px; vertical-align: 1px; }

.tag-good { background: var(--good); color: #fff; }

td input { min-height: 38px; padding: 6px 8px; font-size: 15px; width: 96px; text-align: right; }



/* ---------- Semáforo */

.light { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); margin: 6px 0 12px; box-shadow: var(--shadow); }

.lamps { display: flex; flex-direction: column; gap: 6px; background: #3a3a30; padding: 7px; border-radius: 12px; }

.lamp { width: 18px; height: 18px; border-radius: 50%; background: #5a5a4c; transition: background .3s, box-shadow .3s; }

.lamp.r.on { background: #e0533c; box-shadow: 0 0 12px #e0533c; animation: glow 1.6s ease-in-out infinite; }

.lamp.y.on { background: #f0b429; box-shadow: 0 0 12px #f0b429; animation: glow 1.6s ease-in-out infinite; }

.lamp.g.on { background: #4caf50; box-shadow: 0 0 12px #4caf50; animation: glow 1.6s ease-in-out infinite; }



.tri-wrap { max-width: 440px; margin: 8px auto 12px; }

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

.tri-dot { animation: dot .7s var(--ease) both; transform-box: fill-box; transform-origin: center; }



.conv-list { display: grid; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 14px; box-shadow: var(--shadow); }

.conv-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line-2); font-variant-numeric: tabular-nums; }

.conv-row:last-child { border-bottom: 0; }

.conv-row b { white-space: nowrap; color: var(--green-dd); }



.calc-out h3 { font-size: 17px; margin: 18px 0 8px; }

.back { margin-bottom: 14px; }



/* ---------- Sheet / toast */

.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(30, 30, 20, .5); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease both; }

.sheet-card { background: var(--card); border-radius: 16px 16px 0 0; padding: 22px 18px calc(22px + var(--safe-b)); width: 100%; max-width: 520px; animation: sheetUp .35s var(--ease) both; }

.toast { position: fixed; left: 50%; bottom: calc(88px + var(--safe-b)); z-index: 70; background: var(--green-dd); color: #fff8e6; padding: 11px 18px; border-radius: 8px; font-size: 15px; font-weight: 600; max-width: calc(100% - 32px); box-shadow: var(--shadow-2); animation: toastIn .3s var(--ease) both; transform: translateX(-50%); }



[hidden] { display: none !important; }



/* ---------- Animações */

.view:not([hidden]) { animation: viewIn .26s var(--ease) backwards; }

.stagger > * { animation: rise .5s var(--ease) backwards; animation-delay: calc(min(var(--i, 0), 8) * 45ms); }

.reveal > * { animation: rise .5s var(--ease) backwards; animation-delay: calc(min(var(--i, 0), 6) * 55ms); }

@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

@keyframes fade { from { opacity: 0; } }

@keyframes pop { 40% { transform: scale(1.18); } }

@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

@keyframes breathe { 50% { box-shadow: 0 0 0 10px rgba(47, 93, 58, .08); } }

@keyframes guide { 50% { transform: scale(.94); opacity: .75; } }

@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }

@keyframes scan { from { top: 0; } to { top: calc(100% - 3px); } }

@keyframes stripes { to { background-position: 28px 0; } }

@keyframes mark { from { left: 0; opacity: 0; } 30% { opacity: 1; } }

@keyframes glow { 50% { filter: brightness(1.25); } }

@keyframes dot { from { transform: scale(0); } 70% { transform: scale(1.3); } }

@keyframes fillIn { from { background: #cfe0ee; } }

@keyframes sheetUp { from { transform: translateY(100%); } }

@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } }



@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

}



@media (min-width: 760px) {

  body { padding-bottom: calc(74px + var(--safe-b)); }

  .hero { padding: 48px 24px 52px; margin: -20px -16px 0; }

  .brand small { font-size: 13px; }

  .fields { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

}



@media print {

  .topbar, .tabbar, #laudoForm, .no-print, .page-sub, #ocrBanner { display: none !important; }

  body { background: #fff; padding: 0; }

  .kpi, .ind, .table-wrap { box-shadow: none; break-inside: avoid; }

  .kpi.hl { background: #fff; border: 2px solid var(--green); }

  .kpi.hl .k-value { color: var(--green-dd); }

  .kpi.hl .k-label, .kpi.hl .k-sub, .kpi.hl .k-unit { color: var(--ink-2); }

}

.cam-top .cam-btn { background: rgba(0, 0, 0, .45); }



/* =================================================================== v1.1: IA, Ajuda, instalação, atualização */

.tab { font-size: 11.5px; }

.btn-note { font-size: 12.5px; font-weight: 600; opacity: .8; margin-left: 2px; }



/* Faixa de atualização */

.update-bar {

  position: fixed; z-index: 30; left: 10px; right: 10px; top: calc(70px + var(--safe-t));

  display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px;

  background: var(--green-dd); color: #fff8e6; border-radius: 10px; border: 1px solid #3c6a47;

  box-shadow: var(--shadow-2); animation: dropIn .45s var(--ease) both; max-width: 640px; margin: 0 auto;

}

.update-bar .ico { color: var(--wheat); flex: none; animation: spinSlow 3s linear infinite; }

.update-bar div { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; }

.update-bar span { display: block; color: #c9d6bf; font-size: 13px; }

.update-bar .btn { flex: none; }

@keyframes dropIn { from { opacity: 0; transform: translateY(-16px); } }

@keyframes spinSlow { to { transform: rotate(360deg); } }



/* Instalação obrigatória */

body.gated { overflow: hidden; }

.gate {

  position: fixed; inset: 0; z-index: 200; overflow-y: auto;

  background: linear-gradient(170deg, #2f5d3a 0%, #1a3622 70%, #3a3a22 100%);

  display: flex; align-items: flex-start; justify-content: center;

  padding: calc(28px + var(--safe-t)) 16px calc(28px + var(--safe-b));

  animation: fade .3s ease both;

}

.gate-card { width: 100%; max-width: 440px; background: var(--card); border-radius: 18px; padding: 26px 20px 20px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: rise .5s var(--ease) both; }

.gate-logo { border-radius: 20px; box-shadow: var(--shadow-2); animation: pop 1.2s var(--ease) .3s both; }

.gate-card h1 { font-size: 25px; margin: 16px 0 6px; }

.gate-lead { color: var(--ink-2); }

.gate-steps { list-style: none; padding: 0; margin: 16px 0; text-align: left; display: grid; gap: 10px; }

.gate-steps li { display: flex; gap: 12px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px; animation: rise .45s var(--ease) both; }

.gate-steps li:nth-child(2) { animation-delay: .1s; }

.gate-steps li:nth-child(3) { animation-delay: .2s; }

.gate-steps li > span { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff8e6; display: grid; place-items: center; font: 700 14px var(--sans); }

.gate-install { margin: 18px 0 6px; animation: pulse 2s ease-in-out infinite; }

.gate-ok { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; margin: 14px 0; border-radius: 12px; background: var(--good-l); color: var(--good); }

.gate-ok p { color: var(--ink); margin: 0; }

.gate-wait { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 0; }

.gate-arrow { color: var(--wheat-d); animation: bounce 1.2s ease-in-out infinite; }

.gate-arrow .ico { width: 30px; height: 30px; }

.gate-foot { font-size: 13px; color: var(--ink-2); margin: 10px 0 0; }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--green); animation: spinSlow .8s linear infinite; }

@keyframes pulse { 50% { box-shadow: 0 2px 0 var(--wheat-d), 0 0 0 8px rgba(208,161,63,.25); } }

@keyframes bounce { 50% { transform: translateY(8px); } }



/* Barra indeterminada (leitura com IA) */

.progress.indet .progress-bar span { width: 40% !important; animation: indet 1.3s ease-in-out infinite, stripes 1s linear infinite; }

@keyframes indet { from { margin-left: -40%; } to { margin-left: 100%; } }



/* Avatares e cabeçalho do chat */

.avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 900 19px var(--serif); }

.avatar-ia { background: var(--green); color: #fff8e6; }

.avatar-ana { background: var(--wheat-l); color: var(--soil); border: 2px solid var(--wheat); }

.chat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.chat-head .page-title { margin: 0; font-size: 22px; }

.chat-head p { margin: 0; font-size: 14px; }

.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4caf50; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(76,175,80,.2); animation: glow 2s ease-in-out infinite; }



/* Chat */

.chat { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); min-height: calc(100dvh - 300px); }

.chat-log { flex: 1; padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 10px; }

.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; animation: rise .3s var(--ease) both; }

.msg.user { align-self: flex-end; }

.msg-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff8e6; display: grid; place-items: center; font: 900 13px var(--serif); }

.msg-av .ico { width: 17px; height: 17px; }

.msg-body { padding: 10px 13px; border-radius: 14px; font-size: 15.5px; line-height: 1.5; }

.msg-body p { margin: 0 0 .5em; }

.msg-body p:last-child, .msg-body ul:last-child, .msg-body ol:last-child { margin-bottom: 0; }

.msg-body ul, .msg-body ol { margin: 0 0 .5em; padding-left: 20px; }

.msg.bot .msg-body { background: var(--paper); border: 1px solid var(--line-2); border-bottom-left-radius: 4px; }

.msg.user .msg-body { background: var(--green); color: #fff8e6; border-bottom-right-radius: 4px; }

.msg.error .msg-body { background: var(--bad-l); color: #6e2418; }

.typing { display: inline-flex; gap: 4px; padding: 4px 0; }

.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); opacity: .4; animation: typing 1.2s ease-in-out infinite; }

.typing i:nth-child(2) { animation-delay: .15s; }

.typing i:nth-child(3) { animation-delay: .3s; }

@keyframes typing { 30% { opacity: 1; transform: translateY(-3px); } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 12px 10px; }

.chip { appearance: none; border: 1.5px solid #cfdcc0; background: var(--green-l); color: var(--green-d); font: 600 14px var(--sans); padding: 8px 12px; border-radius: 99px; cursor: pointer; text-align: left; transition: background .2s, transform .1s; animation: rise .4s var(--ease) both; }

.chip:active { transform: scale(.97); }

.chat-input { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--line-2); position: sticky; bottom: calc(66px + var(--safe-b)); background: var(--card); border-radius: 0 0 14px 14px; }

.chat-input textarea { flex: 1; resize: none; min-height: 48px; max-height: 140px; font: 16px/1.4 var(--sans); color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; }

.chat-input textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,93,58,.18); }

.send { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--green); color: #fff8e6; display: grid; place-items: center; cursor: pointer; transition: transform .1s, opacity .2s; }

.send:active { transform: scale(.92); }

.send[disabled] { opacity: .45; }

.chat-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 12px 10px; font-size: 12.5px; color: var(--ink-2); }

.link-btn { appearance: none; border: 0; background: none; color: var(--green); font: 700 13px var(--sans); cursor: pointer; padding: 4px; white-space: nowrap; }



/* Pergunta à IA nos resultados */

.ask-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; padding: 14px; background: var(--green-l); border: 1px solid #cfdcc0; border-radius: var(--radius); }

.ask-ai > div { flex: 1 1 180px; }

.ask-ai p { margin: 0; }

.ask-ai .btn { flex: 1 1 100%; }

@media (min-width: 600px) { .ask-ai .btn { flex: 0 0 auto; } }



/* FAQ */

.faq { display: grid; gap: 8px; }

.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }

.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px; font-weight: 700; font-size: 15.5px; color: var(--green-dd); }

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary span { flex: 1; }

.faq-item summary .ico { color: var(--wheat-d); transition: transform .3s var(--ease); }

.faq-item[open] summary .ico { transform: rotate(180deg); }

.faq-item[open] summary { border-bottom: 1px dashed var(--line); }

.faq-a { padding: 12px 14px 14px; color: var(--ink-2); font-size: 15px; animation: rise .3s var(--ease) both; }

.faq-a p { margin: 0; }

.talk-card { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; padding: 16px; background: var(--card); border: 1.5px solid var(--wheat); border-radius: 14px; box-shadow: var(--shadow); }

.talk-card > div { flex: 1 1 200px; }

.talk-card p { margin: 2px 0 0; font-size: 14.5px; }

.ai-card .fi { background: var(--green); color: #fff8e6; border-color: var(--green-d); }



/* =================================================================== v1.2: planta daninha, amostras, atualização */

.weed-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); margin-bottom: 12px; }

.weed-head { display: flex; gap: 14px; align-items: flex-start; }

.weed-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; border: 2px solid var(--line); flex: none; animation: pop .6s var(--ease) both; }

.weed-head h2 { font-size: 24px; margin: 0; }

.sci { font-style: italic; color: var(--soil); font-family: var(--serif); margin: 2px 0 4px; }

.w-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.w-tag { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--green-l); color: var(--green-d); border: 1px solid #cfdcc0; }

.w-tag.mod { background: var(--wheat-l); color: var(--soil); border-color: #e7d3a3; margin-left: auto; }

.conf { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; font-size: 14px; }

.conf-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); }

.conf-bar span { display: block; height: 100%; width: var(--w); border-radius: 99px; animation: grow 1s var(--ease) both; }

.conf.good .conf-bar span { background: var(--good); } .conf.good b { color: var(--good); }

.conf.warn .conf-bar span { background: var(--warn); } .conf.warn b { color: var(--warn); }

.conf.bad .conf-bar span { background: var(--bad); } .conf.bad b { color: var(--bad); }

@keyframes grow { from { width: 0; } }

.w-list { margin: 0 0 6px; padding-left: 20px; color: var(--ink); }

.w-list li + li { margin-top: 4px; }

.herb-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-bottom: 12px; }

.herb { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); animation: rise .45s var(--ease) both; animation-delay: calc(min(var(--i, 0), 6) * 55ms); }

.herb-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.herb-top b { font-size: 16.5px; color: var(--green-dd); }

.hrac { display: inline-block; margin: 6px 0 4px; font: 700 12.5px var(--sans); color: #fff8e6; background: var(--soil); padding: 2px 8px; border-radius: 6px; }

.herb p { margin: 4px 0 0; font-size: 14.5px; }



.samples { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #b8cde0; }

.samples p { margin: 0 0 8px; }

.sample-chip { appearance: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 0 6px 6px 0; padding: 8px 12px; border-radius: 10px; border: 1.5px solid #b8cde0; background: #fff; color: var(--ink); font: inherit; cursor: pointer; text-align: left; transition: background .2s, border-color .2s, transform .1s; }

.sample-chip b { font-size: 15px; color: var(--info); }

.sample-chip span { font-size: 12.5px; color: var(--ink-2); }

.sample-chip.on { background: var(--info); border-color: var(--info); }

.sample-chip.on b, .sample-chip.on span { color: #fff; }

.sample-chip:active { transform: scale(.97); }



.version-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; padding: 13px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

.version-card > .ico { color: var(--green); }

.version-card > div { flex: 1 1 180px; }

.version-card p { margin: 2px 0 0; }



/* =================================================================== v1.3: guia offline, catálogo, histórico, compartilhar */

.seg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; }

.seg-tabs button { appearance: none; border: 0; background: none; border-radius: 9px; padding: 9px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; font: 700 13px var(--sans); color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }

.seg-tabs button.on { background: var(--card); color: var(--green-d); box-shadow: var(--shadow); }

.seg-tabs .ico { width: 20px; height: 20px; }



.key-panel { padding-bottom: 10px; }

.key-q { margin-bottom: 14px; animation: rise .35s var(--ease) both; }

.key-q p { margin: 0 0 8px; }

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

.key-opt { appearance: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 13px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 600 14.5px var(--sans); cursor: pointer; text-align: left; transition: background .2s, border-color .2s, transform .1s; }

.key-opt small { font-weight: 400; font-size: 12px; color: var(--ink-2); }

.key-opt.on { background: var(--green); border-color: var(--green); color: #fff8e6; }

.key-opt.on small { color: #d6e2cc; }

.key-opt.skip { border-style: dashed; color: var(--ink-2); }

.key-opt:active { transform: scale(.97); }



.weed-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 165px), 1fr)); }

.weed-tile { appearance: none; padding: 0 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit; display: flex; flex-direction: column; animation: rise .4s var(--ease) both; animation-delay: calc(min(var(--i, 0), 6) * 35ms); transition: transform .2s var(--ease), box-shadow .2s; }

.weed-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

.weed-tile img, .weed-tile .hist-ph { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper-2); display: block; }

.weed-tile b { padding: 8px 10px 0; font-size: 15px; color: var(--green-dd); }

.weed-tile i { padding: 0 10px; font-size: 12.5px; color: var(--soil); font-family: var(--serif); }

#catSearch { margin-top: 2px; }



.hist-list { display: grid; gap: 8px; margin-bottom: 14px; }

.hist-item { appearance: none; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }

.hist-item img, .hist-ph { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; flex: none; background: var(--paper-2); display: block; }

.hist-item > div { flex: 1; min-width: 0; }

.hist-item b { display: block; color: var(--green-dd); }

.hist-item span { display: block; font-size: 13px; color: var(--ink-2); }

.hist-item .ico { color: var(--wheat-d); }

.hist-item.pending { border-style: dashed; border-color: var(--wheat); background: var(--wheat-l); cursor: default; }



.w-src { display: inline-block; font-size: 12px; font-weight: 700; color: var(--info); background: var(--info-l); padding: 2px 9px; border-radius: 99px; margin-bottom: 10px; }

.ref-photo { margin: 12px 0 4px; }

.ref-photo img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); display: block; animation: fade .4s ease both; }

.ref-photo span { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 4px; }

.sim-photo { margin-top: 0; }

.sim-photo img { max-height: 220px; }

.herb.dessec { border-left-color: var(--wheat); }



.key-jump { position: sticky; bottom: calc(80px + var(--safe-b)); z-index: 5; width: 100%; margin: 6px 0 4px; box-shadow: var(--shadow-2); animation: rise .3s var(--ease) both; }



/* ===================================================================== Cultivve 2.0 */

/* Topo: atalhos para Assistente e Ajuda */

.top-actions { display: flex; gap: 6px; margin-left: auto; }

.top-btn { appearance: none; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff8e6; border-radius: 99px; padding: 6px 11px; display: flex; align-items: center; gap: 6px; font: 600 13px var(--sans); cursor: pointer; transition: background .2s; }

.top-btn:hover { background: rgba(255, 255, 255, .16); }

.top-btn .ico { width: 18px; height: 18px; }

@media (max-width: 420px) { .top-btn span { display: none; } .top-btn { padding: 7px; } }



/* Início */

.hero-v2 { padding-bottom: 26px; }

.hero-v2 .hello { font: 600 15px var(--sans); color: #c9d6bf; margin: 0 0 6px; }

.hero-v2 h1 { margin-top: 10px; }

.lic-chip { display: inline-block; font: 700 13px var(--sans); padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, .12); color: #fff8e6; border: 1px solid rgba(255, 255, 255, .2); text-decoration: none; }

.lic-chip.trial { background: var(--wheat); color: #2c2108; border-color: var(--wheat-d); }

.lic-chip.ok { background: rgba(120, 180, 110, .25); }

.lic-chip.admin { background: rgba(208, 161, 63, .3); }

.quick { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin: 18px 0 8px; }

@media (min-width: 760px) { .quick { grid-template-columns: repeat(4, 1fr); } }

.q-item { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s; }

.q-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

.q-item b { font-size: 15px; line-height: 1.2; margin-top: 6px; }

.q-item small { color: var(--ink-2); font-size: 12.5px; line-height: 1.25; }

.q-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--green-l); color: var(--green-d); display: grid; place-items: center; }

.q-ic .ico { width: 22px; height: 22px; }

.q-main { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; background: var(--green); border-color: var(--green-d); color: #fff8e6; }

.q-main .q-ic { grid-row: span 2; background: var(--wheat); color: #2c2108; width: 46px; height: 46px; }

.q-main b { margin: 0; font-size: 17px; }

.q-main small { color: #d6e2cc; }



/* Sub-navegação do Solo e seletor Daninhas/Doenças/Insetos */

.subnav { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 2px; scrollbar-width: none; }

.subnav a { flex: 1 0 auto; text-align: center; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: 700 13.5px var(--sans); text-decoration: none; white-space: nowrap; }

.subnav a.on { background: var(--green); border-color: var(--green-d); color: #fff8e6; }

.kind-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }

.kind-switch button { appearance: none; border: 2px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 13.5px var(--sans); color: var(--ink-2); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }

.kind-switch button.on { border-color: var(--green); background: var(--green-l); color: var(--green-d); }

.kind-switch .ico { width: 24px; height: 24px; }

.weed-tile.dim { opacity: .55; }

.hist-ph { display: grid; place-items: center; font-size: 22px; }



/* Cadastro / login */

.auth-gate .gate-card { text-align: left; }

.auth-gate .gate-card > h1, .auth-gate .gate-lead { text-align: center; }

.auth-gate .gate-logo { display: block; margin: 0 auto; }

.auth-tabs { grid-template-columns: 1fr 1fr; margin-top: 14px; }

.auth-tabs button { flex-direction: row; justify-content: center; font-size: 14px; }

#authForm { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }

.auth-trial { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--good-l); color: var(--good); font-size: 14.5px; }

.pw { position: relative; }

.pw input { width: 100%; padding-right: 46px; }

.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 18px; padding: 6px 8px; cursor: pointer; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }

.check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--green); }

.center-t { text-align: center; }



/* Planos */

.gate-card.wide { max-width: 760px; }

.plans { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); margin: 16px 0 4px; text-align: left; }

.plan { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px 16px; box-shadow: var(--shadow); }

.plan.featured { border: 2px solid var(--green); box-shadow: var(--shadow-2); }

.plan.current { background: var(--green-l); }

.plan h3 { margin: 0 0 4px; font-size: 20px; }

.plan-badge { position: absolute; top: -11px; right: 14px; background: var(--wheat); color: #2c2108; font: 800 11.5px var(--sans); text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 99px; }

.price { margin: 8px 0 0; }

.price b { font-family: var(--serif); font-size: 28px; color: var(--green-d); }

.price span { color: var(--ink-2); font-weight: 600; margin-left: 2px; }

.plan-feat { list-style: none; padding: 0; margin: 10px 0 12px; display: grid; gap: 6px; font-size: 14.5px; }

.plan-feat li { padding-left: 24px; position: relative; }

.plan-feat li::before { content: "✓"; position: absolute; left: 2px; color: var(--good); font-weight: 900; }

.plan-feat li.lim { color: var(--ink-2); font-size: 13.5px; }

.plan-feat li.lim::before { content: "•"; color: var(--ink-2); }

.plan-cur { color: var(--good); font-weight: 700; margin: 0 0 8px; }

.plan-btns { margin-top: auto; display: grid; gap: 8px; }



/* Conta */

.acc-card { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

.acc-card .avatar { width: 52px; height: 52px; font-size: 22px; flex: none; }

.acc-card b { font-size: 18px; }

.acc-card p { margin: 0; }

.lic-panel h3 { margin-top: 0; }

.acc-links { display: grid; gap: 8px; margin-top: 14px; }



/* Administrador */

.adm-list { display: grid; gap: 8px; margin-top: 12px; }

.adm-user { background: var(--card); border: 1px solid var(--line); border-radius: 10px; }

.adm-user summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; }

.adm-user summary::-webkit-details-marker { display: none; }

.adm-user summary > div { flex: 1; min-width: 0; }

.adm-user summary > div > span { display: block; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }

.adm-actions { padding: 0 12px 12px; display: grid; gap: 8px; }

.adm-actions .row { gap: 6px; align-items: center; }

.adm-actions input[type=number] { width: 80px; }

.st { flex: none; font: 700 12px var(--sans); padding: 3px 9px; border-radius: 99px; background: var(--paper-2); color: var(--ink-2); }

.st-ativo { background: var(--good-l); color: var(--good); }

.st-teste { background: var(--wheat-l); color: var(--soil); }

.st-expirado { background: var(--bad-l); color: var(--bad); }

.st-admin { background: var(--info-l); color: var(--info); }

.tag-bad { background: var(--bad); color: #fff; }

.adm-ev { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; font-size: 14px; }

fieldset.panel { margin: 0 0 14px; }

fieldset.panel legend { font: 700 16px var(--serif); padding: 0 6px; }

.adm-steps { padding-left: 20px; display: grid; gap: 4px; }

.adm-steps code { word-break: break-all; background: var(--paper-2); padding: 1px 5px; border-radius: 4px; }

.oferta { margin-bottom: 8px; align-items: center; gap: 6px; }

.oferta input[name=oid] { flex: 2 1 140px; }

.oferta input[name=odias] { width: 80px; }



/* Campo: propriedades, mapa e visitas */

.campo-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }

.campo-head .page-title { margin: 0; }

.prop-row { flex: 1 1 240px; align-items: center; justify-content: flex-end; gap: 6px; }

.prop-row select { flex: 1; min-width: 0; }

.map-box { position: relative; height: min(58vh, 460px); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); box-shadow: var(--shadow); z-index: 0; }

.map-box .leaflet-container { height: 100%; font: inherit; }

.map-actions { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-top: 10px; }

.draw-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--wheat-l); border: 1px solid #e7d3a3; font-weight: 600; }

.draw-bar .row { gap: 6px; }

.pin { width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }

.pin > * { transform: rotate(45deg); font-size: 13px; }

.croqui { display: block; width: 100%; height: 100%; background: #e9e4d2; }

.croqui.empty { display: grid; place-items: center; padding: 20px; text-align: center; }

.place-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; color: #fff; }

#placeList, .visit-list { display: grid; gap: 8px; margin-top: 12px; }

.visit-card { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: var(--shadow); transition: transform .2s var(--ease); }

.visit-card:hover { transform: translateY(-1px); }

.vc-date { flex: none; width: 52px; text-align: center; border-radius: 10px; background: var(--green); color: #fff8e6; padding: 6px 0; line-height: 1.1; }

.vc-date b { display: block; font: 900 21px var(--serif); }

.vc-date span { font-size: 12px; text-transform: uppercase; }

.vc-body { flex: 1; min-width: 0; }

.vc-body p { margin: 2px 0 0; }

.sev-baixa { background: var(--good-l); color: var(--good); border-color: #c8dcb8; }

.sev-media { background: var(--wheat-l); color: var(--soil); border-color: #e7d3a3; }

.sev-alta { background: var(--bad-l); color: var(--bad); border-color: #e9c2b9; }

.campo-sheet { max-height: 92vh; overflow-y: auto; position: relative; max-width: 640px; }

.sheet-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--paper-2); font-size: 16px; cursor: pointer; }

.lbl { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }

.v-prob { align-items: center; gap: 6px; margin-bottom: 6px; }

.v-prob input { flex: 2 1 140px; min-width: 0; }

.v-prob select { flex: 1 1 90px; }

.v-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; margin: 6px 0 8px; }

.v-ph { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--paper-2); }

.v-ph img { width: 100%; height: 100%; object-fit: cover; }

.v-ph button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }

.v-ph.missing { display: grid; place-items: center; text-align: center; font-size: 12px; color: var(--ink-2); padding: 6px; }

.file-btn { cursor: pointer; }

/* botão-arquivo dentro de um campo: o estilo do rótulo do campo não pode apagar a cor do botão */

.field label.btn-primary { color: #fffaf0; }

body.locked { overflow: hidden; }

.subnav .ico { width: 16px; height: 16px; vertical-align: -3px; }

.brand { text-decoration: none; }

.campo-head { display: grid; }

.prop-row { justify-content: stretch; }

.prop-row > .btn { flex: none; }

@media (max-width: 759px) { .quick > .q-item:last-child:nth-child(even) { grid-column: 1 / -1; } }



/* Formulários do Campo no iPhone: campos de data, textos longos e painel abaixo da barra de status */

.field textarea { width: 100%; min-width: 0; font: 17px/1.4 var(--sans); color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; resize: vertical; }

.field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 93, 58, .18); }

input[type=date], input[type=datetime-local] { -webkit-appearance: none; appearance: none; display: block; max-width: 100%; text-align: left; }

input::-webkit-date-and-time-value { text-align: left; }

.sheet { padding-top: calc(10px + var(--safe-t)); overscroll-behavior: contain; }

.campo-sheet { max-height: calc(100dvh - 10px - var(--safe-t)); padding-top: 18px; padding-bottom: calc(28px + var(--safe-b)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.campo-sheet h2, .campo-sheet h3 { padding-right: 44px; }

.campo-sheet .fields { align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }

.campo-sheet .field > .btn { min-height: 48px; width: 100%; white-space: normal; }

body.sheet-open .tabbar { display: none; }

/* bloco de foto quando a espécie ainda não tem foto de referência */

.weed-tile .hist-ph { height: auto; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 4px; font-size: 64px; line-height: 1; background: linear-gradient(160deg, var(--green-l), var(--paper-2)); color: var(--ink-2); border-radius: 0; }

.weed-tile .hist-ph small { font: 600 12px var(--sans); color: var(--ink-2); }

/* iPhone (app instalado): em página curta, o 100% de altura não conta a barra de status e a barra inferior

   "subia", deixando uma faixa vazia embaixo. A página passa a ocupar a tela inteira. */

html { min-height: calc(100% + env(safe-area-inset-top, 0px)); background: var(--paper); }

body { min-height: calc(100vh + env(safe-area-inset-top, 0px)); }

.local-res h3 { margin-top: 0; }

.weed-tile .sim { display: block; margin: 2px 10px 0; font: 700 12.5px var(--sans); color: var(--green-d); }



/* Confirmação por código */

.code-form { text-align: center; }

.code-form .field { text-align: left; }

.code-mail { font-size: 44px; margin-top: 10px; animation: pop .6s var(--ease) both; }

.code-form h2 { margin: 6px 0 4px; }

.code-input { display: block; width: 100%; max-width: 280px; margin: 6px auto 4px; text-align: center; font: 700 32px/1 var(--sans); letter-spacing: .45em; padding: 12px 0 12px .45em; border-width: 2px; }

.code-links { justify-content: center; }

.code-links .btn { flex: 0 1 auto; }



/* Fluidez: toque imediato (sem atraso de duplo toque) e rolagem suave nas listas */

a, button, .btn, label, select, summary, input[type=checkbox] { touch-action: manipulation; }

.weed-tile img { content-visibility: auto; }

.weed-tile .ph-desc { font-size: 40px; padding: 12px; gap: 8px; }

.weed-tile .ph-desc small { font: 600 12.5px/1.35 var(--sans); color: var(--ink); text-align: center; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }



/* "Onde encontrar" (parceiros) abaixo de cada produto */

.onde { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }

.onde-lbl { display: block; font: 700 13px var(--sans); color: var(--soil); margin-bottom: 6px; }

.onde-list { display: flex; flex-wrap: wrap; gap: 6px; }

.onde-btn { display: inline-flex; flex-direction: column; padding: 7px 12px; border-radius: 10px; background: var(--green); color: #fff8e6; text-decoration: none; line-height: 1.2; }

.onde-btn b { font-size: 14px; }

.onde-btn small { font-size: 11.5px; color: #d6e2cc; }

.onde-btn.ghost { background: var(--card); color: var(--green-d); border: 1.5px solid var(--green); }

.onde-btn.ghost small { color: var(--ink-2); }

.parc-opts { align-items: center; gap: 12px; }

#adminBody .seg-tabs { grid-template-columns: repeat(3, 1fr); }



/* Convite para ativar notificações (tela inicial) e preferências (Conta) */

.push-card { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin: 16px 0 0; padding: 14px; background: var(--wheat-l); border: 1px solid #e7d3a3; border-radius: 12px; animation: rise .4s var(--ease) both; }

.push-ic { font-size: 28px; grid-row: span 2; }

.push-txt b { display: block; font-size: 15.5px; }

.push-txt span { font-size: 13.5px; color: var(--ink-2); }

.push-btns { grid-column: 2; display: flex; gap: 8px; }

.push-row { margin: 10px 0; }

.btn-cancel { color: var(--bad); border-color: #e3b8ae; }



/* Cotações do dia (tela inicial) */

.cot-card { margin: 16px 0 0; padding: 14px 0 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); animation: rise .4s var(--ease) both; }

.cot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 14px 8px; }

.cot-head h2 { margin: 0; font-size: 18px; }

.cot-head span { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }

.cot-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 14px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }

.cot-row::-webkit-scrollbar { display: none; }

.cot { flex: 0 0 auto; min-width: 128px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line-2); }

.cot-n { font: 700 14px var(--sans); color: var(--green-d); }

.cot-p, .cot-u { font-size: 11.5px; color: var(--ink-2); }

.cot b { font: 900 19px var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px; }

.cot-var { font: 700 12.5px var(--sans); color: var(--ink-2); margin-top: 2px; }

.cot-var.up { color: var(--good); }

.cot-var.down { color: var(--bad); }

.cot-usd { background: var(--info-l); }

.cot-more { margin: 4px 14px 0; }

.cot-more summary { cursor: pointer; font: 700 13.5px var(--sans); color: var(--green-d); padding: 6px 0; }

.cot-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.cot-tab td { padding: 6px 0; border-top: 1px solid var(--line-2); }

.cot-tab td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }

.cot-tab td:last-child { text-align: right; width: 76px; }

.cot-src { margin: 6px 14px 0; font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }

.hist-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.hist-head .link-btn { color: var(--bad); font-weight: 700; }



/* ===================================================================== v2.6 */

/* Resumo do teste e planos lado a lado */

.resumo { background: var(--green-l); border: 1px solid #cfdcc0; border-radius: 14px; padding: 14px; margin: 6px 0 12px; text-align: left; }

.resumo h3 { margin: 0 0 10px; font-size: 17px; }

.resumo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }

.resumo-grid div { background: var(--card); border-radius: 10px; padding: 8px 10px; }

.resumo-grid b { display: block; font: 900 22px var(--serif); color: var(--green-d); }

.resumo-grid span { font-size: 12.5px; color: var(--ink-2); line-height: 1.25; display: block; }

.resumo-tempo { margin: 10px 0 0; font-size: 14px; }

.plans.lado { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.plans.lado .plan { padding: 16px 10px 12px; }

.plans.lado .plan h3 { font-size: 17px; }

.plans.lado .price b { font-size: 21px; }

.plans.lado .plan-btns .btn { font-size: 14px; padding-left: 6px; padding-right: 6px; }

@media (max-width: 330px) { .plans.lado { grid-template-columns: 1fr; } }

.ia-uso { padding-left: 18px; margin: 0 0 6px; display: grid; gap: 4px; font-size: 14.5px; }

.q-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; background: var(--wheat-l); border-color: #e7d3a3; }

.q-wide .q-ic { font-size: 22px; flex: none; background: var(--card); }

.q-wide b { margin: 0; }



/* Consulta guiada */

.cs-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 12px; border-radius: 12px; background: var(--wheat-l); border: 1px solid #e7d3a3; text-decoration: none; color: var(--ink); }

.cs-banner > span { font-size: 26px; }

.cs-banner div { flex: 1; }

.cs-banner b { display: block; font-size: 15.5px; color: var(--green-dd); }

.cs-banner small { color: var(--ink-2); font-size: 13px; line-height: 1.3; display: block; }

.cs-banner .ico { width: 20px; height: 20px; color: var(--green-d); flex: none; }

.file-btn.disabled { opacity: .45; pointer-events: none; }

#csForm .row input { flex: 1 1 160px; }

#csForm .row > .btn { flex: 0 0 auto; }

.cs-wait { text-align: center; }

.cs-card { margin-top: 14px; }

.cs-vejo { background: var(--paper); border-radius: 10px; padding: 10px 12px; font-size: 14.5px; }

.cs-hip { border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; background: var(--card); }

.cs-hip summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; }

.cs-hip summary::-webkit-details-marker { display: none; }

.cs-ic { font-size: 22px; flex: none; }

.cs-hn { flex: 1; min-width: 0; }

.cs-hn b { display: block; font-size: 15px; line-height: 1.25; }

.cs-hn small { color: var(--ink-2); font-size: 12px; }

.cs-prob { flex: 0 0 64px; text-align: right; }

.cs-prob b { font: 900 18px var(--serif); color: var(--green-d); }

.cs-prob i { display: block; height: 5px; border-radius: 3px; background: var(--wheat); margin-top: 3px; margin-left: auto; max-width: 64px; }

.cs-hb { padding: 0 12px 12px; }

.cs-hb h4 { margin: 8px 0 2px; font-size: 13.5px; color: var(--soil); }

.cs-q { border: 0; padding: 0; margin: 12px 0; min-width: 0; }

.cs-q legend { font-weight: 700; font-size: 15px; margin-bottom: 8px; }

.cs-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }

/* o rádio fica escondido sob a opção: sem largura própria (a regra geral deixa input com 100% e empurrava a página para fora da tela) */

.cs-opt { position: relative; }

.cs-opt input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; }

.cs-opt span { display: inline-block; padding: 8px 12px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--card); font-size: 14px; cursor: pointer; }

.cs-opt input:checked + span { background: var(--green); border-color: var(--green-d); color: #fff8e6; }

.cs-outro { font-size: 15px; min-height: 40px; width: 100%; box-sizing: border-box; }

.cs-qs .btn { margin-top: 8px; }

.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.cs-head h2 { margin: 0; }

.cs-resumo { font-size: 15.5px; line-height: 1.5; }

.cs-clima { margin: 10px 0; font-size: 14px; }

.cs-clima summary { cursor: pointer; font-weight: 700; color: var(--info); }

.tag-good { background: var(--good); color: #fff; }

.tag-warn { background: var(--warn); color: #fff; }



/* Qualidade do trigo */

#qlStart .row .btn { flex: 1 1 160px; }

#qlPreview { margin-top: 10px; max-height: 260px; overflow: hidden; border-radius: 10px; }

#qlPreview img { width: 100%; display: block; }

.ql-card { margin-top: 12px; }

.ql-head h2 { margin: 0; }

.ql-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }

.ql-b { background: var(--green); color: #fff8e6; border-radius: 12px; padding: 10px 12px; }

.ql-b small { display: block; font-size: 12px; color: #d6e2cc; }

.ql-b b { font: 900 22px var(--serif); }

.ql-uso { background: var(--wheat-l); border-radius: 10px; padding: 10px 12px; font-size: 14.5px; }

.ql-card .ind { border-left: 4px solid var(--line); }

.ql-card .ind.good { border-left-color: var(--good); }

.ql-card .ind.warn { border-left-color: var(--warn); }

.ql-card .ind.bad { border-left-color: var(--bad); }

.ql-card .ind-top span { font-weight: 700; font-size: 14.5px; }

.ql-card .ind-top b { font: 900 18px var(--serif); white-space: nowrap; }

.ql-card .ind-top b small { font: 600 12px var(--sans); color: var(--ink-2); }

.ind-ref { font-size: 12.5px; color: var(--ink-2); }

.ind-note { font-size: 13.5px; margin: 6px 0 0; }



/* Laudo de solo: conferência e micronutrientes */

input.ocr-check { border-color: var(--warn) !important; background: var(--warn-l) !important; }

.laudo-check { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--warn-l); color: #6a4a08; }

.laudo-check ul { margin: 4px 0 8px; padding-left: 18px; font-size: 14px; }

.laudo-check.ok { background: var(--good-l); color: var(--good); }

.micro-tab { width: 100%; border-collapse: collapse; font-size: 14px; }

.micro-tab th { text-align: left; font-size: 12px; color: var(--ink-2); padding: 4px 4px 6px; }

.micro-tab td { padding: 6px 4px; border-top: 1px solid var(--line-2); }

.micro-tab td.num { font-variant-numeric: tabular-nums; font-weight: 700; }

.plans.lado .price b { white-space: nowrap; font-size: 19px; }



/* Sub-navegação do Solo: 4 botões sempre lado a lado (ícone em cima do nome) */

.subnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; }

.subnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 12px; font-size: 12.5px; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.subnav .ico { width: 19px; height: 19px; vertical-align: 0; }



/* ===================================================================== v2.7 refinamentos */

/* Início: atalhos */

.q-wide { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 0; align-items: center; }

.q-wide .q-ic { grid-row: span 2; }

.q-wide b { font-size: 16px; margin: 0; }

.q-wide small { grid-column: 2; }

.q-full { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }

.q-full .q-ic { grid-row: span 2; }

.q-full b { margin: 0; }

.q-full small { grid-column: 2; }

/* cotações mais compactas: fontes e Chicago ficam no "ver mais" */

.cot-card { padding-bottom: 6px; }

.cot-p, .cot-u { font-size: 12px; }

.cot-more summary { min-height: 40px; display: flex; align-items: center; }

.plan-badge { font-size: 12px; }

/* toques confortáveis em links de ação */

.link-btn { min-height: 40px; padding: 8px 4px; display: inline-flex; align-items: center; }

.leaflet-touch .leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; }

.cot-src, .cot-tab small { font-size: 12px; }

.oferta input[name=oteste] { width: 76px; }



/* ---------- Login / cadastro (v2.11) */

.gate-lead { margin: 0; }

.gate-chips { list-style: none; padding: 0; margin: 12px 0 2px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.gate-chips li { background: var(--green-l); color: var(--green-d); border-radius: 99px; padding: 5px 11px; font-size: 13px; font-weight: 700; }

.auth-trial { display: flex; gap: 10px; align-items: flex-start; padding: 12px; line-height: 1.4; border: 1px solid #c9dcb9; }

.auth-trial b { color: var(--green-d); }

.auth-trial-ic { font-size: 22px; line-height: 1; }

.pw-eye { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink-2); border-radius: 8px; }

.pw-eye .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

.pw-eye[aria-pressed="true"] { color: var(--green); background: var(--green-l); }

.auth-ajuda { text-align: center; font-size: 13.5px; color: var(--ink-2); margin: 14px 0 0; }

.auth-ajuda a { color: var(--green); font-weight: 700; }



/* ---------- Ativar o teste grátis */

.trial-card { position: relative; text-align: left; border: 2px solid var(--green); border-radius: 16px; padding: 22px 18px 16px; margin: 18px 0 0; background: var(--card); box-shadow: var(--shadow-2); }

.trial-card .plan-badge { left: 16px; right: auto; }

.trial-card h3 { margin: 0; font-size: 21px; }

.trial-preco { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0; }

.trial-preco b { font: 900 34px var(--serif); color: var(--green-d); }

.trial-preco span { color: var(--ink-2); font-weight: 700; }

.trial-depois { margin: 0 0 4px; color: var(--ink-2); font-size: 14.5px; }

.trial-card .plan-feat { margin: 12px 0 16px; }

.trial-seguro { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-2); }

.trial-linha { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; position: relative; }

.trial-linha::before { content: ''; position: absolute; left: 16%; right: 16%; top: 7px; height: 2px; background: var(--line); }

.trial-linha li { position: relative; padding-top: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }

.trial-linha li::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 3px solid var(--green); }

.trial-linha li:last-child::before { border-color: var(--wheat-d); }

.trial-linha b { display: block; color: var(--ink); font-size: 13.5px; }

.trial-alt { text-align: left; margin: 16px 0 0; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: var(--paper); }

.trial-alt summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 14.5px; color: var(--green-d); }

.trial-alt[open] { padding-bottom: 14px; }

.trial-alt .plan-btns { gap: 8px; }

.trial-email { font-size: 12.5px; color: var(--ink-2); margin: 14px 0 0; }



/* planos lado a lado só quando cabem; no celular, um embaixo do outro (o recomendado primeiro) */

@media (max-width: 560px) { .plans.lado { grid-template-columns: 1fr; gap: 14px; } .plans.lado .plan { padding: 18px 16px 14px; } .plans.lado .price b { font-size: 26px; } }

.trial-nota { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--wheat-l); color: #6a4a08; font-size: 12.5px; text-align: center; }

/* aceite do cadastro: o texto (com os links) fica num bloco só, ao lado da caixinha */

.check > span { flex: 1; min-width: 0; }

.aceite-app { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }

.aceite-app a { color: var(--green); font-weight: 700; }

/* telas de entrada (login, teste, instalação): faixa atrás do relógio/bateria do iPhone ao rolar */

.gate::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--safe-t); background: #1f4029; z-index: 3; pointer-events: none; }

/* caixinha de marcar própria: a regra geral dos campos (altura 48 px, recuo, borda) não vale para ela,

   e o iPhone passa a desenhar igual aos outros aparelhos */

input[type=checkbox] {

  -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; min-width: 22px; min-height: 0; margin: 1px 0 0; padding: 0;

  border: 2px solid #b9ad92; border-radius: 6px; background: #fff center / 14px 14px no-repeat; cursor: pointer; box-shadow: none;

  transition: none; /* troca imediata: animação de cor pode travar em alguns navegadores */

}

input[type=checkbox]:checked {

  border-color: var(--green); background-color: var(--green);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

}

input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 93, 58, .25); }

.check { align-items: flex-start; cursor: pointer; }

.check input[type=checkbox] { width: 22px; height: 22px; margin-top: 1px; }

.aceite-app { gap: 12px; font-size: 13.5px; line-height: 1.45; }

.aceite-app > span { color: var(--ink-2); }

input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }


/* ---------- Assistente: histórico de conversas */
.chat { position: relative; }
.chat-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line-2); background: var(--paper); border-radius: 14px 14px 0 0; }
.chat-bar-btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 99px; background: var(--card); color: var(--green-d); font: 700 13.5px var(--sans); cursor: pointer; flex: none; }
.chat-bar-btn .ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-bar-btn[aria-expanded="true"] { background: var(--green); border-color: var(--green); color: #fff8e6; }
.chat-bar-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--wheat); color: #2c2108; font-size: 11.5px; display: inline-grid; place-items: center; }
.chat-bar-tit { flex: 1; min-width: 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-hist { position: absolute; inset: 55px 0 auto 0; z-index: 5; max-height: min(70vh, 520px); overflow-y: auto; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 14px 30px rgba(40, 32, 10, .18); border-radius: 0 0 14px 14px; animation: rise .25s var(--ease) both; }
.chat-hist-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 6px; position: sticky; top: 0; background: var(--card); }
.chat-hist-lista { list-style: none; margin: 0; padding: 4px 8px; display: grid; gap: 4px; }
.chat-hist-lista li { display: flex; align-items: stretch; gap: 4px; border-radius: 10px; }
.chat-hist-lista li.on { background: var(--green-l); }
.chat-hist-item { appearance: none; flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 10px 10px; border-radius: 10px; cursor: pointer; font: inherit; color: inherit; display: grid; gap: 2px; }
.chat-hist-item:hover { background: var(--paper); }
.chat-hist-item b { font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-hist-item span { font-size: 12.5px; color: var(--ink-2); }
.chat-hist-del { appearance: none; flex: none; width: 42px; border: 0; background: none; border-radius: 10px; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.chat-hist-del:hover { background: var(--bad-l); color: var(--bad); }
.chat-hist-del .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-hist-vazio { padding: 14px 10px; color: var(--ink-2); font-size: 14px; }
.chat-hist-nota { margin: 4px 14px 12px; font-size: 12px; color: var(--ink-2); }

/* ---------- Excluir conta */
.danger-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding: 14px 16px; border: 1px solid #ebc8bf; border-radius: 12px; background: #fcf4f1; }
.danger-row b { display: block; color: var(--bad); font-size: 15px; }
.danger-row span { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.btn-danger-soft { appearance: none; flex: none; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1.5px solid #e3b8ae; background: #fff; color: var(--bad); font: 700 14px var(--sans); cursor: pointer; }
.btn-danger-soft:hover { background: var(--bad-l); }
.btn-danger { background: var(--bad); color: #fff; border: 0; box-shadow: 0 2px 0 #7e2b1e; }
.btn-danger:hover { background: #8f3324; }
.btn-danger:disabled { background: #d9b2a9; box-shadow: none; cursor: not-allowed; }

.del-dialog { border: 0; padding: 0; background: transparent; max-width: min(440px, calc(100vw - 32px)); width: 100%; max-height: calc(100dvh - 32px); overflow: visible; }
.del-dialog::backdrop { background: rgba(20, 22, 16, .55); backdrop-filter: blur(2px); }
.del-box { background: var(--card); border-radius: 18px; padding: 24px 20px 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); max-height: calc(100dvh - 32px); overflow-y: auto; animation: rise .3s var(--ease) both; display: grid; gap: 12px; }
.del-ic { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--bad-l); color: var(--bad); display: grid; place-items: center; }
.del-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.del-box h3 { margin: 0; text-align: center; font-size: 21px; }
.del-sub { margin: -4px 0 0; text-align: center; color: var(--ink-2); font-size: 14.5px; }
.del-lista { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 7px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.del-lista li { position: relative; padding-left: 22px; line-height: 1.35; }
.del-lista li::before { content: '×'; position: absolute; left: 2px; top: -1px; color: var(--bad); font-weight: 900; font-size: 16px; }
.del-aviso { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-l); color: #6a4a08; font-size: 13.5px; line-height: 1.4; }
.del-check { font-size: 14px; color: var(--ink); }
.del-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.del-acoes .btn { min-height: 48px; }
/* no celular, a janela sobe de baixo como uma folha */
@media (max-width: 560px) {
  .del-dialog { margin: auto 0 0; max-width: 100vw; width: 100vw; }
  .del-box { border-radius: 20px 20px 0 0; padding-bottom: calc(18px + var(--safe-b)); animation: sobe .3s var(--ease) both; }
}
@keyframes sobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Cancelar assinatura */
.canc-ic { background: var(--warn-l); color: #8a5a0a; }
.canc-ok { background: var(--good-l); color: var(--good); }
.canc-ok svg { stroke-width: 2.6; }
.canc-passo { display: grid; gap: 12px; }
.canc-passo[hidden] { display: none; }
.canc-resumo { padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.canc-resumo p { margin: 0; line-height: 1.45; }
.canc-resumo p + p { margin-top: 6px; }
.canc-motivos { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.canc-motivos legend { width: 100%; font-weight: 700; font-size: 14px; margin-bottom: 6px; padding: 0; }
.canc-motivos label { position: relative; cursor: pointer; }
.canc-motivos input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.canc-motivos label span { display: inline-block; padding: 8px 12px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.canc-motivos label input:checked + span { border-color: var(--green); background: var(--green-l); color: var(--green-d); }
.canc-motivos label input:focus-visible + span { box-shadow: 0 0 0 3px rgba(47, 93, 58, .25); }
.btn-cancel-forte { color: var(--bad); border-color: #e3b8ae; }
.canc-lista { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; }
.canc-estado { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--good-l); color: var(--green-dd); font-size: 14px; line-height: 1.4; }
.canc-estado a { color: var(--green); font-weight: 700; }
.canc-motivos legend .muted { font-weight: 400; }
.canc-dialog .del-acoes .btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; }

/* ---------- painel: excluir conta de usuário */
.adm-excluir { color: var(--bad); border-color: #e3b8ae; }

/* ---------- voltou do pagamento: confirmando */
.confirmando { display: grid; place-items: center; padding: 18px 0 6px; }
.confirmando span { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--green); animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Estrutura de app: a janela não rola, só a área do meio (#app) entre o topo e a barra de abas.
   No iPhone isso impede que as barras fixas "soltem" e rolem junto com a página (teclado, janelas, quique do fim). */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { padding: 0 !important; }
main#app {
  position: fixed; left: 0; right: 0; top: calc(64px + var(--safe-t)); bottom: 0; /* rola por baixo da barra de abas, como antes */
  max-width: none; margin: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  padding: 20px max(16px, calc((100% - 1048px) / 2)) calc(82px + var(--safe-b));
}
@media print {
  html, body { height: auto; overflow: visible; }
  main#app { position: static; overflow: visible; padding: 0; }
}

/* ---------- entrar com Google */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1.5px solid #dadce0; font-weight: 700; min-height: 50px; text-decoration: none; }
.btn-google:hover { background: #f8f9fa; }
.btn-google .g-logo { width: 20px; height: 20px; flex: none; }
.auth-ou { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; color: var(--ink-2); font-size: 13.5px; }
.auth-ou::before, .auth-ou::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.codigo-hint { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--warn-l, #fbf1d9); color: #6b4f12; font-size: 14px; line-height: 1.4; text-align: center; }

/* tela de instalação: opção de usar pelo navegador */
.gate-ou { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--ink-2); font-size: 13.5px; }
.gate-ou::before, .gate-ou::after { content: ''; flex: 1; height: 1px; background: var(--line); }