/* ============================================================================
   Checklist de etapas das tarefas (Kanban da Regulação) — 2026-06-12
   ========================================================================== */
.reg-checklist { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--border, #e0e7d4); border-radius: 10px; background: var(--surface-2, #f7f9f4); }
.reg-checklist-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 0.85rem; color: var(--text-main, #24281d); margin-bottom: 8px; }
.reg-checklist-head i { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; color: var(--primary, #536f23); }
.reg-checklist-count { font-size: 0.78rem; color: var(--text-muted, #7e8474); font-weight: 600; }
.reg-checklist-bar { height: 6px; background: var(--border, #e0e7d4); border-radius: 99px; overflow: hidden; margin-bottom: 10px; }
.reg-checklist-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary, #536f23), var(--accent, #c5ad7a)); transition: width .25s; }
.reg-checklist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.reg-checklist-list li label { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; cursor: pointer; color: var(--text-main, #24281d); }
.reg-checklist-list li input { width: 17px; height: 17px; accent-color: var(--primary, #536f23); cursor: pointer; flex-shrink: 0; }
.reg-checklist-list li.is-done span { text-decoration: line-through; color: var(--text-muted, #8d9977); }
.reg-task-card-steps { font-size: 0.72rem; color: var(--text-muted, #7e8474); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.reg-task-card-steps i { width: 12px; height: 12px; }

/* ---- Dark mode: modal de tratativa da Regulação (cobre blocos que ficavam claros) ---- */
body.theme-dark .reg-treat-info,
body.theme-dark .reg-treat-form {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}
body.theme-dark .reg-treat-desc {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}
body.theme-dark :is(.reg-treat-info, .reg-treat-form, .reg-treat-desc) :is(span, div, p, strong, label, li, h1, h2, h3, h4) {
  color: var(--text-main);
}
body.theme-dark .reg-tf-who,
body.theme-dark .reg-treat-form .small,
body.theme-dark .reg-treat-updated { color: var(--text-muted) !important; }
body.theme-dark .reg-tf-link {
  background: var(--surface-3) !important;
  color: var(--text-main) !important;
  border-color: var(--border-strong) !important;
}
body.theme-dark .reg-treat-form input:not([type="checkbox"]):not([type="radio"]),
body.theme-dark .reg-treat-form textarea,
body.theme-dark .reg-treat-form select {
  background: var(--field-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--field-border) !important;
}

/* ============================================================================
   Histórico de "Chamado" (abertura de agenda): filtro de status + tabela
   2026-06-12
   ========================================================================== */
.ag-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ag-filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border, #e0e7d4); background: var(--surface, #fff);
  color: var(--text-muted, #4d5243); font-size: 0.82rem; font-weight: 600;
  transition: all .15s;
}
.ag-filter-chip:hover { border-color: var(--primary, #536f23); }
.ag-filter-chip.active { background: var(--primary, #536f23); border-color: var(--primary, #536f23); color: #fff; }
.ag-filter-n {
  font-size: 0.72rem; font-weight: 700; padding: 0 7px; border-radius: 99px;
  background: rgba(0,0,0,0.08); color: inherit;
}
.ag-filter-chip.active .ag-filter-n { background: rgba(255,255,255,0.25); }
body.theme-dark .ag-filter-n { background: rgba(255,255,255,0.10); }

.ag-table-wrap { overflow-x: auto; border: 1px solid var(--border, #e0e7d4); border-radius: 12px; }
.ag-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ag-table thead th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted, #7e8474); font-weight: 700; padding: 11px 14px;
  background: var(--surface-2, #f7f9f4); border-bottom: 1px solid var(--border, #e0e7d4); white-space: nowrap;
}
.ag-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border, #e0e7d4); color: var(--text-main, #24281d); vertical-align: middle; }
.ag-table tbody tr:last-child td { border-bottom: none; }
.ag-table tbody tr:hover td { background: var(--surface-2, #f7f9f4); }
.ag-td-proto { font-weight: 800; white-space: nowrap; }
.ag-td-proto i { width: 13px; height: 13px; vertical-align: -2px; color: var(--text-muted, #8d9977); }
.ag-td-profs { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-td-steps { font-weight: 700; color: var(--text-muted, #7e8474); white-space: nowrap; }
.ag-td-acts { white-space: nowrap; text-align: right; }
.ag-td-acts .btn { margin-left: 6px; }
.ag-td-acts .btn i { width: 14px; height: 14px; }

/* Checklist somente-leitura (Visualizar) */
.reg-checklist-ro .reg-checklist-list li label { cursor: default; }
.reg-checklist-ro input { cursor: default; }

@media (max-width: 720px) {
  .ag-table thead { display: none; }
  .ag-table, .ag-table tbody, .ag-table tr, .ag-table td { display: block; width: 100%; }
  .ag-table tr { border-bottom: 1px solid var(--border, #e0e7d4); padding: 6px 0; }
  .ag-table td { border: none; padding: 5px 14px; }
  .ag-td-acts { text-align: left; }
  .ag-td-acts .btn { margin: 4px 6px 0 0; }
}

/* ============================================================================
   Painel de Categorias (Kanban Regulação) — redesign UX/UI  2026-06-12
   Grid responsivo, cards limpos, badges de SLA, ações com hover, dark-aware.
   Prefixo #view-regulacao para vencer regras antigas.
   ========================================================================== */
#view-regulacao .reg-cat-panel { max-width: 1200px; margin: 0 auto; padding: 2px 0 8px; }
#view-regulacao .reg-cat-intro { font-size: 0.84rem; color: var(--text-muted, #7e8474); margin: 2px 0 16px; }

#view-regulacao .reg-cat-newform { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
#view-regulacao .reg-cat-newform input {
  flex: 1; max-width: 440px; padding: 10px 13px; font-size: 0.9rem;
  border: 1px solid var(--border, #e0e7d4); border-radius: 10px;
  background: var(--field-bg, #fff); color: var(--text-main, #24281d);
}

#view-regulacao .reg-cat-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px; align-items: start;
}
#view-regulacao .reg-cat-item {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface, #fff); border: 1px solid var(--border, #e0e7d4);
  border-radius: 14px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
}
#view-regulacao .reg-cat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--border, #e0e7d4);
  background: linear-gradient(135deg, var(--primary-muted, #eff3e6), transparent);
}
#view-regulacao .reg-cat-head strong { font-size: 0.95rem; font-weight: 800; color: var(--text-main, #24281d); }
#view-regulacao .reg-cat-headacts, #view-regulacao .reg-cat-subacts { display: inline-flex; gap: 4px; flex-shrink: 0; }

#view-regulacao .reg-cat-iconbtn {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #e0e7d4); background: var(--surface-2, #f7f9f4);
  color: var(--text-muted, #7e8474); border-radius: 8px; cursor: pointer; transition: all .15s; padding: 0;
}
#view-regulacao .reg-cat-iconbtn:hover { background: var(--primary, #536f23); color: #fff; border-color: var(--primary, #536f23); }
#view-regulacao .reg-cat-iconbtn i { width: 14px; height: 14px; }
#view-regulacao .reg-cat-iconbtn.has-form { color: var(--primary, #536f23); border-color: rgba(83,111,35,0.4); }

#view-regulacao .reg-cat-subs { display: flex; flex-direction: column; gap: 6px; padding: 10px; flex: 1; }
#view-regulacao .reg-cat-subrow {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 10px;
  background: var(--surface-2, #f7f9f4); border: 1px solid var(--border, #e0e7d4);
}
#view-regulacao .reg-cat-subrow:hover { border-color: var(--border-strong, #c5d1b0); }
#view-regulacao .reg-cat-subname { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 600; color: var(--text-main, #24281d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-regulacao .reg-cat-slatag {
  font-size: 0.68rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; white-space: nowrap;
  background: var(--primary-muted, #ede9fe); color: var(--primary, #536f23);
}
#view-regulacao .reg-cat-formtag {
  font-size: 0.66rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; white-space: nowrap;
  background: rgba(34,197,94,0.14); color: #1f8a5b; display: inline-flex; align-items: center; gap: 4px;
}
#view-regulacao .reg-cat-formtag i { width: 12px; height: 12px; }
#view-regulacao .reg-cat-empty { font-size: 0.8rem; color: var(--text-muted, #8d9977); padding: 12px; text-align: center; }

#view-regulacao .reg-cat-subform, #view-regulacao .reg-cat-editform {
  display: flex; gap: 7px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border, #e0e7d4);
}
#view-regulacao .reg-cat-subform input, #view-regulacao .reg-cat-editform input {
  padding: 8px 10px; font-size: 0.82rem; border: 1px solid var(--border, #e0e7d4); border-radius: 8px;
  background: var(--field-bg, #fff); color: var(--text-main, #24281d); min-width: 0;
}
#view-regulacao .reg-cat-subform input[type="number"], #view-regulacao .reg-cat-editform input[type="number"] { width: 92px; flex: 0 0 auto; }
#view-regulacao .reg-cat-subform input:not([type="number"]), #view-regulacao .reg-cat-editform input:not([type="number"]) { flex: 1; }
#view-regulacao .reg-cat-subform .btn, #view-regulacao .reg-cat-editform .btn { flex-shrink: 0; }

@media (max-width: 720px) {
  #view-regulacao .reg-cat-list { grid-template-columns: 1fr; }
}

/* ============================================================================
   Dashboard do Chamado (gráficos + filtros)  2026-06-12
   ========================================================================== */
.ag-dash { display: flex; flex-direction: column; gap: 16px; }
.ag-dash-filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  background: var(--surface-2, #f7f9f4); border: 1px solid var(--border, #e0e7d4);
  border-radius: 12px; padding: 12px 14px;
}
.ag-dash-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 700; color: var(--text-muted, #7e8474); }
.ag-dash-filters input, .ag-dash-filters select {
  padding: 7px 9px; font-size: 0.84rem; border: 1px solid var(--border, #e0e7d4); border-radius: 8px;
  background: var(--field-bg, #fff); color: var(--text-main, #24281d); min-width: 150px;
}
.ag-dash-filters .btn { margin-bottom: 1px; }

.ag-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ag-kpi {
  background: var(--surface, #fff); border: 1px solid var(--border, #e0e7d4); border-left: 4px solid var(--border-strong, #c5d1b0);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}
.ag-kpi-v { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--text-main, #24281d); }
.ag-kpi-l { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; color: var(--text-muted, #7e8474); margin-top: 5px; text-transform: uppercase; }
.ag-kpi.is-primary { border-left-color: var(--primary, #536f23); }
.ag-kpi.is-primary .ag-kpi-v { color: var(--primary, #536f23); }
.ag-kpi.is-accent { border-left-color: var(--accent, #c5ad7a); }
.ag-kpi.is-ok { border-left-color: #22c55e; }

.ag-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.ag-chart-card {
  background: var(--surface, #fff); border: 1px solid var(--border, #e0e7d4);
  border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}
.ag-chart-title { font-size: 0.85rem; font-weight: 800; color: var(--text-main, #24281d); margin-bottom: 10px; }
.ag-chart-box { position: relative; height: 240px; }

/* ============================================================================
   Calendário do Chamado: filtros + modal de detalhes do dia  2026-06-12
   ========================================================================== */
.reg-cal-filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px;
  background: var(--surface-2, #f7f9f4); border: 1px solid var(--border, #e0e7d4);
  border-radius: 10px; padding: 10px 12px;
}
.reg-cal-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 0.7rem; font-weight: 700; color: var(--text-muted, #7e8474); }
.reg-cal-filters select {
  padding: 6px 8px; font-size: 0.82rem; border: 1px solid var(--border, #e0e7d4); border-radius: 8px;
  background: var(--field-bg, #fff); color: var(--text-main, #24281d); min-width: 140px;
}
.reg-cal-filters .btn { margin-bottom: 1px; }

/* Modal de detalhes do dia */
.reg-cal-day { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .reg-cal-day { grid-template-columns: 1fr; } }
.reg-cal-day-title { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 0.88rem; color: var(--text-main, #24281d); margin-bottom: 10px; }
.reg-cal-day-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; padding-right: 4px; }
.reg-cal-item {
  background: var(--surface-2, #f7f9f4); border: 1px solid var(--border, #e0e7d4);
  border-left: 4px solid var(--border-strong, #c5d1b0); border-radius: 10px; padding: 9px 12px;
}
.reg-cal-item-vaga { border-left-color: #22c55e; }
.reg-cal-item-canc { border-left-color: #ef4444; }
.reg-cal-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reg-cal-item-top strong { font-size: 0.88rem; color: var(--text-main, #24281d); }
.reg-cal-item-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.reg-cal-pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 99px; background: var(--primary-muted, #ede9fe); color: var(--primary, #536f23);
}
.reg-cal-pill i { width: 11px; height: 11px; }
.reg-cal-pill-proto { background: var(--surface-3, #eef2f7); color: var(--text-muted, #4d5243); }
.reg-cal-item-times { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.reg-cal-time {
  font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 6px;
  background: var(--surface-3, #eef2f7); color: var(--text-main, #24281d); border: 1px solid var(--border, #e0e7d4);
}
.reg-cal-muted { color: var(--text-muted, #8d9977); }
.reg-cal-empty { font-size: 0.82rem; color: var(--text-muted, #8d9977); padding: 10px; text-align: center; }

/* ---- Modal de detalhes do dia: maior (mais largo e mais alto) ---- */
.reg-modal-box:has(.reg-cal-day) { max-width: 920px !important; width: 95% !important; }
.reg-modal-box:has(.reg-cal-day) .reg-modal-body { max-height: 78vh; overflow-y: auto; }
.reg-cal-day-list { max-height: 62vh; }
/* Garante fundo escuro do modal e itens no dark */
body.theme-dark .reg-modal-box:has(.reg-cal-day),
body.theme-dark .reg-modal-box:has(.reg-cal-day) .reg-modal-body { background: var(--surface) !important; color: var(--text-main) !important; }
body.theme-dark .reg-cal-item { background: var(--surface-2) !important; border-color: var(--border) !important; }
body.theme-dark .reg-cal-time { background: var(--surface-3) !important; color: var(--text-main) !important; border-color: var(--border) !important; }
body.theme-dark .reg-cal-pill-proto { background: var(--surface-3) !important; color: var(--text-muted) !important; }

/* ---- Modal do dia: maior por classe (confiável) + dark sólido ---- */
.reg-modal-box.reg-modal-wide { max-width: 920px !important; width: 95% !important; }
.reg-modal-box.reg-modal-wide .reg-modal-body { max-height: 78vh; overflow-y: auto; }
.reg-modal-box.reg-modal-wide .reg-cal-day-list { max-height: 64vh; }

body.theme-dark .reg-modal-box,
body.theme-dark .reg-modal-box .reg-modal-body { background: var(--surface) !important; color: var(--text-main) !important; }
body.theme-dark .reg-modal-box .reg-modal-head h3 { color: var(--text-main) !important; }
body.theme-dark .reg-cal-day-title { color: var(--text-main) !important; }
body.theme-dark .reg-cal-item-top strong { color: var(--text-main) !important; }
body.theme-dark .reg-cal-empty { color: var(--text-muted) !important; }

/* ---- Corrige a barra branca (.reg-cal-day) e reforça dark do modal do dia ---- */
body.theme-dark .reg-cal-day { background: transparent !important; }
body.theme-dark .reg-cal-day-sec { background: transparent !important; }
.reg-modal-box.reg-modal-wide .reg-cal-day { background: transparent; }
.reg-modal-box.reg-modal-wide .reg-modal-body { padding-bottom: 8px; }

/* ---- Modal do dia: ocupa a altura (corpo preenche, listas crescem) ---- */
.reg-modal-box.reg-modal-wide { display: flex !important; flex-direction: column !important; }
.reg-modal-box.reg-modal-wide .reg-modal-body { flex: 1 1 auto !important; min-height: 0; overflow-y: auto; }
.reg-modal-box.reg-modal-wide .reg-cal-day { height: 100%; align-content: start; }
.reg-modal-box.reg-modal-wide .reg-cal-day-list { max-height: none; }

/* ---- Botão × único no cabeçalho dos modais da Regulação ---- */
.reg-modal-head { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; }
.reg-modal-x {
  flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-muted, #8d9977); font-size: 1.6rem; line-height: 1;
  cursor: pointer; border-radius: 8px; transition: all .15s; padding: 0;
}
.reg-modal-x:hover { background: var(--surface-2, #ecf0e5); color: var(--text-main, #24281d); }
body.theme-dark .reg-modal-x:hover { background: var(--surface-3) !important; color: var(--text-main) !important; }

/* ============================================================================
   Lista de anexos "staged" (reaproveitar vaga + nova tarefa) — visual limpo
   2026-06-12
   ========================================================================== */
.reg-reuse-attach { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border, #e0e7d4); }
.reg-task-attachments-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 0.86rem; color: var(--text-main, #24281d); margin-bottom: 8px; }
.reg-task-attachments-head i { width: 16px; height: 16px; color: var(--primary, #536f23); }
.reg-task-attachments-head .small { font-weight: 400; color: var(--text-muted, #7e8474); }

.reg-task-staged-list { display: flex; flex-direction: column; gap: 6px; }
.reg-task-staged-list:not(:empty) { margin: 6px 0 10px; }
.reg-task-staged-head { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; color: var(--text-muted, #7e8474); margin-bottom: 2px; }
.reg-task-staged-head i { width: 13px; height: 13px; }

.reg-task-staged-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 10px;
  background: var(--surface-2, #f7f9f4); border: 1px solid var(--border, #e0e7d4);
}
.reg-task-staged-icon { flex-shrink: 0; display: inline-flex; color: var(--text-muted, #8d9977); }
.reg-task-staged-icon i { width: 18px; height: 18px; }
.reg-task-staged-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.reg-task-staged-info strong { font-size: 0.84rem; font-weight: 600; color: var(--text-main, #24281d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-task-staged-info small { font-size: 0.72rem; color: var(--text-muted, #7e8474); }

/* Botão remover: compacto (ícone), não um bloco vermelho enorme */
.reg-task-staged-item .btn.btn-danger {
  flex-shrink: 0; width: 30px; height: 30px; min-width: 0; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  background: transparent; color: #ef4444; border: 1px solid var(--border, #e0e7d4); box-shadow: none;
}
.reg-task-staged-item .btn.btn-danger:hover { background: #ef4444; color: #fff; border-color: #ef4444; transform: none; }
.reg-task-staged-item .btn.btn-danger i { width: 15px; height: 15px; }

.reg-att-add-btn i { width: 15px; height: 15px; }
.reg-task-attachment-help { font-size: 0.74rem; color: var(--text-muted, #8d9977); margin: 8px 0 0; }

/* ============================================================================
   Painel de Categorias — mais espaçamento nos cards  2026-06-13
   ========================================================================== */
#view-regulacao .reg-cat-list { gap: 20px; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); }
#view-regulacao .reg-cat-item { border-radius: 16px; }
#view-regulacao .reg-cat-head { padding: 15px 18px; }
#view-regulacao .reg-cat-head strong { font-size: 1rem; }

#view-regulacao .reg-cat-subs { padding: 14px; gap: 9px; }
#view-regulacao .reg-cat-subrow { padding: 11px 14px; gap: 12px; }
#view-regulacao .reg-cat-subname { font-size: 0.88rem; }
#view-regulacao .reg-cat-slatag { padding: 4px 10px; }

#view-regulacao .reg-cat-iconbtn { width: 31px; height: 31px; }
#view-regulacao .reg-cat-subacts, #view-regulacao .reg-cat-headacts { gap: 6px; }

#view-regulacao .reg-cat-subform, #view-regulacao .reg-cat-editform { padding: 13px 14px; gap: 9px; }
#view-regulacao .reg-cat-subform input, #view-regulacao .reg-cat-editform input { padding: 9px 11px; }

#view-regulacao .reg-cat-newform { margin-bottom: 22px; }
#view-regulacao .reg-cat-intro { margin-bottom: 20px; }

/* ============================================================================
   Painel de Categorias — layout MASONRY (sem buracos de altura)  2026-06-13
   Substitui o grid (que alinhava linhas pela maior e deixava vãos) por colunas
   que fluem, preenchendo o espaço. Cada card é indivisível.
   ========================================================================== */
#view-regulacao .reg-cat-list {
  display: block !important;
  grid-template-columns: none !important;
  columns: 360px 3;
  column-gap: 20px;
}
#view-regulacao .reg-cat-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 20px;
  width: 100%;
}
@media (max-width: 1100px) { #view-regulacao .reg-cat-list { columns: 320px 2; } }
@media (max-width: 720px)  { #view-regulacao .reg-cat-list { columns: 1; } }

/* ============================================================================
   Construtor de formulário por subcategoria — UX melhorado  2026-06-13
   Grade do formulário (largura por campo), cards no editor, prévia ao vivo.
   ========================================================================== */

/* Grade do formulário: 2 colunas; campo "inteira" ocupa as 2, "metade" ocupa 1 */
.reg-tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reg-tf-field { grid-column: span 2; display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; font-weight: 600; color: var(--text-main, #4d5243); }
.reg-tf-field-half { grid-column: span 1; }
.reg-tf-field > input, .reg-tf-field > textarea, .reg-tf-field > select {
  font-weight: 400; padding: 8px 10px; border: 1px solid var(--border, #e0e7d4); border-radius: 8px;
  background: var(--field-bg, #fff); color: var(--text-main, #24281d);
}
@media (max-width: 560px) { .reg-tf-grid { grid-template-columns: 1fr; } .reg-tf-field, .reg-tf-field-half { grid-column: span 1; } }

/* Layout do construtor: editor | prévia */
.fb-cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items: start; margin-top: 6px; }
@media (max-width: 800px) { .fb-cols { grid-template-columns: 1fr; } }
.reg-fb-head { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 0.86rem; color: var(--text-main, #24281d); margin: 4px 0 10px; }
.reg-fb-head i { width: 16px; height: 16px; color: var(--primary, #536f23); }

/* Card de cada campo no editor */
.fb-field { background: var(--surface-2, #f7f9f4); border: 1px solid var(--border, #e0e7d4); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.fb-field-top { display: flex; align-items: center; gap: 9px; }
.fb-field-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: var(--primary-muted, #ede9fe); color: var(--primary, #536f23); font-size: 0.72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.fb-field-label { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border, #e0e7d4); border-radius: 8px; font-size: 0.86rem; font-weight: 600; background: var(--field-bg, #fff); color: var(--text-main, #24281d); }
.fb-field-del { flex-shrink: 0; width: 30px; height: 30px; border: 1px solid var(--border, #e0e7d4); background: transparent; color: #ef4444; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fb-field-del:hover { background: #ef4444; color: #fff; }
.fb-field-del i { width: 14px; height: 14px; }
.fb-field-opts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-top: 10px; }
.fb-field-opts > label { display: flex; flex-direction: column; gap: 3px; font-size: 0.7rem; font-weight: 700; color: var(--text-muted, #7e8474); }
.fb-field-opts select { padding: 6px 8px; border: 1px solid var(--border, #e0e7d4); border-radius: 7px; font-size: 0.8rem; background: var(--field-bg, #fff); color: var(--text-main, #24281d); }
.fb-field-req { flex-direction: row !important; align-items: center !important; gap: 6px !important; cursor: pointer; }
.fb-field-req input { width: 15px; height: 15px; accent-color: var(--primary, #536f23); }
.fb-field-extra { display: flex; gap: 10px; margin-top: 9px; }
.fb-field-extra label { display: flex; flex-direction: column; gap: 3px; font-size: 0.7rem; font-weight: 700; color: var(--text-muted, #7e8474); }
.fb-field-extra input { padding: 7px 9px; border: 1px solid var(--border, #e0e7d4); border-radius: 7px; font-size: 0.8rem; background: var(--field-bg, #fff); color: var(--text-main, #24281d); }
.fb-field-extra-full { flex: 1; }
.fb-field-extra-full input { width: 100%; box-sizing: border-box; }
.reg-fb-add { margin-top: 2px; }

/* Coluna de prévia */
.fb-preview-col { position: sticky; top: 0; }
.fb-preview { background: var(--surface-2, #f7f9f4); border: 1px dashed var(--border-strong, #c5d1b0); border-radius: 12px; padding: 14px; }
.fb-preview .reg-treat-form { background: var(--surface, #fff); border: 1px solid var(--border, #e0e7d4); border-radius: 10px; padding: 12px; }

/* prévia com mais espaço no construtor */
.fb-cols { grid-template-columns: 1fr 1fr; gap: 22px; }

/* ============================================================================
   DEMANDAS DE FATURAMENTO — ambiente do setor (contratos, producao, exames,
   citopatologico, BPA, transporte) por competencia.  2026-06-13
   ========================================================================== */
.fatd-wrap { display: flex; flex-direction: column; gap: 18px; }

/* Barra de filtros */
.fatd-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e5d9);
  border-radius: 14px; padding: 14px 16px;
}
.fatd-filter { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.fatd-filter-grow { flex: 1; min-width: 200px; }
.fatd-filter > label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted, #5d6450); text-transform: uppercase; letter-spacing: 0.02em; }
.fatd-filter > input, .fatd-filter > select {
  padding: 9px 11px; border: 1px solid var(--border, #e0e7d4); border-radius: 9px;
  font-size: 0.88rem; background: var(--field-bg, #fff); color: var(--text-main, #24281d);
}
.fatd-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* KPIs */
.fatd-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1000px) { .fatd-kpis { grid-template-columns: repeat(2, 1fr); } }
.fatd-kpi {
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e5d9);
  border-left: 4px solid #394820; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(32,38,23,0.05);
}
.fatd-kpi.k-money { border-left-color: #1e8e5a; }
.fatd-kpi.k-audit { border-left-color: #f59e0b; }
.fatd-kpi.k-ok { border-left-color: #22c55e; }
.fatd-kpi.k-glosa { border-left-color: #ef4444; }
.fatd-kpi-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted, #5d6450); }
.fatd-kpi-value { font-size: 1.45rem; font-weight: 800; color: var(--text-main, #1f2416); margin: 4px 0 2px; }
.fatd-kpi-hint { font-size: 0.74rem; color: var(--text-muted, #7b846d); }

/* Pipeline de status */
.fatd-pipeline {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px;
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e5d9);
  border-radius: 14px; padding: 14px 16px;
}
.fatd-pipe-step {
  flex: 1; min-width: 92px; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 6px; border-radius: 10px; background: var(--surface-2, #f2f6ed);
  border: 1px solid transparent;
}
.fatd-pipe-n { font-size: 1.2rem; font-weight: 800; color: var(--text-main, #1f2416); }
.fatd-pipe-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted, #5d6450); text-align: center; }
.fatd-pipe-arrow { display: flex; align-items: center; font-size: 1.4rem; color: var(--border-strong, #bbc4ac); font-weight: 700; }
/* tintas suaves por etapa */
.fatd-pipe-step.st-receb { background: rgba(59,130,246,0.10); }
.fatd-pipe-step.st-audit { background: rgba(245,158,11,0.12); }
.fatd-pipe-step.st-bpa { background: rgba(99,102,241,0.10); }
.fatd-pipe-step.st-tram { background: rgba(99,134,37,0.10); }
.fatd-pipe-step.st-compras { background: rgba(20,184,166,0.10); }
.fatd-pipe-step.st-notas { background: rgba(6,182,212,0.10); }
.fatd-pipe-step.st-ok { background: rgba(34,197,94,0.12); }

/* Graficos */
.fatd-charts { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }
@media (max-width: 900px) { .fatd-charts { grid-template-columns: 1fr; } }
.fatd-chart-card {
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e5d9);
  border-radius: 14px; padding: 14px 16px;
}
.fatd-chart-title { font-size: 0.84rem; font-weight: 800; color: var(--text-main, #1f2416); margin-bottom: 8px; }
.fatd-chart-box { position: relative; height: 230px; }

/* Tabela */
.fatd-table-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e5d9); border-radius: 14px; overflow: hidden; }
.fatd-table-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border, #e6ebdf); }
.fatd-table-head strong { font-size: 0.95rem; color: var(--text-main, #1f2416); }
.fatd-count { font-size: 0.76rem; color: var(--text-muted, #7b846d); }
.fatd-table-wrap { overflow-x: auto; }
.fatd-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.fatd-table th {
  text-align: left; padding: 11px 14px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted, #5d6450);
  background: var(--surface-2, #f5f8f1); border-bottom: 1px solid var(--border, #e6ebdf); white-space: nowrap;
}
.fatd-table th.num, .fatd-table td.num { text-align: right; }
.fatd-table th.acts, .fatd-table td.acts { text-align: center; }
.fatd-table td { padding: 11px 14px; border-bottom: 1px solid var(--border, #ecefe5); color: var(--text-main, #292d21); vertical-align: middle; }
.fatd-table tbody tr:hover { background: var(--surface-2, #f8faf4); }
.fatd-titulo { font-weight: 600; color: var(--text-main, #1f2416); }
.fatd-obs { font-size: 0.74rem; color: var(--text-muted, #7b846d); margin-top: 2px; }
.fatd-tipo { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2, #e9eee1); color: var(--text-muted, #5d6450); }
.fatd-contrato { font-size: 0.8rem; margin-top: 3px; color: var(--text-main, #3b4130); }
.fatd-muted { color: var(--text-muted, #9ea690); font-style: italic; }
.fatd-valor { font-weight: 700; white-space: nowrap; }
.fatd-empty { text-align: center; color: var(--text-muted, #7b846d); padding: 26px 14px; }

/* Badge de status (geral) */
.fatd-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.fatd-badge.st-receb { background: #eef4fd; color: #1d4ed8; }
.fatd-badge.st-audit { background: #fef3c7; color: #b45309; }
.fatd-badge.st-bpa { background: #e0e7ff; color: #4338ca; }
.fatd-badge.st-tram { background: #ede9fe; color: #4a5f25; }
.fatd-badge.st-compras { background: #ccfbf1; color: #0f766e; }
.fatd-badge.st-notas { background: #cffafe; color: #0e7490; }
.fatd-badge.st-ok { background: #eafaf0; color: #1f8a5b; }
.fatd-badge.st-glosa { background: #fdeef0; color: #b91c1c; }

/* Select de status na linha (colorido conforme etapa) */
.fatd-status-sel {
  padding: 5px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-position: right 8px center; padding-right: 22px;
}
.fatd-status-sel.st-receb { background-color: #eef4fd; color: #1d4ed8; }
.fatd-status-sel.st-audit { background-color: #fef3c7; color: #b45309; }
.fatd-status-sel.st-bpa { background-color: #e0e7ff; color: #4338ca; }
.fatd-status-sel.st-tram { background-color: #ede9fe; color: #4a5f25; }
.fatd-status-sel.st-compras { background-color: #ccfbf1; color: #0f766e; }
.fatd-status-sel.st-notas { background-color: #cffafe; color: #0e7490; }
.fatd-status-sel.st-ok { background-color: #eafaf0; color: #1f8a5b; }
.fatd-status-sel.st-glosa { background-color: #fdeef0; color: #b91c1c; }

/* Acoes da linha */
.fatd-row-acts { display: inline-flex; gap: 6px; }
.fatd-iconbtn {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border, #e0e7d4);
  background: var(--field-bg, #fff); color: var(--text-muted, #5d6450); cursor: pointer;
  font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.fatd-iconbtn:hover { background: var(--surface-2, #edf2e4); color: var(--text-main, #1f2416); }
.fatd-iconbtn.adv { color: #1f8a5b; font-size: 1.3rem; font-weight: 800; }
.fatd-iconbtn.adv:hover { background: #eafaf0; }
.fatd-iconbtn.del:hover { background: #fdeef0; color: #b91c1c; border-color: #f7d3d8; }

/* Modal */
.fatd-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border, #e6ebdf); }

/* ============================ MODO ESCURO ============================ */
body.theme-dark .fatd-filters,
body.theme-dark .fatd-kpi,
body.theme-dark .fatd-pipeline,
body.theme-dark .fatd-chart-card,
body.theme-dark .fatd-table-card { background: var(--card-bg, #1c1e17); border-color: var(--border, #30332b); }
body.theme-dark .fatd-filter > input,
body.theme-dark .fatd-filter > select { background: var(--field-bg, #12140f); border-color: var(--border, #35392f); color: var(--text-main, #e0e5d8); }
body.theme-dark .fatd-pipe-step { background: rgba(255,255,255,0.04); }
body.theme-dark .fatd-kpi-value, body.theme-dark .fatd-pipe-n, body.theme-dark .fatd-titulo,
body.theme-dark .fatd-chart-title, body.theme-dark .fatd-table-head strong { color: #e6ecdb; }
body.theme-dark .fatd-table th { background: #1e2119; color: #adb69f; border-color: #30332b; }
body.theme-dark .fatd-table td { color: #d4dbc8; border-color: #282b22; }
body.theme-dark .fatd-table tbody tr:hover { background: rgba(255,255,255,0.03); }
body.theme-dark .fatd-tipo { background: #282b22; color: #adb69f; }
body.theme-dark .fatd-iconbtn { background: #1e2119; border-color: #35392f; color: #adb69f; }
body.theme-dark .fatd-iconbtn:hover { background: #2c3025; color: #e6ecdb; }
/* badges/selects mantem cor viva no escuro com leve ajuste de fundo */
body.theme-dark .fatd-status-sel,
body.theme-dark .fatd-badge { filter: brightness(0.92); }

/* ============================================================================
   Faturamento — navegacao por AREA (sidebar) + Visao geral.  2026-06-13
   ========================================================================== */
.fat-body { display: flex; gap: 18px; align-items: flex-start; margin-top: 14px; }
.fat-main { flex: 1; min-width: 0; }
.fat-sidebar {
  width: 236px; flex-shrink: 0; background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e0e5d9); border-radius: 14px; padding: 12px;
  position: sticky; top: 8px;
}
.fat-sidebar.hidden { display: none; }
@media (max-width: 900px) { .fat-body { flex-direction: column; } .fat-sidebar { width: 100%; position: static; } }

.fat-side-title { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--text-muted, #7b846d); font-weight: 800; padding: 4px 10px 10px; }
.fat-side-nav { display: flex; flex-direction: column; gap: 3px; }
.fat-side-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: var(--text-main, #3b4130); font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.fat-side-item i { width: 17px; height: 17px; flex-shrink: 0; }
.fat-side-item:hover { background: var(--surface-2, #f0f4e9); }
.fat-side-item.active { background: #e7eae2; color: #394820; border-color: #d1d7c7; font-weight: 800; }
.fat-side-children { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 30px; }
.fat-side-child {
  text-align: left; padding: 7px 11px; border-radius: 8px; border: none; background: transparent;
  color: var(--text-muted, #5d6450); font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.fat-side-child:hover { background: var(--surface-2, #f0f4e9); color: var(--text-main, #3b4130); }
.fat-side-child.active { color: #394820; font-weight: 800; background: #eff2ea; }

/* Cabecalho da area */
.fat-area-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fat-area-title { margin: 0 0 2px; font-size: 1.18rem; font-weight: 800; color: var(--text-main, #1f2416); }

/* Chips de contrato */
.fatd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fatd-chip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border, #e0e7d4);
  background: var(--card-bg, #fff); color: var(--text-muted, #5d6450); font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.fatd-chip:hover { background: var(--surface-2, #f0f4e9); }
.fatd-chip.active { background: #394820; color: #fff; border-color: #394820; }

/* Visao geral */
.fat-visao-head { margin-bottom: 2px; }
.fat-visao-title { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--text-main, #1f2416); }
.fat-visao-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }
@media (max-width: 900px) { .fat-visao-cols { grid-template-columns: 1fr; } }
.fat-visao-areas-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e0e5d9); border-radius: 14px; padding: 14px 16px; }
.fat-visao-areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
@media (max-width: 560px) { .fat-visao-areas { grid-template-columns: 1fr; } }
.fat-visao-area { text-align: left; border: 1px solid var(--border, #e0e5d9); border-radius: 12px; padding: 12px; background: var(--surface-2, #f5f8f1); cursor: pointer; transition: border-color .12s; }
.fat-visao-area:hover { border-color: #394820; }
.fat-visao-area-name { font-weight: 800; color: var(--text-main, #1f2416); font-size: 0.9rem; }
.fat-visao-area-n { font-size: 0.76rem; color: var(--text-muted, #7b846d); margin-top: 2px; }
.fat-visao-area-val { font-size: 1.08rem; font-weight: 800; color: #1e8e5a; margin-top: 6px; }
.fat-visao-area-foot { display: flex; gap: 12px; margin-top: 6px; font-size: 0.72rem; font-weight: 700; }
.fat-visao-area-foot .ok { color: #1f8a5b; }
.fat-visao-area-foot .gl { color: #b91c1c; }
.fat-visao-transporte {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  border: 1px solid var(--border, #e0e5d9); border-radius: 14px; padding: 14px 18px;
  background: var(--card-bg, #fff); cursor: pointer; transition: border-color .12s;
}
.fat-visao-transporte:hover { border-color: #394820; }
.fat-visao-tp-metrics { display: flex; gap: 24px; margin-left: auto; }
.fat-visao-tp-metrics div { display: flex; flex-direction: column; }
.fat-visao-tp-metrics strong { font-size: 1.1rem; color: var(--text-main, #1f2416); }
.fat-visao-tp-metrics span { font-size: 0.72rem; color: var(--text-muted, #7b846d); }
.fat-visao-transporte > i { width: 20px; height: 20px; color: var(--text-muted, #9ea690); flex-shrink: 0; }

/* ===== MODO ESCURO ===== */
body.theme-dark .fat-sidebar,
body.theme-dark .fat-visao-areas-card,
body.theme-dark .fat-visao-area,
body.theme-dark .fat-visao-transporte,
body.theme-dark .fatd-chip { background: var(--card-bg, #1c1e17); border-color: var(--border, #30332b); }
body.theme-dark .fat-side-item { color: #d4dbc8; }
body.theme-dark .fat-side-item:hover, body.theme-dark .fat-side-child:hover { background: rgba(255,255,255,0.05); }
body.theme-dark .fat-side-item.active { background: #2d3126; color: #cbdab1; border-color: #3e4336; }
body.theme-dark .fat-side-child { color: #adb69f; }
body.theme-dark .fat-side-child.active { background: #2d3126; color: #cbdab1; }
body.theme-dark .fat-area-title, body.theme-dark .fat-visao-title,
body.theme-dark .fat-visao-area-name, body.theme-dark .fat-visao-tp-metrics strong { color: #e6ecdb; }
body.theme-dark .fat-visao-area { background: rgba(255,255,255,0.04); }
body.theme-dark .fatd-chip { color: #adb69f; }
body.theme-dark .fatd-chip.active { background: #515f38; color: #fff; border-color: #515f38; }
body.theme-dark .fat-visao-area:hover, body.theme-dark .fat-visao-transporte:hover { border-color: #515f38; }

/* ============================================================================
   Faturamento — identidade por area + vigencia.  2026-06-13
   ========================================================================== */
.fat-area-head-left { display: flex; align-items: center; gap: 13px; }
.fat-area-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--area-color, #394820); color: #fff;
  box-shadow: 0 4px 12px -4px var(--area-color, #394820);
}
.fat-area-icon i { width: 22px; height: 22px; }

/* reforco da cor da area na tabela e no pipeline */
.fatd-wrap .fatd-table-card { border-top: 3px solid var(--area-color, #394820); }
.fatd-wrap .fat-area-title { color: var(--area-color, #1f2416); }

/* Vigencia na celula de competencia */
.fatd-vig { font-size: 0.74rem; color: var(--text-muted, #7b846d); margin-top: 3px; white-space: nowrap; }

body.theme-dark .fatd-wrap .fat-area-title { color: #e6ecdb; }
body.theme-dark .fatd-vig { color: #8f987f; }

/* ============================================================================
   Faturamento — campos especificos por area (modal + tabela).  2026-06-13
   ========================================================================== */
.fat-extra-sep {
  font-size: 0.72rem; font-weight: 800; color: var(--text-muted, #5d6450);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 4px 0 10px; padding-top: 12px; border-top: 1px dashed var(--border, #e0e7d4);
}
.fat-extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .fat-extra-grid { grid-template-columns: 1fr; } }
.fat-extra-grid > div { display: flex; flex-direction: column; gap: 5px; }
.fat-extra-grid label { font-size: 0.78rem; font-weight: 600; color: var(--text-main, #4d5243); }
.fat-extra-grid input, .fat-extra-grid select {
  padding: 8px 10px; border: 1px solid var(--border, #e0e7d4); border-radius: 8px;
  background: var(--field-bg, #fff); color: var(--text-main, #24281d); font-size: 0.88rem;
}

/* Resumo dos campos da area na tabela */
.fatd-exwrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.fatd-ex {
  font-size: 0.71rem; color: var(--text-muted, #5d6450);
  background: var(--surface-2, #edf2e4); border: 1px solid var(--border, #e6ebdf);
  border-radius: 6px; padding: 2px 8px;
}
.fatd-ex b { font-weight: 700; color: var(--text-main, #3b4130); }

body.theme-dark .fat-extra-sep { color: #adb69f; border-color: #35392f; }
body.theme-dark .fat-extra-grid label { color: #d4dbc8; }
body.theme-dark .fat-extra-grid input, body.theme-dark .fat-extra-grid select {
  background: #12140f; border-color: #35392f; color: #e0e5d8;
}
body.theme-dark .fatd-ex { background: #282b22; border-color: #35392f; color: #adb69f; }
body.theme-dark .fatd-ex b { color: #d4dbc8; }

/* ===== Procedimentos: acompanhantes e variacoes (pai/filho) ===== */
.reg-proc-relations{margin-top:12px;padding-top:10px;border-top:1px solid #e0e7d4;}
.reg-rel-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.reg-rel-chip{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;border-radius:14px;padding:3px 6px 3px 10px;font-size:12px;}
.reg-rel-chip strong{font-weight:700;}
.reg-rel-chip button{display:inline-flex;align-items:center;justify-content:center;border:0;background:#c7d2fe;color:#3730a3;border-radius:50%;width:18px;height:18px;cursor:pointer;padding:0;}
.reg-rel-chip button:hover{background:#a5b4fc;}
.reg-rel-empty{font-size:12px;color:#8d9977;padding:6px 0;}
.reg-rel-vars{display:flex;flex-direction:column;gap:6px;margin:8px 0;}
.reg-rel-var{display:flex;gap:6px;align-items:center;}
.reg-rel-var input[type=text]{flex:1;min-width:0;}
.reg-rel-ativo{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#4d5243;white-space:nowrap;}
.reg-rel-chip button i,.reg-rel-var .btn i{width:13px;height:13px;}

.reg-proc-flag-rel{background:#eef2ff;color:#3730a3;border-color:#c7d2fe;}

/* ===== Painel admin: menu lateral em modulos colapsaveis ===== */
#view-admin .adm-body{display:flex;gap:16px;align-items:flex-start;}
#view-admin .adm-side{flex:0 0 232px;max-width:232px;position:sticky;top:12px;}
#view-admin .adm-content{flex:1 1 auto;min-width:0;}
#view-admin .adm-nav-groups{display:flex;flex-direction:column;gap:2px;background:#f7f9f4;border:1px solid #e0e7d4;border-radius:14px;padding:8px 12px;}
#view-admin .adm-nav-groups .adm-tab{display:flex;align-items:center;gap:8px;width:100%;text-align:left;justify-content:flex-start;padding:8px 10px;border-radius:8px;white-space:normal;margin:1px 0;}
#view-admin .adm-nav-groups .adm-tab:hover{background:#eef2f7;color:#212717;}
#view-admin .adm-nav-groups .adm-tab.active{background:var(--primary);color:#fff;box-shadow:none;}
#view-admin .adm-nav-groups .adm-tab.active svg{color:#fff;}
@media (max-width:900px){
  #view-admin .adm-body{flex-direction:column;}
  #view-admin .adm-side{flex:1 1 auto;max-width:none;width:100%;position:static;}
}

/* ===== Painel DEV/Master: menu lateral em modulos colapsaveis ===== */
#view-master .master-menu-group{display:block;}
#view-master .master-menu-group > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;margin-top:4px;font-size:0.7rem;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:#8d9977;}
#view-master .master-menu-group > summary::-webkit-details-marker{display:none;}
#view-master .master-menu-group > summary::after{content:"\25be";transition:transform .16s ease;color:#8d9977;font-size:0.8rem;}
#view-master .master-menu-group:not([open]) > summary::after{transform:rotate(-90deg);}
#view-master .master-menu-group .master-menu-item{width:100%;margin-top:4px;}