/* RIO X7 — AI AGENCY OS: a central operacional da Rio X7 Comunicação.
   Só CSS local (nenhuma fonte, imagem ou origem externa) e nenhum estilo inline (o CSP os barra): tudo por classe. */

:root {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --text: #182230;
  --muted: #5a6577;
  --line: #dde2ea;
  --line-strong: #c3cbd7;
  --brand: #a3e635;          /* verde-lima Rio X7: destaque (botões, item ativo, foco) */
  --brand-strong: #84cc16;
  --brand-soft: #ecfccb;
  --brand-ink: #3f6212;      /* o lima escurecido: texto e links sobre fundo claro (contraste AA) */
  --primary: #3f6212;
  --primary-strong: #365314;
  --primary-text: #0b1220;   /* texto sobre o lima */
  --danger: #b42318;
  --ok-bg: #e2f4e8;
  --ok-text: #14602b;
  --warn-bg: #fdf0d5;
  --warn-text: #7a4b00;
  --bad-bg: #fbe4e2;
  --bad-text: #8f1d14;
  --neutral-bg: #e8ecf2;
  --neutral-text: #344054;
  --info-bg: #e3edfb;
  --info-text: #174a99;
  --sidebar-bg: #0b1220;
  --sidebar-text: #c8d3e4;
  --sidebar-muted: #8494ad;
  --sidebar-accent: #a3e635;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 650; }
h4 { font-size: 15px; }
p { margin: 0 0 8px; }
a { color: var(--primary); }

.loading { padding: 24px; color: var(--muted); }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; }

/* --- botões --------------------------------------------------------- */
.btn {
  font: inherit;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
.btn:hover:not(:disabled) { background: #f4f6fa; border-color: #a9b4c4; }
.btn.primary { background: var(--brand); border-color: var(--brand-strong); color: var(--primary-text); }
.btn.primary:hover:not(:disabled) { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #ffffff; }
.btn.danger:hover:not(:disabled) { background: #8f1d14; border-color: #8f1d14; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand-strong); color: var(--primary-text); }
.promotion { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.link-button {
  font: inherit;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

/* --- marca ---------------------------------------------------------- */
.brand-block { display: flex; flex-direction: column; gap: 2px; }
.brand-name { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; color: #ffffff; }
.brand-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; color: var(--sidebar-accent); }
.brand-block.on-light .brand-name { color: var(--text); font-size: 28px; }
.brand-block.on-light .brand-sub { color: var(--primary); }

/* --- login ---------------------------------------------------------- */
.centered { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.login { width: 100%; max-width: 400px; padding: 32px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(16, 24, 40, 0.08); }
.login .brand-block { margin-bottom: 14px; }
.login .muted { margin-bottom: 4px; }
.login-hint { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.login-title { margin: 0 0 6px; font-size: 18px; }
.login-links { margin: -2px 0 12px; font-size: 14px; }
.login-links .link-button { color: var(--primary); }
.login.recovery .login-links { margin: 14px 0 0; }
.recovery-form .btn.primary { width: 100%; }
.login.recovery .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.login.recovery .actions .btn { flex: 1 1 140px; }
@media (max-width: 480px) { .login { padding: 24px 18px; } }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field label { font-weight: 600; }
input, textarea {
  font: inherit;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
}
input:focus, textarea:focus, select:focus { border-color: var(--primary); }

/* --- estrutura: menu lateral + conteúdo (CRM 5.0, Fase 2A) ---------- */
:root { --sidebar-w: 264px; --sidebar-w-collapsed: 76px; }
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.shell[data-sidebar="collapsed"] { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 12px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
}
.sidebar .brand-block { padding: 0 6px; }
.sidebar :focus-visible { outline-color: #bef264; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.icon { display: block; width: 20px; height: 20px; flex: none; }
.icon-missing { width: 20px; height: 20px; }
.sidebar-toggle, .sidebar-close, .topbar-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-text);
  cursor: pointer;
}
.sidebar-toggle:hover, .sidebar-close:hover, .topbar-menu:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.sidebar-close, .topbar, .nav-backdrop { display: none; }

/* só a navegação rola (rodapé com o usuário e o Sair fica sempre à vista); com o menu recolhido no desktop volta a ser "visible" para as dicas não serem cortadas */
.nav { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
.nav-list, .nav-sub { margin: 0; padding: 0; list-style: none; }
.nav-list { display: flex; flex-direction: column; gap: 4px; }
.nav-item { position: relative; }
.nav-row { display: flex; align-items: stretch; gap: 2px; }
.nav-link {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav-link:hover:not(.soon) { background: rgba(255, 255, 255, 0.07); color: #ffffff; }
.nav-link[aria-current="page"] { background: rgba(255, 255, 255, 0.13); border-left-color: var(--sidebar-accent); color: #ffffff; }
.nav-item.is-branch-active > .nav-row > .nav-link:not([aria-current="page"]) { color: #ffffff; }
.nav-link.soon { flex-direction: column; align-items: flex-start; gap: 3px; color: var(--sidebar-muted); font-weight: 500; cursor: default; }
.nav-link.soon .nav-label { flex: none; max-width: 100%; }
.nav-link.is-soon:not([aria-current="page"]) { color: #a3b3cc; font-weight: 500; }
.nav-soon { flex: none; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--sidebar-muted); font-size: 10px; font-weight: 600; white-space: nowrap; }
.nav-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; }
.nav-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nav-chevron { display: inline-flex; flex: none; }
.nav-chevron .icon, .nav-arrow .icon { width: 16px; height: 16px; transition: transform 0.15s ease; }
.nav-toggle[aria-expanded="true"] .nav-chevron .icon, .nav-arrow[aria-expanded="true"] .icon { transform: rotate(90deg); }
.nav-arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-muted);
  cursor: pointer;
}
.nav-arrow:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }

/* a hierarquia: cada nível entra mais para dentro, com uma linha guia e mais respiro entre os grupos */
.nav-sub { margin: 2px 0 6px 21px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.nav-sub .nav-link { padding: 7px 10px; font-size: 14px; font-weight: 500; }
.nav-sub .nav-sub { margin-left: 14px; }
.nav-sub .nav-sub .nav-link { font-size: 13.5px; }
.nav-list > .nav-item + .nav-item { margin-top: 2px; }

.who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.who-name { font-weight: 700; color: #ffffff; overflow-wrap: anywhere; }
.sidebar .badge.neutral { background: rgba(255, 255, 255, 0.12); color: #dbe4f3; }
.sidebar .btn.secondary { align-self: stretch; background: transparent; border-color: rgba(255, 255, 255, 0.25); color: #ffffff; }
.sidebar .btn.secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); }
.logout { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.logout .icon { width: 18px; height: 18px; }
.logout-icon { display: none; }

.content { min-width: 0; max-width: 1280px; width: 100%; padding: 28px 32px 40px; }
.page-head { margin-bottom: 20px; }
.page-head h2 { margin-bottom: 2px; font-size: 26px; }
.page-head p { margin: 0; }

/* --- mensagens e selos ---------------------------------------------- */
.message { min-height: 1.4em; margin: 0 0 10px; }
.message.error { padding: 9px 12px; border-radius: 8px; background: var(--bad-bg); color: var(--bad-text); }
.message.success { padding: 9px 12px; border-radius: 8px; background: var(--ok-bg); color: var(--ok-text); }
.message.info { padding: 9px 12px; border-radius: 8px; background: var(--neutral-bg); color: var(--neutral-text); }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok-text); }
.badge.warn { background: var(--warn-bg); color: var(--warn-text); }
.badge.bad { background: var(--bad-bg); color: var(--bad-text); }
.badge.neutral { background: var(--neutral-bg); color: var(--neutral-text); }

.empty-state { margin: 8px 0 0; padding: 18px 14px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); text-align: center; }

/* --- aprovações ----------------------------------------------------- */
.approvals-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.approvals-head h2 { margin: 0; }
.pending-count { margin: 0; color: var(--muted); flex: 1; }

.approvals-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.approvals-list, .approvals-detail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }

.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.list th { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
table.list tbody tr:hover td { background: #f8fafc; }
table.list tr.selected td { background: var(--brand-soft); }

.fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0 0 14px; }
.fields dt { color: var(--muted); font-weight: 600; }
.fields dd { margin: 0; overflow-wrap: anywhere; }
ul.plain, ol.plain { margin: 0; padding-left: 18px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.confirm { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.confirm label { font-weight: 600; }

/* ====================================================================
   CRM, Visão Geral e agentes
   ==================================================================== */

.badge.info { background: var(--info-bg); color: var(--info-text); }

a.btn { display: inline-block; text-decoration: none; }
select {
  font: inherit;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
}
input[type="checkbox"], input[type="radio"] { width: auto; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
textarea { resize: vertical; }

/* --- visão geral: indicadores, pipeline e atividade ------------------ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.card h3 { margin-bottom: 12px; }
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.stat { margin: 0 0 4px; font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.kpi-sub { margin: 0; font-size: 13.5px; }
.kpi-link { margin-top: 10px; font-weight: 600; font-size: 14px; }
.kpi-error { grid-column: 1 / -1; }

.overview-panels { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.panel-card h3 { margin-bottom: 2px; }
.panel-card > .muted { margin-bottom: 12px; font-size: 13.5px; }

ul.pipeline { list-style: none; padding-left: 0; display: grid; gap: 8px; }
.pipeline-row { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) 32px; align-items: center; gap: 10px; }
.pipeline-row .badge { justify-self: start; }
.pipeline-row.is-empty .badge { opacity: 0.6; }
.pipeline-count { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pipeline-row.is-empty .pipeline-count { color: var(--muted); font-weight: 500; }
progress.pipeline-bar { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 999px; background: #e6eaf0; overflow: hidden; }
progress.pipeline-bar::-webkit-progress-bar { background: #e6eaf0; border-radius: 999px; }
progress.pipeline-bar::-webkit-progress-value { border-radius: 999px; background: #8b97a8; }
progress.pipeline-bar::-moz-progress-bar { border-radius: 999px; background: #8b97a8; }
progress.tone-info::-webkit-progress-value { background: #3b6fd6; }
progress.tone-info::-moz-progress-bar { background: #3b6fd6; }
progress.tone-warn::-webkit-progress-value { background: #d99a1e; }
progress.tone-warn::-moz-progress-bar { background: #d99a1e; }
progress.tone-ok::-webkit-progress-value { background: #2f9e5b; }
progress.tone-ok::-moz-progress-bar { background: #2f9e5b; }
progress.tone-bad::-webkit-progress-value { background: #d64545; }
progress.tone-bad::-moz-progress-bar { background: #d64545; }

ol.activity { list-style: none; padding-left: 0; display: grid; gap: 0; }
.activity-row { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.activity-row:last-child { border-bottom: 0; }
.activity-title { font-weight: 650; overflow-wrap: anywhere; }
.activity-change .badge { white-space: normal; }
.activity-meta { font-size: 13px; }

/* --- agentes IA ------------------------------------------------------ */
.notice { margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--neutral-bg); }
.notice p { margin: 0 0 6px; }
.notice.warn { background: var(--warn-bg); color: var(--warn-text); }
.notice.bad { background: var(--bad-bg); color: var(--bad-text); border-color: #f0b8b3; }
ul.agent-grid { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.agent-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.agent-card h3 { margin: 0; }
.agent-desc { flex: 1; margin: 0 0 6px; }

/* --- CRM: lista ----------------------------------------------------- */
.crm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.crm-head h2 { margin: 0; }
.crm-count { flex: 1; margin: 0; }
.filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)) auto;
  gap: 10px 12px;
  align-items: end;
  margin-bottom: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.filters .field { margin-bottom: 0; }
.crm-results { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.crm-results > .message, .crm-results > .actions { margin-top: 10px; }
table.crm-table td.empty { color: var(--muted); }

/* --- CRM: ficha ----------------------------------------------------- */
.back { margin: 0 0 10px; }
.ficha-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.ficha-head h2 { margin: 0; }
.ficha-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.ficha-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ficha-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.ficha-block h3 { margin-bottom: 10px; }
.multiline { white-space: pre-wrap; }
.timeline { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.timeline li { padding-left: 10px; border-left: 3px solid var(--line); }
.timeline-reason { margin: 2px 0 0; }

/* --- CRM 4.0.6: lista persistente + ficha em gaveta ------------------- */
.crm-view [hidden] { display: none; }
.crm-view .crm-results { padding: 0; border: 0; box-shadow: none; background: none; }
.crm-view .toolbar-tools .select-field { flex: 0 1 170px; }
.crm-view .filters-clear { margin-bottom: 0; }
.crm-ficha { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.crm-ficha .ficha-head:empty, .crm-ficha .ficha-notice:empty, .crm-ficha .ficha-panel:empty { display: none; }
.crm-ficha .ficha-head { margin-bottom: 0; }
.crm-ficha .ficha-blocks { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 0; }
.crm-ficha .ficha-block { padding: 0; border: 0; box-shadow: none; background: none; }
.crm-ficha .panel { margin-bottom: 0; }
.crm-ficha .ficha-tabs .tab-panels { padding-top: 14px; }
.overlay-footer .ficha-actions { margin: 0; }
/* edição segura (4.0.6.3): abas de campos, rodapé fixo com o estado de salvamento */
.edit-intro { margin: 0 0 4px; font-size: 13px; }
.crm-ficha .field-form-tabs .tab-panels { padding-top: 12px; }
.edit-tab-body { display: grid; gap: 4px; min-width: 0; }
.edit-footer { width: 100%; align-items: center; }
.edit-status { margin-right: auto; font-size: 13px; min-height: 1em; }
.edit-status.dirty { color: var(--warn-text); font-weight: 600; }
.edit-status:empty { display: none; }
@media (max-width: 560px) {
  .crm-view .toolbar-tools .select-field { flex: 1 1 100%; }
  .overlay-footer .ficha-actions .btn, .edit-footer .btn { flex: 1 1 100%; }
  .edit-status { flex-basis: 100%; }
}

/* --- CRM: formulários e painéis ------------------------------------- */
.panel { display: grid; gap: 12px; margin-bottom: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.form-block { min-width: 0; margin: 0 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.form-block legend { padding: 0 6px; font-weight: 700; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; }
.form-grid .field { margin-bottom: 0; }
.field.wide { grid-column: 1 / -1; }
.field .label { font-weight: 600; }
.field.checkbox { display: flex; align-items: flex-start; gap: 8px; }
.field.checkbox label { font-weight: 400; }
.field-error { margin: 0; color: var(--bad-text); font-size: 13px; }
.field-error:empty, .panel-message:empty, .crm-message:empty { display: none; }
.hint { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
/* Campo de seleção assistida dos catálogos (CRM 5.0, Fase 2B-3.1): a lista oficial (select) OU o texto livre, mais o aviso (fora do catálogo, grafia, desativado, catálogo vazio ou indisponível) com as ações. */
.catalog-field { display: grid; gap: 6px; min-width: 0; }
.catalog-field [hidden] { display: none; }
.catalog-field-note { display: grid; gap: 6px; justify-items: start; margin: 0; color: var(--muted); font-size: 13px; }
.catalog-field-note:empty { display: none; }
.catalog-field-message, .catalog-field-value { overflow-wrap: anywhere; }
/* Um campo com aviso fica mais alto que o vizinho: a grade do formulário alinha pelo topo (senão o campo vizinho esticaria). */
.field-form .form-grid { align-items: start; }
.catalog-field-note .btn { min-height: 36px; }
/* O aviso ÚNICO de catálogos indisponíveis, no início do formulário (em vez de um aviso igual em cada campo). */
.catalog-notice { display: grid; gap: 8px; justify-items: start; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--info-bg); color: var(--info-text); font-size: 13.5px; }
.catalog-notice[hidden] { display: none; }
.catalog-notice-message { overflow-wrap: anywhere; }
.catalog-notice .btn { min-height: 36px; }
select[aria-invalid="true"] { border-color: var(--danger); }
@media (max-width: 760px) {
  .catalog-field-note .btn, .catalog-notice .btn { min-height: 40px; }
}
.form-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.message.warn { padding: 9px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); }

/* --- telas menores -------------------------------------------------- */
@media (max-width: 1180px) {
  .approvals-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .field:first-child { grid-column: 1 / -1; }
  .overview-panels { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .approvals-body { grid-template-columns: minmax(0, 1fr); }

  /* O menu lateral sai da tela e abre pelo botão da barra de cima; o conteúdo usa a largura toda. */
  .shell, .shell[data-sidebar="collapsed"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--sidebar-bg); color: #ffffff; }
  .topbar .brand-block { padding: 0; flex-direction: row; align-items: baseline; gap: 8px; }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    width: min(320px, 86vw);
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
    box-shadow: 8px 0 24px rgba(11, 18, 32, 0.35);
  }
  .shell[data-nav-open="true"] .sidebar { transform: none; visibility: visible; transition: transform 0.2s ease; }
  .shell[data-nav-open="true"] .nav-backdrop { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; background: rgba(11, 18, 32, 0.55); }
  .sidebar-toggle { display: none; }
  .sidebar-close { display: inline-flex; }
  .nav-link { padding: 11px 10px; }
  .nav-arrow { width: 40px; }
  .content { padding: 18px 14px 32px; }
}

@media (max-width: 760px) {
  .filters { grid-template-columns: minmax(0, 1fr); }
  .ficha-blocks { grid-template-columns: minmax(0, 1fr); }
  .page-head h2 { font-size: 22px; }
  .stat { font-size: 30px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi-grid .card { padding: 14px; }
  .kpi-title { font-size: 12px; }
  .pipeline-row { grid-template-columns: minmax(110px, 140px) minmax(0, 1fr) 28px; }
  .fields { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fields dd { margin-bottom: 8px; }

  /* A tabela do CRM vira uma lista de cartões: um por registro, com o rótulo de cada campo. */
  table.crm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.crm-table, table.crm-table tbody, table.crm-table tr, table.crm-table td { display: block; width: 100%; }
  table.crm-table tr { margin-bottom: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff; }
  table.crm-table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 0; }
  table.crm-table td::before { flex: 0 0 38%; content: attr(data-label); color: var(--muted); font-weight: 600; }
  table.crm-table td.empty { display: none; }
}

/* Kanban de Funis (reestruturação Prospecção/CRM/Funis, Etapa "Funis 2"). */
.funnel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.funnel-head h2 { margin-right: auto; }
.funnel-head select, .funnel-head input[type="search"] { min-height: 38px; }
.funnel-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.funnel-column { flex: 0 0 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 70vh; }
.funnel-column-title { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.funnel-column-count { background: var(--neutral-bg); color: var(--neutral-text); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.funnel-column-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.funnel-card { background: #ffffff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.funnel-card[data-busy="true"] { opacity: 0.6; }
.funnel-card-title { font-weight: 600; text-decoration: none; color: inherit; }
.funnel-card-title:hover { text-decoration: underline; }
.funnel-card-line { margin: 0; font-size: 12.5px; }
.funnel-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.btn.small { padding: 4px 8px; font-size: 12.5px; }
.funnel-add-panel { margin-bottom: 14px; }
.funnel-add-results { max-height: 240px; overflow-y: auto; }
.funnel-add-results li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }

/* Quadro de Negociações (CRM 5.0, Fase D1): colunas por etapa, cartões de negociação, totais vindos do servidor */
.funnel-board-wrap { max-width: 100%; }
.funnel-name { margin: 0; font-size: 13px; }
.funnel-column-title { gap: 8px; }
.funnel-column-total { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.funnel-empty { margin: 0; font-size: 13px; }
.funnel-card-title { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; font-weight: 600; overflow-wrap: anywhere; }
.funnel-card-value { font-weight: 600; overflow-wrap: anywhere; }
.funnel-card-actions select { max-width: 100%; min-height: 32px; }
.negotiation-detail { display: grid; gap: 4px; }
.negotiation-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.negotiation-history li { display: grid; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.negotiation-form .negotiation-term { margin-top: 4px; }
.negotiation-form .negotiation-term-other { margin: 4px 0 0; }
.negotiation-form .negotiation-payment { margin-top: 4px; }
.negotiation-form .negotiation-notice { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--brand-strong); background: var(--surface); }
.negotiation-form .negotiation-notice[hidden] { display: none; }
.negotiation-preview { margin: 8px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface); }
.negotiation-preview-title { margin: 0 0 6px; font-weight: 600; }
.negotiation-preview-fields { margin: 0; }

@media (max-width: 760px) {
  .funnel-board { flex-direction: column; overflow-x: visible; }
  .funnel-column { flex: 0 0 auto; max-height: none; width: 100%; box-sizing: border-box; }
  .funnel-head > * { max-width: 100%; }
}

/* Gestão de Funis e Etapas (CRM 5.0, Fase D1): a lista de funis ao lado do painel do funil escolhido, com as etapas em ordem */
.funnel-admin { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 18px; align-items: start; }
.funnel-admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.funnel-admin-item { margin: 0; }
.funnel-admin-pick { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; text-align: left; font: inherit; color: inherit; background: #ffffff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; min-height: 40px; }
.funnel-admin-item.is-selected .funnel-admin-pick { border-color: var(--brand, currentColor); box-shadow: inset 3px 0 0 var(--brand, currentColor); font-weight: 600; }
.funnel-admin-name { overflow-wrap: anywhere; }
.funnel-admin-detail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 8px; min-width: 0; }
.funnel-admin-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.funnel-admin-detail-head h3 { margin: 0; overflow-wrap: anywhere; }
.funnel-admin-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.funnel-admin-stage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 10px; background: #ffffff; border: 1px solid var(--line); border-radius: 10px; }
.funnel-admin-stage.is-inactive { opacity: 0.75; }
.funnel-admin-stage-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.funnel-admin-stage-name { overflow-wrap: anywhere; }
.funnel-admin-stage-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Dashboard Comercial (CRM 5.0, Fase D1): grupos de indicadores (em negociação, contratado, perdido) e a tabela por etapa */
.dash { display: grid; gap: 20px; }
.dash-group { display: grid; gap: 8px; }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.dash-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 2px; min-width: 0; }
.dash-stat p { margin: 0; }
.dash-stat-label { font-size: 13px; }
.dash-stat-value { font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
.dash-stat-note { font-size: 12.5px; }
.dash-table caption { text-align: left; padding: 0 0 6px; }

@media (max-width: 760px) {
  .funnel-admin { grid-template-columns: minmax(0, 1fr); }
  .funnel-admin-stage-actions .btn { min-height: 40px; }
}

/* Prospecção automática (Fase 2): o bloco do job — título do resultado e espaçamento */
.job-box { margin-top: 10px; }
.job-box .job-title { margin: 0 0 6px; }
.job-box .btn { margin-right: 8px; margin-top: 6px; }

/* Prospecção Comercial 3.0: resumo do job, filtros, perfil comercial do lead e linhas de detalhe */
.job-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.summary-cell { display: flex; flex-direction: column; min-width: 120px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.summary-value { font-size: 20px; font-weight: 600; }
.summary-label { font-size: 12px; color: var(--muted); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.kv { margin: 8px 0; }
.kv-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.kv-row dt { color: var(--muted); font-size: 13px; }
.kv-row dd { margin: 0; overflow-wrap: anywhere; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 2px 0; }
.detail-row > td { background: var(--surface); padding: 12px 16px; }
@media (max-width: 760px) {
  .kv-row { grid-template-columns: 1fr; }
}

/* COMPLETAR PESQUISA (3.0.2): painel de enriquecimento sob demanda dentro da Análise comercial */
.enrich-panel { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.enrich-panel .enrich-head { margin-bottom: 6px; }
.enrich-panel progress { width: 100%; }


/* ====================================================================
   UX 4.0 — componentes globais (camadas, avisos, abas, estados, listas)
   Só classes (CSP: nenhum estilo inline) e nenhuma origem externa.
   ==================================================================== */

.badge.brand { background: var(--brand-soft); color: var(--brand-ink); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 100; padding: 8px 12px; background: var(--brand); color: var(--primary-text); border-radius: 8px; }

/* o fundo não reage enquanto há uma camada aberta */
[inert] { pointer-events: none; user-select: none; }
body[data-overlay-open] { overflow: hidden; }

/* --- camadas: modal e drawer ---------------------------------------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(11, 18, 32, 0.55); animation: overlay-fade 0.14s ease-out; }
.overlay-dialog { position: relative; display: flex; flex-direction: column; max-height: 100vh; background: var(--surface); color: var(--text); box-shadow: 0 24px 60px rgba(11, 18, 32, 0.35); outline: none; }
.overlay-modal { align-items: center; justify-content: center; padding: 16px; }
.overlay-modal .overlay-dialog.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); border-radius: 14px; animation: overlay-pop 0.14s ease-out; }
.overlay-modal .overlay-dialog.modal.size-sm { width: min(460px, 100%); }
.overlay-modal .overlay-dialog.modal.size-md { width: min(640px, 100%); }
/* Formulário (novo / editar) no CENTRO da tela: o mesmo diálogo da gaveta, apresentado como modal (no celular, folha que sobe de baixo com rolagem interna). */
.overlay-drawer.is-centered { align-items: center; justify-content: center; padding: 16px; }
.overlay-dialog.drawer.is-centered { width: min(680px, 100%); height: auto; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border: 0; border-radius: 14px; animation: overlay-pop 0.14s ease-out; }
.overlay-drawer { justify-content: flex-end; }
.overlay-dialog.drawer { width: min(720px, 100%); height: 100vh; height: 100dvh; max-height: 100dvh; border-left: 1px solid var(--line); animation: overlay-slide 0.18s ease-out; }
.overlay-dialog.drawer .overlay-head,
.overlay-dialog.drawer .overlay-footer { flex: none; }
.overlay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 14px; border-bottom: 1px solid var(--line); }
.overlay-titles { flex: 1 1 auto; min-width: 0; }
.overlay-title { margin: 0; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.overlay-subtitle { margin: 2px 0 0; font-size: 13.5px; }
.overlay-close { flex: none; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.overlay-close:hover:not(:disabled) { background: #f1f5f9; }
.overlay-close:disabled { opacity: 0.5; cursor: not-allowed; }
.overlay-body { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 24px; }
.overlay-footer { padding: 12px 24px; border-top: 1px solid var(--line); background: #f8fafc; }
.overlay-footer .actions { margin-top: 0; }
.confirm-body { display: grid; gap: 8px; }
.confirm-message { margin: 0; font-weight: 600; }
.confirm-error { margin: 0; padding: 9px 12px; border-radius: 8px; background: var(--bad-bg); color: var(--bad-text); }
.confirm-error[hidden] { display: none; }
@keyframes overlay-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlay-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes overlay-slide { from { transform: translateX(32px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .overlay-backdrop, .overlay-dialog, .skeleton-line { animation: none; }
}

/* --- avisos (toasts) ------------------------------------------------- */
.toast-region { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 12px 11px 14px; border-radius: 10px; border: 1px solid var(--line); border-left-width: 5px; background: var(--surface); box-shadow: 0 10px 28px rgba(11, 18, 32, 0.18); }
.toast-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.toast-title { font-weight: 700; }
.toast-success { border-left-color: var(--brand-strong); }
.toast-error { border-left-color: var(--danger); background: #fff8f7; }
.toast-warning { border-left-color: #d99a1e; background: #fffaf0; }
.toast-info { border-left-color: #3b6fd6; }
.toast-close { flex: none; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.toast-close:hover { color: var(--text); }

/* --- abas ------------------------------------------------------------ */
.tab-list { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { font: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand-strong); }
.tab-badge { padding: 0 7px; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral-text); font-size: 11.5px; font-weight: 700; }
.tab-panel { padding-top: 14px; }
.tab-panel[hidden] { display: none; }

/* --- estados: vazio, carregando, esqueleto -------------------------------- */
.empty-state { display: grid; gap: 4px; justify-items: center; padding: 28px 16px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); text-align: center; background: #fbfcfd; }
.empty-title { color: var(--text); font-size: 15px; }
.empty-text { margin: 0; max-width: 62ch; }
.empty-state .btn { margin-top: 8px; }
.loading-line { padding: 8px 0; }
.skeleton { display: grid; gap: 10px; padding: 8px 0; }
.skeleton-line { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, #e9edf3 25%, #f4f6fa 50%, #e9edf3 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.2s linear infinite; }
.skeleton-line.short { width: 60%; }
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --- cabeçalho de página, barra de ferramentas, lista ------------------- */
.page-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.page-title-block h2 { margin: 0; font-size: 26px; }
.page-subtitle { margin: 2px 0 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; margin-bottom: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.toolbar .field { margin-bottom: 0; min-width: 0; }
.toolbar .search-field { flex: 1 1 260px; }
.toolbar .select-field { flex: 0 1 190px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--muted); }
.chip strong { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.list-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 16px 14px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; }
.page-info { font-size: 13px; }
table.list.queue th[aria-sort] { cursor: default; }
table.list.queue .company-cell { display: flex; flex-direction: column; gap: 2px; }
table.list.queue .company-name { font: inherit; font-weight: 650; padding: 0; border: 0; background: none; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
table.list.queue .company-name:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 3px; border-radius: 4px; }
table.list.queue tr.queue-row { cursor: pointer; }
table.list.queue tr.queue-row:hover .company-name { color: var(--brand-ink); }
table.list.queue tr.queue-row:focus-within td { background: var(--brand-soft); }
table.list.queue tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--brand-strong); }
table.list.queue .company-meta { color: var(--muted); font-size: 13px; }
table.list.queue tbody tr:hover td { background: var(--brand-soft); }
.link-button { color: var(--brand-ink); }

/* o contador do menu fica no CSS (o texto do link não muda) */
.nav-link[data-count]::after { content: attr(data-count); flex: none; min-width: 20px; padding: 0 7px; border-radius: 999px; background: var(--brand); color: #0b1220; font-size: 11.5px; font-weight: 800; text-align: center; }

/* menu RECOLHIDO (só no desktop): ícones, com a dica do nome no mouse e no foco. O nome continua no DOM (fora da tela) para o leitor de tela. */
@media (min-width: 901px) {
  .shell[data-sidebar="collapsed"] .sidebar { padding-inline: 8px; overflow: visible; }
  .shell[data-sidebar="collapsed"] .nav { overflow: visible; }
  .shell[data-sidebar="collapsed"] .sidebar-head { flex-direction: column; gap: 10px; }
  .shell[data-sidebar="collapsed"] .brand-block { align-items: center; padding: 0; }
  .shell[data-sidebar="collapsed"] .brand-name { font-size: 14px; letter-spacing: 0; }
  .shell[data-sidebar="collapsed"] .brand-sub { display: none; }
  .shell[data-sidebar="collapsed"] .sidebar-toggle .icon { transform: rotate(180deg); }
  .shell[data-sidebar="collapsed"] .nav-label, .shell[data-sidebar="collapsed"] .logout-label, .shell[data-sidebar="collapsed"] .who-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .shell[data-sidebar="collapsed"] .nav-sub, .shell[data-sidebar="collapsed"] .nav-arrow, .shell[data-sidebar="collapsed"] .nav-chevron, .shell[data-sidebar="collapsed"] .nav-soon, .shell[data-sidebar="collapsed"] .who .badge { display: none; }
  .shell[data-sidebar="collapsed"] .nav-link { justify-content: center; padding: 11px 6px; border-left-width: 0; }
  .shell[data-sidebar="collapsed"] .nav-link[aria-current="page"], .shell[data-sidebar="collapsed"] .nav-item.is-branch-active > .nav-row > .nav-link { background: rgba(255, 255, 255, 0.13); box-shadow: inset 3px 0 0 var(--sidebar-accent); }
  .shell[data-sidebar="collapsed"] .nav-link[data-count]::after { position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
  .shell[data-sidebar="collapsed"] .who { align-items: center; padding: 12px 0 0; }
  .shell[data-sidebar="collapsed"] .logout { width: 100%; padding-inline: 0; }
  .shell[data-sidebar="collapsed"] .logout-icon { display: inline-flex; }
  .shell[data-sidebar="collapsed"] .sidebar [data-tip]:hover::before,
  .shell[data-sidebar="collapsed"] .sidebar [data-tip]:focus-visible::before {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 80;
    padding: 6px 10px;
    border-radius: 6px;
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(11, 18, 32, 0.35);
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav-chevron .icon, .nav-arrow .icon { transition: none; }
}

/* página de uma área futura (EM DESENVOLVIMENTO) */
.coming-soon-card { align-items: flex-start; text-align: left; max-width: 760px; }
.coming-soon-flag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-text); font-size: 13px; letter-spacing: 0.08em; }
.coming-soon-plans ul { margin: 4px 0 0; }

/* --- gaveta de lead: resumo, cartões e ações ------------------------------- */
.lead-summary { display: grid; gap: 4px; min-width: 0; }
.lead-summary .panel-section { margin-bottom: 16px; }
.indicator-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.indicator { display: grid; align-content: start; justify-items: start; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; }
.indicator-label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.indicator .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.owner-card { display: grid; gap: 8px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; background: var(--surface); justify-items: start; }
.owner-card.owner-warn { border-left-color: #d99a1e; background: #fffaf0; }
.owner-card.owner-ok { border-left-color: var(--brand-strong); }
.owner-card.owner-muted { border-left-color: var(--line-strong); background: #fbfcfd; color: var(--muted); }
.owner-main { display: grid; gap: 2px; min-width: 0; max-width: 100%; }
.owner-name { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.owner-role { color: var(--muted); overflow-wrap: anywhere; }
.owner-note { margin: 0; font-size: 13.5px; color: #7a5300; }
.decision-card { display: grid; gap: 8px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; background: var(--surface); }
.decision-card.decision-bad { border-left-color: var(--danger); background: #fff8f7; }
.decision-card.decision-warn { border-left-color: #d99a1e; background: #fffaf0; }
.decision-card.decision-neutral { border-left-color: var(--line-strong); background: #fbfcfd; }
.decision-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.decision-date { color: var(--muted); font-size: 13px; }
.decision-label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.decision-reason { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.decision-card .fields { margin: 4px 0 0; }

/* barra de ferramentas em duas linhas: categorias em cima; busca, ordem e contador embaixo (o contador nunca fica espremido) */
.toolbar.toolbar-stacked { display: grid; gap: 12px; align-items: stretch; }
.toolbar-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; min-width: 0; }
.toolbar-filters .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.toolbar-tools { padding-top: 12px; border-top: 1px solid var(--line); }
.toolbar-tools:first-child { padding-top: 0; border-top: 0; }
.toolbar-tools .search-field { flex: 1 1 280px; }
.toolbar-tools .select-field { flex: 0 1 200px; }
.toolbar-count { margin: 0; margin-left: auto; padding-bottom: 8px; white-space: nowrap; color: var(--muted); font-size: 13.5px; }
.toolbar-inline { margin-bottom: 10px; padding: 0; border: 0; box-shadow: none; background: none; }

/* Nova Prospecção: formulário em seções, início, execução e etapas */
.form-field[hidden] { display: none; }
.form-field label.required::after { content: " *"; color: var(--bad-text); }
.field-help { margin: 0; font-size: 13px; line-height: 1.35; }
.form-field .field-error { margin: 0; padding: 2px 0 0; font-weight: 600; }
.form-field [aria-invalid="true"] { border-color: var(--danger); outline: 1px solid var(--danger); }
.field-counter { margin: 0; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* abas principais da Nova Prospecção: a aba escolhida é um cartão elevado, com a marca lime */
.tabs-main > .tab-list { gap: 6px; border-bottom: 2px solid var(--line); margin-bottom: 4px; overflow-y: hidden; }
.tabs-main .tab { padding: 11px 18px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; font-size: 15px; }
.tabs-main .tab:hover { background: #f1f5f9; }
.tabs-main .tab[aria-selected="true"] { background: var(--surface); color: var(--text); border-color: var(--line); border-bottom: 2px solid var(--surface); box-shadow: inset 0 3px 0 var(--brand-strong); }
.tabs-main > .tab-panels > .tab-panel { padding-top: 16px; }
.pros-wizard-card { width: 100%; max-width: 820px; min-width: 0; margin-inline: auto; padding: 18px 22px 20px; }
.wizard-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.wizard-step-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; color: var(--muted); }
.wizard-step-number { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-bg); color: var(--neutral-text); font-weight: 700; font-size: 13px; }
.wizard-step-label { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.wizard-step-item.current { background: var(--surface); color: var(--text); border-color: var(--brand-strong); box-shadow: inset 0 3px 0 var(--brand-strong); }
.wizard-step-item.current .wizard-step-number { background: var(--brand); color: #0b1220; }
.wizard-step-item.done { color: var(--text); }
.wizard-step-item.done .wizard-step-number { background: var(--brand-soft); color: var(--brand-ink); }
.wizard-summary { margin-bottom: 8px; }
.wizard-explain { margin: 4px 0 10px; line-height: 1.45; }
.pros-form-actions [hidden] { display: none; }
.pros-form-actions .btn { min-width: 110px; }
.briefs-table .brief-nicho { font-weight: 600; overflow-wrap: anywhere; }
.pros-briefs .toolbar-tools .search-field { flex: 1 1 280px; }
.run-last-title { margin: 18px 0 8px; }
.run-last-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 18px 0 8px; }
.run-last-head .run-last-title { margin: 0; }
.pros-brief-drawer { display: grid; gap: 14px; min-width: 0; }
.form-title { margin: 0 0 12px; font-size: 17px; }
.form-section { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.form-section legend { padding: 0; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.form-section .form-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.draft-hint { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); font-size: 13.5px; }
.draft-hint[hidden] { display: none; }
.pros-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pros-selected { display: grid; gap: 16px; min-width: 0; }
.pros-selected:empty { display: none; }
.pros-brief-card, .pros-start-card, .exec-card { min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.pros-brief-head, .exec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.pros-brief-head h3, .exec-head h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.exec-id { font-size: 13px; overflow-wrap: anywhere; }
.pros-start-card { border-left: 4px solid var(--brand-strong); }
.pros-start-card h3 { margin: 0 0 6px; font-size: 17px; }
.pros-start-card .field { max-width: 360px; }
.exec-card h4.job-title { margin: 0 0 6px; font-size: 14px; letter-spacing: 0.04em; }
.exec-step { margin: 0 0 10px; font-weight: 600; }
.exec-meta { margin: 10px 0 8px; font-size: 13.5px; }
.exec-actions { margin-top: 12px; }
.stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.step { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-top-width: 4px; border-radius: 8px; background: #fbfcfd; }
.step.done { border-top-color: var(--brand-strong); }
.step.current { border-top-color: #d99a1e; background: #fffaf0; }
.step.pending { border-top-color: var(--line-strong); color: var(--muted); }
.step-label { font-weight: 650; }
.step-state { font-size: 12.5px; }
.confirm-summary { margin: 0 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
/* a lista de briefings vira cartões já abaixo de 900 px (sem rolagem horizontal) */
@media (max-width: 900px) {
  table.briefs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.briefs-table, table.briefs-table tbody, table.briefs-table tr, table.briefs-table td { display: block; width: 100%; }
  table.briefs-table tr { margin-bottom: 10px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff; }
  table.briefs-table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 0; text-align: left; overflow-wrap: anywhere; }
  table.briefs-table td::before { flex: 0 0 34%; content: attr(data-label); color: var(--muted); font-weight: 600; }
  table.list.queue.briefs-table td.num { text-align: left; }
}
@media (max-width: 760px) { .tabs-main .tab { padding: 10px 12px; font-size: 14px; } .wizard-steps { grid-template-columns: minmax(0, 1fr); } .wizard-step-item { padding: 6px 10px; } }
@media (max-width: 560px) { .stepper { grid-template-columns: minmax(0, 1fr); } .pros-wizard-card { padding: 14px; } .pros-form-actions .btn { flex: 1 1 100%; } }

/* Histórico de prospecções: colunas numéricas, indicadores e candidatos da gaveta */
table.list.queue .job-code { white-space: nowrap; overflow-wrap: normal; }
table.list.queue th.num, table.list.queue td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.indicator-number .indicator-value { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.indicator-number .indicator-hint { font-size: 12.5px; line-height: 1.3; }
.candidate-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.candidate-item { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px; background: var(--surface); }
.candidate-item[data-group="ENTREGUE"] { border-left-color: var(--brand-strong); }
.candidate-item[data-group="RETIDO"], .candidate-item[data-group="SEM_ENTREGA"] { border-left-color: #d99a1e; }
.candidate-item[data-group="DESCARTADO"] { border-left-color: var(--danger); }
.candidate-item p { margin: 0; overflow-wrap: anywhere; }
.candidate-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.candidate-name { font-weight: 650; overflow-wrap: anywhere; min-width: 0; }
.candidate-reason { font-size: 13.5px; }
.candidate-sources { font-size: 13px; }
table.list.queue .reason-text { max-width: 320px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.panel-section { margin-bottom: 18px; }
.panel-section-title { margin: 0 0 8px; font-size: 14px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.drawer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.drawer-actions .note { margin: 0; flex: 1 1 240px; font-size: 13px; }
.overlay-footer .promotion { margin-top: 0; }

@media (max-width: 1100px) {
  .overlay-dialog.drawer { width: min(640px, 100%); }
}
@media (max-width: 760px) {
  .overlay-dialog.drawer { width: 100%; border-left: 0; }
  .overlay-head { padding: 16px 16px 12px; }
  .overlay-body { padding: 14px 16px 20px; }
  .overlay-footer { padding: 10px 16px; }
  .indicator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .toolbar-count { margin-left: 0; flex: 1 0 100%; padding-bottom: 0; }
  .toolbar-tools .search-field, .toolbar-tools .select-field { flex: 1 1 100%; }
  table.list.queue td.num { text-align: left; }
  .overlay-footer .drawer-actions .note { flex-basis: 100%; }
  .overlay-modal { align-items: flex-end; padding: 0; }
  .overlay-modal .overlay-dialog.modal { width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; }
  .overlay-drawer.is-centered { align-items: flex-end; padding: 0; }
  .overlay-dialog.drawer.is-centered { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 14px 14px 0 0; }
  .toast-region { right: 8px; left: 8px; bottom: 8px; width: auto; }
  .pagination { flex-wrap: wrap; justify-content: center; }
  /* A fila vira uma lista de cartões, um por lead, com o rótulo de cada campo. */
  table.queue thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.queue, table.queue tbody, table.queue tr, table.queue td { display: block; width: 100%; }
  table.queue tr { margin-bottom: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff; }
  table.queue td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 0; }
  table.queue td::before { flex: 0 0 34%; content: attr(data-label); color: var(--muted); font-weight: 600; }
}

/* --- cores dos nichos (CRM 5.0, Fase 2B-1) ---------------------------------------------------------- */
/* A PALETA FIXA de 20 cores dos nichos (src/crm/catalogConstants.js#NICHE_COLORS). O servidor e o banco guardam só a CHAVE
   ("azul"); a interface a transforma na classe .cor-azul — nunca um estilo inline (CSP style-src 'self'; DASH-GUARD-8). Cada
   classe define três tons: fundo (tinta clara do chip), texto (contraste >= 7:1 sobre o fundo) e ponto (a cor de destaque,
   contraste >= 3:1). O chip SEMPRE traz o nome do nicho em texto: a cor nunca é a única informação. Uma chave desconhecida, ou
   a ausência de classe de cor, cai no tom neutro (ardósia). tests/server/dashboard-catalog-colors.test.js confere que estas
   classes e a paleta do servidor são idênticas e recalcula os contrastes. As telas de Nichos e Cores (Fase 2B-2) usam estas classes. */
.nicho-chip { --cor-fundo: #edeff2; --cor-texto: #404f64; --cor-ponto: #3c4653; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 10px; border-radius: 999px; background: var(--cor-fundo); color: var(--cor-texto); font-size: 12.5px; font-weight: 600; }
.nicho-chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-ponto); }
.cor-vermelho { --cor-fundo: #fde4e3; --cor-texto: #8f2119; --cor-ponto: #d91f12; }
.cor-laranja { --cor-fundo: #fdece3; --cor-texto: #7e3c16; --cor-ponto: #aa470e; }
.cor-ambar { --cor-fundo: #fdf3e3; --cor-texto: #6c4c13; --cor-ponto: #c18010; }
.cor-amarelo { --cor-fundo: #fdf8e3; --cor-texto: #5f5211; --cor-ponto: #7c6a0e; }
.cor-lima { --cor-fundo: #f5fde3; --cor-texto: #455b10; --cor-ponto: #719c0d; }
.cor-verde { --cor-fundo: #e4fde3; --cor-texto: #135f11; --cor-ponto: #12a50d; }
.cor-esmeralda { --cor-fundo: #e3fdf0; --cor-texto: #115f38; --cor-ponto: #0da057; }
.cor-turquesa { --cor-fundo: #e3fdf9; --cor-texto: #115f55; --cor-ponto: #049f8a; }
.cor-ciano { --cor-fundo: #e3f9fd; --cor-texto: #125964; --cor-ponto: #0e99af; }
.cor-celeste { --cor-fundo: #e3f2fd; --cor-texto: #16547e; --cor-ponto: #0e6baa; }
.cor-azul { --cor-fundo: #e3ecfd; --cor-texto: #1a4793; --cor-ponto: #125bd9; }
.cor-indigo { --cor-fundo: #e3e4fd; --cor-texto: #1a2293; --cor-ponto: #12197d; }
.cor-violeta { --cor-fundo: #eae3fd; --cor-texto: #3a1a93; --cor-ponto: #4712d9; }
.cor-roxo { --cor-fundo: #f2e3fd; --cor-texto: #631a93; --cor-ponto: #6b0eaa; }
.cor-orquidea { --cor-fundo: #fae3fd; --cor-texto: #7f188b; --cor-ponto: #c512d9; }
.cor-magenta { --cor-fundo: #fde3f7; --cor-texto: #8b1870; --cor-ponto: #aa0e85; }
.cor-rosa { --cor-fundo: #fde3ee; --cor-texto: #8f194c; --cor-ponto: #d91268; }
.cor-carmim { --cor-fundo: #fde3e7; --cor-texto: #931a2e; --cor-ponto: #aa0e28; }
.cor-marrom { --cor-fundo: #f7efe9; --cor-texto: #68482c; --cor-ponto: #b37c4d; }
.cor-ardosia { --cor-fundo: #edeff2; --cor-texto: #404f64; --cor-ponto: #3c4653; }

/* --- telas dos catálogos do CRM (CRM 5.0, Fase 2B-2) ------------------------------------------------- */
/* Serviços, Nichos e Cores e Origens dos Leads: uma lista de linhas que viram cartões no celular, o painel lateral com o formulário e o seletor das 20 cores. Só classes (nenhum estilo inline):
   a cor de um nicho vem da classe .cor-<chave> (acima), que define --cor-fundo, --cor-texto e --cor-ponto. Sem classe de cor, o tom cai no neutro (ardósia). */
/* Fase D1: cada registro é um CARTÃO numa grade (o desktop usa as colunas que couberem; o celular, uma só). O corpo do cartão abre o modal de detalhes; os botões ficam fora dele. */
.catalog-card { padding: 0; border: 0; background: none; box-shadow: none; }
.catalog-list { display: grid; margin: 0; padding: 0; list-style: none; }
.catalog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.catalog-row { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.catalog-row.is-niche { border-left: 6px solid var(--cor-ponto, #3c4653); }
.catalog-row.is-inactive { background: #fafbfc; box-shadow: none; }
.catalog-row.is-inactive .catalog-name { color: var(--muted); }
.catalog-row.selected { border-color: var(--brand-strong); background: var(--brand-soft); }
.catalog-row-main { display: grid; flex: 1 1 auto; align-content: start; gap: 6px; min-width: 0; cursor: pointer; }
.catalog-row-main:hover .catalog-name:not(:disabled) { color: var(--primary); text-decoration: underline; }
.catalog-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.catalog-name { padding: 2px 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 700; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.catalog-name:hover:not(:disabled) { color: var(--primary); text-decoration: underline; }
.catalog-name:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 3px; border-radius: 4px; }
.catalog-name:disabled { cursor: not-allowed; }
.catalog-meta, .catalog-desc { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.catalog-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catalog-row-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.catalog-move { display: flex; gap: 4px; margin-right: auto; }
.catalog-usage-note { margin: 0; overflow-wrap: anywhere; }
.catalog-detail-fields { margin: 0; }
.catalog-detail-lines { display: grid; gap: 2px; }
.catalog-detail-lines p { margin: 0; }
.catalog-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.catalog-hint { margin: 0 0 10px; font-size: 13.5px; }
.catalog-availability:empty, .form-availability:empty { display: none; }
.catalog-unavailable { display: grid; gap: 8px; justify-items: start; margin: 0 0 12px; }
.catalog-unavailable .message { margin: 0; }
.catalog-error { display: grid; gap: 8px; justify-items: start; padding: 10px 0; }
.catalog-error .message { margin: 0; }
.catalog-form { display: grid; gap: 4px; }
.catalog-form .form-messages:empty, .catalog-form .form-usage:empty { display: none; }
.catalog-form .required-note { margin: 0 0 6px; font-size: 13px; }
.catalog-form .audit-line { margin: 12px 0 0; font-size: 13px; }
.catalog-form .message { margin: 0 0 10px; }
.catalog-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.field-label { margin: 0; font-weight: 600; }
.field-label.required::after { content: " *"; color: var(--bad-text); }

/* Serviços — formas de pagamento permitidas (Fase C1): um grupo de caixas de seleção; as periodicidades só aparecem com o pagamento recorrente marcado. */
.catalog-form .modality-group { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.catalog-form .modality-group > legend { padding: 0; font-weight: 600; }
.catalog-form .modality-group > legend.required::after { content: " *"; color: var(--bad-text); }
.catalog-form .modality-option { display: flex; align-items: flex-start; gap: 8px; }
.catalog-form .modality-option label { font-weight: 400; overflow-wrap: anywhere; }
.catalog-form .modality-option input { flex: none; margin-top: 3px; }
.catalog-form .modality-periodicities { display: grid; gap: 6px; margin: 0 0 0 26px; padding: 0; border: 0; min-width: 0; }
.catalog-form .modality-periodicities[hidden] { display: none; }
.catalog-form .modality-periodicities > legend { padding: 0; font-size: 13px; font-weight: 600; }
/* O seletor das 20 cores: cada opção tem que caber o NOME INTEIRO, em uma linha (nunca partido no meio da palavra). A conta: o nome mais largo ("Esmeralda") mede ~63 px em 13,5 px/600 (medido no
   navegador) e o resto da opção — bordas, margem esquerda, amostra, espaço e a reserva da marca de selecionada — ocupa 66 px; por isso a coluna mínima é de 140 px (74 px de texto, ~18% de folga).
   Se uma fonte mais larga ainda estourar, o nome continua inteiro (white-space: nowrap) e avança sobre a reserva da marca, em vez de quebrar. tests/server/dashboard-catalog-ui-colors.test.js confere os números. */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 4px; }
.color-swatch { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 26px 6px 10px; border: 2px solid var(--cor-fundo); border-radius: 10px; background: var(--cor-fundo); color: var(--cor-texto); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.color-swatch .swatch-dot { flex: none; width: 18px; height: 18px; border: 2px solid #ffffff; border-radius: 50%; background: var(--cor-ponto); box-shadow: 0 0 0 1px var(--cor-ponto); }
.color-swatch .swatch-name { min-width: 0; white-space: nowrap; overflow-wrap: normal; word-break: normal; hyphens: none; }
.color-swatch .swatch-check { position: absolute; top: 50%; right: 8px; display: none; font-weight: 700; transform: translateY(-50%); }
.color-swatch:hover:not(:disabled) { border-color: var(--cor-ponto); }
.color-swatch.selected { border-color: var(--cor-texto); box-shadow: 0 0 0 1px var(--cor-texto); }
.color-swatch.selected .swatch-check { display: inline; }
.color-swatch:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; }
.color-swatch:disabled { opacity: 0.6; cursor: not-allowed; }
.niche-preview { display: grid; gap: 6px; margin-top: 8px; }
.preview-card { display: grid; gap: 6px; max-width: 360px; padding: 12px 14px; border: 1px solid var(--line); border-left: 6px solid var(--cor-ponto, #3c4653); border-radius: 10px; background: #ffffff; box-shadow: var(--shadow); }
.preview-card .preview-line { font-size: 12.5px; }
.preview-card .preview-title { font-size: 15px; }
.preview-nicho-name { overflow-wrap: anywhere; }
.preview-note { margin: 0; font-size: 13px; }
/* Configurações do CRM: os cartões de acesso aos cadastros, e o caminho de volta nas telas dos catálogos */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.settings-card { display: grid; align-content: start; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
a.settings-card:hover { border-color: var(--brand-strong); }
a.settings-card:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; }
.settings-card-title { font-size: 16px; font-weight: 700; }
.settings-card-text { font-size: 14px; line-height: 1.45; }
.settings-card-go { margin-top: 4px; color: var(--brand-ink); font-weight: 600; font-size: 14px; }
.settings-card.is-soon { border-style: dashed; background: #fbfcfd; box-shadow: none; }
.settings-card.is-soon .settings-card-title { color: var(--muted); }
.settings-card-soon { justify-self: start; margin-top: 4px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13.5px; color: var(--muted); }
.breadcrumb a { color: var(--brand-ink); font-weight: 600; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }
@media (max-width: 760px) {
  .catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .catalog-row-actions .btn { min-height: 40px; }
  .catalog-row-actions .btn:not(.small) { flex: 1 1 auto; }
  .catalog-row-actions .catalog-move { flex: 1 0 100%; margin-right: 0; }
  .catalog-row-actions .catalog-move .btn { flex: 1 1 0; }
  .catalog-row-actions > .btn { flex: 1 1 0; }
  .catalog-detail-actions .btn { flex: 1 1 100%; }
  .catalog-form-actions .btn { flex: 1 1 100%; }
}

/* ---- Clientes PF/PJ (Fase D2): tipo de pessoa, seção expansível do novo cliente, busca de cliente na negociação ---- */
.field[hidden], .form-block[hidden] { display: none; }
.crm-person-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.crm-person-type > legend { grid-column: 1 / -1; padding: 0; margin-bottom: 4px; font-weight: 600; }
.crm-person-type .modality-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.crm-person-type .modality-option:has(input:checked) { border-color: var(--brand-ink); background: var(--brand-soft); }
.crm-person-type .modality-option label { flex: 1; cursor: pointer; font-weight: 600; }
.form-more { margin: 4px 0 12px; padding: 6px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.form-more > summary { cursor: pointer; padding: 6px 0; font-weight: 700; }
.form-more[open] > summary { margin-bottom: 8px; }
/* Fase D2.1: as abas de "Mais informações" — a altura mínima evita o salto ao trocar de aba; o foco fica dentro da faixa (a lista rola na horizontal); no celular as abas quebram de linha em vez de cortar o título */
.form-more .tab-list { gap: 4px; }
.form-more .tab:focus-visible { outline-offset: -3px; }
.form-more .tab-panels { min-height: 14rem; }
.form-more .tab-panel { padding-top: 12px; }
@media (max-width: 480px) { .form-more { padding: 6px 8px; } .form-more .tab-list { flex-wrap: wrap; overflow-x: visible; } .form-more .tab { padding: 8px 10px; font-size: 14px; } .form-more .tab-panels { min-height: 0; } }
.crm-person-badge { margin-left: 8px; }
.client-search { margin-bottom: 4px; }
@media (max-width: 640px) { .crm-person-type { grid-template-columns: 1fr; } }