/* ------------------------------------------------------------------ */
/* CondoLog Design System — "Balcão de Expedição"                       */
/* Functional efficiency for receiving station operators.               */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Tokens                                                               */
/* ------------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* Text hierarchy — like ink grades on a form */
  --ink-0: #1a2332;      /* primary — deep blue-black, ink on paper */
  --ink-1: #3d4f63;      /* secondary */
  --ink-2: #6b7c8f;      /* metadata / labels */
  --ink-3: #9faebb;      /* placeholder / muted */

  /* Surface elevation — like counter depth */
  --surface-0: #ffffff;  /* card, form, input background */
  --surface-1: #f4f5f7;  /* page background */
  --surface-2: #e8eaed;  /* table header, subtle raised */

  /* Borders — whisper-quiet separation */
  --border-0: rgba(26, 35, 50, 0.09);  /* standard */
  --border-1: rgba(26, 35, 50, 0.18);  /* emphasis */
  --border-2: rgba(26, 35, 50, 0.32);  /* strong / focus */

  /* Shell — the station header owns the room */
  --shell-bg:     #1a2332;
  --shell-text:   #c8d5e1;
  --shell-text-strong: #ffffff;  /* hover/active emphasis on the dark shell */

  /* Actions */
  --action:       #0f766e;  /* teal — confirm, register */
  --action-hover: #0d6460;
  --action-text:  #ffffff;

  /* Semantic */
  --success:    #166534;
  --success-bg: #f0fdf4;
  --warning:    #92400e;
  --warning-bg: #fffbeb;
  --error:      #9f1239;
  --error-bg:   #fff1f2;
  --info:       #1e40af;
  --info-bg:    #eff6ff;

  /* Role accents — station identity colors */
  --role-portaria: #1d6ab5;
  --role-admin:    #0f766e;
  --role-gestao:   #6d28d9;

  /* Scanner ergonomics */
  --scan-input-h:  3.6rem;
  --scan-input-fs: 1.35rem;
  --scan-btn-h:    4rem;

  /* Base */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* ------------------------------------------------------------------ */
/* Reset                                                                */
/* ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--surface-1);
  color: var(--ink-0);
  margin: 0;
  min-height: 100vh;
}

/* ------------------------------------------------------------------ */
/* Shell — Station Header                                               */
/* Three fixed columns: brand | station | user+logout                  */
/* The station name is the dominant element — operators must know      */
/* where they are in under 0.5 seconds.                                */
/* ------------------------------------------------------------------ */

.shell-header {
  align-items: center;
  background: var(--shell-bg);
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* symmetric columns → true center */
  gap: 0 1rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  height: 3.25rem;
}

/* Brand — left-anchored within its 1fr column */
.shell-logo {
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  font-weight: 800;
  justify-self: start;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s;
  white-space: nowrap;
}

.shell-logo:hover { color: rgba(255,255,255,0.85); }
.shell-logo span  { color: var(--action); }

/* Station identity — the dominant center column                       */
/* This is what the operator reads, not the nav links.                 */
.shell-station {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  justify-content: center;
  text-align: center;
}

/* The station name — large, role-colored, impossible to miss */
.shell-station-name {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.shell-station-name--portaria { color: #93c5fd; }   /* blue: receiving */
.shell-station-name--admin    { color: #6ee7b7; }   /* teal: conference */
.shell-station-name--gestao   { color: #c4b5fd; }   /* purple: management */

/* Optional current-screen label — set via {% block screen_label %} */
.shell-screen-label {
  color: rgba(255,255,255,0.38);
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.shell-screen-label:empty { display: none; }

/* Feature 035 (shell context): current condominium as the primary identity,
   operating mode demoted to a coloured subtitle. Reduces "which condominium am
   I operating?" ambiguity in multi-condominium. */
.shell-condo {
  color: var(--shell-text);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-decoration: none;
}
.shell-condo--link { transition: color 0.15s; }
.shell-condo--link:hover { color: var(--shell-text-strong); }
.shell-condo-caret { font-size: 0.6rem; opacity: 0.7; }

.shell-station-sub { display: block; line-height: 1; }
.shell-mode {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.shell-mode--portaria { color: #93c5fd; }   /* blue: receiving */
.shell-mode--admin    { color: #6ee7b7; }   /* teal: conference */
.shell-mode--gestao   { color: #c4b5fd; }   /* purple: management */

.shell-screen-label-text {
  color: rgba(255,255,255,0.38);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shell-screen-label-text:empty { display: none; }
.shell-mode + .shell-screen-label-text:not(:empty)::before {
  content: "·";
  margin: 0 0.35rem;
  color: rgba(255,255,255,0.3);
}

/* Context switcher — inline dropdown to change the current condominium without
   leaving the page. Native <details>: no-JS, keyboard-accessible. */
.shell-condo-switch { position: relative; }
.shell-condo-switch > summary { cursor: pointer; list-style: none; }
.shell-condo-switch > summary::-webkit-details-marker { display: none; }
.shell-condo-caret { transition: transform 0.15s; }
.shell-condo-switch[open] > summary .shell-condo-caret { transform: rotate(180deg); }

.shell-condo-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 13rem;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface-0);
  /* borders-only: white card over the lighter page + emphasis border + an
     allowed hairline ring (0 0 0 1px) for the floating edge — no drop-shadow. */
  border: 1px solid var(--border-1);
  box-shadow: 0 0 0 1px rgba(26, 35, 50, 0.04);
  border-radius: 10px;
  padding: 0.35rem;
  text-align: left;
}
.shell-condo-menu-head {
  margin: 0.15rem 0.5rem 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.shell-condo-menu form { margin: 0; }
.shell-condo-menu .shell-condo-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 0.45rem 0.6rem;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-0);
  cursor: pointer;
}
.shell-condo-menu .shell-condo-option:hover { background: var(--surface-1); }
.shell-condo-menu .shell-condo-option.is-current { font-weight: 700; color: var(--action); }
.shell-condo-menu .shell-condo-option.is-current::before { content: "✓ "; }

/* Form that wraps a single inline action (logout, toggle) — no own spacing. */
.inline-action-form { margin: 0; }

/* User area — right-anchored within its 1fr column */
.shell-user {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  justify-self: end;
  white-space: nowrap;
}

.shell-user-name {
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
}

.shell-logout {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 5px;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: auto;
  padding: 0.28rem 0.7rem;
  transition: border-color 0.15s, color 0.15s;
}

.shell-logout:hover {
  border-color: rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.9);
}

/* ------------------------------------------------------------------ */
/* Sub-navigation — thin bar below the header                          */
/* Only visible for gestão (multi-station) users.                      */
/* Single-station operators see nothing here.                          */
/* ------------------------------------------------------------------ */

.shell-subnav {
  background: #222e42;           /* slightly lighter than shell-bg — shows layering */
  border-bottom: 2px solid var(--action);
  display: flex;
  gap: 0;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.subnav-link {
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,0.45);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: -1px;   /* overlap the container border */
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
}

.subnav-link:hover    { color: rgba(255,255,255,0.8); }
.subnav-link.is-active {
  border-bottom-color: var(--action);
  color: #6ee7b7;
}

/* ------------------------------------------------------------------ */
/* Main content area                                                    */
/* ------------------------------------------------------------------ */

.shell {
  margin: 0 auto;
  max-width: 72rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem);
}

/* ------------------------------------------------------------------ */
/* Page title                                                           */
/* ------------------------------------------------------------------ */

.page-title {
  color: var(--ink-0);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}

/* Subtitle sits directly under a title; tighten the title gap when present. */
.page-title + .page-subtitle,
.scanner-title + .page-subtitle {
  margin: -1.1rem 0 1.5rem;
}

.page-subtitle {
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0 0 1.5rem;
}

.workflow h1,
.scanner-title {
  color: var(--ink-0);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}

.workflow h2 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 2rem 0 0.85rem;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */

button,
.btn-primary,
.btn-secondary {
  align-items: center;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  gap: 0.4rem;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
}

.btn-primary,
button[type="submit"] {
  background: var(--action);
  border: 0;
  color: var(--action-text);
}

.btn-primary:hover,
button[type="submit"]:hover { background: var(--action-hover); }

.btn-secondary {
  background: var(--surface-0);
  border: 1.5px solid var(--border-1);
  color: var(--ink-0);
}

.btn-secondary:hover { background: var(--surface-2); }

button.btn-secondary[type="submit"] {
  background: var(--surface-0);
  border: 1.5px solid var(--border-1);
  color: var(--ink-0);
}

button.btn-secondary[type="submit"]:hover {
  background: var(--surface-2);
}

button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.btn-scanner-submit {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  min-height: var(--scan-btn-h);
  text-transform: uppercase;
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* Form elements — general                                              */
/* ------------------------------------------------------------------ */

label, input, button, select, textarea { font: inherit; }

input, select, textarea {
  background: var(--surface-0);
  border: 1.5px solid var(--border-1);
  border-radius: 8px;
  color: var(--ink-0);
  display: block;
  margin-top: 0.3rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.15s, outline 0.15s;
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--action);
  outline: 3px solid rgba(15, 118, 110, 0.18);
  outline-offset: 0;
}

input[type="checkbox"] {
  border-radius: 4px;
  flex-shrink: 0;
  min-height: 1.2rem;
  width: 1.2rem;
}

input[type="file"] {
  background: var(--surface-1);
  min-height: auto;
  padding: 0.4rem 0.6rem;
}

/* ------------------------------------------------------------------ */
/* Scanner Screen — the primary operational surface                     */
/* ------------------------------------------------------------------ */

.scanner-screen {
  margin: 0 auto;
  max-width: 44rem;
}

.scanner-form {
  display: grid;
  gap: 1.35rem;
}

.scanner-form--search {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.scanner-form--search .scanner-field { flex: 1; min-width: 14rem; }
.scanner-form--search button { flex-shrink: 0; min-height: 3.6rem; }

.scanner-field {
  display: grid;
  gap: 0.3rem;
}
/* display:grid acima sobrescreve o [hidden] do UA — restaura o ocultamento para
   campos alternados por JS (ex.: a lista de moradores da correção, oculta até a busca). */
.scanner-field[hidden] { display: none; }

.scanner-label {
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.scanner-input {
  background: var(--surface-0);
  border: 1.5px solid var(--border-1);
  border-radius: 8px;
  color: var(--ink-0);
  font: inherit;
  font-size: 1rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  transition: border-color 0.15s;
  width: 100%;
}

.scanner-input:focus {
  border-color: var(--action);
  outline: 3px solid rgba(15, 118, 110, 0.18);
  outline-offset: 0;
}

/* The main scanner input — large for distance reading */
.scanner-input--large {
  font-size: var(--scan-input-fs);
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: var(--scan-input-h);
}

.scanner-field--error .scanner-input { border-color: var(--error); }

.scanner-errors {
  color: var(--error);
  font-size: 0.82rem;
  font-weight: 600;
  list-style: none;
  margin: 0;
  padding: 0;
}

.scanner-errors-block {
  background: var(--error-bg);
  border: 1px solid rgba(159, 18, 57, 0.18);
  border-radius: 8px;
  color: var(--error);
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
}

/* ------------------------------------------------------------------ */
/* Success Banner                                                       */
/* ------------------------------------------------------------------ */

.scanner-banner {
  align-items: center;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
}

.scanner-banner--success {
  background: var(--success-bg);
  border: 1px solid rgba(22, 101, 52, 0.22);
  color: var(--success);
}

.banner-detail {
  color: var(--ink-1);
  flex: 1;
  font-size: 0.875rem;
}

.banner-dismiss {
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  min-height: auto;
  padding: 0.2rem 0.4rem;
}

.banner-dismiss:hover { background: rgba(0,0,0,0.06); }

/* ------------------------------------------------------------------ */
/* Inline result states                                                 */
/* ------------------------------------------------------------------ */

.scanner-result { margin-top: 1.25rem; }

.scanner-state {
  border-radius: 10px;
  font-size: 0.925rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1.1rem;
}

.scanner-state--warning {
  background: var(--warning-bg);
  border: 1px solid rgba(146, 64, 14, 0.18);
  color: var(--warning);
}

.scanner-state--info {
  background: var(--info-bg);
  border: 1px solid rgba(30, 64, 175, 0.15);
  color: var(--info);
}

/* ------------------------------------------------------------------ */
/* Package info card (confirm inline)                                   */
/* ------------------------------------------------------------------ */

.scanner-package-info {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
}

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

.scanner-info-table th,
.scanner-info-table td {
  border: 0;
  border-bottom: 1px solid var(--border-0);
  font-size: 0.875rem;
  padding: 0.45rem 0;
  text-align: left;
  vertical-align: middle;
}

.scanner-info-table th {
  color: var(--ink-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-right: 1rem;
  text-transform: uppercase;
  width: 9rem;
}

.scanner-info-table td { color: var(--ink-0); font-weight: 500; }

.scanner-info-table tr:last-child th,
.scanner-info-table tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Balcão reading mode — conference screens only                        */
/*                                                                      */
/* The admin operator stands 60–90cm from the monitor, package in       */
/* hand, needing to confirm tracking code + resident at a glance.       */
/* These overrides scope exclusively to .scanner-screen so they never   */
/* touch the backlog table, notification list, or other surfaces.       */
/* ------------------------------------------------------------------ */

/* Row labels: still abbreviated and uppercase, but readable at arm's length */
.scanner-screen .scanner-info-table th {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding-right: 1.25rem;
  width: 8.5rem;
}

/* Data values: each field needs a different weight so the eye          */
/* knows what matters — tracking code highest, metadata lowest.        */
.scanner-screen .scanner-info-table td {
  font-size: 1rem;
  font-weight: 500;
  padding: 0.55rem 0;
}

/* Tracking code — the primary verification datum. Larger, bolder,     */
/* tabular so digit mismatches are immediately visible.                 */
.scanner-screen .scanner-info-table tr:first-child td {
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Resident name — second most important field. Bold, readable.        */
.scanner-screen .scanner-info-table tr:nth-child(2) td {
  font-size: 1.05rem;
  font-weight: 600;
}

/* Row padding needs a bump too — tight rows are harder to parse       */
/* when scanning quickly from a distance.                               */
.scanner-screen .scanner-info-table th,
.scanner-screen .scanner-info-table td {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* Pendência de vínculo é exceção BLOQUEANTE: o operador precisa vincular */
/* o morador antes de confirmar. O valor genérico do <td> escondia o     */
/* .cell-pending; aqui ele vence dentro do balcão. Reusa --warning (sem  */
/* nova paleta) e marca tanto o campo Morador quanto a linha Pendência.  */
.scanner-screen .scanner-info-table td.cell-pending {
  color: var(--warning);
  font-weight: 700;
}

/* Form labels inside the confirm section: slightly larger,            */
/* still uppercase so they read as labels not content.                 */
.scanner-form--confirm .scanner-label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

/* Checkbox text needs to be readable without squinting —              */
/* operator confirms "physical check done" while looking away.         */
.scanner-form--confirm .scanner-label--checkbox {
  font-size: 1rem;
  font-weight: 500;
  gap: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Scanner footer (fallback links)                                      */
/* ------------------------------------------------------------------ */

.scanner-footer {
  border-top: 1px solid var(--border-0);
  margin-top: 2rem;
  padding-top: 1rem;
}

.link-secondary {
  color: var(--ink-2);
  font-size: 0.85rem;
  text-decoration: none;
}

.link-secondary:hover { color: var(--ink-1); text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Checkbox label (in confirm form)                                     */
/* ------------------------------------------------------------------ */

.scanner-label--checkbox {
  align-items: center;
  display: flex;
  font-size: 0.95rem;
  font-weight: 500;
  gap: 0.6rem;
  letter-spacing: 0;
  text-transform: none;
}

.required-mark { color: var(--error); }

/* ------------------------------------------------------------------ */
/* Facts (definition list — package detail)                             */
/* ------------------------------------------------------------------ */

.facts {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 10px;
  display: grid;
  gap: 0 1rem;
  grid-template-columns: max-content 1fr;
  padding: 0.25rem 1.25rem;
}

.facts dt {
  border-bottom: 1px solid var(--border-0);
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.55rem 0;
  text-transform: uppercase;
}

.facts dd {
  border-bottom: 1px solid var(--border-0);
  color: var(--ink-0);
  font-weight: 500;
  margin: 0;
  padding: 0.55rem 0;
}

.facts dt:last-of-type, .facts dd:last-of-type { border-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Table                                                                */
/* ------------------------------------------------------------------ */

.table-wrap {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 10px;
  /* Rola na horizontal quando a tabela é mais larga que o card (ex.: coluna
     Ações em telas estreitas) em vez de cortar o conteúdo à direita. */
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  font-size: 0.875rem;
  width: 100%;
}

thead { background: var(--surface-2); }

th {
  color: var(--ink-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.6rem 0.85rem;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

td {
  border-bottom: 1px solid var(--border-0);
  color: var(--ink-0);
  padding: 0.65rem 0.85rem;
  vertical-align: middle;
}

/* Tabelas de resultado (busca/Localizar) têm células multi-linha (morador =
   nome + unidade, localização = badge + mensagem). Alinhar TODAS as células ao
   topo evita a data de "Recebida" (1 linha) flutuar no meio da linha. */
.results-section table td { vertical-align: top; }

tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(15, 118, 110, 0.03); }

/* ------------------------------------------------------------------ */
/* Backlog — state counts                                               */
/* ------------------------------------------------------------------ */

.state-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.state-count-item {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 8px;
  padding: 0.6rem 1rem;
}

.state-count-label {
  color: var(--ink-2);
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.state-count-value {
  color: var(--ink-0);
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

/* ------------------------------------------------------------------ */
/* Filters                                                              */
/* ------------------------------------------------------------------ */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
}

.filters a {
  border: 1.5px solid var(--border-1);
  border-radius: 6px;
  color: var(--ink-1);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  text-decoration: none;
  transition: all 0.15s;
}

.filters a:hover { border-color: var(--action); color: var(--action); }

.filters a.is-active {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Badges                                                               */
/* ------------------------------------------------------------------ */

.badge {
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.45rem;
}

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

/* Notification type badges */
.notif-badge { border-radius: 4px; font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.45rem; }
.notif-badge--auto   { background: var(--info-bg);    color: var(--info);    }
.notif-badge--manual { background: var(--surface-2);  color: var(--ink-2);   }

.notif-warning {
  background: var(--warning-bg);
  border: 1px solid rgba(146, 64, 14, 0.18);
  border-radius: 6px;
  color: var(--warning);
  font-size: 0.82rem;
  margin: 0.35rem 0;
  padding: 0.45rem 0.75rem;
}

.notif-note { color: var(--ink-2); font-size: 0.82rem; font-style: italic; }

/* ------------------------------------------------------------------ */
/* Notification history list                                            */
/* ------------------------------------------------------------------ */

.notification-history {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.notification-history li {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 8px;
  font-size: 0.875rem;
  padding: 0.85rem 1.1rem;
}

.notification-history p {
  color: var(--ink-1);
  margin: 0.35rem 0 0;
}

/* ------------------------------------------------------------------ */
/* Search form (conference / pickup)                                    */
/* ------------------------------------------------------------------ */

.search-form {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
  max-width: 38rem;
}

/* ------------------------------------------------------------------ */
/* Pickup screen — the code field is the primary action                 */
/* ------------------------------------------------------------------ */

.pickup-screen { margin: 0 auto; max-width: 44rem; }

/* Results table lives outside .pickup-screen — inherits full .shell width */
.results-section { margin-top: 1.5rem; }

.pickup-primary {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
}

.pickup-primary-title {
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
}

.pickup-fallback-title {
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

/* Secondary search — details card */
.pickup-fallback {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  padding: 0;
}

.pickup-fallback-summary {
  color: var(--ink-2);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  list-style: none;
  padding: 1rem 1.25rem;
  text-transform: uppercase;
  user-select: none;
}

.pickup-fallback-summary::-webkit-details-marker { display: none; }

.pickup-fallback-summary::before {
  content: "▸ ";
  color: var(--action);
  font-size: 0.65rem;
}

details[open] .pickup-fallback-summary::before { content: "▾ "; }

.pickup-fallback-form {
  border-top: 1px solid var(--border-0);
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.pickup-unit-row {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(5rem, 1fr) minmax(7rem, 1.5fr) auto;
}

.pickup-unit-btn {
  margin-bottom: 0; /* align with inputs */
  white-space: nowrap;
}

.pickup-form {
  display: grid;
  gap: 0.9rem;
}

/* ------------------------------------------------------------------ */
/* Notification form                                                    */
/* ------------------------------------------------------------------ */

.notification-form {
  display: grid;
  gap: 1rem;
  max-width: 38rem;
}

.notification-form select,
.notification-form textarea {
  /* Inherits from general form element rules */
}

/* ------------------------------------------------------------------ */
/* Conference form                                                      */
/* ------------------------------------------------------------------ */

.conference-form { display: grid; gap: 1rem; max-width: 38rem; }

/* ------------------------------------------------------------------ */
/* Action links / commands                                              */
/* ------------------------------------------------------------------ */

.command {
  background: var(--surface-0);
  border: 1.5px solid var(--action);
  border-radius: 8px;
  color: var(--action);
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.4rem 0.4rem 0 0;
  padding: 0.45rem 0.9rem;
  text-decoration: none;
  transition: all 0.15s;
}

.command:hover { background: var(--action); color: #fff; }

/* ------------------------------------------------------------------ */
/* Error / validation messages                                          */
/* ------------------------------------------------------------------ */

.error-message {
  background: var(--error-bg);
  border: 1px solid rgba(159, 18, 57, 0.18);
  border-radius: 8px;
  color: var(--error);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding: 0.65rem 0.9rem;
}

.errorlist {
  background: var(--error-bg);
  border: 1px solid rgba(159, 18, 57, 0.18);
  border-radius: 6px;
  color: var(--error);
  font-size: 0.82rem;
  font-weight: 600;
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0.5rem 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Resident autocomplete                                                */
/* ------------------------------------------------------------------ */

.search-results {
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  display: grid;
  gap: 0;
  overflow: hidden;
}

.search-results button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-0);
  border-radius: 0;
  color: var(--ink-0);
  min-height: 2.6rem;
  padding: 0.5rem 0.9rem;
  text-align: left;
}

.search-results button:last-child { border-bottom: 0; }
.search-results button:hover,
.search-results button.is-active {
  background: var(--surface-1);
}
/* Keyboard-active option: a teal inset marker so arrow-key focus reads at a */
/* glance, distinct from a mere mouse hover. */
.search-results button.is-active {
  box-shadow: inset 3px 0 0 var(--action);
}

.selected-resident {
  background: var(--surface-0);
  border: 1.5px solid var(--action);
  border-radius: 8px;
  font-size: 0.9rem;
  padding: 0.65rem 0.9rem;
}

.selected-resident.is-empty {
  border-color: var(--border-1);
  border-style: dashed;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ */
/* Unit search grid                                                     */
/* ------------------------------------------------------------------ */

.unit-search {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(6rem, 1fr) minmax(8rem, 1fr) auto;
}

/* ------------------------------------------------------------------ */
/* Portaria receipt — block structure                                   */
/* ------------------------------------------------------------------ */

/* ── PDV success panel ────────────────────────────────────────────── */
.receipt-success {
  background: var(--success-bg);
  border: 2px solid #16a34a;
  border-radius: 16px;
  cursor: pointer;
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  padding: 2rem 1.5rem;
  place-items: center;
  text-align: center;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.receipt-success--out {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

.receipt-success-check {
  color: #16a34a;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
}

.receipt-success-label {
  color: var(--success);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.receipt-success-code {
  color: var(--ink-0);
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
}

.receipt-success-detail {
  color: var(--ink-1);
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
  font-weight: 500;
  gap: 0.15rem;
}

.receipt-success-unit {
  color: var(--ink-2);
  font-size: 0.82rem;
}

.receipt-success-next {
  color: var(--ink-2);
  font-size: 0.72rem;
  font-style: italic;
  margin: 0.65rem 0 0;
}

/* Step blocks (Rastreio, Destinatário) */
.receipt-block {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.25rem;
}

.receipt-block-title {
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
}

/* Pending linkage — exception path, warning styling */
.receipt-pending {
  background: var(--warning-bg);
  border: 1px solid rgba(146, 64, 14, 0.18);
  border-radius: 12px;
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
}

.receipt-pending--active {
  border-color: rgba(146, 64, 14, 0.35);
}

.receipt-pending-trigger {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 0.6rem;
}

.receipt-pending-trigger input[type="checkbox"] {
  accent-color: var(--warning);
  flex-shrink: 0;
  height: 1rem;
  margin-top: 0.2rem;
  width: 1rem;
}

.receipt-pending-label {
  color: var(--warning);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

.receipt-pending-hint {
  color: var(--warning);
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0;
  opacity: 0.85;
  padding-left: 1.6rem; /* indent under checkbox */
}

.receipt-pending-note {
  padding-left: 1.6rem;
}

.receipt-pending-note textarea.scanner-input {
  font-size: 0.88rem;
  min-height: 4rem;
  padding: 0.6rem 0.8rem;
  resize: vertical;
}

/* ------------------------------------------------------------------ */
/* Camera capture preview thumbnail                                     */
/* ------------------------------------------------------------------ */

.camera-preview {
  border: 2px solid #16a34a;
  border-radius: 8px;
  display: block;
  margin-top: 0.75rem;
  max-height: 9rem;
  max-width: min(100%, 14rem);
  object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Receipt photo                                                        */
/* ------------------------------------------------------------------ */

.receipt-photo {
  border: 1px solid var(--border-0);
  border-radius: 8px;
  display: block;
  margin: 1rem 0;
  max-height: 18rem;
  max-width: min(100%, 28rem);
}

/* ------------------------------------------------------------------ */
/* Home screen — role-based entry cards                                 */
/* ------------------------------------------------------------------ */

.home-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  margin-top: 0.5rem;
  max-width: 56rem;
}

.home-card {
  background: var(--surface-0);
  border: 1.5px solid var(--border-0);
  border-radius: 12px;
  display: grid;
  gap: 0.25rem;
  padding: 1.5rem;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.home-card:hover {
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.home-card-role {
  color: var(--ink-2);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-card-title {
  color: var(--ink-0);
  font-size: 1.05rem;
  font-weight: 700;
}

.home-card-desc { color: var(--ink-2); font-size: 0.85rem; }

/* ------------------------------------------------------------------ */
/* 403 / error screen                                                   */
/* ------------------------------------------------------------------ */

.error-screen {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 55vh;
  text-align: center;
}

.error-screen-code {
  color: var(--ink-3);
  font-size: 5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}

.error-screen-title {
  color: var(--ink-0);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0.5rem 0 0;
}

.error-screen-body {
  color: var(--ink-2);
  font-size: 0.9rem;
  margin: 0.5rem 0 2rem;
  max-width: 26rem;
}

/* ------------------------------------------------------------------ */
/* Alert banners                                                        */
/* ------------------------------------------------------------------ */

.alert {
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
}

.alert--error {
  background: var(--error-bg);
  border: 1px solid rgba(159, 18, 57, 0.2);
  color: var(--error);
}

.alert--success {
  background: var(--success-bg);
  border: 1px solid rgba(22, 101, 52, 0.2);
  color: var(--success);
}

.alert--warning {
  background: var(--warning-bg);
  border: 1px solid rgba(146, 64, 14, 0.2);
  color: var(--warning);
}

/* ------------------------------------------------------------------ */
/* Backlog — state cards (clickable count cards)                        */
/* ------------------------------------------------------------------ */

.state-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.state-card {
  background: var(--surface-0);
  border: 1.5px solid var(--border-0);
  border-radius: 10px;
  display: grid;
  gap: 0.1rem;
  min-width: 7rem;
  padding: 0.85rem 1.1rem;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.state-card:hover {
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
}

.state-card--active {
  background: var(--action);
  border-color: var(--action);
}

.state-card--active .state-card-count,
.state-card--active .state-card-label { color: #fff; }

.state-card-count {
  color: var(--ink-0);
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.state-card-label {
  color: var(--ink-2);
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Filter strip (pill-style filters)                                    */
/* ------------------------------------------------------------------ */

.filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.filter-pill {
  border: 1.5px solid var(--border-1);
  border-radius: 100px;
  color: var(--ink-1);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  text-decoration: none;
  transition: all 0.15s;
}

.filter-pill:hover { border-color: var(--action); color: var(--action); }

.filter-pill--active {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
}

/* No chip ATIVO (fundo teal), o hover não pode reaplicar color:var(--action) do
   .filter-pill:hover — daria texto teal sobre fundo teal (some). Mantém branco. */
.filter-pill--active:hover { background: var(--action); border-color: var(--action); color: #fff; }

/* ------------------------------------------------------------------ */
/* Status pills                                                          */
/* ------------------------------------------------------------------ */

.status-pill {
  border-radius: 100px;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.6rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Map to semantic colors by status slug. Slugs MUST match PackageStatus  */
/* values lowercased (recebida_na_portaria etc.); mirrors .detail-status  */
/* so a status reads the same colour no matter the screen.                */
.status-pill--recebida_na_portaria     { background: var(--info-bg);    color: var(--info);    }
.status-pill--em_transporte_interno    { background: var(--warning-bg); color: var(--warning); }
.status-pill--disponivel_para_retirada { background: var(--success-bg); color: var(--success); }
.status-pill--retirada           { background: var(--surface-2);  color: var(--ink-2);   }

/* ------------------------------------------------------------------ */
/* Table — empty state cell                                             */
/* ------------------------------------------------------------------ */

.table-empty {
  color: var(--ink-2);
  font-size: 0.9rem;
  padding: 2rem 1rem;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Code link (tracking code in table)                                   */
/* ------------------------------------------------------------------ */

.link-code {
  color: var(--ink-0);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.link-code:hover { color: var(--action); text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Notification badges — expanded set                                   */
/* ------------------------------------------------------------------ */

.notif-badge--ok    { background: var(--success-bg); color: var(--success); }
.notif-badge--warn  { background: var(--warning-bg); color: var(--warning); }
.notif-badge--alert { background: var(--warning-bg); color: var(--warning); cursor: help; }
.notif-badge--none  { background: var(--surface-2);  color: var(--ink-2);   }

/* ------------------------------------------------------------------ */
/* Info card (package summary on notification / detail pages)           */
/* ------------------------------------------------------------------ */

.info-card {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  overflow: hidden;
}

.info-card-header {
  align-items: center;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-0);
  display: flex;
  gap: 0.75rem;
  padding: 0.65rem 1.25rem;
}

.info-card-label {
  color: var(--ink-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.info-card-tracking {
  color: var(--ink-0);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.info-card-body { padding: 0.5rem 1.25rem; }

.info-grid { display: grid; gap: 0; }

.info-row {
  border-bottom: 1px solid var(--border-0);
  display: grid;
  gap: 0 1rem;
  grid-template-columns: 9rem 1fr;
  padding: 0.5rem 0;
}

.info-row:last-child { border-bottom: 0; }

.info-row dt {
  color: var(--ink-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.15rem 0;
  text-transform: uppercase;
}

.info-row dd {
  color: var(--ink-0);
  font-weight: 500;
  margin: 0;
  padding: 0.15rem 0;
}

/* ------------------------------------------------------------------ */
/* Form card (notification form section)                                */
/* ------------------------------------------------------------------ */

.form-card {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  padding: 1.25rem;
}

.form-card-title {
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Field components (structured form fields)                            */
/* ------------------------------------------------------------------ */

.field { display: grid; gap: 0.25rem; }

.field-label {
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.field-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

.field-feedback {
  min-height: 1.2rem;
}

.field-help {
  color: var(--ink-2);
  display: block;
  font-size: 0.78rem;
}

.field-errors {
  color: var(--error);
  font-size: 0.8rem;
  font-weight: 600;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------ */
/* Notification form                                                     */
/* ------------------------------------------------------------------ */

.notif-form { display: grid; gap: 0; }

/* ------------------------------------------------------------------ */
/* Notification history list (redesigned)                               */
/* ------------------------------------------------------------------ */

.notif-history {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.notif-history-item {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
}

.notif-history-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  margin-bottom: 0.35rem;
}

.notif-history-channel {
  color: var(--ink-1);
  font-size: 0.82rem;
  font-weight: 600;
}

.notif-history-status {
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.45rem;
  text-transform: uppercase;
}

.notif-history-status--ok   { background: var(--success-bg); color: var(--success); }
.notif-history-status--none { background: var(--surface-2);  color: var(--ink-2);   }
.notif-history-status--warn { background: var(--warning-bg); color: var(--warning); }

.notif-history-meta {
  color: var(--ink-3);
  font-size: 0.75rem;
  margin-left: auto;
  white-space: nowrap;
}

.notif-history-body {
  color: var(--ink-1);
  font-size: 0.875rem;
  margin: 0.3rem 0 0;
}

.notif-history-note {
  color: var(--ink-2);
  font-size: 0.8rem;
  font-style: italic;
  margin: 0.25rem 0 0;
}

/* ------------------------------------------------------------------ */
/* Package detail                                                        */
/* ------------------------------------------------------------------ */

/* Status badge in detail table */
.detail-status {
  border-radius: 4px;
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  text-transform: uppercase;
}
.detail-status--disponivel_para_retirada { background: var(--success-bg); color: var(--success); }
.detail-status--recebida_na_portaria     { background: var(--info-bg);    color: var(--info); }
.detail-status--em_transporte_interno    { background: var(--warning-bg); color: var(--warning); }
.detail-status--retirada                 { background: var(--surface-2);  color: var(--ink-2); }

/* Action buttons row */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.detail-actions .btn-primary,
.detail-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Section header (Custódia, Notificações) */
.detail-section {
  margin-top: 2rem;
}

.detail-section-title {
  border-bottom: 1px solid var(--border-0);
  color: var(--ink-1);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
}

.detail-empty {
  color: var(--ink-2);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0;
}

/* Custody timeline */
.custody-timeline {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.custody-event {
  align-items: baseline;
  border-bottom: 1px solid var(--border-0);
  display: grid;
  gap: 0 1rem;
  grid-template-columns: 8rem 1fr auto;
  padding: 0.65rem 0;
}

.custody-event:last-child { border-bottom: none; }

.custody-event-time {
  color: var(--ink-2);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.custody-event-label {
  color: var(--ink-0);
  font-size: 0.88rem;
  font-weight: 500;
}

.custody-event-operator {
  color: var(--ink-2);
  font-size: 0.78rem;
  white-space: nowrap;
}

.custody-event-note {
  color: var(--ink-2);
  font-size: 0.78rem;
  grid-column: 2 / -1;
}

.custody-event--empty {
  color: var(--ink-2);
  font-size: 0.85rem;
  font-style: italic;
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------------ */
/* Portaria workbench                                                   */
/* ------------------------------------------------------------------ */

.message-stack {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.workbench-screen {
  display: grid;
  gap: 1rem;
}

.workbench-header {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.workbench-subtitle {
  color: var(--ink-2);
  font-size: 0.9rem;
  margin: -1rem 0 0;
}

.workbench-search {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr auto;
}

.workbench-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.workbench-filter {
  align-items: center;
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 8px;
  color: var(--ink-1);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 650;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
}

.workbench-filter strong {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.workbench-filter.is-active {
  background: var(--info-bg);
  border-color: rgba(30, 64, 175, 0.22);
  color: var(--info);
}

.workbench-filter[href*="filter=at_portaria"] {
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow: inset 0 -2px 0 rgba(15, 118, 110, 0.18);
}

.workbench-actions {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.workbench-selected-count {
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 700;
}

.workbench-table {
  min-width: 62rem;
  table-layout: fixed;
}

.workbench-col-check { width: 3.75rem; }
.workbench-col-tracking { width: 9.5rem; }
.workbench-col-unit { width: 13rem; }
.workbench-col-location { width: 16rem; }
.workbench-col-received { width: 9rem; }
.workbench-col-age { width: 7rem; }
.workbench-col-actions { width: 13rem; }

.workbench-table th,
.workbench-table td {
  border-bottom: 0;
  vertical-align: middle;
}

.workbench-table tbody tr {
  box-shadow: inset 0 -1px 0 var(--border-0);
}

.workbench-table tbody tr:last-child {
  box-shadow: none;
}

.workbench-table tr.is-at-portaria {
  background: var(--info-bg);
}

.workbench-check {
  text-align: center;
  width: 2.75rem;
}

.workbench-tracking {
  color: var(--ink-0);
  font-weight: 750;
  text-decoration: none;
}

.workbench-mini-badge {
  background: var(--warning-bg);
  border-radius: 4px;
  color: var(--warning);
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  margin-top: 0.25rem;
  padding: 0.12rem 0.35rem;
  width: fit-content;
}

.location-badge {
  border-radius: 4px;
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
}

.location-badge--at_portaria { background: var(--info-bg); color: var(--info); }
.location-badge--in_internal_transport { background: var(--warning-bg); color: var(--warning); }
.location-badge--at_administration { background: var(--success-bg); color: var(--success); }
.location-badge--picked_up_at_portaria,
.location-badge--picked_up_at_administration { background: var(--surface-2); color: var(--ink-2); }

.workbench-table small,
.workbench-table td span:not(.location-badge):not(.workbench-mini-badge) {
  color: var(--ink-2);
  display: block;
  font-size: 0.78rem;
}

.workbench-row-actions {
  text-align: right;
}

.workbench-row-actions-inner {
  align-content: center;
  display: grid;
  gap: 0.45rem;
  justify-items: end;
  min-height: 4.75rem;
}

.btn-dispatch,
.btn-row-dispatch {
  background: var(--info);
  color: #fff;
}

.btn-portaria-pickup,
.btn-portaria-pickup-primary {
  background: var(--warning);
  color: #fff;
}

.workbench-empty {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 8px;
  color: var(--ink-2);
  display: grid;
  gap: 0.25rem;
  padding: 1.2rem;
}

.workbench-empty strong {
  color: var(--ink-0);
}

/* ------------------------------------------------------------------ */
/* Portaria Pickup Authorization (feature 009)                         */
/* ------------------------------------------------------------------ */

/* Inline tracking code in info table — bigger, monospace */
.scanner-info-code {
  font-size: 1rem;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.05em;
  color: var(--ink-0);
}

/* Inline state badge (e.g. "Pendente de vinculação") */
.scanner-state-inline {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.scanner-state-inline--warn {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
}

/* Confirmation form within the auth block */
.portaria-confirm-form {
  margin-top: 1rem;
}

/* Authorization block — container for step 1 or step 2 */
.portaria-auth-block {
  background: var(--surface-1);
  border: 1px solid var(--border-0);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.portaria-auth-block--active {
  border-color: var(--action);
}

.portaria-auth-block--idle {
  border-color: var(--border-1);
}

.portaria-auth-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.portaria-auth-status {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.portaria-auth-status--pendente {
  background: color-mix(in srgb, var(--action) 12%, transparent);
  color: var(--action);
}

.portaria-auth-status--utilizada {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.portaria-auth-status--expirada,
.portaria-auth-status--cancelada {
  background: color-mix(in srgb, var(--ink-3) 12%, transparent);
  color: var(--ink-2);
}

.portaria-auth-channel {
  font-size: 0.8rem;
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.portaria-auth-meta {
  font-size: 0.8rem;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.portaria-auth-hint {
  font-size: 0.9rem;
  color: var(--ink-1);
  margin-bottom: 1rem;
}

/* Code debug block — only shown in dev */
.portaria-auth-code-debug {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border: 1px dashed var(--warning);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.portaria-auth-code-label {
  font-size: 0.75rem;
  color: var(--ink-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.portaria-auth-code-value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--action);
  font-family: monospace;
}

/* Large code input — operator types 4 digits */
.scanner-input--code {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-align: center;
  max-width: 10rem;
  font-family: monospace;
}

/* Regen link (collapsed by default) */
.portaria-auth-regen {
  margin-bottom: 1.5rem;
}

.portaria-auth-regen-summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink-2);
  padding: 0.5rem 0;
  list-style: none;
  user-select: none;
}

.portaria-auth-regen-summary:hover {
  color: var(--ink-0);
}

.portaria-auth-regen-form {
  padding-top: 0.75rem;
}

.portaria-auth-regen-hint {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin-bottom: 0.75rem;
}

/* Detail page: authorization history list */
.portaria-auth-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.portaria-auth-detail-item {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}

.portaria-auth-detail-item--utilizada {
  border-left: 3px solid var(--success);
}

.portaria-auth-detail-item--expirada,
.portaria-auth-detail-item--cancelada {
  border-left: 3px solid var(--border-1);
  opacity: 0.7;
}

.portaria-auth-detail-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.portaria-auth-detail-channel {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.03em;
}

.portaria-auth-detail-meta {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-left: auto;
}

.portaria-auth-detail-validity {
  font-size: 0.78rem;
  color: var(--ink-2);
  margin-bottom: 0.25rem;
}

.portaria-auth-detail-confirmed {
  font-size: 0.82rem;
  color: var(--success);
  font-weight: 600;
}

/* History table on portaria-pickup screen */
.scanner-info-table--history {
  font-size: 0.82rem;
}

.portaria-auth-history-row--utilizada .portaria-auth-status--utilizada {
  color: var(--success);
}

.portaria-auth-history-row--expirada,
.portaria-auth-history-row--cancelada {
  opacity: 0.65;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */

@media (max-width: 44rem) {
  .unit-search { grid-template-columns: 1fr; }
  .pickup-unit-row { grid-template-columns: 1fr; }
  .scanner-form--search { flex-direction: column; }
  .scanner-form--search button { width: 100%; }
  .field-row { grid-template-columns: 1fr; }
  .workbench-header,
  .workbench-search {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }
  .workbench-row-actions {
    text-align: left;
  }
  .workbench-row-actions-inner {
    justify-items: start;
  }
  .state-cards { gap: 0.5rem; }
  .notif-history-meta { margin-left: 0; width: 100%; }
  .info-row { grid-template-columns: 7rem 1fr; }

  /* On small screens: collapse header to brand + user; station label below */
  .shell-header {
    grid-template-columns: 1fr auto;
    height: auto;
    padding: 0.5rem clamp(0.75rem, 3vw, 1.5rem);
    row-gap: 0.25rem;
  }
  .shell-station {
    grid-column: 1 / -1;
    align-items: flex-start;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.2rem 0;
  }
  .shell-user-name { display: none; }  /* hide username on mobile, keep Sair */
}

/* ── Grouped pickup session UX hardening (feature 011) ──────────────── */
.pickup-primary-help {
  margin: 0.35rem 0 0.9rem;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Canonical code scale (016): the unit pickup code is the handover datum, so it    */
/* reads at cupom scale here too — consistent with .banner-code-value /             */
/* .receipt-success-code (scale + tabular + weight). Colour stays teal as the       */
/* grouped-result accent (high contrast on white).                                  */
.session-summary .session-code {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--action);
}

.session-status-badge {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}
.session-status-badge--ativa {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--border-0);
}
.session-status-badge--concluida {
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--border-0);
}

.session-instruction {
  margin: 0.4rem 0 0.8rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface-2);
  border-left: 3px solid var(--action);
  border-radius: 4px;
  font-weight: 600;
  color: var(--ink);
}

.grouped-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.6rem;
}
.session-selected-counter {
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.item-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.item-status--pendente { background: var(--warning-bg); color: var(--warning); }
.item-status--retirado { background: var(--success-bg); color: var(--success); }
.item-status--removido { background: var(--surface-2); color: var(--ink-2); }

.session-partial-warning {
  margin: 0.5rem 0 0.9rem;
  padding: 0.55rem 0.75rem;
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--border-0);
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: 600;
}

button[type="submit"][data-confirm-pickup]:disabled {
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: not-allowed;
}

/* ── Retirada counter UX (feature 036) ─────────────────────────────────── */
/* Counter-bench presentation for the grouped pickup session: the recipient is */
/* the dominant anchor ("who am I delivering to"); pending items are compact,   */
/* selectable cards in a responsive multi-column grid (no long scroll with many */
/* packages); the action button echoes the delivery. Borders-only + focus ring; */
/* reuses existing tokens, status pills and .item-status styles.                */

.pickup-counter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: 8px;
}
.pickup-counter-recipient {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.pickup-counter-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pickup-counter-name {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink-0);
}
.pickup-counter-name--unit { font-size: 1.4rem; }
.pickup-counter-unit {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-1);
}
/* Multi-resident unit: the single name would mislead, so warn and push the */
/* operator to the per-card recipient. Warning semantic tone, not an error.  */
.pickup-counter-warning {
  margin-top: 0.15rem;
  padding: 0.3rem 0.6rem;
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--border-0);
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
}

.pickup-counter-meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.4rem 1.25rem;
  margin: 0;
}
.pickup-counter-meta > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.pickup-counter-meta dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pickup-counter-meta dd { margin: 0; }
/* Code stays legible (handover datum) but visually subordinate to the name. */
.pickup-counter .session-code {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--action);
}
.pickup-counter-count {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink-0);
  font-variant-numeric: tabular-nums;
}

/* Bench of pending cards — compact, responsive multi-column to limit scroll. */
.pickup-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.6rem;
  margin: 0.6rem 0 0.9rem;
}
.pickup-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.pickup-card:hover { border-color: var(--border-2); }
.pickup-card:focus-within {
  border-color: var(--action);
  box-shadow: 0 0 0 2px var(--action);
}
.pickup-card.is-selected,
.pickup-card:has(.pickup-card-check:checked) {
  border-color: var(--action);
  background: var(--success-bg);
}
.pickup-card-check {
  margin-top: 0.2rem;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  accent-color: var(--action);
}
.pickup-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.pickup-card-tracking {
  font-weight: 700;
  color: var(--ink-0);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.pickup-card-resident {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-0);
}
.pickup-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.pickup-card-field {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}
.pickup-card-field-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* History stays a discreet record, visually distinct from the action bench. */
.pickup-history { margin-top: 1.6rem; }
.pickup-history .muted { color: var(--ink-2); }

/* ── Pessoa que retirou (feature 039) ──────────────────────────────────── */
/* Optional collector capture: native radio-group (keyboard-native, no JS, no  */
/* pre-selection). A uniform grid of rectangular options that rhymes with the   */
/* card bench (same radius + selected state). Compact, borders-only.            */
.pickup-recipient {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-0);
  border-radius: 8px;
  background: var(--surface-0);
}
.pickup-recipient-title {
  padding: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pickup-recipient-help {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-1);
}
.pickup-recipient-note {
  margin: 0.1rem 0 0.6rem;
  font-size: 0.78rem;
  color: var(--ink-3);
}
/* Uniform columns so long names never balloon a single chip; equal heights via */
/* the grid + a steady min-height. Left-aligned, one radio + label per row.      */
.pickup-recipient-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.4rem;
}
.pickup-recipient-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.7rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border-1);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--ink-0);
  text-align: left;
}
.pickup-recipient-option:hover { border-color: var(--border-2); }
/* Selected state mirrors the pickup-card: teal border + success tint, no shadow. */
.pickup-recipient-option:has(input:checked) {
  border-color: var(--action);
  background: var(--success-bg);
}
.pickup-recipient-option:focus-within {
  border-color: var(--action);
  box-shadow: 0 0 0 2px var(--action);
}
.pickup-recipient-option input {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  accent-color: var(--action);
}
/* O foco/seleção já é indicado pelo anel do card (:focus-within + borda teal);
   o outline retangular nativo do radio fica redundante e "estranho" ao lado da
   bolinha — removido (a11y preservada pelo anel do card). */
.pickup-recipient-option input:focus { outline: none; }
.pickup-recipient-other {
  margin-top: 0.55rem;
  max-width: 28rem;
}
/* The free-text field is revealed only for "Outro". The [hidden] attribute must */
/* win over .scanner-input's display, so make the override explicit.             */
.pickup-recipient-other[hidden] { display: none; }

/* Package detail — grouped session context differentiation */
.session-item-detail--pending { border-left: 3px solid var(--warning); }
.session-item-detail--retired { border-left: 3px solid var(--success); }
.session-item-detail--concluded { border-left: 3px solid var(--ink-2); }

/* ------------------------------------------------------------------ */
/* Feature 013 — admin no-code lookup (P0 craft pass)                   */
/* ------------------------------------------------------------------ */

/* "Morador sem código?" — a first-class path out of the code flow,    */
/* not a bare browser link. Left teal rule signals it's actionable.    */
.pickup-locate-callout {
  margin-top: 1.25rem;
}

.pickup-locate-link {
  align-items: center;
  background: var(--surface-0);
  border: 1.5px solid var(--border-1);
  border-left: 3px solid var(--action);
  border-radius: 10px;
  color: var(--ink-0);
  display: flex;
  font-size: 0.95rem;
  font-weight: 600;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.pickup-locate-link::after {
  color: var(--action);
  content: "\2192";  /* → */
  font-weight: 700;
  margin-left: auto;
}

.pickup-locate-link:hover {
  background: var(--surface-1);
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
}

.pickup-back-link {
  margin-top: 1rem;
}

/* Canonical "código que destrava a entrega" — cupom scale, tabular.   */
/* Mirrors .receipt-success-code so the unit pickup code reads the same */
/* wherever it appears (banner, sessão, retirada).                      */
.banner-detail--code {
  align-items: center;
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 10px;
  display: flex;
  flex: 1 0 100%;
  gap: 0.75rem;
  padding: 0.6rem 0.95rem;
}

.banner-code-label {
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.banner-code-value {
  color: var(--ink-0);
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-left: auto;
}

/* Locate results — readable at counter distance (60–90cm).            */
/* Replaces the inline styles that previously broke the design system. */
.locate-results td {
  font-size: 0.95rem;
  padding-bottom: 0.7rem;
  padding-top: 0.7rem;
}

.locate-track {
  color: var(--ink-0);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.locate-unit {
  color: var(--ink-0);
  display: block;
  font-weight: 600;
}

.locate-resident { color: var(--ink-2); font-size: 0.85rem; }
.locate-pending  { color: var(--warning); font-weight: 600; }
.locate-status   { color: var(--ink-2); }
.locate-guidance { color: var(--ink-1); }

.locate-meta {
  color: var(--ink-2);
  display: block;
  font-size: 0.78rem;
  margin-top: 0.2rem;
}

.locate-action { white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* Feature 020 — pickup-code resend (safe, code-hidden)                */
/* ------------------------------------------------------------------ */

/* Secondary action sitting beside "Ir para retirada" in locate rows */
.command--ghost {
  background: var(--surface-0);
  border-color: var(--border-1);
  color: var(--ink-1);
  margin-top: 0.35rem;
}

.command--ghost:hover {
  background: var(--surface-1);
  border-color: var(--action);
  color: var(--action);
}

.resend-form { gap: 1rem; }

.resend-options {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.resend-option {
  align-items: center;
  display: flex;
  font-size: 0.95rem;
  gap: 0.55rem;
}

.resend-option input { margin: 0; min-height: auto; width: auto; }

.resend-pending-item { font-variant-numeric: tabular-nums; font-weight: 600; }

.resend-feedback-detail {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  margin-top: 0.35rem;
}

/* ------------------------------------------------------------------ */
/* Feature 021 — Indicadores (management report: analytical + ROI)     */
/* Persona shift: gestor/síndico sentado, avaliando e justificando.    */
/* Hierarchy over uniform metric-boxes. Borders-only + focus ring.     */
/* ------------------------------------------------------------------ */

.reports-screen { max-width: 76rem; }

.reports-screen > h1 { margin-bottom: 0.25rem; }

/* Section headings carry a scope chip ("no período" vs "situação atual") */
.report-section-head {
  align-items: baseline;
  border-bottom: 1px solid var(--border-0);
  display: flex;
  gap: 0.6rem;
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
}

.report-section-head h2 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.scope-chip {
  background: var(--surface-2);
  border-radius: 100px;
  color: var(--ink-2);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.12rem 0.55rem;
  text-transform: uppercase;
}

/* ── Period filter ─────────────────────────────────────────────────── */
.reports-filter { margin-bottom: 0.5rem; }

.reports-period-label {
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0.5rem 0 0;
}

.reports-custom { margin-top: 0.5rem; }

.reports-custom summary {
  color: var(--ink-2);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}

.reports-custom-row {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.6rem;
}

/* ── Hero KPI band — the system's primary promise, stated big ──────── */
.report-hero {
  align-items: stretch;
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-left: 3px solid var(--action);
  border-radius: 12px;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(14rem, 1.4fr) 1fr;
  margin-bottom: 0.5rem;
  padding: 1.4rem 1.6rem;
}

.report-hero-label {
  color: var(--ink-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.report-hero-value {
  color: var(--ink-0);
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-top: 0.2rem;
}

.report-hero-sub {
  color: var(--ink-2);
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

.report-hero-secondary {
  border-left: 1px solid var(--border-0);
  display: grid;
  gap: 0.85rem;
  padding-left: 1.5rem;
}

.report-hero-stat {
  align-items: baseline;
  display: flex;
  gap: 0.6rem 1rem;
  justify-content: space-between;
}

.report-hero-stat-label { color: var(--ink-1); font-size: 0.85rem; }

.report-hero-stat-value {
  color: var(--ink-0);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Feature 022 — Moradores (resident management roster)                */
/* Administrative/dense; reuses table/field/pill/button system.        */
/* ------------------------------------------------------------------ */

.residents-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: space-between;
}

.residents-actions { display: flex; gap: 0.6rem; }

.residents-filter {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 1.25rem;
}

.residents-filter .scanner-input { width: auto; flex: 1; min-width: 9rem; }
.residents-filter input[name="tower"],
.residents-filter input[name="apartment"] { flex: 0 0 6rem; min-width: 5rem; }

.residents-status-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: auto;
}

.resident-form-screen .field { margin-bottom: 0; }

.resident-form-actions {
  display: grid;
  gap: 0.65rem;
}

.resident-form-actions .btn-secondary {
  width: 100%;
}

.resident-related-actions,
.resident-status-panel {
  align-items: center;
  border-top: 1px solid var(--border-0);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}

.resident-related-actions h2,
.resident-status-panel h2 {
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.resident-status-panel p {
  color: var(--ink-1);
  font-size: 0.88rem;
  margin: 0;
}

.resident-toggle-form { margin: 0; }

.btn-attention,
button.btn-attention[type="submit"] {
  background: var(--warning-bg);
  border: 1.5px solid rgba(146, 64, 14, 0.28);
  color: var(--warning);
}

.btn-attention:hover,
button.btn-attention[type="submit"]:hover {
  background: color-mix(in srgb, var(--warning) 14%, var(--warning-bg));
}

.report-hero-stat-n { color: var(--ink-3); font-size: 0.72rem; margin-left: 0.35rem; }

/* ── Metric strip with hierarchy (primary row vs muted secondary) ──── */
.metric-strip {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin-bottom: 0.6rem;
}

.metric-card {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}

.metric-card-value {
  color: var(--ink-0);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.metric-card-label {
  color: var(--ink-2);
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
  text-transform: uppercase;
}

.metric-strip--secondary .metric-card { background: var(--surface-1); }
.metric-strip--secondary .metric-card-value { color: var(--ink-1); font-size: 1.25rem; font-weight: 700; }

/* ── Actionable alerts — severity left rule, count forward ─────────── */
.alert-stack { display: grid; gap: 0.5rem; margin-bottom: 0.5rem; }

.alert-row {
  align-items: center;
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-left: 3px solid var(--ink-3);
  border-radius: 8px;
  display: flex;
  gap: 0.9rem;
  padding: 0.7rem 1rem;
}

.alert-row--error { border-left-color: var(--error); }
.alert-row--warning { border-left-color: var(--warning); }

.alert-row-count {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  min-width: 2.5rem;
  text-align: right;
}

.alert-row--error .alert-row-count { color: var(--error); }
.alert-row--warning .alert-row-count { color: var(--warning); }

.alert-row-label { color: var(--ink-1); font-size: 0.9rem; font-weight: 600; }

.alert-empty {
  align-items: center;
  background: var(--success-bg);
  border: 1px solid rgba(22, 101, 52, 0.2);
  border-radius: 8px;
  color: var(--success);
  display: flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
}

/* ── ROI seal — signature: custody/value framed like a stamp ───────── */
.roi-seal {
  background: var(--surface-1);
  border: 1px solid var(--border-0);
  border-left: 3px solid var(--action);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.roi-seal-head {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.roi-seal-mark {
  color: var(--action);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.roi-grid {
  display: grid;
  gap: 1.1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.roi-item { display: grid; gap: 0.15rem; }

.roi-item-value {
  color: var(--ink-0);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.roi-item-value strong { color: var(--action); font-weight: 800; }

.roi-item-label { color: var(--ink-2); font-size: 0.82rem; line-height: 1.35; }

/* ── Two-column dense tables ───────────────────────────────────────── */
.reports-two-col {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1rem;
}

/* Inline bar in distribution tables — proportion at a glance */
.dist-bar {
  background: var(--surface-2);
  border-radius: 3px;
  display: block;
  height: 6px;
  margin-top: 0.3rem;
  overflow: hidden;
}

.dist-bar > span {
  background: var(--action);
  border-radius: 3px;
  display: block;
  height: 100%;
  opacity: 0.55;
}

@media (max-width: 48rem) {
  .report-hero { grid-template-columns: 1fr; }
  .report-hero-secondary { border-left: 0; border-top: 1px solid var(--border-0); padding-left: 0; padding-top: 1rem; }
  .reports-two-col { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Feature 016 — generic table-cell / detail utilities                 */
/* Replace inline styles across operational templates. Named by role   */
/* so call sites read intent, not appearance.                          */
/* ------------------------------------------------------------------ */

.cell-track {
  color: var(--ink-0);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.cell-meta {
  color: var(--ink-2);
  display: block;
  font-size: 0.82rem;
}
/* cell-meta é usado em <span>/<small> dentro da célula (display:block força nova
   linha). Quando aplicado direto num <td>, o display:block tira a célula do layout
   de tabela (não estica até a altura da linha, divisória desalinhada). Restaura a
   semântica de célula mantendo cor/fonte. */
td.cell-meta { display: table-cell; }

.cell-muted   { color: var(--ink-2); }
.cell-pending { color: var(--warning); font-weight: 600; }
.cell-ok      { color: var(--success); font-weight: 600; }
.cell-warn    { color: var(--warning); font-weight: 600; }

.cell-age {
  color: var(--ink-1);
  font-size: 0.85rem;
  white-space: nowrap;
}

.cell-nowrap { white-space: nowrap; }

.detail-meta {
  color: var(--ink-2);
  margin-top: 0.25rem;
}

.section-spacer { margin-top: 0.75rem; }

/* ------------------------------------------------------------------ */
/* Feature 025 — list pagination (analytical, dense; not PDV)          */
/* ------------------------------------------------------------------ */

.pagination {
  align-items: center;
  border-top: 1px solid var(--border-0);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.85rem;
}

.pagination-counter {
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
}

.pagination-controls {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.pagination-current {
  color: var(--ink-2);
  font-size: 0.8rem;
}

.pagination-link {
  border: 1.5px solid var(--border-1);
  border-radius: 6px;
  color: var(--ink-1);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.pagination-link:hover { border-color: var(--action); color: var(--action); }

.pagination-link.is-disabled {
  border-color: var(--border-0);
  color: var(--ink-3);
  cursor: default;
}

/* ===========================================================================
   Feature 035 — Administração SaaS: "Prontidão de operação"
   God-view interno cross-condomínio. Estende o sistema (tokens --ink/--surface/
   --border/--action + semânticos). Borders-only + focus ring. Sem paleta nova.
   =========================================================================== */

/* Estação SaaS — tom neutro "acima dos condomínios" (legível no shell escuro),
   distinto das estações operacionais (portaria/azul, admin/teal, gestão/roxo). */
.shell-station-name--saas { color: #cbd5e1; }

/* Faixa de contexto: reforça "você está na visão interna, não dentro de um condomínio". */
.saas-context-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-2);
  border-left: 3px solid var(--action);
  background: var(--surface-0);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}
.saas-context-strip::before { content: "◇"; color: var(--action); }

/* Barras de ferramentas / ações (substituem estilos inline) */
.saas-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.saas-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.saas-actions--end { justify-content: flex-end; }
.saas-form-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.saas-search { display: flex; gap: 0.75rem; align-items: end; margin: 0 0 1.25rem; }
.saas-search label { flex: 1; }
.saas-section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin: 2.5rem 0 0.75rem;
}
.saas-section-head h2 { margin: 0; }

/* --- Portões de prontidão ------------------------------------------------- */
.saas-gates { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.saas-gate {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-0);
  background: var(--surface-0);
  color: var(--ink-1);
}
.saas-gate::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--ink-3);
}
.saas-gate--ok { color: var(--success); border-color: rgba(22, 101, 52, 0.25); }
.saas-gate--ok::before { content: "✓"; background: none; color: var(--success); font-size: 0.7rem; line-height: 1; }
.saas-gate--pending { color: var(--warning); border-color: rgba(146, 64, 14, 0.25); }
.saas-gate--pending::before { background: var(--warning); }
.saas-gate--missing { color: var(--error); border-color: rgba(159, 18, 57, 0.25); }
.saas-gate--missing::before { background: var(--error); }
.saas-gates--compact .saas-gate { font-size: 0.72rem; padding: 0.12rem 0.5rem; }

/* Veredito de prontidão (régua à esquerda por estado) */
.saas-verdict {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.15rem 0 0.15rem 0.6rem;
  border-left: 3px solid var(--ink-3);
  color: var(--ink-1);
}
.saas-verdict--ready { border-left-color: var(--success); color: var(--success); }
.saas-verdict--incomplete { border-left-color: var(--warning); color: var(--warning); }
.saas-verdict--attention { border-left-color: var(--error); color: var(--error); }

/* --- Listagem de condomínios (cards de prontidão) ------------------------- */
.saas-card-grid { display: grid; gap: 0.85rem; }
.saas-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.saas-card:hover {
  border-color: var(--border-1);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
}
.saas-card-main { display: flex; flex-direction: column; gap: 0.45rem; min-width: 16rem; }
.saas-card-title { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.saas-card-name { font-size: 1.05rem; font-weight: 700; color: var(--ink-0); }
.saas-card-slug { font-size: 0.8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.saas-card-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }

/* --- Painel de prontidão (detalhe) ---------------------------------------- */
.saas-panel {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  margin: 0 0 1.5rem;
}
.saas-panel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.saas-panel-head h2 { margin: 0; }
.saas-panel-gates { margin-bottom: 1rem; }

/* Próximos passos (derivados dos portões não cumpridos) */
.saas-next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.saas-next-steps li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-0);
  border-left: 3px solid var(--action);
  border-radius: 8px;
  background: var(--surface-1);
  font-size: 0.9rem;
  color: var(--ink-0);
}
.saas-next-steps li::before {
  content: counter(saas-step);
  counter-increment: saas-step;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--action);
}
.saas-next-steps { counter-reset: saas-step; }
.saas-ready-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--success);
}
.saas-ready-note::before { content: "✓"; }

/* Nota informativa neutra — "não afeta operação", "registro interno" etc. */
.saas-info {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--action);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--ink-1);
  font-size: 0.88rem;
  margin: 0.85rem 0 0;
}
.saas-info::before { content: "ℹ"; line-height: 1.3; color: var(--action); }

/* Alerta de último administrador (semântica warning; borders-only) */
.saas-alert {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(146, 64, 14, 0.3);
  border-left: 3px solid var(--warning);
  border-radius: 8px;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 0.88rem;
  margin: 0.85rem 0 0;
}
.saas-alert::before { content: "▲"; line-height: 1.3; }

/* --- Badges de papel / vínculo / usuário ---------------------------------- */
.saas-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-1);
  color: var(--ink-1);
  background: var(--surface-0);
  white-space: nowrap;
}
.saas-badge--admin { color: var(--action); border-color: rgba(15, 118, 110, 0.35); }
.saas-badge--link-active { color: var(--success); border-color: rgba(22, 101, 52, 0.3); }
.saas-badge--link-inactive { color: var(--ink-2); border-color: var(--border-1); }
.saas-badge--user-inactive { color: var(--error); border-color: rgba(159, 18, 57, 0.3); }
.saas-rowlabel { font-size: 0.72rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }

/* Linha de membership: administradores em destaque */
.saas-row--admin td:first-child { box-shadow: inset 3px 0 0 var(--action); }

/* Estados vazios orientados à ação */
.saas-empty {
  text-align: center;
  color: var(--ink-2);
  border: 1px dashed var(--border-1);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  background: var(--surface-1);
}
.saas-empty strong { display: block; color: var(--ink-1); margin-bottom: 0.25rem; }

/* Microcopy de consequência (ajuda curta sob ações sensíveis) */
.saas-consequence { font-size: 0.75rem; color: var(--ink-2); margin-top: 0.2rem; }
.saas-field-help { font-size: 0.78rem; color: var(--ink-2); margin-top: 0.2rem; }

/* ===========================================================================
   Configurações de e-mail — formulário de configuração agrupado (settings)
   Registro de gestão (não PDV). Hierarquia por seções; borders-only; tokens.
   =========================================================================== */
.settings-page { max-width: 50rem; margin-inline: auto; }
.saas-detail-page { max-width: 58rem; margin-inline: auto; }

/* Cartão de status (resumo no topo) */
.settings-status-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  margin: 0 0 1.5rem;
}
.settings-status-card .status-label { font-size: 0.78rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.5rem; }
.settings-status-hint { margin: 0; font-size: 0.82rem; color: var(--ink-2); flex-basis: 100%; }

/* Interruptor mestre — "Habilitar envio" em destaque */
.settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-left: 3px solid var(--action);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin: 0 0 1.5rem;
}
.settings-toggle input[type="checkbox"] { margin-top: 0.15rem; width: 1.15rem; height: 1.15rem; }
.settings-toggle label { font-weight: 700; color: var(--ink-0); display: block; }

/* Seções do formulário (fieldset + legend como cabeçalho de seção) */
.settings-section { border: none; border-top: 1px solid var(--border-0); padding: 1.25rem 0 0; margin: 0 0 1.25rem; }
.settings-section:first-of-type { border-top: none; padding-top: 0.25rem; }
.settings-check-row { margin-top: 0.85rem; }
.settings-section > legend {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  padding: 0 0 0.25rem;
}

/* Grade de campos relacionados (curtos lado a lado; longos ocupam a linha) */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1rem; }
.settings-grid .form-row { margin: 0; }
.settings-grid .form-row--full { grid-column: 1 / -1; }
.settings-form .form-row > label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-1); margin-bottom: 0.3rem; }
.settings-form .field-help { display: block; font-size: 0.78rem; color: var(--ink-2); margin-top: 0.25rem; }

/* Linha de opções compactas (TLS / SSL / timeout) */
.settings-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.settings-check { display: inline-flex; align-items: center; gap: 0.4rem; }
.settings-check input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }
.settings-check label { margin: 0; font-weight: 600; color: var(--ink-1); }
.settings-timeout { display: flex; flex-direction: column; gap: 0.25rem; min-width: 7rem; }
.settings-timeout label { font-size: 0.85rem; font-weight: 600; color: var(--ink-1); }

.settings-actions { margin-top: 1.5rem; }

/* Cartão "enviar e-mail de teste" — ação secundária separada */
.settings-test-card {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  margin-top: 2rem;
}
.settings-test-card h2 { margin-top: 0; }
.settings-test-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
.settings-test-row .form-row { margin: 0; flex: 1; min-width: 16rem; }

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

/* Variantes de status do e-mail (semântica honesta; antes sem cor) */
.status-pill--ok    { background: var(--success-bg); color: var(--success); }
.status-pill--warn  { background: var(--warning-bg); color: var(--warning); }
.status-pill--muted { background: var(--surface-2);  color: var(--ink-2);   }
.status-pill--none  { background: var(--surface-2);  color: var(--ink-2);   }

/* ===========================================================================
   Livro Digital de Encomendas — registro administrativo imprimível
   =========================================================================== */
.ledger-screen { max-width: 78rem; }
.ledger-document-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ledger-eyebrow, .ledger-summary-label { color: var(--ink-2); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.ledger-document-meta { display: grid; gap: 0.15rem; text-align: right; color: var(--ink-1); font-size: 0.82rem; }
.ledger-filter { background: var(--surface-0); border: 1px solid var(--border-0); border-radius: 10px; padding: 0.85rem; margin-bottom: 1rem; }
.ledger-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
.ledger-filter-grid label { color: var(--ink-1); font-size: 0.78rem; font-weight: 700; }
.ledger-filter-grid input, .ledger-filter-grid select { display: block; margin-top: 0.2rem; width: 100%; }
.ledger-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.ledger-error { background: var(--error-bg); border: 1px solid rgba(159, 18, 57, 0.3); border-left: 3px solid var(--error); color: var(--error); padding: 0.65rem 0.8rem; margin: 0.75rem 0; }
.ledger-summary { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 0.6rem; margin-bottom: 0.45rem; }
.ledger-summary > div { background: var(--surface-0); border: 1px solid var(--border-0); border-radius: 8px; display: grid; padding: 0.55rem 0.7rem; }
.ledger-filter-summary { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0 0 0.75rem; padding: 0; }
.ledger-filter-summary li { background: var(--surface-2); border-radius: 999px; color: var(--ink-1); font-size: 0.75rem; padding: 0.12rem 0.5rem; }
.ledger-records { display: grid; gap: 0.6rem; }
.ledger-record { background: var(--surface-0); border: 1px solid var(--border-0); border-radius: 8px; padding: 0.65rem 0.75rem; }
.ledger-record-head { align-items: center; display: flex; justify-content: space-between; gap: 0.75rem; }
.ledger-track { font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ledger-unit { color: var(--ink-2); font-size: 0.8rem; margin-left: 0.55rem; }
/* Morador na linha do cabeçalho (junto de rastreio/unidade) — libera a grade,
   que passa a ter 4 itens (datas + foto) sem quebrar linha na impressão. */
.ledger-recipient { color: var(--ink-1); font-size: 0.8rem; font-weight: 600; margin-left: 0.55rem; }
.ledger-recipient::before { color: var(--ink-3); content: "·"; margin-right: 0.55rem; }
.ledger-record-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.55rem; }
.ledger-record-grid div { min-width: 0; }
.ledger-record-grid span, .ledger-record-grid small { color: var(--ink-2); display: block; font-size: 0.72rem; }
.ledger-record-grid strong { display: block; font-size: 0.82rem; overflow-wrap: anywhere; }
.ledger-trail-details { border-top: 1px solid var(--border-0); margin-top: 0.55rem; padding-top: 0.35rem; }
.ledger-trail-details summary { color: var(--action); cursor: pointer; font-size: 0.78rem; font-weight: 700; }
.ledger-trail { display: grid; gap: 0.2rem; margin: 0.4rem 0 0; padding-left: 1.25rem; }
.ledger-trail li { color: var(--ink-1); font-size: 0.76rem; }
.ledger-trail span, .ledger-trail small { color: var(--ink-2); display: block; }
.ledger-empty { border: 1px dashed var(--border-1); color: var(--ink-2); padding: 1rem; text-align: center; }

@media (max-width: 900px) {
  .ledger-filter-grid, .ledger-record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Correção de destinatário (conferência) — unidade lado a lado + botão. */
.correction-unit { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.correction-unit .scanner-input { flex: 1 1 7rem; min-width: 0; width: auto; }
.correction-unit .btn-secondary { flex: 0 0 auto; }
.correction-options { display: flex; flex-direction: column; gap: 0.35rem; }
.correction-option { align-items: center; border: 1px solid var(--border-1); border-radius: 6px; cursor: pointer; display: flex; gap: 0.6rem; padding: 0.5rem 0.7rem; }
/* radio com tamanho fixo (não herda largura de regras globais de input) + nome à esquerda */
.correction-option input[type="radio"] { flex: none; height: 1rem; margin: 0; width: 1rem; }
.correction-option-name { flex: 1; text-align: left; }

/* Livro Digital — moldura de impressão. Na TELA é apenas blocos aninhados
   (neutralizamos a semântica de tabela) e o cabeçalho/rodapé repetidos ficam
   ocultos. Em IMPRESSÃO (abaixo) vira tabela cujo thead/tfoot repetem por página. */
.ledger-print-frame,
.ledger-print-frame > thead,
.ledger-print-frame > tbody,
.ledger-print-frame > tfoot,
.ledger-print-frame tr,
.ledger-print-frame td { display: block; }
.ledger-print-running { display: none; }

@media print {
  /* Dense administrative ledger: many packages per A4 sheet, full custody trail
     kept for auditability. Backgrounds are NOT printed by default, so anything
     that relied on a fill (status pills, chips) gets a border + ink instead. */
  /* margin:0 na página → o navegador não imprime o cabeçalho/rodapé padrão
     (URL, título, data). A margem por página vem do thead/tfoot que se repetem
     (ledger-print-running*), dando topo/rodapé uniformes em TODAS as páginas. */
  @page { size: A4; margin: 0; }
  body { background: #fff; font-size: 8.5pt; color: var(--ink-0); }
  .shell-header, .shell-subnav, .message-stack, .ledger-interactive { display: none !important; }
  .shell { margin: 0; max-width: none; padding: 0 9mm; }
  .ledger-screen { max-width: none; }
  /* O cabeçalho do documento (tela) é substituído pelo cabeçalho repetido (thead). */
  .ledger-document-head { display: none !important; }

  /* Moldura repetida: thead/tfoot reaparecem no topo/rodapé de cada página. */
  .ledger-print-frame { display: table; width: 100%; }
  .ledger-print-frame > thead { display: table-header-group; }
  .ledger-print-frame > tbody { display: table-row-group; }
  .ledger-print-frame > tfoot { display: table-footer-group; }
  .ledger-print-frame tr { display: table-row; }
  .ledger-print-frame td { display: table-cell; }
  .ledger-print-running-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 6mm;
    padding: 9mm 0 2.5mm; margin-bottom: 3mm; border-bottom: 1px solid var(--border-1);
  }
  .ledger-print-running-title { font-size: 11pt; font-weight: 700; color: var(--ink-0); }
  .ledger-print-running-meta { font-size: 8pt; color: var(--ink-2); text-align: right; }
  .ledger-print-running-foot {
    padding: 2.5mm 0 9mm; margin-top: 3mm; border-top: 1px solid var(--border-1);
    font-size: 7.5pt; color: var(--ink-2); text-align: right;
  }

  /* Document head — compact */
  .ledger-document-head { margin-bottom: 3mm; }
  .ledger-document-head .page-title { font-size: 14pt; margin: 0; }
  .ledger-document-head .page-subtitle { font-size: 8pt; margin: 0.5mm 0 0; }
  .ledger-eyebrow { font-size: 7pt; }
  .ledger-document-meta { font-size: 8pt; }

  /* Summary → one quiet line, no boxes (fills don't print) */
  .ledger-summary { display: flex; grid-template-columns: none; gap: 8mm; margin-bottom: 2mm; }
  .ledger-summary > div { background: none; border: 0; border-radius: 0; padding: 0; }
  .ledger-filter-summary { gap: 2mm; margin-bottom: 3mm; }
  .ledger-filter-summary li { background: none; border: 1px solid var(--border-1); border-radius: 0; padding: 0 1mm; font-size: 7.5pt; }

  /* Records — dense rows, kept intact across page breaks */
  .ledger-records { display: block; gap: 0; }
  .ledger-record { background: none; break-inside: avoid; border: 1px solid var(--border-1); border-radius: 0; padding: 1.6mm 2.5mm; margin-bottom: 1.5mm; }
  .ledger-record-head { margin-bottom: 0.8mm; }
  .ledger-track { font-size: 10pt; }
  .ledger-unit { font-size: 8pt; }
  .ledger-recipient { font-size: 8.5pt; font-weight: 700; color: var(--ink-0); }
  .ledger-record-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8mm 4mm; margin-top: 1.2mm; }
  .ledger-record-grid span, .ledger-record-grid small { font-size: 7pt; }
  .ledger-record-grid strong { font-size: 8pt; }

  /* Status tag — fill is dropped in print, so read it as a bordered label */
  .status-pill { background: none !important; color: var(--ink-0) !important; border: 1px solid var(--border-2); border-radius: 0; padding: 0 1mm; font-size: 7.5pt; }

  /* Custody trail — kept (auditability), tight */
  .ledger-trail-details { margin-top: 1.5mm; padding-top: 1.5mm; }
  .ledger-trail-details summary { display: none; }
  .ledger-trail-details .ledger-trail { display: grid !important; gap: 0.4mm; margin: 0; padding-left: 4mm; }
  .ledger-trail li { font-size: 7.5pt; }
  .ledger-trail span, .ledger-trail small { font-size: 7pt; }
}

/* ===========================================================================
   Relatório Mensal de Encomendas — peça mensal imprimível
   =========================================================================== */
.value-report-screen { max-width: 74rem; }
.value-report-document-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.value-report-eyebrow { color: var(--ink-2); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.value-report-document-meta { display: grid; gap: 0.15rem; text-align: right; color: var(--ink-1); font-size: 0.82rem; }
.value-report-filter { align-items: end; background: var(--surface-0); border: 1px solid var(--border-0); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; padding: 0.85rem; }
.value-report-filter label { color: var(--ink-1); font-size: 0.78rem; font-weight: 700; }
.value-report-filter input { display: block; margin-top: 0.2rem; min-width: 12rem; }
.value-report-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.value-report-print-frame,
.value-report-print-frame > thead,
.value-report-print-frame > tbody,
.value-report-print-frame > tfoot,
.value-report-print-frame tr,
.value-report-print-frame td { display: block; }
.value-report-print-running { display: none; }
.value-report-document { background: var(--surface-0); border: 1px solid var(--border-0); border-radius: 8px; padding: 1rem; }
.value-report-hero { border-bottom: 1px solid var(--border-0); padding-bottom: 0.9rem; }
.value-report-hero h2 { font-size: 2rem; line-height: 1.08; margin: 0.2rem 0 0.6rem; max-width: 46rem; }
.value-report-hero p { color: var(--ink-1); font-size: 0.95rem; max-width: 52rem; }
.value-report-empty { border: 1px dashed var(--border-1); color: var(--ink-2); margin-top: 0.75rem; padding: 0.8rem; }
.value-report-metric-section { margin-top: 1rem; }
.value-report-metric-section h3 { font-size: 1rem; margin: 0 0 0.45rem; }
.value-report-metrics { display: grid; gap: 0.65rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.value-report-metrics--closing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.value-report-metric { border: 1px solid var(--border-0); border-radius: 8px; display: grid; gap: 0.35rem; min-height: 10rem; padding: 0.75rem; }
.value-report-metric--emphasis { border-color: var(--border-2); }
.value-report-metric span { color: var(--ink-2); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.value-report-metric strong { color: var(--ink-0); font-size: 2rem; line-height: 1; }
.value-report-metric p { color: var(--ink-1); font-size: 0.82rem; margin: 0; }
.value-report-delta { align-self: end; color: var(--ink-2); font-size: 0.75rem; font-weight: 700; }
.value-report-delta--up { color: var(--action); }
.value-report-delta--down { color: var(--success); }
.value-report-comparison,
.value-report-methodology { border-top: 1px solid var(--border-0); margin-top: 1rem; padding-top: 0.85rem; }
.value-report-comparison h3,
.value-report-methodology h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.value-report-comparison p,
.value-report-methodology li { color: var(--ink-1); font-size: 0.85rem; }
.value-report-methodology ul { margin: 0; padding-left: 1.2rem; }

.saas-tabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.saas-tab-link {
  border: 1px solid var(--border-0);
  border-radius: 999px;
  color: var(--ink-1);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.55rem 0.85rem;
  text-decoration: none;
}

.saas-tab-link:focus-visible,
.saas-filter-pill:focus-visible {
  outline: 3px solid var(--border-2);
  outline-offset: 2px;
}

.saas-tab-link.is-active {
  background: var(--ink-0);
  border-color: var(--ink-0);
  color: var(--surface-0);
}

.saas-tab-panel {
  display: grid;
  gap: 0.75rem;
}

.saas-filter-pills {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.saas-filter-pill {
  border: 1px solid var(--border-0);
  border-radius: 999px;
  color: var(--ink-1);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 0.75rem;
  text-decoration: none;
}

.saas-filter-pill.is-active {
  background: var(--surface-1);
  border-color: var(--border-2);
  color: var(--ink-0);
}

.saas-impl-hero {
  gap: 1rem;
}

.saas-operation-status {
  display: grid;
  gap: 0.5rem;
}

.saas-progress-summary {
  display: grid;
  gap: 0.45rem;
}

.saas-progress-bar {
  background: var(--surface-1);
  border: 1px solid var(--border-0);
  border-radius: 999px;
  height: 0.7rem;
  overflow: hidden;
}

.saas-progress-segment {
  background: var(--success);
  display: block;
  height: 100%;
}

.saas-step0 {
  border: 1px solid var(--border-0);
  border-radius: 12px;
  padding: 0.85rem;
}

.saas-step0--compact {
  background: var(--surface-1);
}

.saas-step0--attention {
  border-color: var(--warning);
}

.saas-next-step-card {
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 0.85rem;
}

@media (max-width: 720px) {
  .saas-tabs,
  .saas-filter-pills {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .saas-tab-link,
  .saas-filter-pill {
    text-align: center;
  }

  .saas-progress-bar {
    height: 0.9rem;
  }
}

@media (max-width: 1000px) {
  .value-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-report-metrics--closing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .value-report-document-head { display: grid; }
  .value-report-document-meta { text-align: left; }
  .value-report-metrics { grid-template-columns: 1fr; }
  .value-report-metrics--closing { grid-template-columns: 1fr; }
}

@media print {
  @page { size: A4; margin: 0; }
  .shell-header, .shell-subnav, .message-stack, .value-report-interactive { display: none !important; }
  .shell { margin: 0; max-width: none; padding: 0 11mm; }
  .value-report-screen { max-width: none; }
  .value-report-document-head { display: none !important; }
  .value-report-print-frame { display: table; width: 100%; }
  .value-report-print-frame > thead { display: table-header-group; }
  .value-report-print-frame > tbody { display: table-row-group; }
  .value-report-print-frame > tfoot { display: table-footer-group; }
  .value-report-print-frame tr { display: table-row; }
  .value-report-print-frame td { display: table-cell; }
  .value-report-print-running-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 6mm;
    padding: 9mm 0 3mm; margin-bottom: 4mm; border-bottom: 1px solid var(--border-1);
  }
  .value-report-print-running-title { color: var(--ink-0); font-size: 12pt; font-weight: 700; }
  .value-report-print-running-meta { color: var(--ink-2); font-size: 8pt; text-align: right; }
  .value-report-print-running-foot {
    border-top: 1px solid var(--border-1); color: var(--ink-2); font-size: 7.5pt;
    margin-top: 4mm; padding: 3mm 0 9mm; text-align: right;
  }
  .value-report-document { background: none; border: 0; border-radius: 0; padding: 0; }
  .value-report-hero { break-inside: avoid; padding-bottom: 4mm; }
  .value-report-hero h2 { font-size: 22pt; line-height: 1.05; margin-bottom: 3mm; }
  .value-report-hero p { font-size: 10pt; max-width: none; }
  .value-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3mm; margin-top: 4mm; }
  .value-report-metric-section h3 { font-size: 11pt; margin-bottom: 2mm; }
  .value-report-metric { background: none; break-inside: avoid; border: 1px solid var(--border-1); border-radius: 0; min-height: 0; padding: 3mm; }
  .value-report-metric strong { font-size: 20pt; }
  .value-report-metric p,
  .value-report-delta,
  .value-report-methodology li,
  .value-report-comparison p { font-size: 8pt; }
  .value-report-comparison,
  .value-report-methodology { break-inside: avoid; margin-top: 5mm; padding-top: 3mm; }
}

/* ============================================================
   Feature 059 — Onboarding UI polish (convergência com protótipo)
   Namespaced `onb-*` para não colidir com componentes existentes.
   ============================================================ */

/* Detail tabs: underline style (substitui o visual de pílula no detalhe) */
.saas-detail-page .saas-tabs {
  border-bottom: 1px solid var(--border-0);
  gap: 0.25rem;
  margin: 0.5rem 0 1.25rem;
}
.saas-detail-page .saas-tab-link {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ink-2);
  margin-bottom: -1px;
  padding: 0.6rem 0.9rem;
}
.saas-detail-page .saas-tab-link.is-active {
  background: transparent;
  border-bottom-color: var(--action);
  color: var(--action);
}

/* Filtros com contagem + dot */
.onb-filters { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1.25rem; }
.onb-filters-label { color: var(--ink-3); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.onb-pill {
  align-items: center; background: var(--surface-0); border: 1px solid var(--border-0);
  border-radius: 999px; color: var(--ink-1); display: inline-flex; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 700; padding: 0.4rem 0.8rem; text-decoration: none;
}
.onb-pill:hover { border-color: var(--border-1); }
.onb-pill.is-active { background: var(--action); border-color: var(--action); color: var(--action-text); }
.onb-pill-dot { border-radius: 50%; height: 0.5rem; width: 0.5rem; }
.onb-pill-dot--ok { background: var(--success); }
.onb-pill-dot--attention { background: var(--error); }
.onb-pill-dot--progress { background: #b45309; }
.onb-pill-count { opacity: 0.7; }
.onb-pill.is-active .onb-pill-count { opacity: 0.85; }

/* Card da carteira */
.onb-grid { display: grid; gap: 0.85rem; }
.onb-card {
  align-items: center; background: var(--surface-0); border: 1px solid var(--border-0);
  border-radius: 14px; box-shadow: 0 1px 2px rgba(26,35,50,0.04);
  display: flex; gap: 1rem; justify-content: space-between; padding: 1.15rem 1.25rem;
}
.onb-card--focus { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.onb-card-body { display: grid; gap: 0.5rem; min-width: 0; }
.onb-card-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.onb-card-name { color: var(--ink-0); font-size: 1.05rem; font-weight: 800; }
.onb-card-slug { color: var(--ink-3); font-size: 0.85rem; }
.onb-status { align-items: center; display: flex; font-size: 0.92rem; font-weight: 800; gap: 0.45rem; margin: 0; }
.onb-status--ok { color: var(--success); }
.onb-status--attention { color: var(--error); }
.onb-dot { border-radius: 50%; flex: none; height: 0.6rem; width: 0.6rem; }
.onb-status--ok .onb-dot { background: var(--success); }
.onb-status--attention .onb-dot { background: var(--error); }
.onb-segbar { display: flex; gap: 0.3rem; max-width: 320px; }
.onb-seg { background: var(--surface-2); border-radius: 4px; flex: 1; height: 0.42rem; }
.onb-seg--on { background: var(--success); }
.onb-sub { color: var(--ink-2); font-size: 0.85rem; margin: 0; }
.onb-next { color: var(--ink-1); font-size: 0.85rem; font-weight: 700; margin: 0; }
.onb-commercial { color: var(--ink-3); font-size: 0.8rem; margin: 0; }
.onb-card-aside { flex: none; }
.onb-tag { border: 1px solid var(--border-1); border-radius: 999px; font-size: 0.7rem; font-weight: 800; padding: 0.15rem 0.5rem; text-transform: uppercase; }
.onb-tag--inactive { background: var(--error-bg); border-color: transparent; color: var(--error); }
.onb-tag--focus { background: var(--surface-0); border-color: var(--action); color: var(--action); }

/* Detalhe — layout principal + sidebar */
.onb-detail { display: grid; gap: 1.25rem; grid-template-columns: minmax(0,1fr) 300px; align-items: start; }
.onb-main { display: grid; gap: 1rem; min-width: 0; }
.onb-side { display: grid; gap: 0.85rem; }

.onb-step0 { align-items: center; background: var(--success-bg); border: 1px solid var(--border-0); border-radius: 12px; color: var(--ink-1); display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.88rem; padding: 0.75rem 0.95rem; }
.onb-step0[data-step0-variant="attention"] { background: var(--warning-bg); }
.onb-step0 strong { color: var(--ink-0); }

.onb-hero { background: var(--surface-0); border: 1px solid var(--border-0); border-radius: 14px; display: grid; gap: 1rem; padding: 1.25rem; }
.onb-hero-status { align-items: flex-start; display: flex; gap: 0.7rem; }
.onb-hero-icon { align-items: center; border-radius: 50%; display: flex; flex: none; height: 1.6rem; justify-content: center; width: 1.6rem; font-size: 0.95rem; }
.onb-hero-icon--ok { background: var(--success); color: #fff; }
.onb-hero-icon--attention { background: var(--error); color: #fff; }
.onb-hero-title { color: var(--ink-0); font-size: 1.05rem; font-weight: 800; }
.onb-hero-desc { color: var(--ink-1); font-size: 0.88rem; margin: 0.15rem 0 0; }
.onb-rec { border-top: 1px solid var(--border-0); display: grid; gap: 0.5rem; padding-top: 0.9rem; }
.onb-rec-head { align-items: baseline; display: flex; justify-content: space-between; gap: 0.5rem; }
.onb-rec-label { color: var(--ink-3); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.onb-rec-count { color: var(--ink-1); font-size: 0.85rem; font-weight: 700; }
.onb-rec-bar { background: var(--surface-2); border-radius: 999px; height: 0.55rem; overflow: hidden; }
.onb-rec-fill { background: var(--success); display: block; height: 100%; }
.onb-rec-help { color: var(--ink-2); font-size: 0.8rem; margin: 0; }

.onb-nextstep { align-items: center; background: var(--surface-0); border: 1px solid var(--border-0); border-left: 3px solid var(--action); border-radius: 10px; display: flex; gap: 0.75rem; justify-content: space-between; padding: 0.85rem 1rem; }
.onb-nextstep-label { color: var(--ink-3); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.onb-nextstep strong { color: var(--ink-0); }

.onb-alert { background: var(--warning-bg); border: 1px solid var(--border-0); border-radius: 10px; color: var(--warning); font-size: 0.85rem; padding: 0.7rem 0.9rem; }

.onb-section-label { align-items: center; color: var(--ink-2); display: flex; font-size: 0.72rem; font-weight: 800; gap: 0.4rem; letter-spacing: 0.05em; margin: 0.5rem 0 0.1rem; text-transform: uppercase; }
.onb-cat-badge { align-items: center; border-radius: 999px; display: inline-flex; font-size: 0.66rem; font-weight: 800; gap: 0.3rem; padding: 0.12rem 0.5rem; text-transform: uppercase; }
.onb-cat-badge::before { border-radius: 50%; content: ""; height: 0.4rem; width: 0.4rem; }
.onb-cat--config { background: var(--surface-2); color: var(--ink-1); }
.onb-cat--config::before { background: var(--ink-3); }
.onb-cat--necessary { background: var(--success-bg); color: var(--success); }
.onb-cat--necessary::before { background: var(--success); }
.onb-cat--conditional { background: var(--warning-bg); color: var(--warning); }
.onb-cat--conditional::before { background: #b45309; }
.onb-cat--recommended { background: var(--info-bg); color: var(--info); }
.onb-cat--recommended::before { background: var(--info); }

.onb-item { background: var(--surface-0); border: 1px solid var(--border-0); border-radius: 12px; display: grid; gap: 0.4rem; padding: 0.95rem 1.05rem; }
.onb-item--necessary { border-left: 3px solid var(--success); }
.onb-item--conditional { border-left: 3px solid #b45309; }
.onb-item-top { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; }
.onb-item-title { align-items: center; color: var(--ink-0); display: flex; flex-wrap: wrap; font-size: 0.98rem; font-weight: 800; gap: 0.5rem; }
.onb-item-state { color: var(--ink-2); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.onb-item-state--ok { color: var(--success); }
.onb-item-desc { color: var(--ink-1); font-size: 0.85rem; margin: 0; }
.onb-item-foot { align-items: center; display: flex; gap: 0.75rem; justify-content: space-between; }
.onb-item-owner { color: var(--ink-3); font-size: 0.76rem; }

.onb-side-card { background: var(--surface-0); border: 1px solid var(--border-0); border-radius: 12px; display: grid; gap: 0.5rem; padding: 0.95rem 1.05rem; }
.onb-side-title { color: var(--ink-3); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.onb-side-row { color: var(--ink-1); font-size: 0.83rem; margin: 0; }
.onb-side-row strong { color: var(--ink-0); }
.onb-side-muted { color: var(--ink-3); font-size: 0.78rem; margin: 0; }
.onb-side-badge { align-self: start; background: var(--success-bg); border-radius: 999px; color: var(--success); font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0.55rem; }
.onb-side-badge--none { background: var(--surface-2); color: var(--ink-2); }

.btn-outline { background: var(--surface-0); border: 1px solid var(--border-1); border-radius: 8px; color: var(--ink-0); cursor: pointer; font-size: 0.85rem; font-weight: 700; padding: 0.45rem 0.85rem; text-decoration: none; white-space: nowrap; }
.btn-outline:hover { border-color: var(--border-2); }

@media (max-width: 920px) {
  .onb-detail { grid-template-columns: 1fr; }
  .onb-card { flex-direction: column; align-items: stretch; }
  .onb-card-aside .btn-outline, .onb-card-aside .btn-secondary { display: block; text-align: center; }
}

/* --- Formulário comercial seccionado (contrato) --------------------------- */
/* Largura no bloco inteiro da página: faixa, toolbar, alerta e form alinhados.
   Centralizado no shell (1152px) para não pender à esquerda. */
.saas-contract-page { max-width: 880px; margin-inline: auto; }
.saas-form-section {
  border: 0;
  margin: 0;
  padding: 1.25rem 0 0;
}
.saas-form-section + .saas-form-section {
  border-top: 1px solid var(--border-0);
}
.saas-form-section > h2 { font-size: 0.95rem; margin: 0 0 0.1rem; color: var(--ink-0); font-weight: 700; }
.saas-form-section-desc { font-size: 0.8rem; color: var(--ink-2); margin: 0 0 0.85rem; }
.saas-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.5rem; align-items: start; }
.saas-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.saas-form-grid + .saas-form-grid { margin-top: 0.85rem; }
.saas-form-grid .saas-field--full { grid-column: 1 / -1; }
.saas-field { display: block; }
.saas-field--full { grid-column: 1 / -1; }
.saas-field-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-1); margin-bottom: 0.3rem; }
.saas-form :is(input, select, textarea) { width: 100%; box-sizing: border-box; }
.saas-form textarea { min-height: 5.5rem; }
.saas-plan-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.3rem; }
.saas-plan-row .saas-field-label { margin-bottom: 0; }
.saas-plan-row a { font-size: 0.8rem; white-space: nowrap; color: var(--action); }
.saas-reference-panel {
  margin: 0.85rem 0;
  padding: 0.9rem;
  border: 1px solid var(--border-0);
  border-radius: 14px;
  background: var(--surface-1);
}
.saas-reference-grid {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.55rem;
}
.saas-reference-card {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: var(--surface-0);
  color: var(--ink-1);
  font-size: 0.85rem;
}
.saas-reference-card--active {
  outline: 2px solid color-mix(in srgb, var(--action) 45%, transparent);
}
.saas-form-actions--footer { justify-content: flex-end; border-top: 1px solid var(--border-1); padding-top: 1.25rem; margin-top: 1.5rem; }

@media (max-width: 720px) {
  .saas-form-grid, .saas-form-grid--3 { grid-template-columns: 1fr; }
}