/* ------------------------------------------------------------------ */
/* 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: auto minmax(0, 1fr) auto;
  gap: 0 clamp(0.75rem, 2vw, 1.25rem);
  min-height: 3.25rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

/* 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;
  min-width: 0;
}

.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;
  min-width: 0;
  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;
  overflow-wrap: anywhere;
  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;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.03em;
  line-height: 1.1;
  max-width: 100%;
  overflow-wrap: anywhere;
  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.2;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.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;
  overflow-wrap: anywhere;
  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;
  min-width: 0;
  white-space: nowrap;
}

/* Plain username span — still used by the saas_admin shell header. */
.shell-user-name {
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-account-name {
  color: rgba(255,255,255,0.92);
  font-size: 0.78rem;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-account-avatar {
  align-items: center;
  background: var(--action, #0f766e);
  border-radius: 50%;
  color: #e1f5ee;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 600;
  height: 1.4rem;
  justify-content: center;
  width: 1.4rem;
}

.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);
}

.shell-account-menu {
  position: relative;
}
.shell-account-menu > summary {
  align-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  gap: 0.4rem;
  list-style: none;
  min-height: 2rem;
  padding: 0.2rem 0.55rem 0.2rem 0.25rem;
  transition: border-color 0.15s, background-color 0.15s;
  user-select: none;
}
.shell-account-menu > summary:hover,
.shell-account-menu[open] > summary {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.4);
}
.shell-account-menu > summary::-webkit-details-marker { display: none; }
.shell-account-caret {
  color: rgba(255,255,255,0.7);
  font-size: 0.68rem;
  transition: transform 0.15s;
}
.shell-account-menu[open] > summary .shell-account-caret { transform: rotate(180deg); }
.shell-account-menu__body {
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(26, 35, 50, 0.04);
  min-width: 12rem;
  padding: 0.35rem;
  position: absolute;
  right: 0;
  text-align: left;
  top: calc(100% + 0.5rem);
  z-index: 60;
}
.shell-account-menu__item {
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--ink-0);
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  margin: 0;
  padding: 0.45rem 0.6rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}
.shell-account-menu__item:hover {
  background: var(--surface-1);
  color: var(--ink-0);
}

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

.shell-subnav-wrap {
  background: #222e42;           /* slightly lighter than shell-bg — shows layering */
  border-bottom: 2px solid var(--action);
  position: relative;
}

.shell-subnav-wrap::before,
.shell-subnav-wrap::after {
  bottom: 2px;
  content: "";
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity 0.15s;
  width: 1rem;
  z-index: 2;
}

.shell-subnav-wrap::before {
  background: linear-gradient(90deg, rgba(34, 46, 66, 0.98), rgba(34, 46, 66, 0));
  left: 0;
}

.shell-subnav-wrap::after {
  background: linear-gradient(270deg, rgba(34, 46, 66, 0.98), rgba(34, 46, 66, 0));
  right: 0;
}

.shell-subnav-wrap[data-overflow-start="true"]::before { opacity: 1; }
.shell-subnav-wrap[data-overflow-end="true"]::after { opacity: 1; }

.shell-subnav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 0 clamp(1rem, 3vw, 2rem);
  scrollbar-color: rgba(110, 231, 183, 0.45) transparent;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.subnav-link {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,0.45);
  display: flex;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: -1px;   /* overlap the container border */
  min-height: 2.5rem;
  padding: 0.5rem 0.9rem;
  scroll-snap-align: start;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

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

.subnav-link:focus-visible {
  outline: 2px solid rgba(110, 231, 183, 0.75);
  outline-offset: -2px;
}

.shell-subnav::-webkit-scrollbar {
  height: 0.35rem;
}

.shell-subnav::-webkit-scrollbar-thumb {
  background: rgba(110, 231, 183, 0.35);
  border-radius: 999px;
}

/* ------------------------------------------------------------------ */
/* 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,
.btn-danger {
  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); }

/* Destrutivo (ex.: bloquear conta). O seletor com [type="submit"] vence a
   regra genérica de submit verde, mesma tática usada no btn-secondary abaixo. */
.btn-danger,
button.btn-danger[type="submit"] {
  background: var(--error);
  color: #fff;
}

.btn-danger:hover,
button.btn-danger[type="submit"]:hover { background: #7f0d2e; }

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);
  max-width: 100%;
  min-height: auto;
  min-width: 0;
  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-flow {
  display: grid;
  gap: 1rem;
}

.scanner-flow--tight {
  gap: 0.85rem;
}

.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-action-bar {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-0);
  border-radius: 14px;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0));
  position: sticky;
  bottom: 0.75rem;
  z-index: 5;
}

/* Fluxo por teclado sobre a .scanner-action-bar sticky — vale para toda tela
   operacional com essa barra (recebimento, conferência, retirada agrupada,
   transporte): Tab/Enter/seta/upload levam o foco ao próximo controle com o
   scroll NATIVO do .focus(). Sem margem, o último campo/checkbox ou o botão
   podem parar sob a barra. scroll-margin-bottom afasta o alvo — robusto à
   mudança de altura (widget de câmera, grade de pacotes, resultados de busca),
   sem offset fixo em JS. .scanner-form--operational é o denominador comum das
   telas com barra sticky (confirma via grep: as 6 telas que usam
   .scanner-action-bar também usam esta classe). Só bottom: header/subnav são
   estáticos (rolam junto). */
.scanner-form--operational input,
.scanner-form--operational select,
.scanner-form--operational textarea,
.scanner-form--operational button {
  scroll-margin-bottom: calc(9.5rem + env(safe-area-inset-bottom, 0));
}

.scanner-action-help {
  color: var(--ink-2);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
}

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

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

.scanner-footer--compact {
  margin-top: 1.35rem;
}

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

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

/* Compact text-link actions inside table rows. `.link-button` submit buttons
   would otherwise inherit the generic green submit style; the element+class+
   attribute selector below wins over `button[type="submit"]` (same tactic as
   btn-secondary/btn-danger). Laid out inline via `.saas-row-actions`. */
/* `.saas-row-actions` é um <td>. NÃO usar `display: flex` aqui: isso substitui o
   `display: table-cell` e tira a célula do layout de tabela — ela deixa de
   esticar até a altura da linha. Medido: linha 81px, célula 63px. Os ~18px que
   sobravam ficavam sem o fundo da célula, e no hover (`tr:hover td`) apareciam
   como uma FAIXA BRANCA ao lado dos links. `height: 100%` não corrige (testado).
   O layout inline dos filhos é feito com inline-block + margem, porque `gap` só
   vale em flex/grid; os <form> internos precisam do inline-block para não
   empilharem. */
.saas-row-actions {
  display: table-cell;
}
.saas-row-actions > * {
  display: inline-block;
  vertical-align: middle;
  margin: 0.1rem 0.9rem 0.1rem 0;
}
.saas-row-actions > *:last-child {
  margin-right: 0;
}
.link-button,
button.link-button[type="submit"] {
  background: none;
  border: 0;
  border-radius: 0;
  min-height: 0;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.link-button:hover,
button.link-button[type="submit"]:hover {
  background: none;
  color: var(--ink-1);
  text-decoration: underline;
}
.link-button--accept,
button.link-button--accept[type="submit"] { color: var(--action); }
.link-button--accept:hover,
button.link-button--accept[type="submit"]:hover { color: var(--action-hover); }
.link-button--reject,
button.link-button--reject[type="submit"] { color: var(--error); }
.link-button--reject:hover,
button.link-button--reject[type="submit"]:hover { color: #7f0d2e; }

/* ------------------------------------------------------------------ */
/* 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;
  box-sizing: border-box;
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
  max-width: 100%;
  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-primary-help code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.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;
}

.pickup-action-bar {
  margin-top: 0.25rem;
}

/* ------------------------------------------------------------------ */
/* 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; }

/* Menu de ações por membro na lista de equipe (069a).
   Desktop: overlay absoluto que NÃO estica a linha (a tabela de equipe usa
   .team-table-wrap com overflow visível para o menu não ser cortado).
   Mobile (card-stack): o menu volta a empilhar estático dentro do card. */
.team-table-wrap { overflow: visible; }

/* Mesmo motivo na tabela de propostas (commercial_customer_detail): `.table-wrap`
   tem `overflow-x: auto` e, pela spec do CSS, o eixo restante deixa de ser
   `visible` — o overlay do action-menu era cortado na borda do card. Quem colocar
   um action-menu dentro de uma `.table-wrap` PRECISA deste par. */
.proposals-table-wrap { overflow: visible; }
/* Histórico comercial: mesma coluna estreitada pela barra lateral da tabela de
   propostas. Sem action-menu aqui, então não há overlay a preservar — só não
   deve rolar. */
.history-table-wrap { overflow-x: visible; }
.history-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.history-code { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-1); }
/* Detalhe do evento: linha secundária sob a ação, e só quando existe. */
.history-detail { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--ink-2); }
/* Sem isto "Ana Comercial" quebrava em duas linhas e TODA linha ficava com
   altura dupla — a coluna Ação é a única que deve poder quebrar. */
.history-actor { white-space: nowrap; }

/* Último acesso (User.last_login) como linha secundária sob a situação — evita
   uma 6ª coluna que apertaria a tabela. */
.team-lastlogin {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--ink-2);
}

.action-menu { display: inline-block; position: relative; }
.action-menu > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  white-space: nowrap;
}
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu__caret {
  display: inline-block;
  font-size: 0.7rem;
  margin-left: 0.15rem;
  transition: transform 0.15s;
}
.action-menu[open] > summary .action-menu__caret { transform: rotate(180deg); }

.action-menu__body {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  display: grid;
  gap: 0.1rem;
  min-width: 15rem;
  /* Teto para textos longos (ex.: nota de bloqueio) quebrarem em linha em vez
     de esticar o menu para fora do card. */
  max-width: 20rem;
  padding: 0.5rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 30;
}

/* Bloco de troca de papel no topo do menu: select + aplicar, compacto. */
.action-menu__role { display: grid; gap: 0.4rem; margin: 0.1rem 0 0.3rem; }
.action-menu__role select { margin: 0; min-height: 2.4rem; }
.action-menu__role button {
  background: var(--action);
  border: 1px solid var(--action);
  border-radius: 6px;
  color: var(--action-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  padding: 0.45rem 0.6rem;
}
.action-menu__role button:hover { filter: brightness(0.95); }
.action-menu__sep { border-top: 1px solid var(--border-0); margin: 0.1rem 0; }

/* Demais ações como linhas de menu (texto, não botões cheios).
   Escopado sob .action-menu__body para vencer o button[type="submit"] base
   (0,1,1) — o "Desativar" é submit e herdaria o fundo verde sem isso. */
.action-menu__body .action-menu__item {
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--ink-1);
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: 0.9rem;
  margin: 0;
  padding: 0.5rem 0.6rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}
.action-menu__body .action-menu__item:hover { background: var(--surface-1); }
.action-menu__body .action-menu__item--danger { color: var(--error); }
.action-menu__body .action-menu__item--danger:hover { background: var(--error-bg); }
.action-menu__note {
  color: var(--ink-2);
  display: block;
  font-size: 0.82rem;
  padding: 0.5rem 0.6rem;
}
.action-menu__body .inline-form { margin: 0; }

@media (max-width: 44rem) {
  /* No card-stack o overlay não faz sentido: empilha dentro do card. */
  .action-menu { display: block; }
  .action-menu__body {
    box-shadow: none;
    min-width: 0;
    position: static;
    top: auto;
  }
}

/* ------------------------------------------------------------------ */
/* 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;
}

.receipt-block--compact {
  gap: 0.75rem;
  padding: 1rem 1.1rem;
}

/* 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;
}

.camera-capture {
  align-items: start;
  background: var(--surface-1);
  border: 1px dashed var(--border-1);
  border-radius: 10px;
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
}

.camera-capture .btn-secondary {
  width: 100%;
}

.camera-capture video,
.camera-capture canvas {
  border-radius: 10px;
  max-width: 100%;
  width: 100%;
}

/* `[hidden]` é `display: none` na folha do NAVEGADOR, e qualquer `display` de
   autor o vence. `.camera-preview` declara `display: block` e `.btn-secondary`
   declara `display: inline-flex` — então o botão "Usar captura" e a prévia
   (quebrada, ainda sem `src`) apareciam SEMPRE, nas três telas.
   Defeito ANTERIOR à 119: o markup era byte a byte igual nas duas telas
   administrativas, com o mesmo CSS global. A extração para o partial não o
   causou — apenas o trouxe para um lugar onde uma correção resolve os três
   consumidores. Mesmo padrão de `.scanner-field[hidden]`,
   `.pickup-recipient-other[hidden]` e `.pickup-card-evidence[hidden]`. */
/* 120: o input de arquivo cru fica FORA DE VISTA enquanto a captura funciona —
   ele não é a ação primária, e como controle nativo de largura inteira competia
   com o botão. `camera.js` põe e tira esta classe.

   NÃO é `display: none`: no celular a câmera nativa é acionada por
   `input.click()` neste elemento, e navegadores tratam clique programático em
   elemento sem caixa de forma inconsistente. Fora da tela, ele continua um
   elemento real, clicável e focável por leitores de tela. */
/* `input.` eleva a especificidade acima de `.scanner-input`, que o input carrega
   e que é declarada DEPOIS no arquivo — sem isto o `width` dela vencia e o
   controle continuava com 20px visíveis. */
input.upload-secundario {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.camera-capture [hidden] {
  display: none;
}

/* ------------------------------------------------------------------ */
/* 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; }

/* Feature 079 — settings hub: section headings above each card grid */
.settings-hub-group-title {
  color: var(--ink-1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 2rem 0 0.75rem;
}
.settings-hub .home-grid { margin-top: 0; }

/* ------------------------------------------------------------------ */
/* 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; }

/* Session code + link card: long URL must wrap, copy affordance styled to match */
.session-link__url { word-break: break-all; }

.session-link__text {
  background: var(--surface-2);
  border: 1px solid var(--border-0);
  border-radius: 8px;
  color: var(--ink-0);
  font-family: inherit;
  font-size: 0.85rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  resize: vertical;
  width: 100%;
}

.session-link__copy { margin-top: 0.6rem; }

.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;
}

.form-section-intro {
  color: var(--ink-2);
  font-size: 0.8rem;
  margin: 0 0 0.85rem;
}

.form-action-cluster {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.form-action-cluster--between {
  justify-content: space-between;
}

.form-action-cluster--end {
  justify-content: flex-end;
}

.form-action-bar {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-0);
  border-radius: 14px;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0));
  position: sticky;
  bottom: 0.75rem;
  z-index: 4;
}

/* ------------------------------------------------------------------ */
/* 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);
}

@media (max-width: 56rem) {
  .workbench-header,
  .workbench-search {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .workbench-header .btn-secondary,
  .workbench-search .btn-primary {
    justify-content: center;
    width: 100%;
  }
}

.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);
}

.transport-screen .scanner-action-bar {
  margin-top: 1rem;
}

/* ------------------------------------------------------------------ */
/* 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; }
  /* Em coluna, o align-items:flex-end do layout em linha empurraria o campo
     para a direita e o deixaria estreito; stretch realinha à esquerda e estica. */
  .scanner-form--search { flex-direction: column; align-items: stretch; }
  .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 {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    padding: 0.45rem clamp(0.75rem, 3vw, 1.25rem) 0.5rem;
    row-gap: 0.3rem;
  }
  .shell-logo { font-size: 0.72rem; }
  .shell-station {
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 0.18rem;
    padding: 0.05rem 0 0;
    text-align: left;
  }
  .shell-station-name { font-size: 0.72rem; letter-spacing: 0.12em; }
  .shell-condo { font-size: 0.78rem; justify-content: flex-start; }
  .shell-mode,
  .shell-screen-label,
  .shell-screen-label-text { font-size: 0.58rem; letter-spacing: 0.08em; }
  .shell-condo-menu {
    left: 0;
    max-width: min(22rem, calc(100vw - 1.5rem));
    transform: none;
  }
  /* Narrow: collapse to avatar + caret + Sair (identity stays via the avatar). */
  .shell-account-name { display: none; }
  .shell-account-menu > summary { padding: 0.2rem 0.4rem; }
  .shell-account-menu__body {
    max-width: min(14rem, calc(100vw - 1.5rem));
    right: 0;
  }
  .shell-logout { padding: 0.24rem 0.56rem; }
  .shell-subnav { padding-inline: clamp(0.75rem, 3vw, 1rem); }

  .scanner-screen,
  .pickup-screen {
    max-width: none;
  }

  .scanner-title,
  .page-title {
    margin-bottom: 1rem;
  }

  .page-title + .page-subtitle,
  .scanner-title + .page-subtitle {
    margin-bottom: 1.1rem;
    margin-top: -0.7rem;
  }

  .scanner-form,
  .scanner-flow {
    gap: 0.85rem;
  }

  .receipt-block,
  .pickup-primary,
  .pickup-fallback-form {
    padding: 1rem;
  }

  .receipt-pending {
    gap: 0.55rem;
    padding: 0.9rem 1rem;
  }

  .receipt-pending-hint,
  .receipt-pending-note {
    padding-left: 0;
  }

  .scanner-action-bar {
    border-radius: 12px;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    margin-top: 0;
    padding-inline: 0.85rem;
  }

  .camera-capture {
    padding: 0.75rem;
  }

  .table-stack {
    border-collapse: separate;
  }

  .table-stack thead {
    display: none;
  }

  .table-stack,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
    width: 100%;
  }

  .table-stack tbody {
    display: grid;
    gap: 0.85rem;
    padding: 0.85rem;
  }

  .table-stack tbody tr {
    background: var(--surface-0);
    border: 1px solid var(--border-0);
    border-radius: 10px;
    box-shadow: none;
    padding: 0.85rem;
  }

  .table-stack td {
    border-bottom: 1px solid var(--border-0);
    display: grid;
    gap: 0.45rem;
    grid-template-columns: minmax(6.75rem, 7.75rem) minmax(0, 1fr);
    padding: 0.55rem 0;
    white-space: normal;
  }

  .table-stack td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .table-stack td::before {
    color: var(--ink-2);
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .table-stack td[data-label=""]::before,
  .table-stack .table-empty::before {
    content: none;
  }

  .table-stack .table-empty {
    display: block;
    padding: 1.4rem 0.75rem;
  }

  .table-stack .locate-action .command,
  .table-stack .workbench-row-actions .btn-secondary,
  .table-stack .workbench-row-actions .btn-primary {
    width: 100%;
  }

  .table-stack .workbench-check {
    text-align: left;
  }

  .table-stack .workbench-row-actions-inner {
    justify-items: stretch;
    min-height: 0;
  }

  .table-stack .locate-action {
    white-space: normal;
  }

  .workbench-table {
    min-width: 0;
    table-layout: auto;
    width: 100%;
  }

  .workbench-table colgroup {
    display: none;
  }

  .residents-actions {
    width: 100%;
  }

  .residents-actions .btn-primary,
  .residents-actions .btn-secondary {
    flex: 1 1 12rem;
    text-align: center;
  }

  .residents-table__name { order: 1; }
  .residents-table__status { order: 2; }
  .residents-table__unit { order: 3; }
  .residents-table__contact { order: 4; }
  .residents-table__actions { order: 5; }

  .residents-table__actions .command {
    display: inline-flex;
    justify-content: center;
    width: 100%;
  }

  .backlog-table__tracking { order: 1; }
  .backlog-table__resident { order: 2; }
  .backlog-table__status { order: 3; }
  .backlog-table__age { order: 4; }
  .backlog-table__notification { order: 5; }
  .backlog-table__received { order: 6; }

  .workbench-table__tracking { order: 1; }
  .workbench-table__unit { order: 2; }
  .workbench-table__location { order: 3; }
  .workbench-table__age { order: 4; }
  .workbench-table__received { order: 5; }
  .workbench-table__actions { order: 6; }

  .pagination {
    align-items: stretch;
  }

  .pagination-controls {
    width: 100%;
  }

  .pagination-link,
  .pagination-current {
    flex: 1 1 0;
    text-align: center;
  }

  .saas-plan-list-table {
    min-width: 58rem;
  }

  /* A de propostas usa `table-stack` (vira cards nesta faixa): um min-width aqui
     brigaria com o empilhamento e reintroduziria a rolagem. */
  .saas-plan-list-table--fluid {
    min-width: 0;
  }

  .commercial-dashboard-table {
    min-width: 36rem;
  }

  .commercial-dashboard-table--risk,
  .commercial-dashboard-table--quality {
    min-width: 42rem;
  }
}

/* ── 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;
}
/* 114: qualificador de existência sob o número — consciência proativa no
   início do atendimento. Só existência; o detalhe vive no bloco após a grade. */
.pickup-counter-context {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-1);
}
/* 114: contexto das outras encomendas da unidade — deliberadamente SUBORDINADO
   à contagem principal. Situação operacional normal, não alerta: sem cor de
   erro, sem borda de atenção, sem peso que dispute com o que pode ser entregue
   agora. Quando não há outras encomendas, o bloco inteiro não é renderizado. */
/* Emenda de posição: o bloco saiu do card do topo e virou faixa própria ENTRE a
   grade e a barra de confirmação — onde o olho do operador está no momento em
   que a pergunta surge. Borda lateral discreta em vez de cor de alerta. */
.pickup-context {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--border-0);
  border-radius: 0 10px 10px 0;
  background: rgba(15, 23, 42, 0.025);
}
.pickup-context-head {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 0;
}
.pickup-context-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-right: 0.15rem;
}
.pickup-context-icon { margin-right: 0.15rem; }
/* A frase de balcão é a linha principal do bloco: é o que o operador diz. */
.pickup-context-phrase {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-0);
}
.pickup-context-groups {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}
.pickup-context-group {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--ink-1);
}
.pickup-context-group-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pickup-context-group-title { font-weight: 600; }
/* A "fala pronta" canônica (operational_location.message) ao lado do título. */
.pickup-context-group-message { color: var(--ink-2); }
.pickup-context-link {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pickup-context-count {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.pickup-context-note {
  font-size: 0.78rem;
  color: var(--ink-2);
}

/* 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;
  transition: border-color 0.12s ease, background 0.12s ease;
}
/* 113: a área de seleção é o <label> interno; a foto fica fora dele para que
   tocá-la nunca alterne o checkbox. O cursor de clique acompanha o label. */
.pickup-card-select {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.pickup-card-photo { flex: none; }
.pickup-card-photo-link {
  position: relative;
  display: block;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border-1);
  background: var(--surface-1);
}
.pickup-card-photo-link:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}
.pickup-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pickup-card-photo-zoom {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 0.1rem 0;
  font-size: 0.62rem;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}
/* 120: `.photo-unavailable` é a classe que `photo-zoom.js` passou a aplicar —
   o mecanismo deixou de ser exclusivo da bancada. As regras do cartão ficam,
   porque o tamanho fixo (4.25rem) é do cartão; a variante genérica abaixo serve
   as telas onde a foto aparece fora de um cartão. */
.pickup-card-photo-empty,
.pickup-card-photo-error,
.pickup-card-photo .photo-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0.25rem;
  font-size: 0.62rem;
  line-height: 1.15;
  text-align: center;
  color: var(--ink-2);
  background: var(--surface-1);
  border: 1px dashed var(--border-1);
  border-radius: 5px;
}
/* Fora do cartão da bancada (ex.: conferência do scanner) o aviso acompanha o
   fluxo do texto, sem caixa de tamanho fixo. */
.photo-unavailable {
  display: inline-block;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-2);
  background: var(--surface-1);
  border: 1px dashed var(--border-1);
  border-radius: 6px;
}

/* Evidência somente-leitura na conferência (120): miniatura clicável ao lado do
   texto de procedência. Tamanho maior que o da bancada — aqui a foto serve para
   COMPARAR com o volume em mãos, não para distinguir N cartões. */
/* Evidência somente-leitura na conferência (120): miniatura clicável, SEM texto
   ao lado — a procedência vive no rótulo do campo e a afordância, no selo.
   Tamanho maior que o da bancada: aqui a foto serve para COMPARAR com o volume
   em mãos, não para distinguir N cartões.

   `justify-self: start` é o que segura a caixa no tamanho da imagem. O pai
   `.scanner-field` é `display: grid`, e num grid o item ESTICA por padrão —
   `inline-block` sozinho não resolve. Sem isto, a moldura de 6rem vira uma
   faixa atravessando a página, com o selo esticado junto: defeito visto DUAS
   vezes na verificação visual, e agora com teste de largura. */
.evidence-readonly-link {
  border: 1px solid var(--border-0);
  border-radius: 8px;
  display: block;
  justify-self: start;
  line-height: 0;
  overflow: hidden;
  position: relative;
  width: max-content;
}
/* 166: pílula no canto, não tarja atravessando o rodapé. A tarja é o padrão da
   bancada (113), onde há várias encomendas e ela se paga; aqui há UMA, e a
   barra permanente dava à evidência aspecto de galeria. O texto continua no
   selo — trocar por ícone puro deixaria a afordância só no `title`, que não
   existe em toque. `aria-hidden`: o nome acessível vem do `aria-label` do link. */
.evidence-readonly-zoom {
  align-items: center;
  background: rgba(15, 23, 42, 0.72);
  border-radius: 999px;
  bottom: 0.4rem;
  color: #fff;
  display: inline-flex;
  font-size: 0.72rem;
  gap: 0.25rem;
  line-height: 1.5;
  padding: 0.12rem 0.5rem;
  position: absolute;
  right: 0.4rem;
}
.evidence-readonly-zoom-icon {
  font-size: 0.85rem;
  line-height: 1;
}
.evidence-readonly-link:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}
/* 166 — NENHUMA PARTE DA EVIDÊNCIA PODE SER CORTADA.
   Sem `object-fit`, sem caixa quadrada: os dois máximos limitam e o navegador
   escala preservando a proporção real. `object-fit: contain` num quadrado
   resolveria o corte mas devolveria tarjas — trocaria um defeito por outro. */
.evidence-readonly-thumb {
  display: block;
  height: auto;
  max-height: 15rem;
  max-width: 14rem;
  width: auto;
}

/* Feedback do FLUXO de conferência (166). Vazio não ocupa linha: `.scanner-field`
   é grid com gap, e um parágrafo vazio abriria um buraco permanente. */
.conference-status {
  color: var(--ink-2);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.15rem 0 0;
}
.conference-status:empty {
  display: none;
}

.photo-zoom {
  max-width: min(92vw, 40rem);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 0.9rem;
  background: var(--surface-0);
  color: var(--ink-1);
}
.photo-zoom::backdrop { background: rgba(0, 0, 0, 0.6); }
.photo-zoom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.photo-zoom-image {
  display: block;
  width: 100%;
  max-height: 70vh;
  /* contain, nunca crop: etiqueta e formato do volume podem estar nas bordas. */
  object-fit: contain;
}
.photo-zoom-stage {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-2);
}
.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; }

/* Feature 020/074 — the resend decision (destination + alternate contacts) reuses
   the .info-card shell (grey header + body) so it matches the context/code cards
   above instead of floating loose on the page background. */
.resend-decision.resend-decision--error { border-color: var(--error); }

/* Roomier body than the default .info-card-body (0.5rem): the form needs breathing
   space, and the grid gap separates the destination group from the alt fields. */
.resend-decision-body {
  display: grid;
  gap: 1.1rem;
  padding: 1rem 1.25rem 1.25rem;
}

/* The destination_option group as a real fieldset (semantic grouping); the card
   provides the border, so the fieldset itself is border/padding-free. The visible
   label lives in the grey header, so the legend is available to AT only. */
.resend-dest {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* "Contato cadastrado" / "Outro contato" sub-labels expressing the 2×2 structure
   vertically (single column keeps scan order + progressive disclosure coherent). */
.resend-dest-sub {
  color: var(--ink-2);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0.55rem 0 0.5rem;
  text-transform: uppercase;
}

.resend-dest-sub--spaced { margin-top: 0.9rem; }

.resend-options {
  display: grid;
  gap: 0.5rem;
}

/* Selectable option rows: bordered, with a real checked state so the choice
   reads as intentional instead of raw browser radios. */
.resend-option {
  align-items: center;
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  font-size: 0.95rem;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.resend-option:hover { border-color: var(--ink-2); }

.resend-option:has(input:checked) {
  background: rgba(15, 118, 110, 0.06);
  border-color: var(--action);
  box-shadow: inset 0 0 0 1px var(--action);
}

.resend-option input { accent-color: var(--action); 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 {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  margin-bottom: 0.5rem;
  padding: 0.85rem 1rem;
}

.reports-filter .filter-strip {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

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

.reports-custom {
  border-top: 1px solid var(--border-0);
  margin-top: 0.8rem;
  padding-top: 0.7rem;
}

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

.reports-custom-feedback {
  background: var(--surface-1);
  border: 1px solid var(--border-0);
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.7rem;
}

.reports-custom-feedback--error {
  background: var(--error-bg);
  border-color: rgba(159, 18, 57, 0.18);
  color: var(--error);
}

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

.reports-custom-field {
  color: var(--ink-2);
  display: grid;
  flex: 0 1 10.75rem;
  gap: 0.28rem;
  min-width: 10rem;
}

.reports-custom-field > span {
  color: var(--ink-2);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reports-custom-field input[type="date"] {
  background: var(--surface-0);
  border: 1.5px solid var(--border-1);
  border-radius: 8px;
  color: var(--ink-0);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  min-height: 2.65rem;
  padding: 0.45rem 0.7rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.reports-custom-field input[type="date"]:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
  outline: 0;
}

.reports-custom-row .btn-secondary {
  min-height: 2.65rem;
  padding-inline: 1rem;
}

/* ── 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;
}

.residents-table td {
  vertical-align: top;
}

/* Logins de acesso longos (ex.: carlos.lima@condominio-jardim-das-acacias) não
   podem forçar overflow horizontal na coluna — quebram dentro da célula (069a). */
.residents-table__contact { overflow-wrap: anywhere; }
.residents-table__contact .team-login { overflow-wrap: anywhere; }

/* Copiar login vira um ícone discreto em vez de botão rotulado, para o dado
   (o login) seguir sendo o foco da coluna e não criar um muro de botões. (069a) */
.copy-icon {
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0.2rem;
  vertical-align: middle;
}
.copy-icon:hover { background: var(--surface-2); color: var(--action); }
.copy-icon.is-copied { color: var(--action); }
.copy-icon__check { display: none; }
.copy-icon.is-copied .copy-icon__copy { display: none; }
.copy-icon.is-copied .copy-icon__check { display: inline-flex; }

/* Formulários da equipe (novo membro / redefinir senha): largura controlada no
   desktop e aviso de consequências destacado (069a). As classes já existiam na
   marcação sem estilo — estilizadas aqui, sem novos wrappers de template. */

/* Constrange a COLUNA inteira (título, intro, cards e form) à mesma largura e
   centraliza, para o texto não esticar na viewport toda enquanto o form fica
   estreito nem ficar encostado à esquerda. Espelha o .settings-page; aplicado
   só às telas de formulário — a lista de equipe segue tabela larga. */
.team-form-page { max-width: 40rem; margin-inline: auto; }

.team-form,
.team-warning-card,
.team-success-card {
  max-width: 40rem;
}

/* Grade responsiva: campos curtos lado a lado no desktop (Nome|Sobrenome,
   Papel|Senha), longos ocupam a linha; tudo empilha no mobile. Espelha o
   padrão de .settings-grid já usado no projeto. */
.team-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.25rem;
}
.team-form .form-row { margin: 0; }
.team-form .form-row--full,
.team-form .form-actions,
.team-form > .errorlist { grid-column: 1 / -1; }
.team-form .form-actions { margin: 0.25rem 0 0; }
.team-form .form-row > label {
  color: var(--ink-1);
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.team-form .form-row :is(input, select) { margin-top: 0; }
.team-form .form-hint {
  color: var(--ink-2);
  display: block;
  font-size: 0.78rem;
  margin-top: 0.3rem;
}
@media (max-width: 40rem) {
  .team-form { grid-template-columns: 1fr; }
}
.team-warning-card {
  background: var(--surface-1);
  border: 1px solid var(--border-0);
  border-left: 3px solid var(--action);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1.1rem;
}
.team-warning-card p { margin: 0 0 0.4rem; }
.team-warning-card ul { margin: 0; padding-left: 1.2rem; }
.team-success-card {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 10px;
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.25rem;
}

.account-page {
  margin-inline: auto;
  max-width: 42rem;
}
.account-card,
.account-form {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 10px;
  padding: 1.25rem;
}
.account-details {
  display: grid;
  gap: 1rem;
  margin: 0;
}
.account-details div {
  border-bottom: 1px solid var(--border-0);
  padding-bottom: 0.85rem;
}
.account-details div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.account-details dt {
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}
.account-details dd {
  color: var(--ink-0);
  margin: 0;
  overflow-wrap: anywhere;
}
.account-form {
  display: grid;
  gap: 1rem;
}
.account-form .form-row {
  margin: 0;
}
.account-form .form-row > label {
  color: var(--ink-1);
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.account-form .form-row :is(input, select) {
  margin-top: 0;
}
.account-form .form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.25rem 0 0;
}

.residents-table__name .link-code {
  display: inline-block;
  font-weight: 750;
}

.residents-table__contact-line {
  color: var(--ink-2);
  display: block;
  font-size: 0.82rem;
  line-height: 1.4;
}

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

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

.resident-form-actions .btn-primary,
.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; }

.metric-card--alert { border-color: var(--warning); }
.metric-card--alert .metric-card-value { color: var(--warning); }

/* Metric card usado como link (ex.: atalhos da Area interna / platform home) */
a.metric-card { display: block; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
a.metric-card:hover { border-color: var(--action); background: var(--surface-1); }
a.metric-card .metric-card-value { text-decoration: none; }

/* ── Notification health privacy note ──────────────────────────────── */
.notif-privacy-note {
  align-items: start;
  background: var(--surface-1);
  border: 1px solid var(--border-0);
  border-left: 3px solid var(--ink-3);
  border-radius: 8px;
  display: grid;
  gap: 0.18rem;
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.75rem;
}

.notif-privacy-note span {
  color: var(--ink-2);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.notif-privacy-note p {
  color: var(--ink-1);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

/* ── Notification health resolve expand ─────────────────────────────── */
.notif-resolve-details { margin-top: 0.35rem; }
.notif-resolve-summary {
  background: var(--surface-1);
  border: 1px solid var(--border-0);
  border-radius: 6px;
  color: var(--ink-1);
  cursor: pointer;
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  list-style: none;
  padding: 0.3rem 0.6rem;
  transition: background 0.1s;
}
.notif-resolve-summary:hover { background: var(--surface-2); }
.notif-resolve-summary::-webkit-details-marker { display: none; }
.notif-resolve-details[open] .notif-resolve-summary { display: none; }
.notif-resolve-form { display: grid; gap: 0.3rem; margin-top: 0.35rem; }
.notif-resolve-form textarea {
  border: 1px solid var(--border-0);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.35rem 0.45rem;
  resize: vertical;
  width: 100%;
}
.notif-resolve-form-actions { align-items: center; display: flex; gap: 0.4rem; }
.notif-resolve-hint { color: var(--ink-2); font-size: 0.7rem; }

/* Discreet link from a pending case to the full package detail (072c polish). */
.notif-package-link {
  color: var(--ink-2);
  font-size: 0.72rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.notif-package-link:hover { color: var(--action); }

/* ── Notification health state badges ────────────────────────────────── */
.notif-state-badge {
  border-radius: 4px;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.4rem;
  white-space: nowrap;
}
.notif-state-badge--action { background: var(--warning-bg); color: var(--warning); }
.notif-state-badge--working { background: var(--info-bg); color: var(--info); }
.notif-state-badge--done { background: var(--success-bg); color: var(--success); }
.notif-state-badge--muted { background: var(--surface-2); color: var(--ink-2); }

/* ── 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;
}

.reports-table-wrap table { width: 100%; }

.reports-table-wrap--distribution table { min-width: 18rem; }

.reports-table-wrap--weekday table { min-width: 34rem; }

/* 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 screen and (max-width: 48rem) {
  .reports-filter { padding: 0.8rem; }
  .reports-custom-row { align-items: stretch; display: grid; grid-template-columns: 1fr; }
  .reports-custom-field { min-width: 0; }
  .reports-custom-row button { width: 100%; }
  .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; }
  .report-hero-stat { align-items: start; flex-direction: column; }
  .reports-two-col { grid-template-columns: 1fr; }
}

@media screen and (max-width: 30rem) {
  .report-section-head {
    align-items: start;
    flex-direction: column;
  }

  .alert-row {
    align-items: start;
    flex-direction: column;
  }

  .alert-row-count {
    min-width: 0;
    text-align: left;
  }

  .report-hero {
    gap: 1rem;
    padding: 1rem;
  }

  .report-hero-value { font-size: 2rem; }

  .metric-strip { grid-template-columns: 1fr; }

  .roi-seal { padding: 1rem; }
}

/* ------------------------------------------------------------------ */
/* 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 {
  /* Fluxo de TEXTO, não flex. Como flex, cada trecho da frase virava um item
     anônimo e o `gap: 0.5rem` entrava entre eles: num breadcrumb com link o
     resultado era "Comercial >⎵⎵condominio villa verde⎵⎵> Contrato #18", com
     vãos maiores que os espaços da própria frase.
     A limitação já estava documentada em `.consumption-note`, que nasceu para
     evitá-la em vez de corrigi-la. O marcador ◇ mantém o respiro por margem. */
  display: block;
  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); margin-right: 0.5rem; }

/* Links em texto corrido (breadcrumb da faixa, resumo da jornada).
   Estes dois nunca foram estilizados: caíam no user-agent e renderizavam em
   #0000EE sublinhado — o azul padrão do navegador dentro de uma interface com
   paleta própria. Medido antes do fix: rgb(0, 0, 238).
   Seguem a gramática já estabelecida pelo `.link-button`: sem sublinhado em
   repouso, sublinhado no hover. O peso é o que os distingue do texto ao redor. */
.saas-context-strip a,
.journey-summary a {
  color: var(--ink-1);
  font-weight: 600;
  text-decoration: none;
}
.saas-context-strip a:hover,
.saas-context-strip a:focus-visible,
.journey-summary a:hover,
.journey-summary a:focus-visible {
  color: var(--action);
  text-decoration: underline;
}

/* `.journey-summary` não tinha NENHUMA regra: a classe existe em um único
   template e a linha inteira herdava o corpo (15px, tinta forte), competindo
   com o título logo abaixo. */
.journey-summary {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin: 0 0 1rem;
}
.journey-summary strong { color: var(--ink-0); font-weight: 600; }

/* 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 { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.onb-tag.saas-lifecycle-badge {
  align-items: center;
  background: var(--surface-0);
  border-color: var(--border-0);
  color: var(--ink-2);
  display: inline-flex;
  font-size: 0.72rem;
  justify-content: center;
  line-height: 1;
  min-height: 2rem;
  padding: 0 0.75rem;
  white-space: nowrap;
  width: auto;
}

.saas-plan-list-table {
  min-width: 66rem;
}

/* A tabela de PROPOSTAS (commercial_customer_detail) vive numa coluna estreitada
   pela barra lateral do cliente (~910px). O `min-width: 66rem` compartilhado
   (1056px) forcava rolagem horizontal em QUALQUER desktop e escondia a coluna
   Acoes — justamente o que se faz nela. Com as acoes num action-menu a tabela
   cabe, entao aqui o min-width e dispensado.
   ESCOPADO de proposito: as outras 5 tabelas que usam `.saas-plan-list-table`
   (plan_list tem 9 colunas) continuam com a largura minima. */
.saas-plan-list-table--fluid {
  min-width: 0;
}

.saas-plan-list-table td {
  vertical-align: top;
}

.saas-plan-list-table__plan strong {
  display: inline-block;
  margin-bottom: 0.2rem;
}

.saas-plan-list-table__resources {
  max-width: 18rem;
}

.saas-plan-list-table__actions {
  white-space: nowrap;
}

.saas-access-table-wrap,
.saas-contract-history-wrap {
  margin-top: 0.75rem;
}

.saas-access-table {
  min-width: 32rem;
}

.saas-access-table td,
.saas-contract-history-table td {
  vertical-align: top;
}

/* Identidade unificada: usuário/nome/e-mail em uma célula empilhada, em vez de
   3 colunas separadas que estouravam o card e escondiam a coluna Ações. */
.saas-access-table__identity strong {
  display: block;
  color: var(--ink-0);
  margin-bottom: 0.15rem;
}

.saas-access-table__identity-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-2);
  word-break: break-word;
}

/* Ações colapsadas num menu "Ações ▾" (componente .action-menu, o mesmo da
   lista de equipe), mantendo as linhas compactas. O menu é um overlay absoluto,
   então o wrap precisa de overflow visível para não cortá-lo. */
.saas-access-table-wrap {
  overflow: visible;
}

/* Sem white-space: nowrap aqui — o summary "Ações" já é nowrap pelo componente,
   e um nowrap na célula herdaria para a nota do menu, impedindo-a de quebrar. */
.saas-access-table__actions .command {
  margin: 0;
}

/* Teto abaixo da largura de uma linha da nota: como o menu é absoluto (encolhe
   pelo max-content), sem isto a nota ficaria em linha única esticando o menu.
   Com 16rem ela quebra e o menu fica compacto. Escopado para não afetar a
   lista de equipe, cujo menu tem select de papel e precisa de mais largura. */
.saas-access-table__actions .action-menu__body {
  max-width: 16rem;
}

/* Zona de risco na tela de editar usuário: separada do form, texto de alerta e
   ação destrutiva em vermelho (.btn-danger). */
.saas-danger-zone {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-1);
}

.saas-danger-zone__note {
  color: var(--error);
  font-size: 0.85rem;
  margin: 0 0 0.85rem;
  max-width: 46rem;
}

.saas-operation-stack {
  gap: 1rem;
}

.saas-operation-head,
.saas-commercial-head {
  margin: 0.25rem 0 0.5rem;
}

.saas-operation-form {
  display: grid;
  gap: 0.75rem;
}

.saas-operation-foot,
.saas-commercial-actions {
  align-items: flex-start;
  flex-wrap: wrap;
}

.saas-commercial-card {
  gap: 0.75rem;
}

.saas-commercial-head,
.saas-commercial-card .onb-item-top,
.saas-commercial-card .onb-item-foot {
  min-width: 0;
}

.saas-commercial-facts {
  margin-top: 0.15rem;
}

.saas-commercial-actions {
  justify-content: flex-end;
}

.saas-contract-toolbar-actions .btn-primary {
  white-space: nowrap;
}

.saas-contract-history-table {
  min-width: 56rem;
}

.saas-contract-history__snapshot {
  min-width: 22rem;
}

.saas-contract-history__snapshot-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.saas-contract-history__snapshot-list > div {
  display: grid;
  gap: 0.12rem;
}

.saas-contract-history__snapshot-term {
  color: var(--ink-2);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.commercial-panel {
  overflow: clip;
}

.commercial-dashboard-wrap {
  margin-top: 0.75rem;
}

.commercial-dashboard-table {
  min-width: 42rem;
}

.commercial-dashboard-table td {
  vertical-align: top;
}

.commercial-dashboard-table--plan {
  min-width: 34rem;
}

.commercial-dashboard-table--quality {
  min-width: 48rem;
}

.commercial-dashboard-table--risk {
  min-width: 52rem;
}

/* ── Painel de consumo operacional (feature 080) ────────────────────── */
/* Nota de limitação: bloco de texto longo (várias frases). NÃO reusar    */
/* .saas-context-strip aqui — ela é flex/uma-frase e fragmenta o texto.   */
.consumption-note {
  background: var(--surface-1);
  border: 1px solid var(--border-0);
  border-left: 3px solid var(--action);
  border-radius: 8px;
  display: grid;
  gap: 0.18rem;
  margin: 0 0 1.25rem;
  padding: 0.65rem 0.85rem;
}
.consumption-note span {
  color: var(--ink-2);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.consumption-note p {
  color: var(--ink-1);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

/* Subtexto do card em linha própria (registrados = valor; reais estimados */
/* = subtexto abaixo), evitando a leitura "147 38 reais" na mesma linha.   */
.consumption-metrics .metric-card-sub {
  color: var(--ink-2);
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  margin-top: 0.3rem;
}

/* Primeira coluna fixa: preserva o nome do condomínio na rolagem lateral. */
.consumption-table th:first-child,
.consumption-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface-0);
  z-index: 1;
}
.consumption-table thead th:first-child { z-index: 2; }

.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; }

/* 094 — cadastro colapsável (IA invertida: fluxo no topo, referência abaixo) */
.saas-panel--collapsible { padding-top: 0.95rem; }
.saas-panel--collapsible > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.saas-panel--collapsible > summary::-webkit-details-marker { display: none; }
.saas-panel--collapsible > summary::after { content: "▸"; color: var(--ink-2); margin-left: 0.4rem; }
.saas-panel--collapsible[open] > summary { margin-bottom: 0.85rem; }
.saas-panel--collapsible[open] > summary::after { content: "▾"; }
/* Ação destrutiva: separada do card principal de propósito (não deve ficar a um
   clique perdido do fluxo), mas dentro de um bloco com rótulo — solta na margem
   ela parecia link órfão/bug em vez de escolha de design. */
.journey-destructive {
  margin: -0.25rem 0 1.5rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-0);
  border-radius: 10px;
  background: var(--surface-1, var(--surface-0));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.journey-destructive__label {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.85rem;
}
.journey-destructive__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }

/* ================================================================== */
/* 094 — Jornada comercial guiada: superfície de operação comercial   */
/* Componente próprio (não reusa .contract-steps da 089).             */
/* ================================================================== */

/* Layout: duas colunas no desktop; uma coluna abaixo de 1100px. */
.journey-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 1.5rem;
  align-items: start;
}
.journey-main { min-width: 0; }
.journey-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 1rem;
}
@media (max-width: 1099px) {
  .journey-layout { grid-template-columns: 1fr; }
  .journey-aside { position: static; }
}

/* Stepper numerado/conectado — leitura quase instantânea do trajeto. */
.journey-stepper {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 1.2rem 1.15rem 1.05rem;
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 14px;
  display: flex;
}
.journey-step {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
/* Conector: entra pela esquerda, no centro vertical do nó. */
.journey-step::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--border-1);
  z-index: 0;
}
.journey-step:first-child::before { display: none; }
.journey-step.is-done::before,
.journey-step.is-current::before { background: var(--success); }
.journey-step__node {
  position: relative;
  z-index: 1;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface-0);
  border: 2px solid var(--border-1);
  color: var(--ink-3);
}
.journey-step.is-done .journey-step__node {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.journey-step.is-current .journey-step__node {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.15);
}
.journey-step__label {
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--ink-3);
}
.journey-step.is-done .journey-step__label { color: var(--ink-1); }
.journey-step.is-current .journey-step__label { color: var(--action); font-weight: 600; }
@media (max-width: 720px) {
  .journey-stepper { flex-wrap: wrap; gap: 0.75rem 0; }
  .journey-step { flex: 1 1 25%; }
  .journey-step::before { display: none; }
}

/* Card de próximo passo — centro decisório, impossível de ignorar. */
.journey-next {
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.06), rgba(15, 118, 110, 0.01));
  border: 2px solid var(--action);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  margin: 0 0 1.25rem;
  box-shadow: 0 10px 30px -18px rgba(15, 118, 110, 0.55);
}
.journey-next--muted {
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  box-shadow: none;
}
.journey-next--muted .journey-next__eyebrow { color: var(--ink-2); }
.journey-next__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
  margin: 0 0 0.5rem;
}
.journey-next__eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}
.journey-next__title {
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 0 0 1rem;
  color: var(--ink-0);
  max-width: 46ch;
}
.journey-next__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.journey-next__actions .btn-primary { padding: 0.68rem 1.4rem; font-size: 0.95rem; }

/* Card da proposta corrente — confirma sem ir à tabela. */
.journey-proposal {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 14px;
  padding: 1.15rem 1.3rem;
  margin: 0 0 1.5rem;
}
.journey-proposal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.journey-proposal__head h2 { margin: 0; font-size: 1rem; }
.journey-proposal__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 1rem 1.4rem;
}
.journey-metric__k {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin: 0;
}
.journey-metric__v { font-size: 1.05rem; font-weight: 600; color: var(--ink-0); margin: 0.2rem 0 0; }

/* Cards de referência na lateral (cadastro demovido a contexto). */
.journey-aside-card {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.journey-aside-card__title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin: 0 0 0.6rem;
  font-weight: 700;
}
.journey-aside-card > summary.journey-aside-card__title {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.journey-aside-card > summary.journey-aside-card__title::-webkit-details-marker { display: none; }
.journey-aside-card > summary.journey-aside-card__title::after { content: "▸"; color: var(--ink-3); }
.journey-aside-card[open] > summary.journey-aside-card__title::after { content: "▾"; }
.facts--flush { border: 0; background: none; padding: 0; }
.journey-aside-note { margin: 0; font-size: 0.88rem; color: var(--ink-0); overflow-wrap: anywhere; }
/* Aside estreita: cadastro empilhado (rótulo acima do valor); valores longos
   (CNPJ, e-mail) quebram dentro do card em vez de vazar a borda. */
.journey-aside-card .facts { display: block; }
.journey-aside-card .facts dt {
  border: 0;
  padding: 0.6rem 0 0.1rem;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}
.journey-aside-card .facts dt:first-of-type { padding-top: 0; }
.journey-aside-card .facts dd {
  border: 0;
  border-bottom: 1px solid var(--border-0);
  margin: 0;
  padding: 0 0 0.6rem;
  font-size: 0.88rem;
  color: var(--ink-0);
  overflow-wrap: anywhere;
}
.journey-aside-card .facts dd:last-of-type { border-bottom: 0; padding-bottom: 0; }

/* Detalhe de contrato pré-tenant (089): stepper de ciclo de vida + próximo passo */
.page-title-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.page-title-row .page-title { margin-bottom: 0; }
.contract-steps {
  display: flex;
  gap: 0.75rem;
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  padding: 0.95rem 1.1rem;
  margin: 0 0 1.25rem;
}
.contract-step { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.contract-step__label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--ink-3); }
.contract-step__mark { font-size: 0.8rem; line-height: 1; }
.contract-step__bar { height: 3px; border-radius: 2px; background: var(--border-1); }
.contract-step__hint { font-size: 0.72rem; color: var(--ink-3); }
.contract-step.is-done .contract-step__label { color: var(--success); }
.contract-step.is-done .contract-step__bar { background: var(--success); }
.contract-step.is-done .contract-step__hint { color: var(--ink-2); }
.contract-step.is-current .contract-step__label { color: var(--action); font-weight: 600; }
.contract-step.is-current .contract-step__bar { background: var(--action); }
.contract-step.is-current .contract-step__hint { color: var(--ink-1); }

.next-step {
  background: var(--surface-0);
  border: 2px solid var(--action);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.5rem;
}
.next-step--muted { border: 1px solid var(--border-1); }
.next-step--done { border: 1px solid var(--border-0); border-left: 4px solid var(--success); border-radius: 0 12px 12px 0; }
.next-step__eyebrow { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--action); margin-bottom: 0.3rem; }
.next-step--muted .next-step__eyebrow { color: var(--ink-2); }
.next-step--done .next-step__eyebrow { color: var(--success); }
.next-step__title { font-size: 1.05rem; margin: 0 0 0.85rem; color: var(--ink-0); }
.next-step__form { display: flex; flex-direction: column; gap: 0.7rem; }
.next-step__field { display: flex; flex-direction: column; gap: 0.25rem; }
.next-step__field label { font-size: 0.8rem; font-weight: 600; color: var(--ink-1); }
.next-step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.next-step__note { font-size: 0.72rem; color: var(--ink-3); margin: 0.65rem 0 0; }
.next-step__issues { margin: 0.25rem 0 0.85rem; padding-left: 1.1rem; }
.next-step__issues li { font-size: 0.9rem; color: var(--ink-1); margin-bottom: 0.3rem; }

/* Currency inputs (R$ prefix) and required-field marker */
.money-wrap { position: relative; display: block; }
.money-prefix { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); font-size: 0.9rem; color: var(--ink-2); pointer-events: none; }
.money-wrap .money-input { padding-left: 2.1rem; }
.saas-field-label .req { color: var(--error); margin-left: 2px; }
.next-step :is(textarea, input, select) { width: 100%; box-sizing: border-box; }

.admin-path__title { font-size: 0.9rem; font-weight: 600; color: var(--ink-1); margin: 0 0 0.6rem; }
.admin-username-preview { font-size: 0.8rem; color: var(--action); margin: 0.55rem 0 0; }
.admin-path-or { display: flex; align-items: center; gap: 0.75rem; color: var(--ink-2); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0.5rem 0; }
.admin-path-or::before, .admin-path-or::after { content: ""; flex: 1; height: 1px; background: var(--border-1); }
.saas-note { font-size: 0.85rem; color: var(--ink-2); background: var(--surface-1); border: 1px solid var(--border-0); border-left: 3px solid var(--border-2); border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0 0 1.5rem; }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem 1.4rem; }
.fact__k { font-size: 0.72rem; color: var(--ink-2); margin: 0; letter-spacing: 0.03em; text-transform: uppercase; }
.fact__v { font-size: 0.92rem; color: var(--ink-0); margin: 0.15rem 0 0; }

/* 097 — card da evidência do aceite (superfície interna). Compacto de propósito:
   vive dentro de uma célula da tabela de propostas, não é bloco de página. */
.acceptance-card { margin-top: 0.6rem; padding: 0.6rem 0.7rem; background: var(--surface-1); border: 1px solid var(--border-0); border-left: 3px solid var(--action); border-radius: 8px; }
.acceptance-card__title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--action); margin: 0 0 0.5rem; }
/* Escopado: a .facts global é dt/dd; aqui a marcação é div/p. O card ocupa uma
   LINHA PRÓPRIA da tabela (colspan) — numa célula estreita ele cortava nome e
   referência. Com largura total, colunas que se acomodam sozinhas. */
.acceptance-card .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem 1.2rem; }
.acceptance-card .fact__v { overflow-wrap: anywhere; }
.acceptance-row > td { padding-top: 0; border-top: 0; }
.acceptance-card__legacy { margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-2); font-style: italic; }

.contract-collapse {
  background: var(--surface-1);
  border: 1px solid var(--border-0);
  border-radius: 12px;
  padding: 0 1.25rem;
  margin: 0 0 1rem;
}
.contract-collapse > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.9rem 0;
  font-size: 0.9rem;
  color: var(--ink-1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.contract-collapse > summary::-webkit-details-marker { display: none; }
.contract-collapse > summary::before { content: "\25B8"; color: var(--ink-2); font-size: 0.75rem; }
.contract-collapse[open] > summary::before { content: "\25BE"; }
.contract-collapse__body { padding: 0 0 1.15rem; }

@media (max-width: 720px) {
  .contract-steps { flex-wrap: wrap; }
  .contract-step { flex: 1 1 46%; }
}

/* 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; }
.saas-empty__hint { margin: 0; }
.saas-empty__action { display: inline-flex; margin-top: 1rem; }

/* 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; }
/* ── UI toggle (iOS-style switch) ──────────────────────────────────────────
   Usage:
     <label class="ui-toggle">
       <input type="checkbox" ...>
       <span class="ui-toggle-track"><span class="ui-toggle-thumb"></span></span>
       <span class="ui-toggle-label">Label</span>
     </label>
   Auto-submit: add onchange="this.form.submit()" to the input.
   ───────────────────────────────────────────────────────────────────────── */
.ui-toggle {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 0.5rem;
  user-select: none;
}
.ui-toggle input[type="checkbox"] {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.ui-toggle-track {
  background: var(--border-1);
  border-radius: 999px;
  flex-shrink: 0;
  height: 26px;
  position: relative;
  transition: background 0.18s ease;
  width: 46px;
}
.ui-toggle input:checked ~ .ui-toggle-track { background: var(--action); }
.ui-toggle-thumb {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
  height: 20px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 0.18s ease;
  width: 20px;
}
.ui-toggle input:checked ~ .ui-toggle-track .ui-toggle-thumb { transform: translateX(20px); }
.ui-toggle-label { color: var(--ink-1); font-size: 0.875rem; font-weight: 500; }
.ui-toggle--danger input:checked ~ .ui-toggle-track { background: var(--error); }

.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-form,
.saas-form,
.resident-form,
.resend-form {
  display: grid;
  gap: 1rem;
  /* match the 1.5rem rhythm between the cards above (.pickup-primary carries a
     1.5rem margin-bottom): the form sits outside those cards, and its grid gap
     only spaces its own children — so without this it would butt against the
     código+link card instead of keeping the same vertical rhythm. */
  margin-top: 1.5rem;
}

.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; }
/* BooleanField renderizado como toggle inline (.ui-toggle): sobrepõe o
   display:block do rótulo padrão para não quebrar o flex do switch. */
.settings-form .form-row--toggle > label.ui-toggle { display: inline-flex; margin-bottom: 0; }
.settings-form .field-help { display: block; font-size: 0.78rem; color: var(--ink-2); margin-top: 0.25rem; }
.settings-form :is(input, select, textarea),
.resident-form :is(input, select, textarea),
.resend-form :is(input, select, textarea) {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}

/* radio/checkbox inside resend-form must not inherit the full-width rule above */
.resend-form .resend-option input[type="radio"],
.resend-form .resend-option input[type="checkbox"] { width: auto; min-height: auto; }

.settings-form textarea,
.resident-form textarea,
.resend-form textarea {
  min-height: 5rem;
}

.settings-form .scanner-errors,
.settings-form .errorlist,
.resident-form .field-errors,
.resident-form .scanner-errors,
.resend-form .scanner-errors,
.saas-form .form-error,
.saas-form .scanner-errors {
  margin-top: 0.35rem;
}

/* 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 {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  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; }
  .settings-toggle,
  .settings-test-row,
  .saas-search,
  .resident-related-actions,
  .resident-status-panel {
    align-items: stretch;
    flex-direction: column;
  }
  .settings-actions,
  .saas-actions,
  .saas-form-actions,
  .form-action-cluster,
  .resident-form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .settings-test-row .form-row,
  .saas-search label {
    min-width: 0;
    width: 100%;
  }
  .settings-actions > *,
  .saas-actions > *,
  .saas-form-actions > *,
  .form-action-cluster > *,
  .resident-form-actions > * {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .form-action-bar {
    gap: 0.5rem;
    padding: 0.75rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom, 0));
  }
  .pickup-primary {
    padding: 1rem;
  }
}

/* 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-panel { display: grid; gap: 0.75rem; margin-bottom: 0.75rem; }
.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 screen and (max-width: 900px) {
  .ledger-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-summary { grid-template-columns: 1fr; }
  .ledger-record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 680px) {
  /* Espelha o Relatório Mensal: empilha o cabeçalho e alinha a meta à esquerda
     em vez de espremê-la numa coluna estreita à direita (space-between). */
  .ledger-document-head { display: grid; }
  .ledger-document-meta { text-align: left; }

  .ledger-filter-grid,
  .ledger-record-grid { grid-template-columns: 1fr; }

  .ledger-record-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ledger-actions {
    background: color-mix(in srgb, var(--surface-0) 92%, transparent);
    border-top: 1px solid var(--border-0);
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    margin-inline: -0.85rem;
    margin-top: 1rem;
    padding: 0.85rem;
    position: sticky;
    z-index: 5;
  }

  .ledger-actions .btn-primary,
  .ledger-actions .btn-secondary {
    width: 100%;
  }
}

/* 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-grid { display: grid; flex: 1 1 12rem; gap: 0.5rem; min-width: 0; }
.value-report-filter label { color: var(--ink-1); display: grid; font-size: 0.78rem; font-weight: 700; gap: 0.2rem; min-width: 0; }
.value-report-filter input { display: block; margin-top: 0; min-width: 0; width: 100%; }
.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; }
/* O td herda padding/borda da regra global `td`, insetando o card do documento
   ~13px em relação ao card de filtro. Zera só na tela; o print mantém seu layout. */
@media screen {
  .value-report-print-frame td { padding: 0; border: 0; }
}
.value-report-document { background: var(--surface-0); border: 1px solid var(--border-0); border-radius: 8px; padding: 1rem; }
/* Caixa de leitura executiva: bloco destacado (acento teal + fundo sutil) que
   melhora o escaneio do resumo, sem alterar o conteúdo factual. */
.value-report-hero { background: var(--surface-1); border: 1px solid var(--border-0); border-left: 4px solid var(--action); border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 1rem; }
.value-report-hero h2 { font-size: 1.35rem; line-height: 1.15; margin: 0.15rem 0 0.5rem; max-width: 46rem; }
.value-report-hero-summary { 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: 0.85rem; }
.value-report-metric-section h3 { font-size: 1rem; margin: 0 0 0.45rem; }
/* Cada seção tem no máximo 2 cards — grid de 2 colunas evita o vão à direita
   (4 colunas deixavam 2 slots vazios e davam aparência de conteúdo faltando). */
.value-report-metrics { display: grid; gap: 0.65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.value-report-metrics--closing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.value-report-metric { border: 1px solid var(--border-0); border-radius: 8px; display: grid; gap: 0.3rem; align-content: start; min-height: 6.5rem; padding: 0.7rem 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-subnote { color: var(--ink-2); font-size: 0.72rem; line-height: 1.3; margin: 0; }
/* Estado "sem dado" de um indicador: não compete visualmente com números reais. */
.value-report-metric-empty { color: var(--ink-2); font-size: 0.95rem; font-weight: 600; }
.value-report-comparison-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  width: 100%;
}
/* display:* explícito porque `.value-report-print-frame td/tr` (descendente)
   força display:block em telas — sem isto a tabela aninhada empilha as células. */
.value-report-comparison-table { display: table; width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.86rem; }
.value-report-comparison-table { min-width: 38rem; }
.value-report-comparison-table thead { display: table-header-group; }
.value-report-comparison-table tbody { display: table-row-group; }
.value-report-comparison-table tr { display: table-row; }
.value-report-comparison-table th,
.value-report-comparison-table td { display: table-cell; text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border-0); }
.value-report-comparison-table th { color: var(--ink-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.value-report-comparison-table td:nth-child(n+2),
.value-report-comparison-table th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.value-report-var { font-weight: 700; }
.value-report-var--positive { color: var(--success); }
.value-report-var--negative { color: var(--action); }
.value-report-var--flat,
.value-report-var--neutral { color: var(--ink-2); }
.value-report-var-note { color: var(--ink-2); font-size: 0.78rem; }
/* Rótulo textual do tom (Melhora/Piora/Estável) — significado legível sem cor. */
.value-report-var-tag { font-size: 0.72rem; font-weight: 600; }
.value-report-callouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.85rem; }
.value-report-callouts h3 { grid-column: 1 / -1; }
.value-report-callout { border: 1px solid var(--border-0); border-left-width: 4px; border-radius: 8px; padding: 0.7rem 0.85rem; }
.value-report-callout strong { display: block; margin-bottom: 0.2rem; }
.value-report-callout p { margin: 0; color: var(--ink-1); font-size: 0.86rem; }
.value-report-callout--attention { border-left-color: var(--action); }
.value-report-callout--positive { border-left-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;
}

/* Feature 106 / FR-016: a referência temporal das telas cross-tenant.
   Informativo, NÃO alerta — deliberadamente sem caixa, sem borda e sem ícone.
   Usar o calendário da plataforma é legítimo; o que não pode é fazê-lo em
   silêncio. Um callout aqui sugeriria um problema que não existe. */
.saas-period-reference {
  color: var(--ink-2);
  font-size: 0.85rem;
  margin: -0.5rem 0 1.25rem;
}

.saas-period-reference strong {
  color: var(--ink-1);
  font-weight: 600;
}

.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 screen and (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 screen and (max-width: 680px) {
  .value-report-document-head { display: grid; }
  .value-report-document-meta { text-align: left; }
  .value-report-filter { align-items: stretch; }
  .value-report-filter-grid,
  .value-report-actions {
    width: 100%;
  }
  .value-report-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .value-report-actions .btn-primary,
  .value-report-actions .btn-secondary {
    width: 100%;
  }
  .value-report-metrics { grid-template-columns: 1fr; }
  .value-report-metrics--closing { grid-template-columns: 1fr; }
  .value-report-callouts { grid-template-columns: 1fr; }
}

@media screen and (max-width: 30rem) {
  .value-report-document { padding: 0.85rem; }
  .value-report-hero { padding: 0.8rem; }
  .value-report-hero h2 { font-size: 1.15rem; }
}

@media print {
  @page { size: A4; margin: 0; }
  .shell-header, .shell-subnav, .message-stack, .reports-filter { display: none !important; }
  .shell { margin: 0; max-width: none; padding: 0 11mm; }
  .reports-screen { max-width: none; }
  .report-section-head { break-after: avoid; }
  .report-hero,
  .metric-card,
  .alert-row,
  .alert-empty,
  .roi-seal,
  .roi-item,
  .reports-table-wrap,
  .reports-two-col {
    break-inside: avoid;
  }
  .report-hero,
  .metric-card,
  .alert-row,
  .alert-empty,
  .roi-seal {
    background: none;
  }
  .report-hero,
  .roi-seal {
    border-left-width: 2px;
  }
  .reports-screen table { font-size: 8pt; width: 100%; }
  .reports-screen th,
  .reports-screen td { padding: 0.28rem 0.35rem; }
  .reports-two-col { grid-template-columns: 1fr 1fr; }
  .reports-table-wrap { overflow: visible; }
}

@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; }
  /* Caixa de leitura executiva na impressão: borda (imprime mesmo sem fundo)
     com acento à esquerda; a cor de fundo é só reforço quando habilitada. */
  .value-report-hero { break-inside: avoid; border: 1px solid var(--border-1); border-left: 3px solid var(--action); border-radius: 0; padding: 3mm 4mm; margin-bottom: 4mm; }
  .value-report-hero h2 { font-size: 14pt; line-height: 1.15; margin-bottom: 2mm; }
  .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-methodology li,
  .value-report-comparison p { font-size: 8pt; }
  .value-report-methodology { break-inside: avoid; margin-top: 5mm; padding-top: 3mm; }
  .value-report-metric-empty { font-size: 12pt; }
  /* Comparação: a tabela PODE atravessar páginas, mas a linha não se parte
     e o cabeçalho se repete (FR-009 — tabela não truncada). */
  .value-report-comparison { margin-top: 5mm; padding-top: 3mm; }
  .value-report-comparison-table { font-size: 8.5pt; break-inside: auto; }
  .value-report-comparison-table thead { display: table-header-group; }
  .value-report-comparison-table tr { break-inside: avoid; }
  /* Callouts: cada bloco inteiro, e o título não se separa do primeiro. */
  .value-report-callouts { margin-top: 5mm; }
  .value-report-callouts h3 { break-after: avoid; }
  .value-report-callout { break-inside: avoid; border: 1px solid var(--border-1); border-left-width: 3px; border-radius: 0; padding: 2.5mm 3mm; }
  .value-report-callout p { font-size: 8pt; }
}

/* ============================================================
   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);
}

.login-page {
  background: var(--surface-1);
}

/* Card de autenticação compartilhado: login e telas públicas de recuperação
   de senha (068a). As regras viviam inline em registration/login.html; foram
   movidas para cá (069a) para que os templates de recuperação — que já usam
   estas classes — fiquem estilizados de forma consistente. */
.login-wrap {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
}
.login-card {
  background: var(--surface-0);
  border: 1px solid var(--border-0);
  border-radius: 14px;
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 22rem;
}
.login-logo {
  color: var(--ink-0);
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
  text-decoration: none;
}
.login-logo span { color: var(--action); }
/* Links secundários do card (Esqueci minha senha, Voltar ao login, Solicitar
   novo link) seguem a cor da ação em vez do azul default do browser. (069a) */
.login-card a:not(.login-logo) {
  color: var(--action);
  font-weight: 600;
}
.login-sub {
  color: var(--ink-2);
  font-size: 0.82rem;
  margin: 0 0 1.75rem;
}
.login-form { display: grid; gap: 1rem; }
.login-label {
  color: var(--ink-2);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}
.login-error {
  background: var(--error-bg);
  border: 1px solid rgba(159,18,57,0.18);
  border-radius: 8px;
  color: var(--error);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.65rem 0.9rem;
}

.btn-block {
  width: 100%;
}

.context-choice-form {
  margin: 0;
}

.context-choice-card {
  border: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.error-screen-action {
  min-width: min(14rem, 100%);
}

/* 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--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Two compact fields (CNPJ, units) + one wide field (address) on one row.
   CNPJ column is wide enough for the full masked value (00.000.000/0000-00). */
.saas-form-grid--id { grid-template-columns: minmax(0, 15rem) minmax(0, 9rem) 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; }
/* :not(checkbox/radio) é obrigatório aqui. Sem isso a caixa de um checkbox
   esticava pela largura inteira da grade e o navegador centralizava o glifo —
   era por isso que a declaração de responsabilidade do aceite aparecia com a
   marca solta no meio da tela. */
.saas-form :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  box-sizing: border-box;
}
/* Checkbox: controle e texto na mesma linha, alinhados pelo topo para o caso de
   o texto quebrar (a declaração do aceite é uma frase inteira, não um rótulo). */
.saas-field--check { display: flex; align-items: flex-start; gap: 0.55rem; cursor: pointer; }
.saas-field--check input[type="checkbox"] { flex: none; margin-top: 0.15rem; }
.saas-field-check-text { display: block; font-size: 0.85rem; color: var(--ink-1); line-height: 1.45; }
.saas-field-check-text .saas-field-help { display: block; }
/* O rótulo do checkbox é uma FRASE, não uma palavra: o asterisco com 2px colava
   no ponto final ("dele.*"). */
.saas-field-check-text .req { margin-left: 0.3rem; }

/* 097 — resumo dos termos congelados na tela de registro do aceite, e o aviso de
   irreversibilidade. Discretos de propósito: informam antes do ato sem competir
   com o formulário, que é o que a pessoa veio preencher. */
.accept-terms {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem;
  margin: 0 0 1.25rem; padding: 0.7rem 0.9rem;
  background: var(--surface-1); border: 1px solid var(--border-0);
  border-radius: 8px; font-size: 0.85rem;
}
.accept-terms__k { color: var(--ink-2); }
.accept-terms__v { color: var(--ink-0); font-weight: 600; }
.accept-irreversible { margin: 0 0 0.85rem; font-size: 0.82rem; color: var(--ink-2); }
.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, .saas-form-grid--4, .saas-form-grid--id { grid-template-columns: 1fr; }
  .saas-plan-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .saas-plan-list-table__resources {
    max-width: none;
  }
  .saas-commercial-card .onb-item-foot,
  .saas-operation-foot {
    align-items: stretch;
    flex-direction: column;
  }
  .saas-commercial-head,
  .saas-commercial-card .onb-item-top {
    align-items: stretch;
    flex-direction: column;
  }
  .saas-commercial-card .onb-side-badge {
    align-self: flex-start;
  }
  .saas-operation-head-actions,
  .saas-commercial-head-actions,
  .saas-contract-toolbar-actions {
    width: 100%;
  }
  .saas-commercial-actions {
    justify-content: stretch;
    width: 100%;
  }
  .saas-operation-head-actions > *,
  .saas-commercial-head-actions > *,
  .saas-contract-toolbar-actions > * {
    width: 100%;
  }
  .saas-commercial-actions > *,
  .saas-operation-foot > *:last-child {
    width: 100%;
  }
  .saas-commercial-actions .btn-primary,
  .saas-commercial-actions .btn-outline,
  .saas-operation-head-actions .btn-primary,
  .saas-commercial-head-actions .btn-primary,
  .saas-commercial-head-actions .btn-secondary,
  .saas-contract-toolbar-actions .btn-primary,
  .saas-contract-toolbar-actions .btn-secondary,
  .saas-operation-foot .btn-primary,
  .saas-operation-foot .btn-secondary,
  .saas-operation-foot .btn-outline {
    text-align: center;
    width: 100%;
  }
  .saas-contract-history__snapshot,
  .saas-access-table__status {
    min-width: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Select condominium — redesigned screen (feature 065)                */
/* ------------------------------------------------------------------ */

.sc-root { max-width: 56rem; }

.sc-header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.sc-title-group { display: flex; flex-direction: column; gap: 2px; }
.sc-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.sc-count { color: var(--ink-2); font-size: 0.8rem; margin: 0; }

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

.sc-search-wrap { position: relative; }
.sc-search-icon {
  color: var(--ink-3);
  height: 16px;
  left: 0.6rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
}
.sc-search-input {
  border: 1.5px solid var(--border-1);
  border-radius: 8px;
  color: var(--ink-0);
  font-size: 0.85rem;
  height: 36px;
  min-height: unset;
  padding: 0 0.75rem 0 2rem;
  width: 220px;
}
.sc-search-input:focus { border-color: var(--action); outline: none; box-shadow: 0 0 0 3px rgba(15,118,110,0.12); }

.sc-view-toggle {
  background: var(--surface-1);
  border: 1.5px solid var(--border-0);
  border-radius: 8px;
  display: flex;
  gap: 2px;
  padding: 2px;
}
.sc-view-btn {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  height: 28px;
  justify-content: center;
  padding: 0;
  width: 28px;
}
.sc-view-btn svg { height: 16px; width: 16px; }
.sc-view-btn--active { background: var(--surface-0); box-shadow: 0 1px 3px rgba(26,35,50,0.1); color: var(--ink-0); }
.sc-view-btn:hover:not(.sc-view-btn--active) { color: var(--ink-0); }

.sc-section-label {
  color: var(--ink-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.sc-recents { margin-bottom: 1.25rem; }
.sc-recents-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.sc-recent-pill {
  align-items: center;
  background: var(--surface-0);
  border: 1.5px solid var(--border-0);
  border-radius: 8px;
  color: var(--ink-0);
  cursor: pointer;
  display: flex;
  font-size: 0.82rem;
  gap: 0.5rem;
  padding: 0.3rem 0.65rem 0.3rem 0.4rem;
  transition: border-color 0.12s;
}
.sc-recent-pill:hover { border-color: var(--action); }

.sc-avatar {
  align-items: center;
  background: rgba(15,118,110,0.1);
  border-radius: 8px;
  color: var(--action);
  display: flex;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  height: 36px;
  justify-content: center;
  width: 36px;
}
.sc-avatar--sm { border-radius: 5px; font-size: 0.65rem; height: 22px; width: 22px; }

.sc-grid {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.sc-grid--list { grid-template-columns: 1fr; gap: 0.375rem; }

.sc-form { margin: 0; }

.sc-card {
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
  width: 100%;
}
/* higher specificity (0,2,0) needed to override button[type="submit"] (0,1,1) base rule */
.sc-root .sc-card {
  background: var(--surface-0);
  border: 1.5px solid var(--border-0);
  color: var(--ink-0);
}
.sc-root .sc-card:hover { border-color: var(--action); box-shadow: 0 0 0 3px rgba(15,118,110,0.1); background: var(--surface-0); }

.sc-grid:not(.sc-grid--list) .sc-card {
  flex-direction: column;
  align-items: flex-start;
}
.sc-grid:not(.sc-grid--list) .sc-avatar { height: 38px; width: 38px; }

.sc-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-card-name { color: var(--ink-0); font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.sc-card-meta { color: var(--ink-2); font-size: 0.72rem; }

.sc-empty { color: var(--ink-2); font-size: 0.9rem; margin-top: 2rem; text-align: center; }

@media (max-width: 480px) {
  .sc-search-input { width: 160px; }
  .sc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Feature 073b — assisted team member creation: login preview + role description */
.team-login-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: var(--surface-2, #f8fafc);
}
.team-login-preview__label {
  color: var(--ink-2, #64748b);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.team-login-preview__value {
  font-size: 1.05rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.team-login-preview__base { color: var(--ink-0, #0f172a); }
.team-login-preview__namespace { color: var(--action, #0f766e); }
.team-login-preview__status { color: var(--ink-2, #64748b); font-size: 0.8rem; }
.team-login-preview__note { color: var(--ink-2, #64748b); font-size: 0.78rem; }
.team-login-linkbtn {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--action, #0f766e);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
}
.team-login-linkbtn:hover { text-decoration: none; }
/* The button reset above sets inline-flex; make the [hidden] attribute win. */
.team-login-linkbtn[hidden] { display: none; }
.team-role-description { display: block; color: var(--ink-2, #64748b); }

/* 104 — evidência da assinatura do contrato.
   Reusa os tokens do .acceptance-card (097): mesma família de evidência interna,
   mesma linguagem visual. Nenhuma paleta nova. */
.signature-card { margin: 0 0 1rem; padding: 0.9rem 1.1rem; }
.signature-card .fact--wide { grid-column: 1 / -1; }
/* A ausência é um FATO, não um erro — cinza e itálico, nunca vermelho: o
   documento legado sem qualificação não está em estado inválido. */
.fact__absent { color: var(--ink-2); font-style: italic; }
.signature-card__hash { margin-top: 0.35rem; }
.signature-card__hash > summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--ink-2);
}
.signature-card__hash-value {
  display: block;
  margin-top: 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  /* 64 caracteres precisam caber sem empurrar a página na horizontal. */
  overflow-wrap: anywhere;
  color: var(--ink-1);
}

/* O ciclo real do registro (FR-010). Informativo, não alerta: substituir o
   documento antes da validação é fluxo normal, não exceção. */
.saas-cycle-note {
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Histórico de documentos assinados — coleção própria (D8). */
.signature-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.signature-history__item {
  padding: 0.75rem 0.9rem;
  background: var(--surface-1);
  border: 1px solid var(--border-0);
  border-left: 3px solid var(--border-0);
  border-radius: 8px;
}
.signature-history__item.is-current { border-left-color: var(--action); }
.signature-history__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.signature-history__file { font-weight: 600; overflow-wrap: anywhere; }
.signature-history__item .facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.5rem 1.2rem;
}
.signature-history__item .fact__v { overflow-wrap: anywhere; }

/* Proveniência do checksum (104 / US2). Discreto de propósito: é qualificação
   de uma evidência, não alerta — o documento legado não está em estado errado. */
.fact__provenance {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: var(--ink-2);
}
.signature-card__hash-note {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ */
/* Feature 115 — conferência por leitura na retirada                    */
/* ------------------------------------------------------------------ */

.pickup-scan {
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 0.9rem 1rem 1rem;
  margin: 0 0 1rem;
  background: var(--surface-0);
}

.pickup-scan-title {
  padding: 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pickup-scan-help {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  color: var(--ink-1);
}

.pickup-scan-input {
  width: 100%;
}

.pickup-scan-feedback {
  min-height: 1.6rem; /* reserva a altura: o feedback não empurra a grade */
  margin-top: 0.55rem;
}

.pickup-scan-status {
  margin: 0;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.84rem;
  font-weight: 600;
}

.pickup-scan-status--ok {
  color: var(--success);
  background: var(--success-bg);
}

/* Releitura é neutra: informa sem alarmar. Bipar duas vezes a mesma caixa é
   comportamento normal de quem confere, não erro a corrigir. */
.pickup-scan-status--repeat {
  color: var(--ink-1);
  background: var(--surface-2);
}

/* Vocabulário de alerta reservado à exceção real — um volume que não pertence
   a esta retirada é a única situação aqui que exige parar antes de entregar. */
.pickup-scan-status--alert {
  color: var(--error);
  background: var(--error-bg);
}

@media (max-width: 640px) {
  .pickup-scan {
    padding: 0.75rem 0.8rem 0.85rem;
  }
}

/* SCAN_REQUIRED — caminho excepcional por pacote (115) */

.pickup-card-override {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.6rem;
  border: 1px dashed var(--border-1);
  border-radius: 6px;
  font-size: 0.8rem;
}

/* Discreto de propósito: é exceção, não um segundo botão de "selecionar". */
.pickup-card-override-summary {
  cursor: pointer;
  color: var(--ink-2);
  font-weight: 600;
}

.pickup-card-override[open] .pickup-card-override-summary {
  color: var(--warning);
}

.pickup-card-override-check {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  margin: 0.5rem 0;
  color: var(--ink-1);
}

.pickup-card-override-field {
  display: block;
  margin: 0.4rem 0;
}

.pickup-card-override-field > span {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-2);
}

.pickup-card-override-field select,
.pickup-card-override-field input {
  width: 100%;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border-1);
  border-radius: 4px;
  font-size: 0.82rem;
}

/* SCAN_REQUIRED — cartão não interativo SEM depender de JavaScript.
   O wrapper deixa de ser <label> no template (a ativação do rótulo funciona
   sem JS), e o checkbox perde o ponteiro aqui. Ele continua habilitado e com
   `name`: a seleção nasce da leitura ou do override e precisa viajar no POST. */
/* Só o que MUDA em relação a `.pickup-card-select`: o layout (flex, gap,
   flex:1, min-width) continua vindo da regra base. Redeclará-lo aqui foi o que
   me fez perder `flex: 1` de vista quando o cartão quebrou. */
.pickup-card-select--locked {
  cursor: default;
}

/* `.pickup-card` é um flex ROW: foto e área de seleção lado a lado. O bloco de
   justificativa é um terceiro filho e, sem isto, entrava na MESMA linha e
   espremia o código do volume até uma letra por linha — defeito que nenhum
   teste de markup pegaria, e que só apareceu na verificação visual. */
.pickup-card--with-override {
  flex-wrap: wrap;
}

.pickup-card--with-override .pickup-card-override {
  flex: 0 0 100%;
}

.pickup-card-select--locked .pickup-card-check {
  pointer-events: none;
}

/* ── 116: compactação da tela de retirada nas políticas de LEITURA ─────────
   A carga útil desta tela é a grade de pacotes; todo o resto é cromo. Medido a
   1366×768 na página real, o cromo acima do primeiro cartão somava 747 px num
   viewport de 768 — o operador via 21 px do primeiro pacote, e SC-004 não
   fechava.

   O ritmo original é de documento (respiros de 22 a 41 px entre seções). Numa
   ferramenta de balcão, onde o operador percorre uma lista sob pressão, esse
   respiro é espaço que deixa de mostrar pacote.

   ESCOPADO de propósito: `MANUAL` não recebe nada disto. SC-005 exige que ela
   permaneça sem mudança observável, e lá não há campo de leitura disputando
   espaço com a grade — a compactação não teria motivo. */

.grouped-session--scan .scanner-title {
  margin-bottom: 0.35rem;
}

/* O subtítulo explica o que a tela É para quem a usa dezenas de vezes por dia.
   Some nas políticas de leitura; permanece em MANUAL. */
.grouped-session--scan .page-subtitle {
  display: none;
}

.grouped-session--scan .pickup-counter {
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.55rem;
}

/* "Criada em" quase nunca decide algo no balcão — o que decide é o código, o
   status e quantas encomendas existem. Ele continua no DOM (a informação não se
   perde para quem inspeciona ou para leitor de tela) e sai da disputa por
   espaço vertical. */
.grouped-session--scan .pickup-counter-meta > div:nth-child(3) {
  display: none;
}

.grouped-session--scan .pickup-scan {
  margin-bottom: 0.55rem;
}

.grouped-session--scan .grouped-actions {
  margin-bottom: 0.4rem;
}

/* ── 116: o selo de evidência ──────────────────────────────────────────────
   Seleção e evidência são dimensões INDEPENDENTES. O realce do cartão continua
   dizendo "vai ser entregue"; o selo diz "foi conferido por leitura" — e os dois
   divergem legitimamente em `S \ D` (bipado e depois desmarcado).

   Classe própria, não `.badge`: aquela família carrega `font-weight: 700` e
   semântica de notificação. Aqui o peso é 600, abaixo do rastreio (700), porque
   o selo acompanha o código — não compete com ele.

   Fundo `--surface-0` em vez de `--success-bg`: o cartão selecionado JÁ pinta o
   próprio fundo de `--success-bg`, e um selo da mesma cor sumiria exatamente no
   estado mais comum. A cor vive na borda e no texto, que sobrevivem aos dois
   fundos.

   `align-self: flex-start` porque `.pickup-card-body` é flex COLUMN e o padrão
   `stretch` faria a pílula ocupar a largura inteira do cartão. */
.pickup-card-evidence {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.3rem;
  margin-top: 0.1rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--surface-0);
  color: var(--success);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  /* SEM `white-space: nowrap`, deliberadamente. Na coluna mínima da grade
     (`17rem`) o corpo mede 194 px e o selo mais longo mede 184 — 10 px de
     folga. Com `nowrap`, o que consumisse essa folga (fonte do sistema,
     tradução mais longa, zoom) faria a pílula atravessar a borda do cartão em
     vez de quebrar em duas linhas.

     PRECAUÇÃO, não correção de defeito observado: não consegui construir um
     transbordo alcançável nos viewports reais. A medição que sugeria transbordo
     foi tirada com o painel do navegador degradado (`innerWidth: 0`, grade
     colapsada a 255 px) e não valia. Um teste de contenção foi escrito e
     removido — a sonda mostrou que ele passava com `nowrap` de volta. */
}

/* Exceção INFORMADA (`Ō`): âmbar, o mesmo tom que o bloco de justificativa já
   usa. Cor diferente E texto diferente — a distinção não pode depender da cor
   sozinha (SC-001). */
.pickup-card-evidence--override {
  color: var(--warning);
}

/* 116/FR-013: na barra sticky o `min-height` do feedback deixa de ser proteção e
   vira custo. No bloco de leitura ele existia para a mensagem não empurrar a
   grade; aqui reservaria 44 px de área útil o tempo todo, com a tela sem nada a
   dizer.

   `display: contents` em vez de `min-height: 0`. Zerar a altura NÃO bastava: a
   barra é `display: grid` com `gap`, e um filho de altura zero continua criando
   uma LINHA e consumindo um gap — 11 px permanentes, invisíveis para uma
   asserção de altura. Sem caixa própria, os três parágrafos viram itens da
   grade: os ocultos não geram linha, e o ativo ganha a sua.

   O contêiner permanece no DOM e na árvore de acessibilidade; quem alterna é o
   `hidden` de cada parágrafo, exatamente como a 115 já fazia. */
.pickup-action-bar .pickup-scan-feedback {
  display: contents;
}

/* ── 116: o resumo de cobertura, dentro da barra de confirmação ────────────
   PRESO a `.pickup-action-bar`, nunca a `.scanner-action-bar`: aquela classe é
   compartilhada por outras quatro telas (conferência e scanner da
   administração, scanner da portaria, fila de transporte), e um vazamento ali
   NÃO seria pego por SC-006 — são todas de `apps/operations/`.

   Sem `display` próprio: o `<p>` já é bloco, e declarar `display` aqui faria a
   regra de autor vencer o `[hidden]` do navegador — o mesmo defeito que o selo
   teve, com o elemento visível desde o render e afirmando cobertura de uma
   seleção vazia. */
.pickup-action-bar .pickup-summary {
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border-0);
  border-radius: 5px;
  background: var(--surface-1);
  color: var(--ink-1);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Só o impeditivo veste alerta. Em `SCAN_ASSISTED` a divergência é informação
   legítima — entregar sem conferir é permitido por desenho —, e pintá-la de
   vermelho contradiria a copy neutra de FR-006. */
.pickup-action-bar .pickup-summary--blocked {
  border-color: var(--error);
  background: var(--error-bg);
  color: var(--error);
  font-weight: 600;
}

/* `[hidden]` é `display: none` na folha do NAVEGADOR, e qualquer `display` de
   autor vence por especificidade — sem esta linha o selo aparece em todos os
   cartões desde o primeiro render, afirmando conferência que não houve. Nenhum
   teste de markup pegaria: o atributo está lá, correto, e ignorado. */
.pickup-card-evidence[hidden] {
  display: none;
}

/* ── Feature 117 · Indicadores em seis blocos (cockpit) ─────────────────────
   Blocos: Agora, Precisa de atenção, Movimentações, Tempos, Distribuição,
   Detalhes. Reusa tokens/padrões da tela (metric-card, dist-bar, scope-chip);
   estas classes cobrem só o que é novo: o fluxo de etapas, os cartões de
   alerta com ação e a divulgação progressiva. */

.cockpit-now {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #dfe5eb);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.cockpit-now-top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cockpit-now-total { margin: 0; font-size: 1.05rem; }
.cockpit-now-off-flow { margin-left: .5rem; color: #b42318; font-weight: 700; }
.cockpit-now-help { margin: 0; color: var(--muted, #6f8196); font-size: .85rem; max-width: 34rem; }
.cockpit-flow { display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap; }
.cockpit-stage {
  flex: 1 1 10rem;
  min-width: 9rem;
  border: 1px solid var(--line, #dfe5eb);
  border-radius: 12px;
  background: #fbfcfd;
  padding: .9rem;
}
.cockpit-stage-count { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.cockpit-stage-name { font-weight: 700; margin-top: .15rem; }
.cockpit-stage-desc { color: var(--muted, #6f8196); font-size: .78rem; margin-top: .3rem; }
.cockpit-flow-arrow { align-self: center; color: #9aa8b8; font-size: 1.3rem; }

.cockpit-attention { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.cockpit-alert {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid #efc7ad; border-left: 4px solid #a44d16;
  background: #fff5ec; border-radius: 12px; padding: .8rem 1rem;
}
.cockpit-alert--error { border-color: #efc3bd; border-left-color: #b42318; background: #fff1ef; }
.cockpit-alert-title { font-weight: 700; }
.cockpit-alert-action { margin-left: auto; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.cockpit-attention-ok {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line, #dfe5eb); border-radius: 12px;
  background: #eaf6f2; color: #176b5d; font-weight: 700; padding: .8rem 1rem;
}

.cockpit-microcopy { color: var(--muted, #6f8196); font-size: .82rem; margin: 0 0 .8rem; }
.metric-card-desc { display: block; color: var(--muted, #6f8196); font-size: .75rem; margin-top: .2rem; }

.cockpit-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }
.cockpit-time {
  border: 1px solid var(--line, #dfe5eb); border-radius: 12px;
  background: var(--surface, #fff); padding: 1rem;
}
.cockpit-time--primary { border-left: 4px solid #0f8b7f; }
.cockpit-time-eyebrow { text-transform: uppercase; letter-spacing: .07em; font-size: .65rem; font-weight: 800; color: #71849a; }
.cockpit-time-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; margin: .3rem 0 .1rem; }
.cockpit-time-title { font-weight: 700; font-size: .9rem; }
.cockpit-time-help { color: var(--muted, #6f8196); font-size: .78rem; margin: .3rem 0 0; }
.cockpit-time-base { color: #8191a3; font-size: .72rem; margin: .6rem 0 0; padding-top: .5rem; border-top: 1px dashed #d9e0e7; }

.cockpit-pickup-split {
  border: 1px solid var(--line, #dfe5eb); border-radius: 12px;
  background: var(--surface, #fff); padding: 1rem; margin-top: .8rem; max-width: 22rem;
}
.cockpit-pickup-split-rows { list-style: none; margin: .5rem 0 0; padding: 0; }
.cockpit-pickup-split-rows li { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px dashed #d8e0e7; font-size: .85rem; }
.cockpit-pickup-split-rows li:last-child { border-bottom: 0; }
.cockpit-pickup-split-note { color: var(--muted, #6f8196); font-size: .72rem; margin: .5rem 0 0; }

.cockpit-details { border: 1px solid var(--line, #dfe5eb); border-radius: 12px; background: var(--surface, #fff); overflow: hidden; margin-bottom: 1.5rem; }
.cockpit-details > details { border-bottom: 1px solid var(--line, #dfe5eb); }
.cockpit-details > details:last-child { border-bottom: 0; }
.cockpit-details summary { cursor: pointer; padding: .9rem 1rem; font-weight: 700; }
.cockpit-details .cockpit-detail-body, .cockpit-details .table-wrap, .cockpit-details .reports-two-col { padding: 0 1rem 1rem; }
.cockpit-detail-scope { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #71849a; font-weight: 800; margin-left: .4rem; }

@media (max-width: 700px) {
  .cockpit-flow { flex-direction: column; }
  .cockpit-flow-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 1.2rem; }
}

/* 117 · linha de consequência do alerta: o operador entende POR QUE aquilo
   exige ação sem precisar de repertório do produto (FR-014). */
.cockpit-alert-text { display: flex; flex-direction: column; gap: .15rem; }
.cockpit-alert-help { font-size: .78rem; color: #6b5442; }
.cockpit-alert--error .cockpit-alert-help { color: #7a4038; }

/* ── Feature 117 · Relatório Mensal: leitura do mês e comparação visual ─────
   A manchete vira o elemento de maior peso do documento; as barras comparam
   os dois meses na MESMA escala (proporcional ao maior do par), para que uma
   piora grande apareça grande — o oposto da barra normalizada que saturava. */

.value-report-headline {
  font-size: 1.45rem;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: .25rem 0 .6rem;
}
.value-report-scope {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #71849a;
  font-weight: 800;
  margin-left: .45rem;
}
.value-report-base { color: #8191a3; font-size: .68rem; white-space: nowrap; }

.value-report-visual { margin-top: 1.4rem; }
.value-report-bargroup { margin-top: .9rem; }
.value-report-bargroup-title { font-weight: 800; font-size: .85rem; margin-bottom: .35rem; }
.value-report-barrow {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  align-items: center;
  gap: .6rem;
  margin-bottom: .3rem;
}
.value-report-barlabel { font-size: .75rem; color: #6f8196; }
.value-report-bartrack {
  height: .8rem;
  background: #edf1f4;
  border-radius: 999px;
  overflow: hidden;
}
.value-report-barfill { display: block; height: 100%; border-radius: 999px; background: #8fa3b7; }
.value-report-barfill--previous { background: #c3ccd6; }
.value-report-barfill--positive { background: #176b5d; }
.value-report-barfill--negative { background: #b86340; }
.value-report-barvalue { font-size: .8rem; font-weight: 800; white-space: nowrap; }
.value-report-visual-note { font-size: .72rem; color: #71849a; margin-top: .6rem; }

.value-report-issue-state-note { font-size: .78rem; color: #6f8196; margin: 0 0 .7rem; max-width: 46rem; }
.value-report-methodology summary { cursor: pointer; }
.value-report-methodology summary h3 { display: inline; }

@media print {
  /* Metodologia é obrigatória na peça impressa: recolhida na tela, aberta no
     papel — o leitor do PDF não tem como clicar para expandir. */
  .value-report-methodology details > ul { display: block !important; }
  .value-report-methodology summary { list-style: none; }
  .value-report-bargroup { break-inside: avoid; }
}

/* 117 · recebimentos por dia como barras: o padrão da semana aparece de
   relance, sem leitura célula a célula. A altura vem do pct já computado no
   servidor — sem biblioteca de gráfico. */
.cockpit-weekday {
  border: 1px solid var(--line, #dfe5eb);
  border-radius: 12px;
  background: var(--surface, #fff);
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.cockpit-weekday-title { font-weight: 850; margin-bottom: .8rem; }
.cockpit-weekday-bars {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  height: 9rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--line, #dfe5eb);
}
.cockpit-weekday-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.cockpit-weekday-count { font-size: .72rem; font-weight: 850; color: #53677e; margin-bottom: .2rem; }
.cockpit-weekday-bar {
  width: 100%;
  max-width: 2.6rem;
  min-height: 2px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #0f8b7f, #5db9ae);
}
.cockpit-weekday-label {
  font-size: .65rem;
  font-weight: 850;
  color: var(--muted, #6f8196);
  margin-top: .4rem;
}
.cockpit-weekday-note { font-size: .7rem; color: var(--muted, #6f8196); margin: .6rem 0 0; }
.cockpit-detail-benefit { margin: 0 0 .6rem; line-height: 1.5; }

/* 117 · etapa sem nenhuma encomenda continua visível — ela EXISTE no fluxo
   deste condomínio, e omiti-la faria o operador achar que a etapa sumiu — mas
   recua visualmente. O olho precisa pousar em onde as encomendas estão, não
   num zero. Contraste do texto preservado para leitura e impressão. */
.cockpit-stage--vazia { background: #f7f9fa; border-style: dashed; }
/* #9aa8b8 sobre #f7f9fa dava 2,29:1 — abaixo do mínimo de 3:1 até para texto
   grande. #6b7a8c sobre o mesmo fundo dá ~4,2:1: recua sem deixar de ser
   legível, que era a intenção declarada. */
.cockpit-stage--vazia .cockpit-stage-count { color: #6b7a8c; font-weight: 700; }

/* 117 · fecho da leitura do mês: TODAS as exceções da emissão, mas como lista
   curta. Enfileirá-las em prosa reintroduzia o "mar de números" no ponto mais
   lido do documento; truncá-las esconderia tipo e contagem numa prestação de
   contas. A lista resolve os dois. */
.value-report-exception-lead { margin: .8rem 0 .3rem; font-size: .82rem; color: #40556d; font-weight: 700; }
.value-report-exception-list { margin: 0; padding-left: 1.1rem; color: #40556d; font-size: .82rem; }
.value-report-exception-list li { margin: .15rem 0; }