/* ============================================================
   Nazide Pressus — Portal de Gerenciamento
   Design system: clinical / editorial, teal accent + green "go"
   Fusion: sidebar shell  +  colleague's form language
   ============================================================ */

/* ------------------------------------------------------------
   Camada de tokens: alias do design system Carbon (carbon-tokens.css).
   As propriedades --cds-* já trocam de valor por tema (g10/g100),
   então estes aliases acompanham o tema automaticamente — basta
   alternar [data-theme="dark"]. NÃO redefinir cores aqui em oklch:
   a fonte da verdade é o Carbon.
   ------------------------------------------------------------ */
:root {
  /* Tipografia — família IBM Plex (via Carbon) */
  --font-ui:      var(--cds-font-sans);
  --font-display: var(--cds-font-serif);   /* IBM Plex Serif — expressivo */
  --font-mono:    var(--cds-font-mono);

  /* densidade ajustável (mantida para o painel de tweaks) */
  --ui-scale: 1;

  /* Acento = primário interativo do Carbon (Blue 60 / Blue 50 no escuro) */
  --accent:        var(--cds-interactive);
  --accent-ink:    var(--cds-link-primary);
  --accent-soft:   var(--cds-highlight);
  --accent-line:   var(--cds-border-interactive);

  /* Superfícies / texto / bordas */
  --bg:            var(--cds-background);
  --surface:       var(--cds-layer-01);
  --panel:         var(--cds-layer-02);
  --panel-2:       var(--cds-layer-accent-01);
  --border:        var(--cds-border-subtle-01);
  --border-strong: var(--cds-border-strong-01);
  --text:          var(--cds-text-primary);
  --text-muted:    var(--cds-text-secondary);
  --text-faint:    var(--cds-text-helper);

  /* CTA "go" — agora o botão primário do Carbon (Blue 60) */
  --go:      var(--cds-button-primary);
  --go-ink:  var(--cds-link-primary);
  --go-soft: var(--cds-highlight);

  /* Barra de comando / chrome escuro — Gray 100 (constante entre temas) */
  --navy:       var(--cds-gray-100);
  --navy-2:     var(--cds-gray-90);
  --navy-line:  var(--cds-gray-80);
  --navy-text:  var(--cds-gray-10);
  --navy-faint: var(--cds-gray-50);

  /* Vermelho anatômico (severidade) — support-error do Carbon */
  --anat:      var(--cds-support-error);
  --anat-soft: rgba(218, 30, 40, 0.12);

  /* Status — pares de tag Carbon (tema claro; sobrescritos no escuro) */
  --st-draft:        var(--cds-text-secondary);
  --st-draft-bg:     var(--cds-layer-accent-01);
  --st-review:       #6929c4;   /* purple-70 */
  --st-review-bg:    #e8daff;   /* purple-20 */
  --st-approved:     #0e6027;   /* green-70  */
  --st-approved-bg:  #a7f0ba;   /* green-20  */
  --st-published:    var(--cds-link-primary);
  --st-published-bg: var(--cds-highlight);
  --st-archived:     var(--cds-text-helper);
  --st-archived-bg:  var(--cds-layer-accent-01);
  /* `--danger` é a cor de **texto** de erro; serve para mensagem, não para
     superfície de botão. A ação destrutiva usa os tokens de botão do Carbon,
     que existem nos dois temas. Até 2026-07-30 `.btn.danger` pintava-se com
     --cds-text-error e ficava sem contraste sobre fundo escuro. */
  --danger:          var(--cds-text-error);
  --danger-bg:       rgba(218, 30, 40, 0.12);
  --danger-solid:       var(--cds-button-danger-primary);
  --danger-solid-hover: var(--cds-button-danger-hover);
  --danger-solid-active:var(--cds-button-danger-active);
  --on-danger:          var(--cds-text-on-color);

  /* Ritmo de espaçamento (px * escala — mantido p/ tweaks de densidade;
     valores alinhados à escala Carbon de base 2px) */
  --sp-1: calc(4px * var(--ui-scale));
  --sp-2: calc(8px * var(--ui-scale));
  --sp-3: calc(12px * var(--ui-scale));
  --sp-4: calc(16px * var(--ui-scale));
  --sp-5: calc(24px * var(--ui-scale));
  --sp-6: calc(32px * var(--ui-scale));
  --sp-7: calc(48px * var(--ui-scale));
  --row-h: calc(44px * var(--ui-scale));

  /* Carbon: cantos retos */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;

  /* Sombras — Carbon é majoritariamente plano; usadas em overlays/menus */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.24);
}

/* Tema escuro (g100): as cores fluem automaticamente dos tokens --cds-*.
   Só os pares de status com valor literal precisam de ajuste para o escuro. */
[data-theme="dark"] {
  --st-review:      #e8daff;   /* purple-20 */
  --st-review-bg:   #491d8b;   /* purple-80 */
  --st-approved:    #a7f0ba;   /* green-20  */
  --st-approved-bg: #044317;   /* green-80  */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: calc(14px * var(--ui-scale));
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--accent-line); color: var(--text); }

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* ======================================================
   App shell
   ====================================================== */
.app { display: grid; grid-template-columns: calc(252px * var(--ui-scale)) 1fr; height: 100%; overflow: hidden; }

.sidebar { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.brand-mark {
  width: 38px; height: 38px; border-radius: 0; flex: none;
  background: linear-gradient(155deg, var(--navy-2), var(--navy));
  display: grid; place-items: center; color: var(--accent);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08), var(--shadow-sm);
}
.brand-name { font-weight: 800; letter-spacing: 0.01em; font-size: calc(15.5px * var(--ui-scale)); line-height: 1; }
.brand-name .pressus { color: var(--accent-ink); }
.brand-sub { font-size: calc(10.5px * var(--ui-scale)); color: var(--text-faint); letter-spacing: 0.04em; margin-top: 3px; text-transform: uppercase; }

.nav { padding: var(--sp-2) var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-label { font-size: calc(10px * var(--ui-scale)); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); font-weight: 700; padding: var(--sp-4) var(--sp-3) var(--sp-2); }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: calc(9px * var(--ui-scale)) var(--sp-3); border-radius: var(--r-sm);
  color: var(--text-muted); font-weight: 500; font-size: calc(13.5px * var(--ui-scale));
  border: none; background: none; width: 100%; text-align: left;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav-item .ico { width: 18px; height: 18px; flex: none; opacity: 0.85; }
.nav-item .count { margin-left: auto; font-family: var(--font-mono); font-size: calc(11px * var(--ui-scale)); color: var(--text-faint); }
.nav-item.active .count { color: var(--accent-ink); }

.sidebar-foot { margin-top: auto; padding: var(--sp-3); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-2); }
.role-switch { display: flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.role-switch button { flex: 1; border: none; background: none; padding: 5px 6px; border-radius: 0; font-size: calc(11.5px * var(--ui-scale)); font-weight: 600; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 5px; }
.role-switch button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.user { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-sm); }
.user:hover { background: var(--panel-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--accent-soft); border: 1px solid var(--accent-line); display: grid; place-items: center; font-weight: 700; font-size: calc(12px * var(--ui-scale)); color: var(--accent-ink); }
.user-name { font-weight: 600; font-size: calc(12.5px * var(--ui-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: calc(11px * var(--ui-scale)); color: var(--text-faint); }

/* ---------- Main column ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { height: calc(58px * var(--ui-scale)); flex: none; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-6); background: var(--surface); }
.crumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: calc(13px * var(--ui-scale)); color: var(--text-faint); min-width: 0; }
.crumbs .sep { opacity: 0.5; display: flex; }
.crumbs .here { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb-link { background: none; border: none; color: var(--text-muted); font-size: inherit; padding: 0; }
.crumb-link:hover { color: var(--accent-ink); text-decoration: underline; }
.topbar-spacer { flex: 1; }
.searchbox { display: flex; align-items: center; gap: var(--sp-2); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); color: var(--text-faint); width: calc(260px * var(--ui-scale)); }
.searchbox input { border: none; background: none; outline: none; color: var(--text); width: 100%; font-size: calc(13px * var(--ui-scale)); }
.searchbox .kbd { font-family: var(--font-mono); font-size: 10px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 4px; color: var(--text-faint); }

.scroll { overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; }
.page { padding: var(--sp-6) var(--sp-7); max-width: 1180px; margin: 0 auto; width: 100%; }
.page.wide { max-width: 1320px; }

/* ---------- Headings ---------- */
.page-head { display: flex; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.page-eyebrow { font-size: calc(11px * var(--ui-scale)); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-ink); font-weight: 700; margin-bottom: var(--sp-2); }
.page-title { font-family: var(--font-display); font-weight: 600; font-size: calc(30px * var(--ui-scale)); letter-spacing: -0.01em; line-height: 1.08; margin: 0; }
.page-desc { color: var(--text-muted); font-size: calc(13.5px * var(--ui-scale)); margin-top: var(--sp-2); max-width: 64ch; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: calc(8px * var(--ui-scale)) var(--sp-4); font-weight: 600; font-size: calc(13px * var(--ui-scale)); transition: background .12s, border-color .12s, transform .04s, filter .12s; white-space: nowrap; }
.btn:hover { background: var(--panel); }
.btn:active { transform: translateY(0.5px); }
.btn .ico { width: 15px; height: 15px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.go { background: var(--go); border-color: var(--go); color: white; box-shadow: 0 1px 0 oklch(1 0 0 / 0.15) inset, var(--shadow-sm); }
.btn.go:hover { filter: brightness(1.05); }
.btn.ghost { background: none; border-color: transparent; color: var(--text-muted); }
.btn.ghost:hover { background: var(--panel); color: var(--text); }
.btn.lg { padding: calc(11px * var(--ui-scale)) var(--sp-5); font-size: calc(14.5px * var(--ui-scale)); border-radius: var(--r-md); }
.btn.sm { padding: calc(5px * var(--ui-scale)) var(--sp-3); font-size: calc(12px * var(--ui-scale)); }
/* Destrutiva discreta: contorno, para ações reversíveis (arquivar, despublicar). */
.btn.danger { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 35%, var(--border-strong)); }
.btn.danger:hover { background: var(--danger-bg); }
/* Destrutiva sólida: só para o que não tem volta (limpeza total da auditoria). */
.btn.danger-solid { background: var(--danger-solid); color: var(--on-danger); border-color: var(--danger-solid); }
.btn.danger-solid:hover:not(:disabled) { background: var(--danger-solid-hover); border-color: var(--danger-solid-hover); }
.btn.danger-solid:active:not(:disabled) { background: var(--danger-solid-active); }
.btn.danger-solid:disabled { background: var(--cds-button-disabled); border-color: var(--cds-button-disabled); color: var(--cds-text-on-color-disabled); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.icon-btn { width: calc(32px * var(--ui-scale)); height: calc(32px * var(--ui-scale)); border-radius: var(--r-sm); display: grid; place-items: center; border: 1px solid transparent; background: none; color: var(--text-muted); }
.icon-btn:hover { background: var(--panel-2); color: var(--text); }

/* ---------- Status badge ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: calc(11.5px * var(--ui-scale)); font-weight: 600; padding: 3px var(--sp-2) 3px 7px; border-radius: 0; white-space: nowrap; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.badge.draft { background: var(--st-draft-bg); color: var(--st-draft); }
.badge.draft .dot { background: var(--st-draft); }
.badge.review { background: var(--st-review-bg); color: color-mix(in oklch, var(--st-review) 80%, black); }
.badge.review .dot { background: var(--st-review); }
.badge.approved { background: var(--st-approved-bg); color: color-mix(in oklch, var(--st-approved) 78%, black); }
.badge.approved .dot { background: var(--st-approved); }
.badge.published { background: var(--st-published-bg); color: var(--st-published); }
.badge.published .dot { background: var(--accent); }
.badge.archived { background: var(--st-archived-bg); color: var(--st-archived); }
.badge.archived .dot { background: var(--st-archived); }
[data-theme="dark"] .badge.review, [data-theme="dark"] .badge.approved { color: var(--text); }

.chip { font-family: var(--font-mono); font-size: calc(11.5px * var(--ui-scale)); background: var(--panel); border: 1px solid var(--border); border-radius: 0; padding: 1px 6px; color: var(--text-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.chip.accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }

/* tag pill (clinical labels, queixas) */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: calc(11.5px * var(--ui-scale)); font-weight: 600; padding: 3px 9px; border-radius: 0; background: var(--panel-2); color: var(--text-muted); white-space: nowrap; }
.tag.accent { background: var(--accent-soft); color: var(--accent-ink); }
.tag.anat { background: var(--anat-soft); color: color-mix(in oklch, var(--anat) 75%, black); }
[data-theme="dark"] .tag.anat { color: oklch(0.85 0.09 20); }
.tag.danger { background: var(--danger-bg); color: var(--danger); }
/* Resultado de teste de credencial (ESP-0010) — mesmos tokens de --go usados
   em .btn.go/.imc-normal para "positivo", sem introduzir cor nova. */
.tag.go { background: var(--go-soft); color: var(--go-ink); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }

/* ---------- Stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.stat { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
.stat-top { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-faint); font-size: calc(11.5px * var(--ui-scale)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-n { font-family: var(--font-display); font-size: calc(32px * var(--ui-scale)); font-weight: 600; line-height: 1; margin-top: var(--sp-3); }
.stat-sub { font-size: calc(11.5px * var(--ui-scale)); color: var(--text-muted); margin-top: 5px; }
.stat-sub b { color: var(--go-ink); font-weight: 700; }

/* ---------- Toolbar / segmented ---------- */
.toolbar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg button { border: none; background: none; padding: 5px var(--sp-3); border-radius: 0; font-size: calc(12.5px * var(--ui-scale)); font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------- Table ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th { text-align: left; font-size: calc(10.5px * var(--ui-scale)); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 700; padding: 0 var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); }
.tbl tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
.tbl tbody tr:hover { background: var(--panel); cursor: pointer; }
.tbl tbody tr:last-child { border-bottom: none; }
.tbl td { padding: var(--sp-3) var(--sp-4); vertical-align: middle; }
.row-name { display: flex; align-items: center; gap: var(--sp-3); }
.row-avatar { width: 40px; height: 40px; border-radius: 0; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: calc(14px * var(--ui-scale)); font-family: var(--font-display); }
.row-title { font-weight: 600; font-size: calc(14px * var(--ui-scale)); }
.row-sub { font-size: calc(11.5px * var(--ui-scale)); color: var(--text-faint); margin-top: 1px; }
.cell-muted { color: var(--text-muted); font-size: calc(13px * var(--ui-scale)); }

/* ======================================================
   FORM LANGUAGE — colleague's "Personalização da Paciente"
   ====================================================== */

/* navy command header (form band) */
.form-band {
  background: linear-gradient(105deg, var(--navy), var(--navy-2));
  color: var(--navy-text); border-bottom: 1px solid var(--navy-line);
  padding: var(--sp-4) var(--sp-6); display: flex; align-items: center; gap: var(--sp-4);
  flex: none;
}
.form-band.light { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); }
.form-band-mark { width: 44px; height: 44px; border-radius: 0; flex: none; display: grid; place-items: center; background: oklch(1 0 0 / 0.06); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.1); }
.form-band.light .form-band-mark { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.fb-wordmark { font-weight: 800; font-size: calc(13px * var(--ui-scale)); letter-spacing: 0.04em; line-height: 1; }
.fb-wordmark .pressus { color: var(--accent); }
.form-band.light .fb-wordmark .pressus { color: var(--accent-ink); }
.fb-divider { width: 1px; height: 34px; background: var(--navy-line); }
.form-band.light .fb-divider { background: var(--border); }
.fb-title { font-weight: 800; font-size: calc(23px * var(--ui-scale)); letter-spacing: -0.01em; line-height: 1.05; white-space: nowrap; }
.fb-sub { font-size: calc(12.5px * var(--ui-scale)); color: var(--navy-faint); margin-top: 3px; white-space: nowrap; }
.form-band.light .fb-sub { color: var(--text-muted); }
.fb-spacer { flex: 1; }
.fb-back { display: inline-flex; align-items: center; gap: 6px; background: oklch(1 0 0 / 0.07); border: 1px solid oklch(1 0 0 / 0.12); color: var(--navy-text); border-radius: var(--r-sm); padding: 8px 14px; font-size: calc(12.5px * var(--ui-scale)); font-weight: 600; white-space: nowrap; }
.fb-back:hover { background: oklch(1 0 0 / 0.13); }
.form-band.light .fb-back { background: var(--panel); border-color: var(--border-strong); color: var(--text-muted); }
.fb-heading, .fb-actions { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.fb-actions { gap: var(--sp-2); flex: none; }

/* form body */
.form-body { padding: var(--sp-6) var(--sp-6) var(--sp-7); max-width: 1280px; margin: 0 auto; width: 100%; }
.form-body.narrow { max-width: 760px; }

/* numbered section */
.fsection { margin-bottom: var(--sp-5); }
.fsection-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.fsection-num { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--accent); color: white; display: grid; place-items: center; font-weight: 800; font-size: calc(14px * var(--ui-scale)); box-shadow: 0 1px 0 oklch(1 0 0 / 0.2) inset; }
.fsection-title { font-weight: 800; font-size: calc(16px * var(--ui-scale)); text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-ink); white-space: nowrap; }
.fcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5); }
.fcard.split { display: grid; grid-template-columns: 1fr 1px 1.15fr; gap: var(--sp-5); align-items: start; }
.fcard .vrule { background: var(--border); align-self: stretch; }

.fgrid { display: grid; gap: var(--sp-5); }
.fgrid.c4 { grid-template-columns: repeat(4, 1fr); }
.fgrid.c3 { grid-template-columns: repeat(3, 1fr); }
.fgrid.c2 { grid-template-columns: repeat(2, 1fr); }

.flabel { display: block; font-size: calc(12.5px * var(--ui-scale)); font-weight: 600; color: var(--text-muted); margin-bottom: var(--sp-2); }
.flabel .opt { color: var(--text-faint); font-weight: 500; }
.fhint { font-size: calc(12px * var(--ui-scale)); color: var(--text-faint); margin: -2px 0 var(--sp-3); }
.frow { display: flex; align-items: center; gap: var(--sp-2); }

/* stepper */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; height: calc(46px * var(--ui-scale)); }
.stepper button { width: calc(44px * var(--ui-scale)); align-self: stretch; border: none; background: var(--panel); color: var(--text-muted); font-size: 18px; font-weight: 600; display: grid; place-items: center; }
.stepper button:hover { background: var(--panel-2); color: var(--accent-ink); }
.stepper .val { min-width: calc(56px * var(--ui-scale)); text-align: center; font-weight: 700; font-size: calc(17px * var(--ui-scale)); font-variant-numeric: tabular-nums; }
.unit { color: var(--text-faint); font-size: calc(13px * var(--ui-scale)); margin-left: var(--sp-2); }

/* select / text input */
.finput { display: flex; align-items: center; gap: var(--sp-2); height: calc(46px * var(--ui-scale)); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); padding: 0 var(--sp-3); transition: border-color .12s, box-shadow .12s; }
.finput:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.finput input, .finput select { flex: 1; border: none; background: none; outline: none; color: var(--text); font-size: calc(14.5px * var(--ui-scale)); font-weight: 500; min-width: 0; }
/* O <select> precisa de background-color explícito (não "none"): a lista suspensa é
   renderizada pelo navegador fora do fluxo do .finput, então "transparent" cai no
   branco padrão do SO — no tema escuro isso deixa texto claro sobre fundo claro. */
.finput select { appearance: none; cursor: pointer; background-color: var(--surface); }
.finput select option { background-color: var(--surface); color: var(--text); }
.finput .lead { color: var(--text-faint); display: flex; flex: none; }
.finput .trail { color: var(--text-faint); display: flex; flex: none; }
.finput .imc-flag { font-weight: 700; font-size: calc(13px * var(--ui-scale)); }
.imc-normal { color: var(--go-ink); }
.finput input[readonly] { color: var(--text-muted); cursor: default; }
.case-form-fields { border: 0; margin: 0; min-inline-size: 0; padding: 0; }
.case-form-fields:disabled { opacity: 1; }
.case-form-fields:disabled input, .case-form-fields:disabled textarea, .case-form-fields:disabled select { cursor: not-allowed; }
.validation-summary { margin: 0 0 var(--sp-4); }
.validation-summary:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.validation-summary ul, .lifecycle-error ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.form-field.invalid .finput,
.form-field.invalid .login-input,
.form-field.invalid .ftextarea,
.validation-field.invalid { border-color: var(--cds-support-error); box-shadow: 0 0 0 1px var(--cds-support-error); }
.form-field.invalid .flabel { color: var(--cds-support-error); }
.field-error-message { margin-top: var(--sp-2); color: var(--cds-support-error); font-size: calc(12px * var(--ui-scale)); font-weight: 600; line-height: 1.35; }
.case-reference-field { width: 180px; flex: none; }
.link-button { border: 0; padding: 0; background: none; color: var(--accent-ink); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.login-error { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--panel); border: 1px solid var(--cds-support-error); border-radius: var(--r-sm); color: var(--text); font-size: 13px; line-height: 1.4; }
.login-error svg { color: var(--cds-support-error); flex: none; margin-top: 1px; }
.imc-over { color: var(--st-review); }

/* segmented binary / multi (Pós-menopausa, Não/Sim) */
.segbtns { display: inline-grid; grid-auto-flow: column; gap: var(--sp-2); }
.segbtns.fill { display: grid; grid-template-columns: 1fr 1fr; }
.segbtn { height: calc(46px * var(--ui-scale)); border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text-muted); font-weight: 600; font-size: calc(14px * var(--ui-scale)); padding: 0 var(--sp-5); transition: all .12s; }
.segbtn:hover { border-color: var(--accent-line); }
.segbtn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

/* icon-card selector (Tipo de Parto, Tônus, Relaxamento) */
.icards { display: grid; gap: var(--sp-3); }
.icards.c3 { grid-template-columns: repeat(3, 1fr); }
.icards.c2 { grid-template-columns: repeat(2, 1fr); }
.icard { border: 1.5px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); transition: all .12s; min-height: calc(86px * var(--ui-scale)); justify-content: center; }
.icard:hover { border-color: var(--accent-line); background: var(--panel); }
.icard.on { border-color: var(--accent); background: var(--accent-soft); }
.icard-glyph { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--text-faint); border: 1px solid var(--border); transition: all .12s; }
.icard.on .icard-glyph { background: var(--accent); color: white; border-color: var(--accent); }
.icard-label { font-size: calc(13px * var(--ui-scale)); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.icard.on .icard-label { color: var(--accent-ink); }

/* checkbox chips (Queixa Principal) */
.checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.checks.c2 { grid-template-columns: repeat(2, 1fr); }
.checkrow { display: flex; align-items: center; gap: var(--sp-3); border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); padding: calc(11px * var(--ui-scale)) var(--sp-3); font-weight: 500; font-size: calc(13.5px * var(--ui-scale)); color: var(--text); transition: all .12s; text-align: left; }
.checkrow:hover { border-color: var(--accent-line); }
.checkrow.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.cbox { width: 20px; height: 20px; border-radius: 0; flex: none; border: 1.5px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; color: white; transition: all .12s; }
.checkrow.on .cbox { background: var(--accent); border-color: var(--accent); }
.cbox svg { opacity: 0; transition: opacity .1s; }
.checkrow.on .cbox svg { opacity: 1; }

/* grupo recolhível (filtro de tipo de operação na Auditoria) */
.acc { display: flex; flex-direction: column; gap: var(--sp-3); }
.acc-group { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.acc-head { display: flex; align-items: center; gap: var(--sp-3); width: 100%; border: none; background: var(--panel); color: var(--text); padding: var(--sp-3) var(--sp-4); font-weight: 600; font-size: calc(13.5px * var(--ui-scale)); cursor: pointer; text-align: left; transition: background .12s; }
.acc-head:hover { background: var(--panel-2); }
.acc-chevron { flex: none; color: var(--text-faint); transition: transform .12s; }
.acc-chevron.open { transform: rotate(90deg); }
.acc-label { flex: 1; }
.acc-body { padding: var(--sp-4); border-top: 1px solid var(--border); background: var(--surface); }

/* nested sub-panel (conditional reveal) */
.subpanel { border: 1px solid var(--accent-line); border-radius: var(--r-sm); background: var(--accent-soft); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3); animation: revealSub .22s cubic-bezier(.2,.7,.3,1); }
@keyframes revealSub { from { transform: translateY(-4px); } }
.subpanel-title { font-size: calc(12.5px * var(--ui-scale)); font-weight: 700; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.radios { display: flex; flex-direction: column; gap: var(--sp-2); }
.radiorow { display: flex; align-items: center; gap: var(--sp-2); font-size: calc(13.5px * var(--ui-scale)); font-weight: 500; color: var(--text); }
.rdot { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1.5px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; }
.rdot i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .12s; }
.radiorow.on .rdot { border-color: var(--accent); }
.radiorow.on .rdot i { transform: scale(1); }
.radiorow.on { color: var(--accent-ink); font-weight: 600; }
.radios.inline { flex-direction: row; gap: var(--sp-4); }

/* number-circle selector (Oxford) */
.numscale { display: flex; gap: var(--sp-2); }
.numdot { width: calc(40px * var(--ui-scale)); height: calc(40px * var(--ui-scale)); border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-weight: 700; font-size: calc(15px * var(--ui-scale)); display: grid; place-items: center; transition: all .12s; }
.numdot:hover { border-color: var(--accent-line); }
.numdot.on { background: var(--accent); border-color: var(--accent); color: white; }
.scale-caption { font-size: calc(12.5px * var(--ui-scale)); font-weight: 600; color: var(--accent-ink); margin-top: var(--sp-3); }

/* slider (EVA) */
.fslider-wrap { padding-top: var(--sp-2); }
.fslider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: var(--panel-2); outline: none; }
.fslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; }
.fslider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; }
.fslider-scale { display: flex; justify-content: space-between; font-size: calc(11px * var(--ui-scale)); color: var(--text-faint); margin-top: 4px; font-variant-numeric: tabular-nums; }
.eva-readout { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.eva-box { display: flex; align-items: baseline; gap: 3px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 6px var(--sp-3); background: var(--surface); }
.eva-box b { font-size: calc(18px * var(--ui-scale)); font-weight: 800; font-variant-numeric: tabular-nums; }
.eva-box .of { color: var(--text-faint); font-size: calc(12px * var(--ui-scale)); }
.eva-word { font-weight: 600; font-size: calc(13px * var(--ui-scale)); color: var(--accent-ink); }

/* anatomical grade cards */
.anatrow { display: grid; gap: var(--sp-3); }
.anatrow.c5 { grid-template-columns: repeat(5, 1fr); }
.anatrow.c4 { grid-template-columns: repeat(4, 1fr); }
.anatcard { border: 1.5px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); padding: var(--sp-3) var(--sp-2) var(--sp-2); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); transition: all .12s; }
.anatcard:hover { border-color: var(--accent-line); }
.anatcard.on { border-color: var(--accent); background: var(--accent-soft); }
.anat-illo { width: 100%; height: calc(66px * var(--ui-scale)); border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; }
.anatcard.on .anat-illo { background: var(--surface); border-color: var(--accent-line); }
.anat-label { font-size: calc(12.5px * var(--ui-scale)); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.anatcard.on .anat-label { color: var(--accent-ink); }

.callout { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px var(--sp-3); font-size: calc(12.5px * var(--ui-scale)); color: var(--text-muted); font-weight: 500; }
.callout .ico { color: var(--accent); }
.callout b { color: var(--accent-ink); }

.field-divider { height: 1px; background: var(--border); margin: 0 var(--sp-2); }

/* ======================================================
   Formulário de Caso — navegação por abas (Carbon Tabs)
   ====================================================== */
.ctabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); border-bottom: 1px solid var(--border); padding-bottom: var(--sp-3); margin-bottom: var(--sp-5); }
.ctab { position: relative; flex: none; border: 1px solid transparent; background: none; padding: var(--sp-3) var(--sp-4); font-size: calc(13.5px * var(--ui-scale)); font-weight: 600; color: var(--text-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-2); transition: color .12s, background-color .12s, border-color .12s; }
.ctab:hover { color: var(--text); border-color: var(--border-strong); }
.ctab.on { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }
.ctab .ctab-i { display: flex; color: inherit; }
.ctab .ctab-badge { font-family: var(--font-mono); font-size: calc(10.5px * var(--ui-scale)); background: var(--panel); border: 1px solid var(--border); padding: 0 5px; color: var(--text-faint); }
.ctab.on .ctab-badge { background: var(--panel); border-color: var(--accent-line); color: var(--accent-ink); }
.tabpane { animation: revealSub .2s cubic-bezier(.2,.7,.3,1); }

/* Texto livre (HDA, observações, anotações) */
.ftextarea { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); padding: var(--sp-3); font-size: calc(14px * var(--ui-scale)); line-height: 1.55; color: var(--text); resize: vertical; min-height: 92px; outline: none; transition: border-color .12s, box-shadow .12s; font-family: inherit; }
.ftextarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Tabela de saídas do exame físico (Normal / Alterado) */
.exam-table { width: 100%; border-collapse: collapse; }
.exam-table th, .exam-table td { text-align: left; padding: calc(10px * var(--ui-scale)) var(--sp-3); border-bottom: 1px solid var(--border); font-size: calc(13.5px * var(--ui-scale)); }
.exam-table thead th { font-size: calc(11.5px * var(--ui-scale)); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-faint); font-weight: 700; }
.exam-table thead th.c { text-align: center; width: 96px; }
.exam-table td.c { text-align: center; }
.exam-table .row-name { font-weight: 600; color: var(--text); }
.exam-table .row-name small { display: block; font-weight: 500; color: var(--text-faint); font-size: calc(11.5px * var(--ui-scale)); }
.exam-table tr.locked td { opacity: 0.72; background: var(--panel); }

/* Campo bloqueado (Componente C — não reproduzido pelo simulador) */
.lock-note { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: calc(12px * var(--ui-scale)); color: var(--text-muted); margin-top: var(--sp-2); }
.lock-note .ico { color: var(--text-faint); flex: none; margin-top: 1px; }
.pill-lock { display: inline-flex; align-items: center; gap: 5px; font-size: calc(11px * var(--ui-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-faint); background: var(--panel); border: 1px solid var(--border); border-radius: 0; padding: 2px 7px; }

/* Valores manométricos fixos (autorizados) */
.mano-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
.mano-cell { border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); padding: var(--sp-3) var(--sp-2); text-align: center; transition: all .12s; }
.mano-cell:hover { border-color: var(--accent-line); }
.mano-cell.on { border-color: var(--accent); background: var(--accent-soft); }
.mano-cell .lvl { font-size: calc(11px * var(--ui-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-faint); }
.mano-cell.on .lvl { color: var(--accent-ink); }
.mano-cell .val { font-size: calc(17px * var(--ui-scale)); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); margin-top: 2px; }
.mano-cell .uni { font-size: calc(10.5px * var(--ui-scale)); color: var(--text-faint); }

/* Alerta clínico (contraindicações) */
.alert-callout { display: flex; align-items: flex-start; gap: var(--sp-3); background: var(--anat-soft); border: 1px solid var(--anat); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); font-size: calc(13px * var(--ui-scale)); color: var(--text); margin-top: var(--sp-3); }
.alert-callout .ico { color: var(--anat); flex: none; margin-top: 1px; }
.alert-callout b { color: var(--anat); }
/* Variante de aviso não bloqueante — alias do token Carbon, sem cor própria. */
.alert-callout.is-warning { background: transparent; border-color: var(--cds-support-warning); }
.alert-callout.is-warning .ico, .alert-callout.is-warning b { color: var(--cds-support-warning); }
.alert-callout.is-warning .publication-issues { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }

.diastasis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.diastasis-grid.single { grid-template-columns: 1fr; }
.diastasis-level { border: 0; min-inline-size: 0; margin: 0; padding: 0; }
.diastasis-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

/* ======================================================
   Tutorial editor (intentionally simple)
   ====================================================== */
.tut-meta { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: end; margin-bottom: var(--sp-5); }
.steps-rail { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 780px; }
.stepcard { display: flex; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: var(--sp-4); align-items: flex-start; transition: border-color .12s, box-shadow .12s; }
.stepcard:hover { border-color: var(--border-strong); }
.stepcard.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.step-handle { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; padding-top: 2px; }
.step-grip { color: var(--text-faint); cursor: grab; }
.step-n { width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2); color: var(--text-muted); font-weight: 700; font-size: calc(12px * var(--ui-scale)); display: grid; place-items: center; }
.step-main { flex: 1; min-width: 0; }
.step-kind-pick { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.kindpill { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--border-strong); border-radius: 0; background: var(--surface); color: var(--text-muted); padding: 5px 12px; font-size: calc(12.5px * var(--ui-scale)); font-weight: 600; white-space: nowrap; }
.kindpill:hover { border-color: var(--accent-line); }
.kindpill.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.step-text { width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); padding: var(--sp-3); font-size: calc(14.5px * var(--ui-scale)); line-height: 1.55; color: var(--text); resize: vertical; min-height: 64px; outline: none; transition: border-color .12s, box-shadow .12s; font-family: inherit; }
.step-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.step-actions { display: flex; flex-direction: column; gap: 4px; flex: none; }
.add-step { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: none; color: var(--text-muted); padding: var(--sp-4); font-weight: 600; font-size: calc(13.5px * var(--ui-scale)); max-width: 780px; transition: all .12s; }
.add-step:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }

.info-banner { display: flex; align-items: flex-start; gap: var(--sp-3); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); color: var(--accent-ink); font-size: calc(13px * var(--ui-scale)); margin-bottom: var(--sp-5); max-width: 760px; }
.info-banner .ico { flex: none; margin-top: 1px; }

/* ======================================================
   Modal
   ====================================================== */
.overlay { position: fixed; inset: 0; background: var(--cds-overlay); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 60; padding: var(--sp-5); animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; animation: rise .2s cubic-bezier(.2,.7,.3,1) both; }
.modal.wide { width: min(680px, 100%); }
@keyframes rise { from { transform: translateY(12px) scale(0.985); opacity: 0; } }
.modal-head { padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.modal-title { font-family: var(--font-display); font-size: calc(21px * var(--ui-scale)); font-weight: 600; margin: 0; }
.modal-body { padding: 0 var(--sp-5); overflow-y: auto; overflow-x: hidden; }
.modal-foot { padding: var(--sp-4) var(--sp-5); display: flex; gap: var(--sp-2); justify-content: flex-end; border-top: 1px solid var(--border); margin-top: var(--sp-4); }

.case-actions-heading { width: 176px; }
.case-row-actions { display: flex; justify-content: flex-end; gap: var(--sp-1); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ======================================================
   Login
   ====================================================== */
.login { height: 100%; display: grid; grid-template-columns: 1.05fr 1fr; }
.login-aside { background: linear-gradient(155deg, var(--navy), var(--navy-2)); color: var(--navy-text); padding: var(--sp-7); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.login-aside::after { content: ''; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, oklch(0.55 0.18 256 / 0.22), transparent 70%); }
.login-brand { display: flex; align-items: center; gap: var(--sp-3); }
.login-brand .brand-name { color: var(--navy-text); font-size: calc(17px * var(--ui-scale)); }
.login-brand .pressus { color: var(--accent); }
.login-aside-mid { margin-top: auto; margin-bottom: auto; max-width: 30ch; position: relative; z-index: 1; }
.login-tagline { font-family: var(--font-display); font-size: calc(34px * var(--ui-scale)); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
.login-tagsub { color: var(--navy-faint); font-size: calc(14px * var(--ui-scale)); margin-top: var(--sp-4); line-height: 1.5; }
.login-meta { display: flex; gap: var(--sp-5); position: relative; z-index: 1; }
.login-meta .lm-n { font-family: var(--font-display); font-size: calc(22px * var(--ui-scale)); font-weight: 600; }
.login-meta .lm-l { font-size: calc(11.5px * var(--ui-scale)); color: var(--navy-faint); margin-top: 2px; }
.login-main { display: grid; place-items: center; padding: var(--sp-6); background: var(--bg); }
.login-card { width: min(380px, 100%); }
.login-card h1 { font-family: var(--font-display); font-size: calc(26px * var(--ui-scale)); font-weight: 600; margin: 0 0 var(--sp-2); }
.login-card .sub { color: var(--text-muted); font-size: calc(13.5px * var(--ui-scale)); margin-bottom: var(--sp-5); }
.login-field { margin-bottom: var(--sp-4); }
.login-field label { display: block; font-size: calc(12px * var(--ui-scale)); font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.login-input { width: 100%; height: calc(46px * var(--ui-scale)); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); padding: 0 var(--sp-3); font-size: calc(14.5px * var(--ui-scale)); color: var(--text); outline: none; transition: border-color .12s, box-shadow .12s; }
.login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* toast */
.toast-wrap { position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; }
.toast { display: flex; align-items: center; gap: var(--sp-3); background: var(--navy); color: var(--navy-text); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-lg); font-size: calc(13.5px * var(--ui-scale)); font-weight: 500; animation: toastIn .25s cubic-bezier(.2,.7,.3,1); border: 1px solid var(--navy-line); }
.toast .t-ico { width: 24px; height: 24px; border-radius: 50%; background: var(--go); color: white; display: grid; place-items: center; flex: none; }
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } }

/* misc utils */
.fade-in { animation: slideUp .3s cubic-bezier(.2,.7,.3,1) both; }
@keyframes slideUp { from { transform: translateY(8px); } }
.divider { height: 1px; background: var(--border); margin: var(--sp-5) 0; }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.strong { font-weight: 600; }
.gap2 { gap: var(--sp-2); }
.mb3 { margin-bottom: var(--sp-3); }
.mb4 { margin-bottom: var(--sp-4); }
.mb5 { margin-bottom: var(--sp-5); }
.mt2 { margin-top: var(--sp-2); }
.mt4 { margin-top: var(--sp-4); }

/* ======================================================
   App bar (topbar do shell) — lar do tema e do hambúrguer
   ====================================================== */
.appbar {
  flex: none; display: flex; align-items: center; gap: var(--sp-2);
  height: calc(52px * var(--ui-scale)); padding: 0 var(--sp-5);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
/* Hambúrguer só existe no mobile; some no desktop. */
.nav-hamburger { display: none; }

/* Botão de tema sobre o chrome navy (form-band) precisa de ícone claro. */
.form-band .icon-btn { color: var(--navy-text); }
.form-band .icon-btn:hover { background: oklch(1 0 0 / 0.12); color: var(--navy-text); }
.form-band.light .icon-btn { color: var(--text-muted); }
.form-band.light .icon-btn:hover { background: var(--panel); color: var(--text); }

/* Botão de tema na tela de login (canto superior direito). */
.login-theme { position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 2; }
.login-aside .login-theme { color: var(--navy-text); }

/* Gaveta de navegação (overlay) — só visível no mobile com nav aberta. */
.nav-overlay { display: none; }

/* ======================================================
   Grids utilitários (substituem grids inline das views)
   ====================================================== */
.grid-2-main { grid-template-columns: 1.3fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.search-fluid { width: calc(260px * var(--ui-scale)); }

/* ======================================================
   Notificação inline, alerta vermelho e paginação
   Cards `notification` e `pagination` do design system (2026-07-30).
   Só alias de token; nenhuma cor definida aqui.
   ====================================================== */

.inline-note { display: flex; gap: var(--sp-4); align-items: flex-start; background: var(--surface); border-left: 3px solid var(--cds-support-info); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.inline-note .ico { flex: none; color: var(--cds-support-info); display: flex; }
.inline-note .conteudo { flex: 1; min-width: 0; }
.inline-note .titulo { font-weight: 600; font-size: calc(13.5px * var(--ui-scale)); }
.inline-note .texto { color: var(--text-muted); font-size: calc(13px * var(--ui-scale)); line-height: 1.5; }
.inline-note .fechar { flex: none; border: none; background: none; color: var(--text-muted); cursor: pointer; width: 28px; height: 28px; }
.inline-note .fechar:hover { background: var(--panel-2); }
.inline-note.is-error { border-left-color: var(--cds-support-error); }
.inline-note.is-error .ico { color: var(--cds-support-error); }
.inline-note.is-warning { border-left-color: var(--cds-support-warning); }
.inline-note.is-warning .ico { color: var(--cds-support-warning); }
.inline-note.is-success { border-left-color: var(--cds-support-success); }
.inline-note.is-success .ico { color: var(--cds-support-success); }

.alerta-vermelho { border: 1px solid var(--cds-support-error); border-left-width: 3px; background: var(--surface); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.alerta-vermelho .cabeca { display: flex; gap: var(--sp-2); align-items: center; color: var(--cds-support-error); font-weight: 600; font-size: calc(16px * var(--ui-scale)); margin-bottom: var(--sp-2); }
.alerta-vermelho .texto { color: var(--text); font-size: calc(13.5px * var(--ui-scale)); line-height: 1.5; }
.alerta-vermelho .ciencia { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: calc(13.5px * var(--ui-scale)); cursor: pointer; }
.alerta-vermelho .ciencia input { width: 16px; height: 16px; accent-color: var(--cds-support-error); }

.pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; min-height: 40px; background: var(--surface); border-top: 1px solid var(--border); font-size: calc(13px * var(--ui-scale)); }
.pagination .lado { display: flex; align-items: center; }
.pagination .rotulo { padding: 0 var(--sp-4); color: var(--text); }
.pagination .intervalo { padding: 0 var(--sp-4); color: var(--text); border-left: 1px solid var(--border); }
.pagination .lado:first-child .intervalo:first-child { border-left: none; }
.pagination select { appearance: none; background: var(--panel-2); border: none; border-bottom: 1px solid var(--border-strong); border-radius: 0; color: var(--text); font: inherit; height: 40px; padding: 0 var(--sp-5) 0 var(--sp-4); cursor: pointer; }
.pagination select:hover { background: var(--panel); }
.pagination select option { background-color: var(--panel-2); color: var(--text); }
.pagination .passo { width: 40px; height: 40px; border: none; border-left: 1px solid var(--border); background: none; color: var(--text); cursor: pointer; font-size: calc(15px * var(--ui-scale)); }
.pagination .passo:hover:not(:disabled) { background: var(--panel-2); }
.pagination .passo:disabled { color: var(--text-faint); cursor: not-allowed; }

/* ---------- Dispositivos de RV (ESP-0009) ---------- */
.qr-panel { display: flex; gap: var(--sp-6); align-items: flex-start; padding: var(--sp-5); margin-bottom: var(--sp-5); }
.qr-panel-texto { flex: 1; min-width: 0; }
.qr-panel-code { flex: none; }
.qr-img { display: block; background: #fff; padding: var(--sp-3); border: 1px solid var(--border); image-rendering: pixelated; }
.qr-fallback, .qr-url { display: inline-block; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: calc(12px * var(--ui-scale)); color: var(--text-muted); background: var(--panel); border: 1px solid var(--border); padding: 2px 6px; word-break: break-all; }
.segredo-box { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-4); background: var(--panel); border: 1px solid var(--border-strong); }
.segredo-box code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: calc(13px * var(--ui-scale)); color: var(--text); word-break: break-all; }

@media (max-width: 672px) {
  .qr-panel { flex-direction: column-reverse; align-items: stretch; }
  .qr-panel-code { align-self: center; }
}

/* ======================================================
   Responsividade
   Breakpoints alinhados ao Carbon: 1056px (lg) e 672px (md).
   ====================================================== */

/* —— ≤ 1056px: a sidebar vira gaveta off-canvas com hambúrguer —— */
@media (max-width: 1056px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 82vw);
    z-index: 70; transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.2, .7, .3, 1);
    box-shadow: var(--shadow-lg);
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open .nav-overlay {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: var(--cds-overlay); animation: fade .15s;
  }
  .nav-hamburger { display: grid; }

  .patient-form-band { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .patient-form-band > .nav-hamburger { grid-column: 1; }
  .patient-form-band .fb-heading { grid-column: 2; }
  .patient-form-band .fb-wordmark,
  .patient-form-band .fb-divider,
  .patient-form-band .fb-sub { display: none; }
  .patient-form-band .fb-spacer { display: none; }
  .patient-form-band .fb-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .diastasis-grid { grid-template-columns: 1fr; }

  /* Blocos de 2 colunas largas empilham. */
  .grid-2-main, .tut-meta { grid-template-columns: 1fr; }
  .fcard.split { grid-template-columns: 1fr; }
  .fcard.split .vrule { display: none; }
}

/* —— ≤ 672px: telas de celular/tablet pequeno —— */
@media (max-width: 672px) {
  .page { padding: var(--sp-5) var(--sp-4); }
  .form-body { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .appbar { padding: 0 var(--sp-4); }

  /* Cabeçalho do formulário: compacta e permite quebrar. */
  .form-band { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); flex-wrap: wrap; }
  .form-band .fb-wordmark, .form-band .fb-divider, .form-band .fb-sub { display: none; }
  .fb-title { white-space: normal; font-size: calc(18px * var(--ui-scale)); }
  .form-band .btn.go.lg, .form-band .btn.primary.lg { padding: calc(9px * var(--ui-scale)) var(--sp-4); font-size: calc(13px * var(--ui-scale)); }
  .patient-form-band { grid-template-columns: auto minmax(0, 1fr); }
  .patient-form-band .fb-heading { gap: var(--sp-2); }
  .patient-form-band .fb-heading .form-band-mark { display: none; }
  .patient-form-band .fb-actions { width: 100%; display: grid; grid-template-columns: auto 1fr; }
  .patient-form-band .fb-back { justify-self: end; }
  .patient-form-band .btn.go.lg, .patient-form-band .btn.primary.lg { grid-column: 1 / -1; width: 100%; }
  .diastasis-grid { grid-template-columns: 1fr; }
  .diastasis-fields { grid-template-columns: 1fr; }
  .case-identity-card { flex-wrap: wrap; }
  .case-reference-field { width: 100%; }

  /* Barra de ferramentas e busca fluem em largura total. */
  .toolbar { flex-wrap: wrap; }
  .search-fluid { width: 100%; }

  /* Colapso de grids de conteúdo. */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .fgrid.c4 { grid-template-columns: repeat(2, 1fr); }
  .fgrid.c3, .fgrid.c2 { grid-template-columns: 1fr; }
  .checks, .checks.c2 { grid-template-columns: 1fr; }
  .icards.c3 { grid-template-columns: repeat(2, 1fr); }
  .icards.c2 { grid-template-columns: 1fr; }
  .anatrow.c5 { grid-template-columns: repeat(3, 1fr); }
  .anatrow.c4 { grid-template-columns: repeat(2, 1fr); }
  .mano-grid { grid-template-columns: repeat(3, 1fr); }

  /* Tabelas: padding menor para caber em telas estreitas. */
  .tbl td, .tbl thead th { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .exam-table th, .exam-table td { padding-left: var(--sp-2); padding-right: var(--sp-2); }

  /* Rodapés/ações quebram em vez de transbordar. */
  .modal-foot { flex-wrap: wrap; }

  /* Abas do formulário de caso: em telas estreitas viram ícone-only (a quebra em
     várias linhas com rótulo completo consome espaço vertical demais); o rótulo
     aparece como hint (title) no hover e a aba ativa continua com ícone + texto. */
  .ctab { padding: var(--sp-3); min-width: 40px; min-height: 40px; justify-content: center; }
  .ctab.on { padding: var(--sp-3) var(--sp-4); justify-content: flex-start; }
  .ctab-label { display: none; }
  .ctab.on .ctab-label { display: inline; }
  .ctab:not(.on) .ctab-i svg { width: 20px; height: 20px; }
}

/* —— ≤ 480px: telas bem estreitas —— */
@media (max-width: 480px) {
  .stats, .fgrid.c4, .icards.c3 { grid-template-columns: 1fr; }
  .anatrow.c5, .anatrow.c4 { grid-template-columns: repeat(2, 1fr); }
  .mano-grid { grid-template-columns: repeat(2, 1fr); }
  .diastasis-fields { grid-template-columns: 1fr; }
  .patient-form-band .fb-actions { flex-wrap: wrap; }
}

@media (max-width: 900px) { .login { grid-template-columns: 1fr; } .login-aside { display: none; } }