:root {
  color-scheme: light;
  --ui-bg: #f2f6f3;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f5f7f9;
  --ui-border: #dbe5df;
  --ui-text: #11241e;
  --ui-muted: #62756e;
  --ui-brand: #0f6155;
  --ui-brand-strong: #094a41;
  --ui-brand-soft: #e1f1eb;
  --ui-accent: #b5ce23;
  --ui-success: #2e7d4f;
  --ui-success-soft: #e8f4ec;
  --ui-warning: #92400e;
  --ui-warning-soft: #fef3c7;
  --ui-danger: #a32219;
  --ui-danger-soft: #fbeae8;
  --ui-shadow: 0 1px 2px rgba(16,45,37,.05), 0 10px 28px rgba(16,45,37,.08);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Sora", "Inter", system-ui, sans-serif;
}

html.tema-escuro {
  color-scheme: dark;
  --ui-bg: #0b1621;
  --ui-surface: #111f2d;
  --ui-surface-muted: #172a3a;
  --ui-border: #2b4052;
  --ui-text: #f2f6f8;
  --ui-muted: #a9bac8;
  --ui-brand: #77d6bd;
  --ui-brand-strong: #a8ead7;
  --ui-brand-soft: #173b35;
  --ui-success: #77d19b;
  --ui-success-soft: #173827;
  --ui-warning: #ffd086;
  --ui-warning-soft: #493614;
  --ui-danger: #ffaaa3;
  --ui-danger-soft: #472421;
  --ui-shadow: 0 1px 2px rgba(0,0,0,.22), 0 12px 32px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: var(--ui-bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--ui-bg); color: var(--ui-text); font: 15px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; transition: background .18s ease, color .18s ease; }
body.portal-login-body { background: radial-gradient(circle at 18% 15%,rgba(181,206,35,.20),transparent 32%),linear-gradient(135deg,#e1f1eb,#f7faf8 62%,#edf5f0); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }
:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; border-radius: 8px; }
.icone { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.tabular { font-variant-numeric: tabular-nums; }

/* Acesso */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.login-card { width: min(100%, 390px); padding: 32px; border: 1px solid var(--ui-border); border-radius: 18px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.login-brand { text-align: center; margin-bottom: 26px; }
.brand-mark { width: 58px; height: 58px; object-fit: cover; border-radius: 13px; display: block; margin: 0 auto 12px; }
.login-brand h1 { font: 600 1.25rem/1.25 var(--font-display); margin: 0; }
.login-brand .product-name { display: block; margin-top: 4px; color: var(--ui-brand); font-size: 1rem; }
.login-brand p { color: var(--ui-muted); font-size: .875rem; margin: 5px 0 0; }
.campo { margin-bottom: 16px; }
.campo label { display: block; color: var(--ui-muted); font-size: .82rem; font-weight: 600; margin-bottom: 6px; }
.campo input { width: 100%; min-height: 46px; border: 1px solid var(--ui-border); border-radius: 11px; padding: 10px 12px; background: var(--ui-surface); color: var(--ui-text); }
.campo input:focus { border-color: var(--ui-brand); box-shadow: 0 0 0 3px rgba(15,97,85,.12); outline: none; }
.campo-senha-wrapper { position: relative; width: 100%; }
.campo-senha-wrapper input { padding-right: 46px; }
.btn-olhinho-senha { position: absolute; inset: 50% 8px auto auto; width: 34px; height: 34px; margin: 0; padding: 0; transform: translateY(-50%); border: 0; border-radius: 9px; background: transparent; color: var(--ui-muted); display: grid; place-items: center; cursor: pointer; font-size: .9rem; line-height: 1; }
.btn-olhinho-senha:hover { background: var(--ui-surface-muted); }
.btn { border: 0; border-radius: 11px; min-height: 44px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; font-weight: 650; transition: .18s ease; }
.btn:disabled { opacity: .58; cursor: wait; }
.btn-primary { background: var(--ui-brand); color: #fff; }
.btn-primary:hover { background: var(--ui-brand-strong); }
.btn-secondary { border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); }
.btn-secondary:hover { background: var(--ui-surface-muted); }
.btn-block { width: 100%; }
.login-links { text-align: center; margin-top: 18px; }
.link-brand { color: var(--ui-brand); font-size: .8rem; font-weight: 600; text-decoration: none; }
.link-brand:hover { text-decoration: underline; }
.login-note { color: var(--ui-muted); font-size: .78rem; margin: 0 0 18px; }
.alerta { border-radius: 11px; padding: 11px 12px; margin-bottom: 15px; font-size: .82rem; }
.alerta-erro { color: var(--ui-danger); background: var(--ui-danger-soft); border: 1px solid #f0cfcb; }
.alerta-info { color: var(--ui-brand); background: var(--ui-brand-soft); border: 1px solid #cbd9e4; }
.loading-login { color: var(--ui-muted); text-align: center; }

/* Shell do produto */
.portal-shell { min-height: 100vh; display: flex; }
.sidebar { width: 256px; position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; background: var(--ui-surface); border-right: 1px solid var(--ui-border); }
.sidebar-brand { padding: 20px 24px; border-bottom: 1px solid var(--ui-border); }
.brand-line { display: flex; align-items: center; gap: 10px; }
.brand-line img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.brand-line strong { font: 600 .92rem var(--font-display); }
.brand-copy strong, .brand-copy span { display: block; }
.brand-copy span { margin-top: 1px; color: var(--ui-muted); font-size: .65rem; }
.sidebar-brand p { margin: 2px 0 0 44px; color: var(--ui-muted); font-size: .72rem; }
.sidebar-brand p strong { color: var(--ui-brand); font-weight: 750; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.nav-link { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 11px; background: transparent; color: var(--ui-muted); font-weight: 550; font-size: .86rem; text-align: left; text-decoration: none; cursor: pointer; }
.nav-link:hover { background: var(--ui-surface-muted); color: var(--ui-text); }
.nav-link.active { background: var(--ui-brand-soft); color: var(--ui-brand); }
.sidebar-footer { padding: 15px 12px; border-top: 1px solid var(--ui-border); }
.sidebar-user { padding: 0 12px 10px; }
.sidebar-user strong { display: block; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user span { color: var(--ui-muted); font-size: .72rem; }
.theme-toggle { user-select: none; }
.topbar-mobile, .bottom-nav { display: none; }
.portal-main { flex: 1; min-width: 0; margin-left: 256px; }
.portal-content { max-width: 1160px; margin: 0 auto; padding: 32px 26px 48px; }
.carregando { min-height: 60vh; display: grid; place-items: center; color: var(--ui-muted); }

/* Conteúdo */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.eyebrow { color: var(--ui-brand); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 750; margin: 0 0 5px; }
.page-head h1 { font: 600 clamp(1.45rem,3vw,2rem)/1.2 var(--font-display); letter-spacing: -.025em; margin: 0; }
.page-head p { color: var(--ui-muted); margin: 7px 0 0; max-width: 650px; }
.status-pill { padding: 7px 10px; border-radius: 999px; background: var(--ui-success-soft); color: var(--ui-success); font-size: .72rem; font-weight: 750; white-space: nowrap; }
.status-pill.pending { color: var(--ui-warning); background: var(--ui-warning-soft); }
.hero-usina { position: relative; overflow: hidden; border-radius: 18px; padding: 25px; background: linear-gradient(120deg,#0f2538,#234968); color: #fff; box-shadow: var(--ui-shadow); margin-bottom: 18px; }
.hero-usina::after { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,181,71,.18); right: -70px; top: -105px; }
.hero-usina > * { position: relative; z-index: 1; }
.hero-usina small { color: rgba(255,255,255,.72); font-weight: 600; }
.hero-usina h2 { font: 600 1.4rem var(--font-display); margin: 5px 0 0; }
.hero-usina p { color: rgba(255,255,255,.76); max-width: 600px; margin: 7px 0 0; }
.kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px; padding: 18px; box-shadow: var(--ui-shadow); }
.kpi-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--ui-brand-soft); color: var(--ui-brand); margin-bottom: 14px; }
.kpi-card span { color: var(--ui-muted); font-size: .75rem; }
.kpi-card strong { display: block; margin-top: 3px; font: 600 1.2rem var(--font-display); }
.analytics-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-bottom: 18px; }
.chart-card { min-width: 0; }
.period-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px; border-radius: 999px; background: var(--ui-brand-soft); color: var(--ui-brand); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.link-button { border: 0; padding: 4px 0; background: transparent; color: var(--ui-brand); font-size: .72rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.link-button:hover { text-decoration: underline; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 13px; color: var(--ui-muted); font-size: .68rem; margin-bottom: 14px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 9px; height: 9px; border-radius: 3px; }
.swatch-injetada { background: var(--ui-brand); }
.swatch-compensada { background: var(--ui-accent); }
.swatch-bruto { background: #5e83a1; }
.swatch-fatura { background: #d3943a; }
.swatch-liquido { background: var(--ui-success); }
.bar-chart { min-height: 200px; display: grid; grid-template-columns: repeat(var(--chart-columns, 6),minmax(38px,1fr)); align-items: end; gap: 7px; padding: 14px 5px 7px; border-bottom: 1px solid var(--ui-border); background: linear-gradient(to top, var(--ui-border) 1px, transparent 1px) 0 33%/100% 33%; overflow-x: auto; }
.chart-period { min-width: 38px; height: 178px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 7px; }
.chart-bars { height: 150px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.chart-bar { width: min(16px,42%); height: max(3px,var(--bar-height)); border-radius: 5px 5px 2px 2px; transition: height .22s ease; }
.chart-bar.injetada { background: var(--ui-brand); }
.chart-bar.compensada { background: var(--ui-accent); }
.chart-bar.bruto { background: #5e83a1; }
.chart-bar.fatura { background: #d3943a; }
.chart-bar.liquido { background: var(--ui-success); }
.chart-label { color: var(--ui-muted); font-size: .65rem; font-weight: 650; text-align: center; white-space: nowrap; }
.chart-empty { grid-column: 1/-1; align-self: center; color: var(--ui-muted); font-size: .8rem; text-align: center; }
.chart-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-top: 16px; }
.chart-summary-financeiro { grid-template-columns: repeat(4,minmax(0,1fr)); }
.chart-summary div { min-width: 0; }
.chart-summary span { display: block; color: var(--ui-muted); font-size: .65rem; line-height: 1.35; }
.chart-summary strong { display: block; margin-top: 4px; font: 600 .84rem var(--font-display); overflow-wrap: anywhere; }
.chart-note { margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--ui-border); color: var(--ui-muted); font-size: .68rem; }
.grid-2 { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 18px; }
.card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px; box-shadow: var(--ui-shadow); overflow: hidden; }
.card-head { padding: 19px 21px; border-bottom: 1px solid var(--ui-border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-head h2 { font: 600 .98rem var(--font-display); margin: 0; }
.card-head p { color: var(--ui-muted); font-size: .76rem; margin: 4px 0 0; }
.card-body { padding: 20px 21px; }
.data-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 20px; }
.data-item span { display: block; color: var(--ui-muted); font-size: .72rem; margin-bottom: 3px; }
.data-item strong { font-size: .86rem; }
.quick-list { display: flex; flex-direction: column; }
.quick-link { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 2px; border: 0; border-bottom: 1px solid var(--ui-border); background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.quick-link:last-child { border-bottom: 0; }
.quick-link-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ui-brand-soft); color: var(--ui-brand); }
.quick-link strong { display: block; font-size: .82rem; }
.quick-link span { color: var(--ui-muted); font-size: .7rem; }
.quick-link .seta { margin-left: auto; color: var(--ui-muted); }
.section-view { display: none; }
.section-view.active { display: block; animation: fade .16s ease; }
@keyframes fade { from { opacity: .35; transform: translateY(3px); } }
.section-card { padding: 22px; }
.section-title { margin-bottom: 18px; }
.section-title h2 { font: 600 1.2rem var(--font-display); margin: 0; }
.section-title p { color: var(--ui-muted); margin: 6px 0 0; font-size: .84rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 13px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th { text-align: left; color: var(--ui-muted); background: var(--ui-surface-muted); font-size: .67rem; text-transform: uppercase; letter-spacing: .04em; padding: 12px; }
td { border-top: 1px solid var(--ui-border); padding: 13px 12px; font-size: .8rem; vertical-align: middle; }
.repasse-valor { font-weight: 750; }
.file-input { max-width: 170px; font-size: .7rem; }
.empty { padding: 30px 18px; text-align: center; color: var(--ui-muted); }
.docs-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.doc-link { display: flex; align-items: center; gap: 11px; border: 1px solid var(--ui-border); background: var(--ui-surface-muted); padding: 14px; border-radius: 12px; text-decoration: none; }
.doc-link:hover { border-color: var(--ui-brand); }
.impact-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.impact-card { padding: 18px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface-muted); }
.impact-card strong { display: block; font: 600 1.15rem var(--font-display); margin: 10px 0 2px; }
.impact-card span { color: var(--ui-muted); font-size: .75rem; }
.impact-note { color: var(--ui-muted); font-size: .73rem; margin: 16px 0 0; }
.support-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.support-card { border: 1px solid var(--ui-border); border-radius: 14px; padding: 18px; }
.support-card h3 { font: 600 .9rem var(--font-display); margin: 10px 0 5px; }
.support-card p { color: var(--ui-muted); font-size: .78rem; margin: 0 0 15px; }
.coming { padding: 13px; background: var(--ui-brand-soft); color: var(--ui-brand); border-radius: 11px; font-size: .78rem; }
.feature-panel { display: flex; align-items: flex-start; gap: 16px; max-width: 760px; }
.feature-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ui-brand); background: var(--ui-brand-soft); }
.feature-icon .icone { width: 22px; height: 22px; }
.feature-panel h2 { font: 600 1rem var(--font-display); margin: 1px 0 7px; }
.feature-panel p { color: var(--ui-muted); font-size: .84rem; margin: 0 0 15px; }
.feature-status { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: var(--ui-brand-soft); color: var(--ui-brand); font-size: .72rem; font-weight: 700; }
.setting-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 2px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.setting-row strong, .setting-row small { display: block; }
.setting-row strong { font-size: .84rem; }
.setting-row small { color: var(--ui-muted); font-size: .7rem; margin-top: 2px; }
.setting-row .seta { margin-left: auto; color: var(--ui-muted); }
.mobile-more, .mobile-more-backdrop { display: none; }

@media (max-width: 980px) {
  .sidebar { display: none; }
  .portal-main { margin-left: 0; padding-top: 56px; padding-bottom: 76px; }
  .topbar-mobile { position: fixed; z-index: 30; inset: 0 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); }
  .topbar-mobile .brand-line img { width: 26px; height: 26px; }
  .topbar-mobile .brand-line strong { display: block; font-size: .8rem; }
  .topbar-mobile .brand-line span { display: block; color: var(--ui-muted); font-size: .61rem; }
  .topbar-actions { display: flex; align-items: center; gap: 2px; }
  .icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ui-muted); border-radius: 10px; cursor: pointer; }
  .icon-button:hover { background: var(--ui-surface-muted); }
  .bottom-nav { position: fixed; z-index: 30; inset: auto 0 0; min-height: 68px; padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4,1fr); background: rgba(255,255,255,.96); border-top: 1px solid var(--ui-border); backdrop-filter: blur(12px); }
  html.tema-escuro .bottom-nav { background: rgba(17,31,45,.96); }
  .bottom-nav .nav-link { min-width: 0; min-height: 66px; border-radius: 0; padding: 7px 3px; flex-direction: column; justify-content: center; gap: 3px; font-size: .62rem; text-align: center; }
  .bottom-nav .nav-link.active { background: transparent; color: var(--ui-brand); }
  .bottom-nav #btn-menu-mais.active { color: var(--ui-brand); }
  .mobile-more-backdrop { position: fixed; z-index: 49; inset: 0; display: block; border: 0; background: rgba(0,0,0,.46); }
  .mobile-more { position: fixed; z-index: 50; inset: auto 0 68px; display: flex; max-height: calc(100dvh - 84px); flex-direction: column; overflow: hidden; border-radius: 22px 22px 0 0; background: var(--ui-surface); box-shadow: 0 -18px 55px rgba(0,0,0,.22); }
  .mobile-more header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--ui-border); }
  .mobile-more header h2 { font: 600 1.08rem var(--font-display); margin: 0; }
  .mobile-more header p { color: var(--ui-muted); font-size: .72rem; margin: 3px 0 0; }
  .mobile-more header .icon-button { border: 1px solid var(--ui-border); color: var(--ui-text); font-size: 1.5rem; }
  .mobile-more nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 16px; overflow-y: auto; }
  .mobile-more nav button { min-height: 76px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--ui-border); border-radius: 13px; background: var(--ui-surface); color: var(--ui-text); font: 650 .77rem var(--font-sans); text-align: left; cursor: pointer; }
  .mobile-more nav button.active { border-color: var(--ui-brand); background: var(--ui-brand-soft); color: var(--ui-brand); }
  .portal-content { padding: 22px 16px 32px; }
  .analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .page-head { flex-direction: column; margin-bottom: 18px; }
  .page-head p { font-size: .84rem; }
  .hero-usina { padding: 21px; }
  .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .chart-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .chart-summary-financeiro { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .docs-grid, .support-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr; }
  .data-list { grid-template-columns: 1fr; }
  .feature-panel { padding: 19px; }
}

@media (max-width: 420px) {
  .login-card { padding: 26px 22px; }
  .kpi-card { padding: 15px; }
  .kpi-card strong { font-size: 1.02rem; }
  .card-head, .card-body, .section-card { padding-left: 16px; padding-right: 16px; }
  .chart-summary-financeiro { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

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