/* ===== SOMAS Design System ===== */
:root {
  /* Brand colors (from logo) */
  --brand-indigo: #2d3197;
  --brand-indigo-700: #232679;
  --brand-indigo-50: #ecedfa;
  --brand-green: #00f37c;
  --brand-green-600: #00c965;
  --brand-green-50: #d8fde9;

  /* Neutrals — sober navy base */
  --ink: #172554;
  --ink-2: #1f3070;
  --ink-3: #3b4787;
  --muted: #6b7196;
  --muted-2: #9097b8;
  --line: #e6e7f2;
  --line-2: #eef0f8;
  --surface: #ffffff;
  --canvas: #f4f5fb;
  --canvas-2: #ebedf6;

  /* Soft category tones (cards, illustrations) */
  --tone-peach: #ffd9b5;
  --tone-peach-ink: #6b3a10;
  --tone-blue: #c9dbff;
  --tone-blue-ink: #163680;
  --tone-mint: #b6f0d0;
  --tone-mint-ink: #075a35;
  --tone-lilac: #dcd6ff;
  --tone-lilac-ink: #2f1f8a;
  --tone-rose: #ffd0d8;
  --tone-rose-ink: #7d1a2c;
  --tone-sand: #f0e6cc;
  --tone-sand-ink: #5a4a14;

  /* Status */
  --ok: #18a763;
  --warn: #c97a04;
  --warn-bg: #fff3d6;
  --danger: #d23048;
  --danger-bg: #ffe1e5;
  --info: #2d3197;

  /* Shape */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(10,14,46,.04), 0 1px 0 rgba(10,14,46,.02);
  --sh-2: 0 6px 18px rgba(10,14,46,.06), 0 1px 2px rgba(10,14,46,.04);
  --sh-3: 0 18px 40px rgba(10,14,46,.10), 0 2px 6px rgba(10,14,46,.04);
  --sh-brand: 0 18px 36px rgba(45,49,151,.28);

  /* Type */
  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --sidebar-w: 268px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ===== App shell ===== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ===== Sidebar ===== */
.sb {
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 22px 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin;
}
.sb::-webkit-scrollbar { width: 6px; }
.sb::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }

.sb-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 6px 8px 18px;
  border-bottom: 1px solid var(--line-2);
}
.sb-brand-logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  min-height: 44px;
  object-fit: contain;
  object-position: left center;
}

/* Institutional footer — SEMAS mark + "Feito com ❤️ em Guamaré" */
.sb-institucional {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 10px 6px;
  border-top: 1px solid var(--line-2);
}
.sb-institucional-logo {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  opacity: .92;
  transition: opacity .15s;
}
.sb-institucional-logo:hover { opacity: 1; }
.sb-institucional-credit {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: 0.01em;
  text-align: center;
}
.sb-institucional-credit span {
  display: inline-block;
  margin: 0 1px;
  transform: translateY(1px);
  font-size: 11px;
  filter: saturate(1.1);
}

.sb-section { display: flex; flex-direction: column; gap: 2px; }
.sb-heading {
  padding: 14px 12px 6px;
  font-size: 10.5px; font-weight: 700;
  color: var(--muted-2);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.sb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border-radius: 12px;
  color: var(--ink-3);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  position: relative;
}
.sb-item:hover { background: var(--line-2); color: var(--ink); }
.sb-item-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--muted);
  flex: 0 0 auto;
}
.sb-item-icon svg { width: 18px; height: 18px; }
.sb-item.active {
  background: var(--ink);
  color: #fff;
}
.sb-item.active .sb-item-icon { color: var(--brand-green); }
.sb-item .sb-badge {
  margin-left: auto;
  min-width: 22px; height: 20px;
  display: grid; place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--brand-green);
  color: var(--ink);
  font-size: 10.5px; font-weight: 800;
}
.sb-item.active .sb-badge { background: var(--brand-green); color: var(--ink); }

.sb-user {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--canvas);
  border: 1px solid var(--line-2);
}
.sb-user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd6b8, #ffb47a);
  display: grid; place-items: center;
  color: var(--ink); font-weight: 800; font-size: 13px;
  flex: 0 0 auto;
}
.sb-user-info { min-width: 0; flex: 1; }
.sb-user-info strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-info small { display: block; font-size: 11px; color: var(--muted); }

/* ===== Main column ===== */
.main { min-width: 0; padding: 22px 26px 32px; display: flex; flex-direction: column; gap: 20px; }

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.search {
  display: flex; align-items: center; gap: 12px;
  height: 52px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 22px;
  box-shadow: var(--sh-1);
}
.search svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: 14.5px; color: var(--ink);
}
.search input::placeholder { color: var(--muted-2); }
.search kbd {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--canvas);
  color: var(--muted);
  border: 1px solid var(--line);
}
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer; position: relative;
  color: var(--ink);
  box-shadow: var(--sh-1);
  transition: transform .12s;
}
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .dot {
  position: absolute; top: 12px; right: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-green);
  border: 2px solid var(--surface);
}
.profile-pill {
  display: flex; align-items: center; gap: 12px;
  height: 52px;
  padding: 4px 16px 4px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--sh-1);
}
.profile-pill .avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-green), #66ffaa);
  display: grid; place-items: center;
  color: var(--ink); font-weight: 800; font-size: 14px;
}
.profile-pill .pp-info strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.1; }
.profile-pill .pp-info small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ===== Typography helpers ===== */
.h-page { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
.h-section { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.h-card { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.txt-muted { color: var(--muted); font-size: 13px; }
.txt-mono { font-family: var(--font-mono); }
.txt-serif { font-family: var(--font-serif); font-style: italic; }

/* ===== Page header ===== */
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
}
.page-head .eyebrow {
  font-size: 11.5px; font-weight: 700;
  color: var(--brand-indigo);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 10px;
  display: inline-flex; align-items: center; gap: 8px;
}
.page-head .eyebrow::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-green);
}
.page-head p { color: var(--muted); font-size: 14px; max-width: 560px; margin: 12px 0 0; line-height: 1.5; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s, background .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary {
  background: var(--ink); color: #fff;
}
.btn-primary:hover { background: var(--ink-2); }
.btn-brand {
  background: var(--brand-green); color: var(--ink);
}
.btn-brand:hover { background: var(--brand-green-600); }
.btn-ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 12.5px; }

/* ===== Card ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--sh-1);
}
.card-lg { border-radius: var(--radius-lg); padding: 28px; }

/* ===== Hero (dashboard) ===== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: stretch;
}
.hero-banner {
  position: relative;
  padding: 32px 34px;
  border-radius: var(--radius-lg);
  background: var(--brand-indigo);
  color: #fff;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 280px;
}
.hero-banner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(0,243,124,.22), transparent 55%),
    radial-gradient(circle at 12% 92%, rgba(0,243,124,.18), transparent 50%);
  pointer-events: none;
}
.hero-stars {
  position: absolute; top: 20px; right: 28px;
  opacity: 0.6;
}
.hero-eyebrow {
  position: relative;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-green);
}
.hero-banner h2 {
  position: relative;
  margin: 8px 0 0;
  max-width: 520px;
  font-size: 30px; font-weight: 700;
  line-height: 1.12; letter-spacing: -0.025em;
}
.hero-banner h2 em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--brand-green);
}
.hero-actions {
  position: relative;
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 22px;
}
.hero-actions .btn-primary { background: #000; }
.hero-actions .btn-ghost {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.hero-actions .btn-ghost:hover { background: rgba(255,255,255,.2); }

.hero-stat {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.hero-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero-stat-top h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.hero-stat-top small { color: var(--muted); font-size: 12px; }
.gauge {
  width: 130px; height: 130px;
  margin: 0 auto;
  position: relative;
}
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gauge-center strong { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.gauge-center small { font-size: 10.5px; color: var(--muted); font-weight: 600; }

/* ===== Stat cards row ===== */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.stat {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px;
  min-height: 134px;
  position: relative;
  overflow: hidden;
}
.stat-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.stat-icon svg { width: 19px; height: 19px; }
.stat-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.stat-value { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--ink); }
.stat-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700;
  color: var(--ok);
}
.stat-trend.down { color: var(--danger); }
.stat-link {
  font-size: 11.5px; font-weight: 700; color: var(--brand-indigo);
  display: inline-flex; align-items: center; gap: 4px;
}

/* Toned stats */
.stat.tone-peach { background: var(--tone-peach); border-color: transparent; }
.stat.tone-peach .stat-value, .stat.tone-peach .stat-label { color: var(--tone-peach-ink); }
.stat.tone-blue { background: var(--tone-blue); border-color: transparent; }
.stat.tone-blue .stat-value, .stat.tone-blue .stat-label { color: var(--tone-blue-ink); }
.stat.tone-mint { background: var(--tone-mint); border-color: transparent; }
.stat.tone-mint .stat-value, .stat.tone-mint .stat-label { color: var(--tone-mint-ink); }
.stat.tone-lilac { background: var(--tone-lilac); border-color: transparent; }
.stat.tone-lilac .stat-value, .stat.tone-lilac .stat-label { color: var(--tone-lilac-ink); }
.stat.tone-rose { background: var(--tone-rose); border-color: transparent; }
.stat.tone-rose .stat-value, .stat.tone-rose .stat-label { color: var(--tone-rose-ink); }
.stat.tone-sand { background: var(--tone-sand); border-color: transparent; }
.stat.tone-sand .stat-value, .stat.tone-sand .stat-label { color: var(--tone-sand-ink); }
.stat.tone-ink { background: var(--ink); border-color: transparent; }
.stat.tone-ink .stat-value, .stat.tone-ink .stat-label { color: #fff; }
.stat.tone-ink .stat-foot, .stat.tone-ink .stat-link { color: var(--brand-green); }

/* ===== Layout: dashboard two-column ===== */
.dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}
.dash-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ===== Panel header ===== */
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.panel-head .lbl { color: var(--muted); font-size: 12.5px; }

.tabs {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--canvas);
  gap: 2px;
}
.tabs button {
  height: 30px; padding: 0 13px;
  border: 0; background: transparent;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.tabs button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-1);
}

/* ===== Table ===== */
.table-wrap { overflow-x: auto; }
.t {
  width: 100%; border-collapse: collapse;
}
.t th, .t td { text-align: left; padding: 14px 16px; font-size: 13px; vertical-align: middle; }
.t thead th {
  color: var(--muted); font-weight: 600;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
}
.t tbody tr { border-bottom: 1px solid var(--line-2); transition: background .12s; }
.t tbody tr:last-child { border-bottom: 0; }
.t tbody tr:hover { background: var(--canvas); }
.t td { color: var(--ink-2); }
.t td strong { color: var(--ink); font-weight: 700; }
.t td small { color: var(--muted); display: block; font-size: 11.5px; margin-top: 2px; }

.t-person {
  display: flex; align-items: center; gap: 12px;
}
.t-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  font-weight: 700; font-size: 12px;
  flex: 0 0 auto;
}

/* ===== Badge / pill ===== */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--canvas);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.pill.tone-mint { background: var(--brand-green-50); color: #075a35; border-color: transparent; }
.pill.tone-blue { background: var(--tone-blue); color: var(--tone-blue-ink); border-color: transparent; }
.pill.tone-peach { background: var(--tone-peach); color: var(--tone-peach-ink); border-color: transparent; }
.pill.tone-lilac { background: var(--tone-lilac); color: var(--tone-lilac-ink); border-color: transparent; }
.pill.tone-rose { background: var(--tone-rose); color: var(--tone-rose-ink); border-color: transparent; }
.pill.tone-warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.pill.tone-danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.pill.tone-ink { background: var(--ink); color: #fff; border-color: transparent; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ===== Side panel cards ===== */
.side-card { padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }

/* List ===== */
.list { display: flex; flex-direction: column; gap: 10px; }
.list-item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 12px; border-radius: 14px;
  background: var(--canvas); border: 1px solid var(--line-2);
}
.list-item .li-mark {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  color: var(--ink);
}
.list-item .li-mark svg { width: 19px; height: 19px; }
.list-item strong { display: block; font-size: 13px; font-weight: 700; }
.list-item small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.list-item .li-meta { font-size: 12px; font-weight: 700; color: var(--ink); }

/* ===== Chart bars ===== */
.bars {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items: end;
  height: 200px;
}
.bar {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  height: 100%;
}
.bar .bar-num {
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: -0.005em;
}
.bar.active .bar-num { color: var(--ink); font-weight: 800; }
.bar .bar-track {
  width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  flex: 1;
  border-radius: 12px;
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}
.bar .bar-fill {
  background: var(--brand-indigo);
  border-radius: 12px;
  transition: height .2s ease;
}
.bar.alt .bar-fill { background: var(--brand-green); }
.bar .bar-lbl { font-size: 11px; color: var(--muted); font-weight: 700; }
.bar.active .bar-fill { background: var(--ink); }
.bar.active .bar-lbl { color: var(--ink); }

/* ===== Forms ===== */
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.input, .select, .textarea {
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 14px;
  font-size: 13.5px;
  color: var(--ink);
  outline: 0;
  transition: border-color .12s, box-shadow .12s;
}
.textarea { height: auto; padding: 12px 14px; min-height: 100px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand-indigo);
  box-shadow: 0 0 0 4px rgba(45,49,151,.14);
}
.field .hint { font-size: 11.5px; color: var(--muted); }

/* ===== Map placeholder ===== */
.map-shell {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #ecedfa 0%, #d8fde9 100%);
  border: 1px solid var(--line);
  min-height: 480px;
  box-shadow: var(--sh-1);
}
.map-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(45,49,151,.05) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgba(45,49,151,.05) 1px, transparent 1px) 0 0 / 30px 30px;
}
.map-region {
  position: absolute;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  background: rgba(45,49,151,.08);
  border: 1.5px dashed rgba(45,49,151,.28);
}
.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
}
.map-pin .pin-head {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 6px 14px rgba(10,14,46,.2);
  background: var(--brand-indigo);
}
.map-pin.alt .pin-head { background: var(--brand-green); }
.map-pin.warn .pin-head { background: var(--warn); }
.map-pin.danger .pin-head { background: var(--danger); }
.map-pin .pin-stem {
  width: 2px; height: 8px; background: rgba(10,14,46,.2); margin-top: -2px;
}

/* Map legend */
.map-legend {
  position: absolute; top: 20px; left: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--sh-2);
  min-width: 220px;
}
.map-legend strong { display: block; font-size: 12px; font-weight: 700; }
.map-legend small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.map-legend ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.map-legend li { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; }
.map-legend li .swatch { width: 12px; height: 12px; border-radius: 50%; }

/* ===== Login ===== */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  background: var(--canvas);
}
.login-art {
  position: relative;
  background: var(--brand-indigo);
  color: #fff;
  padding: 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.login-art::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(0,243,124,.28), transparent 50%),
    radial-gradient(circle at 20% 90%, rgba(0,243,124,.18), transparent 50%);
}
.login-art h2 { position: relative; margin: 0; font-size: 48px; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; max-width: 460px; }
.login-art h2 em { font-style: italic; font-family: var(--font-serif); font-weight: 400; color: var(--brand-green); }
.login-art p { position: relative; max-width: 420px; color: rgba(255,255,255,.78); line-height: 1.55; }
.login-art .login-brand { display: flex; align-items: center; gap: 12px; position: relative; }
.login-art .login-brand-mark { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.login-art .login-brand-mark svg { width: 28px; height: 28px; }

.login-art .login-brand-block {
  position: relative;
  z-index: 1;
}
.login-art .login-brand-logo {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
.login-art .login-institucional {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 4px;
}
.login-art .login-institucional-label {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.login-art .login-institucional-logo {
  display: block;
  max-width: 190px;
  width: 100%;
  height: auto;
  opacity: .82;
}
.login-credit {
  display: block;
  margin-top: 22px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: 0.01em;
}
.login-credit span {
  display: inline-block;
  margin: 0 1px;
  transform: translateY(1px);
}
.login-stats {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.login-stat { padding: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 18px; }
.login-stat strong { display: block; font-size: 24px; font-weight: 700; }
.login-stat small { display: block; color: rgba(255,255,255,.7); font-size: 11px; font-weight: 600; margin-top: 4px; }

.login-form {
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px 80px;
  gap: 18px;
}
.login-form h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.login-form p { color: var(--muted); margin: 0; font-size: 14px; }

/* ===== Family detail ===== */
.family-head {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
}
.family-avatar {
  width: 72px; height: 72px;
  border-radius: 24px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--tone-peach), var(--tone-rose));
  color: var(--ink);
  font-size: 22px; font-weight: 800;
}
.family-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.family-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); font-weight: 600;
}
.family-meta-item svg { width: 13px; height: 13px; }

/* Members grid */
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.member {
  padding: 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.member .member-avatar {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-weight: 800;
}
.member strong { font-size: 13.5px; font-weight: 700; }
.member small { font-size: 11.5px; color: var(--muted); }
.member-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 24px; }
.timeline::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 6px;
  width: 2px; background: var(--line);
}
.t-item { padding: 10px 0 14px 12px; position: relative; }
.t-item::before {
  content: ""; position: absolute;
  left: -22px; top: 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--brand-indigo);
}
.t-item.alt::before { border-color: var(--brand-green); }
.t-item strong { display: block; font-size: 13px; font-weight: 700; }
.t-item small { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.t-item p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* ===== Banner illustration container ===== */
.illus-bg {
  position: absolute;
  right: -30px; bottom: -30px;
  width: 220px; height: 220px;
  opacity: .32;
  pointer-events: none;
}

/* ===== Utility ===== */
.row { display: flex; align-items: center; gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.row.gap-sm { gap: 8px; }
.spacer { flex: 1; }
.flex-col { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 1280px) {
  .dash { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .sb { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .login { grid-template-columns: 1fr; }
  .login-form { padding: 32px; }
}

/* ===== SOMAS PHP integration layer =====
   Pequena camada de compatibilidade para templates PHP existentes.
   Mantém uma única folha visual v6 sem depender do CSS legado. */

:root {
  --bg: var(--canvas);
  --bg-soft: var(--canvas);
  --surface-soft: var(--canvas);
  --surface-muted: var(--canvas-2);
  --primary: var(--brand-indigo);
  --primary-dark: var(--ink);
  --primary-strong: var(--brand-indigo-700);
  --primary-soft: var(--brand-indigo-50);
  --secondary: var(--brand-green-600);
  --secondary-soft: var(--brand-green-50);
  --accent: var(--warn);
  --accent-soft: var(--warn-bg);
  --danger-text: var(--danger);
  --warning-text: var(--warn);
  --text: var(--ink);
  --muted-strong: var(--ink-3);
  --border: var(--line);
  --border-strong: var(--line);
  --shadow-soft: var(--sh-2);
  --shadow-card: var(--sh-1);
  --shadow-control: var(--sh-1);
}

.sb-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb-item > span:nth-child(2) {
  min-width: 0;
}

.sb-item > span:nth-child(2):not(.sb-badge) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-indigo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.login .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.login .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-green);
}

.login-art .login-hero-pill {
  position: relative;
  z-index: 1;
}

.login-form .login-lgpd-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  background: var(--canvas);
  border-radius: 14px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
}

.login-form .login-lgpd-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand-green-50);
  color: var(--brand-indigo);
}

.login-form .login-lgpd-icon svg {
  width: 18px;
  height: 18px;
}

.login-form .login-lgpd-card strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.alert-success,
.alert.success {
  background: var(--brand-green-50);
  border-color: transparent;
  color: #075a35;
}

.alert-error,
.alert.error,
.alert.danger {
  background: var(--danger-bg);
  border-color: transparent;
  color: var(--danger);
}

.alert-warning,
.alert.warning {
  background: var(--warn-bg);
  border-color: transparent;
  color: var(--warn);
}

.alert-info,
.alert.info {
  background: var(--brand-indigo-50);
  border-color: transparent;
  color: var(--brand-indigo);
}

.badge,
.badge-info,
.badge-warning,
.badge-error,
.badge-critical,
.badge-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--canvas);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge-success {
  background: var(--brand-green-50);
  color: #075a35;
}

.badge-info {
  background: var(--brand-indigo-50);
  color: var(--brand-indigo);
}

.badge-warning,
.badge.restrito {
  background: var(--warn-bg);
  color: var(--warn);
}

.badge-error,
.badge-critical,
.badge.sigiloso {
  background: var(--danger-bg);
  color: var(--danger);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--sh-1);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.cards-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.form-card,
.form-grid {
  display: grid;
  gap: 16px;
}

.form-card,
form.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--sh-1);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid .full-row,
.form-grid .full-width,
.form-grid .full,
.form-grid .full-span,
.form-actions.full-row,
.form-actions.full {
  grid-column: 1 / -1;
}

.form-card label,
.form-row label,
.form-grid label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

.form-card input,
.form-card select,
.form-card textarea,
.form-row input,
.form-row select,
.form-row textarea,
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  outline: 0;
  transition: border-color .12s, box-shadow .12s;
}

.form-card input,
.form-card select,
.form-row input,
.form-row select,
.form-grid input,
.form-grid select {
  height: 44px;
  padding: 0 14px;
}

.form-card textarea,
.form-row textarea,
.form-grid textarea {
  min-height: 100px;
  padding: 12px 14px;
  resize: vertical;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus,
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: var(--brand-indigo);
  box-shadow: 0 0 0 4px rgba(45,49,151,.14);
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.form-actions button,
.form-card button,
.panel button,
button.btn,
a.btn,
.button-secondary {
  text-decoration: none;
}

.form-actions button:not(.btn),
.form-card button:not(.btn),
.panel button:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.button-secondary,
.btn.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
}

.table-responsive,
.table-wrapper,
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  text-align: left;
  padding: 14px 16px;
  font-size: 13px;
  vertical-align: middle;
}

.table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
}

.table tbody tr {
  border-bottom: 1px solid var(--line-2);
}

.table tbody tr:hover {
  background: var(--canvas);
}

.table td {
  color: var(--ink-2);
}

.table td strong {
  color: var(--ink);
  font-weight: 700;
}

.table small,
.table-wrapper small {
  color: var(--muted);
  display: block;
  font-size: 11.5px;
  margin-top: 2px;
}

.table-link {
  color: var(--brand-indigo);
  font-weight: 800;
}

.t-avatar.tone-peach { background: linear-gradient(135deg, #ffd9b5, #ffb37a); }
.t-avatar.tone-blue { background: linear-gradient(135deg, #c9dbff, #8ba8f0); }
.t-avatar.tone-mint { background: linear-gradient(135deg, #b6f0d0, #6fdc9c); }
.t-avatar.tone-lilac { background: linear-gradient(135deg, #dcd6ff, #a594ff); }
.t-avatar.tone-rose { background: linear-gradient(135deg, #ffd0d8, #ff95a8); }
.t-avatar.tone-sand { background: linear-gradient(135deg, #f0e6cc, #d6c590); }

.global-search {
  position: relative;
}

.search-preview {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--sh-3);
}

.search-preview-item,
.search-preview-empty {
  display: grid;
  gap: 3px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}

.search-preview-item:last-child {
  border-bottom: 0;
}

.search-preview-item strong {
  color: var(--ink);
  font-size: 13px;
}

.search-preview-item small,
.search-preview-empty {
  color: var(--muted);
  font-size: 12px;
}

.search-preview-item.is-highlighted,
.search-preview-item:hover {
  background: var(--canvas);
}

.hero-stat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}

.hero-stat-foot-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.hero-stat-foot-label {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.hero-stat-trend {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--brand-green-50);
  text-align: right;
}

.hero-stat-trend strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ok);
  letter-spacing: -0.01em;
}

.hero-stat-trend span {
  margin-top: 2px;
  color: var(--ok);
  font-size: 10.5px;
  font-weight: 700;
  opacity: .8;
}

.bars {
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
}

.bar-val {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.card.card-priority {
  position: relative;
}

.card-priority-strip {
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--danger), var(--warn));
  opacity: .85;
}

.li-meta-strong {
  font-size: 18px;
  font-weight: 800;
}

.quick-actions .quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.quick-action {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}

.quick-action:hover {
  border-color: var(--brand-indigo);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}

.quick-action-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--brand-indigo-50);
  color: var(--brand-indigo);
}

.quick-action-icon svg {
  width: 18px;
  height: 18px;
}

.quick-action-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.quick-action-arrow {
  color: var(--muted);
}

.quick-action-arrow svg {
  width: 14px;
  height: 14px;
}

.metric-cloud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.metric-mini {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.metric-mini:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}

.metric-mini-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metric-mini-value {
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.switch {
  position: relative;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas-2);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.switch-knob {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--sh-1);
  transition: left .15s;
}

.switch[data-on="true"] {
  background: var(--brand-green);
  border-color: var(--brand-green);
}

.switch[data-on="true"] .switch-knob {
  left: 21px;
}

@media (max-width: 720px) {
  .main {
    padding: 18px;
  }

  .topbar,
  .page-head {
    grid-template-columns: 1fr;
  }

  .top-actions {
    justify-content: space-between;
  }

  .profile-pill {
    flex: 1;
    min-width: 0;
  }

  .profile-pill .pp-info {
    min-width: 0;
  }

  .profile-pill .pp-info strong,
  .profile-pill .pp-info small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .login-art {
    padding: 34px 26px;
    gap: 28px;
  }

  .login-art h2 {
    font-size: 38px;
  }

  .login-stats,
  .stat-row,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .hero-banner {
    min-height: 240px;
    padding: 28px;
  }

  .hero-banner h2 {
    font-size: 26px;
  }
}


/* ===== SOMAS existing PHP module v6 layer ===== */
/* =====================================================================
 * SOMAS · Design System v6
 * ---------------------------------------------------------------------
 * Stylesheet de migração progressiva. Carregado DEPOIS de
 * design-system-v5.css para sobrescrever apenas o necessário, tela a
 * tela. Não duplicar o v5: aqui ficam só as diferenças do alvo v6
 * (referência: handoff_v6/prototype/styles.css).
 *
 * Regras desta etapa:
 *   - Não remover style.css legado.
 *   - Não substituir design-system-v5.css.
 *   - Cada PR de migração visual adiciona/ajusta seletores aqui.
 *   - Nada de regra de negócio, JS ou layout server-side.
 * ===================================================================== */

/* =====================================================================
 * Login (Fase 2.1)
 * Espelha handoff_v6/prototype/src/screens/login.jsx + styles.css §Login.
 * O v5 já cobre .login, .login-art, .login-form, .login-stats, .login-stat,
 * .field, .input, .hint, .eyebrow, .alert, .btn. Aqui ficam apenas os
 * blocos novos do v6: marca SOMAS principal, marca SEMAS institucional,
 * card LGPD do formulário e crédito afetivo.
 * ===================================================================== */

.login-art .login-brand-block {
  position: relative;
  z-index: 1;
}
.login-art .login-brand-logo {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .18));
}

.login-art .login-institucional {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 24px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.login-art .login-institucional-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.login-art .login-institucional-logo {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  opacity: .82;
}

.login-form .login-lgpd-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  background: var(--canvas);
  border-radius: 14px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
}
.login-form .login-lgpd-card .login-lgpd-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand-green-50);
  color: var(--brand-indigo);
}
.login-form .login-lgpd-card .login-lgpd-icon svg {
  width: 18px;
  height: 18px;
}
.login-form .login-lgpd-card strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
  color: var(--ink);
}

.login-form .login-credit {
  display: block;
  margin-top: 22px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: 0.01em;
}
.login-form .login-credit .login-credit-heart {
  display: inline-block;
  margin: 0 1px;
  transform: translateY(1px);
}

/* Hero do painel art alinhado ao v6: pill informativa + título serif em pt-br */
.login-art .login-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.login-art .login-hero-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-green);
}

/* =====================================================================
 * Dashboard / Painel Geral (Fase 2.2)
 * Espelha handoff_v6/prototype/src/screens.jsx (Dashboard) +
 * styles.css §Dashboard. O v5 já cobre .page-head, .hero, .hero-banner,
 * .hero-stat, .gauge, .stat-row, .stat, .dash, .dash-col, .panel-head,
 * .tabs, .bars, .t, .t-person, .t-avatar, .list, .list-item, .li-mark,
 * .li-meta, .card, .btn. Aqui ficam só os deltas v6 + classes novas
 * substituindo seletores legados (dashboard-quick-panel, shortcut-grid,
 * dashboard-metric-cloud, mini-metric-card).
 * ===================================================================== */

/* Rodapé do hero-stat: número à esquerda + chip verde "este mês" à direita. */
.hero-stat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.hero-stat-foot-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.hero-stat-foot-label {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.hero-stat-trend {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--brand-green-50);
  text-align: right;
}
.hero-stat-trend strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ok);
}
.hero-stat-trend span {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ok);
  opacity: .8;
}

/* Card com faixa-prioridade no topo (gradient danger→warn). */
.card.card-priority {
  position: relative;
}
.card.card-priority .card-priority-strip {
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--danger), var(--warn));
  opacity: .85;
}
.list-item .li-meta-strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

/* Fluxos rápidos — grid de ações v6 com ícone + label + seta. */
.quick-actions .quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.quick-action {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.quick-action:hover {
  border-color: var(--brand-indigo);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.quick-action-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--brand-indigo-50);
  color: var(--brand-indigo);
}
.quick-action-icon svg {
  width: 18px;
  height: 18px;
}
.quick-action-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.quick-action-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}
.quick-action-arrow svg {
  width: 14px;
  height: 14px;
}
.quick-action:hover .quick-action-arrow {
  color: var(--brand-indigo);
}

/* Nuvem de métricas secundárias — cards compactos. */
.metric-cloud {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.metric-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.metric-mini:hover {
  border-color: var(--brand-indigo);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.metric-mini-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
}
.metric-mini-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* =====================================================================
 * Famílias · Lista (Fase 2.3A)
 * Espelha handoff_v6/prototype/src/screens.jsx (Familias) +
 * styles.css §Family detail / list. As classes .family-* já existem
 * no design-system-v5.css mas com prefixo .familias-v5 — a página
 * agora seta $somas_main_class = 'familias-v5 familias-v6', então as
 * regras antigas continuam ativas e este bloco adiciona apenas o que
 * o v6 trouxe de novo: empty-state contextual, resumo de filtro e
 * pequenos ajustes visuais.
 * ===================================================================== */

.family-filter-summary {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--canvas);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.4;
}
.family-filter-summary strong {
  color: var(--ink);
  font-weight: 700;
}

/* Empty state genérico — reutilizável em outras listas. */
.empty-state {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 24px;
}
.empty-state .empty-state-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--brand-indigo-50);
  color: var(--brand-indigo);
}
.empty-state .empty-state-icon svg {
  width: 24px;
  height: 24px;
}
.empty-state > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.empty-state strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.empty-state small {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* Linhas de tabela com aparência clicável (hover já existe no v5
 * via `.t tbody tr:hover`). Cursor explícito ajuda na descoberta. */
.familias-v6 .t tbody tr {
  cursor: default;
}
.familias-v6 .t .btn-ghost.btn-sm {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .empty-state {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* =====================================================================
 * Famílias · Detalhe / PEF (Fase 2.3B)
 * Espelha handoff_v6/prototype/src/screens.jsx (FamiliaDetalhe) +
 * styles.css §Family detail. O v5 já cobre .family-head, .family-avatar,
 * .family-meta, .family-meta-item, .timeline, .t-item, .stat, .card,
 * .panel, .panel-header, .pill, .btn. A página agora usa
 * $somas_main_class = 'pef-v5 pef-v6' e este bloco adiciona:
 *  - cabeçalho com ações alinhadas à direita
 *  - polimento de .pef-tabs (nav âncora) ao estilo v6
 *  - empty-states já reaproveitam .empty-state criada na Fase 2.3A.
 * ===================================================================== */

.pef-family-head {
  align-items: flex-start;
}
.pef-family-head .family-avatar {
  background: linear-gradient(135deg, var(--brand-indigo) 0%, var(--brand-indigo-700) 100%);
  color: #fff;
}
.pef-family-head .h-page {
  margin: 6px 0 0;
}
.pef-family-head .pef-head-actions {
  align-self: flex-start;
}
.pef-family-head .pef-head-actions .btn svg {
  width: 14px;
  height: 14px;
}

/* Nav âncora interna do PEF — visual de chip v6 substituindo o look legado. */
.pef-v6 .pef-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  margin: 0;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  list-style: none;
}
.pef-v6 .pef-tabs a {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  transition: background .12s, color .12s;
}
.pef-v6 .pef-tabs a:hover {
  background: var(--canvas);
  color: var(--ink);
}
.pef-v6 .pef-tabs a:focus-visible {
  outline: 2px solid var(--brand-indigo);
  outline-offset: 2px;
}

/* Timeline na Fase 2.3B usa o .timeline + .t-item do v5. Aqui só
 * garantimos espaço acima do bloco quando vem logo após o header. */
.pef-v6 .pef-timeline-list {
  margin-top: 12px;
}

@media (max-width: 1024px) {
  .pef-family-head {
    grid-template-columns: 1fr;
  }
  .pef-family-head .pef-head-actions {
    justify-content: flex-start !important;
  }
}

/* =====================================================================
 * Famílias · Nova família (Fase 2.3C)
 * Espelha handoff_v6/prototype/src/screens.jsx (NovaFamilia).
 * O stepper funcional (render_somas_stepper + initStepper em app.js),
 * o form, os campos, o CSRF, os inserts, o mapa Leaflet e o redirect
 * permanecem intactos. Esta seção apenas:
 *  - aplica layout 2-colunas com sidebar de orientação;
 *  - cria o card escuro de preview de código familiar;
 *  - estiliza o checklist informativo de boas práticas;
 *  - ajusta o stepper visualmente para o padrão v6 (números maiores,
 *    conector entre passos com cor de progresso).
 * Não cria step novo, não muda nomes de etapas, não toca em data-step.
 * ===================================================================== */

.novafamilia-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
}

/* Card escuro com preview do código FAM-AAAA-NNNNNN migrado para o
 * padrão compartilhado .somas-spotlight-card.tone-dark (Fase 2.7B). */

/* Checklist informativo migrado para .somas-checklist (Fase 2.9E). */

/* Stepper polido + step-panes + step-actions migrados para o padrão
 * compartilhado .somas-form-wizard (ver Fase 2.7B no final deste arquivo).
 * A tela continua marcada com .novafamilia-v6 no <main> para preservar
 * outras regras específicas, mas ganha também .somas-form-wizard. */

@media (max-width: 1024px) {
  .novafamilia-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * Prontuário · Novo Atendimento / Registrar evolução (Fase 2.4)
 * Espelha handoff_v6/prototype/src/screens.jsx (NovoAtendimento).
 * O backend (POST, INSERT/UPDATE, audit_log, whitelist de
 * confidentiality_level, gate de edição de restrito/sigiloso) ficou
 * intacto. Esta seção apenas:
 *  - aplica layout 2-colunas (form principal + lateral de sigilo);
 *  - troca o <select> de sigilo por radio-cards visuais com mesmos
 *    values (normal | restrito | sigiloso) — POST permanece igual;
 *  - exibe alerta LGPD condicional quando restrito/sigiloso vem
 *    pré-selecionado (server-side, sem JS);
 *  - sticky action bar inferior com pill de auditoria + botões.
 * Não cria tags, não cria justificativa obrigatória, não cria
 * encaminhamento sugerido, não toca no <select name="family_id"
 * onchange="this.form.submit()"> que recarrega a lista de membros.
 * ===================================================================== */

.novoatendimento-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Sigilo — radio-cards. Inputs ficam visualmente ocultos mas
 * acessíveis a leitores de tela (sr-only). */
.attendance-sigilo-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.attendance-sigilo-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 14px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--canvas);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.attendance-sigilo-card:hover {
  border-color: var(--line);
}
.attendance-sigilo-card.is-selected {
  background: var(--ink);
  color: #fff;
  border-color: var(--brand-indigo);
}
.attendance-sigilo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.attendance-sigilo-input:focus-visible + .attendance-sigilo-icon {
  outline: 2px solid var(--brand-indigo);
  outline-offset: 2px;
}
.attendance-sigilo-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex: 0 0 auto;
}
.attendance-sigilo-icon svg {
  width: 18px;
  height: 18px;
}
.attendance-sigilo-card.tone-mint .attendance-sigilo-icon {
  background: var(--brand-green-50);
  color: var(--ok);
}
.attendance-sigilo-card.tone-warn .attendance-sigilo-icon {
  background: var(--warn-bg);
  color: var(--warn);
}
.attendance-sigilo-card.tone-rose .attendance-sigilo-icon {
  background: var(--danger-bg);
  color: var(--danger);
}
.attendance-sigilo-card.is-selected .attendance-sigilo-icon {
  background: var(--brand-green);
  color: var(--ink);
}
.attendance-sigilo-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.attendance-sigilo-body strong {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.attendance-sigilo-body small {
  font-size: 11.5px;
  line-height: 1.4;
  opacity: .82;
}

/* Alerta LGPD condicional. Server-side only (sem JS). */
.attendance-sigilo-alert {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--warn-bg);
  color: var(--ink-2);
}
.attendance-sigilo-alert-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(201, 122, 4, .15);
  color: var(--warn);
}
.attendance-sigilo-alert-icon svg {
  width: 16px;
  height: 16px;
}
.attendance-sigilo-alert strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.attendance-sigilo-alert small {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

/* Card-aviso de auditoria — discreto, sempre visível. */
.attendance-audit-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: flex-start;
  background: var(--brand-indigo-50);
  border-color: transparent;
}
.attendance-audit-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(45, 49, 151, .12);
  color: var(--brand-indigo);
  flex: 0 0 auto;
}
.attendance-audit-icon svg {
  width: 18px;
  height: 18px;
}
.attendance-audit-card strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.attendance-audit-card small {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

/* Action bar inferior migrada para .somas-actionbar (Fase 2.7B). */

/* form-grid já existe no v5; aqui apenas garantimos que dentro dos
 * cards o gap fica coerente com o resto do v6. */
.novoatendimento-v6 .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.novoatendimento-v6 .form-grid .field.full-row,
.novoatendimento-v6 .form-grid label.full-row {
  grid-column: 1 / -1;
}
.novoatendimento-v6 .form-grid .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.novoatendimento-v6 .form-grid .hint {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .novoatendimento-grid {
    grid-template-columns: 1fr;
  }
  .novoatendimento-v6 .form-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * Plano Familiar / Plano de Acompanhamento (Fase 2.5)
 * Espelha handoff_v6/prototype/src/screens.jsx (PlanoFamiliar).
 * O backend continua intacto: 5 ações POST (add_goal, add_plan_action,
 * update_action_status, add_evaluation, change_plan_status), todas as
 * whitelists, register_audit em todas as ações.
 * Eixos do protótipo (Saúde/Renda/Educação) NÃO foram implementados —
 * não existe coluna `eixo` em followup_plan_goals. O progresso é
 * derivado de dados reais: ações concluídas / ações não-canceladas.
 * ===================================================================== */

.plano-grid {
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Hero do plano — gradient lilás → verde do protótipo. */
.plano-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr);
  gap: 28px;
  padding: 28px;
  background: linear-gradient(135deg, var(--brand-indigo-50), var(--brand-green-50));
  border-color: transparent;
}
.plano-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.plano-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #fff;
  color: var(--brand-indigo);
}
.plano-hero-mark svg {
  width: 24px;
  height: 24px;
}
.plano-hero-text {
  min-width: 0;
}
.plano-hero-text h2 {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.plano-hero-status {
  color: var(--brand-indigo);
}
.plano-hero-progress {
  align-self: flex-start;
  min-width: 220px;
}
.plano-hero-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.plano-hero-progress-head small {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.plano-hero-progress-head strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-indigo);
}
.plano-hero-progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  overflow: hidden;
}
.plano-hero-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-indigo), var(--brand-green));
  transition: width .25s ease;
}
.plano-hero-progress-meta {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

/* Resumo do plano — 6 mini-blocos. */
.plano-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.plano-details-grid > div {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--canvas);
  border: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plano-details-grid span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.plano-details-grid strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

/* Narrativa: diagnóstico / objetivo / resultados esperados. */
.plano-narrative {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.plano-narrative > div small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.plano-narrative p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Meta-card. */
.plano-goal-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.plano-goal {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--canvas);
  border: 1px solid var(--line-2);
  transition: background .15s, border-color .15s;
}
.plano-goal.is-done {
  background: var(--brand-green-50);
  border-color: rgba(24, 167, 99, .22);
}
.plano-goal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.plano-goal-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.plano-goal-desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.plano-goal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  font-size: 12px;
  color: var(--ink-2);
}
.plano-goal-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.plano-goal-foot svg {
  width: 13px;
  height: 13px;
  color: var(--muted);
}

/* Action-card com form inline opcional. */
.plano-action-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.plano-action {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--canvas);
  border: 1px solid var(--line-2);
}
.plano-action.is-done {
  background: var(--brand-green-50);
  border-color: rgba(24, 167, 99, .22);
}
.plano-action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.plano-action-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.plano-action-notes {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px dashed var(--line);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
.plano-action-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font-size: 12px;
  color: var(--ink-2);
}
.plano-action-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.plano-action-foot svg {
  width: 13px;
  height: 13px;
  color: var(--muted);
}
.plano-action-update {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.plano-action-update .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.plano-action-update .field span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Timeline de avaliações reusa .timeline + .t-item do v5. */
.plano-eval-timeline {
  margin-top: 14px;
}
.plano-eval-next {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--brand-indigo-50);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* Sidebar de forms — compacta, 2 colunas no grid interno. */
.plano-side .card-lg {
  padding: 20px;
}
.plano-side-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.plano-side-form .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plano-side-form .field span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.plano-side-form .field.full-row {
  grid-column: 1 / -1;
}
.plano-side-form .form-actions {
  display: flex;
  justify-content: flex-end;
}

.plano-status-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.plano-status-form .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plano-status-form .field span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
}

@media (max-width: 1024px) {
  .plano-grid {
    grid-template-columns: 1fr;
  }
  .plano-hero {
    grid-template-columns: 1fr;
  }
  .plano-hero-progress {
    min-width: 0;
  }
}
@media (max-width: 720px) {
  .plano-side-form {
    grid-template-columns: 1fr;
  }
  .plano-action-update {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =====================================================================
 * Benefícios · Lista (Fase 2.6A)
 * Espelha handoff_v6/prototype/src/screens.jsx (Beneficios).
 * O backend está intacto. Os KPIs são derivados de $benefits já
 * carregado (sem query nova) e ficam labelados como "nos resultados
 * visíveis" para deixar isso explícito.
 * As tabs de status acionam o filtro real ?status= preservando os
 * demais filtros via querystring.
 * ===================================================================== */

.beneficios-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

.beneficios-filter-card .beneficios-filter-row {
  margin: 0;
}

/* Tabs de status migradas para .somas-status-tabs (Fase 2.9E). */

/* Botões de ação no fim da linha — compactos com ícone só. */
.beneficios-v6 .t .btn-ghost.btn-sm {
  padding: 6px 10px;
  margin-left: 4px;
}
.beneficios-v6 .t .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}

/* Card escuro de CTA na sidebar. */
.beneficios-cta-card {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
}
.beneficios-cta-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.beneficios-cta-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--brand-green);
  color: var(--ink);
}
.beneficios-cta-icon svg {
  width: 16px;
  height: 16px;
}
.beneficios-cta-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
}
.beneficios-cta-head small {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .65);
}
.beneficios-cta-card p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .7);
}

@media (max-width: 1024px) {
  .beneficios-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * Benefícios · Nova Solicitação (Fase 2.6B)
 * Espelha handoff_v6/prototype/src/screens.jsx (form wizard de 4 etapas).
 * Reaproveita o stepper funcional já existente (render_somas_stepper +
 * initStepper no app.js). Backend intacto: 11 campos POST, validações,
 * INSERTs em benefit_requests e benefit_status_history, generate_protocol,
 * audit_log('create','benefits',...), redirect para beneficios/visualizar.
 *
 * Grande parte do visual reusa a estética da Nova Família (Fase 2.3C):
 *  - layout 2 colunas com sidebar de orientação;
 *  - card escuro com preview do protocolo;
 *  - checklist informativo de boas práticas;
 *  - polimento visual do stepper.
 * Em vez de duplicar regras, estendemos os seletores existentes da Fase
 * 2.3C para também valer em .novobeneficio-v6.
 * ===================================================================== */

.novobeneficio-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
}

/* Card escuro de preview migrado para .somas-spotlight-card.tone-dark
 * (Fase 2.7B), com classes utilitárias .spotlight-code-* para o conteúdo
 * eyebrow + value mono + meta. */

/* Checklist informativo migrado para .somas-checklist (Fase 2.9E). */

/* Stepper + step-pane + step-actions migrados para .somas-form-wizard
 * (Fase 2.7B). A tela continua com .novobeneficio-v6 no <main> para
 * preservar regras específicas, e ganha também .somas-form-wizard. */

@media (max-width: 1024px) {
  .novobeneficio-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * Benefícios · Visualizar solicitação (Fase 2.6C)
 * Tela 100% de leitura. Espelha o protótipo v6 reaproveitando estética
 * de hero do PEF (Fase 2.3B) + timeline do PEF/Plano.
 * Backend está intacto (2 SELECTs + audit_log('view') + 3 helpers
 * de checklist). Os 3 links de impressão e a consulta pública vêm das
 * rotas reais já existentes.
 * ===================================================================== */

.beneficio-detalhe-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Hero card com protocolo, status e ações de impressão. */
.beneficio-detalhe-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 24px;
  padding: 28px;
  background: linear-gradient(135deg, var(--brand-indigo-50), var(--brand-green-50));
  border-color: transparent;
}
.beneficio-detalhe-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
}
.beneficio-detalhe-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #fff;
  color: var(--brand-indigo);
}
.beneficio-detalhe-hero-mark svg {
  width: 24px;
  height: 24px;
}
.beneficio-detalhe-hero-text {
  min-width: 0;
}
.beneficio-detalhe-hero-text .eyebrow {
  font-size: 13px;
  color: var(--brand-indigo);
}
.beneficio-detalhe-hero-text h2 {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.beneficio-detalhe-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: center;
  justify-content: flex-end;
}
.beneficio-detalhe-hero-actions .btn svg {
  width: 14px;
  height: 14px;
}

/* Grid de detalhes migrado para .somas-info-grid (Fase 2.9E). */

/* Blocos de texto longo (Motivo, Parecer). */
.beneficio-detalhe-text {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
}
.beneficio-detalhe-justification {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--canvas);
  border-left: 3px solid var(--brand-indigo);
}
.beneficio-detalhe-justification small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.beneficio-detalhe-justification p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  white-space: pre-wrap;
}

/* Checklist v6 — leitura, sem inputs (a fonte é benefit_checklist_decode). */
.beneficio-detalhe-checklist {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.beneficio-detalhe-checklist li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--canvas);
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--ink-2);
}
.beneficio-detalhe-checklist li.is-done {
  background: var(--brand-green-50);
  border-color: rgba(24, 167, 99, .22);
  color: var(--ink);
}
.beneficio-detalhe-checklist-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line-2);
}
.beneficio-detalhe-checklist li.is-done .beneficio-detalhe-checklist-mark {
  background: var(--brand-green);
  border-color: transparent;
  color: var(--ink);
}
.beneficio-detalhe-checklist-mark svg {
  width: 14px;
  height: 14px;
}

/* Timeline de histórico — reusa .timeline + .t-item do v5. */
.beneficio-detalhe-history {
  margin-top: 14px;
}
.beneficio-detalhe-history .t-item strong {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Card escuro para consulta pública. */
.beneficio-detalhe-portal-card {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
}
.beneficio-detalhe-portal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.beneficio-detalhe-portal-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--brand-green);
  color: var(--ink);
}
.beneficio-detalhe-portal-icon svg {
  width: 16px;
  height: 16px;
}
.beneficio-detalhe-portal-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
}
.beneficio-detalhe-portal-head small {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .65);
}
.beneficio-detalhe-portal-card p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .7);
}

@media (max-width: 1024px) {
  .beneficio-detalhe-grid {
    grid-template-columns: 1fr;
  }
  .beneficio-detalhe-hero {
    grid-template-columns: 1fr;
  }
  .beneficio-detalhe-hero-actions {
    justify-content: flex-start;
  }
}

/* =====================================================================
 * Benefícios · Analisar (Fase 2.6D)
 * Tela de decisão técnica. Backend intacto: UPDATE em benefit_requests
 * + INSERT em benefit_status_history + audit_log('analyze'), todas as
 * validações condicionais (benefit_requires_complete_checklist,
 * decisão indeferido exigindo vulnerabilidade/parecer/justificativa,
 * concedido/entregue exigindo autorização, entregue exigindo nome do
 * recebedor) permanecem 100% server-side.
 *
 * Visual:
 *  - hero card com resumo do protocolo + família + checklist count;
 *  - radio-cards para decisão (4 opções, mesmos values do select original);
 *  - layout 2 colunas com sidebar lateral (responsabilidade + regras);
 *  - checklist visual em grid;
 *  - action bar inferior com pill de auditoria.
 * ===================================================================== */

.analise-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Hero resumo (protocolo + família). */
.analise-resumo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}
.analise-resumo-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.analise-resumo-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-indigo-50);
  color: var(--brand-indigo);
}
.analise-resumo-mark svg {
  width: 20px;
  height: 20px;
}
.analise-resumo h2 {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.analise-resumo .eyebrow {
  font-size: 12px;
}

/* Radio-cards de decisão. 4 cards horizontais. Mesma estética de
 * sigilo em Novo Atendimento (Fase 2.4) com classes próprias para
 * deixar o significado claro no markup. */
.analise-decisao-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.analise-decisao-card {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 14px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--canvas);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.analise-decisao-card:hover {
  border-color: var(--line);
}
.analise-decisao-card.is-selected {
  background: var(--ink);
  color: #fff;
  border-color: var(--brand-indigo);
}
.analise-decisao-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.analise-decisao-input:focus-visible + .analise-decisao-icon {
  outline: 2px solid var(--brand-indigo);
  outline-offset: 2px;
}
.analise-decisao-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  flex: 0 0 auto;
}
.analise-decisao-icon svg {
  width: 16px;
  height: 16px;
}
.analise-decisao-card.tone-blue  .analise-decisao-icon { background: rgba(22,54,128,.12);  color: var(--tone-blue-ink); }
.analise-decisao-card.tone-warn  .analise-decisao-icon { background: var(--warn-bg);        color: var(--warn); }
.analise-decisao-card.tone-mint  .analise-decisao-icon { background: var(--brand-green-50); color: var(--ok); }
.analise-decisao-card.tone-rose  .analise-decisao-icon { background: var(--danger-bg);      color: var(--danger); }
.analise-decisao-card.is-selected .analise-decisao-icon {
  background: var(--brand-green);
  color: var(--ink);
}
.analise-decisao-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.analise-decisao-body strong {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.analise-decisao-body small {
  font-size: 11.5px;
  line-height: 1.4;
  opacity: .82;
}

/* Form grid genérico desta tela. */
.analise-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.analise-form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.analise-form-grid .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.analise-form-grid .field.full-row {
  grid-column: 1 / -1;
}
.analise-form-grid .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Checklist v6 em grid. */
.analise-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.analise-checklist-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--canvas);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  position: relative;
}
.analise-checklist-item:hover {
  border-color: var(--line);
}
.analise-checklist-item.is-checked {
  background: var(--brand-green-50);
  border-color: rgba(24, 167, 99, .25);
}
.analise-checklist-item input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.analise-checklist-item input[type="checkbox"]:focus-visible + .analise-checklist-mark {
  outline: 2px solid var(--brand-indigo);
  outline-offset: 2px;
}
.analise-checklist-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line-2);
  transition: background .12s, color .12s;
}
.analise-checklist-mark svg {
  width: 14px;
  height: 14px;
}
.analise-checklist-item.is-checked .analise-checklist-mark {
  background: var(--brand-green);
  color: var(--ink);
  border-color: transparent;
}
.analise-checklist-label {
  font-size: 12.5px;
  color: var(--ink-2);
}
.analise-checklist-item.is-checked .analise-checklist-label {
  color: var(--ink);
  font-weight: 600;
}

/* Card de responsabilidade técnica. */
.analise-audit-card {
  background: var(--brand-indigo-50);
  border-color: transparent;
}
.analise-audit-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.analise-audit-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(45, 49, 151, .14);
  color: var(--brand-indigo);
}
.analise-audit-icon svg {
  width: 18px;
  height: 18px;
}
.analise-audit-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.analise-audit-head small {
  font-size: 11.5px;
  color: var(--ink-3);
}
.analise-audit-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.analise-audit-card code {
  background: rgba(45, 49, 151, .1);
  color: var(--brand-indigo);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 6px;
}

/* Lista de regras condicionais migrada para .somas-rule-list (Fase 2.9E). */

/* Action bar inferior migrada para .somas-actionbar (Fase 2.7B). */

@media (max-width: 1024px) {
  .analise-grid {
    grid-template-columns: 1fr;
  }
  .analise-resumo {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * Padrões compartilhados (Fase 2.7B — Consolidação)
 * ---------------------------------------------------------------------
 * Consolida três padrões que estavam duplicados entre telas migradas:
 *
 *  1. .somas-form-wizard
 *     Estiliza o stepper + step-panes + step-actions de forma única.
 *     Usado por Nova Família e Nova Solicitação. Preserva todos os
 *     hooks data-* do JS (data-somas-stepper, data-step, data-step-next,
 *     data-step-prev, data-step-review, data-review-label).
 *
 *  2. .somas-actionbar
 *     Barra inferior full-width com pill informativa à esquerda e
 *     botões à direita. Usada em Novo Atendimento e Analisar Benefício.
 *
 *  3. .somas-spotlight-card (+ .tone-dark / .tone-soft)
 *     Card de destaque com 2 variantes de fundo. Sub-padrão
 *     .spotlight-code-* (eyebrow + value mono + meta) usado pelos
 *     previews de código/protocolo em Nova Família e Nova Solicitação.
 *
 * Nenhuma destas regras toca PHP, banco, regra de negócio ou JS.
 * ===================================================================== */

/* ---- 1. Form wizard ---- */
.somas-form-wizard .somas-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.somas-form-wizard .somas-stepper .step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  transition: background .12s, color .12s;
}
.somas-form-wizard .somas-stepper .step:hover {
  background: var(--canvas);
}
.somas-form-wizard .somas-stepper .step.active,
.somas-form-wizard .somas-stepper .step.done {
  color: var(--ink);
}
.somas-form-wizard .somas-stepper .step-circle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  transition: background .12s, color .12s, box-shadow .12s;
}
.somas-form-wizard .somas-stepper .step.active .step-circle {
  background: var(--brand-indigo);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(45, 49, 151, .22);
}
.somas-form-wizard .somas-stepper .step.done .step-circle {
  background: var(--brand-indigo);
  color: #fff;
}
.somas-form-wizard .somas-stepper .step-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.somas-form-wizard .somas-stepper .step-connector {
  flex: 1;
  height: 2px;
  min-width: 18px;
  background: var(--line);
  border-radius: 999px;
}

.somas-form-wizard .step-pane h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.somas-form-wizard .step-pane .step-hint {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.somas-form-wizard .step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.somas-form-wizard .step-actions-right {
  display: inline-flex;
  gap: 8px;
}

/* ---- 2. Action bar ---- */
.somas-actionbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sh-2);
}
.somas-actionbar-meta {
  display: inline-flex;
  align-items: center;
}
.somas-actionbar .btn svg {
  width: 14px;
  height: 14px;
}

/* ---- 3. Spotlight card ---- */
.somas-spotlight-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-color: transparent;
}
.somas-spotlight-card.tone-dark {
  background: var(--ink);
  color: #fff;
}
.somas-spotlight-card.tone-soft {
  background: var(--brand-indigo-50);
  color: var(--ink);
}

/* Sub-padrão: preview de código mono (FAM-AAAA-NNNNNN / SOMAS-BEN-...). */
.somas-spotlight-card .spotlight-code-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.somas-spotlight-card.tone-dark .spotlight-code-eyebrow {
  color: rgba(255, 255, 255, .6);
}
.somas-spotlight-card.tone-soft .spotlight-code-eyebrow {
  color: var(--muted);
}
.somas-spotlight-card .spotlight-code-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.somas-spotlight-card.tone-dark .spotlight-code-value {
  color: #fff;
}
.somas-spotlight-card.tone-soft .spotlight-code-value {
  color: var(--ink);
}
.somas-spotlight-card .spotlight-code-meta {
  font-size: 11px;
}
.somas-spotlight-card.tone-dark .spotlight-code-meta {
  color: rgba(255, 255, 255, .55);
}
.somas-spotlight-card.tone-soft .spotlight-code-meta {
  color: var(--muted);
}

/* ---- 4. Status tabs (consolidação Fase 2.9A · retroaplicado Fase 2.9E) ---
 * Tabs de atalho para o filtro ?status= em telas de listagem.
 * Retroaplicado em Benefícios-lista e Encaminhamentos-lista na Fase 2.9E
 * (as classes antigas .beneficios-status-tabs e .encaminhamentos-status-tabs
 * foram removidas do CSS e o markup passou a usar .somas-status-tabs). */
.somas-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.somas-status-tabs a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--canvas);
  transition: background .12s, color .12s;
}
.somas-status-tabs a:hover {
  background: var(--canvas-2);
  color: var(--ink);
}
.somas-status-tabs a.active {
  background: var(--ink);
  color: #fff;
}
.somas-status-tabs a:focus-visible {
  outline: 2px solid var(--brand-indigo);
  outline-offset: 2px;
}

/* ---- 5. Checklist informativo (consolidação Fase 2.9E) -----------------
 * Lista vertical de boas práticas com ícone tick verde + título + texto.
 * Consolida 4 ocorrências do mesmo padrão criadas progressivamente nas
 * Fases 2.3C (Nova Família), 2.6B (Nova Solicitação), 2.8B (Novo
 * Encaminhamento) e 2.9B (Inscrever em Programa). */
.somas-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.somas-checklist li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: flex-start;
}
.somas-checklist-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: var(--brand-green-50);
  color: var(--ok);
}
.somas-checklist-icon svg {
  width: 16px;
  height: 16px;
}
.somas-checklist li strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.somas-checklist li small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* ---- 6. Info grid (consolidação Fase 2.9E) -----------------------------
 * Grid responsivo de mini-cards canvas com label uppercase + valor bold.
 * Consolida 3 ocorrências criadas nas Fases 2.6C (Visualizar Benefício),
 * 2.8C (Visualizar Encaminhamento) e 2.9C (Visualizar Programa). */
.somas-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.somas-info-grid > div {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--canvas);
  border: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.somas-info-grid span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.somas-info-grid strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  word-break: break-word;
}

/* ---- 7. Rule list (consolidação Fase 2.9E) -----------------------------
 * Lista lateral de regras condicionais / orientações técnicas com ícone
 * em fundo amarelo (semântica "regra/alerta condicional"). Consolida
 * 3 ocorrências: .analise-rule-list (Fase 2.6D), .responder-rule-list
 * (Fase 2.8D), .registrar-rule-list (Fase 2.9D).
 *
 * Observação: a versão de Registrar Programa usava marca em indigo
 * (regra mais informativa que condicional). Padronizamos para warn
 * por ser o tom da maioria — pequeno ajuste visual em Registrar
 * Programa registrado na entrega da Fase 2.9E. */
.somas-rule-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.somas-rule-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: flex-start;
}
.somas-rule-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: var(--warn-bg);
  color: var(--warn);
}
.somas-rule-mark svg {
  width: 16px;
  height: 16px;
}
.somas-rule-list li strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.somas-rule-list li small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}
.somas-rule-list code {
  background: rgba(45, 49, 151, .08);
  color: var(--brand-indigo);
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 5px;
}

/* =====================================================================
 * Encaminhamentos · Lista (Fase 2.8A)
 * Espelha estrutura de Benefícios-lista (Fase 2.6A): 2-col grid + tabs
 * de status atalho + sidebar com distribuição por tipo + card CTA.
 * O backend é intacto: 5 filtros, LIMIT 150, 3 permissões.
 * KPIs derivados em PHP dos $referrals visíveis (sem nova query).
 * ===================================================================== */

.encaminhamentos-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

.encaminhamentos-filter-card .encaminhamentos-filter-row {
  margin: 0;
}

/* Tabs de status migradas para .somas-status-tabs (Fase 2.9E). */

/* Botões de ação compactos na tabela. */
.encaminhamentos-v6 .t .btn-ghost.btn-sm {
  padding: 6px 10px;
  margin-left: 4px;
}
.encaminhamentos-v6 .t .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}

/* Pequenos ajustes nas células com várias linhas. */
.encaminhamentos-v6 .t td .pill {
  display: inline-flex;
  margin-top: 4px;
}

@media (max-width: 1024px) {
  .encaminhamentos-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * Encaminhamentos · Novo (Fase 2.8B)
 * Form único (sem stepper). Layout 2-col: card seccionado à esquerda,
 * orientações + spotlight de protocolo à direita, .somas-actionbar no
 * rodapé (do padrão compartilhado Fase 2.7B).
 * Backend intacto: 10 campos POST, 6 validações, INSERT em referrals
 * com status 'aberto', INSERT em referral_status_history e INSERT em
 * notifications (já existente), audit_log('create'), redirect para
 * visualizar.
 * ===================================================================== */

.novoencaminhamento-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Form grid local — auto-fit responsivo de 2 colunas. */
.novoencaminhamento-v6 .novoencaminhamento-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.novoencaminhamento-v6 .novoencaminhamento-form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.novoencaminhamento-v6 .novoencaminhamento-form-grid .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.novoencaminhamento-v6 .novoencaminhamento-form-grid .field.full-row,
.novoencaminhamento-v6 .novoencaminhamento-form-grid label.full-row {
  grid-column: 1 / -1;
}
.novoencaminhamento-v6 .novoencaminhamento-form-grid .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Checklist informativo migrado para .somas-checklist (Fase 2.9E). */

@media (max-width: 1024px) {
  .novoencaminhamento-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * Encaminhamentos · Visualizar (Fase 2.8C)
 * Tela 100% de leitura. Espelha o padrão de Visualizar Benefício
 * (Fase 2.6C) reaproveitando .somas-spotlight-card.tone-dark para o
 * card CTA "Responder", quando aplicável.
 * Backend intacto (2 SELECTs + audit_log('view')).
 * ===================================================================== */

.encaminhamento-detalhe-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Hero com protocolo, tipo e roteamento origem → destino. */
.encaminhamento-detalhe-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 24px;
  padding: 28px;
  background: linear-gradient(135deg, var(--brand-indigo-50), var(--brand-green-50));
  border-color: transparent;
}
.encaminhamento-detalhe-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
}
.encaminhamento-detalhe-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #fff;
  color: var(--brand-indigo);
}
.encaminhamento-detalhe-hero-mark svg {
  width: 24px;
  height: 24px;
}
.encaminhamento-detalhe-hero-text {
  min-width: 0;
}
.encaminhamento-detalhe-hero-text .eyebrow {
  font-size: 13px;
  color: var(--brand-indigo);
}
.encaminhamento-detalhe-hero-text h2 {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Bloco "Origem → Destino" no canto direito do hero. */
.encaminhamento-detalhe-hero-route {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(45, 49, 151, .12);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.encaminhamento-detalhe-hero-arrow {
  display: inline-grid;
  place-items: center;
  color: var(--brand-indigo);
}
.encaminhamento-detalhe-hero-arrow svg {
  width: 16px;
  height: 16px;
}

/* Mini-blocos canvas migrados para .somas-info-grid (Fase 2.9E). */

/* Texto longo (Motivo e Resposta). */
.encaminhamento-detalhe-text {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.encaminhamento-detalhe-history {
  margin-top: 14px;
}
.encaminhamento-detalhe-history .t-item strong {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .encaminhamento-detalhe-grid {
    grid-template-columns: 1fr;
  }
  .encaminhamento-detalhe-hero {
    grid-template-columns: 1fr;
  }
  .encaminhamento-detalhe-hero-route {
    width: 100%;
    justify-content: flex-start;
  }
}

/* =====================================================================
 * Encaminhamentos · Responder (Fase 2.8D)
 * Tela de resposta técnica. Backend intacto: UPDATE em referrals +
 * INSERT em referral_status_history + INSERT condicional em
 * notifications + audit_log('update'), todas as validações server-side
 * preservadas (status na whitelist; response obrigatória quando status
 * for respondido/concluído).
 * Visual: hero card resumo + layout 2-col + alerta condicional quando
 * o status escolhido exige resposta + sidebar de responsabilidade.
 * Reaproveita .somas-actionbar (Fase 2.7B).
 * ===================================================================== */

.responder-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Hero resumo (compacto). Estética próxima ao .analise-resumo da
 * Fase 2.6D mas adaptado ao roteamento origem→destino. */
.responder-resumo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}
.responder-resumo-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.responder-resumo-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-indigo-50);
  color: var(--brand-indigo);
}
.responder-resumo-mark svg {
  width: 20px;
  height: 20px;
}
.responder-resumo h2 {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.responder-resumo .eyebrow {
  font-size: 12px;
}
.responder-resumo-route {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--canvas);
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.responder-resumo-arrow {
  display: inline-grid;
  place-items: center;
  color: var(--brand-indigo);
}
.responder-resumo-arrow svg {
  width: 14px;
  height: 14px;
}

/* Texto longo de leitura (motivo). */
.responder-text {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
}

/* Form grid local. */
.responder-encaminhamento-v6 .responder-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.responder-encaminhamento-v6 .responder-form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.responder-encaminhamento-v6 .responder-form-grid .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.responder-encaminhamento-v6 .responder-form-grid .field.full-row {
  grid-column: 1 / -1;
}
.responder-encaminhamento-v6 .responder-form-grid .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Alerta condicional quando status pré-selecionado exige resposta. */
.responder-alert {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--warn-bg);
  color: var(--ink-2);
}
.responder-alert-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(201, 122, 4, .15);
  color: var(--warn);
}
.responder-alert-icon svg {
  width: 16px;
  height: 16px;
}
.responder-alert strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.responder-alert small {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

/* Card de responsabilidade técnica (mesma estética do .analise-audit-card
 * da Fase 2.6D, com classe própria por clareza semântica). */
.responder-audit-card {
  background: var(--brand-indigo-50);
  border-color: transparent;
}
.responder-audit-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.responder-audit-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(45, 49, 151, .14);
  color: var(--brand-indigo);
}
.responder-audit-icon svg {
  width: 18px;
  height: 18px;
}
.responder-audit-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.responder-audit-head small {
  font-size: 11.5px;
  color: var(--ink-3);
}
.responder-audit-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.responder-audit-card code {
  background: rgba(45, 49, 151, .1);
  color: var(--brand-indigo);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 6px;
}

/* Lista de regras condicionais migrada para .somas-rule-list (Fase 2.9E).
 * O code interno é coberto pela regra .somas-rule-list code (idêntica). */

@media (max-width: 1024px) {
  .responder-grid {
    grid-template-columns: 1fr;
  }
  .responder-resumo {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * Programas · Lista / Transferência de Renda (Fase 2.9A)
 * Tela espelha o padrão de Benefícios-lista (Fase 2.6A) e
 * Encaminhamentos-lista (Fase 2.8A): layout 2-col + .somas-status-tabs
 * (introduzido nesta fase como padrão compartilhado) + sidebar com
 * distribuição por programa + card spotlight explicativo sobre
 * Transferência de Renda.
 *
 * A rota /programas/index.php concentra todos os programas continuados
 * (transferência de renda federal + municipal + programas estaduais).
 * A sidebar mantém o link rotulado "Transferência de Renda" apontando
 * para esta tela, conforme decisão da Fase 1, e a tela explicita o
 * escopo no PageHead + card lateral.
 *
 * Backend intacto: 4 filtros GET, LIMIT 200, 3 permissões.
 * KPIs derivados em PHP dos $enrollments visíveis (sem nova query).
 * ===================================================================== */

.programas-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Botões de ação compactos na tabela. */
.programas-v6 .t .btn-ghost.btn-sm {
  padding: 6px 10px;
  margin-left: 4px;
}
.programas-v6 .t .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}

/* Avatar do programa na coluna principal (ícone tematizado). */
.programas-v6 .t-avatar {
  display: grid;
  place-items: center;
}
.programas-v6 .t-avatar svg {
  width: 18px;
  height: 18px;
  color: var(--ink);
}

@media (max-width: 1024px) {
  .programas-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * Programas · Inscrever (Fase 2.9B)
 * Form único (sem stepper). Layout 2-col: card seccionado à esquerda
 * (Identificação + Programa + Detalhes), sidebar à direita com card
 * spotlight explicativo sobre Transferência de Renda + checklist de
 * boas práticas. .somas-actionbar do padrão compartilhado (Fase 2.7B).
 * Backend intacto: 7 campos POST + hidden action, 2 validações, INSERT
 * com status 'ativo', audit_log('create'), redirect para visualizar.
 * ===================================================================== */

.inscrever-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

.inscrever-programa-v6 .inscrever-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.inscrever-programa-v6 .inscrever-form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inscrever-programa-v6 .inscrever-form-grid .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.inscrever-programa-v6 .inscrever-form-grid .field.full-row,
.inscrever-programa-v6 .inscrever-form-grid label.full-row {
  grid-column: 1 / -1;
}
.inscrever-programa-v6 .inscrever-form-grid .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Checklist informativo migrado para .somas-checklist (Fase 2.9E). */

@media (max-width: 1024px) {
  .inscrever-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * Programas · Visualizar inscrição (Fase 2.9C)
 * Tela 100% de leitura. Espelha o padrão de Visualizar Benefício
 * (Fase 2.6C) / Visualizar Encaminhamento (Fase 2.8C) reaproveitando
 * `.somas-spotlight-card.tone-dark` para o CTA "Registrar acompanhamento".
 * Backend intacto (2 SELECTs + audit_log('view')).
 * ===================================================================== */

.programa-detalhe-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Hero com programa, escopo e status. */
.programa-detalhe-hero {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
  background: linear-gradient(135deg, var(--brand-indigo-50), var(--brand-green-50));
  border-color: transparent;
}
.programa-detalhe-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  flex: 1;
}
.programa-detalhe-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #fff;
  color: var(--brand-indigo);
}
.programa-detalhe-hero-mark svg {
  width: 26px;
  height: 26px;
}
.programa-detalhe-hero-text {
  min-width: 0;
}
.programa-detalhe-hero-text .eyebrow {
  font-size: 13px;
  color: var(--brand-indigo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.programa-detalhe-hero-text h2 {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Mini-blocos canvas migrados para .somas-info-grid (Fase 2.9E). */

/* Texto longo (Observações + Descrição do programa). */
.programa-detalhe-text {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
}

/* Timeline de registros — reusa .timeline + .t-item do v5. */
.programa-detalhe-records {
  margin-top: 14px;
}
.programa-detalhe-records .t-item strong {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .programa-detalhe-grid {
    grid-template-columns: 1fr;
  }
  .programa-detalhe-hero {
    flex-direction: column;
  }
}

/* =====================================================================
 * Programas · Registrar acompanhamento (Fase 2.9D)
 * Form único. Espelha o padrão de Responder Encaminhamento (Fase 2.8D):
 * hero resumo compacto + layout 2-col + alerta condicional quando o
 * novo status pré-selecionado é "desligado" (exit_date será preenchida)
 * + sidebar de responsabilidade + .somas-actionbar.
 * Backend intacto: 7 campos POST + hidden id, 2 validações, INSERT em
 * program_records + UPDATE condicional em program_enrollments quando
 * new_status muda, audit_log('record'), redirect para visualizar.
 * ===================================================================== */

.registrar-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Hero resumo compacto (mesma estética do .responder-resumo). */
.registrar-resumo {
  display: flex;
  align-items: center;
  gap: 18px;
}
.registrar-resumo-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
.registrar-resumo-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-indigo-50);
  color: var(--brand-indigo);
}
.registrar-resumo-mark svg {
  width: 22px;
  height: 22px;
}
.registrar-resumo h2 {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.registrar-resumo .eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Form grid local. */
.registrar-programa-v6 .registrar-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.registrar-programa-v6 .registrar-form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.registrar-programa-v6 .registrar-form-grid .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.registrar-programa-v6 .registrar-form-grid .field.full-row {
  grid-column: 1 / -1;
}
.registrar-programa-v6 .registrar-form-grid .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Alerta de encerramento — quando new_status pré-selecionado é
 * "desligado", avisa que exit_date será preenchida. */
.registrar-alert {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--danger-bg);
  color: var(--ink-2);
}
.registrar-alert-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(210, 48, 72, .15);
  color: var(--danger);
}
.registrar-alert-icon svg {
  width: 16px;
  height: 16px;
}
.registrar-alert strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.registrar-alert small {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-3);
}
.registrar-alert code {
  background: rgba(210, 48, 72, .12);
  color: var(--danger);
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 5px;
}

/* Card de responsabilidade técnica (espelha .responder-audit-card). */
.registrar-audit-card {
  background: var(--brand-indigo-50);
  border-color: transparent;
}
.registrar-audit-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.registrar-audit-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(45, 49, 151, .14);
  color: var(--brand-indigo);
}
.registrar-audit-icon svg {
  width: 18px;
  height: 18px;
}
.registrar-audit-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.registrar-audit-head small {
  font-size: 11.5px;
  color: var(--ink-3);
}
.registrar-audit-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.registrar-audit-card code {
  background: rgba(45, 49, 151, .1);
  color: var(--brand-indigo);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 6px;
}

/* Lista de regras condicionais migrada para .somas-rule-list (Fase 2.9E).
 * Nota: a versão original usava marca em indigo (informativa); a versão
 * consolidada padroniza para warn (alerta condicional) — pequeno ajuste
 * visual aceito conforme entrega da Fase 2.9E. */

@media (max-width: 1024px) {
  .registrar-grid {
    grid-template-columns: 1fr;
  }
  .registrar-resumo {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =====================================================================
 * PAIF / CRAS · Lista (Fase 2.10A)
 * Painel de acompanhamentos sociofamiliares. Backend intacto:
 *  - 6 queries (KPI total filtrado, KPI open global, KPI priority global,
 *    KPI activities período, units, casos PAIF principais, atividades).
 *  - 6 filtros GET: start, end, status, priority_level, unit_id, q.
 *  - Whitelist status (6 valores) e priority (3 valores).
 *  - register_audit('view', 'paif', null, null, ...).
 * Visual: stat-row com 4 KPIs reais (vindos do backend),
 * .somas-status-tabs (consolidação Fase 2.9E), layout 2-col com tabela
 * principal e sidebar de oficinas + CTA.
 * ===================================================================== */

.paif-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Botões de ação compactos na tabela. */
.paif-v6 .t .btn-ghost.btn-sm {
  padding: 6px 10px;
  margin-left: 4px;
}
.paif-v6 .t .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}

/* Garantir que small com max-width não estoure célula. */
.paif-v6 .t td small {
  display: block;
  margin-top: 2px;
}

@media (max-width: 1024px) {
  .paif-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * PAIF / CRAS · Visualizar caso (Fase 2.10B)
 * Tela híbrida: leitura do caso + 2 forms POST (add_update e
 * change_status). Backend intacto: 4 queries (caso + updates + history +
 * units não usado aqui), 2 ações POST com `verify_csrf()`, INSERT em
 * paif_case_updates, UPDATE em paif_cases + INSERT em
 * paif_case_status_history, 3 register_audit (view/update/status_change),
 * closed_at automático em desligado/encerrado/cancelado.
 *
 * Visual: hero card com pills + .somas-info-grid (consolidado Fase 2.9E)
 * + cards seccionados de Situação/Objetivos/Ações + 2 forms inline
 * gated por paif.update + sidebar com timelines (evoluções + histórico
 * de status) + .somas-spotlight-card.tone-dark informativo.
 * ===================================================================== */

.paif-detalhe-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Hero com case_number + pills. Mesma estética do .beneficio-detalhe-hero
 * e .encaminhamento-detalhe-hero (Fases 2.6C / 2.8C). */
.paif-detalhe-hero {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
  background: linear-gradient(135deg, var(--brand-indigo-50), var(--brand-green-50));
  border-color: transparent;
}
.paif-detalhe-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  flex: 1;
}
.paif-detalhe-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #fff;
  color: var(--brand-indigo);
}
.paif-detalhe-hero-mark svg {
  width: 26px;
  height: 26px;
}
.paif-detalhe-hero-text {
  min-width: 0;
}
.paif-detalhe-hero-text .eyebrow {
  font-size: 13px;
  color: var(--brand-indigo);
}
.paif-detalhe-hero-text h2 {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Texto longo (Situação, Objetivos, Ações, Notas, Encerramento). */
.paif-detalhe-text {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
}

/* Form grid local. */
.paif-detalhe-v6 .paif-detalhe-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.paif-detalhe-v6 .paif-detalhe-form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.paif-detalhe-v6 .paif-detalhe-form-grid .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.paif-detalhe-v6 .paif-detalhe-form-grid .field.full-row,
.paif-detalhe-v6 .paif-detalhe-form-grid .form-actions.full-row {
  grid-column: 1 / -1;
}
.paif-detalhe-v6 .paif-detalhe-form-grid .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Timelines de evoluções e de histórico de status. */
.paif-detalhe-updates,
.paif-detalhe-status-history {
  margin-top: 14px;
}
.paif-detalhe-status-history .t-item strong {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .paif-detalhe-grid {
    grid-template-columns: 1fr;
  }
  .paif-detalhe-hero {
    flex-direction: column;
  }
}

/* =====================================================================
 * PAIF / CRAS · Criar caso (Fase 2.10C)
 * Form único (sem stepper). Layout 2-col: 3 cards seccionados à
 * esquerda (Identificação + Abertura/prioridade + Plano técnico),
 * sidebar à direita com .somas-spotlight-card.tone-dark (preview do
 * número do caso) + .somas-checklist (boas práticas). .somas-actionbar
 * no rodapé.
 *
 * Backend intacto: verify_csrf(), 11 campos POST, 1 validação
 * (family_id obrigatório), geração do case_number (SOMAS-PAIF-AAAA-N),
 * INSERT em paif_cases com status fixo 'em acompanhamento', INSERT em
 * paif_case_status_history (transição inicial), register_audit('create'),
 * redirect para paif/visualizar.
 * ===================================================================== */

.criar-paif-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

.criar-paif-v6 .criar-paif-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.criar-paif-v6 .criar-paif-form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.criar-paif-v6 .criar-paif-form-grid .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.criar-paif-v6 .criar-paif-form-grid .field.full-row,
.criar-paif-v6 .criar-paif-form-grid label.full-row {
  grid-column: 1 / -1;
}
.criar-paif-v6 .criar-paif-form-grid .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .criar-paif-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.12A — CREAS / PAEFI Lista
   Escopo: .creas-v6
   Sem regra nova, sem fluxo novo. Apenas pintura visual sobre o
   markup existente (filtros, tabs, tabela, banner de sigilo).
---------------------------------------------------------------------- */
.creas-sigilo-banner {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  margin: 18px 0 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--danger-bg);
  border: 1px solid rgba(125, 26, 44, .14);
  color: var(--ink-2);
}
.creas-sigilo-banner strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 2px;
}
.creas-sigilo-banner small {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}
.creas-sigilo-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(125, 26, 44, .12);
  color: var(--danger);
}
.creas-sigilo-icon svg {
  width: 20px;
  height: 20px;
}

.creas-v6 .creas-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.creas-v6 .creas-filter-card .creas-filter-row {
  margin: 0;
}
.creas-v6 .t {
  font-size: 13px;
}
.creas-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.creas-v6 .t td {
  vertical-align: top;
}
.creas-v6 .t td small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.creas-v6 .t .btn-ghost.btn-sm {
  white-space: nowrap;
}
.creas-v6 .t .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1024px) {
  .creas-sigilo-banner {
    grid-template-columns: 1fr;
  }
  .creas-sigilo-icon {
    width: 36px;
    height: 36px;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.12B — CREAS / PAEFI Visualizar caso
   Escopo: .creas-detalhe-v6
   Sem regra nova, sem fluxo novo. Reaproveita .somas-info-grid,
   .somas-form-wizard, .somas-actionbar, .timeline > .t-item, .empty-state
   e .pill.tone-* já consolidados. Apenas hero do caso + grid 2-col
   + bloco "Descrição e providências" são específicos desta tela.
---------------------------------------------------------------------- */
.creas-detalhe-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

.creas-detalhe-hero {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
  background: linear-gradient(135deg, var(--danger-bg), var(--brand-indigo-50));
  border-color: transparent;
}
.creas-detalhe-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  flex: 1;
}
.creas-detalhe-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #fff;
  color: var(--danger);
}
.creas-detalhe-hero-mark svg {
  width: 26px;
  height: 26px;
}
.creas-detalhe-hero-text {
  min-width: 0;
}
.creas-detalhe-hero-text .eyebrow {
  font-size: 13px;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.creas-detalhe-hero-text h2 {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  word-break: break-word;
}

.creas-detalhe-violations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.creas-detalhe-narrative {
  display: grid;
  gap: 18px;
  margin-top: 12px;
}
.creas-detalhe-narrative-item h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.creas-detalhe-narrative-item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.creas-detalhe-narrative-empty {
  color: var(--muted) !important;
  font-style: italic;
}

.creas-detalhe-records {
  margin-top: 14px;
}
.creas-detalhe-records .t-item strong {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.creas-detalhe-records .t-item p {
  margin: 6px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.creas-detalhe-form {
  margin-top: 12px;
}
.creas-detalhe-form .field code {
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--brand-indigo-50);
  color: var(--brand-indigo);
}

.creas-detalhe-v6 .t {
  font-size: 13px;
}
.creas-detalhe-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.creas-detalhe-v6 .t td {
  vertical-align: top;
}

@media (max-width: 1024px) {
  .creas-detalhe-grid {
    grid-template-columns: 1fr;
  }
  .creas-detalhe-hero {
    flex-direction: column;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.12C — CREAS / PAEFI Criar caso
   Escopo: .criar-creas-v6
   Sem regra nova, sem campo novo, sem alteração de name/value. Apenas
   organização visual em seções + checklist lateral. Reutiliza
   .somas-form-wizard, .somas-actionbar, .somas-spotlight-card,
   .somas-checklist, .creas-sigilo-banner.
---------------------------------------------------------------------- */
.criar-creas-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

.criar-creas-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.criar-creas-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--canvas);
}
.criar-creas-section-title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.criar-creas-req {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
}
.criar-creas-grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.criar-creas-grid-fields .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.criar-creas-grid-fields .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.criar-creas-grid-fields .field.full-row,
.criar-creas-grid-fields label.full-row {
  grid-column: 1 / -1;
}
.criar-creas-grid-fields .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Checkboxes de tipos de violação como cards leves. */
.criar-creas-violations {
  margin: 0;
  padding: 0;
  border: 0;
}
.criar-creas-violations .hint {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.criar-creas-violations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.criar-creas-violation {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.criar-creas-violation:hover {
  border-color: var(--brand-indigo);
}
.criar-creas-violation input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.criar-creas-violation-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #fff;
  border: 1.5px solid var(--line);
  color: transparent;
}
.criar-creas-violation-mark svg {
  width: 14px;
  height: 14px;
}
.criar-creas-violation input[type="checkbox"]:checked ~ .criar-creas-violation-mark {
  background: var(--brand-green);
  border-color: transparent;
  color: var(--ink);
}
.criar-creas-violation input[type="checkbox"]:checked ~ .criar-creas-violation-label {
  font-weight: 700;
  color: var(--ink);
}
.criar-creas-violation:has(input[type="checkbox"]:checked) {
  border-color: var(--brand-green);
  background: var(--brand-green-50);
}
.criar-creas-violation input[type="checkbox"]:focus-visible ~ .criar-creas-violation-mark {
  outline: 2px solid var(--brand-indigo);
  outline-offset: 2px;
}
.criar-creas-violation-label {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.35;
}

/* Sidebar do criar — checklist + spotlight. */
.criar-creas-side .somas-checklist {
  margin-top: 12px;
}

/* Utilitário pontual: rótulo acessível só para leitores de tela. */
.criar-creas-v6 .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1024px) {
  .criar-creas-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.13A — SCFV Lista (índice)
   Escopo: .scfv-v6
   Sem regra nova, sem fluxo novo. Apenas pintura visual sobre o
   markup existente (filtros, KPIs, tabela de atividades).
---------------------------------------------------------------------- */
.scfv-v6 .scfv-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.scfv-v6 .scfv-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scfv-v6 .scfv-filter-card .scfv-filter-row {
  margin: 0;
}

.scfv-v6 .t {
  font-size: 13px;
}
.scfv-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.scfv-v6 .t td {
  vertical-align: top;
}
.scfv-v6 .t td small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.scfv-v6 .t .btn-ghost.btn-sm {
  white-space: nowrap;
}
.scfv-v6 .t .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1024px) {
  .scfv-v6 .scfv-stat-row {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

/* ----------------------------------------------------------------------
   Fase 2.13B — SCFV Grupos (listagem)
   Escopo: .scfv-grupos-v6
   Sem regra nova, sem fluxo novo. Apenas pintura visual sobre o
   markup existente (filtros, status-tabs, tabela de grupos).
---------------------------------------------------------------------- */
.scfv-grupos-v6 .scfv-grupos-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scfv-grupos-v6 .scfv-grupos-filter-card .scfv-grupos-filter-row {
  margin: 0;
}

.scfv-grupos-v6 .t {
  font-size: 13px;
}
.scfv-grupos-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.scfv-grupos-v6 .t td {
  vertical-align: top;
}
.scfv-grupos-v6 .t td small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.scfv-grupos-v6 .t .btn-ghost.btn-sm {
  white-space: nowrap;
}
.scfv-grupos-v6 .t .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}

/* ----------------------------------------------------------------------
   Fase 2.13C — SCFV demais telas
   Escopos: .scfv-grupo-detalhe-v6 / .scfv-criar-grupo-v6
            .scfv-atividade-v6     / .scfv-participantes-v6
   Reaproveita .somas-info-grid, .somas-form-wizard, .somas-actionbar,
   .somas-spotlight-card, .somas-checklist, .empty-state, .pill.tone-*.
   Sem regra nova, sem fluxo novo.
---------------------------------------------------------------------- */

/* Selo "obrigatório" usado em criar_grupo, atividade e participantes. */
.scfv-req {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
}

/* ---- visualizar_grupo.php (.scfv-grupo-detalhe-v6) ---- */
.scfv-grupo-detalhe-v6 .scfv-grupo-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}
.scfv-grupo-hero {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
  background: linear-gradient(135deg, var(--brand-indigo-50), var(--brand-green-50));
  border-color: transparent;
}
.scfv-grupo-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  flex: 1;
}
.scfv-grupo-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #fff;
  color: var(--brand-indigo);
}
.scfv-grupo-hero-mark svg {
  width: 26px;
  height: 26px;
}
.scfv-grupo-hero-text {
  min-width: 0;
}
.scfv-grupo-hero-text .eyebrow {
  font-size: 13px;
  color: var(--brand-indigo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.scfv-grupo-hero-text h2 {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  word-break: break-word;
}
.scfv-grupo-notes {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.scfv-grupo-notes h3 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.scfv-grupo-notes p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.scfv-grupo-detalhe-v6 .t {
  font-size: 13px;
}
.scfv-grupo-detalhe-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.scfv-grupo-detalhe-v6 .t td {
  vertical-align: top;
}
.scfv-grupo-detalhe-v6 .t td small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---- criar_grupo.php (.scfv-criar-grupo-v6) ---- */
.scfv-criar-grupo-v6 .scfv-criar-grupo-grid,
.scfv-atividade-v6 .scfv-atividade-grid,
.scfv-participantes-v6 .scfv-participantes-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

.scfv-criar-grupo-v6 .scfv-criar-grupo-form,
.scfv-atividade-v6 .scfv-atividade-form,
.scfv-participantes-v6 .scfv-participantes-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scfv-criar-grupo-v6 .scfv-criar-grupo-grid-fields,
.scfv-atividade-v6 .scfv-atividade-grid-fields,
.scfv-participantes-v6 .scfv-participantes-grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.scfv-criar-grupo-v6 .scfv-criar-grupo-grid-fields .field,
.scfv-atividade-v6 .scfv-atividade-grid-fields .field,
.scfv-participantes-v6 .scfv-participantes-grid-fields .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scfv-criar-grupo-v6 .scfv-criar-grupo-grid-fields .field span,
.scfv-atividade-v6 .scfv-atividade-grid-fields .field span,
.scfv-participantes-v6 .scfv-participantes-grid-fields .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.scfv-criar-grupo-v6 .scfv-criar-grupo-grid-fields .field.full-row,
.scfv-criar-grupo-v6 .scfv-criar-grupo-grid-fields label.full-row,
.scfv-atividade-v6 .scfv-atividade-grid-fields .field.full-row,
.scfv-atividade-v6 .scfv-atividade-grid-fields label.full-row,
.scfv-participantes-v6 .scfv-participantes-grid-fields .field.full-row,
.scfv-participantes-v6 .scfv-participantes-grid-fields label.full-row {
  grid-column: 1 / -1;
}
.scfv-criar-grupo-v6 .scfv-criar-grupo-grid-fields .hint,
.scfv-atividade-v6 .scfv-atividade-grid-fields .hint,
.scfv-participantes-v6 .scfv-participantes-grid-fields .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.scfv-participantes-v6 .scfv-participantes-grid-fields .field .hint {
  margin-top: 4px;
}
.scfv-participantes-v6 .scfv-participantes-grid-fields code {
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--brand-indigo-50);
  color: var(--brand-indigo);
}

/* ---- atividade.php — frequência (checkbox visual) ---- */
.scfv-atividade-frequencia {
  margin-top: 6px;
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--canvas);
}
.scfv-atividade-frequencia .t {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.scfv-atividade-check {
  position: relative;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.scfv-atividade-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.scfv-atividade-check-mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #fff;
  border: 1.5px solid var(--line);
  color: transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.scfv-atividade-check-mark svg {
  width: 14px;
  height: 14px;
}
.scfv-atividade-check input[type="checkbox"]:checked ~ .scfv-atividade-check-mark {
  background: var(--brand-green);
  border-color: transparent;
  color: var(--ink);
}
.scfv-atividade-check input[type="checkbox"]:focus-visible ~ .scfv-atividade-check-mark {
  outline: 2px solid var(--brand-indigo);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .scfv-grupo-detalhe-v6 .scfv-grupo-grid,
  .scfv-criar-grupo-v6 .scfv-criar-grupo-grid,
  .scfv-atividade-v6 .scfv-atividade-grid,
  .scfv-participantes-v6 .scfv-participantes-grid {
    grid-template-columns: 1fr;
  }
  .scfv-grupo-hero {
    flex-direction: column;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.14 — Programas operacionais específicos
   Escopos:
     .mesa-popular-v6      (index, inscrições, registrar)
     .leite-potiguar-v6    (index, inscrições, registrar, configurar)
     .transporte-social-v6 (index, solicitar, visualizar)
   Reaproveita .stat-row, .somas-info-grid, .somas-form-wizard,
   .somas-actionbar, .somas-status-tabs, .empty-state, .pill.tone-*.
   Sem regra nova, sem fluxo novo.
---------------------------------------------------------------------- */

/* Selo "obrigatório" usado nos forms de cada programa. */
.mp-req,
.lp-req,
.ts-req {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
}

/* ---- Forms compartilhados (Mesa Popular / Leite Potiguar / Transporte) ---- */
.mesa-popular-v6 .mesa-popular-form,
.leite-potiguar-v6 .leite-potiguar-form,
.transporte-social-v6 .transporte-social-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mesa-popular-v6 .mesa-popular-grid-fields,
.leite-potiguar-v6 .leite-potiguar-grid-fields,
.transporte-social-v6 .transporte-social-grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.mesa-popular-v6 .mesa-popular-grid-fields .field,
.leite-potiguar-v6 .leite-potiguar-grid-fields .field,
.transporte-social-v6 .transporte-social-grid-fields .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mesa-popular-v6 .mesa-popular-grid-fields .field span,
.leite-potiguar-v6 .leite-potiguar-grid-fields .field span,
.transporte-social-v6 .transporte-social-grid-fields .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mesa-popular-v6 .mesa-popular-grid-fields .field.full-row,
.mesa-popular-v6 .mesa-popular-grid-fields label.full-row,
.leite-potiguar-v6 .leite-potiguar-grid-fields .field.full-row,
.leite-potiguar-v6 .leite-potiguar-grid-fields label.full-row,
.transporte-social-v6 .transporte-social-grid-fields .field.full-row,
.transporte-social-v6 .transporte-social-grid-fields label.full-row {
  grid-column: 1 / -1;
}
.mesa-popular-v6 .mesa-popular-grid-fields .hint,
.leite-potiguar-v6 .leite-potiguar-grid-fields .hint,
.transporte-social-v6 .transporte-social-grid-fields .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.mesa-popular-v6 code,
.leite-potiguar-v6 code,
.transporte-social-v6 code {
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--brand-indigo-50);
  color: var(--brand-indigo);
}

/* ---- Tabelas compartilhadas ---- */
.mesa-popular-v6 .t,
.leite-potiguar-v6 .t,
.transporte-social-v6 .t {
  font-size: 13px;
}
.mesa-popular-v6 .t th,
.leite-potiguar-v6 .t th,
.transporte-social-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mesa-popular-v6 .t td,
.leite-potiguar-v6 .t td,
.transporte-social-v6 .t td {
  vertical-align: top;
}
.mesa-popular-v6 .t td small,
.leite-potiguar-v6 .t td small,
.transporte-social-v6 .t td small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.mesa-popular-v6 .t .btn-ghost.btn-sm,
.leite-potiguar-v6 .t .btn-ghost.btn-sm,
.transporte-social-v6 .t .btn-ghost.btn-sm {
  white-space: nowrap;
}
.mesa-popular-v6 .t .btn-ghost.btn-sm svg,
.leite-potiguar-v6 .t .btn-ghost.btn-sm svg,
.transporte-social-v6 .t .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}

/* ---- Transporte Social — detalhe (visualizar) ---- */
.transporte-social-v6 .transporte-social-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}
.transporte-social-hero {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
  background: linear-gradient(135deg, var(--brand-indigo-50), var(--brand-green-50));
  border-color: transparent;
}
.transporte-social-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  flex: 1;
}
.transporte-social-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #fff;
  color: var(--brand-indigo);
}
.transporte-social-hero-mark svg {
  width: 26px;
  height: 26px;
}
.transporte-social-hero-text {
  min-width: 0;
}
.transporte-social-hero-text .eyebrow {
  font-size: 13px;
  color: var(--brand-indigo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.transporte-social-hero-text h2 {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  word-break: break-word;
}
.transporte-social-narrative {
  display: grid;
  gap: 18px;
  margin-top: 12px;
}
.transporte-social-narrative-item h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.transporte-social-narrative-item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 1024px) {
  .transporte-social-v6 .transporte-social-grid {
    grid-template-columns: 1fr;
  }
  .transporte-social-hero {
    flex-direction: column;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.15 — Habitação
   Escopos:
     .habitacao-v6            (listagem principal)
     .habitacao-projetos-v6   (empreendimentos + inline-form de toggle_lock)
     .habitacao-ranking-v6    (ranking ordenado)
     .habitacao-detalhe-v6    (visualizar.php + conferência)
     .habitacao-criar-v6      (form de nova inscrição + critérios)
   Reaproveita .stat-row, .somas-info-grid, .somas-form-wizard,
   .somas-actionbar, .empty-state, .pill.tone-*.
   Sem regra nova, sem fluxo novo, sem cálculo novo.
---------------------------------------------------------------------- */

/* Selo "obrigatório" para os forms de Habitação. */
.hb-req {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
}

/* ---- Tabelas compartilhadas ---- */
.habitacao-v6 .t,
.habitacao-projetos-v6 .t,
.habitacao-ranking-v6 .t {
  font-size: 13px;
}
.habitacao-v6 .t th,
.habitacao-projetos-v6 .t th,
.habitacao-ranking-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.habitacao-v6 .t td,
.habitacao-projetos-v6 .t td,
.habitacao-ranking-v6 .t td {
  vertical-align: top;
}
.habitacao-v6 .t td small,
.habitacao-projetos-v6 .t td small,
.habitacao-ranking-v6 .t td small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.habitacao-v6 .t .btn-ghost.btn-sm,
.habitacao-projetos-v6 .t .btn-ghost.btn-sm,
.habitacao-ranking-v6 .t .btn-ghost.btn-sm {
  white-space: nowrap;
}
.habitacao-v6 .t .btn-ghost.btn-sm svg,
.habitacao-projetos-v6 .t .btn-ghost.btn-sm svg,
.habitacao-ranking-v6 .t .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}

/* ---- projetos.php — form principal + inline form (toggle_lock) ---- */
.habitacao-projetos-v6 .habitacao-projetos-form,
.habitacao-detalhe-v6 .habitacao-detalhe-form,
.habitacao-criar-v6 .habitacao-criar-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.habitacao-projetos-v6 .habitacao-projetos-grid-fields,
.habitacao-criar-v6 .habitacao-criar-grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.habitacao-projetos-v6 .habitacao-projetos-grid-fields .field,
.habitacao-criar-v6 .habitacao-criar-grid-fields .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.habitacao-projetos-v6 .habitacao-projetos-grid-fields .field span,
.habitacao-criar-v6 .habitacao-criar-grid-fields .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.habitacao-projetos-v6 .habitacao-projetos-grid-fields .field.full-row,
.habitacao-projetos-v6 .habitacao-projetos-grid-fields label.full-row,
.habitacao-criar-v6 .habitacao-criar-grid-fields .field.full-row,
.habitacao-criar-v6 .habitacao-criar-grid-fields label.full-row {
  grid-column: 1 / -1;
}
.habitacao-projetos-v6 .habitacao-projetos-grid-fields .hint,
.habitacao-criar-v6 .habitacao-criar-grid-fields .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Inline form do toggle_lock — fica colado nos outros botões da linha. */
.habitacao-projetos-v6 .habitacao-projetos-inline-form {
  display: inline-block;
  margin: 0;
}
.habitacao-projetos-v6 .habitacao-projetos-inline-form .btn {
  margin: 0;
}

/* ---- ranking.php — chips de critérios na tabela ---- */
.habitacao-ranking-v6 .habitacao-rank-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 240px;
}

/* ---- visualizar.php — hero + conferência + narrativa ---- */
.habitacao-detalhe-v6 .habitacao-detalhe-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}
.habitacao-detalhe-hero {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
  background: linear-gradient(135deg, var(--brand-indigo-50), var(--brand-green-50));
  border-color: transparent;
}
.habitacao-detalhe-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  flex: 1;
}
.habitacao-detalhe-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #fff;
  color: var(--brand-indigo);
}
.habitacao-detalhe-hero-mark svg {
  width: 26px;
  height: 26px;
}
.habitacao-detalhe-hero-text {
  min-width: 0;
}
.habitacao-detalhe-hero-text .eyebrow {
  font-size: 13px;
  color: var(--brand-indigo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.habitacao-detalhe-hero-text h2 {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  word-break: break-word;
}

.habitacao-detalhe-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.habitacao-detalhe-conferencia {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.habitacao-detalhe-check-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--canvas);
}
.habitacao-detalhe-check-item.is-warning {
  background: var(--warn-bg);
  border-color: rgba(201, 122, 4, .2);
}
.habitacao-detalhe-check-item.is-ok {
  background: var(--brand-green-50);
  border-color: rgba(7, 90, 53, .15);
}
.habitacao-detalhe-check-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
  color: var(--ink-2);
}
.habitacao-detalhe-check-item.is-warning .habitacao-detalhe-check-mark {
  color: var(--warn);
}
.habitacao-detalhe-check-item.is-ok .habitacao-detalhe-check-mark {
  color: var(--ok);
}
.habitacao-detalhe-check-mark svg {
  width: 16px;
  height: 16px;
}
.habitacao-detalhe-check-item strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.habitacao-detalhe-check-item small {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.habitacao-detalhe-narrative {
  display: grid;
  gap: 18px;
  margin-top: 12px;
}
.habitacao-detalhe-narrative-item h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.habitacao-detalhe-narrative-item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- criar.php — seções + checkbox cards ---- */
.habitacao-criar-v6 .habitacao-criar-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--canvas);
}
.habitacao-criar-v6 .habitacao-criar-section-title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.habitacao-criar-v6 .habitacao-criar-family-summary {
  padding: 12px 14px;
  background: var(--brand-indigo-50);
  border-radius: 10px;
  color: var(--ink-2);
}
.habitacao-criar-v6 .habitacao-criar-family-summary strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.habitacao-criar-v6 .habitacao-criar-family-summary span {
  display: block;
  font-size: 12.5px;
  margin: 2px 0;
}
.habitacao-criar-v6 .habitacao-criar-family-summary small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
}

.habitacao-criar-criteria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.habitacao-criar-criterion {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.habitacao-criar-criterion:hover {
  border-color: var(--brand-indigo);
}
.habitacao-criar-criterion input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.habitacao-criar-criterion-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #fff;
  border: 1.5px solid var(--line);
  color: transparent;
}
.habitacao-criar-criterion-mark svg {
  width: 14px;
  height: 14px;
}
.habitacao-criar-criterion input[type="checkbox"]:checked ~ .habitacao-criar-criterion-mark {
  background: var(--brand-green);
  border-color: transparent;
  color: var(--ink);
}
.habitacao-criar-criterion input[type="checkbox"]:checked ~ .habitacao-criar-criterion-label {
  font-weight: 700;
  color: var(--ink);
}
.habitacao-criar-criterion:has(input[type="checkbox"]:checked) {
  border-color: var(--brand-green);
  background: var(--brand-green-50);
}
.habitacao-criar-criterion input[type="checkbox"]:focus-visible ~ .habitacao-criar-criterion-mark {
  outline: 2px solid var(--brand-indigo);
  outline-offset: 2px;
}
.habitacao-criar-criterion-label {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.35;
}

/* Variante warn para impedimentos. */
.habitacao-criar-criterion-warn:has(input[type="checkbox"]:checked) {
  border-color: var(--warn);
  background: var(--warn-bg);
}
.habitacao-criar-criterion-warn input[type="checkbox"]:checked ~ .habitacao-criar-criterion-mark {
  background: var(--warn);
  color: #fff;
}

@media (max-width: 1024px) {
  .habitacao-detalhe-v6 .habitacao-detalhe-grid {
    grid-template-columns: 1fr;
  }
  .habitacao-detalhe-hero {
    flex-direction: column;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.16A — Vigilância Socioassistencial (painel principal)
   Escopo: .vigilancia-v6
   Sem regra nova, sem cálculo novo. Só pintura visual sobre o markup
   existente. Mantém intacta a função render_vigilancia_bars() do PHP.
   Mapa Territorial (vigilancia_mapa/) fica para Fase 2.16B (Leaflet+JS).
---------------------------------------------------------------------- */
.vigilancia-v6 .vigilancia-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vigilancia-v6 .vigilancia-filter-card .vigilancia-filter-row {
  margin: 0;
}

.vigilancia-v6 .vigilancia-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* ---- Leitura rápida (insight cards) ---- */
.vigilancia-v6 .vigilancia-insight-panel {
  margin-top: 18px;
}
.vigilancia-v6 .vigilancia-insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.vigilancia-v6 .vigilancia-insight-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--canvas);
  border: 1px solid var(--line-2);
}
.vigilancia-v6 .vigilancia-insight-card.tone-rose {
  background: var(--danger-bg);
  border-color: rgba(125, 26, 44, .14);
}
.vigilancia-v6 .vigilancia-insight-card.tone-lilac {
  background: rgba(91, 69, 148, .08);
  border-color: rgba(91, 69, 148, .16);
}
.vigilancia-v6 .vigilancia-insight-card.tone-mint {
  background: var(--brand-green-50);
  border-color: rgba(7, 90, 53, .14);
}
.vigilancia-v6 .vigilancia-insight-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fff;
}
.vigilancia-v6 .vigilancia-insight-mark svg {
  width: 18px;
  height: 18px;
}
.vigilancia-v6 .vigilancia-insight-card.tone-rose .vigilancia-insight-mark {
  color: var(--danger);
}
.vigilancia-v6 .vigilancia-insight-card.tone-lilac .vigilancia-insight-mark {
  color: #5b4594;
}
.vigilancia-v6 .vigilancia-insight-card.tone-mint .vigilancia-insight-mark {
  color: var(--ok);
}
.vigilancia-v6 .vigilancia-insight-card strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.vigilancia-v6 .vigilancia-insight-value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  word-break: break-word;
}
.vigilancia-v6 .vigilancia-insight-card small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---- Grade dos 6 gráficos ---- */
.vigilancia-v6 .vigilancia-reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

/* ---- Barras horizontais (render_vigilancia_bars) — só pintura ---- */
.vigilancia-v6 .vigilancia-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.vigilancia-v6 .bar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vigilancia-v6 .bar-row-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
}
.vigilancia-v6 .bar-row-label span {
  color: var(--ink-2);
  font-weight: 500;
  word-break: break-word;
}
.vigilancia-v6 .bar-row-label strong {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vigilancia-v6 .bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}
.vigilancia-v6 .bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-indigo), #4a4ec8);
  transition: width .25s ease-out;
}

/* ---- Tabela final (famílias recorrentes) ---- */
.vigilancia-v6 .t {
  font-size: 13px;
}
.vigilancia-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vigilancia-v6 .t td {
  vertical-align: top;
}
.vigilancia-v6 .t td small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.vigilancia-v6 .t .btn-ghost.btn-sm {
  white-space: nowrap;
}
.vigilancia-v6 .t .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1024px) {
  .vigilancia-v6 .vigilancia-stat-row,
  .vigilancia-v6 .vigilancia-insight-grid,
  .vigilancia-v6 .vigilancia-reports-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.16B — Mapa Territorial (Leaflet)
   Escopo: .vigilancia-mapa-v6
   ATENÇÃO: NÃO alterar nenhuma classe lida pelo JS:
     - #territorial-map
     - .leaflet-map-empty
     - .leaflet-toolbar
     - [data-layer]
     - [aria-pressed]
   Aqui o CSS apenas estiliza o entorno (filtro, stat-row, tabela, lista
   de benefícios) e dá aparência v6 aos pills da toolbar que viram botões.
---------------------------------------------------------------------- */
.vigilancia-mapa-v6 .vigilancia-mapa-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vigilancia-mapa-v6 .vigilancia-mapa-filter-card .vigilancia-mapa-filter-row {
  margin: 0;
}

.vigilancia-mapa-v6 .vigilancia-mapa-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* Card que envolve o mapa — separa header (panel-head com toolbar) do
   container do mapa em si, sem mexer em #territorial-map. */
.vigilancia-mapa-v6 .vigilancia-mapa-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Toolbar de camadas — os botões mantêm .pill.tone-* (lidos pelo JS via
   [data-layer]), mas ganham comportamento clicável e estado pressed. */
.vigilancia-mapa-v6 .leaflet-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vigilancia-mapa-v6 .leaflet-toolbar .pill {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  opacity: 0.65;
  transition: opacity .12s, transform .08s, box-shadow .12s;
}
.vigilancia-mapa-v6 .leaflet-toolbar .pill:hover {
  opacity: 0.92;
}
.vigilancia-mapa-v6 .leaflet-toolbar .pill[aria-pressed="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--ink) inset;
  transform: translateY(-1px);
}
.vigilancia-mapa-v6 .leaflet-toolbar .pill:focus-visible {
  outline: 2px solid var(--brand-indigo);
  outline-offset: 2px;
}

/* Container do mapa — IDs/classes preservados; só pintura. */
.vigilancia-mapa-v6 .leaflet-map {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  position: relative;
  background: var(--canvas);
}
.vigilancia-mapa-v6 .leaflet-map-empty {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.vigilancia-mapa-v6 .vigilancia-mapa-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.vigilancia-mapa-v6 .vigilancia-mapa-hint-link {
  color: var(--brand-indigo);
  font-weight: 700;
  text-decoration: none;
}
.vigilancia-mapa-v6 .vigilancia-mapa-hint-link:hover {
  text-decoration: underline;
}

/* Grid 2-col abaixo do mapa. */
.vigilancia-mapa-v6 .vigilancia-mapa-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

/* Tabela de territórios. */
.vigilancia-mapa-v6 .t {
  font-size: 13px;
}
.vigilancia-mapa-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vigilancia-mapa-v6 .t td {
  vertical-align: top;
}

/* Lista de benefícios — substitui a .list/.li-mark/.li-meta antiga. */
.vigilancia-mapa-v6 .vigilancia-mapa-benefit-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vigilancia-mapa-v6 .vigilancia-mapa-benefit-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--canvas);
}
.vigilancia-mapa-v6 .vigilancia-mapa-benefit-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
  color: #c97a04;
  border: 1px solid var(--line-2);
}
.vigilancia-mapa-v6 .vigilancia-mapa-benefit-mark svg {
  width: 16px;
  height: 16px;
}
.vigilancia-mapa-v6 .vigilancia-mapa-benefit-item strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  word-break: break-word;
}

/* Popup do Leaflet — só pintura suave, JS já controla o conteúdo. */
.vigilancia-mapa-v6 .leaflet-popup-content {
  font-size: 12.5px;
  line-height: 1.5;
  font-family: var(--font, inherit);
}
.vigilancia-mapa-v6 .leaflet-popup-content strong {
  font-size: 13px;
  color: var(--ink);
}
.vigilancia-mapa-v6 .leaflet-popup-content a {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--brand-indigo);
  text-decoration: none;
}
.vigilancia-mapa-v6 .leaflet-popup-content a:hover {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .vigilancia-mapa-v6 .vigilancia-mapa-stat-row {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .vigilancia-mapa-v6 .vigilancia-mapa-grid {
    grid-template-columns: 1fr;
  }
  .vigilancia-mapa-v6 .leaflet-toolbar {
    width: 100%;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.17A — Relatórios (painel básico)
   Escopo: .relatorios-v6
   Sem regra nova, sem cálculo novo. Apenas pintura visual sobre o
   markup existente. Mantém intacta a função render_simple_report_table()
   declarada no final do PHP (hoisting).
   relatorios/exportar.php (endpoint CSV puro) fica intocado.
---------------------------------------------------------------------- */
.relatorios-v6 .relatorios-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.relatorios-v6 .relatorios-filter-card .relatorios-filter-row {
  margin: 0;
}

.relatorios-v6 .relatorios-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* Grade dos 6 painéis de relatório. */
.relatorios-v6 .relatorios-reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

/* Mini-tabela usada por render_simple_report_table(). */
.relatorios-v6 .relatorios-mini-table {
  margin-top: 12px;
}
.relatorios-v6 .relatorios-mini-table .t {
  font-size: 13px;
}
.relatorios-v6 .relatorios-mini-table .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.relatorios-v6 .relatorios-mini-table .t td {
  vertical-align: middle;
}
.relatorios-v6 .relatorios-mini-table .t tbody tr:hover {
  background: var(--canvas);
}
.relatorios-v6 .relatorios-mini-table .t td:last-child {
  text-align: right;
  white-space: nowrap;
}

/* Tabela de movimentações recentes (parte final da página). */
.relatorios-v6 .t {
  font-size: 13px;
}
.relatorios-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.relatorios-v6 .t td {
  vertical-align: top;
}
.relatorios-v6 .t td small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}

/* Botão CSV de cada painel. */
.relatorios-v6 .panel-head .btn-ghost.btn-sm {
  white-space: nowrap;
}
.relatorios-v6 .panel-head .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1024px) {
  .relatorios-v6 .relatorios-stat-row,
  .relatorios-v6 .relatorios-reports-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.18 — Pré-RMA (painel de conferência mensal)
   Escopo: .pre-rma-v6
   Toda a regra de cálculo do RMA vem de pre_rma/_helpers.php (NÃO tocado).
   Aqui só pintura visual sobre o markup. pre_rma/exportar.php (CSV puro)
   também fica intocado.
---------------------------------------------------------------------- */
.pre-rma-v6 .pre-rma-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pre-rma-v6 .pre-rma-filter-card .pre-rma-filter-row {
  margin: 0;
}

/* Strip resumo: período / unidade / pontos de atenção. */
.pre-rma-v6 .pre-rma-strip {
  background: linear-gradient(135deg, var(--brand-indigo-50), var(--brand-green-50));
  border-color: transparent;
}
.pre-rma-v6 .pre-rma-strip-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pre-rma-v6 .pre-rma-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* Grade dos 3 blocos (CRAS/PAIF, CREAS/PAEFI, Apoio). */
.pre-rma-v6 .pre-rma-block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

/* Cada item de linha dos blocos. */
.pre-rma-v6 .pre-rma-line-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.pre-rma-v6 .pre-rma-line-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--canvas);
}
.pre-rma-v6 .pre-rma-line-item span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pre-rma-v6 .pre-rma-line-item strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.pre-rma-v6 .pre-rma-line-item small {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}
.pre-rma-v6 .pre-rma-line-item b {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Conferências de qualidade. */
.pre-rma-v6 .pre-rma-quality-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.pre-rma-v6 .pre-rma-quality-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--canvas);
}
.pre-rma-v6 .pre-rma-quality-item.is-alert {
  background: var(--warn-bg);
  border-color: rgba(201, 122, 4, .22);
}
.pre-rma-v6 .pre-rma-quality-item.is-ok {
  background: var(--brand-green-50);
  border-color: rgba(7, 90, 53, .15);
}
.pre-rma-v6 .pre-rma-quality-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
}
.pre-rma-v6 .pre-rma-quality-item.is-alert .pre-rma-quality-mark {
  color: var(--warn);
}
.pre-rma-v6 .pre-rma-quality-item.is-ok .pre-rma-quality-mark {
  color: var(--ok);
}
.pre-rma-v6 .pre-rma-quality-mark svg {
  width: 16px;
  height: 16px;
}
.pre-rma-v6 .pre-rma-quality-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pre-rma-v6 .pre-rma-quality-body strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.pre-rma-v6 .pre-rma-quality-body small {
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-top: 2px;
}
.pre-rma-v6 .pre-rma-quality-item b {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Grade dos 6 mini-painéis com mini-tabelas. */
.pre-rma-v6 .pre-rma-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.pre-rma-v6 .pre-rma-mini-table {
  margin-top: 12px;
}
.pre-rma-v6 .pre-rma-mini-table .t {
  font-size: 13px;
}
.pre-rma-v6 .pre-rma-mini-table .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pre-rma-v6 .pre-rma-mini-table .t td:last-child {
  text-align: right;
  white-space: nowrap;
}
.pre-rma-v6 .pre-rma-mini-table .t tbody tr:hover {
  background: var(--canvas);
}

/* Tabela final (famílias com maior movimentação). */
.pre-rma-v6 .t {
  font-size: 13px;
}
.pre-rma-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pre-rma-v6 .t td {
  vertical-align: top;
}
.pre-rma-v6 .t td small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}
.pre-rma-v6 .t .btn-ghost.btn-sm {
  white-space: nowrap;
}
.pre-rma-v6 .t .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1024px) {
  .pre-rma-v6 .pre-rma-stat-row,
  .pre-rma-v6 .pre-rma-block-grid,
  .pre-rma-v6 .pre-rma-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.17C — CadÚnico (consulta + conciliação)
   Escopos:
     .cadunico-v6            (index.php — consulta da base importada)
     .cadunico-conciliar-v6  (conciliar.php — lista de revisão)
   importar.php e revisar.php ficam para Fase 2.17D (POST complexo).
   _reconciliation.php é helper (intocado).
---------------------------------------------------------------------- */

/* ---- index.php ---- */
.cadunico-v6 .cadunico-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cadunico-v6 .cadunico-filter-card .cadunico-filter-row {
  margin: 0;
}
.cadunico-v6 .cadunico-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.cadunico-v6 .t {
  font-size: 13px;
}
.cadunico-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cadunico-v6 .t td {
  vertical-align: top;
}
.cadunico-v6 .t td small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.cadunico-v6 .t .btn-ghost.btn-sm,
.cadunico-conciliar-v6 .btn-ghost.btn-sm {
  white-space: nowrap;
}
.cadunico-v6 .t .btn-ghost.btn-sm svg {
  width: 14px;
  height: 14px;
}
.cadunico-v6 .cadunico-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--line-2);
}
.cadunico-v6 .cadunico-pagination-info {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

/* ---- conciliar.php ---- */
.cadunico-conciliar-v6 .cadunico-conciliar-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cadunico-conciliar-v6 .cadunico-conciliar-filter-card .cadunico-conciliar-filter-row {
  margin: 0;
}
.cadunico-conciliar-v6 .cadunico-conciliar-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.cadunico-conciliar-v6 .cadunico-conciliar-review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 24px 24px;
}
.cadunico-conciliar-v6 .cadunico-conciliar-review-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--canvas);
  align-items: center;
}
.cadunico-conciliar-v6 .cadunico-conciliar-status-new {
  border-left: 4px solid var(--brand-indigo);
}
.cadunico-conciliar-v6 .cadunico-conciliar-status-divergent {
  border-left: 4px solid var(--warn);
  background: var(--warn-bg);
}
.cadunico-conciliar-v6 .cadunico-conciliar-status-duplicate {
  border-left: 4px solid var(--danger);
  background: var(--danger-bg);
}
.cadunico-conciliar-v6 .cadunico-conciliar-status-identical {
  border-left: 4px solid var(--ok);
  background: var(--brand-green-50);
}
.cadunico-conciliar-v6 .cadunico-conciliar-review-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cadunico-conciliar-v6 .cadunico-conciliar-review-main h3 {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  word-break: break-word;
}
.cadunico-conciliar-v6 .cadunico-conciliar-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 4px 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.cadunico-conciliar-v6 .cadunico-conciliar-review-meta span {
  font-variant-numeric: tabular-nums;
}
.cadunico-conciliar-v6 .cadunico-conciliar-review-main small {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.cadunico-conciliar-v6 .cadunico-conciliar-review-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  align-items: flex-end;
  white-space: nowrap;
}
.cadunico-conciliar-v6 .cadunico-conciliar-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--line-2);
}
.cadunico-conciliar-v6 .cadunico-conciliar-pagination-info {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

@media (max-width: 1024px) {
  .cadunico-v6 .cadunico-stat-row,
  .cadunico-conciliar-v6 .cadunico-conciliar-stats {
    grid-template-columns: 1fr 1fr;
  }
  .cadunico-conciliar-v6 .cadunico-conciliar-review-card {
    grid-template-columns: 1fr;
  }
  .cadunico-conciliar-v6 .cadunico-conciliar-review-actions {
    align-items: stretch;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.17D — CadÚnico final (importar + revisar)
   Escopos:
     .cadunico-importar-v6  (importar.php — upload CSV)
     .cadunico-revisar-v6   (revisar.php — comparação campo a campo)
   Parser, helpers locais, POST, CSRF e DML preservados.
   CPF/NIS mascarados em 3 pontos do markup (hero, candidatos, tabela
   de comparação para fields 'cpf' e 'nis').
---------------------------------------------------------------------- */

/* Selo "obrigatório" reaproveitado pelos forms CadÚnico. */
.cu-req {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
}

/* ---- importar.php ---- */
.cadunico-importar-v6 .cadunico-importar-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cadunico-importar-v6 .cadunico-importar-grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.cadunico-importar-v6 .cadunico-importar-grid-fields .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cadunico-importar-v6 .cadunico-importar-grid-fields .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cadunico-importar-v6 .cadunico-importar-grid-fields .field.full-row,
.cadunico-importar-v6 .cadunico-importar-grid-fields label.full-row {
  grid-column: 1 / -1;
}
.cadunico-importar-v6 .cadunico-importar-grid-fields .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.cadunico-importar-v6 input[type="file"] {
  padding: 8px;
  cursor: pointer;
}

.cadunico-importar-v6 .cadunico-importar-aliases {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}
.cadunico-importar-v6 .cadunico-importar-aliases li {
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--canvas);
}
.cadunico-importar-v6 .cadunico-importar-aliases strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.cadunico-importar-v6 .cadunico-importar-aliases small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
  word-break: break-word;
}

/* ---- revisar.php ---- */
.cadunico-revisar-v6 .cadunico-revisar-hero {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
  background: linear-gradient(135deg, var(--brand-indigo-50), var(--brand-green-50));
  border-color: transparent;
}
.cadunico-revisar-v6 .cadunico-revisar-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  flex: 1;
}
.cadunico-revisar-v6 .cadunico-revisar-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #fff;
  color: var(--brand-indigo);
}
.cadunico-revisar-v6 .cadunico-revisar-hero-mark svg {
  width: 26px;
  height: 26px;
}
.cadunico-revisar-v6 .cadunico-revisar-hero-text {
  min-width: 0;
}
.cadunico-revisar-v6 .cadunico-revisar-hero-text h2 {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  word-break: break-word;
}
.cadunico-revisar-v6 .cadunico-revisar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 8px 0 4px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.cadunico-revisar-v6 .cadunico-revisar-meta span {
  font-variant-numeric: tabular-nums;
}

/* Lista de candidatos (status duplicate). */
.cadunico-revisar-v6 .cadunico-revisar-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.cadunico-revisar-v6 .cadunico-revisar-candidate-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--danger);
  border-radius: 12px;
  background: var(--canvas);
  align-items: center;
}
.cadunico-revisar-v6 .cadunico-revisar-candidate-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cadunico-revisar-v6 .cadunico-revisar-candidate-info strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.cadunico-revisar-v6 .cadunico-revisar-candidate-info small {
  font-size: 11.5px;
  color: var(--muted);
}

/* Grid de detalhes do novo cadastro. */
.cadunico-revisar-v6 .cadunico-revisar-new-grid {
  margin-top: 12px;
}

/* Tabela de comparação campo a campo. */
.cadunico-revisar-v6 .cadunico-revisar-compare-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cadunico-revisar-v6 .cadunico-revisar-link-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--brand-indigo-50);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-2);
}
.cadunico-revisar-v6 .cadunico-revisar-link-option input[type="checkbox"] {
  flex: 0 0 auto;
}
.cadunico-revisar-v6 .cadunico-revisar-compare-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cadunico-revisar-v6 .cadunico-revisar-compare-table td {
  vertical-align: middle;
}
.cadunico-revisar-v6 .cadunico-revisar-choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.cadunico-revisar-v6 .cadunico-revisar-choice label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.cadunico-revisar-v6 .cadunico-revisar-choice input[type="radio"] {
  flex: 0 0 auto;
}

@media (max-width: 1024px) {
  .cadunico-revisar-v6 .cadunico-revisar-hero {
    flex-direction: column;
  }
  .cadunico-revisar-v6 .cadunico-revisar-candidate-card {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.18 — Auditoria (logs do sistema)
   Escopo: .auditoria-v6
   Sem regra nova, sem cálculo novo. Apenas pintura visual sobre o
   markup existente (filtros, stat-row, tabela de logs).
   Outras telas LGPD (lgpd/*.php) e logs do portal (portal_logs/) ficam
   para fase seguinte. api/lgpd_record_access.php é endpoint JSON puro
   e fica intocado.
---------------------------------------------------------------------- */
.auditoria-v6 .auditoria-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auditoria-v6 .auditoria-filter-card .auditoria-filter-row {
  margin: 0;
}

.auditoria-v6 .auditoria-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.auditoria-v6 .t {
  font-size: 13px;
}
.auditoria-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.auditoria-v6 .t td {
  vertical-align: top;
}
.auditoria-v6 .t td small {
  font-size: 11.5px;
  color: var(--ink-2);
}
.auditoria-v6 .t td small.txt-mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  color: var(--ink-3);
  background: var(--canvas);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}
.auditoria-v6 .t .pill {
  font-size: 11px;
  white-space: nowrap;
}
.auditoria-v6 .t tbody tr:hover {
  background: var(--canvas);
}

@media (max-width: 1024px) {
  .auditoria-v6 .auditoria-stat-row {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.18B — LGPD + Portal Logs
   Escopos:
     .lgpd-v6                 (painel LGPD com termo pendente + KPIs + top 10 justificativas)
     .lgpd-justificativas-v6  (lista filtrada de justificativas)
     .portal-logs-v6          (logs anônimos do portal público)
   api/lgpd_record_access.php e lgpd/aceitar.php seguem intocados.
   Sem regra nova, sem cálculo novo.
---------------------------------------------------------------------- */

/* ---- lgpd/index.php ---- */
.lgpd-v6 .lgpd-pending-term {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--warn-bg);
  border: 1px solid rgba(201, 122, 4, .22);
}
.lgpd-v6 .lgpd-pending-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--warn);
}
.lgpd-v6 .lgpd-pending-mark svg {
  width: 20px;
  height: 20px;
}
.lgpd-v6 .lgpd-pending-body strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.lgpd-v6 .lgpd-pending-body p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.lgpd-v6 .lgpd-pending-form {
  margin: 0;
}

.lgpd-v6 .lgpd-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.lgpd-v6 .lgpd-checklist {
  margin-top: 12px;
}

/* Tabelas — escopo compartilhado entre lgpd-v6, lgpd-justificativas-v6, portal-logs-v6. */
.lgpd-v6 .t,
.lgpd-justificativas-v6 .t,
.portal-logs-v6 .t {
  font-size: 13px;
}
.lgpd-v6 .t th,
.lgpd-justificativas-v6 .t th,
.portal-logs-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lgpd-v6 .t td,
.lgpd-justificativas-v6 .t td,
.portal-logs-v6 .t td {
  vertical-align: top;
}
.lgpd-v6 .t td small.txt-mono,
.lgpd-justificativas-v6 .t td small.txt-mono,
.portal-logs-v6 .t td small.txt-mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  color: var(--ink-3);
  background: var(--canvas);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}
.lgpd-v6 .t tbody tr:hover,
.lgpd-justificativas-v6 .t tbody tr:hover,
.portal-logs-v6 .t tbody tr:hover {
  background: var(--canvas);
}

/* ---- lgpd/justificativas.php ---- */
.lgpd-justificativas-v6 .lgpd-justificativas-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lgpd-justificativas-v6 .lgpd-justificativas-filter-card .lgpd-justificativas-filter-row {
  margin: 0;
}

/* ---- portal_logs/index.php ---- */
.portal-logs-v6 .portal-logs-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.portal-logs-v6 .portal-logs-filter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.portal-logs-v6 .portal-logs-filter-card .portal-logs-filter-row {
  margin: 0;
}

@media (max-width: 1024px) {
  .lgpd-v6 .lgpd-stat-row,
  .portal-logs-v6 .portal-logs-stat-row {
    grid-template-columns: 1fr 1fr;
  }
  .lgpd-v6 .lgpd-pending-term {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.18C — LGPD documental (termos + políticas + registrar justificativa)
   Escopos:
     .lgpd-termos-v6
     .lgpd-politicas-v6
     .lgpd-registrar-justificativa-v6
   api/lgpd_record_access.php e lgpd/aceitar.php continuam intocados.
---------------------------------------------------------------------- */

/* Selo "obrigatório" para os 3 forms LGPD documentais. */
.lg-req {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
}

/* Forms compartilhados nos 3 escopos. */
.lgpd-termos-v6 .lgpd-termos-form,
.lgpd-politicas-v6 .lgpd-politicas-form,
.lgpd-registrar-justificativa-v6 .lgpd-registrar-justificativa-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lgpd-termos-v6 .lgpd-termos-grid-fields,
.lgpd-politicas-v6 .lgpd-politicas-grid-fields,
.lgpd-registrar-justificativa-v6 .lgpd-registrar-justificativa-grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.lgpd-termos-v6 .lgpd-termos-grid-fields .field,
.lgpd-politicas-v6 .lgpd-politicas-grid-fields .field,
.lgpd-registrar-justificativa-v6 .lgpd-registrar-justificativa-grid-fields .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lgpd-termos-v6 .lgpd-termos-grid-fields .field span,
.lgpd-politicas-v6 .lgpd-politicas-grid-fields .field span,
.lgpd-registrar-justificativa-v6 .lgpd-registrar-justificativa-grid-fields .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.lgpd-termos-v6 .lgpd-termos-grid-fields .field.full-row,
.lgpd-politicas-v6 .lgpd-politicas-grid-fields .field.full-row,
.lgpd-registrar-justificativa-v6 .lgpd-registrar-justificativa-grid-fields .field.full-row {
  grid-column: 1 / -1;
}
.lgpd-termos-v6 .lgpd-termos-grid-fields .hint,
.lgpd-politicas-v6 .lgpd-politicas-grid-fields .hint,
.lgpd-registrar-justificativa-v6 .lgpd-registrar-justificativa-grid-fields .hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Checkbox de "tornar ativo" no form de termos. */
.lgpd-termos-v6 .lgpd-termos-active-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--warn-bg);
  cursor: pointer;
}
.lgpd-termos-v6 .lgpd-termos-active-toggle input[type="checkbox"] {
  flex: 0 0 auto;
}
.lgpd-termos-v6 .lgpd-termos-active-toggle span {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  display: inline !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Tabelas compartilhadas nos 3 escopos. */
.lgpd-termos-v6 .t,
.lgpd-politicas-v6 .t {
  font-size: 13px;
}
.lgpd-termos-v6 .t th,
.lgpd-politicas-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lgpd-termos-v6 .t td,
.lgpd-politicas-v6 .t td {
  vertical-align: top;
}
.lgpd-termos-v6 .t td small.txt-mono,
.lgpd-politicas-v6 .t td small.txt-mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  color: var(--ink-3);
  background: var(--canvas);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}
.lgpd-termos-v6 .t tbody tr:hover,
.lgpd-politicas-v6 .t tbody tr:hover {
  background: var(--canvas);
}

/* ----------------------------------------------------------------------
   Fase 2.19 — Configurações do sistema
   Escopos:
     .configuracoes-v6              (index — KPIs + parâmetros gerais + atalhos)
     .configuracoes-parametros-v6   (13 settings UPSERT)
     .configuracoes-cadastro-v6     (unidades + territórios — CRUD genérico)
     .configuracoes-tipos-v6        (3 tabelas via $grupo + status-tabs)
     .configuracoes-alertas-v6      (7 regras: 5 toggles + 2 numéricos)
   Sem regra nova, sem cálculo novo. Backend preservado em todos os 6.
---------------------------------------------------------------------- */

/* Selo "obrigatório" reaproveitado. */
.cfg-req {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
}

/* Grid de fields compartilhado pelos forms de configurações (+ usuários, Fase 2.20). */
.configuracoes-v6 .configuracoes-grid-fields,
.configuracoes-parametros-v6 .configuracoes-grid-fields,
.configuracoes-cadastro-v6 .configuracoes-grid-fields,
.configuracoes-tipos-v6 .configuracoes-grid-fields,
.usuarios-form-v6 .configuracoes-grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.configuracoes-parametros-v6 .configuracoes-grid-fields .field,
.configuracoes-cadastro-v6 .configuracoes-grid-fields .field,
.configuracoes-tipos-v6 .configuracoes-grid-fields .field,
.usuarios-form-v6 .configuracoes-grid-fields .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.configuracoes-parametros-v6 .configuracoes-grid-fields .field span,
.configuracoes-cadastro-v6 .configuracoes-grid-fields .field span,
.configuracoes-tipos-v6 .configuracoes-grid-fields .field span,
.usuarios-form-v6 .configuracoes-grid-fields .field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.configuracoes-parametros-v6 .configuracoes-grid-fields .field.full-row,
.configuracoes-cadastro-v6 .configuracoes-grid-fields .field.full-row,
.configuracoes-tipos-v6 .configuracoes-grid-fields .field.full-row,
.usuarios-form-v6 .configuracoes-grid-fields .field.full-row {
  grid-column: 1 / -1;
}

/* Toggle de "ativo" (checkbox visualmente destacado). */
.configuracoes-cadastro-v6 .configuracoes-active-toggle,
.configuracoes-tipos-v6 .configuracoes-active-toggle,
.usuarios-form-v6 .configuracoes-active-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--brand-green-50);
  cursor: pointer;
}
.configuracoes-cadastro-v6 .configuracoes-active-toggle input[type="checkbox"],
.configuracoes-tipos-v6 .configuracoes-active-toggle input[type="checkbox"],
.usuarios-form-v6 .configuracoes-active-toggle input[type="checkbox"] {
  flex: 0 0 auto;
}
.configuracoes-cadastro-v6 .configuracoes-active-toggle span,
.configuracoes-tipos-v6 .configuracoes-active-toggle span,
.usuarios-form-v6 .configuracoes-active-toggle span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  display: inline !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ---- index.php ---- */
.configuracoes-v6 .configuracoes-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.configuracoes-v6 .configuracoes-stat-row .stat-link {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-indigo);
  text-decoration: none;
}
.configuracoes-v6 .configuracoes-stat-row .stat-link:hover {
  text-decoration: underline;
}
.configuracoes-v6 .configuracoes-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.configuracoes-v6 .configuracoes-quick-link {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--canvas);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, background .12s, transform .08s;
}
.configuracoes-v6 .configuracoes-quick-link:hover {
  border-color: var(--brand-indigo);
  background: var(--brand-indigo-50);
  transform: translateY(-1px);
}
.configuracoes-v6 .configuracoes-quick-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  color: var(--brand-indigo);
}
.configuracoes-v6 .configuracoes-quick-mark svg {
  width: 18px;
  height: 18px;
}
.configuracoes-v6 .configuracoes-quick-link strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.configuracoes-v6 .configuracoes-quick-link small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* ---- Tabelas compartilhadas ---- */
.configuracoes-cadastro-v6 .t,
.configuracoes-tipos-v6 .t {
  font-size: 13px;
}
.configuracoes-cadastro-v6 .t th,
.configuracoes-tipos-v6 .t th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.configuracoes-cadastro-v6 .t td,
.configuracoes-tipos-v6 .t td {
  vertical-align: top;
}
.configuracoes-cadastro-v6 .t td small,
.configuracoes-tipos-v6 .t td small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---- alertas.php ---- */
.configuracoes-alertas-v6 .configuracoes-alertas-rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.configuracoes-alertas-v6 .configuracoes-alertas-rule {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--canvas);
  cursor: pointer;
}
.configuracoes-alertas-v6 .configuracoes-alertas-rule-toggle {
  grid-template-columns: 28px 1fr;
}
.configuracoes-alertas-v6 .configuracoes-alertas-rule-number {
  grid-template-columns: 1fr 160px;
  cursor: default;
}
.configuracoes-alertas-v6 .configuracoes-alertas-rule input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.configuracoes-alertas-v6 .configuracoes-alertas-rule-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  border: 1.5px solid var(--line);
  color: transparent;
}
.configuracoes-alertas-v6 .configuracoes-alertas-rule-mark svg {
  width: 16px;
  height: 16px;
}
.configuracoes-alertas-v6 .configuracoes-alertas-rule input[type="checkbox"]:checked ~ .configuracoes-alertas-rule-mark {
  background: var(--brand-green);
  border-color: transparent;
  color: var(--ink);
}
.configuracoes-alertas-v6 .configuracoes-alertas-rule-toggle:has(input[type="checkbox"]:checked) {
  border-color: var(--brand-green);
  background: var(--brand-green-50);
}
.configuracoes-alertas-v6 .configuracoes-alertas-rule-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.configuracoes-alertas-v6 .configuracoes-alertas-rule-body strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.configuracoes-alertas-v6 .configuracoes-alertas-rule-body small {
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-top: 2px;
}

@media (max-width: 1024px) {
  .configuracoes-v6 .configuracoes-stat-row,
  .configuracoes-v6 .configuracoes-quick-actions {
    grid-template-columns: 1fr;
  }
  .configuracoes-alertas-v6 .configuracoes-alertas-rule-number {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------
   Fase 2.20 — Usuários e Permissões
   Escopos:
     .usuarios-v6              (lista — filtros + tabela)
     .usuarios-form-v6         (criar / editar / senha — reutiliza grid de configurações)
     .usuarios-permissoes-v6   (permissões específicas — matriz de checkboxes)
     .usuarios-perfis-v6       (matriz padrão por perfil — somente leitura)
   Backend preservado em todos os 6 arquivos. Sem regra/role/permissão nova.
   Matriz de permissões: name/value/checked/disabled inalterados.
---------------------------------------------------------------------- */

/* ---- lista (index.php) ---- */
.usuarios-v6 .usuarios-filter-card .usuarios-filter-row {
  margin: 0;
}
.usuarios-v6 .usuarios-filter-card .search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
}
.usuarios-v6 .usuarios-filter-card .search svg {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.usuarios-v6 .usuarios-filter-card .search input {
  border: 0;
  background: transparent;
  padding: 10px 0;
  width: 100%;
  font-size: 13.5px;
  color: var(--ink);
}
.usuarios-v6 .usuarios-filter-card .search input:focus {
  outline: none;
}
.usuarios-v6 .t small {
  display: block;
  color: var(--ink-3);
  font-size: 11.5px;
  margin-top: 2px;
}
.usuarios-v6 .t .txt-mono {
  font-variant-numeric: tabular-nums;
}

/* ---- notas das permissões específicas (permissoes.php) ---- */
.usuarios-permissoes-v6 .usuarios-permissoes-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  margin-bottom: 16px;
}
.usuarios-permissoes-v6 .usuarios-permissoes-note.tone-mint {
  border-color: rgba(7, 90, 53, 0.25);
  background: var(--brand-green-50);
}
.usuarios-permissoes-v6 .usuarios-permissoes-note.tone-blue {
  border-color: rgba(22, 54, 128, 0.18);
  background: rgba(22, 54, 128, 0.05);
}
.usuarios-permissoes-v6 .usuarios-permissoes-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.6);
  flex: 0 0 auto;
}
.usuarios-permissoes-v6 .usuarios-permissoes-note-icon svg {
  width: 18px;
  height: 18px;
}
.usuarios-permissoes-v6 .usuarios-permissoes-note strong {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 2px;
}
.usuarios-permissoes-v6 .usuarios-permissoes-note small {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---- matriz de checkboxes (permissoes.php) ---- */
.usuarios-permissoes-v6 .usuarios-permissoes-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.usuarios-permissoes-v6 .usuarios-permissoes-group h3 {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand-indigo);
  margin: 0 0 10px;
}
.usuarios-permissoes-v6 .usuarios-permissoes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.usuarios-permissoes-v6 .usuarios-permissoes-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.usuarios-permissoes-v6 .usuarios-permissoes-item:hover {
  border-color: var(--brand-indigo);
}
.usuarios-permissoes-v6 .usuarios-permissoes-item input[type="checkbox"] {
  margin-top: 2px;
  flex: 0 0 auto;
}
.usuarios-permissoes-v6 .usuarios-permissoes-item.is-default {
  background: var(--brand-green-50);
  border-color: rgba(7, 90, 53, 0.22);
  cursor: default;
}
.usuarios-permissoes-v6 .usuarios-permissoes-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.usuarios-permissoes-v6 .usuarios-permissoes-item-body strong {
  font-size: 13px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--ink);
}
.usuarios-permissoes-v6 .usuarios-permissoes-item-body small {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}
.usuarios-permissoes-v6 .usuarios-permissoes-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(7, 90, 53, 0.12);
  color: var(--brand-green, #075a35);
}

/* ---- matriz por perfil (perfis.php) ---- */
.usuarios-perfis-v6 .usuarios-perfis-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.usuarios-perfis-v6 .usuarios-perfis-summary-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.usuarios-perfis-v6 .usuarios-perfis-summary-card:hover {
  border-color: var(--brand-indigo);
  transform: translateY(-1px);
}
.usuarios-perfis-v6 .usuarios-perfis-summary-card.is-full {
  border-color: rgba(7, 90, 53, 0.3);
  background: var(--brand-green-50);
}
.usuarios-perfis-v6 .usuarios-perfis-summary-card.is-empty {
  border-style: dashed;
}
.usuarios-perfis-v6 .usuarios-perfis-summary-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.usuarios-perfis-v6 .usuarios-perfis-summary-card strong {
  font-size: 15px;
  color: var(--ink);
}
.usuarios-perfis-v6 .usuarios-perfis-summary-card small {
  font-size: 12px;
  color: var(--ink-2);
}
.usuarios-perfis-v6 .usuarios-perfis-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}
.usuarios-perfis-v6 .usuarios-perfis-card {
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 18px 20px;
  background: var(--canvas);
  scroll-margin-top: 90px;
}
.usuarios-perfis-v6 .usuarios-perfis-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.usuarios-perfis-v6 .usuarios-perfis-card-head h3 {
  font-size: 18px;
  margin: 8px 0 4px;
  color: var(--ink);
}
.usuarios-perfis-v6 .usuarios-perfis-card-head p {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  max-width: 60ch;
}
.usuarios-perfis-v6 .usuarios-perfis-counts {
  display: flex;
  gap: 18px;
  flex: 0 0 auto;
}
.usuarios-perfis-v6 .usuarios-perfis-counts div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.usuarios-perfis-v6 .usuarios-perfis-counts span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.usuarios-perfis-v6 .usuarios-perfis-counts strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.usuarios-perfis-v6 .usuarios-perfis-muted {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 12px 0 0;
}
.usuarios-perfis-v6 .usuarios-perfis-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.usuarios-perfis-v6 .usuarios-perfis-module {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface);
}
.usuarios-perfis-v6 .usuarios-perfis-module h4 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand-indigo);
  margin: 0 0 8px;
}
.usuarios-perfis-v6 .usuarios-perfis-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.usuarios-perfis-v6 .usuarios-perfis-perm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--canvas);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.usuarios-perfis-v6 .usuarios-perfis-perm small {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(22, 54, 128, 0.1);
  color: var(--brand-indigo);
}
.usuarios-perfis-v6 .usuarios-perfis-perm.is-sensitive {
  border-color: rgba(201, 122, 4, 0.3);
  background: rgba(201, 122, 4, 0.08);
  color: var(--warning, #8a5a00);
}
.usuarios-perfis-v6 .usuarios-perfis-perm.is-sensitive small {
  background: rgba(201, 122, 4, 0.18);
  color: var(--warning, #8a5a00);
}
.usuarios-perfis-v6 .usuarios-perfis-perm.is-missing {
  border-style: dashed;
  color: var(--ink-3);
}
.usuarios-perfis-v6 .usuarios-perfis-perm.is-missing small {
  background: rgba(125, 26, 44, 0.1);
  color: var(--danger, #7d1a2c);
}

@media (max-width: 1024px) {
  .usuarios-perfis-v6 .usuarios-perfis-card-head {
    flex-direction: column;
  }
  .usuarios-perfis-v6 .usuarios-perfis-counts {
    align-self: stretch;
    justify-content: flex-start;
  }
  .usuarios-perfis-v6 .usuarios-perfis-counts div {
    align-items: flex-start;
  }
}