/* Redesign das telas de avaliação clínica (Fase 2, módulo Feridas/TIMERS
   primeiro) — escopo estrito: só dentro de #homeShell .clinical-content
   (e do cabeçalho .clinical-header/.clinical-layout ao redor dela). Nada
   aqui vaza pro shell antigo (module-avaliacao-screen.js, estomia etc.
   continuam com styles.css puro) nem pras páginas administrativas já
   migradas em Fase 1 (Estoque/Configurações), que não usam estas classes.
   .section/.field/input/.item-card/etc. dentro de .clinical-content
   sobrescrevem os tokens antigos (--ink/--border-strong/--accent, de
   styles.css) pelos --dash-* já que #homeShell não redefine os primeiros. */

#homeShell .dash-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dash-text-secondary); margin-bottom: 14px; }
#homeShell .dash-back-link:hover { color: var(--dash-text-primary); }

/* ---------- Breadcrumb ---------- */
#homeShell .clinical-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dash-text-muted); margin-bottom: 10px; }
#homeShell .clinical-breadcrumb a { color: var(--dash-text-secondary); }
#homeShell .clinical-breadcrumb a:hover { color: var(--dash-green-primary); }
#homeShell .clinical-breadcrumb a:first-child::before { content: "← "; }
#homeShell .clinical-breadcrumb span { color: var(--dash-text-muted); }

/* ---------- Cabeçalho da avaliação — compacto, sem card grande ---------- */
#homeShell .clinical-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--dash-border);
}
#homeShell .clinical-header-title-row { display: flex; align-items: center; gap: 10px; }
#homeShell .clinical-header-main h1 { font-family: "Inter", sans-serif; font-size: 18px; font-weight: 700; color: var(--dash-text-primary); margin: 0; }
#homeShell .clinical-header-meta { font-size: 12.5px; color: var(--dash-text-secondary); margin-top: 3px; }
#homeShell .clinical-header-meta-muted { color: var(--dash-text-muted); }
#homeShell .clinical-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#homeShell .clinical-header-actions .btn { height: 38px; padding: 0 16px; border-radius: 8px; font-family: "Inter", sans-serif; }
#homeShell .clinical-header-actions .btn-primary { background: var(--dash-green-primary); border-color: var(--dash-green-primary); color: #fff; }
#homeShell .clinical-header-actions .btn-primary:hover { background: var(--dash-green-dark); }

/* ---------- Navegação horizontal (barra de seções) ---------- */
#homeShell .clinical-nav-bar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px; margin-bottom: 16px;
  background: var(--dash-border-light); border-radius: 10px; width: fit-content;
}
#homeShell .clinical-nav-bar a {
  font-size: 12.5px; font-weight: 600; color: var(--dash-text-secondary); text-decoration: none;
  padding: 6px 12px; border-radius: 7px;
}
#homeShell .clinical-nav-bar a:hover { color: var(--dash-text-primary); background: var(--dash-surface); }

/* ---------- Layout: conteúdo + resumo lateral sticky ---------- */
#homeShell .clinical-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; max-width: 1360px; }
#homeShell .clinical-content { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#homeShell .clinical-side { position: sticky; top: 84px; }

@media (max-width: 1180px) {
  #homeShell .clinical-layout { grid-template-columns: 1fr; }
  #homeShell .clinical-side { position: static; }
  #homeShell .clinical-nav-bar { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}

/* ---------- Cards clínicos (.section reaproveitado do form-engine) ---------- */
#homeShell .clinical-content .section,
#homeShell .clinical-side .dash-card {
  background: var(--dash-surface); border: 1px solid #E3E7EA; border-radius: 10px;
  box-shadow: none; overflow: visible;
}
#homeShell .clinical-content .section-head {
  min-height: 48px; padding: 0 18px; border-bottom: 1px solid var(--dash-border-light);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#homeShell .clinical-content .section-head h2 { font-family: "Inter", sans-serif; font-size: 14.5px; font-weight: 650; color: var(--dash-text-primary); display: flex; align-items: center; }
#homeShell .clinical-content .section-head .hint { font-size: 11.5px; color: var(--dash-text-muted); }
#homeShell .clinical-content .section-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }

/* Selo de letra TIMERS (T/I/M/E/R/S) — pastel, discreto, antes do título. */
#homeShell .clinical-letter-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 6px; font-size: 12px; font-weight: 700; margin-right: 8px; flex-shrink: 0;
}
#homeShell .clinical-letter-badge.t { background: #F3E8E1; color: #9C6B43; }
#homeShell .clinical-letter-badge.i { background: var(--dash-orange-soft); color: var(--dash-orange); }
#homeShell .clinical-letter-badge.m { background: var(--dash-blue-soft); color: var(--dash-blue); }
#homeShell .clinical-letter-badge.e { background: var(--dash-green-soft); color: var(--dash-green-primary); }
#homeShell .clinical-letter-badge.r { background: var(--dash-purple-soft); color: var(--dash-purple); }
#homeShell .clinical-letter-badge.s { background: #F1EEE5; color: #8B7355; }

#homeShell .clinical-content .grid { gap: 10px 12px; }
#homeShell .clinical-content .field label { font-size: 12px; font-weight: 600; color: var(--dash-text-secondary); }
#homeShell .clinical-content .field .derived,
#homeShell .clinical-content .derived,
#homeShell .clinical-content .empty-note { font-size: 12px; color: var(--dash-text-muted); }
#homeShell .clinical-content .eyebrow { color: var(--dash-green-primary); font-size: 11px; }

#homeShell .clinical-content input,
#homeShell .clinical-content select,
#homeShell .clinical-content textarea {
  font-family: "Inter", sans-serif; font-size: 13.5px; color: var(--dash-text-primary); background: var(--dash-surface);
  border: 1px solid var(--dash-border); border-radius: 8px; padding: 0 10px; height: 38px;
}
#homeShell .clinical-content textarea { height: auto; padding: 8px 10px; min-height: 64px; }
#homeShell .clinical-content input:focus-visible,
#homeShell .clinical-content select:focus-visible,
#homeShell .clinical-content textarea:focus-visible { outline: 2px solid var(--dash-green-primary); outline-offset: 1px; }

/* Medidas da lesão: reordena visualmente os campos do MESMO grid (sem
   mover nenhum input do DOM) — linha 1 dados inseridos (comprimento,
   largura, profundidade), linha 2 (tunelização, descolamento), divisor,
   linha 3 resultados calculados (formato/área/volume). */
#homeShell #sec-medidas .grid { grid-template-columns: repeat(3, 1fr); }
#homeShell #sec-medidas .field:has([data-key="comprimento_cm"]) { order: 1; }
#homeShell #sec-medidas .field:has([data-key="largura_cm"]) { order: 2; }
#homeShell #sec-medidas .field:has([data-key="profundidade_cm"]) { order: 3; }
#homeShell #sec-medidas .field:has([data-key="tunelizacao_cm"]) { order: 4; }
#homeShell #sec-medidas .field:has([data-key="descolamento_cm"]) { order: 5; }
#homeShell #sec-medidas .clinical-medidas-divider { order: 6; }
#homeShell #sec-medidas .field:has([data-key="formato_deduzido"]) { order: 7; }
#homeShell #sec-medidas .field:has([data-key="area_cm2"]) { order: 8; }
#homeShell #sec-medidas .field:has([data-key="volume_cm3"]) { order: 9; }

#homeShell .clinical-medidas-divider {
  grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 10px; border-top: 1px dashed var(--dash-border); margin-top: 2px;
}
#homeShell .clinical-medidas-divider span:first-child { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dash-text-muted); }
#homeShell .clinical-medidas-divider .derived { font-size: 11.5px; }

/* Campo calculado (generated column no banco) — cartão de leitura, não
   input desabilitado genérico. */
#homeShell .clinical-content .field:has(input.field-computed) {
  background: #F6F7F8; border: 1px solid var(--dash-border-light); border-radius: 8px; padding: 8px 10px 6px; gap: 2px;
}
#homeShell .clinical-content .field:has(input.field-computed) label::after { content: " · Calculado"; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--dash-text-muted); }
#homeShell .clinical-content input.field-computed {
  background: transparent; border: none; color: var(--dash-text-primary); font-weight: 650; font-size: 14px;
  cursor: default; padding: 0; height: auto;
}

/* Registro assinado: o formulário inteiro vira leitura de documento, não
   "campos desabilitados feios" — sem borda de input, sem fundo de campo. */
#homeShell .clinical-content.is-signed input:disabled,
#homeShell .clinical-content.is-signed select:disabled,
#homeShell .clinical-content.is-signed textarea:disabled {
  background: transparent; border-color: transparent; color: var(--dash-text-primary); opacity: 1; padding-left: 0;
}
#homeShell .clinical-content.is-signed input.field-computed:disabled { background: transparent; padding-left: 0; }
#homeShell .clinical-content.is-signed .radio-option,
#homeShell .clinical-content.is-signed .switch-chip { pointer-events: none; }

/* "S — Fatores sistêmicos", parte 1 (somente leitura, vindo da anamnese). */
#homeShell .clinical-content .clinical-readonly-block {
  background: var(--dash-border-light); border-radius: 8px; padding: 12px 14px; font-size: 13px; color: var(--dash-text-primary);
}
#homeShell .clinical-content .clinical-readonly-block .eyebrow { color: var(--dash-text-muted); }

/* Evolução: card compacto quando ainda não há gráfico pra plotar. */
#homeShell .clinical-evolucao-empty { flex-direction: row; align-items: center; gap: 10px; padding: 12px 18px; color: var(--dash-text-muted); }
#homeShell .clinical-evolucao-empty svg { flex-shrink: 0; }
#homeShell .clinical-evolucao-empty p { font-size: 12.5px; margin: 0; flex: 1; }
#homeShell .clinical-evolucao-empty .clinical-evolucao-nota { flex-basis: 100%; margin-top: 2px; }
#homeShell .clinical-evolucao-nota { font-size: 11px; }

/* Tecido (T): 2x2 em vez de 4 em linha. */
#homeShell .clinical-content .tissue-inputs { grid-template-columns: repeat(2, 1fr); }
#homeShell .clinical-content .tissue-bar { border-color: var(--dash-border); }
#homeShell .clinical-content .tissue-legend,
#homeShell .clinical-content .tissue-input label { color: var(--dash-text-secondary); }
#homeShell .clinical-content .tissue-sum-warn { color: var(--dash-orange); }

/* Unidade do atendimento: faixa compacta, não uma seção clínica de peso
   igual a T/I/M/E — mesmo DOM de unidade-select.js, só reorganizado via
   CSS (a função é compartilhada com outras avaliações ainda no shell
   antigo, então nada de alterar a marcação por lá). */
#homeShell #sec-unidade .section-body { padding: 10px 18px; }
#homeShell #sec-unidade .field { flex-direction: row; align-items: center; gap: 10px; }
#homeShell #sec-unidade .field label { white-space: nowrap; }
#homeShell #sec-unidade select { max-width: 260px; }
#homeShell #sec-unidade .empty-note { margin: 0; }

#homeShell .clinical-content .radio-option,
#homeShell .clinical-content .switch-chip {
  border: 1px solid var(--dash-border); background: var(--dash-surface);
}
#homeShell .clinical-content .radio-option:has(input:checked),
#homeShell .clinical-content .switch-chip:has(input:checked) {
  background: var(--dash-green-soft); border-color: var(--dash-green-primary);
}
#homeShell .clinical-content .radio-option span,
#homeShell .clinical-content .switch-chip span { color: var(--dash-text-primary); }

#homeShell .clinical-content .item-card {
  border: 1px solid var(--dash-border); background: var(--dash-border-light); border-radius: 8px; padding: 12px 14px;
}
#homeShell .clinical-content .item-card .badge { color: var(--dash-text-muted); }

#homeShell .clinical-content .btn {
  height: 38px; padding: 0 14px; border-color: var(--dash-border); color: var(--dash-text-primary); background: var(--dash-surface);
  border-radius: 8px; font-family: "Inter", sans-serif;
}
#homeShell .clinical-content .btn:hover { background: var(--dash-border-light); }
#homeShell .clinical-content .btn-primary { background: var(--dash-green-primary); border-color: var(--dash-green-primary); color: #fff; }
#homeShell .clinical-content .btn-primary:hover { background: var(--dash-green-dark); }

/* ---------- Telas intermediárias (módulo Lesões / lesão específica) ----------
   Reaproveitam pageHeaderHtml/sectionCardHtml/emptyStateHtml/readOnlyFieldHtml
   do ui-kit (já com o visual dash-* certo por padrão) — só as classes novas
   abaixo (grid de lesões, layout de 2 colunas, timeline) precisam de CSS. */
#homeShell .clinical-page { max-width: 1280px; }
#homeShell .clinical-page .dash-page-header { margin-bottom: 18px; }
#homeShell .clinical-page .dash-page-actions { display: flex; align-items: center; gap: 10px; }
#homeShell .clinical-page .dash-page-actions .btn,
#homeShell .clinical-page .dash-page-actions .btn-primary {
  height: 38px; padding: 0 14px; border-radius: 8px; font-family: "Inter", sans-serif;
  display: inline-flex; align-items: center; width: auto;
}
#homeShell .clinical-page .dash-page-actions .btn-primary { background: var(--dash-green-primary); border-color: var(--dash-green-primary); color: #fff; }
#homeShell .clinical-page .dash-page-actions .btn-primary:hover { background: var(--dash-green-dark); }
#homeShell .clinical-page .dash-page-actions .btn:not(.btn-primary) { background: var(--dash-surface); border-color: var(--dash-border); color: var(--dash-text-primary); }

/* Cards de lesão (Tela A) */
#homeShell .clinical-lesion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
#homeShell .clinical-lesion-card {
  text-align: left; background: var(--dash-surface); border: 1px solid var(--dash-border); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 8px;
}
#homeShell .clinical-lesion-card:hover { border-color: var(--dash-green-primary); box-shadow: 0 2px 8px rgba(37, 41, 54, 0.06); }
#homeShell .clinical-lesion-card-head { display: flex; flex-direction: column; gap: 2px; }
#homeShell .clinical-lesion-card-head strong { font-size: 14px; color: var(--dash-text-primary); }
#homeShell .clinical-lesion-card-region { font-size: 12.5px; color: var(--dash-text-secondary); }
#homeShell .clinical-lesion-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
#homeShell .clinical-lesion-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--dash-text-muted); }
#homeShell .clinical-lesion-card-cta { color: var(--dash-green-primary); font-weight: 600; }

/* Layout de 2 colunas (Tela B: avaliações + resumo da lesão) */
#homeShell .clinical-lesion-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 0.85fr); gap: 20px; align-items: start; }
#homeShell .clinical-lesion-side { position: sticky; top: 84px; }
@media (max-width: 1100px) { #homeShell .clinical-lesion-layout { grid-template-columns: 1fr; } #homeShell .clinical-lesion-side { position: static; } }

/* Timeline vertical de avaliações */
#homeShell .clinical-timeline { display: flex; flex-direction: column; }
#homeShell .clinical-timeline-item {
  display: flex; align-items: flex-start; gap: 12px; text-align: left; background: transparent; border: none;
  padding: 10px 4px; cursor: pointer; position: relative; width: 100%;
}
#homeShell .clinical-timeline-item:hover { background: var(--dash-border-light); border-radius: 8px; }
#homeShell .clinical-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dash-border); margin-top: 5px; flex-shrink: 0; position: relative; }
#homeShell .clinical-timeline-dot.is-latest { background: var(--dash-green-primary); }
#homeShell .clinical-timeline-item:not(:last-child) .clinical-timeline-dot::after {
  content: ""; position: absolute; top: 12px; left: 4px; width: 1px; height: 38px; background: var(--dash-border);
}
#homeShell .clinical-timeline-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#homeShell .clinical-timeline-head { display: flex; align-items: center; gap: 10px; }
#homeShell .clinical-timeline-date { font-size: 13.5px; font-weight: 600; color: var(--dash-text-primary); }
#homeShell .clinical-timeline-sub { font-size: 12.5px; color: var(--dash-text-secondary); }
#homeShell .clinical-timeline-extra { margin-left: 8px; color: var(--dash-text-muted); }
#homeShell .clinical-timeline-cta { font-size: 12.5px; color: var(--dash-green-primary); font-weight: 600; white-space: nowrap; align-self: center; }

/* Lista simples (uma única avaliação — sem trilho de timeline) */
#homeShell .clinical-simple-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: var(--dash-border-light); border: none; border-radius: 8px; padding: 12px 14px; cursor: pointer; text-align: left;
}
#homeShell .clinical-simple-item .clinical-timeline-head { display: flex; align-items: center; gap: 10px; }
#homeShell .clinical-simple-item .clinical-timeline-date { font-size: 13.5px; font-weight: 600; color: var(--dash-text-primary); }
#homeShell .clinical-simple-item .clinical-timeline-sub { font-size: 12.5px; color: var(--dash-text-secondary); }

/* ---------- Estomia / Assoalho pélvico — telas de avaliação ----------
   Padrão de largura/grid validado primeiro em Estomia (correção pedida
   pela Vitória 2026-08-13: "área vazia à direita" + campos todos com a
   mesma largura) — a partir de Assoalho pélvico já nasce assim, sem
   precisar de uma primeira rodada rejeitada. Cada página nova soma sua
   própria classe (.clinical-estomia-page, .clinical-pelvico-page) na
   lista de seletores abaixo, escopada de propósito — evita qualquer
   efeito colateral sobre a grid de 2/3 colunas já aprovada em Feridas
   (#sec-medidas, .tissue-inputs etc.), que usa as mesmas classes base
   .clinical-content/.grid/.field mas SEM nenhum destes wrappers. */
#homeShell .clinical-estomia-page,
#homeShell .clinical-pelvico-page { width: 100%; max-width: 1680px; }

/* Barra de navegação: largura por conteúdo (sem flex:1), rola na
   horizontal se não couber, gruda logo abaixo do topbar (68px). */
#homeShell .clinical-estomia-page .clinical-nav-bar,
#homeShell .clinical-pelvico-page .clinical-nav-bar {
  flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
  position: sticky; top: 68px; z-index: 12;
}
#homeShell .clinical-estomia-page .clinical-nav-bar a,
#homeShell .clinical-pelvico-page .clinical-nav-bar a { flex: 0 0 auto; white-space: nowrap; }

/* Grid de formulário de 12 colunas — cada campo recebe uma largura
   proporcional ao tipo/conteúdo em vez de todos dividirem o espaço
   igualmente (o problema original: um campo numérico de 2 dígitos
   ocupava a mesma largura de um textarea). Puramente apresentação: não
   move nenhum campo, não muda a ordem, não cria/remove nada — só reflui
   os MESMOS elementos que form-engine.js já gera dentro de um grid
   diferente. */
#homeShell .clinical-estomia-page .clinical-content .grid,
#homeShell .clinical-pelvico-page .clinical-content .grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px 18px;
}
#homeShell .clinical-estomia-page .clinical-content .field,
#homeShell .clinical-pelvico-page .clinical-content .field { grid-column: span 4; min-width: 0; }
#homeShell .clinical-estomia-page .clinical-content .field:has(> input[type="number"]),
#homeShell .clinical-pelvico-page .clinical-content .field:has(> input[type="number"]) { grid-column: span 3; }
#homeShell .clinical-estomia-page .clinical-content .field:has(> input[type="date"]),
#homeShell .clinical-pelvico-page .clinical-content .field:has(> input[type="date"]) { grid-column: span 3; }
#homeShell .clinical-estomia-page .clinical-content .field:has(> input[type="time"]),
#homeShell .clinical-pelvico-page .clinical-content .field:has(> input[type="time"]) { grid-column: span 2; }
#homeShell .clinical-estomia-page .clinical-content .field:has(> select),
#homeShell .clinical-pelvico-page .clinical-content .field:has(> select) { grid-column: span 4; }
#homeShell .clinical-estomia-page .clinical-content .field:has(> input[type="text"]),
#homeShell .clinical-pelvico-page .clinical-content .field:has(> input[type="text"]) { grid-column: span 4; }
#homeShell .clinical-estomia-page .clinical-content .field:has(textarea),
#homeShell .clinical-pelvico-page .clinical-content .field:has(textarea) { grid-column: span 12; }
#homeShell .clinical-estomia-page .clinical-content .field:has(.checklist-jsonb),
#homeShell .clinical-pelvico-page .clinical-content .field:has(.checklist-jsonb) { grid-column: span 12; }
#homeShell .clinical-estomia-page .clinical-content .field:has(.radio-group),
#homeShell .clinical-pelvico-page .clinical-content .field:has(.radio-group) { grid-column: span 6; }
#homeShell .clinical-estomia-page .clinical-content .field.field-checkbox-row,
#homeShell .clinical-pelvico-page .clinical-content .field.field-checkbox-row { grid-column: span 4; }
@media (max-width: 900px) {
  #homeShell .clinical-estomia-page .clinical-content .field,
  #homeShell .clinical-pelvico-page .clinical-content .field { grid-column: span 12 !important; }
}

/* Medidas: spans explícitos — 4 medidas curtas na 1ª linha (span 3 cada,
   preenchendo as 12 colunas), os 3 campos "maiores" (volume/área/dor)
   numa 2ª linha cheia (span 4 cada). ID próprio (sec-medidas-estomia, não
   sec-medidas) de propósito — sec-medidas já existe em Feridas com seu
   próprio grid de 3 colunas (clinical-form.css acima); reaproveitar o
   mesmo ID aqui faria a regra de lá (mais específica, 2 IDs) vencer esta. */
#homeShell #sec-medidas-estomia .field:has([data-key="medida_horizontal_cm"]),
#homeShell #sec-medidas-estomia .field:has([data-key="medida_vertical_cm"]),
#homeShell #sec-medidas-estomia .field:has([data-key="diametro_cm"]),
#homeShell #sec-medidas-estomia .field:has([data-key="altura_protrusao_cm"]) { grid-column: span 3; }
#homeShell #sec-medidas-estomia .field:has([data-key="efluente_volume_24h_ml"]),
#homeShell #sec-medidas-estomia .field:has([data-key="pele_periestomal_area_cm2"]),
#homeShell #sec-medidas-estomia .field:has([data-key="pele_periestomal_dor"]) { grid-column: span 4; }

/* Checklists (sinais de alerta, achados do estoma, complicações,
   adjuvantes, sintomas, queixas etc.): grid interno compacto, número de
   colunas se ajusta sozinho à largura/quantidade de itens em vez do
   padrão global de 3 colunas fixas. */
#homeShell .clinical-estomia-page .checklist-jsonb,
#homeShell .clinical-pelvico-page .checklist-jsonb {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px 16px;
}

/* Modal "Nova estomia" — blocos com título curto separando Identificação/
   Confecção/Contexto, mesmos campos e mesma lógica de sempre. O modal é
   anexado direto em document.body (mesmo padrão de todo modal do projeto),
   por isso esta regra fica fora do escopo #homeShell de propósito. */
.clinical-modal-block-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--dash-text-muted, #8A94A6); margin: 16px 0 6px;
}
.clinical-modal-block-title:first-of-type { margin-top: 4px; }

/* Seção "Características do estoma": ~65/35 — campos à esquerda, card
   sticky da ilustração esquemática à direita, sem ficar espremida
   embaixo dos campos agora que o container usa a largura real da tela. */
#homeShell .clinical-estoma-layout { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
#homeShell .clinical-estoma-fields { min-width: 0; }
#homeShell .clinical-estoma-illustration { position: sticky; top: 128px; }
#homeShell .clinical-estoma-illustration .dash-card-body { display: flex; flex-direction: column; gap: 10px; align-items: center; }
@media (max-width: 1000px) {
  #homeShell .clinical-estoma-layout { grid-template-columns: 1fr; }
  #homeShell .clinical-estoma-illustration { position: static; }
}

/* Ilustração esquemática do estoma (lib/stoma-illustration.js, marcação
   inalterada) — reestilizada aqui pra bater com o dash-* em vez dos
   tokens do shell antigo (--surface-alt/--ink-faint), já que #homeShell
   não redefine esses tokens antigos. */
#homeShell .stoma-illustration { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px; background: var(--dash-border-light); border-radius: 10px; width: 100%; }
#homeShell .stoma-illustration-caption { font-size: 11px; color: var(--dash-text-muted); text-align: center; max-width: 220px; margin: 0; }
#homeShell .clinical-stoma-readout { display: flex; flex-direction: column; gap: 6px; width: 100%; }