/*
 * NOVARIS — camada canônica do Design System NV (nv-*)
 *
 * Situação atual: base.html e login.html aplicam .nv-ui ao <body> de todas
 * as telas ativas (MED, VET, Control Center, login). Esta folha é carregada
 * depois das camadas legadas; as regras `body.nv-ui <seletor legado>` têm a
 * mesma forma de especificidade dos temas antigos e vencem pela ordem de
 * carga documentada, sem depender de cascata acidental. As folhas legadas
 * seguem como implementação de compatibilidade, não como segundo Design
 * System (docs/DESIGN_SYSTEM.md).
 *
 * Origem: no UI Refresh 001 a camada foi opt-in por página piloto; o 002
 * amadureceu os pilotos e o 003 propagou a adoção a todo o produto. As
 * seções abaixo mantêm esses marcos apenas para rastrear a origem das regras.
 */

:root {
  --nv-ui-canvas: #f4f7f8;
  --nv-ui-surface: #ffffff;
  --nv-ui-surface-subtle: #f8fbfc;
  --nv-ui-border: #dbe5e9;
  --nv-ui-border-strong: #c7d7de;
  --nv-ui-text: #17324d;
  --nv-ui-text-secondary: #526b79;
  --nv-ui-text-muted: #708590;
  --nv-ui-primary: #0f5f78;
  --nv-ui-primary-hover: #0b4e64;
  --nv-ui-accent: #168b87;
  --nv-ui-success: #247a58;
  --nv-ui-success-soft: #e9f7f0;
  --nv-ui-warning: #9a680d;
  --nv-ui-warning-soft: #fff6e6;
  --nv-ui-danger: #b43d45;
  --nv-ui-danger-soft: #fff0f1;
  --nv-ui-info: #176a91;
  --nv-ui-info-soft: #eaf4f8;
  --nv-ui-space-1: 4px;
  --nv-ui-space-2: 8px;
  --nv-ui-space-3: 12px;
  --nv-ui-space-4: 16px;
  --nv-ui-space-5: 20px;
  --nv-ui-space-6: 24px;
  --nv-ui-space-8: 32px;
  --nv-ui-radius-sm: 8px;
  --nv-ui-radius-md: 12px;
  --nv-ui-radius-lg: 16px;
  --nv-ui-shadow: 0 1px 2px rgba(26, 61, 78, 0.05);
  /* --nv-ui-focus is the halo for text fields (box-shadow, paired with the
   * accent border); --nv-ui-focus-ring is the keyboard focus outline for
   * every other control, so it must be valid `outline` shorthand. */
  --nv-ui-focus: 0 0 0 3px rgba(22, 139, 135, 0.22);
  --nv-ui-focus-ring: 2px solid var(--nv-ui-accent);
}

/* Canonical shared accessibility and interaction guardrails.  These remain
 * global because legacy pages use the same controls; visual components stay
 * scoped under .nv-ui until a page is intentionally modernized.  This is the
 * single keyboard-focus rule: .nv-ui pages use it as well. */
:where(a, button, input, select, textarea):focus-visible {
  outline: var(--nv-ui-focus-ring);
  outline-offset: 2px;
}

:where(.btn, .icon-button, .nav-item, .global-search input, .page-search input, .searchbar input) {
  min-height: 36px;
}

.flash[role="alert"],
.flash[role="status"] {
  position: relative;
}

.flash[role="alert"]::before,
.flash[role="status"]::before {
  font-weight: 800;
  margin-right: 6px;
}

.flash[role="alert"]::before {
  content: "!";
}

.flash[role="status"]::before {
  content: "✓";
}

@media (max-width: 680px) {
  .page-head .actions,
  .section-head .actions {
    width: 100%;
  }

  .page-head .actions .btn,
  .section-head .actions .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid .field.full {
    grid-column: auto;
  }

  .inline-form {
    flex-wrap: wrap;
  }

  .inline-form .btn {
    flex: 1 1 auto;
  }

  .card {
    padding: 16px;
  }

  .table-wrap table {
    min-width: 620px;
  }

  .global-search {
    min-width: 0;
  }

  .topbar {
    gap: 8px;
  }
}

/* Em 360px a margem lateral precisa ser 8px em toda tela. Os temas legados
 * fixam o padding com seletores mais específicos (`body.system-refresh .content`,
 * `body.novaris-app .topbar`, `.content-flush`); o !important garante a margem sem
 * depender deles. Medido no navegador: sem ele, 118 combinações página x 360px mudam. */
@media (max-width: 360px) {
  .content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .topbar {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .metric-card {
    padding: 11px;
  }

  .metric-card strong {
    font-size: 20px;
  }
}

.nv-ui {
  color: var(--nv-ui-text);
  min-width: 0;
}

.nv-ui .nv-page-header {
  align-items: flex-start;
  border: 0;
  display: flex;
  gap: var(--nv-ui-space-6);
  justify-content: space-between;
  margin: 0 0 var(--nv-ui-space-6);
  padding: 0;
  position: static;
}

.nv-ui .nv-page-header::after {
  display: none;
}

.nv-ui .nv-page-header__copy {
  min-width: 0;
}

.nv-ui .nv-page-header__eyebrow {
  color: var(--nv-ui-accent);
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.25;
  margin-bottom: var(--nv-ui-space-1);
  text-transform: uppercase;
}

.nv-ui .nv-page-header h1 {
  color: var(--nv-ui-text);
  font-size: clamp(26px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin: 0;
}

body.system-refresh .nv-ui .nv-page-header__copy > p,
body.system-refresh .nv-ui .nv-section-heading p,
body.system-refresh .nv-ui .nv-admin-card p {
  color: var(--nv-ui-text-secondary);
  display: block;
  font-size: 14px;
  line-height: 1.5;
  margin: var(--nv-ui-space-2) 0 0;
  max-width: 720px;
}

.nv-ui .nv-page-header__actions,
.nv-ui .nv-toolbar__actions,
.nv-ui .nv-table-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nv-ui-space-2);
}

.nv-ui .nv-back-link {
  align-items: center;
  color: var(--nv-ui-text-secondary);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: var(--nv-ui-space-2);
  line-height: 1.35;
  margin: 0 0 var(--nv-ui-space-3);
}

.nv-ui .nv-back-link:hover {
  color: var(--nv-ui-primary);
}

.nv-ui .nv-back-link .icon {
  flex: 0 0 auto;
}

.nv-ui .nv-surface {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-lg);
  box-shadow: none;
  min-width: 0;
}

.nv-ui .nv-surface--table,
.nv-ui .nv-surface--master-list {
  overflow: hidden;
}

.nv-ui .nv-surface--table .nv-section-heading,
.nv-ui .nv-surface--master-list .nv-section-heading {
  margin: 0;
  padding: var(--nv-ui-space-5);
}

.nv-ui .nv-section-heading {
  align-items: flex-start;
  display: flex;
  gap: var(--nv-ui-space-4);
  justify-content: space-between;
  margin-bottom: var(--nv-ui-space-4);
}

.nv-ui .nv-section-heading h2,
.nv-ui .nv-section-heading h3 {
  color: var(--nv-ui-text);
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
}

.nv-ui .nv-section-heading__meta {
  color: var(--nv-ui-text-muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.nv-ui .nv-toolbar {
  align-items: center;
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-md);
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nv-ui-space-3);
  margin-bottom: var(--nv-ui-space-4);
  padding: var(--nv-ui-space-3);
}

.nv-ui .nv-toolbar__search {
  align-items: center;
  display: flex;
  flex: 1 1 280px;
  gap: var(--nv-ui-space-2);
  min-width: 0;
}

.nv-ui .nv-toolbar__search input {
  background: var(--nv-ui-surface-subtle);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-sm);
  color: var(--nv-ui-text);
  flex: 1;
  min-height: 40px;
  min-width: 0;
  padding: 8px 11px;
}

.nv-ui .nv-toolbar__search input:focus {
  border-color: var(--nv-ui-accent);
  box-shadow: var(--nv-ui-focus);
  outline: 0;
}

.nv-ui .nv-table-shell {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-lg);
  box-shadow: var(--nv-ui-shadow);
  max-width: 100%;
  overflow-x: auto;
}

.nv-ui .nv-table-shell--flush {
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--nv-ui-border);
  box-shadow: none;
}

.nv-ui .nv-data-table {
  border-collapse: collapse;
  min-width: 680px;
  width: 100%;
}

.nv-ui .nv-data-table th {
  background: var(--nv-ui-surface-subtle);
  border-bottom: 1px solid var(--nv-ui-border);
  color: var(--nv-ui-text-secondary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  padding: 13px 16px;
  text-align: left;
  text-transform: uppercase;
}

/* Agenda stays a dense operational table on larger screens. Keep the
 * short column labels intact instead of splitting words such as "Hora"
 * and "Profissional" while the shell can still scroll at constrained widths. */
.nv-ui.nv-page--agenda .agenda-table th {
  white-space: nowrap;
}

/* 002C: with dates kept whole and names no longer split mid-word, nine
 * columns only fit on wide screens. The day view never repeats the date the
 * toolbar and period label already show; Sala/Convênio appear once there is
 * room for them, and at intermediate widths the date of week/month rows
 * moves under the time (.agenda-row-date). */
.nv-ui.nv-page--agenda .agenda-table--med.agenda-table--day th:nth-child(1),
.nv-ui.nv-page--agenda .agenda-table--med.agenda-table--day td[data-label="Data"],
.nv-ui.nv-page--agenda .agenda-row-date {
  display: none;
}

@media (min-width: 821px) and (max-width: 1480px) {
  .nv-ui.nv-page--agenda .agenda-table--med th:nth-child(5),
  .nv-ui.nv-page--agenda .agenda-table--med td[data-label="Sala"],
  .nv-ui.nv-page--agenda .agenda-table--med th:nth-child(6),
  .nv-ui.nv-page--agenda .agenda-table--med td[data-label="Convênio"] {
    display: none;
  }
}

@media (min-width: 761px) and (max-width: 1280px) {
  .nv-ui.nv-page--agenda .agenda-table--med th:nth-child(1),
  .nv-ui.nv-page--agenda .agenda-table--med td[data-label="Data"] {
    display: none;
  }

  .nv-ui.nv-page--agenda .agenda-table--med:not(.agenda-table--day) .agenda-row-date {
    display: block;
  }
}

@media (min-width: 821px) and (max-width: 1280px) {
  .nv-ui.nv-page--agenda .agenda-table--med th:nth-child(7),
  .nv-ui.nv-page--agenda .agenda-table--med td[data-label="Procedimento"] {
    display: none;
  }

  .nv-ui.nv-page--agenda .agenda-table--med {
    min-width: 620px;
  }

  .nv-ui.nv-page--agenda .agenda-table--med th,
  .nv-ui.nv-page--agenda .agenda-table--med td {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (min-width: 1281px) and (max-width: 1536px) {
  .nv-ui.nv-page--agenda .agenda-table--med th,
  .nv-ui.nv-page--agenda .agenda-table--med td {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* At tablet portrait, the MED agenda keeps its compact tabular rhythm and
 * exposes the operational priorities instead of requiring a broad table
 * scroll: time, patient, professional, status, and actions. */
@media (min-width: 761px) and (max-width: 820px) {
  .nv-ui.nv-page--agenda .agenda-table--med {
    min-width: 620px;
  }

  .nv-ui.nv-page--agenda .agenda-table--med.agenda-table--day th:nth-child(1),
  .nv-ui.nv-page--agenda .agenda-table--med.agenda-table--day td[data-label="Data"],
  .nv-ui.nv-page--agenda .agenda-table--med th:nth-child(5),
  .nv-ui.nv-page--agenda .agenda-table--med td[data-label="Sala"],
  .nv-ui.nv-page--agenda .agenda-table--med th:nth-child(6),
  .nv-ui.nv-page--agenda .agenda-table--med td[data-label="Convênio"],
  .nv-ui.nv-page--agenda .agenda-table--med th:nth-child(7),
  .nv-ui.nv-page--agenda .agenda-table--med td[data-label="Procedimento"] {
    display: none;
  }

  .nv-ui.nv-page--agenda .agenda-table--med th,
  .nv-ui.nv-page--agenda .agenda-table--med td {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.nv-ui .nv-data-table td {
  border-bottom: 1px solid #e8eef0;
  color: var(--nv-ui-text-secondary);
  font-size: 14px;
  line-height: 1.45;
  padding: 14px 16px;
  vertical-align: middle;
}

.nv-ui .nv-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.nv-ui .nv-data-table tbody tr:hover {
  background: #fbfdfd;
}

.nv-ui .nv-data-table td strong,
.nv-ui .nv-data-table td a:not(.btn) {
  color: var(--nv-ui-text);
}

.nv-ui .nv-table-actions {
  justify-content: flex-end;
  white-space: nowrap;
}

.nv-ui .nv-status {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  gap: 4px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding: 5px 10px;
  white-space: nowrap;
}

.nv-ui .nv-status--success {
  background: var(--nv-ui-success-soft);
  border-color: #ccebdc;
  color: var(--nv-ui-success);
}

.nv-ui .nv-status--warning {
  background: var(--nv-ui-warning-soft);
  border-color: #f0deac;
  color: var(--nv-ui-warning);
}

.nv-ui .nv-status--danger {
  background: var(--nv-ui-danger-soft);
  border-color: #f0cdd0;
  color: var(--nv-ui-danger);
}

.nv-ui .nv-status--info {
  background: var(--nv-ui-info-soft);
  border-color: #c8e1eb;
  color: var(--nv-ui-info);
}

.nv-ui .nv-status--neutral {
  background: #f0f4f5;
  border-color: #dce5e7;
  color: #5c717a;
}

.nv-ui .nv-empty {
  color: var(--nv-ui-text-muted);
  padding: var(--nv-ui-space-8) var(--nv-ui-space-5);
  text-align: center;
}

.nv-ui .nv-empty strong,
.nv-ui .nv-empty span {
  display: block;
}

.nv-ui .nv-empty strong {
  color: var(--nv-ui-text);
  font-size: 15px;
  margin-bottom: var(--nv-ui-space-1);
}

/* Administração: cartões organizados por domínio, não uma lista indiferenciada. */
.nv-ui .nv-admin-group + .nv-admin-group {
  margin-top: var(--nv-ui-space-8);
}

.nv-ui .nv-admin-group__heading {
  align-items: baseline;
  display: flex;
  gap: var(--nv-ui-space-3);
  justify-content: space-between;
  margin-bottom: var(--nv-ui-space-3);
}

.nv-ui .nv-admin-group__heading h2 {
  color: var(--nv-ui-text);
  font-size: 15px;
  letter-spacing: -0.015em;
  margin: 0;
}

.nv-ui .nv-admin-group__heading span {
  color: var(--nv-ui-text-muted);
  font-size: 12px;
}

.nv-ui .nv-admin-grid {
  display: grid;
  gap: var(--nv-ui-space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nv-ui .nv-admin-card {
  align-items: flex-start;
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-md);
  box-shadow: none;
  color: var(--nv-ui-text);
  display: grid;
  gap: var(--nv-ui-space-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 124px;
  padding: var(--nv-ui-space-4);
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.nv-ui .nv-admin-card:hover {
  background: var(--nv-ui-surface-subtle);
  border-color: #a8cbd1;
  color: var(--nv-ui-text);
}

.nv-ui .nv-admin-card h3 {
  color: var(--nv-ui-text);
  font-size: 15px;
  letter-spacing: -0.01em;
  margin: 0;
}

.nv-ui .nv-admin-card > .icon:last-child {
  color: var(--nv-ui-text-muted);
  margin-top: 2px;
}

.nv-ui .nv-admin-icon {
  align-items: center;
  background: #eaf6f5;
  border-radius: var(--nv-ui-radius-sm);
  color: var(--nv-ui-primary);
  display: flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.nv-ui .nv-create-disclosure {
  position: relative;
}

.nv-ui .nv-create-disclosure > summary,
.nv-ui .nv-record-editor > summary {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  gap: var(--nv-ui-space-2);
  list-style: none;
}

.nv-ui .nv-create-disclosure > summary::-webkit-details-marker,
.nv-ui .nv-record-editor > summary::-webkit-details-marker {
  display: none;
}

.nv-ui .nv-create-disclosure > summary {
  background: var(--nv-ui-primary);
  border: 1px solid var(--nv-ui-primary);
  border-radius: var(--nv-ui-radius-sm);
  color: #fff;
  font-size: 13px;
  min-height: 40px;
  padding: 9px 13px;
}

.nv-ui .nv-create-disclosure > summary:hover {
  background: var(--nv-ui-primary-hover);
  border-color: var(--nv-ui-primary-hover);
}

.nv-ui .nv-create-disclosure__panel {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border-strong);
  border-radius: var(--nv-ui-radius-md);
  box-shadow: 0 10px 24px rgba(26, 61, 78, 0.12);
  margin-top: var(--nv-ui-space-2);
  padding: var(--nv-ui-space-4);
  position: absolute;
  right: 0;
  width: min(420px, calc(100vw - 48px));
  z-index: 4;
}

.nv-ui .nv-form-section__header {
  margin-bottom: var(--nv-ui-space-4);
}

.nv-ui .nv-form-section__header h2 {
  color: var(--nv-ui-text);
  font-size: 17px;
  margin: 0;
}

.nv-ui .nv-form-section__header p {
  color: var(--nv-ui-text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: var(--nv-ui-space-1) 0 0;
}

.nv-ui .nv-form-grid {
  display: grid;
  gap: var(--nv-ui-space-3) var(--nv-ui-space-4);
  grid-template-columns: minmax(0, 1fr) minmax(100px, 0.34fr);
}

.nv-ui .nv-form-grid .field,
.nv-ui .nv-check-field {
  min-width: 0;
}

.nv-ui .nv-form-grid .field label {
  color: var(--nv-ui-text-secondary);
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 5px;
}

.nv-ui .nv-form-grid .field input {
  background: var(--nv-ui-surface-subtle);
  border: 1px solid var(--nv-ui-border-strong);
  border-radius: var(--nv-ui-radius-sm);
  color: var(--nv-ui-text);
  min-height: 40px;
  padding: 8px 10px;
  width: 100%;
}

.nv-ui .nv-form-grid .field input:focus {
  border-color: var(--nv-ui-accent);
  box-shadow: var(--nv-ui-focus);
  outline: 0;
}

.nv-ui .nv-field--full {
  grid-column: 1 / -1;
}

.nv-ui .nv-form-actions {
  align-items: end;
  display: flex;
  justify-content: flex-end;
}

.nv-ui .nv-check-field {
  align-items: center;
  color: var(--nv-ui-text-secondary);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: var(--nv-ui-space-2);
  min-height: 40px;
}

.nv-ui .nv-master-list {
  border-top: 1px solid var(--nv-ui-border);
}

.nv-ui .nv-master-record {
  align-items: center;
  display: grid;
  gap: var(--nv-ui-space-4);
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: var(--nv-ui-space-4) var(--nv-ui-space-5);
}

.nv-ui .nv-master-record + .nv-master-record {
  border-top: 1px solid #e8eef0;
}

.nv-ui .nv-master-record__copy h3 {
  color: var(--nv-ui-text);
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
}

.nv-ui .nv-master-record__copy p {
  color: var(--nv-ui-text-secondary);
  font-size: 13px;
  line-height: 1.45;
  margin: var(--nv-ui-space-1) 0 0;
}

.nv-ui .nv-master-record__meta {
  align-items: center;
  display: flex;
  gap: var(--nv-ui-space-2);
}

.nv-ui .nv-order {
  color: var(--nv-ui-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.nv-ui .nv-record-editor {
  justify-self: end;
}

.nv-ui .nv-record-editor > summary {
  border: 1px solid var(--nv-ui-border-strong);
  border-radius: var(--nv-ui-radius-sm);
  color: var(--nv-ui-primary);
  font-size: 13px;
  min-height: 36px;
  padding: 7px 10px;
}

.nv-ui .nv-record-editor > summary:hover {
  background: var(--nv-ui-surface-subtle);
  border-color: #a8cbd1;
}

.nv-ui .nv-record-editor[open] {
  grid-column: 1 / -1;
  justify-self: stretch;
}

.nv-ui .nv-record-editor[open] > summary {
  margin-bottom: var(--nv-ui-space-3);
}

.nv-ui .nv-record-editor .nv-form-grid {
  background: var(--nv-ui-surface-subtle);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-md);
  padding: var(--nv-ui-space-4);
}

/* Agenda stays dense enough for daily operation, with a compact control bar. */
.nv-ui .nv-agenda-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nv-ui-space-3);
}

.nv-ui .nv-segmented {
  background: var(--nv-ui-surface-subtle);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-sm);
  display: inline-flex;
  gap: var(--nv-ui-space-1);
  padding: var(--nv-ui-space-1);
}

.nv-ui .nv-segmented a {
  border-radius: 6px;
  color: var(--nv-ui-text-secondary);
  font-size: 12px;
  font-weight: 750;
  padding: 8px 12px;
}

.nv-ui .nv-segmented a.active {
  background: var(--nv-ui-primary);
  color: #fff;
}

.nv-ui .nv-agenda-toolbar form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nv-ui-space-2);
}

.nv-ui .nv-agenda-toolbar label,
.nv-ui .nv-agenda-period {
  color: var(--nv-ui-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.nv-ui .nv-agenda-toolbar input {
  border: 1px solid var(--nv-ui-border-strong);
  border-radius: var(--nv-ui-radius-sm);
  min-height: 38px;
  padding: 7px 9px;
}

.nv-ui .nv-agenda-range {
  margin-left: auto;
}

.nv-ui .nv-agenda-period {
  margin: 0 0 var(--nv-ui-space-3);
}

/* Encounter/PEP is intentionally a clinical variant, not an administration card grid. */
.nv-ui.nv-page--encounter .encounter-hero {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-lg);
  box-shadow: none;
  padding: var(--nv-ui-space-5) var(--nv-ui-space-6);
}

.nv-ui.nv-page--encounter .detail-title h1,
.nv-ui.nv-page--encounter .clinical-card h3,
.nv-ui.nv-page--encounter .clinical-card .section-head h3 {
  color: var(--nv-ui-text);
}

.nv-ui.nv-page--encounter .detail-title .subtitle,
.nv-ui.nv-page--encounter .clinical-card .muted,
.nv-ui.nv-page--encounter .clinical-card .section-head p {
  color: var(--nv-ui-text-secondary);
}

/* clinical-workspace.css esconde `.section-head > div > p` com display:none!important;
 * o !important aqui só desfaz aquele. */
body.system-refresh .nv-ui.nv-page--encounter .clinical-card .section-head > div > p {
  display: block !important;
}

.nv-ui.nv-page--encounter .clinical-card {
  border-color: var(--nv-ui-border);
  box-shadow: none;
}

.nv-ui.nv-page--encounter .vital-card {
  background: var(--nv-ui-surface);
}

.nv-ui.nv-page--encounter .vital-summary-grid > div,
.nv-ui.nv-page--encounter .prescription-summary-list article {
  background: var(--nv-ui-surface-subtle);
  border-color: var(--nv-ui-border);
  box-shadow: none;
}

.nv-ui.nv-page--encounter .card-title-accent::before {
  background: #eaf6f5;
  color: var(--nv-ui-primary);
}

@media (max-width: 1120px) {
  .nv-ui .nv-admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .nv-ui .nv-page-header {
    flex-direction: column;
    gap: var(--nv-ui-space-4);
  }

  .nv-ui .nv-page-header__actions,
  .nv-ui .nv-page-header__actions .btn {
    width: 100%;
  }

  .nv-ui .nv-page-header__actions .btn {
    flex: 1 1 100%;
  }

  .nv-ui .nv-toolbar,
  .nv-ui .nv-toolbar__search,
  .nv-ui .nv-toolbar__actions,
  .nv-ui .nv-agenda-toolbar,
  .nv-ui .nv-agenda-toolbar form {
    align-items: stretch;
    width: 100%;
  }

  .nv-ui .nv-toolbar__search,
  .nv-ui .nv-agenda-toolbar,
  .nv-ui .nv-agenda-toolbar form {
    flex-direction: column;
  }

  .nv-ui .nv-toolbar__actions .btn,
  .nv-ui .nv-agenda-toolbar .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .nv-ui .nv-agenda-range {
    margin-left: 0;
  }

  .nv-ui .nv-admin-grid {
    grid-template-columns: 1fr;
  }

  .nv-ui .nv-admin-card {
    min-height: 0;
  }

  .nv-ui .nv-section-heading {
    flex-direction: column;
    gap: var(--nv-ui-space-1);
  }

  .nv-ui .nv-section-heading__meta {
    white-space: normal;
  }

  .nv-ui .nv-create-disclosure,
  .nv-ui .nv-create-disclosure > summary {
    width: 100%;
  }

  .nv-ui .nv-create-disclosure__panel {
    box-shadow: none;
    position: static;
    width: auto;
  }

  .nv-ui .nv-form-grid {
    grid-template-columns: 1fr;
  }

  .nv-ui .nv-field--full {
    grid-column: auto;
  }

  .nv-ui .nv-form-actions {
    justify-content: stretch;
  }

  .nv-ui .nv-form-actions .btn {
    width: 100%;
  }

  .nv-ui .nv-master-record {
    align-items: stretch;
    gap: var(--nv-ui-space-3);
    grid-template-columns: 1fr;
    padding: var(--nv-ui-space-4);
  }

  .nv-ui .nv-master-record__meta {
    justify-content: space-between;
  }

  .nv-ui .nv-record-editor {
    justify-self: stretch;
  }

  .nv-ui .nv-record-editor > summary {
    justify-content: center;
    width: 100%;
  }

  .nv-ui .nv-data-table--stacked {
    min-width: 0;
  }

  .nv-ui .nv-data-table--stacked thead {
    display: none;
  }

  .nv-ui .nv-data-table--stacked,
  .nv-ui .nv-data-table--stacked tbody,
  .nv-ui .nv-data-table--stacked tr,
  .nv-ui .nv-data-table--stacked td {
    display: block;
    width: 100%;
  }

  .nv-ui .nv-data-table--stacked tr {
    border-bottom: 1px solid var(--nv-ui-border);
    padding: var(--nv-ui-space-3) var(--nv-ui-space-4);
  }

  .nv-ui .nv-data-table--stacked tr:last-child {
    border-bottom: 0;
  }

  .nv-ui .nv-data-table--stacked td {
    align-items: baseline;
    border: 0;
    display: grid;
    gap: var(--nv-ui-space-2);
    grid-template-columns: minmax(96px, 0.72fr) minmax(0, 1.28fr);
    padding: 6px 0;
  }

  .nv-ui .nv-data-table--stacked td[colspan] {
    display: block;
    padding: 0;
  }

  .nv-ui .nv-data-table--stacked td::before {
    color: var(--nv-ui-text-muted);
    content: attr(data-label);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .nv-ui .nv-data-table--stacked td[colspan]::before {
    display: none;
  }

  .nv-ui .nv-data-table--stacked td[data-label="Ações"] {
    display: block;
    padding-top: var(--nv-ui-space-3);
  }

  .nv-ui .nv-data-table--stacked td[data-label="Ações"]::before {
    display: none;
  }

  .nv-ui .nv-table-actions {
    justify-content: flex-start;
    white-space: normal;
  }

  .nv-ui.nv-page--agenda .agenda-table--day td[data-label="Data"],
  .nv-ui.nv-page--agenda .agenda-table td[data-label="Sala"],
  .nv-ui.nv-page--agenda .agenda-table td[data-label="Convênio"],
  .nv-ui.nv-page--agenda .agenda-table td[data-label="Procedimento"],
  .nv-ui.nv-page--agenda .agenda-table td[data-label="Motivo"] {
    display: none;
  }

  .nv-ui.nv-page--agenda .agenda-table td[data-label="Hora"] strong,
  .nv-ui.nv-page--patients .nv-data-table--stacked td[data-label="Paciente"] strong {
    color: var(--nv-ui-text);
    font-size: 15px;
  }

  .nv-ui.nv-page--agenda .agenda-table td[data-label="Ações"] {
    padding-top: var(--nv-ui-space-2);
  }

  .nv-ui.nv-page--encounter .encounter-hero {
    padding: var(--nv-ui-space-4);
  }
}

/*
 * NOVARIS UI Refresh 002 — visual refinement pass (pilot components below).
 */

/*
 * Sistema de botões canônico (UI Refresh 003). base.html aplica .nv-ui ao
 * <body>, então estas regras valem para todos os botões do produto. As folhas
 * legadas (layout.css, depth.css, clinical-workspace.css) estilizam .btn-* com
 * `body.novaris-app`/`body.system-refresh` (especificidade 0,2,1); `body.nv-ui`
 * tem a mesma especificidade e vence pela ordem documentada de carregamento
 * (novaris-ui.css é a última folha) — sem a classe duplicada `.nv-ui.nv-ui` da
 * fase de pilotos e sem !important.
 */
body.nv-ui .btn {
  border: 1px solid transparent;
  border-radius: var(--nv-ui-radius-sm);
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  gap: var(--nv-ui-space-2);
  letter-spacing: 0;
  min-height: 38px;
  padding: 8px 14px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

body.nv-ui .btn:hover {
  filter: none;
  transform: none;
}

body.nv-ui .btn-primary {
  background: var(--nv-ui-primary);
  border-color: var(--nv-ui-primary);
  box-shadow: 0 1px 2px rgba(15, 61, 84, .16), 0 6px 14px rgba(15, 95, 120, .16);
  color: #fff;
}

body.nv-ui .btn-primary:hover {
  background: var(--nv-ui-primary-hover);
  border-color: var(--nv-ui-primary-hover);
  color: #fff;
}

body.nv-ui .btn-primary:active {
  box-shadow: 0 1px 2px rgba(15, 61, 84, .16);
}

body.nv-ui .btn-secondary,
body.nv-ui .btn-soft {
  background: var(--nv-ui-surface-subtle);
  border-color: var(--nv-ui-border-strong);
  box-shadow: none;
  color: var(--nv-ui-primary);
}

body.nv-ui .btn-secondary:hover,
body.nv-ui .btn-soft:hover {
  background: #eaf4f4;
  border-color: #a8cbd1;
  color: var(--nv-ui-primary);
}

body.nv-ui .btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--nv-ui-text-secondary);
}

body.nv-ui .btn-ghost:hover {
  background: var(--nv-ui-surface-subtle);
  color: var(--nv-ui-text);
}

body.nv-ui .btn-danger {
  background: var(--nv-ui-danger-soft);
  border-color: #f0cdd0;
  box-shadow: none;
  color: var(--nv-ui-danger);
}

body.nv-ui .btn-danger:hover {
  background: #fbdfe1;
  border-color: #e9b9be;
  color: var(--nv-ui-danger);
}

/* Confirmação positiva que é a ação principal do contexto (receber, quitar,
 * registrar alta, administrar): mesmo peso do primário, na cor de sucesso.
 * Alertas operacionais (btn-warning) mantêm peso de ação secundária. */
body.nv-ui .btn-success {
  background: var(--nv-ui-success);
  border-color: var(--nv-ui-success);
  box-shadow: 0 1px 2px rgba(20, 70, 50, .16);
  color: #fff;
}

body.nv-ui .btn-success:hover {
  background: #1d6649;
  border-color: #1d6649;
  color: #fff;
}

body.nv-ui .btn-warning {
  background: var(--nv-ui-warning-soft);
  border-color: #f0deac;
  box-shadow: none;
  color: var(--nv-ui-warning);
}

body.nv-ui .btn-warning:hover {
  background: #fdeccb;
  color: var(--nv-ui-warning);
}

body.nv-ui .btn-sm {
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  min-height: 32px;
  padding: 6px 11px;
}

body.nv-ui .btn-lg {
  font-size: 14px;
  min-height: 44px;
  padding: 11px 18px;
}

/* app.css pinta `.btn-disabled` com background, borda, cor e sombra em !important;
 * os !important aqui só desfazem aquele e mantêm `[disabled]` igual. */
.nv-ui .btn[disabled],
.nv-ui .btn-disabled {
  background: #eef1f2 !important;
  border-color: #e3e8ea !important;
  box-shadow: none !important;
  color: var(--nv-ui-text-muted) !important;
}

/* Administração: densidade um pouco maior e um marcador por grupo, em vez
 * do mesmo ícone-e-cor repetidos nos quatro grupos. */
.nv-ui .nv-admin-card {
  min-height: 104px;
}

.nv-ui .nv-admin-card:hover {
  box-shadow: 0 8px 20px rgba(15, 61, 84, .08);
  transform: translateY(-1px);
}

.nv-ui .nv-admin-card p {
  color: var(--nv-ui-text-secondary);
  font-size: 12.5px;
  line-height: 1.5;
}

.nv-ui .nv-admin-icon {
  border-radius: 9px;
  height: 34px;
  width: 34px;
}

.nv-ui .nv-admin-group:nth-of-type(2) .nv-admin-icon {
  background: var(--nv-ui-info-soft);
  color: var(--nv-ui-info);
}

.nv-ui .nv-admin-group:nth-of-type(3) .nv-admin-icon {
  background: var(--nv-ui-warning-soft);
  color: var(--nv-ui-warning);
}

.nv-ui .nv-admin-group:nth-of-type(4) .nv-admin-icon {
  background: var(--nv-ui-success-soft);
  color: var(--nv-ui-success);
}

/* Agenda: o seletor de visão e o atalho de data formam um único grupo;
 * o período personalizado vira um filtro avançado recolhido por padrão. */
.nv-ui .nv-agenda-toolbar {
  justify-content: space-between;
}

.nv-ui .nv-agenda-toolbar__primary {
  align-items: center;
  background: var(--nv-ui-surface-subtle);
  border-radius: var(--nv-ui-radius-sm);
  display: flex;
  gap: var(--nv-ui-space-3);
  padding: var(--nv-ui-space-1);
}

.nv-ui .nv-agenda-jump {
  align-items: center;
  border-left: 1px solid var(--nv-ui-border);
  display: flex;
  gap: var(--nv-ui-space-2);
  padding-left: var(--nv-ui-space-3);
}

.nv-ui .nv-agenda-jump .icon {
  color: var(--nv-ui-text-muted);
  flex: 0 0 auto;
}

.nv-ui .nv-agenda-jump input {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border-strong);
  border-radius: 7px;
  min-height: 32px;
  padding: 5px 8px;
}

.nv-ui .nv-agenda-filter {
  margin-left: auto;
}

.nv-ui .nv-agenda-filter > summary {
  align-items: center;
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border-strong);
  border-radius: var(--nv-ui-radius-sm);
  color: var(--nv-ui-text-secondary);
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  min-height: 36px;
  padding: 7px 12px;
}

.nv-ui .nv-agenda-filter > summary:hover {
  border-color: #a8cbd1;
  color: var(--nv-ui-text);
}

.nv-ui .nv-agenda-filter > summary .icon {
  transition: transform .15s ease;
}

.nv-ui .nv-agenda-filter[open] > summary .icon {
  transform: rotate(90deg);
}

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

/* Ação terciária de linha (Reagendar) agrupada em um pequeno menu, em vez
 * de competir visualmente com Check-in / Atender / WhatsApp / Editar. */
.nv-ui .nv-row-more {
  display: inline-block;
  position: relative;
}

.nv-ui .nv-row-more > summary {
  align-items: center;
  border: 1px solid var(--nv-ui-border-strong);
  border-radius: 7px;
  color: var(--nv-ui-text-secondary);
  display: inline-flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.nv-ui .nv-row-more > summary:hover {
  background: var(--nv-ui-surface-subtle);
  border-color: #a8cbd1;
}

.nv-ui .nv-row-more > summary .icon {
  transform: rotate(90deg);
}

.nv-ui .nv-row-more[open] > summary .icon {
  transform: rotate(-90deg);
}

.nv-ui .nv-row-more__panel {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border-strong);
  border-radius: var(--nv-ui-radius-sm);
  box-shadow: 0 10px 24px rgba(26, 61, 78, .14);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 4px;
  position: absolute;
  right: 0;
  top: 100%;
  width: max-content;
  z-index: 5;
}

.nv-ui .nv-row-more__panel .btn {
  justify-content: flex-start;
  width: 100%;
}

/* Estado vazio: um marcador discreto em vez de apenas duas linhas de texto
 * soltas no meio de uma superfície em branco. */
.nv-ui .nv-empty {
  padding: 56px var(--nv-ui-space-5);
}

.nv-ui .nv-empty::before {
  background: var(--nv-ui-surface-subtle);
  border: 1px solid var(--nv-ui-border);
  border-radius: 50%;
  content: "";
  display: block;
  height: 44px;
  margin: 0 auto var(--nv-ui-space-3);
  width: 44px;
}

/* Busca de pacientes: o ícone reforça que a busca é a ação principal da
 * tela, não um campo solto dentro de uma caixa genérica. */
.nv-ui .nv-toolbar__search > .icon {
  color: var(--nv-ui-text-muted);
  flex: 0 0 auto;
}

.nv-ui .nv-toolbar__search input {
  min-height: 42px;
}

/* PEP: sinais vitais como pequenos chips de dado, sem caixa dentro de caixa. */
.nv-ui.nv-page--encounter .vital-summary-grid > div {
  border-radius: var(--nv-ui-radius-sm);
}

.nv-ui.nv-page--encounter .clinical-card > h3,
.nv-ui.nv-page--encounter .clinical-card .section-head h3 {
  font-size: 15px;
  letter-spacing: -.01em;
}

/* Passagem de responsividade (002B): entre ~820px e 1100px, tabelas com
 * colunas curtas (datas, documentos) quebravam o cabeçalho em duas linhas e
 * derrubavam "Editar" para uma segunda linha dentro da célula de ações — a
 * tabela tinha largura suficiente (min-width 680px), mas o layout automático
 * de colunas do navegador distribuía mal esse espaço. Cabeçalho sem quebra
 * força uma largura de coluna coerente com o rótulo; ações sem flex-wrap
 * (a regra que soma nv-page-header__actions/nv-toolbar__actions/
 * nv-table-actions foi escrita pensando em grupos de botões do cabeçalho,
 * não em uma célula estreita) deixam a rolagem horizontal do
 * nv-table-shell resolver o caso realmente apertado, em vez de quebrar
 * visualmente. */
.nv-ui .nv-data-table th {
  white-space: nowrap;
}

.nv-ui .nv-table-actions {
  flex-wrap: nowrap;
}

@media (max-width: 760px) {
  .nv-ui .nv-table-actions {
    flex-wrap: wrap;
  }

  .nv-ui .nv-agenda-toolbar__primary,
  .nv-ui .nv-agenda-filter {
    width: 100%;
  }

  .nv-ui .nv-agenda-toolbar__primary {
    flex-wrap: wrap;
  }

  .nv-ui .nv-agenda-jump {
    border-left: 0;
    flex: 1 1 100%;
    padding-left: 0;
  }

  .nv-ui .nv-agenda-jump input {
    flex: 1;
  }

  .nv-ui .nv-agenda-filter > summary {
    justify-content: center;
    width: 100%;
  }

  .nv-ui .nv-agenda-filter .nv-form-grid {
    grid-template-columns: 1fr;
  }

  .nv-ui .nv-row-more__panel {
    left: 0;
    right: auto;
  }
}

/*
 * NOVARIS UI Refresh 002C — fechamento cirúrgico dos pilotos
 */

/* Valores atômicos (CPF, telefone, datas, horários) não quebram no meio:
 * app.css aplica `overflow-wrap: anywhere` às células para conter texto
 * livre, o que partia "038.508.090-56" e "28/09/2026" em duas linhas. */
.nv-ui .nv-data-table .nv-cell-atomic {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Texto livre nas tabelas quebra entre palavras. `anywhere` também reduz a
 * largura mínima da coluna a um caractere, e o layout automático da tabela
 * passava a partir nomes no meio ("leyedeck-er"); `break-word` só parte uma
 * palavra que realmente não cabe. */
.nv-ui .nv-data-table td,
.nv-ui .nv-data-table td * {
  overflow-wrap: break-word;
}

/* Linha secundária dentro de uma célula (ex.: nascimento sob o nome). */
.nv-ui .nv-cell-meta {
  color: var(--nv-ui-text-muted);
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
}

/* Pacientes em largura intermediária: com CPF e telefone inteiros, seis
 * colunas espremem o nome. Nascimento passa para a linha secundária do
 * paciente; a ordem de leitura fica Paciente, CPF, Telefone, Alergias, Ações. */
.nv-ui.nv-page--patients .nv-patient-birth {
  display: none;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .nv-ui.nv-page--patients .nv-data-table th:nth-child(2),
  .nv-ui.nv-page--patients .nv-data-table td[data-label="Nascimento"] {
    display: none;
  }

  .nv-ui.nv-page--patients .nv-patient-birth {
    display: block;
  }
}

/* Header de página: o grupo de ações é uma unidade e nunca quebra por
 * acaso; quem cede espaço é o texto de apoio. No celular a quebra é
 * deliberada: ações auxiliares dividem uma linha e a principal ocupa a
 * largura toda logo abaixo. */
.nv-ui .nv-page-header__copy {
  flex: 1 1 auto;
}

.nv-ui .nv-page-header__actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

/* Busca da topbar: é a busca global de pacientes, disponível em qualquer
 * tela, e não deve competir com o filtro local das listas. Menor, sem
 * borda própria, e sem a segunda caixa que `body.system-refresh input`
 * desenhava dentro do campo. */
body.novaris-app .topbar .global-search {
  background: #eef3f5;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  flex: 0 1 420px;
  height: 38px;
  max-width: 420px;
  width: auto;
}

body.novaris-app .topbar .global-search:focus-within {
  background: var(--nv-ui-surface);
  border-color: var(--nv-ui-accent);
  box-shadow: var(--nv-ui-focus);
}

body.novaris-app .topbar .global-search input {
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 13px;
  min-height: 0;
  padding: 0;
}

body.novaris-app .topbar .global-search input::placeholder {
  color: var(--nv-ui-text-muted);
}

/* 002D — menu mobile: `body.novaris-app .topbar .icon-button` (layout.css)
 * pinta o ícone de branco para a topbar escura antiga; com a topbar clara do
 * system refresh o ícone (stroke=currentColor) ficava invisível, e o hover
 * legado (branco translúcido) também. `.novaris-app.nv-ui` cobre todas as
 * telas com a topbar clara (inclusive a internação VET) e supera a regra
 * legada por especificidade (0,4,1 > 0,3,1), sem depender da ordem das folhas. O foco usa o anel
 * canônico de :focus-visible. */
body.novaris-app.nv-ui .topbar .mobile-menu {
  color: var(--nv-ui-text);
}

body.novaris-app.nv-ui .topbar .mobile-menu:hover {
  background: var(--nv-ui-surface-subtle);
  box-shadow: inset 0 0 0 1px var(--nv-ui-border);
  color: var(--nv-ui-primary);
}

body.novaris-app.nv-ui .topbar .mobile-menu:active {
  background: var(--nv-ui-border);
}

@media (max-width: 760px) {
  .nv-ui .nv-data-table--stacked td > .nv-cell-meta {
    grid-column: 2;
  }

  /* Filtro local: ícone e campo na mesma linha, botão inteiro abaixo —
   * em coluna o ícone ficava sozinho numa linha acima do campo. */
  .nv-ui .nv-toolbar__search {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .nv-ui .nv-toolbar__search > .icon {
    align-self: center;
  }

  .nv-ui .nv-toolbar__search > .btn {
    flex: 1 1 100%;
  }

  .nv-ui .nv-page-header__actions {
    flex-wrap: wrap;
  }

  .nv-ui .nv-page-header__actions .btn {
    flex: 1 1 0;
  }

  .nv-ui .nv-page-header__actions .btn-primary {
    flex-basis: 100%;
  }
}

/* ==========================================================================
 * NOVARIS UI Refresh 003 — convergência visual global
 *
 * base.html aplica .nv-ui ao <body> de todas as telas do produto (exceto a
 * tela de internação VET, que mantém seu design especializado). As telas
 * ainda escritas com as primitivas legadas (page-head, card, section-head,
 * table-wrap, field, badge, metric, human-form-*, cc-*) são aproximadas da
 * gramática nv-* aqui, sem renomeação mecânica de classes.
 *
 * Especificidade: os temas legados usam `body.novaris-app X` e
 * `body.system-refresh X` e vencem uns aos outros pela ordem das folhas. Esta
 * camada usa a mesma forma (`body.nv-ui X`) e é a última folha carregada
 * (ordem documentada em DESIGN_SYSTEM.md). Os poucos !important abaixo só
 * desfazem !important legados e estão comentados no próprio ponto.
 * ======================================================================== */

/* ---- Shell: sidebar ---------------------------------------------------- */

body.nv-ui .sidebar {
  background: linear-gradient(180deg, #0f3551 0%, #0b2a40 100%);
  border-right: 0;
  box-shadow: none;
}

body.nv-ui .brand-row {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  height: 64px;
  padding: 0 18px;
}

body.nv-ui .brand {
  gap: 10px;
}

body.nv-ui .brand-copy {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
}

body.nv-ui .brand-copy small {
  color: #7fd2c7;
  font-size: 10px;
  letter-spacing: .18em;
}

body.nv-ui .workspace-pill {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--nv-ui-radius-sm);
  color: #e3eff4;
  font-size: 12px;
  font-weight: 700;
  margin: 14px 12px 8px;
  padding: 9px 11px;
}

body.nv-ui .nav-label {
  color: rgba(186, 212, 226, .55);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 0 12px 6px;
}

body.nv-ui .nav-item {
  border-radius: 9px;
  color: rgba(222, 236, 243, .8);
  font-size: 14px;
  font-weight: 600;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
}

body.nv-ui .nav-item:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

body.nv-ui .nav-item.active {
  background: rgba(255, 255, 255, .1);
  border-radius: 9px;
  box-shadow: inset 3px 0 0 #4fc3b4;
  color: #fff;
}

body.nv-ui .sidebar-footer {
  background: rgba(0, 0, 0, .14);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

body.nv-ui .sidebar .profile-meta strong {
  color: #fff;
  font-size: 13px;
}

body.nv-ui .sidebar .profile-meta small {
  color: rgba(186, 212, 226, .7);
  font-size: 11px;
}

body.nv-ui .footer-actions a,
body.nv-ui .footer-actions button {
  color: rgba(222, 236, 243, .72);
  font-size: 12px;
  font-weight: 600;
}

body.nv-ui .footer-actions a:hover,
body.nv-ui .footer-actions button:hover {
  color: #fff;
}

/* ---- Shell: topbar ----------------------------------------------------- */

body.nv-ui .topbar {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--nv-ui-border);
  box-shadow: none;
  height: 64px;
  padding: 0 28px;
}

body.nv-ui .date-chip {
  background: var(--nv-ui-surface-subtle);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-sm);
  color: var(--nv-ui-text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
}

/* ---- Cabeçalho de página ---------------------------------------------- */

body.nv-ui .page-head {
  align-items: flex-start;
  border-bottom: 0;
  gap: var(--nv-ui-space-6);
  margin: 0 0 var(--nv-ui-space-6);
  padding: 0;
}

body.nv-ui .page-head::after {
  display: none;
}

body.nv-ui .page-head h1 {
  color: var(--nv-ui-text);
  font-size: clamp(26px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin: 0;
}

body.nv-ui .eyebrow {
  color: var(--nv-ui-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.nv-ui .page-head .eyebrow {
  display: block;
  line-height: 1.25;
  margin-bottom: var(--nv-ui-space-1);
}

/* O tema legado esconde descrições de cabeçalho, subtítulos de seção e
 * ajudas de campo com display:none!important; aqui elas voltam, compactas,
 * como nas telas nv-*. O !important só desfaz o !important legado. */
body.nv-ui .page-head > div > p,
body.nv-ui .section-head > div > p,
body.nv-ui .section-head > div > span:not(.eyebrow):not(.visually-hidden):not(.sr-only),
body.nv-ui .field-help,
body.nv-ui .help-text {
  display: block !important;
}

body.nv-ui .page-head > div > p {
  color: var(--nv-ui-text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: var(--nv-ui-space-2) 0 0;
  max-width: 720px;
}

body.nv-ui .page-head .actions {
  align-items: center;
  display: flex;
  gap: var(--nv-ui-space-2);
}

body.nv-ui .back-link {
  align-items: center;
  color: var(--nv-ui-text-secondary);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: var(--nv-ui-space-2);
  line-height: 1.35;
  margin: 0 0 var(--nv-ui-space-3);
}

body.nv-ui .back-link:hover {
  color: var(--nv-ui-primary);
}

/* ---- Superfícies e seções --------------------------------------------- */

body.nv-ui .card {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-lg);
  box-shadow: none;
  padding: var(--nv-ui-space-5);
}

body.nv-ui .section-head {
  align-items: flex-start;
  gap: var(--nv-ui-space-4);
  margin-bottom: var(--nv-ui-space-4);
}

body.nv-ui .section-head h2,
body.nv-ui .section-head h3,
body.nv-ui .card > h2,
body.nv-ui .card > h3 {
  color: var(--nv-ui-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
}

body.nv-ui .section-head > div > p,
body.nv-ui .section-head > div > span:not(.eyebrow):not(.visually-hidden):not(.sr-only),
body.nv-ui .section-head > span,
body.nv-ui .section-head .muted {
  color: var(--nv-ui-text-muted);
  font-size: 12.5px;
  line-height: 1.45;
  margin: var(--nv-ui-space-1) 0 0;
}

body.nv-ui .field-help,
body.nv-ui .help-text {
  color: var(--nv-ui-text-muted);
  font-size: 12px;
  line-height: 1.45;
  margin-top: var(--nv-ui-space-1);
}

body.nv-ui .muted {
  color: var(--nv-ui-text-muted);
}

/* ---- Formulários ------------------------------------------------------- */

/* Mesma especificidade do tema legado (`body.system-refresh input`, 0,1,2):
 * vence por ordem, mas continua abaixo das variantes de componente (busca
 * da topbar, busca/datas dos pilotos), que têm regras próprias. */
body.nv-ui input,
body.nv-ui select,
body.nv-ui textarea {
  background-color: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border-strong);
  border-radius: var(--nv-ui-radius-sm);
  box-shadow: none;
  color: var(--nv-ui-text);
}

body.nv-ui input:focus,
body.nv-ui select:focus,
body.nv-ui textarea:focus {
  border-color: var(--nv-ui-accent);
  box-shadow: var(--nv-ui-focus);
  outline: 0;
}

body.nv-ui input::placeholder,
body.nv-ui textarea::placeholder {
  color: #8a9ca6;
}

body.nv-ui .field > label,
body.nv-ui .field > span:first-child,
body.nv-ui .form-grid > label > span:first-child {
  color: var(--nv-ui-text-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

body.nv-ui .form-grid {
  gap: var(--nv-ui-space-3) var(--nv-ui-space-4);
}

body.nv-ui .form-actions {
  gap: var(--nv-ui-space-2);
}

/* ---- Tabelas ----------------------------------------------------------- */

/* overflow-x:auto no lugar do overflow:hidden legado: colunas finais (status,
 * ações) eram cortadas em vez de rolar dentro da própria superfície. */
body.nv-ui .table-wrap {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-lg);
  box-shadow: var(--nv-ui-shadow);
  overflow-x: auto;
}

body.nv-ui thead th {
  background: var(--nv-ui-surface-subtle);
  border-bottom: 1px solid var(--nv-ui-border);
  color: var(--nv-ui-text-secondary);
  font-size: 11px;
  font-weight: 800;
  height: auto;
  letter-spacing: .08em;
  line-height: 1.35;
  padding: 12px 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

body.nv-ui tbody td {
  border-bottom: 1px solid #e8eef0;
  color: var(--nv-ui-text-secondary);
  font-size: 14px;
  line-height: 1.45;
  padding: 13px 16px;
  vertical-align: middle;
}

body.nv-ui tbody td strong,
body.nv-ui tbody td a:not(.btn) {
  color: var(--nv-ui-text);
}

/* Texto livre quebra entre palavras (ver nota em .nv-data-table td). */
body.nv-ui td,
body.nv-ui td * {
  overflow-wrap: break-word;
}

body.nv-ui tbody tr:hover > td {
  background: #fbfdfd;
}

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

body.nv-ui .badge {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  gap: 4px;
  letter-spacing: .01em;
  line-height: 1.3;
  padding: 4px 9px;
  white-space: nowrap;
}

body.nv-ui .badge-green {
  background: var(--nv-ui-success-soft);
  border-color: #ccebdc;
  color: var(--nv-ui-success);
}

body.nv-ui .badge-yellow,
body.nv-ui .badge-warning {
  background: var(--nv-ui-warning-soft);
  border-color: #f0deac;
  color: var(--nv-ui-warning);
}

body.nv-ui .badge-red,
body.nv-ui .badge-danger {
  background: var(--nv-ui-danger-soft);
  border-color: #f0cdd0;
  color: var(--nv-ui-danger);
}

body.nv-ui .badge-blue {
  background: var(--nv-ui-info-soft);
  border-color: #c8e1eb;
  color: var(--nv-ui-info);
}

body.nv-ui .badge-gray {
  background: #f0f4f5;
  border-color: #dce5e7;
  color: #5c717a;
}

body.nv-ui .badge-violet {
  background: #f3effa;
  border-color: #e0d6f2;
  color: #6a4c9c;
}

/* ---- Avisos ------------------------------------------------------------ */

body.nv-ui .inline-alert,
body.nv-ui .notice-card {
  background: var(--nv-ui-info-soft);
  border: 1px solid #c8e1eb;
  border-radius: var(--nv-ui-radius-md);
  box-shadow: none;
  color: var(--nv-ui-text);
  font-size: 13.5px;
  line-height: 1.5;
  padding: 12px 14px;
}

body.nv-ui .inline-alert.warning {
  background: var(--nv-ui-warning-soft);
  border-color: #f0deac;
}

body.nv-ui .inline-alert.danger,
body.nv-ui .inline-alert.error {
  background: var(--nv-ui-danger-soft);
  border-color: #f0cdd0;
}

body.nv-ui .flash {
  border-radius: var(--nv-ui-radius-md);
  box-shadow: none;
  font-size: 14px;
}

body.nv-ui .flash-ok {
  background: var(--nv-ui-success-soft);
  border: 1px solid #ccebdc;
  color: #1c5f45;
}

body.nv-ui .flash-error {
  background: var(--nv-ui-danger-soft);
  border: 1px solid #f0cdd0;
  color: #8f2f36;
}

/* ---- Abas / filtros segmentados --------------------------------------- */

body.nv-ui .tabs {
  background: var(--nv-ui-surface-subtle);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-sm);
  box-shadow: none;
  gap: var(--nv-ui-space-1);
  padding: var(--nv-ui-space-1);
}

body.nv-ui .tabs > a,
body.nv-ui .tabs > button {
  border: 0;
  border-radius: 6px;
  color: var(--nv-ui-text-secondary);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  white-space: nowrap;
}

body.nv-ui .tabs > a:hover,
body.nv-ui .tabs > button:hover {
  background: var(--nv-ui-surface);
  color: var(--nv-ui-text);
}

body.nv-ui .tabs > a.active,
body.nv-ui .tabs > button.active {
  background: var(--nv-ui-primary);
  box-shadow: none;
  color: #fff;
}

/* ---- Indicadores ------------------------------------------------------- */

body.nv-ui .metric-card {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-md);
  box-shadow: none;
  gap: var(--nv-ui-space-3);
  padding: var(--nv-ui-space-4);
}

body.nv-ui a.metric-card:hover {
  border-color: #a8cbd1;
  transform: none;
}

body.nv-ui .metric-card small {
  color: var(--nv-ui-text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.nv-ui .metric-card strong {
  color: var(--nv-ui-text);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.nv-ui .metric-icon {
  border-radius: 10px;
  height: 36px;
  width: 36px;
}

/* .metric/.label/.value (atalhos de faturamento) não tinham estilo e o
 * rótulo colava no número ("Guias0"). */
body.nv-ui .metric {
  background: var(--nv-ui-surface-subtle);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-md);
  color: var(--nv-ui-text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
}

body.nv-ui a.metric:hover {
  border-color: #a8cbd1;
}

body.nv-ui .metric .label {
  color: var(--nv-ui-text-muted);
  font-size: 12px;
  font-weight: 700;
}

body.nv-ui .metric .value {
  color: var(--nv-ui-text);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ---- Estados vazios ---------------------------------------------------- */

body.nv-ui .empty,
body.nv-ui .empty-inline {
  color: var(--nv-ui-text-muted);
  font-size: 13.5px;
}

body.nv-ui .empty-state {
  background: var(--nv-ui-surface);
  border: 1px dashed var(--nv-ui-border-strong);
  border-radius: var(--nv-ui-radius-lg);
  box-shadow: none;
  color: var(--nv-ui-text-muted);
}

body.nv-ui .empty-state h2,
body.nv-ui .empty-state h3 {
  color: var(--nv-ui-text);
  font-size: 15px;
  font-weight: 700;
}

/* ---- Formulários clínicos MED (human-form-*) --------------------------- */

/* O "hero" era um cartão com gradiente e um ícone decorativo; vira o mesmo
 * cabeçalho de página das demais telas. */
body.nv-ui .human-form-hero {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 var(--nv-ui-space-6);
  padding: 0;
}

body.nv-ui .human-form-avatar {
  display: none;
}

body.nv-ui .human-form-hero h1 {
  color: var(--nv-ui-text);
  font-size: clamp(26px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin: var(--nv-ui-space-1) 0 0;
}

body.nv-ui .human-form-hero p {
  color: var(--nv-ui-text-secondary);
  font-size: 14px;
  margin: var(--nv-ui-space-2) 0 0;
}

body.nv-ui .human-form-card {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-lg);
  box-shadow: none;
  padding: var(--nv-ui-space-5) var(--nv-ui-space-6);
}

body.nv-ui .human-section-head h2,
body.nv-ui .human-section-head h3 {
  color: var(--nv-ui-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

body.nv-ui .human-section-head > span:first-child {
  background: var(--nv-ui-surface-subtle);
  border: 1px solid var(--nv-ui-border);
  border-radius: 7px;
  color: var(--nv-ui-text-secondary);
  font-size: 11px;
  font-weight: 800;
}

body.nv-ui .human-form-actions {
  gap: var(--nv-ui-space-2);
}

/* ---- Responsivo -------------------------------------------------------- */

@media (max-width: 760px) {
  body.nv-ui .topbar {
    height: 60px;
    padding: 0 14px;
  }

  body.nv-ui .card {
    padding: var(--nv-ui-space-4);
  }

  body.nv-ui .human-form-card {
    padding: var(--nv-ui-space-4);
  }

  body.nv-ui thead th,
  body.nv-ui tbody td {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---- 003 · ajustes após a primeira revisão renderizada ----------------- */

/* Cabeçalho: no desktop, texto e ações dividem a linha; o texto cede
 * espaço em vez de empurrar as ações para baixo da descrição. */
/* 769px: o legado (app.css/layout.css) empilha o cabeçalho a partir de 768px;
 * usar o mesmo limite evita uma faixa em que as duas regras se misturam. */
@media (min-width: 769px) {
  body.nv-ui .page-head {
    flex-wrap: nowrap;
  }

  body.nv-ui .page-head > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.nv-ui .page-head .actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
}

/* Título solto de um cartão (sem section-head) precisa de respiro antes do
 * conteúdo. */
body.nv-ui .card > h2,
body.nv-ui .card > h3 {
  margin: 0 0 var(--nv-ui-space-4);
}

/* Campos fora de .field (buscas, filtros) também têm respiro interno. */
body.nv-ui input,
body.nv-ui select,
body.nv-ui textarea {
  padding: 8px 11px;
}

/* Linha secundária em células (nome + e-mail, registro + fatura). */
body.nv-ui td > strong + small,
body.nv-ui td > a + small,
body.nv-ui td > strong + span.muted {
  color: var(--nv-ui-text-muted);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

/* Ações de linha em tabelas legadas: um "Conferir"/"Abrir" repetido em cada
 * linha não é a ação principal da tela; recebe o peso de ação secundária. */
body.nv-ui .table-wrap td .btn-primary {
  background: var(--nv-ui-surface-subtle);
  border-color: var(--nv-ui-border-strong);
  box-shadow: none;
  color: var(--nv-ui-primary);
}

body.nv-ui .table-wrap td .btn-primary:hover {
  background: #eaf4f4;
  border-color: #a8cbd1;
  color: var(--nv-ui-primary);
}

/* A seção financeira tinha uma faixa azul sólida como cabeçalho. */
body.nv-ui .finance-list-card > .section-head {
  background: transparent;
  color: var(--nv-ui-text);
  margin: 0;
  padding: var(--nv-ui-space-5) var(--nv-ui-space-5) var(--nv-ui-space-3);
}

body.nv-ui .finance-list-card > .section-head h2 {
  color: var(--nv-ui-text);
}

body.nv-ui .finance-list-card > .section-head span:not(.visually-hidden):not(.sr-only) {
  color: var(--nv-ui-text-muted);
}

/* Filtros de categoria e navegação do prontuário: mesma gramática das
 * abas segmentadas (.tabs / .nv-segmented). */
body.nv-ui .category-tabs,
body.nv-ui .pep-nav {
  background: var(--nv-ui-surface-subtle);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-sm);
  box-shadow: none;
  gap: var(--nv-ui-space-1);
  margin-right: 0;
  max-width: 100%;
  padding: var(--nv-ui-space-1);
  width: max-content;
}

body.nv-ui .category-tab,
body.nv-ui .pep-nav a {
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  color: var(--nv-ui-text-secondary);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
}

body.nv-ui .category-tab:hover,
body.nv-ui .pep-nav a:hover {
  background: var(--nv-ui-surface);
  color: var(--nv-ui-text);
}

body.nv-ui .category-tab.active,
body.nv-ui .pep-nav a.active {
  background: var(--nv-ui-primary);
  box-shadow: none;
  color: #fff;
}

/* Elementos fixos acompanham a topbar de 64px (antes 76px). */
body.nv-ui .pep-nav {
  top: 64px;
}

body.nv-ui .action-panel,
body.nv-ui .encounter-nav {
  top: 75px;
}

body.nv-ui .pos-cart-card {
  top: 70px;
}

/* Painel: a grade de indicadores se ajusta à quantidade de cartões visíveis
 * (3 a 6 conforme vertical e permissão), sem coluna vazia. */
body.nv-ui .metric-grid {
  gap: var(--nv-ui-space-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

body.nv-ui .bi-overview {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-lg);
  box-shadow: none;
  padding: var(--nv-ui-space-5);
}

body.nv-ui .bi-grid article,
body.nv-ui .pep-summary-grid article {
  background: var(--nv-ui-surface-subtle);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-md);
}

body.nv-ui .bi-grid small,
body.nv-ui .pep-summary-grid small {
  color: var(--nv-ui-text-muted);
  font-size: 11px;
  letter-spacing: .08em;
}

body.nv-ui .bi-grid strong,
body.nv-ui .pep-summary-grid strong {
  color: var(--nv-ui-text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

body.nv-ui .bi-grid span {
  color: var(--nv-ui-text-muted);
  font-size: 12px;
}

/* Prontuário longitudinal: cabeçalho como superfície neutra, sem gradiente;
 * status da linha do tempo não estica até a altura da linha (virava um
 * círculo). */
body.nv-ui .pep-hero {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-lg);
  box-shadow: none;
}

body.nv-ui .pep-hero-main h1 {
  color: var(--nv-ui-text);
  font-size: clamp(24px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

body.nv-ui .pep-hero-actions .btn {
  width: auto;
}

body.nv-ui .clinical-event > .badge {
  align-self: center;
  justify-self: end;
}

/* ---- Componentes nv-* novos para telas legadas ------------------------- */

/* Barra de filtro: rótulo acima do controle, controles alinhados pela base,
 * botão com o próprio tamanho (não ocupa uma coluna inteira). */
body.nv-ui .nv-filter-bar {
  align-items: flex-end;
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--nv-ui-space-3);
  margin: 0 0 var(--nv-ui-space-4);
  padding: var(--nv-ui-space-3);
}

body.nv-ui .card > .nv-filter-bar {
  border: 0;
  margin: 0;
  padding: 0;
}

body.nv-ui .nv-filter-bar > label {
  color: var(--nv-ui-text-secondary);
  display: flex;
  flex: 0 1 220px;
  flex-direction: column;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
  min-width: 160px;
}

body.nv-ui .nv-filter-bar > label:first-child:not(:only-of-type) {
  flex: 1 1 280px;
}

body.nv-ui .nv-filter-bar > .btn {
  flex: 0 0 auto;
}

/* Cadastro com lista: a lista domina e a criação ocupa uma coluna estreita. */
body.nv-ui .nv-split {
  align-items: start;
  display: grid;
  gap: var(--nv-ui-space-4);
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
}

@media (max-width: 1200px) {
  body.nv-ui .nv-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  body.nv-ui .pep-nav {
    top: 60px;
  }

  body.nv-ui .nv-filter-bar > label,
  body.nv-ui .nv-filter-bar > .btn {
    flex: 1 1 100%;
  }
}

/* ---- 003 · segunda revisão: raízes de largura, grupos e acentos -------- */

/* O tema legado declara .btn como display:flex (nível de bloco): um botão
 * solto num formulário ocupava a largura inteira ("Criar guia em rascunho",
 * "Pesquisar"). inline-flex mantém o botão do tamanho do conteúdo; larguras
 * cheias intencionais (celular, grupos) continuam com regra própria. */
body.nv-ui .btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

body.nv-ui .form-grid > .btn,
body.nv-ui .human-form-grid > .btn {
  justify-self: start;
}

body.nv-ui input,
body.nv-ui select,
body.nv-ui textarea {
  font-size: 14px;
}

/* Grupo de campos (fieldset) com a borda nativa "groove" do navegador. */
body.nv-ui fieldset {
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-md);
  margin: 0;
  min-width: 0;
  padding: var(--nv-ui-space-4);
}

body.nv-ui legend {
  color: var(--nv-ui-text);
  font-size: 13px;
  font-weight: 800;
  padding: 0 var(--nv-ui-space-2);
}

/* Tabela dentro de um cartão compartilha a superfície do cartão (como
 * .nv-table-shell--flush), em vez de desenhar uma segunda caixa. */
body.nv-ui .card .table-wrap,
body.nv-ui .table-wrap.flat {
  border: 0;
  border-radius: var(--nv-ui-radius-sm);
  box-shadow: none;
}

body.nv-ui .finance-list-card {
  overflow: hidden;
  padding: 0;
}

body.nv-ui .finance-list-card .table-wrap {
  border-radius: 0;
}

/* Conta do paciente: cabeçalho sem gradiente e cartões sem a barra
 * colorida lateral decorativa. */
body.nv-ui .billing-hero,
body.nv-ui .billing-detail-page .billing-hero {
  background: var(--nv-ui-surface);
  border: 1px solid var(--nv-ui-border);
  border-radius: var(--nv-ui-radius-lg);
  box-shadow: none;
}

body.nv-ui .account-add-card::before,
body.nv-ui .billing-close-card::before,
body.nv-ui .fiscal-metric::before {
  display: none;
}

/* ---- 003 · terceira revisão -------------------------------------------- */

/* Caixas de seleção e rádios não recebem o respiro interno dos campos de
 * texto (o padding aumentava o próprio controle nativo). */
body.nv-ui input[type="checkbox"],
body.nv-ui input[type="radio"] {
  min-height: 0;
  padding: 0;
  width: auto;
}

/* Botão sozinho numa linha de campo de largura total é a ação do bloco:
 * alinhado ao fim, com o tamanho do texto (antes esticava na coluna). */
body.nv-ui .field.full > .btn:only-child {
  align-self: flex-end;
}

body.nv-ui .pep-hero-actions {
  align-items: flex-end;
}

/* Rodapé de ações de formulário: linha discreta, sem a faixa cinza. */
body.nv-ui .form-card > .form-actions {
  background: transparent;
  border-top: 1px solid var(--nv-ui-border);
  padding: var(--nv-ui-space-4) 0 0;
}

/* Cabeçalhos de tabelas legadas voltam a quebrar entre palavras quando a
 * coluna é estreita ("Lançamento automático"), sem partir palavras. */
body.nv-ui thead th {
  overflow-wrap: break-word;
  white-space: normal;
}

/* Valor atômico (moeda, duração, data) em qualquer tabela. */
body.nv-ui td.nv-cell-atomic {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Tabelas legadas tinham largura mínima fixa (620–860px: .table-wrap table,
 * body.system-refresh table, .finance-modern-table, .protocol-table), que
 * forçava rolagem em colunas de meia largura e em 1024px mesmo com conteúdo
 * curto. A partir do tablet a tabela passa a ter a largura do conteúdo; no
 * celular a largura mínima legada continua dando rolagem controlada às
 * tabelas densas. As tabelas nv-* mantêm a própria regra. */
@media (min-width: 761px) {
  body.nv-ui table {
    min-width: 0;
  }
}

/* Código técnico ou identificador (evento de auditoria, request id, hash):
 * pode quebrar em qualquer ponto, em fonte monoespaçada, em vez de alargar
 * a tabela com uma palavra de 40 caracteres. */
body.nv-ui td.nv-cell-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}

body.nv-ui td.nv-cell-code .badge {
  text-align: left;
  white-space: normal;
}

/* Densidade: tabelas com nove ou mais colunas (catálogos, auditoria) e todas
 * as tabelas legadas em telas até 1280px usam respiro horizontal menor, para
 * caberem sem rolagem sempre que o conteúdo permitir. */
body.nv-ui table:not(.nv-data-table):has(> thead > tr > th:nth-child(9)) th,
body.nv-ui table:not(.nv-data-table):has(> thead > tr > th:nth-child(9)) td {
  padding-left: 10px;
  padding-right: 10px;
}

@media (max-width: 1280px) {
  body.nv-ui thead th,
  body.nv-ui tbody td {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---- Control Center (cc-*) --------------------------------------------- */

/* O Control Center tem o próprio cabeçalho; a barra do shell geral não é
 * renderizada nessas telas (bloco topbar vazio em platform_layout.html) e o
 * conteúdo ocupa a área inteira, sem as margens negativas que compensavam o
 * padding do .content. */
body.nv-ui .content.content-flush {
  max-width: none;
  padding: 0;
}

body.nv-ui .control-center-shell {
  margin: 0;
  min-height: 100vh;
}

/* Mesma paleta de navegação do shell NOVARIS. */
body.nv-ui .control-center-sidebar {
  background: linear-gradient(180deg, #0f3551 0%, #0b2a40 100%);
}

body.nv-ui .control-center-header {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--nv-ui-border);
  box-shadow: none;
}

body.nv-ui .control-center-header-actions form {
  margin: 0;
}

/* ---- Login e seleção de portal ----------------------------------------- */

/* login.html também carrega esta folha. brand.css pinta o botão de entrada
 * com gradiente e !important; o !important aqui só desfaz aquele. */
body.nv-ui .login-submit {
  background: var(--nv-ui-primary) !important;
  border-radius: var(--nv-ui-radius-md) !important;
  box-shadow: 0 1px 2px rgba(15, 61, 84, .16), 0 6px 14px rgba(15, 95, 120, .16);
}

/* brand.css não define :hover para o botão; o !important dele também vale no hover. */
body.nv-ui .login-submit:hover {
  background: var(--nv-ui-primary-hover) !important;
}

/* Cada portal mantém a cor da própria vertical, sem gradiente. */
body.nv-ui .portal-human .portal-access-btn {
  background: var(--nv-ui-primary);
}

body.nv-ui .portal-vet .portal-access-btn {
  background: #1f7a57;
}

body.nv-ui .portal-access-btn {
  box-shadow: none;
}

/* ---- VET: painel e conta financeira ------------------------------------ */

/* Cabeçalhos de painel (agenda do dia, internações ativas) eram faixas azuis
 * sólidas com texto branco. */
body.nv-ui .panel-card {
  overflow: hidden;
  padding: 0;
}

body.nv-ui .panel-card > .section-head {
  background: transparent;
  border-bottom: 1px solid var(--nv-ui-border);
  color: var(--nv-ui-text);
  margin: 0;
  padding: var(--nv-ui-space-4) var(--nv-ui-space-5);
}

body.nv-ui .panel-card > .section-head h2 {
  color: var(--nv-ui-text);
}

body.nv-ui .panel-card > .section-head a {
  color: var(--nv-ui-primary);
}

body.nv-ui .panel-card > .panel-body {
  padding: var(--nv-ui-space-3) var(--nv-ui-space-5);
}

/* Resumo da conta: mantém o destaque escuro (texto claro já definido nos
 * filhos), mas em tom sólido do sistema, sem gradiente nem sombra longa. */
body.nv-ui .finance-summary-card {
  background: #0f4a60;
  border-radius: var(--nv-ui-radius-lg);
  box-shadow: none;
}

/* Seis indicadores (VET) formam uma grade 3 × 2 até telas bem largas, em vez
 * de seis cartões estreitos em que rótulo e valor quebravam. */
body.nv-ui .metric-grid:has(> :nth-child(6)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 1700px) {
  body.nv-ui .metric-grid:has(> :nth-child(6)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.nv-ui .metric-grid:has(> :nth-child(6)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.nv-ui .metric-card small {
  overflow-wrap: normal;
}

body.nv-ui .metric-card strong {
  white-space: nowrap;
}

/* ---- 003 · revisão mobile ---------------------------------------------- */

/* Busca inline (.searchbar): campo e botão na mesma linha, o campo ocupa o
 * espaço disponível (no celular o legado centralizava um campo estreito). */
body.nv-ui .searchbar {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--nv-ui-space-2);
}

body.nv-ui .searchbar > input:not([type="hidden"]) {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

body.nv-ui .searchbar > .btn {
  flex: 0 0 auto;
  width: auto;
}

body.nv-ui label.check-grid > span {
  align-items: center;
  display: inline-flex;
  gap: var(--nv-ui-space-2);
}

/* Identificador técnico não fica mais estreito que um código legível. */
body.nv-ui td.nv-cell-code {
  min-width: 112px;
}

@media (max-width: 760px) {
  body.nv-ui .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Agenda do painel: status abaixo do nome, em vez de cortado à direita. */
  body.nv-ui .schedule-row {
    grid-template-columns: 44px 8px minmax(0, 1fr) 16px;
    row-gap: 4px;
  }

  body.nv-ui .schedule-row > .badge {
    display: inline-flex;
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
  }

  body.nv-ui .schedule-row > .icon:last-child {
    grid-column: 4;
    grid-row: 1 / span 2;
  }

  /* Linha do tempo do prontuário: status na coluna do texto. */
  body.nv-ui .clinical-event > .badge {
    grid-column: 2;
    justify-self: start;
  }

  /* Control Center: a busca vai para a segunda linha do cabeçalho em vez de
   * ficar espremida entre os botões. */
  body.nv-ui .control-center-header {
    flex-wrap: wrap;
    height: auto;
    row-gap: var(--nv-ui-space-2);
  }

  body.nv-ui .control-center-search {
    flex: 1 1 100%;
    max-width: none;
    order: 3;
  }

  body.nv-ui .control-center-header-actions {
    margin-left: auto;
  }

  body.nv-ui .control-center-header-actions .cc-button {
    white-space: nowrap;
  }
}

/* ---- 003 · varredura de larguras ---------------------------------------- */

@media (max-width: 768px) {
  body.nv-ui .page-head {
    flex-direction: column;
    gap: var(--nv-ui-space-4);
  }

  body.nv-ui .page-head .actions {
    flex-wrap: wrap;
    width: 100%;
  }

  body.nv-ui .page-head .actions .btn {
    flex: 1 1 0;
  }

  body.nv-ui .page-head .actions .btn-primary {
    flex-basis: 100%;
  }
}

/* Tabelas com sete ou mais colunas em telas até 1100px: respiro horizontal
 * mínimo antes de recorrer à rolagem da própria superfície. A agenda VET
 * (7 colunas, sem a redistribuição de colunas da agenda MED) idem. */
@media (max-width: 1100px) {
  body.nv-ui table:not(.nv-data-table):has(> thead > tr > th:nth-child(7)) th,
  body.nv-ui table:not(.nv-data-table):has(> thead > tr > th:nth-child(7)) td {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .nv-ui.nv-page--agenda .agenda-table:not(.agenda-table--med) th,
  .nv-ui.nv-page--agenda .agenda-table:not(.agenda-table--med) td {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ---- Acessibilidade: painéis fora da tela ------------------------------- */

/* Gaveta fechada (aria-hidden="true") e menu móvel fechado só eram
 * deslocados para fora da tela: os controles continuavam alcançáveis por
 * teclado e leitor de tela, e a sombra da gaveta aparecia na borda direita.
 * visibility:hidden os retira da navegação; no fechamento a troca espera o
 * fim do deslize, para manter a animação. */
body.nv-ui .drawer {
  transition: transform .2s ease, visibility 0s linear .2s;
  visibility: hidden;
}

body.nv-ui .drawer.open {
  transition: transform .2s ease;
  visibility: visible;
}

@media (max-width: 980px) {
  body.nv-ui .app:not(.sidebar-open) .sidebar {
    transition: transform .22s ease, visibility 0s linear .22s;
    visibility: hidden;
  }

  body.nv-ui .app.sidebar-open .sidebar {
    transition: transform .22s ease;
    visibility: visible;
  }
}

/* ---- Tabelas: coluna de ações fixa -------------------------------------- */

/* Tabelas cuja última coluna reúne as ações da linha (Editar, Inativar,
 * Conferir...) rolam dentro da superfície em tablet e celular, e as ações
 * ficavam fora da tela. A adoção é por tabela, com a classe na <table>,
 * somente onde a ação é essencial e a linha não tem outro acesso: a coluna
 * fica fixa à direita e o app.js marca .is-clipped enquanto houver colunas
 * escondidas, o que acende a sombra. Quando a tabela cabe, nada muda. */
body.nv-ui table.nv-sticky-actions > * > tr > :last-child:not([colspan]) {
  position: sticky;
  right: 0;
  z-index: 1;
}

body.nv-ui table.nv-sticky-actions > tbody > tr > td:last-child:not([colspan]) {
  background: var(--nv-ui-surface);
}

body.nv-ui table.nv-sticky-actions > tbody > tr:hover > td:last-child:not([colspan]) {
  background: #fbfdfd;
}

body.nv-ui table.nv-sticky-actions.is-clipped > * > tr > :last-child:not([colspan]) {
  box-shadow: -12px 0 12px -12px rgba(16, 42, 60, .45);
}