/* ── VECTOR CONSULTING · IDENTIDADE OFICIAL ──────────────────────────
   Navy primario  : #1F3060
   Cinza secundario: #B2B5B7
   Fundo escuro   : #060d1a  Cards: #0d1530  Borda: #1F3060
   Semantico      : verde #27c27a · ambar #f59e0b · vermelho #ef4444 · azul #38bdf8
   Cores Fabio (semaforo, uso obrigatorio em status/badges de aderencia):
     verde #00FF00 · amarelo #FFFF00 · vermelho #FF3300 (fundo vermelho = fonte branca)
   Portado de agrovector_manutencao_v4.2_2026-06-16.html para manter
   continuidade visual com o protótipo (fonte da verdade do produto).

   Tema claro/escuro: o header (#hdr/.tabs/logo) e sempre navy, em qualquer
   tema — so o conteudo (#main) troca de paleta via as variaveis abaixo.
   Cores semanticas (verde/ambar/vermelho/azul/roxo) sao as MESMAS nos dois
   temas (ja tem contraste suficiente em fundo claro ou escuro).
──────────────────────────────────────────────────────────────────── */
:root {
  --bg: #060d1a;
  --bg-card: #0d1530;
  --bg-header: #08111f;
  --bg-hover: #0d153055;
  --border: #1F3060;
  --border-soft: #2a3f7a;
  --text: #d4dff0;
  --text-heading: #B2B5B7;
  --text-muted: #3a5070;
  --text-mutest: #253545;
  --text-tab-off: #8090b8;
  --th-text: #5070a0;
  --lbl-text: #7a90b0;
  --td-border: #0a1225;
  --bg-safra: #0d1f40;
}
:root[data-theme="light"] {
  --bg: #E8ECF2;
  --bg-card: #ffffff;
  --bg-header: #dde3ec;
  --bg-hover: #1F306012;
  --border: #c3cadb;
  --border-soft: #b8c2d9;
  --text: #1a2540;
  --text-heading: #1F3060;
  --text-muted: #5a6b8c;
  --text-mutest: #8a97b0;
  --text-tab-off: #5a6b8c;
  --th-text: #4a5a78;
  --lbl-text: #4a5a78;
  --td-border: #e2e6ee;
  --bg-safra: #cfe0f5;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; min-height: 100vh; }

#hdr { background: #1F3060; border-bottom: 2px solid #162545; padding: 0 24px; position: sticky; top: 0; z-index: 100; }
.hdr-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.hdr-right { display: flex; align-items: center; gap: 10px; }
.brand { font-size: 14px; font-weight: 700; color: #ffffff; letter-spacing: -.02em; }
.brand-sub { font-size: 10px; color: #B2B5B7; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.org-badge { font-size: 11px; color: #B2B5B7; background: #162545; border: 1px solid #2a3f7a; border-radius: 20px; padding: 4px 14px; }
.logo-img { height: 44px; width: auto; display: block; object-fit: contain; }
.theme-toggle { background: transparent; border: 1px solid transparent; color: #B2B5B7; border-radius: 20px; width: 30px; height: 30px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.theme-toggle:hover { border-color: #2a3f7a; background: #16254555; }

.tabs { display: flex; margin-top: 0; padding-bottom: 0; flex-wrap: wrap; background: #1F3060; border-top: 1px solid #2a3f7a; }
.tab { background: none; border: none; color: #8090b8; padding: 9px 16px; cursor: pointer; font-size: 12px; font-family: inherit; text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s; display: inline-block; }
.tab:hover { color: #B2B5B7; }
.tab.on { color: #ffffff; font-weight: 700; border-bottom-color: #B2B5B7; }
.tab.disabled { color: #2a3f5f; cursor: default; }
.tab-sep { border-left: 1px solid #2a3f7a; margin: 6px 4px; }
.tab-phase { padding: 9px 8px; font-size: 10px; color: #3a4f7a; border-bottom: 2px solid transparent; font-weight: 700; cursor: default; }

#main { padding: 22px 24px; max-width: 1380px; margin: 0 auto; }
.stitle { color: var(--text-heading); font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.sdesc { color: var(--text-muted); font-size: 11px; margin-bottom: 16px; }
.block { margin-bottom: 26px; }
.blk-t { color: var(--text-heading); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 8px 10px; text-align: left; color: var(--th-text); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; background: var(--bg-header); border-bottom: 1px solid var(--border); white-space: nowrap; }
th.of-hdr { background: #1F3060; color: #B2B5B7; text-align: center; }
th.r { text-align: right; }
td { padding: 7px 10px; border-bottom: 1px solid var(--td-border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-hover); }
.tr-c td { background: var(--bg) !important; }
.tr-c .cv { color: #27c27a; font-family: monospace; font-weight: 700; }
.tr-s td { background: var(--bg-header) !important; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; padding: 5px 10px; }
.lbl { color: var(--lbl-text); min-width: 200px; }
.um { color: var(--text-muted); font-size: 10px; white-space: nowrap; }

.field, td input[type=number], td input[type=text], td input[type=date], td select {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; padding: 3px 7px; font-size: 12px; outline: none; width: 100%; min-width: 55px;
}
.field { font-family: inherit; padding: 6px 10px; width: auto; min-width: 0; }
td input[type=number], td input[type=text], td input[type=date] { font-family: monospace; }
td select { cursor: pointer; }
td input:focus, .field:focus { border-color: var(--text-heading); }
input.saved { border-color: #27c27a !important; transition: border-color .3s; }
input.save-error { border-color: #ef4444 !important; }

.cv { color: #27c27a; font-family: monospace; font-weight: 600; }
.co { color: var(--text-heading); font-family: monospace; font-weight: 600; }
.ca { color: #f59e0b; font-family: monospace; }
.cb { color: #38bdf8; font-family: monospace; }
.cp { color: #a78bfa; font-family: monospace; }
.cr { color: #ef4444; font-family: monospace; }
.cm { font-family: monospace; }
.cR { text-align: right; }
.cC { text-align: center; }

.bdg { border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 700; white-space: nowrap; border: none; cursor: pointer; font-family: inherit; }
.bg { background: #27c27a20; color: #27c27a; border: 1px solid #27c27a44; }
.bo { background: #1F306044; color: var(--text-heading); border: 1px solid var(--border-soft); }
.ba { background: #f59e0b20; color: #f59e0b; border: 1px solid #f59e0b44; }
.br { background: #ef444420; color: #ef4444; border: 1px solid #ef444444; }
.bb { background: #38bdf820; color: #38bdf8; border: 1px solid #38bdf844; }

/* Cores Fabio — semaforo de aderencia (regra obrigatoria, ver skill vector-relatorios) */
.fabio-verde { background: #00FF00; color: #000000; }
.fabio-amarelo { background: #FFFF00; color: #000000; }
.fabio-vermelho { background: #FF3300; color: #FFFFFF; }

.btn { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 7px 14px; font-size: 12px; cursor: pointer; font-family: inherit; transition: all .15s; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--text-heading); color: var(--text-heading); }
.btnP { background: #1F3060; color: #ffffff; border: 1px solid #2a4080; border-radius: 6px; padding: 8px 16px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.btnP:hover { background: #2a4080; }
.btnS { padding: 3px 9px; font-size: 11px; }
.btnD { color: #5a3030; border-color: #2a1010; }
.btnD:hover { color: #ef4444; border-color: #ef4444; }

.tb { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; flex-wrap: wrap; }
.tbr { margin-left: auto; display: flex; gap: 8px; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.ibox { padding: 7px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.ibox b { color: var(--text-heading); }
.ibox .a { color: #f59e0b; }
.mut { color: var(--text-mutest); font-size: 10px; }
.m { color: var(--text-mutest); font-size: 10px; margin-left: 3px; }

.kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; flex: 1; min-width: 120px; }
.kpi.ok { border-color: #27c27a44; }
.kpi.warn { border-color: #f59e0b44; }
.kpi.bad { border-color: #ef444444; }
.kl { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.kv { font-size: 20px; font-family: monospace; font-weight: 700; line-height: 1.1; color: var(--text-heading); }
.kv.g { color: #27c27a; } .kv.a { color: #f59e0b; } .kv.b { color: #38bdf8; } .kv.r { color: #ef4444; } .kv.p { color: #a78bfa; }
.ks { color: var(--text-mutest); font-size: 10px; margin-top: 3px; }
.mh { color: var(--text-heading); text-align: center; }
.row4 { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
tfoot td { border-top: 1px solid var(--border); font-weight: 700; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

input[type=file] { display: none; }
.up-btn { background: var(--bg-card); border: 1px dashed var(--border); color: var(--text-muted); border-radius: 6px; padding: 10px 18px; font-size: 12px; cursor: pointer; font-family: inherit; display: inline-block; }
.up-btn:hover { border-color: var(--text-heading); color: var(--text-heading); }

.fase-steps { display: flex; gap: 0; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.fstep { flex: 1; padding: 8px 10px; text-align: center; font-size: 10px; color: var(--text-mutest); border-right: 1px solid var(--border); min-width: 80px; }
.fstep:last-child { border-right: none; }
.fstep.done { color: #27c27a; background: var(--bg); }
.fstep.cur { color: var(--text-heading); background: #1F306044; font-weight: 700; }

a { color: #38bdf8; }