:root {
  color-scheme: light;
  --green: #0b5a3c;
  --green-dark: #063d31;
  --text: #17211c;
  --muted: #607066;
  --bg: #f4f6f3;
  --line: #dfe6df;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, sans-serif;
}

.main-container { max-width: 1050px; margin: auto; padding: 0 16px 28px; }
.logo-box { text-align: center; margin: 24px 0 28px; }
.logo-box img { width: 125px; height: 125px; object-fit: contain; }
.logo-box h1 { margin: 2px 0 0; font-size: 34px; letter-spacing: -.5px; color: #003f31; }
.logo-box p { margin: 4px 0 0; font-size: 17px; color: var(--muted); }
.layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.panel-box { background: white; padding: 26px; border-radius: 18px; box-shadow: 0 4px 18px #00000014; }
h2 { margin: 0 0 22px; font-size: 19px; color: var(--green-dark); }
h3 { margin: 20px 0 12px; font-size: 17px; color: var(--green-dark); }
label, legend { display: block; margin: 14px 0 7px; font-weight: 700; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
input[type="text"], input[type="number"], select {
  width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #bcc8c0;
  border-radius: 8px; background: white; color: var(--text); font-size: 16px;
}
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.checkbox-item { display: flex; align-items: center; min-height: 34px; margin: 0; font-weight: 400; }
.checkbox-item input { width: 20px; height: 20px; margin: 0 8px 0 0; accent-color: var(--green); }
.nota-verde { background: #eef7ef; border-left: 5px solid #2e7d32; padding: 12px; border-radius: 8px; margin: 14px 0; color: #174d2c; }
.pct-row { display: grid; grid-template-columns: minmax(130px,1fr) 90px 20px; align-items: center; gap: 8px; margin-bottom: 10px; }
.pct-row label { margin: 0; overflow-wrap: anywhere; }
.pct-row input { min-height: 40px; }
button { width: 100%; min-height: 48px; margin-top: 20px; padding: 12px; border-radius: 8px; border: 0; font-size: 16px; font-weight: 700; cursor: pointer; }
button.primary { background: var(--green); color: white; }
button.secondary { background: #e8f2ec; color: var(--green-dark); border: 1px solid #b7cfbf; }
button:disabled { opacity: .5; cursor: not-allowed; }
.resultado-ok { background: #edf8ef; border: 1px solid #b7dfbd; color: #0b3d2e; padding: 16px; border-radius: 12px; font-size: 17px; margin-bottom: 18px; }
.kpi-box { background: #f8faf7; border: 1px solid #e0e6df; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.kpi-label { color: #64736b; font-size: 13px; }
.kpi-value { color: #0b3d2e; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; margin-top: 18px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
th { background: #eef3ef; color: #0b3d2e; }
.validation { margin: 18px 0 0; padding: 14px; background: #f6f7f6; border-radius: 8px; white-space: pre-line; font-family: ui-monospace, monospace; }
.error { background: #fff0ef; border: 1px solid #e3aaa6; color: #8b2119; padding: 14px; border-radius: 10px; margin-bottom: 16px; }
.empty-state { color: var(--muted); }
.offline-status { position: sticky; top: 8px; z-index: 5; width: fit-content; margin: -16px auto 14px; padding: 6px 12px; border-radius: 20px; background: #fff3cd; color: #694f00; font-size: 14px; box-shadow: 0 2px 8px #0002; }

@media (max-width: 760px) {
  .main-container { padding: 0 10px 20px; }
  .layout { grid-template-columns: 1fr; gap: 16px; }
  .panel-box { padding: 20px 16px; border-radius: 14px; }
  .logo-box { margin: 18px 0 22px; }
  .logo-box img { width: 100px; height: 100px; }
  .logo-box h1 { font-size: 30px; }
  .logo-box p { font-size: 15px; }
  .checkbox-grid { grid-template-columns: 1fr; }
}