/* ══════════════ Regras — sub-abas, Zonas, Pontos, Matriz ══════════════ */
.sub-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.sub-tab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.sub-tab:hover { color: var(--text-strong); }
.sub-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.sub-panel { display: none; }
.sub-panel.active { display: block; }

/* Zonas table */
.zonas-table, .pontos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.zonas-table th, .pontos-table th {
  text-align: left;
  padding: 10px 10px;
  color: var(--muted);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.zonas-table td, .pontos-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.zonas-table tr:hover, .pontos-table tr:hover { background: var(--surface-2); }
.zonas-table input[type=text],
.zonas-table input[type=number],
.pontos-table input[type=text],
.pontos-table input[type=number],
.pontos-table select {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-strong);
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font: inherit;
}
.zonas-table input:focus,
.pontos-table input:focus,
.pontos-table select:focus {
  border-color: var(--accent);
  outline: none;
  background: var(--surface-2);
}
.zona-color-swatch {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  vertical-align: middle;
  cursor: pointer;
}
.icon-btn-sm {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--muted);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.icon-btn-sm:hover { color: var(--warn, #ef4444); background: var(--surface-2); }
.icon-btn-sm:disabled { opacity: .3; cursor: not-allowed; }
.num-input-sm { max-width: 70px; text-align: center; }
.zone-mini-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  color: #fff;
}

.pontos-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.regras-actions-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.regras-dirty-badge {
  padding: 4px 10px;
  background: rgba(245,158,11,.15);
  color: #f59e0b;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 999px;
  margin-right: auto;
  align-self: center;
}

/* Aba Ajustes — sub-aba Turnos (cada ministério tem seus horários) */
.turnos-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 14px;
}
.turnos-grupo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}
.turnos-titulo {
  margin: 0 0 12px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.turno-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.turno-row.inativo .turno-num,
.turno-row.inativo input[type=text] {
  opacity: .45;
}
.turno-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.turno-toggle input[type=checkbox] { cursor: pointer; }
.turno-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 6px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted);
}
.turno-row input[type=text] {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-strong);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font: inherit;
}
.turno-row input[type=text]:focus {
  border-color: var(--accent);
  outline: none;
  background: var(--surface-2);
}

/* Aba Ajustes — atributos por ministério */
.ajustes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}
.ajustes-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ajustes-item:hover { border-color: var(--accent); background: var(--surface-2); }
.ajustes-item input[type=checkbox] { margin-top: 3px; cursor: pointer; }
.ajustes-item-text { display: flex; flex-direction: column; gap: 2px; }
.ajustes-item-text strong { color: var(--text-strong); font-size: .92rem; }
.ajustes-item-text .muted { font-size: .8rem; line-height: 1.35; }

/* Picker de colunas visíveis na Matriz */
.cols-picker {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.cols-picker > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-strong);
  list-style: none;
  user-select: none;
}
.cols-picker > summary::-webkit-details-marker { display: none; }
.cols-picker[open] > summary { border-bottom: 1px solid var(--border); }
.cols-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 12px;
  padding: 10px 14px;
}
.cols-picker-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  cursor: pointer;
  color: var(--text);
}
.cols-picker-item input[type=checkbox] { cursor: pointer; }

/* Matriz */
.matriz-wrap {
  overflow: auto;
  max-height: calc(100vh - 220px);
}
.matriz-table {
  border-collapse: collapse;
  font-size: .82rem;
  min-width: 100%;
}
.matriz-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 6px;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

/* Tooltip custom — posicionado via JS (position:fixed evita recorte) */
[data-tip] { cursor: help; }
#floating-tooltip {
  position: fixed;
  background: #1a1a1a;
  color: #f5f5f5;
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  text-align: left;
  max-width: 240px;
  z-index: 9999;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  pointer-events: none;
  line-height: 1.4;
  opacity: 0;
  transition: opacity .12s;
}
#floating-tooltip.visible { opacity: 1; }
.matriz-table th.col-ponto {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
  min-width: 200px;
  border-right: 1px solid var(--border);
}
.matriz-table td {
  padding: 4px 6px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.matriz-table td.col-ponto {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--surface);
  font-weight: 500;
  border-right: 1px solid var(--border);
  z-index: 1;
}

/* Fundo tintado por zona (inline --zcor em cada <tr> de ponto) */
.matriz-table tr[data-zcor] {
  background: color-mix(in srgb, var(--zcor) 12%, transparent);
}
.matriz-table tr[data-zcor] td.col-ponto {
  background: color-mix(in srgb, var(--zcor) 12%, var(--surface));
  border-left: 3px solid var(--zcor);
}
.matriz-table tr.row-zona-header td {
  background: var(--surface-2);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 6px 10px;
  border-top: 2px solid var(--border);
}
.matriz-table input[type=checkbox] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}
.matriz-ponto-num {
  display: inline-block;
  width: 24px;
  font-weight: 700;
  color: var(--muted);
  font-size: .78rem;
}

/* Divisor visual entre as regras "booleanas" e as de "prioridade" */
.matriz-table th.matriz-divisor,
.matriz-table td.matriz-divisor {
  border-left: 2px solid var(--accent);
}
.matriz-table th:nth-child(n+12),
.matriz-table td:nth-child(n+12) {
  /* leve tom diferente nas colunas de prioridade */
  background-image: linear-gradient(to right, rgba(255,255,255,.02), rgba(255,255,255,.02));
}

/* Banner que deixa visível qual ministério está sendo editado na aba Regras.
   Reduz risco de master (dropdown) bagunçar regras do ministério errado. */
.regras-ministerio-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--accent, #e04535) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #e04535) 25%, transparent);
  border-left: 4px solid var(--accent, #e04535);
  border-radius: 8px;
  font-size: .9rem;
}
.regras-ministerio-banner strong {
  color: var(--text-strong, var(--text));
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   Matriz v2 (B5a/Lote 2 Frente B) — cards por ponto agrupados por zona.
   Substitui o estilo da tabela densa da v1.
   ═══════════════════════════════════════════════════════════════ */
.matriz-summary-line {
  font-size: .82rem;
  margin: 0 0 12px;
}
.matriz-zona {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
  background: var(--surface);
}
.matriz-zona-header {
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  list-style: none;
}
.matriz-zona-header::-webkit-details-marker { display: none; }
.matriz-zona-header::before {
  content: '▶';
  font-size: .7rem;
  color: var(--muted);
  transition: transform .15s ease;
  display: inline-block;
}
.matriz-zona[open] .matriz-zona-header::before {
  transform: rotate(90deg);
}
.matriz-zona-count {
  margin-left: auto;
  font-size: .78rem;
}
/* Grid mora aqui (na zona), com 6 colunas fixas: nome | T1 | T2 | T3 | T4 | flags.
   Cada ponto-card herda via `subgrid` — assim T1 de P1 alinha com T1 de P2,
   etc. Sem subgrid, cada card teria seu próprio grid e larguras diferentes. */
.matriz-zona-body {
  padding: 10px 14px 14px;
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) repeat(4, minmax(120px, 1fr)) minmax(100px, auto);
  gap: 8px 6px;
}
.matriz-zona-orfaos {
  border-color: var(--warn);
}

/* Card herda o grid do parent via subgrid — colunas alinham entre cards
   da mesma zona. grid-column 1/-1 faz o card ocupar TODAS as colunas
   do parent grid (1 row inteira). */
.ponto-card {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: stretch;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm, 6px);
  padding: 8px 10px;
}
.ponto-card-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  min-width: 0; /* permite truncar nome longo */
}
.ponto-num-badge {
  font-weight: 700;
  color: var(--muted);
  font-size: .78rem;
  min-width: 32px;
  flex-shrink: 0;
}
.ponto-nome {
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ponto-flags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: 4px;
}
.ponto-flag-badge {
  font-size: .7rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  white-space: nowrap;
  cursor: help;
}

/* Cell base — neutra. Cada estado (sim/opcional/nao) sobrescreve.
   Já mora direto no grid de .ponto-card (sem wrapper .ponto-turnos). */
.turno-cell {
  font-size: .76rem;
  padding: 6px 8px;
  border-radius: var(--r-sm, 6px);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-left-width: 3px;
  transition: background .12s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 42px;
}
.turno-cell-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.turno-cell-head strong { font-size: .85rem; }
.aloc-sym {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
}

/* ATIVO — fundo esverdeado, ✓ verde, borda verde grossa. Destaque positivo. */
.turno-sim {
  background: color-mix(in srgb, var(--ok) 14%, var(--surface-3));
  border-color: color-mix(in srgb, var(--ok) 30%, var(--border));
  border-left: 4px solid var(--ok);
}
.turno-sim .aloc-sym { color: var(--ok); }

/* OPCIONAL — fundo amarelo claro, ? amarelo, borda dashed. */
.turno-opcional {
  background: color-mix(in srgb, var(--warn) 12%, var(--surface-3));
  border-color: color-mix(in srgb, var(--warn) 30%, var(--border));
  border-left: 4px dashed var(--warn);
}
.turno-opcional .aloc-sym { color: var(--warn); }

/* INATIVO — hatched, opacidade reduzida, borda apagada, ✕ cinza. Comunica
   "este turno está fechado" sem ambiguidade. Atributos são ocultos no JS
   porque não fazem efeito sem alocação. */
.turno-nao {
  background:
    repeating-linear-gradient(
      135deg,
      var(--surface-3),
      var(--surface-3) 5px,
      var(--bg) 5px,
      var(--bg) 10px
    );
  border-color: var(--border);
  border-left-color: var(--border);
  border-left-style: solid;
  border-left-width: 3px;
  opacity: .55;
}
.turno-nao .aloc-sym { color: var(--muted); }

/* Cell sem regra cadastrada (fallback raro — universo v2 deveria ter as 4) */
.turno-cell-empty {
  opacity: .35;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
}

.qtd-min-pill {
  background: var(--accent);
  color: white;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: .7rem;
  font-weight: 700;
  margin-left: auto;
}
.attr-chips {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 5px;
}
.attr-chip {
  font-size: .68rem;
  padding: 1px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
}

/* Cursor pointer no card pra sinalizar que é clicável (B5b) */
.ponto-card { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.ponto-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-light));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-2));
}

/* ═══════════════════════════════════════════════════════════════
   Modal de edição (matriz-ponto) — B5b
   ═══════════════════════════════════════════════════════════════ */
.modal.modal-wide { max-width: 920px; width: 95vw; }
#modal-matriz-ponto .modal-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px;
}
#modal-matriz-ponto .modal-header { padding: 16px 22px; }
#modal-matriz-ponto .modal-footer {
  padding: 14px 22px 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}
.modal-secao { display: flex; flex-direction: column; gap: 8px; }
.modal-secao-titulo {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0;
}

/* Flags do ponto — checkboxes em grid 2x2 (4 flags) */
.flag-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
}
.flag-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  font-size: .85rem;
  user-select: none;
}
.flag-checkbox:hover {
  border-color: var(--border-light);
  background: var(--surface-3);
}
.flag-checkbox input[type=checkbox] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Por turno — 4 colunas */
.modal-turnos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.modal-turno-col {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-turno-head { text-align: center; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.modal-turno-head strong { font-size: 1rem; }
.modal-turno-col .field { gap: 3px; }
.modal-turno-col .field-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  font-weight: 600;
}
.modal-turno-col select,
.modal-turno-col input[type=number] {
  width: 100%;
  padding: 5px 8px;
  font-size: .85rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
}
/* Qtd mín + máx lado a lado dentro do turno */
.modal-turno-qtds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* Atributos toggleable (chips) */
.attr-chip-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.attr-chip-toggle {
  font-size: .68rem;
  padding: 3px 7px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
  transition: all .12s ease;
  font-family: inherit;
}
.attr-chip-toggle:hover {
  border-color: var(--border-light);
  color: var(--text);
}
.attr-chip-toggle.is-on {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.attr-chip-toggle.is-disabled,
.attr-chip-toggle:disabled {
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.attr-chip-toggle:disabled:hover {
  border-color: var(--border);
  color: var(--muted);
}

/* Flag checkbox em estado desabilitado (Overflow quando Máx 1 marcado) */
.flag-checkbox.is-disabled {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.flag-checkbox.is-disabled:hover {
  border-color: var(--border);
  background: var(--surface-2);
}

/* Barra de ações fixa no rodapé da sub-aba */
.matriz-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-top: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .15);
}
.matriz-actions-bar.is-dirty {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
  background: color-mix(in srgb, var(--warn) 6%, var(--surface-2));
}
.matriz-dirty-badge {
  font-size: .8rem;
  color: var(--warn);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   Sub-aba Overflow (B5c) — lista ordenada da overflow_priority_v2
   ═══════════════════════════════════════════════════════════════ */
.ovf-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  background: var(--surface-2);
  padding: 6px;
}
.ovf-row {
  display: grid;
  grid-template-columns: 36px 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
  font-size: .88rem;
}
.ovf-row.is-orfao {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 6%, var(--surface));
}
.ovf-pos {
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  font-size: .82rem;
}
.ovf-nome {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ovf-actions {
  display: flex;
  gap: 4px;
}
.ovf-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ovf-add-row select {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  padding: 6px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
  font-size: .85rem;
}