/* Padrão visual baseado nos tokens do ITeFAgro. */
:root {
  --cor-tela: #fff;
  --cor-tela-suave: #f6f8f7;
  --cor-superficie: #f1f5f3;
  --cor-primaria: #1e293b;
  --cor-texto: #1e293b;
  --cor-texto-suave: #5e6c65;
  --cor-texto-fraco: #80918a;
  --cor-linha: #dfe8e3;
  --cor-linha-suave: #ecf2ef;
  --cor-azul-marca: #0d6efd;
  --cor-azul-profundo: #0a58ca;
  --cor-azul-suave: #eaf2ff;
  --fonte-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sombra-cartao: 0 4px 12px rgba(16,21,19,.035);
  font-family: var(--fonte-texto);
  color: var(--cor-texto);
  background: var(--cor-tela-suave);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #0d6efd66; outline-offset: 3px; }
[hidden] { display: none !important; }
.app-shell { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; padding: 28px 16px 20px; background: var(--cor-primaria); color: #fff; }
.brand { display: grid; place-items: center; padding: 0 0 28px; min-width: 0; border-bottom: 1px solid #ffffff12; }
.brand img { display: block; width: 100%; max-width: 190px; height: 90px; margin-inline: auto; object-fit: contain; }
.nav-caption { padding: 30px 16px 12px; color: #94a3b8; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; }
.sidebar nav { display: grid; gap: 6px; }
.sidebar-footer { margin-top: auto; padding-top: 24px; display: flex; justify-content: center; }
.back-itefagro { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #8bc3ca66; border-radius: 5px; background: #0c4a5566; color: #cce9ed; font-size: 13px; font-weight: 600; }
.back-itefagro:hover { background: #0c4a55; border-color: #8bc3ca; }
.sidebar nav a { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 12px; padding: 13px 16px; min-height: 46px; color: #c1cbd8; font-size: 14px; font-weight: 500; line-height: 1.4; border: 1px solid transparent; border-radius: 8px; transition: background-color .18s, color .18s; }
.sidebar nav a img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); opacity: .7; }
.sidebar nav a:hover { background: #ffffff08; color: #fff; }
.sidebar nav a[aria-current=page] { background: #0d6efd26; border-color: #4c95ff33; color: #fff; }
.sidebar nav a[aria-current=page] img { opacity: 1; }
.sidebar-illustration { width: 170px; height: 108px; object-fit: contain; align-self: center; margin-top: auto; padding-top: 16px; opacity: .85; }
main { min-width: 0; width: 100%; max-width: 1512px; margin: 0 auto; padding: 36px 40px 48px; }
.page-header { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--cor-linha); }
.page-eyebrow { display: block; color: var(--cor-texto-fraco); font-size: 10px; letter-spacing: 1.3px; font-weight: 600; margin-bottom: 10px; }
.page-header h1 { margin: 0; color: var(--cor-primaria); font-size: clamp(28px,2.6vw,36px); font-weight: 700; line-height: 1.2; letter-spacing: -.8px; overflow-wrap: anywhere; }
.header-bottom p { color: var(--cor-texto-suave); font-size: 14px; line-height: 1.6; margin: 10px 0 0; }
.page { min-width: 0; }
.home-intro { margin: 32px 0 24px; }
.home-intro h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.4px; font-weight: 600; }
.home-intro p { margin: 0; color: var(--cor-texto-suave); font-size: 14px; }
.home-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.home-tool { display: grid; grid-template-rows: auto auto auto 1fr auto; min-width: 0; min-height: 348px; padding: 28px; border: 1px solid var(--cor-linha); border-radius: 12px; background: radial-gradient(circle at 92% 12%,#0d6efd0c,transparent 36%),#fff; box-shadow: var(--sombra-cartao); transition: transform .18s,border-color .18s,box-shadow .18s; }
.home-tool:hover { transform: translateY(-3px); border-color: #a8caff; box-shadow: 0 8px 24px #1e293b0a; }
.home-tool-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 12px; background: var(--cor-azul-suave); margin-bottom: 24px; }
.home-tool-icon img { width: 34px; height: 34px; object-fit: contain; }
.home-tool-type { justify-self: start; padding: 4px 9px; background: var(--cor-superficie); color: var(--cor-texto-suave); border-radius: 999px; font-size: 9px; letter-spacing: .8px; font-weight: 600; }
.home-tool h3 { font-size: 26px; line-height: 1.25; letter-spacing: -.5px; margin: 14px 0 12px; overflow-wrap: anywhere; }
.home-tool p { color: var(--cor-texto-suave); font-size: 14px; line-height: 1.65; margin: 0 0 28px; }
.home-tool-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 10px 16px; border-radius: 999px; color: var(--cor-azul-profundo); background: var(--cor-azul-suave); font-size: 13px; font-weight: 600; }
.home-tool:hover .home-tool-action { color: white; background: var(--cor-azul-marca); }
.home-tool-action span { font-size: 19px; line-height: 1; font-weight: 400; }
.home-tip { display: flex; align-items: baseline; gap: 9px; margin: 24px 0 0; color: var(--cor-texto-suave); font-size: 12px; }
.home-tip span { color: var(--cor-azul-marca); font-size: 17px; }
.reservoir-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.copy-reservoir { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 18px; border: 1px solid var(--cor-linha); border-radius: 999px; background: #fff; color: var(--cor-texto); font-size: 13px; line-height: 1.3; font-weight: 600; transition: border-color .18s,background-color .18s; }
.copy-reservoir:hover { background: var(--cor-azul-suave); border-color: #b6d3ff; }
.copy-reservoir span { color: var(--cor-azul-marca); font-size: 19px; line-height: 1; }
.copy-status { color: var(--cor-texto-suave); font-size: 12px; }
.reservoir-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 24px; align-items: start; }
.card, .reservoir-results>section { background: #fff; border: 1px solid var(--cor-linha); border-radius: 12px; padding: 24px; min-width: 0; box-shadow: var(--sombra-cartao); }
.panel-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 24px; margin-bottom: 22px; border-bottom: 1px solid var(--cor-linha-suave); }
.card-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; background: var(--cor-azul-suave); border-radius: 10px; }
.card-icon img { width: 26px; height: 26px; object-fit: contain; }
.panel-heading h2 { margin: 0; font-size: 16px; line-height: 1.4; letter-spacing: -.2px; font-weight: 600; }
.panel-heading p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--cor-texto-suave); }
.panel-eyebrow { display: block; font-size: 9px; font-weight: 600; letter-spacing: 1px; color: var(--cor-texto-fraco); margin-bottom: 3px; }
.form-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 16px; }
.field { display: grid; grid-template-rows: minmax(18px,1fr) auto; gap: 8px; min-width: 0; }
.field label,.field-label { color: var(--cor-texto-suave); font-size: 12px; line-height: 1.45; font-weight: 500; overflow-wrap: anywhere; }
.field input { min-width: 0; width: 100%; height: 42px; border: 1px solid var(--cor-linha); border-radius: 8px; padding: 10px 12px; background: var(--cor-tela-suave); color: var(--cor-texto); font-size: 14px; font-variant-numeric: tabular-nums; transition: border-color .15s,background-color .15s; }
.field input:hover { border-color: #b8c7c0; }
.field input:focus { background: white; border-color: var(--cor-azul-marca); }
.field input[aria-invalid=true] { border-color: #c9505e; background: #fff8f8; }
.full { grid-column: 1/-1; }
.three-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.field-group-title { font-size: 12px; font-weight: 600; color: var(--cor-texto); margin: 0 0 -3px; }
.geometry-title { border-top: 1px solid var(--cor-linha-suave); padding-top: 22px; margin-top: 3px; }
.volume-display output { display: flex; align-items: center; min-height: 42px; padding: 8px 12px; color: var(--cor-azul-profundo); background: var(--cor-azul-suave); border: 1px solid #d8e7ff; border-radius: 8px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.reservoir-results { display: grid; gap: 24px; min-width: 0; }
.section-title { font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--cor-linha-suave); }
.result-list { margin: 0; }
.result-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(60px,auto); gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--cor-linha-suave); font-size: 12px; line-height: 1.5; }
.result-row:last-child { border-bottom: 0; }
.result-row dt { color: var(--cor-texto-suave); overflow-wrap: anywhere; }
.result-row dd { margin: 0; text-align: right; max-width: 150px; min-width: 0; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.membrane .form-fields { margin-bottom: 20px; }
.membrane .result-row:last-child,.comparison-grid .result-list:last-child .result-row:last-child { background: var(--cor-azul-suave); padding: 12px; border-radius: 8px; margin-top: 8px; }
.membrane .result-row:last-child dt,.membrane .result-row:last-child dd,.comparison-grid .result-list:last-child .result-row:last-child dt,.comparison-grid .result-list:last-child .result-row:last-child dd { color: var(--cor-azul-profundo); font-weight: 600; }
.page-message { color: #a93243; font-size: 12px; line-height: 1.6; margin: 16px 0 0; }
.page-message:empty { display: none; }
.comparison-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.comparison-grid .panel-heading h2 { font-size: 21px; }
.comparison-grid .section-title { margin-top: 28px; }
.comparison-note { font-size: 12px; color: var(--cor-texto-suave); margin: 24px 0 0; max-width: 720px; line-height: 1.65; }
.skip-link { position: fixed; left: 12px; top: -70px; z-index: 20; background: white; color: var(--cor-primaria); padding: 12px 20px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
@media(min-width:1500px) { main { padding: 40px 48px; }.home-tool { padding: 32px; }.field label,.field-label,.result-row { font-size: 13px; }.result-row dd { font-size: 14px; } }
@media(max-width:1150px) { .app-shell { grid-template-columns: 210px minmax(0,1fr); }main { padding: 28px 24px 40px; }.home-tools { gap: 16px; }.home-tool { padding: 22px; }.home-tool h3 { font-size: 22px; }.home-tool p { font-size: 13px; }.reservoir-grid,.comparison-grid { gap: 20px; }.card,.reservoir-results>section { padding: 20px; }.reservoir-inputs .three-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }.reservoir-inputs .three-fields .field:last-child { grid-column: 1/-1; }.result-row { gap: 10px; } }
@media(max-width:950px) { .home-tools { grid-template-columns: minmax(0,1fr); }.home-tool { min-height: 0; grid-template-columns: 58px minmax(0,1fr); grid-template-rows: auto auto auto auto; column-gap: 18px; }.home-tool-icon { grid-column: 1; grid-row: 1/3; margin: 0; }.home-tool-type { grid-column: 2; align-self: start; }.home-tool h3 { grid-column: 2; margin: 8px 0 0; }.home-tool p { grid-column: 1/-1; margin: 20px 0; }.home-tool-action { grid-column: 1/-1; }.reservoir-grid { grid-template-columns: minmax(0,1fr); }.reservoir-inputs .three-fields { grid-template-columns: repeat(3,minmax(0,1fr)); }.reservoir-inputs .three-fields .field:last-child { grid-column: auto; }.comparison-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width:760px) {
  .app-shell { grid-template-columns: minmax(0,1fr); }
  .sidebar { position: static; height: auto; padding: 10px 12px 8px; }
  .sidebar-footer { padding-top: 10px; justify-content: flex-end; }
  .brand { padding: 0 0 8px; border: 0; }.brand img { width: 150px; height: 58px; }
  .nav-caption,.sidebar-illustration { display: none; }
  .sidebar nav { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; }
  .sidebar nav a { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 9px 2px; font-size: 11px; min-height: 58px; }.sidebar nav a img { width: 19px; height: 19px; }
  main { padding: 24px 18px 32px; }.page-header { padding-bottom: 24px; margin-bottom: 24px; }.page-header h1 { font-size: 28px; letter-spacing: -.6px; }.header-bottom p { font-size: 13px; }.page-eyebrow { font-size: 9px; }
  .home-intro { margin: 4px 0 20px; }.home-intro h2 { font-size: 21px; }.home-intro p { font-size: 13px; }.home-tools { gap: 16px; }.home-tool { padding: 24px; }.home-tool p { font-size: 14px; }.home-tool h3 { font-size: 24px; }.home-tool-action { min-height: 44px; }.home-tip { font-size: 12px; }
  .reservoir-actions { gap: 10px; margin-bottom: 20px; }.copy-reservoir { min-height: 44px; font-size: 13px; }.copy-status { flex-basis: 100%; }.copy-status:empty { display: none; }
  .card,.reservoir-results>section { padding: 20px; }.panel-heading { gap: 10px; padding-bottom: 20px; margin-bottom: 20px; }.panel-heading h2 { font-size: 15px; }.panel-heading p { font-size: 11px; }
  .field input { font-size: 16px; height: 44px; }.field label,.field-label { font-size: 12px; }.form-fields { gap: 18px 12px; }.three-fields { gap: 10px; }.reservoir-inputs .three-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }.reservoir-inputs .three-fields .field:last-child { grid-column: 1/-1; }
  .result-row { font-size: 12px; padding: 12px 0; gap: 12px; }.result-row dd { font-size: 13px; max-width: 118px; }.section-title { font-size: 14px; }.volume-display output { font-size: 15px; min-height: 44px; }.reservoir-results { gap: 20px; }
}
@media(max-width:360px) { main { padding-left: 12px; padding-right: 12px; }.card,.reservoir-results>section { padding: 16px; }.home-tool { padding: 20px; }.membrane .three-fields { grid-template-columns: minmax(0,1fr); }.panel-heading h2 { font-size: 14px; }.form-fields { gap: 18px 10px; }.result-row { gap: 8px; }.result-row dd { max-width: 100px; } }
@media(max-height:650px) and (min-width:761px) { .sidebar { padding-top: 16px; }.brand { padding-bottom: 16px; }.brand img { height: 80px; }.nav-caption { padding-top: 20px; }.sidebar-illustration { height: 80px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { .sidebar,.reservoir-actions,.skip-link { display: none; }.app-shell { display: block; }main { padding: 0; max-width: none; }.page-header { padding-bottom: 16px; margin-bottom: 20px; }.card,.reservoir-results>section { break-inside: avoid; box-shadow: none; }.reservoir-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.field input { background: white; } }

.world-map { display: block; width: 100%; height: max(420px, calc(100dvh - 210px)); border: 1px solid var(--cor-borda, #dfe8e3); border-radius: 12px; background: #aad3df; }
@media(max-width:760px) { .world-map { height: max(360px, calc(100dvh - 260px)); } }

/* The map fills its workspace; the title floats above it. */
.map-view main { position: relative; padding: 0; margin: 0; max-width: none; height: 100dvh; overflow: hidden; }
.map-view #page-em-nivel, .map-view .world-map { width: 100%; height: 100%; border: 0; border-radius: 0; }
.map-view .page-header { position: absolute; top: 0; left: 0; right: 0; z-index: 500; margin: 0; padding: 12px 28px; background: rgb(172 180 188 / 58%); backdrop-filter: blur(2px); border-bottom: 1px solid #ffffff70; pointer-events: none; }
.map-view .page-header h1 { display: none; }
.map-view .page-eyebrow { margin: 0; color: #1e293b; line-height: 16px; }
.map-view .header-bottom { display: none; }
.map-view .leaflet-top { top: 42px; }
.world-map .leaflet-control-layers { font-family: inherit; border: 1px solid #dfe8e3; border-radius: 8px; padding: 8px 12px; }
@media(max-width:760px) {
  .map-view .app-shell { height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0,1fr); }
  .map-view main { height: 100%; min-height: 0; }
  .map-view .page-header { padding: 10px 18px; }
  .map-view .leaflet-top { top: 38px; }
}

.map-credits { max-width: min(320px, calc(100vw - 28px)); text-align: right; font-size: 10px; }
.map-credits summary { cursor: pointer; padding: 2px 4px; }
.map-credits span { display: block; padding: 6px; text-align: left; }

.tools-panel { position: absolute; z-index: 510; top: 41px; right: 0; bottom: 0; width: min(300px, calc(100% - 48px)); color: #fff; background: rgb(30 41 59 / 57%); backdrop-filter: blur(5px); border-left: 1px solid #ffffff30; }
.tools-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #ffffff24; }
.tools-heading h2 { margin: 0; font-size: 14px; font-weight: 600; }
.tools-heading button, .tools-open { color: #fff; border: 1px solid #ffffff30; border-radius: 6px; background: rgb(30 41 59 / 65%); cursor: pointer; }
.tools-heading button { display: grid; place-items: center; padding: 0; width: 32px; height: 32px; }
.tools-open { position: absolute; z-index: 510; top: 53px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; backdrop-filter: blur(5px); }
.tools-body { padding: 16px; overflow: auto; }
.tools-resize { position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; cursor: ew-resize; touch-action: none; }
.tools-resize::after { content: ''; position: absolute; top: calc(50% - 24px); left: 4px; width: 2px; height: 48px; border-radius: 2px; background: #ffffff70; }
.tools-resize:hover, .tools-resize:focus-visible { background: #60a5fa55; outline: none; }
body.resizing-tools { cursor: ew-resize; user-select: none; }
@media(max-width:760px) { .tools-panel { top: 37px; }.tools-open { top: 49px; } }

.tools-open[hidden], .tools-panel[hidden] { display: none; }
.tools-heading button svg, .tools-open svg { display: block; }