:root, .viz-root {
    color-scheme: light;
    --surface-1:      #ffffff;
    --page-plane:     #f4f6f9;
    --text-primary:   #10182b;
    --text-secondary: #52586b;
    --muted:          #878ea3;
    --gridline:       #e4e7ef;
    --baseline:       #c3c2b7;
    --border:         rgba(16,24,43,0.09);
    --brand:          #163b73; /* azul marinho — identidade da campanha */
    --brand-light:    #e8eef8;
    --series-1: #2a68b8; /* blue */
    --series-2: #eb6834; /* orange */
    --series-3: #1baf7a; /* aqua */
    --series-6: #008300; /* green */
    --series-8: #e34948; /* red */
    --good:     #0ca30c;
    --warning:  #fab219;
    --serious:  #ec835a;
    --critical: #d03b3b;
    --good-bg:     #e4f7e4;
    --warning-bg:  #fef3da;
    --serious-bg:  #fde7de;
    --critical-bg: #fbe2e2;
    --neutral-bg:  #ececeb;
    --shadow-sm: 0 1px 2px rgba(16,24,43,.05), 0 1px 1px rgba(16,24,43,.04);
    --shadow-md: 0 4px 14px rgba(16,24,43,.08);
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: var(--page-plane);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
  }
  h1, h2, h3 { font-weight: 700; margin: 0; }
  header.app-header {
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    border-top: 3px solid var(--brand);
    padding: 14px 22px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    position: sticky; top: 0; z-index: 20;
    box-shadow: var(--shadow-sm);
  }
  header.app-header .titles h1 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--brand); }
  header.app-header .titles p { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); }
  .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .btn {
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    border-radius: 8px; padding: 8px 14px; border: 1px solid var(--border);
    background: var(--surface-1); color: var(--text-primary);
    transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
  }
  .btn:hover { background: var(--page-plane); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
  .btn.primary:hover { background: #0f2c58; box-shadow: var(--shadow-md); }
  .btn.danger { background: #fff; color: var(--critical); border-color: var(--critical); }
  .btn.danger:hover { background: var(--critical-bg); }
  .btn.small { padding: 4px 9px; font-size: 12px; border-radius: 6px; }
  input[type=file] { display: none; }

  .autosave-status {
    margin: 4px 0 0; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px;
  }
  .autosave-status.ok { color: #0a6b0a; }
  .autosave-status.error { color: var(--critical); }
  .autosave-status.pending, .autosave-status.idle { color: var(--muted); }

  nav.tabs {
    display: flex; gap: 2px; padding: 0 22px; background: var(--surface-1);
    border-bottom: 1px solid var(--border); overflow-x: auto;
    position: sticky; top: 57px; z-index: 19;
  }
  nav.tabs button {
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary);
    background: none; border: none; padding: 11px 14px; margin: 6px 0; cursor: pointer; white-space: nowrap;
    border-radius: 7px; border-bottom: 2.5px solid transparent;
    transition: background .12s ease, color .12s ease;
  }
  nav.tabs button:hover { color: var(--text-primary); background: var(--page-plane); }
  nav.tabs button.active { color: var(--brand); background: var(--brand-light); border-bottom-color: var(--brand); }

  main { padding: 22px; max-width: 1400px; margin: 0 auto; }

  .card {
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
    padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
  }
  .section-title {
    font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px;
    padding-left: 10px; border-left: 3px solid var(--brand);
  }

  /* KPI tiles */
  .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
  .kpi-tile {
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
    padding: 15px 16px 14px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  }
  .kpi-tile::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--series-2));
  }
  .kpi-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .kpi-value { font-size: 27px; font-weight: 800; letter-spacing: -.01em; color: var(--brand); margin-top: 6px; font-variant-numeric: proportional-nums; }

  /* bars */
  .bar-row { display: grid; grid-template-columns: 190px 1fr 56px; align-items: center; gap: 10px; padding: 4px 0; }
  .bar-row .bar-label { font-size: 12.5px; color: var(--text-secondary); }
  .bar-track { background: var(--gridline); border-radius: 4px; height: 8px; overflow: hidden; }
  .bar-fill { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--series-1)); }
  .bar-fill.alt { background: linear-gradient(90deg, var(--series-2), #f5945f); }
  .bar-fill.alt2 { background: linear-gradient(90deg, var(--series-3), #5ddcb0); }
  .bar-value { font-size: 12.5px; color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
  .legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
  .legend span { display: inline-flex; align-items: center; gap: 6px; }
  .legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

  /* filters row */
  .filters-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
  .filters-row input[type=text], .filters-row select {
    font-family: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--border);
    border-radius: 7px; background: #fff; color: var(--text-primary);
  }
  .filters-row input[type=text] { min-width: 220px; }
  .result-count { font-size: 12px; color: var(--muted); margin-left: auto; }

  /* table */
  table.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  table.data-table th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--brand); font-weight: 800; padding: 8px 10px; border-bottom: 2px solid var(--brand-light);
    position: sticky; top: 106px; background: var(--surface-1);
  }
  table.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--gridline); color: var(--text-primary); vertical-align: top; }
  table.data-table tbody tr:hover { background: var(--brand-light); }
  .num { text-align: right; font-variant-numeric: tabular-nums; }
  .table-scroll { max-height: 62vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
  .table-scroll table.data-table th { top: 0; }

  /* badges */
  .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; border: 1px solid transparent; }
  .badge.good { background: var(--good-bg); color: #0a6b0a; border-color: rgba(10,107,10,.15); }
  .badge.warning { background: var(--warning-bg); color: #8a5a00; border-color: rgba(138,90,0,.15); }
  .badge.serious { background: var(--serious-bg); color: #a13d16; border-color: rgba(161,61,22,.15); }
  .badge.critical { background: var(--critical-bg); color: #a11f1f; border-color: rgba(161,31,31,.15); }
  .badge.neutral { background: var(--neutral-bg); color: var(--text-secondary); }
  .badge.clickable { cursor: pointer; border: 1px dashed transparent; }
  .badge.clickable:hover { border-color: currentColor; }

  /* coluna "materiais definidos" centralizada em Candidatos */
  td.materiais-summary { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
  td.materiais-summary span { display: block; line-height: 1.55; }
  td.materiais-summary b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

  /* select de status com cor customizável (Candidatos) */
  select.status-select {
    font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 26px 4px 10px; border-radius: 20px;
    border: 1px solid transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%23333' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; min-width: 172px;
  }
  select.status-select:hover, select.status-select:focus { outline: none; filter: brightness(0.96); }
  select.status-select option { font-weight: 600; }

  /* linhas do gerenciador de status */
  .status-manager-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--gridline); flex-wrap: wrap; }
  .status-manager-row input[type=color] { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: #fff; flex-shrink: 0; }
  .status-manager-row input[type=text] { flex: 1; min-width: 130px; font-family: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text-primary); }
  .trigger-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
  .trigger-toggle input[type=checkbox] { cursor: pointer; }

  /* checklist de materiais dentro da Solicitação Designer */
  .material-check-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--gridline); flex-wrap: wrap; }
  .material-check-row select { flex: 1; min-width: 170px; font-family: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text-primary); }
  .material-check-row input[type=text] { flex: 1.3; min-width: 160px; font-family: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text-primary); }
  .ok-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #0a6b0a; white-space: nowrap; cursor: pointer; }
  .ok-toggle input[type=checkbox] { cursor: pointer; width: 16px; height: 16px; }

  /* fluxo de trabalho (Painel) */
  .stepper-row { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; }
  .step {
    flex: 1; min-width: 140px; background: var(--page-plane); border: 1px solid var(--border);
    border-left: 3px solid var(--brand); border-radius: 10px; padding: 10px 12px; cursor: pointer;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
  }
  .step:hover { background: #fff; border-color: var(--brand); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
  .step:nth-child(1) { border-left-color: var(--series-1); }
  .step:nth-child(3) { border-left-color: var(--series-2); }
  .step:nth-child(5) { border-left-color: var(--series-3); }
  .step:nth-child(7) { border-left-color: var(--series-6); }
  .step:nth-child(9) { border-left-color: var(--series-8); }
  .step-label { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
  .step-value { font-size: 20px; font-weight: 800; color: var(--text-primary); margin-top: 4px; font-variant-numeric: tabular-nums; }
  .step-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
  .step-arrow { display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--muted); padding: 0 2px; }
  @media (max-width: 920px) { .step-arrow { display: none; } .stepper-row { flex-direction: column; } }

  /* Ações precisa começar no topo da linha (não centralizado), senão em
     linhas altas (ex.: Materiais + Quantidade em Solicitações Designer) o
     botão "Editar" flutua no meio, longe da 1ª linha do registro, e fica
     difícil saber a qual linha ele pertence — pedido do Leonardo: "ele
     precisa acompanhar as linhas, pra não confundir". */
  .row-actions { display: flex; align-items: flex-start; gap: 6px; white-space: nowrap; }
  td.row-actions { vertical-align: top; }

  /* Demanda Kits (15ª rodada) — quadro Kanban por status, um card por
     solicitação. Colunas roláveis na horizontal (o quadro todo) e na
     vertical (dentro de cada coluna), pra caber muitas solicitações sem
     estourar a página. */
  .kanban-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: flex-start; }
  .kanban-column {
    flex: 0 0 270px; min-width: 270px; background: var(--page-plane); border: 1px solid var(--border);
    border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 76vh;
  }
  .kanban-column-header {
    display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700;
    color: var(--text-primary); border-top: 3px solid var(--muted); margin: -10px -10px 0; padding: 8px 10px 0;
    border-radius: 12px 12px 0 0;
  }
  .kanban-column-count { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: var(--text-secondary); }
  .kanban-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 2px; }
  .kit-card {
    background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px;
    box-shadow: var(--shadow-sm); transition: box-shadow .12s ease, transform .12s ease;
  }
  .kit-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
  .kit-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
  .kit-card-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
  .kit-card-line { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
  .kit-card-materiais {
    display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 6px 8px;
    background: var(--page-plane); border-radius: 6px; font-size: 11.5px; color: var(--text-secondary);
  }
  .kit-card-materiais b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
  .kit-card-logistica { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 11.5px; color: var(--text-secondary); }
  .kit-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 9px; }
  .kit-card-bottom .status-select { flex: 1; min-width: 0; font-size: 11px; padding: 4px 22px 4px 8px; }

  /* modal */
  .modal-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(11,11,11,.42);
    z-index: 50; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px;
  }
  .modal-backdrop.show { display: flex; }
  .modal {
    background: #fff; border-radius: 14px; width: 100%; max-width: 560px; border-top: 3px solid var(--brand);
    padding: 20px 22px 18px; box-shadow: 0 12px 40px rgba(16,24,43,.22);
  }
  .modal h3 { font-size: 15px; font-weight: 800; color: var(--brand); margin-bottom: 14px; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .form-field { display: flex; flex-direction: column; gap: 4px; }
  .form-field.span2 { grid-column: 1 / -1; }
  .form-field label { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
  .form-field input, .form-field select, .form-field textarea {
    font-family: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--border);
    border-radius: 7px; background: #fff; color: var(--text-primary);
  }
  .form-field textarea { resize: vertical; min-height: 46px; }
  .modal-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 8px; }
  .modal-actions .right { display: flex; gap: 8px; }

  .confirm-inline {
    display: none; background: var(--critical-bg); border: 1px solid var(--critical); border-radius: 8px;
    padding: 10px 12px; margin-top: 10px; font-size: 12.5px; color: #7c1414; align-items: center; justify-content: space-between; gap: 10px;
  }
  .confirm-inline.show { display: flex; }

  .toast {
    position: fixed; bottom: 20px; right: 20px; background: var(--brand); color: #fff;
    padding: 10px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; z-index: 60;
    box-shadow: var(--shadow-md);
    opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; pointer-events: none;
  }
  .toast.show { opacity: 1; transform: translateY(0); }

  .help-block p { line-height: 1.55; color: var(--text-secondary); font-size: 13px; margin: 0 0 10px; }
  .help-block li { line-height: 1.55; color: var(--text-secondary); font-size: 13px; margin-bottom: 6px; }
  .help-block strong { color: var(--text-primary); }

  ::placeholder { color: var(--muted); }
  .muted-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

  /* observação inline por candidato/campanha na aba Saldo Materiais (16ª
     rodada) — compacta, cresce se precisar de mais espaço. */
  .saldo-obs-textarea {
    width: 100%; min-height: 34px; resize: vertical; font-family: inherit; font-size: 12.5px;
    padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text-primary);
  }
  /* quebra de materiais por candidato/campanha em Saldo Materiais, 1 material
     por linha (18ª rodada — antes era uma linha só separada por "·"). */
  .saldo-materiais-lista {
    margin-top: 4px; display: flex; flex-direction: column; gap: 2px;
  }
  .saldo-materiais-item {
    display: flex; justify-content: space-between; gap: 14px; font-size: 12px; color: var(--text-secondary);
  }
  .saldo-materiais-item .num { font-variant-numeric: tabular-nums; }
</style>

/* ---------- tela de login (sistema web, com login por usuário) ---------- */
.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--page-plane); padding: 20px;
}
.login-box {
  background: var(--surface-1); border: 1px solid var(--border); border-top: 3px solid var(--brand);
  border-radius: 14px; padding: 28px 26px; width: 100%; max-width: 360px; box-shadow: var(--shadow-md);
}
.login-box h1 { font-size: 16px; color: var(--brand); margin-bottom: 4px; }
.login-box p.sub { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 18px; }
.login-box .form-field { margin-bottom: 12px; }
.login-box button.primary { width: 100%; margin-top: 6px; }
.login-error { background: var(--critical-bg); color: #a11f1f; border: 1px solid var(--critical); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 12px; display: none; }
.login-error.show { display: block; }

/* ---------- usuário logado no cabeçalho ---------- */
.user-badge { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.user-badge b { color: var(--text-primary); }
.user-badge .role-tag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: var(--brand-light); color: var(--brand); padding: 2px 8px; border-radius: 20px;
}

/* ---------- gerenciar usuários (só perfil admin) ---------- */
.users-table-wrap { margin-top: 4px; }