/* Estratifica Vassouras — CSS compartilhado */
:root {
  --ground: #FAF7F2; --surface: #FFFFFF; --surface-2: #F5F1E8;
  --ink: #1A2E28; --ink-muted: #5D6D66; --ink-faint: #8B978F;
  --border: #E4E0D8; --border-strong: #C9C3B4;
  --accent: #0A4A44; --accent-soft: #E6F0EE;
  --verde: #2F8F5C; --verde-soft: #E6F1EA;
  --amarelo: #B8790A; --amarelo-soft: #FBF1DE;
  --laranja: #C86B1F; --laranja-soft: #F7E3D0;
  --vermelho: #B33B2E; --vermelho-soft: #F5E1DE;
  --shadow: 0 1px 2px rgba(26,46,40,0.04);
  --shadow-modal: 0 20px 40px rgba(26,46,40,0.18), 0 0 0 1px var(--border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0F1A17; --surface: #172622; --surface-2: #1F3129;
    --ink: #E8E2D4; --ink-muted: #9BADA4; --ink-faint: #6B7B72;
    --border: #24352F; --border-strong: #35473F;
    --accent: #48B3A5; --accent-soft: #1A322D;
    --verde: #5FBB7C; --verde-soft: #1B3226;
    --amarelo: #E0A040; --amarelo-soft: #2E2515;
    --laranja: #E28B4E; --laranja-soft: #3A2A18;
    --vermelho: #DE6858; --vermelho-soft: #3A1F1B;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px; line-height: 1.5;
}
.wrap { max-width: 1240px; margin: 0 auto; padding: 24px 20px 80px; }

.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand h1 {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; margin: 0;
}
.brand h1 em { font-style: italic; color: var(--accent); font-weight: 400; }
.brand .userbox {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--ink-muted);
}
.brand .userbox strong { color: var(--ink); }

.btn {
  padding: 8px 14px; border: 1px solid var(--accent); background: var(--accent);
  color: white; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { opacity: 0.9; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.small { padding: 6px 10px; font-size: 12px; }
.btn.danger { border-color: var(--vermelho); background: var(--vermelho); }
.btn.danger.ghost { background: transparent; color: var(--vermelho); }

/* CARD */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); }
.card h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 24px; margin: 0 0 8px; }
.card p { margin: 6px 0; color: var(--ink-muted); }

/* FORM */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); font-weight: 600; }
.field input, .field select, .field textarea {
  padding: 8px 12px; border: 1px solid var(--border); background: var(--ground); color: var(--ink);
  border-radius: 8px; font: inherit; font-size: 14px; outline: none;
}
.field input:focus, .field select:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.field .hint { font-size: 11px; color: var(--ink-faint); }

.msg { padding: 10px 14px; border-radius: 8px; margin: 8px 0; font-size: 13px; }
.msg.err { background: var(--vermelho-soft); color: var(--vermelho); border-left: 3px solid var(--vermelho); }
.msg.ok  { background: var(--verde-soft); color: var(--verde); border-left: 3px solid var(--verde); }
.msg.info { background: var(--accent-soft); color: var(--accent); border-left: 3px solid var(--accent); }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; box-shadow: var(--shadow); }
.kpi .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); font-weight: 500; }
.kpi .value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 34px; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 4px; }
.kpi .foot { font-size: 12px; color: var(--ink-faint); margin-top: 6px; }
.kpi.accent { border-color: var(--accent); background: var(--accent-soft); }
.kpi.accent .value { color: var(--accent); }
.kpi .cover { margin-top: 8px; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.kpi .cover span { display: block; height: 100%; background: var(--accent); }

/* SEMÁFORO */
.semdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.semdot.verde { background: var(--verde); }
.semdot.laranja { background: var(--laranja); }
.semdot.amarelo { background: var(--amarelo); }
.semdot.vermelho { background: var(--vermelho); }

.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.03em; font-weight: 500; }
.pill.hasdm { background: var(--accent-soft); color: var(--accent); }
.pill.dm { background: var(--amarelo-soft); color: var(--amarelo); }
.pill.has { background: var(--surface-2); color: var(--ink-muted); }
.pill.done { background: var(--verde-soft); color: var(--verde); }

/* TABLE */
table.pat { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.pat th { text-align: left; padding: 9px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); font-weight: 600; border-bottom: 1px solid var(--border); background: var(--surface-2); position: sticky; top: 0; }
table.pat td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
table.pat tr:hover td { background: var(--surface-2); cursor: pointer; }
table.pat tr.strat td { background: var(--verde-soft); }

/* UPLOAD */
.drop {
  border: 2px dashed var(--border-strong); border-radius: 12px;
  padding: 40px 20px; text-align: center; transition: border-color 120ms, background 120ms;
  background: var(--surface);
}
.drop.dragover { border-color: var(--accent); background: var(--accent-soft); }
.drop input[type=file] { display: none; }
.drop .icon { font-size: 40px; margin-bottom: 10px; }

.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.tab { padding: 10px 16px; background: transparent; border: 0; font: inherit; font-size: 13px; color: var(--ink-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }

.hero {
  padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: 20px;
}
.hero h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; margin: 0 0 4px; }
.hero h2 em { font-style: italic; color: var(--accent); font-weight: 400; }
.hero p { color: var(--ink-muted); margin: 0; }