/* ============================================================================
   Família Escudos — a casca compartilhada pelos três apps no ar.
   Direção visual aprovada em 22/ago/2026: sdd/escudos/DIRECAO-VISUAL.md.
   Tudo o mais (casco, cartões, botões, campos) vem de components.css.
   Zero hex: só var(). Mobile primeiro. Alvo de toque de 44px para cima,
   com o bloco de densidade fechando o arquivo.
   ========================================================================== */

/* ── 1. Cabeçalho do app: ícone + título + marca d'água botânica ──────────── */

.esc-cabeca {
  position: relative;
  display: flex; align-items: center; gap: var(--esp-4);
  padding: var(--esp-5) 0 var(--esp-4);
}
.esc-cabeca-icone {
  flex: none; width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--raio-g);
  background: var(--app-nevoa); color: var(--app-acento-tinta);
}
.esc-cabeca-icone .ic { width: 32px; height: 32px; }
.esc-cabeca h1 {
  margin: 0;
  font-family: var(--tipo-marca); font-weight: 500;
  font-size: var(--tipo-display-1); line-height: var(--tipo-altura-titulo);
  color: var(--tinta-titulo);
}
.esc-cabeca-sub { margin: var(--esp-1) 0 0; font-size: var(--tipo-corpo); color: var(--tinta-suave); }

/* A prancha entra como marca d'água: monocromática, atrás, nunca sobre texto. */
.esc-marca {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(34%, 320px); pointer-events: none;
  background-repeat: no-repeat; background-position: right center;
  background-size: contain;
  opacity: 0.22; filter: grayscale(1) sepia(0.35);
  mask-image: linear-gradient(to left, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
}
.esc-cabeca > *:not(.esc-marca) { position: relative; z-index: 1; }
@media (max-width: 680px) {
  .esc-marca { width: 44%; opacity: 0.16; }
  .esc-cabeca-icone { width: 44px; height: 44px; }
  .esc-cabeca-icone .ic { width: 26px; height: 26px; }
}

/* ── 2. Painel de contexto da fase (substitui a fita de chips solta) ─────── */

/* Flex que quebra linha: com quatro fases a conduta senta à direita; com seis
   (Grávida) ela desce para a linha de baixo em vez de virar coluna estreita. */
.esc-contexto {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4) var(--esp-6);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-g);
  background: var(--app-nevoa);
  border: 1px solid var(--borda-sutil);
}
.esc-contexto-zona { flex: 0 1 auto; min-width: 0; }
.esc-contexto-zona:last-child { flex: 1 1 300px; }
@media (min-width: 900px) {
  .esc-faixa { border-left: 1px solid var(--borda-media); padding-left: var(--esp-6); }
}
.esc-contexto-rotulo {
  display: block; margin-bottom: var(--esp-2);
  font-family: var(--tipo-controle); font-weight: 600;
  font-size: var(--tipo-rotulo-p); letter-spacing: var(--tipo-espaco-controle); text-transform: uppercase;
  color: var(--app-acento-tinta);
}

/* Os chips de fase viram um seletor segmentado: uma peça, não uma fita. */
.esc-fases {
  display: inline-flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--borda-media); border-radius: var(--raio-m);
  background: var(--sup-cartao); overflow: hidden;
}
.esc-fase {
  min-height: 44px; padding: var(--esp-2) var(--esp-4);
  border: 0; border-right: 1px solid var(--borda-sutil);
  background: transparent; color: var(--tinta-corpo);
  font-family: var(--tipo-controle); font-size: var(--tipo-corpo-p); font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.esc-fase:last-child { border-right: 0; }
.esc-fase:hover { background: var(--sup-rebaixo); }
.esc-fase[aria-pressed="true"] { background: var(--app-acento-tinta); color: var(--tinta-invertida); font-weight: 600; }
.esc-fase:focus-visible { outline: none; box-shadow: inset var(--anel-foco); }

.esc-faixa { display: flex; align-items: center; gap: var(--esp-3); }
.esc-faixa .ic { width: 28px; height: 28px; color: var(--app-acento-tinta); flex: none; }
.esc-faixa-valor {
  font-family: var(--tipo-marca); font-weight: 600;
  font-size: var(--tipo-titulo-1); line-height: 1.1;
  color: var(--app-acento-tinta);
}
.esc-faixa-rotulo { display: block; font-size: var(--tipo-legenda); color: var(--tinta-suave); }

.esc-conduta { margin: 0; font-size: var(--tipo-corpo-p); color: var(--tinta-corpo); line-height: var(--tipo-altura-corpo); }
.esc-conduta strong { font-weight: 600; }

/* Forma compacta: uma pílula de duas colunas. Quem gruda no topo ao rolar é o
   contêiner .esc-barra-compacta (a pílula sozinha não teria onde grudar). */
.esc-barra-compacta { position: sticky; top: 0; z-index: 20; padding-top: var(--esp-2); background: var(--sup-fundo); }
.esc-contexto-compacto {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-5);
  padding: var(--esp-3) var(--esp-4);
  margin-top: var(--esp-4);
  border-radius: var(--raio-m);
  background: var(--app-nevoa);
  border: 1px solid var(--borda-sutil);
  backdrop-filter: blur(6px);
}
.esc-contexto-compacto .esc-fases { order: 3; }
.esc-contexto-compacto .esc-contexto-rotulo { margin-bottom: 0; }
.esc-compacto-par { display: flex; flex-direction: column; gap: 0; }
.esc-compacto-par b {
  font-family: var(--tipo-marca); font-weight: 600;
  font-size: var(--tipo-titulo-2); color: var(--app-acento-tinta); line-height: 1.15;
}
.esc-compacto-perfil { font-size: var(--tipo-corpo-p); color: var(--tinta-suave); }
@media (max-width: 680px) {
  .esc-contexto-compacto .esc-fases { width: 100%; }
  .esc-contexto-compacto .esc-fase { flex: 1; padding-inline: var(--esp-2); font-size: var(--tipo-rotulo-m); }
}

/* ── 3. Navegação interna: fita dentro de cartão, ativo por filete ────────── */

.esc-abas {
  display: flex; gap: 0; overflow-x: auto;
  margin: var(--esp-4) 0 var(--esp-5);
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--raio-g);
  background: var(--sup-cartao); border: 1px solid var(--borda-sutil);
  scrollbar-width: none;
}
.esc-abas::-webkit-scrollbar { height: 0; }
.esc-aba {
  flex: 1 0 auto; min-height: 44px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 2px solid transparent;
  color: var(--tinta-suave); text-decoration: none;
  font-size: var(--tipo-rotulo-m); white-space: nowrap;
}
.esc-aba .ic { width: 20px; height: 20px; }
.esc-aba:hover { color: var(--tinta-titulo); }
.esc-aba[aria-current="page"] { color: var(--tinta-primaria); border-bottom-color: var(--tinta-primaria); font-weight: 600; }
.esc-aba:focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: var(--raio-s); }
@media (min-width: 900px) {
  .esc-abas { flex-wrap: wrap; overflow: visible; }
  .esc-aba { flex: 1 1 0; }
}

/* ── 4. Entrada em destaque (a busca aberta na tela de início) ───────────── */

.esc-destaque {
  display: grid; grid-template-columns: auto 1fr; gap: var(--esp-3) var(--esp-4); align-items: start;
  padding: var(--esp-5);
  border-radius: var(--raio-g);
  background: var(--sup-cartao); border: 1px solid var(--borda-sutil);
  box-shadow: var(--sombra-1);
}
.esc-destaque-icone { color: var(--tinta-primaria); padding-top: var(--esp-1); }
.esc-destaque-icone .ic { width: 40px; height: 40px; }
.esc-destaque h2 { margin: 0; font-family: var(--tipo-marca); font-weight: 600; font-size: var(--tipo-titulo-1); color: var(--tinta-titulo); }
.esc-destaque-sub { margin: var(--esp-1) 0 0; font-size: var(--tipo-corpo-p); color: var(--tinta-suave); }
.esc-destaque-fila { grid-column: 2; display: flex; gap: var(--esp-3); align-items: flex-end; flex-wrap: wrap; }
.esc-destaque-fila .esc-campo { flex: 1 1 260px; }
.esc-destaque-dica { grid-column: 2; margin: 0; font-size: var(--tipo-legenda); color: var(--tinta-apagada); }
@media (max-width: 680px) {
  .esc-destaque { grid-template-columns: 1fr; }
  .esc-destaque-icone { display: none; }
  .esc-destaque-fila, .esc-destaque-dica { grid-column: 1; }
}

/* Os atalhos secundários: fileira de cartões baixos, sem disputar com a busca. */
.esc-atalhos {
  display: grid; gap: var(--esp-3); margin-top: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.esc-atalho {
  display: flex; flex-direction: column; gap: var(--esp-2);
  padding: var(--esp-4);
  border-radius: var(--raio-g);
  background: var(--sup-cartao); border: 1px solid var(--borda-sutil);
  color: var(--tinta-corpo); text-decoration: none;
  transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
}
.esc-atalho:hover { border-color: var(--app-acento); box-shadow: var(--sombra-1); }
.esc-atalho:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.esc-atalho .ic { width: 24px; height: 24px; color: var(--app-acento-tinta); }
.esc-atalho-titulo { font-family: var(--tipo-leitura); font-weight: 600; font-size: var(--tipo-corpo); color: var(--tinta-titulo); }
.esc-atalho-texto { font-size: var(--tipo-corpo-p); color: var(--tinta-suave); }

/* ── 5. Campo de busca e sugestões (mantido) ─────────────────────────────── */

.esc-campo { position: relative; }
.esc-sugestoes {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--sup-cartao); border: 1px solid var(--borda-sutil);
  border-radius: var(--raio-m); box-shadow: var(--sombra-2); overflow: hidden;
}
.esc-sugestao {
  display: flex; align-items: center; gap: var(--esp-3);
  width: 100%; min-height: 44px; text-align: left;
  padding: var(--esp-3); border: 0; background: transparent; cursor: pointer;
  font-size: var(--tipo-corpo); color: var(--tinta-corpo);
}
.esc-sugestao .ic { width: 18px; height: 18px; color: var(--app-acento-tinta); }
.esc-sugestao:hover, .esc-sugestao:focus-visible { background: var(--app-nevoa); color: var(--app-acento-tinta); outline: none; }

/* A tela de verificar: busca à esquerda, veredito à direita no desktop. */
.esc-verificar { display: grid; gap: var(--esp-5); }
@media (min-width: 900px) {
  .esc-verificar { grid-template-columns: minmax(280px, 1fr) 2fr; align-items: start; }
  .esc-verificar > .cartao { position: sticky; top: var(--esp-4); }
}

/* ── 6. O veredito: aba de status + corpo em grade ───────────────────────── */

.esc-veredito {
  display: grid; grid-template-columns: 1fr;
  border-radius: var(--raio-g); border: 2px solid; overflow: hidden;
  background: var(--sup-cartao);
}
@media (min-width: 680px) { .esc-veredito { grid-template-columns: 168px 1fr; } }

.esc-veredito.seg { border-color: var(--retorno-sucesso); }
.esc-veredito.att { border-color: var(--retorno-aviso); }
.esc-veredito.pro { border-color: var(--retorno-erro); }
.esc-veredito.nd  { border-color: var(--borda-media); }

/* A aba: cor cheia, escudo grande, a palavra do status. A cor marca; o texto
   sobre ela é o único lugar onde há claro-sobre-saturado, e foi conferido. */
.esc-veredito-aba {
  display: flex; align-items: center; justify-content: center; gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  color: var(--tinta-invertida);
}
@media (min-width: 680px) {
  .esc-veredito-aba { flex-direction: column; justify-content: center; padding: var(--esp-6) var(--esp-4); }
}
.seg .esc-veredito-aba { background: var(--retorno-sucesso); }
.att .esc-veredito-aba { background: var(--retorno-aviso); color: var(--cor-cacau); }
.pro .esc-veredito-aba { background: var(--retorno-erro); }
.nd  .esc-veredito-aba { background: var(--tinta-apagada); }
.esc-veredito-aba .ic { width: 44px; height: 44px; stroke-width: 1.4; }
@media (min-width: 680px) { .esc-veredito-aba .ic { width: 64px; height: 64px; } }
.esc-veredito-palavra {
  font-family: var(--tipo-controle); font-weight: 700;
  font-size: var(--tipo-titulo-2); letter-spacing: var(--tipo-espaco-controle); text-transform: uppercase;
  text-align: center; line-height: 1.1;
}

.esc-veredito-corpo { padding: var(--esp-5); }
.seg .esc-veredito-corpo { background: var(--retorno-sucesso-fundo); }
.att .esc-veredito-corpo { background: var(--retorno-aviso-fundo); }
.pro .esc-veredito-corpo { background: var(--retorno-erro-fundo); }
.nd  .esc-veredito-corpo { background: var(--sup-rebaixo); }

.esc-veredito h2 {
  margin: 0;
  font-family: var(--tipo-marca); font-weight: 500;
  font-size: var(--tipo-display-2); line-height: 1.1; color: var(--tinta-titulo);
}
.esc-veredito .esc-sci { margin: var(--esp-1) 0 0; font-style: italic; font-size: var(--tipo-corpo); color: var(--tinta-suave); }
.esc-veredito-motivo { margin: var(--esp-3) 0 0; font-size: var(--tipo-corpo-g); font-weight: 500; line-height: var(--tipo-altura-corpo); }
.seg .esc-veredito-motivo { color: var(--retorno-sucesso-tinta); }
.att .esc-veredito-motivo { color: var(--retorno-aviso-tinta); }
.pro .esc-veredito-motivo { color: var(--retorno-erro-tinta); }
.nd  .esc-veredito-motivo { color: var(--tinta-corpo); }

/* As linhas de dados como ficha: rótulo à esquerda, valor à direita, filete entre. */
.esc-linhas { display: grid; gap: 0; margin: var(--esp-4) 0 0; }
.esc-linha {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--esp-3); align-items: baseline;
  padding: var(--esp-3) 0; border-top: 1px solid var(--borda-sutil);
}
.esc-linha:first-child { border-top: 0; padding-top: 0; }
.esc-linha dt {
  font-family: var(--tipo-controle); font-weight: 600;
  font-size: var(--tipo-rotulo-p); letter-spacing: var(--tipo-espaco-controle); text-transform: uppercase;
  color: var(--tinta-suave);
}
.seg .esc-linha dt { color: var(--retorno-sucesso-tinta); }
.att .esc-linha dt { color: var(--retorno-aviso-tinta); }
.pro .esc-linha dt { color: var(--retorno-erro-tinta); }
.esc-linha dd { margin: 0; font-size: var(--tipo-corpo); color: var(--tinta-corpo); }
.esc-lista { margin: 0; padding-left: var(--esp-5); }
.esc-lista li { margin-bottom: var(--esp-1); }
@media (max-width: 480px) {
  .esc-linha { grid-template-columns: 1fr; gap: var(--esp-1); }
}

.esc-fonte {
  display: flex; align-items: center; gap: var(--esp-2);
  margin: var(--esp-4) 0 0; padding-top: var(--esp-3);
  border-top: 1px dashed var(--borda-media);
  font-size: var(--tipo-legenda); color: var(--tinta-apagada);
}
.esc-fonte .ic { width: 16px; height: 16px; flex: none; }

/* ── 7. Bloco de saída: o que entra no lugar ─────────────────────────────── */

.esc-saida {
  display: grid; gap: var(--esp-3); margin-top: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-g);
  background: var(--sup-cartao); border: 1px solid var(--borda-sutil);
}
@media (min-width: 900px) { .esc-saida { grid-template-columns: minmax(180px, auto) 1fr; align-items: center; gap: var(--esp-5); } }
.esc-saida-titulo { margin: 0; font-family: var(--tipo-marca); font-weight: 500; font-size: var(--tipo-titulo-2); color: var(--tinta-titulo); line-height: 1.2; }
.esc-saida-lista { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.esc-saida-item {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4); min-height: 44px;
  border-radius: var(--raio-m);
  background: var(--retorno-sucesso-fundo); border: 1px solid var(--borda-sutil);
  color: var(--tinta-titulo); text-decoration: none;
}
.esc-saida-item:hover { border-color: var(--retorno-sucesso); }
.esc-saida-item:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.esc-saida-item .ic { width: 22px; height: 22px; color: var(--retorno-sucesso-tinta); flex: none; }
.esc-saida-nome { font-family: var(--tipo-marca); font-weight: 600; font-size: var(--tipo-titulo-2); line-height: 1.15; }
.esc-saida-ligacao { display: block; font-size: var(--tipo-legenda); color: var(--app-acento-tinta); }
.esc-saida-todas { background: var(--app-nevoa); }
.esc-saida-todas .ic { color: var(--app-acento-tinta); }

/* ── 8. Miúdos que as telas ainda usam ───────────────────────────────────── */

.esc-dose { font-family: var(--tipo-controle); font-size: var(--tipo-corpo-p); color: var(--tinta-suave); }
.esc-dose strong { color: var(--app-acento-tinta); }
.esc-texto p + p { margin-top: var(--esp-3); }

.esc-grade { display: grid; gap: var(--esp-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .esc-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .esc-grade-3 { grid-template-columns: repeat(3, 1fr); } }

.esc-item { display: flex; gap: var(--esp-3); align-items: center; flex-wrap: wrap; }
.esc-item input[type="number"] { max-width: 96px; }
.esc-nome { flex: 1; min-width: 140px; }

.esc-nota {
  margin-top: var(--esp-4); padding: var(--esp-4);
  border-radius: var(--raio-m); background: var(--cor-acafrao-nevoa);
  border-left: 3px solid var(--cor-acafrao);
  font-size: var(--tipo-corpo);
}
.esc-nota.erro { background: var(--retorno-erro-fundo); border-left-color: var(--retorno-erro); }

.esc-hist { display: grid; gap: var(--esp-2); }
.esc-hist-linha {
  display: flex; gap: var(--esp-3); align-items: center; flex-wrap: wrap;
  padding: var(--esp-3); border-radius: var(--raio-m); background: var(--sup-cartao);
}
.esc-ponto { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
.esc-ponto.seg { background: var(--retorno-sucesso); }
.esc-ponto.att { background: var(--retorno-aviso); }
.esc-ponto.pro { background: var(--retorno-erro); }
.esc-ponto.nd  { background: var(--tinta-apagada); }
.esc-hist-quando { margin-left: auto; font-size: var(--tipo-legenda); color: var(--tinta-apagada); }

.esc-rodape {
  display: flex; align-items: flex-start; gap: var(--esp-3);
  margin: var(--esp-8) 0 var(--esp-6);
  padding: var(--esp-4); border-radius: var(--raio-m);
  background: var(--sup-cartao); border: 1px solid var(--borda-sutil);
  color: var(--tinta-suave); font-size: var(--tipo-legenda); text-align: left;
}
.esc-rodape .ic { width: 20px; height: 20px; flex: none; color: var(--tinta-apagada); margin-top: 1px; }
.esc-rodape strong { color: var(--tinta-corpo); font-weight: 600; }

/* ── 9. Quem está no app: avatar, faixa de migração, painel "onde estou" ─── */

.esc-avatar { flex: none; }
.esc-avatar-p { width: 28px; height: 28px; font-size: 13px /* glifo */; }
.esc-avatar-g { width: 56px; height: 56px; font-size: 22px /* glifo */; }

.esc-quem { display: inline-flex; align-items: center; gap: var(--esp-2); }
.esc-quem b { font-size: var(--tipo-corpo-p); color: var(--tinta-titulo); }
.esc-quem-linha { font-size: var(--tipo-legenda); color: var(--tinta-suave); }

/* A faixa de aviso: a criança cresceu, o bebê nasceu, falta cadastrar. */
.esc-banner {
  display: flex; align-items: center; gap: var(--esp-4);
  margin: var(--esp-4) 0 0; padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-g);
  background: var(--cor-acafrao-nevoa); border-left: 3px solid var(--cor-acafrao);
  color: var(--tinta-corpo); text-decoration: none; font-size: var(--tipo-corpo-p);
  line-height: var(--tipo-altura-corpo);
}
.esc-banner-suave { background: var(--app-nevoa); border-left-color: var(--app-acento); }
.esc-banner .ic { width: 28px; height: 28px; flex: none; color: var(--app-acento-tinta); }
.esc-banner strong { color: var(--tinta-titulo); }
.esc-banner-ir { margin-left: auto; white-space: nowrap; font-weight: 600; color: var(--app-acento-tinta); }
.esc-banner:hover .esc-banner-ir { text-decoration: underline; }
@media (max-width: 680px) {
  .esc-banner { flex-wrap: wrap; }
  .esc-banner-ir { margin-left: 0; }
}

/* "Onde estou": o cartão de abertura, com a foto e a fase de agora. */
.esc-onde {
  display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap;
  margin-bottom: var(--esp-4); padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-g);
  background: var(--sup-cartao); border: 1px solid var(--borda-sutil);
}
.esc-onde h2 { margin: 0; font-family: var(--tipo-marca); font-weight: 500; font-size: var(--tipo-titulo-1); color: var(--tinta-titulo); line-height: 1.15; }
.esc-onde-sub { margin: var(--esp-1) 0 0; font-size: var(--tipo-corpo-p); color: var(--tinta-suave); }
.esc-onde-tempo { flex: 1 1 320px; min-width: 0; }

/* ── 10. Linha do tempo da gestação e barras de fase (DIRECAO §7) ────────── */

.esc-tempo {
  display: flex; gap: var(--esp-1); list-style: none; margin: var(--esp-4) 0 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.esc-tempo::-webkit-scrollbar { height: 0; }
.esc-tempo-item { flex: 1 0 auto; position: relative; text-align: center; }
.esc-tempo-item a {
  display: flex; flex-direction: column; align-items: center; gap: var(--esp-1);
  padding: var(--esp-2) var(--esp-2) var(--esp-1); min-height: 44px;
  color: var(--tinta-suave); text-decoration: none;
}
/* O fio que liga os círculos: contínuo no que passou, tracejado no que vem. */
.esc-tempo-item::before {
  content: ""; position: absolute; top: 20px; left: -50%; width: 100%;
  border-top: 2px solid var(--borda-media);
}
.esc-tempo-item.futura::before { border-top-style: dashed; }
.esc-tempo-item:first-child::before { display: none; }
.esc-tempo-ponto {
  display: grid; place-items: center; position: relative; z-index: 1;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--sup-cartao); border: 2px solid var(--borda-media); color: var(--tinta-apagada);
}
.esc-tempo-ponto .ic { width: 20px; height: 20px; }
.esc-tempo-item.passada .esc-tempo-ponto { border-color: var(--app-acento); color: var(--app-acento-tinta); }
.esc-tempo-item.atual .esc-tempo-ponto {
  background: var(--app-acento-tinta); border-color: var(--app-acento-tinta); color: var(--tinta-invertida);
  box-shadow: 0 0 0 4px var(--app-nevoa);
}
.esc-tempo-nome { font-size: var(--tipo-rotulo-m); white-space: nowrap; }
.esc-tempo-item.atual .esc-tempo-nome { color: var(--app-acento-tinta); font-weight: 600; }
.esc-tempo-faixa { font-size: var(--tipo-rotulo-p); color: var(--tinta-apagada); white-space: nowrap; }

/* As fases como barras: o cardápio que se amplia com a idade, de uma olhada. */
.esc-barras { display: grid; gap: var(--esp-2); margin: var(--esp-5) 0; }
.esc-barra-fase {
  display: grid; grid-template-columns: minmax(96px, 1fr) 3fr auto; gap: var(--esp-4);
  align-items: center; min-height: 44px; padding: var(--esp-2) var(--esp-4);
  border-radius: var(--raio-m); border: 1px solid transparent;
  color: var(--tinta-corpo); text-decoration: none;
}
.esc-barra-fase:hover { background: var(--sup-rebaixo); }
.esc-barra-fase.ativa { background: var(--app-nevoa); border-color: var(--app-acento); }
.esc-barra-nome { font-size: var(--tipo-corpo-p); font-weight: 500; }
.esc-barra-fase.ativa .esc-barra-nome { color: var(--app-acento-tinta); font-weight: 600; }
.esc-barra-trilho { position: relative; height: 10px; border-radius: 999px; background: var(--sup-rebaixo); }
.esc-barra-cheia { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--app-acento); }
.esc-barra-fase.ativa .esc-barra-cheia { background: var(--app-acento-tinta); }
.esc-barra-valor { font-size: var(--tipo-rotulo-m); color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .esc-barra-fase { grid-template-columns: 1fr auto; gap: var(--esp-1) var(--esp-3); }
  .esc-barra-trilho { grid-column: 1 / -1; }
}

/* ── 11. "O que muda nesta fase": três blocos de temperatura ─────────────── */

.esc-bloco-fase {
  margin-top: var(--esp-5); padding: var(--esp-5);
  border-radius: var(--raio-g); background: var(--sup-cartao); border: 1px solid var(--borda-sutil);
}
.esc-bloco-cabeca h2 { margin: var(--esp-1) 0 0; font-family: var(--tipo-marca); font-weight: 500; font-size: var(--tipo-display-2); color: var(--tinta-titulo); line-height: 1.15; }
.esc-bloco-resumo { margin: var(--esp-2) 0 0; font-size: var(--tipo-corpo-g); color: var(--tinta-corpo); line-height: var(--tipo-altura-corpo); max-width: 62ch; }
.esc-bloco-grade { display: grid; gap: var(--esp-4); margin-top: var(--esp-5); }
@media (min-width: 900px) { .esc-bloco-grade { grid-template-columns: repeat(3, 1fr); } }
.esc-bloco { padding: var(--esp-4); border-radius: var(--raio-m); border-left: 3px solid var(--borda-media); background: var(--sup-rebaixo); }
.esc-bloco h3 {
  display: flex; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-3);
  font-family: var(--tipo-controle); font-weight: 600;
  font-size: var(--tipo-rotulo-g); letter-spacing: var(--tipo-espaco-controle); text-transform: uppercase;
}
.esc-bloco h3 .ic { width: 18px; height: 18px; }
.esc-bloco ul { margin: 0; padding-left: var(--esp-5); font-size: var(--tipo-corpo-p); line-height: var(--tipo-altura-corpo); color: var(--tinta-corpo); }
.esc-bloco li + li { margin-top: var(--esp-2); }
.esc-bloco.muda { border-left-color: var(--app-acento); background: var(--app-nevoa); }
.esc-bloco.muda h3 { color: var(--app-acento-tinta); }
.esc-bloco.nunca { border-left-color: var(--retorno-erro); background: var(--retorno-erro-fundo); }
.esc-bloco.nunca h3 { color: var(--retorno-erro-tinta); }
.esc-bloco.prefira { border-left-color: var(--retorno-sucesso); background: var(--retorno-sucesso-fundo); }
.esc-bloco.prefira h3 { color: var(--retorno-sucesso-tinta); }

/* A faixa de urgência: fecha a tela de socorro e o bloco de fase. */
.esc-urgencia {
  display: flex; align-items: flex-start; gap: var(--esp-3);
  margin-top: var(--esp-4); padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-m); background: var(--retorno-erro-fundo);
  border: 1px solid var(--retorno-erro);
  color: var(--retorno-erro-tinta); font-size: var(--tipo-corpo); font-weight: 500;
  line-height: var(--tipo-altura-corpo);
}
@media (min-width: 900px) { .esc-bloco-grade .esc-urgencia { grid-column: 1 / -1; margin-top: 0; } }
.esc-urgencia .ic { width: 24px; height: 24px; flex: none; }

/* ── 12. "Nas outras fases": o mesmo óleo, fase a fase ───────────────────── */

.esc-outras { margin-top: var(--esp-4); }
.esc-outras-fita { display: flex; gap: var(--esp-2); margin-top: var(--esp-2); overflow-x: auto; scrollbar-width: none; }
.esc-outras-fita::-webkit-scrollbar { height: 0; }
.esc-outra {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  flex: 1 0 auto; min-height: 44px; padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--borda-sutil); border-radius: var(--raio-m);
  background: var(--sup-cartao); cursor: pointer;
  font-family: var(--tipo-controle); font-size: var(--tipo-rotulo-m); color: var(--tinta-corpo);
  white-space: nowrap; text-align: left;
}
.esc-outra:hover { border-color: var(--app-acento); }
.esc-outra.ativa { border-color: var(--app-acento-tinta); background: var(--app-nevoa); font-weight: 600; }
.esc-outra .esc-ponto { margin-right: var(--esp-2); }
.esc-outra-status { font-size: var(--tipo-rotulo-p); color: var(--tinta-suave); }

/* ── 13. Duas colunas de instrumento (campos à esquerda, saída à direita) ── */

.esc-duas { display: grid; gap: var(--esp-5); }
@media (min-width: 900px) { .esc-duas { grid-template-columns: minmax(280px, 1fr) 1fr; align-items: start; } }
.esc-duas-colunas { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.esc-resultado-grande {
  padding: var(--esp-5); border-radius: var(--raio-g);
  background: var(--app-nevoa); border: 1px solid var(--borda-sutil);
}
.esc-grande-num {
  margin: var(--esp-2) 0 0;
  font-family: var(--tipo-marca); font-weight: 600;
  font-size: var(--tipo-display-1); line-height: 1; color: var(--app-acento-tinta);
  font-variant-numeric: tabular-nums;
}
.esc-grande-num span { font-size: var(--tipo-titulo-1); font-weight: 500; }
.esc-grande-conta { margin: var(--esp-2) 0 0; font-size: var(--tipo-corpo-p); color: var(--tinta-suave); }

/* A régua da faixa segura, com cursor e balão. */
.esc-regua { position: relative; height: 10px; margin: var(--esp-5) 0 var(--esp-6); border-radius: 999px; background: var(--sup-rebaixo); }
.esc-regua-solta { margin-top: var(--esp-6); }
.esc-regua-segura { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--retorno-sucesso); opacity: 0.55; }
.esc-regua-cursor { position: absolute; top: -5px; width: 2px; height: 20px; background: var(--tinta-titulo); }
.esc-regua-balao {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  padding: 2px var(--esp-2); border-radius: var(--raio-s);
  background: var(--tinta-titulo); color: var(--tinta-invertida);
  font-size: var(--tipo-rotulo-p); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.esc-regua-marca {
  position: absolute; top: calc(100% + 4px); transform: translateX(-50%);
  font-size: var(--tipo-rotulo-p); color: var(--tinta-apagada); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.esc-faixa-range { width: 100%; margin-top: var(--esp-3); accent-color: var(--app-acento-tinta); }

.esc-frascos { display: flex; gap: var(--esp-2); flex-wrap: wrap; margin-top: var(--esp-2); }
.esc-frasco {
  min-height: 44px; padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--borda-media); border-radius: var(--raio-m);
  background: var(--sup-cartao); color: var(--tinta-corpo); cursor: pointer;
  font-family: var(--tipo-controle); font-size: var(--tipo-corpo-p);
}
.esc-frasco:hover { border-color: var(--app-acento); }
.esc-frasco[aria-pressed="true"] { background: var(--app-acento-tinta); color: var(--tinta-invertida); border-color: var(--app-acento-tinta); }

.esc-medidor { border: 2px solid var(--retorno-sucesso); }
.esc-medidor.passou { border-color: var(--retorno-erro); }
.esc-medidor-valor {
  margin: var(--esp-3) 0 0; font-family: var(--tipo-marca); font-weight: 600;
  font-size: var(--tipo-display-1); line-height: 1; color: var(--retorno-sucesso-tinta);
  font-variant-numeric: tabular-nums;
}
.esc-medidor.passou .esc-medidor-valor { color: var(--retorno-erro-tinta); }
.esc-medidor-conta { display: block; margin-top: var(--esp-1); font-family: var(--tipo-leitura); font-size: var(--tipo-corpo-p); font-weight: 400; color: var(--tinta-suave); }
.esc-medidor-vazio {
  display: grid; place-items: center; gap: var(--esp-3); text-align: center;
  padding: var(--esp-7) var(--esp-5); border-radius: var(--raio-g);
  border: 1px dashed var(--borda-media); color: var(--tinta-apagada);
  font-size: var(--tipo-corpo-p);
}
.esc-medidor-vazio .ic { width: 40px; height: 40px; }
.esc-nota.ok { background: var(--retorno-sucesso-fundo); border-left-color: var(--retorno-sucesso); color: var(--retorno-sucesso-tinta); display: flex; align-items: center; gap: var(--esp-2); }
.esc-nota .ic { width: 18px; height: 18px; flex: none; }

/* ── 14. Situações, trocas e a ficha com linhas de temperatura (§6) ──────── */

.esc-cartao-sit { display: flex; gap: var(--esp-4); align-items: flex-start; }
.esc-cartao-icone {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--raio-m); background: var(--app-nevoa); color: var(--app-acento-tinta);
}
.esc-cartao-icone .ic { width: 22px; height: 22px; }
.esc-cartao-meta { display: block; margin-top: var(--esp-2); font-size: var(--tipo-legenda); color: var(--tinta-apagada); }

.esc-pilulas { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.esc-pilula {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  min-height: 44px; padding: var(--esp-2) var(--esp-3);
  border-radius: 999px; border: 1px solid var(--borda-sutil);
  font-size: var(--tipo-corpo-p); text-decoration: none;
}
.esc-pilula .ic { width: 14px; height: 14px; }
.esc-pilula.seg { background: var(--retorno-sucesso-fundo); border-color: var(--retorno-sucesso); color: var(--retorno-sucesso-tinta); }
.esc-pilula.pro { background: var(--retorno-erro-fundo); border-color: var(--retorno-erro); color: var(--retorno-erro-tinta); }
.esc-pilula:hover { box-shadow: var(--sombra-1); }

.esc-trocas { display: grid; gap: var(--esp-4); }
.esc-troca { padding: var(--esp-5); border-radius: var(--raio-g); background: var(--sup-cartao); border: 1px solid var(--borda-sutil); }
.esc-troca-titulo { margin: 0 0 var(--esp-4); font-family: var(--tipo-marca); font-weight: 500; font-size: var(--tipo-titulo-2); }
.esc-troca-titulo a { color: var(--tinta-titulo); text-decoration: none; }
.esc-troca-titulo a:hover { text-decoration: underline; }
.esc-troca-par { display: grid; gap: var(--esp-3); align-items: start; }
@media (min-width: 768px) { .esc-troca-par { grid-template-columns: 1fr auto 1fr; gap: var(--esp-4); } }
.esc-troca-seta { display: grid; place-items: center; padding-top: var(--esp-5); color: var(--tinta-apagada); }
.esc-troca-seta .ic { width: 24px; height: 24px; }
.esc-troca-sai .esc-contexto-rotulo { color: var(--retorno-erro-tinta); }
.esc-troca-entra .esc-contexto-rotulo { color: var(--retorno-sucesso-tinta); }
.esc-troca-sai, .esc-troca-entra { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.esc-troca-sai .esc-contexto-rotulo, .esc-troca-entra .esc-contexto-rotulo { flex: 1 0 100%; margin-bottom: 0; }
@media (max-width: 767px) { .esc-troca-seta { transform: rotate(90deg); padding: 0; } }

.esc-ficha { display: grid; gap: 0; border-radius: var(--raio-g); overflow: hidden; border: 1px solid var(--borda-sutil); background: var(--sup-cartao); }
.esc-ficha-linha {
  display: grid; grid-template-columns: 40px 120px 1fr; gap: var(--esp-3);
  align-items: start; padding: var(--esp-4) var(--esp-5);
  border-top: 1px solid var(--borda-sutil);
}
.esc-ficha-linha:first-child { border-top: 0; }
.esc-ficha-icone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--sup-rebaixo); color: var(--tinta-suave); }
.esc-ficha-icone .ic { width: 18px; height: 18px; }
.esc-ficha-linha dt {
  font-family: var(--tipo-controle); font-weight: 600;
  font-size: var(--tipo-rotulo-g); letter-spacing: var(--tipo-espaco-controle); text-transform: uppercase;
  color: var(--tinta-suave); padding-top: var(--esp-1);
}
.esc-ficha-linha dd { margin: 0; font-size: var(--tipo-corpo); color: var(--tinta-corpo); line-height: var(--tipo-altura-corpo); }
/* O fundo carrega a natureza da informação antes de a pessoa ler o rótulo. */
.esc-ficha-linha.nao { background: var(--retorno-erro-fundo); }
.esc-ficha-linha.nao dt { color: var(--retorno-erro-tinta); }
.esc-ficha-linha.nao .esc-ficha-icone { background: var(--retorno-erro); color: var(--tinta-invertida); }
.esc-ficha-linha.sim { background: var(--retorno-sucesso-fundo); }
.esc-ficha-linha.sim dt, .esc-ficha-linha.sim-leve dt { color: var(--retorno-sucesso-tinta); }
.esc-ficha-linha.sim .esc-ficha-icone, .esc-ficha-linha.sim-leve .esc-ficha-icone { background: var(--retorno-sucesso); color: var(--tinta-invertida); }
.esc-ficha-linha.dil { background: var(--cor-acafrao-nevoa); border-left: 3px solid var(--cor-acafrao); }
.esc-ficha-linha.dil dt { color: var(--cor-acafrao-tinta); }
.esc-ficha-linha .esc-dose { display: block; margin-top: var(--esp-2); }
@media (max-width: 680px) {
  .esc-ficha-linha { grid-template-columns: 32px 1fr; }
  .esc-ficha-linha dd { grid-column: 2; }
}

/* ── 15. Perfis com foto, fita de fases e ações ──────────────────────────── */

.esc-perfis { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.esc-perfil { padding: var(--esp-5); border-radius: var(--raio-g); background: var(--sup-cartao); border: 1px solid var(--borda-sutil); }
.esc-perfil.ativo { border-color: var(--app-acento); box-shadow: var(--sombra-1); }
.esc-perfil-topo { display: flex; align-items: center; gap: var(--esp-4); }
.esc-perfil-topo h3 { margin: 0; font-family: var(--tipo-marca); font-weight: 500; font-size: var(--tipo-titulo-1); color: var(--tinta-titulo); line-height: 1.15; }
.esc-perfil-linha { margin: var(--esp-1) 0 0; font-size: var(--tipo-corpo-p); color: var(--tinta-suave); }
.esc-perfil-linha strong { color: var(--app-acento-tinta); }

.esc-fita-fases { display: flex; gap: var(--esp-1); list-style: none; margin: var(--esp-4) 0 0; padding: 0; }
.esc-fita-fases li {
  flex: 1; display: flex; flex-direction: column; gap: var(--esp-1);
  font-size: var(--tipo-rotulo-p); color: var(--tinta-apagada); text-align: center;
}
.esc-fita-fases li span { display: block; height: 4px; border-radius: 999px; background: var(--borda-media); }
.esc-fita-fases li.atual { color: var(--app-acento-tinta); font-weight: 600; }
.esc-fita-fases li.atual span { background: var(--app-acento-tinta); }

.esc-acoes-linha { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; margin-top: var(--esp-4); font-size: var(--tipo-corpo-p); }
.esc-foto-fila { display: flex; align-items: center; gap: var(--esp-4); }
.esc-arquivo { font-size: var(--tipo-corpo-p); color: var(--tinta-suave); }

/* ── 16. Meu kit ─────────────────────────────────────────────────────────── */

.esc-legenda { display: flex; flex-wrap: wrap; gap: var(--esp-4); margin-bottom: var(--esp-4); font-size: var(--tipo-corpo-p); color: var(--tinta-suave); }
.esc-legenda span { display: inline-flex; align-items: center; gap: var(--esp-2); }
.esc-legenda b { color: var(--tinta-titulo); font-variant-numeric: tabular-nums; }

.esc-kit { display: grid; gap: var(--esp-2); }
.esc-kit-item {
  display: grid; grid-template-columns: auto minmax(140px, 1fr) auto 1fr auto;
  gap: var(--esp-3); align-items: center; min-height: 44px;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-m); background: var(--sup-cartao); border: 1px solid var(--borda-sutil);
}
.esc-kit-item.pro { border-color: var(--retorno-erro); background: var(--retorno-erro-fundo); }
.esc-kit-item.att { border-color: var(--retorno-aviso); background: var(--retorno-aviso-fundo); }
.esc-kit-nome { font-family: var(--tipo-marca); font-weight: 600; font-size: var(--tipo-titulo-2); color: var(--tinta-titulo); text-decoration: none; }
.esc-kit-nome:hover { text-decoration: underline; }
.esc-kit-status {
  font-family: var(--tipo-controle); font-weight: 600;
  font-size: var(--tipo-rotulo-p); letter-spacing: var(--tipo-espaco-controle); text-transform: uppercase;
  color: var(--tinta-suave); white-space: nowrap;
}
.esc-kit-item.pro .esc-kit-status { color: var(--retorno-erro-tinta); }
.esc-kit-item.att .esc-kit-status { color: var(--retorno-aviso-tinta); }
.esc-kit-item.seg .esc-kit-status { color: var(--retorno-sucesso-tinta); }
.esc-kit-motivo { font-size: var(--tipo-corpo-p); color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .esc-kit-item { grid-template-columns: auto 1fr auto; }
  .esc-kit-motivo { grid-column: 2 / -1; white-space: normal; }
}

/* ── 17. Diário e triagem ────────────────────────────────────────────────── */

.esc-diario { display: grid; gap: var(--esp-2); }
.esc-reacao {
  display: grid; grid-template-columns: 88px 1fr auto; gap: var(--esp-4); align-items: start;
  padding: var(--esp-4); border-radius: var(--raio-m);
  background: var(--sup-cartao); border-left: 3px solid var(--borda-media);
}
.esc-reacao.moderada { border-left-color: var(--retorno-aviso); }
.esc-reacao.grave { border-left-color: var(--retorno-erro); background: var(--retorno-erro-fundo); }
.esc-reacao-data { font-size: var(--tipo-corpo-p); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.esc-reacao h3 { margin: 0; font-family: var(--tipo-marca); font-weight: 500; font-size: var(--tipo-titulo-2); color: var(--tinta-titulo); }
.esc-reacao-via { font-family: var(--tipo-leitura); font-size: var(--tipo-legenda); color: var(--tinta-suave); font-weight: 400; }
.esc-reacao p { margin: var(--esp-1) 0 0; font-size: var(--tipo-corpo-p); color: var(--tinta-corpo); }
@media (max-width: 560px) { .esc-reacao { grid-template-columns: 1fr auto; } }

.esc-triagem-grupo { border: 0; padding: 0; margin: 0 0 var(--esp-5); }
.esc-triagem-grupo legend {
  padding: 0 0 var(--esp-3);
  font-family: var(--tipo-marca); font-weight: 500; font-size: var(--tipo-titulo-2); color: var(--tinta-titulo);
}
.esc-opcao {
  display: flex; align-items: center; gap: var(--esp-3);
  min-height: 44px; padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-m); cursor: pointer;
  font-size: var(--tipo-corpo); color: var(--tinta-corpo);
}
.esc-opcao:hover { background: var(--sup-rebaixo); }
.esc-opcao input { accent-color: var(--app-acento-tinta); flex: none; }

.esc-triagem-saida { border-radius: var(--raio-g); border: 2px solid; overflow: hidden; background: var(--sup-cartao); }
.esc-triagem-saida.observar { border-color: var(--retorno-sucesso); }
.esc-triagem-saida.suspender { border-color: var(--retorno-aviso); }
.esc-triagem-saida.emergencia { border-color: var(--retorno-erro); }
.esc-triagem-saida.observar .esc-veredito-aba { background: var(--retorno-sucesso); }
.esc-triagem-saida.suspender .esc-veredito-aba { background: var(--retorno-aviso); color: var(--cor-cacau); }
.esc-triagem-saida.emergencia .esc-veredito-aba { background: var(--retorno-erro); }
.esc-triagem-saida .esc-veredito-aba { flex-direction: row; }
.esc-triagem-saida .esc-veredito-corpo h2 { margin: 0; font-family: var(--tipo-marca); font-weight: 500; font-size: var(--tipo-titulo-1); color: var(--tinta-titulo); }
.esc-triagem-saida .esc-veredito-corpo p { margin: var(--esp-3) 0 0; font-size: var(--tipo-corpo); line-height: var(--tipo-altura-corpo); }
.esc-triagem-saida.emergencia .esc-veredito-corpo { background: var(--retorno-erro-fundo); }
.esc-triagem-saida.suspender .esc-veredito-corpo { background: var(--retorno-aviso-fundo); }
.esc-triagem-saida.observar .esc-veredito-corpo { background: var(--retorno-sucesso-fundo); }

/* ── 18. Histórico por dia e apresentação em três passos ─────────────────── */

.esc-dia + .esc-dia { margin-top: var(--esp-5); }
.esc-dia-cabeca { display: flex; align-items: baseline; gap: var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-3); }
.esc-dia-cabeca h2 { margin: 0; font-family: var(--tipo-marca); font-weight: 500; font-size: var(--tipo-titulo-2); color: var(--tinta-titulo); }
.esc-dia-resumo { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: var(--tipo-legenda); color: var(--tinta-apagada); }

.esc-passos {
  max-width: 62ch; margin: var(--esp-5) auto; padding: var(--esp-6) var(--esp-5);
  border-radius: var(--raio-g); background: var(--sup-cartao); border: 1px solid var(--borda-sutil);
  text-align: center;
}
.esc-passos-pontos { display: flex; justify-content: center; gap: var(--esp-2); list-style: none; margin: 0 0 var(--esp-5); padding: 0; }
.esc-passos-pontos li { width: 40px; height: 4px; border-radius: 999px; background: var(--borda-media); }
.esc-passos-pontos li.feito { background: var(--app-acento); }
.esc-passos-pontos li.atual { background: var(--app-acento-tinta); }
.esc-passo-icone { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--esp-4); border-radius: var(--raio-g); background: var(--app-nevoa); color: var(--app-acento-tinta); }
.esc-passo-icone .ic { width: 36px; height: 36px; }
.esc-passos h2 { margin: 0; font-family: var(--tipo-marca); font-weight: 500; font-size: var(--tipo-display-2); color: var(--tinta-titulo); }
.esc-passo-corpo { margin-top: var(--esp-4); text-align: left; font-size: var(--tipo-corpo-g); line-height: var(--tipo-altura-corpo); color: var(--tinta-corpo); }
.esc-passo-corpo p + p { margin-top: var(--esp-3); }
.esc-passo-acoes { display: flex; justify-content: center; gap: var(--esp-3); flex-wrap: wrap; margin-top: var(--esp-5); }
.esc-passos .cartao { text-align: left; }

/* ── 19. A maleta do parto ───────────────────────────────────────────────── */

.esc-maleta {
  margin-top: var(--esp-5); padding: var(--esp-5);
  border-radius: var(--raio-g);
  background: var(--sup-cartao); border: 1px solid var(--borda-sutil);
}
.esc-maleta-cabeca { display: flex; align-items: flex-start; gap: var(--esp-3); flex-wrap: wrap; }
.esc-maleta-cabeca > .ic { width: 28px; height: 28px; flex: none; color: var(--app-acento-tinta); }
.esc-maleta-cabeca h2 { margin: 0; font-family: var(--tipo-marca); font-weight: 500; font-size: var(--tipo-titulo-1); color: var(--tinta-titulo); line-height: 1.15; }
.esc-maleta-sub { margin: var(--esp-1) 0 0; font-size: var(--tipo-corpo-p); color: var(--tinta-suave); max-width: 56ch; }
.esc-maleta-conta {
  margin-left: auto; padding: var(--esp-1) var(--esp-3);
  border-radius: 999px; background: var(--app-nevoa); color: var(--app-acento-tinta);
  font-family: var(--tipo-controle); font-size: var(--tipo-rotulo-m); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.esc-maleta-lista {
  display: grid; gap: var(--esp-2); margin-top: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.esc-maleta-item {
  display: flex; align-items: center; gap: var(--esp-3);
  min-height: 44px; padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-m); border: 1px solid var(--borda-sutil);
  background: var(--sup-fundo); cursor: pointer;
}
.esc-maleta-item:hover { border-color: var(--app-acento); }
.esc-maleta-item.marcado { background: var(--retorno-sucesso-fundo); border-color: var(--retorno-sucesso); }
.esc-maleta-item input { accent-color: var(--retorno-sucesso); flex: none; }
.esc-maleta-nome { font-size: var(--tipo-corpo); color: var(--tinta-titulo); }
.esc-maleta-item.marcado .esc-maleta-nome { color: var(--retorno-sucesso-tinta); font-weight: 600; }
.esc-maleta-ver { margin-left: auto; font-size: var(--tipo-legenda); color: var(--app-acento-tinta); white-space: nowrap; }

/* ── 20. Quando o nome alcança mais de uma planta ────────────────────────── */

.esc-ambiguo {
  display: flex; align-items: flex-start; gap: var(--esp-3);
  margin-top: var(--esp-4); padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-g);
  background: var(--cor-acafrao-nevoa); border-left: 3px solid var(--cor-acafrao);
}
.esc-ambiguo > .ic { width: 24px; height: 24px; flex: none; color: var(--cor-acafrao-tinta); margin-top: 2px; }
.esc-ambiguo p { margin: 0; font-size: var(--tipo-corpo); color: var(--tinta-corpo); line-height: var(--tipo-altura-corpo); }
.esc-ambiguo strong { color: var(--tinta-titulo); }
.esc-ambiguo-lista {
  display: grid; gap: var(--esp-2); margin-top: var(--esp-3);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.esc-ambiguo-item {
  display: flex; align-items: center; gap: var(--esp-3);
  min-height: 44px; padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-m); border: 1px solid var(--borda-sutil);
  background: var(--sup-cartao); color: var(--tinta-corpo); text-decoration: none;
}
.esc-ambiguo-item:hover { border-color: var(--cor-acafrao); }
.esc-ambiguo-nome { display: block; font-size: var(--tipo-corpo-p); font-weight: 600; color: var(--tinta-titulo); }
.esc-ambiguo-sci { display: block; font-style: italic; font-size: var(--tipo-legenda); color: var(--tinta-suave); }
.esc-ambiguo-status {
  margin-left: auto;
  font-family: var(--tipo-controle); font-weight: 600;
  font-size: var(--tipo-rotulo-p); letter-spacing: var(--tipo-espaco-controle); text-transform: uppercase;
  color: var(--tinta-suave); white-space: nowrap;
}

/* ── 21. Telefone de emergência, para tocar com o polegar ────────────────── */

.esc-telefones { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-4); }
.esc-telefone {
  display: inline-flex; align-items: center; gap: var(--esp-3);
  min-height: 52px /* toque */; padding: var(--esp-2) var(--esp-5);
  border-radius: var(--raio-m);
  background: var(--sup-cartao); border: 2px solid var(--retorno-erro);
  color: var(--retorno-erro-tinta); text-decoration: none;
}
.esc-telefone.urgente { background: var(--retorno-erro); border-color: var(--retorno-erro); color: var(--tinta-invertida); }
.esc-telefone:hover { box-shadow: var(--sombra-2); }
.esc-telefone:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.esc-telefone .ic { width: 24px; height: 24px; flex: none; }
.esc-telefone-num {
  display: block; font-family: var(--tipo-marca); font-weight: 600;
  font-size: var(--tipo-titulo-1); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.esc-telefone-nome { display: block; font-size: var(--tipo-legenda); opacity: 0.9; }
@media (max-width: 560px) { .esc-telefone { flex: 1 1 100%; justify-content: center; } }

/* ── 22. Trocar de perfil na barra, e o aviso de fase trocada ────────────── */

.esc-troca-perfil { margin-top: var(--esp-4); }
.esc-quem-troca { display: inline-flex; gap: var(--esp-2); flex-wrap: wrap; }
.esc-quem-botao {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: 44px; padding: var(--esp-1) var(--esp-3) var(--esp-1) var(--esp-1);
  border: 1px solid var(--borda-media); border-radius: 999px;
  background: var(--sup-cartao); color: var(--tinta-corpo); cursor: pointer;
  font-family: var(--tipo-controle); font-size: var(--tipo-corpo-p);
}
.esc-quem-botao:hover { border-color: var(--app-acento); }
.esc-quem-botao.ativo { background: var(--app-nevoa); border-color: var(--app-acento-tinta); }
.esc-quem-botao b { font-weight: 600; color: var(--tinta-titulo); }
.esc-quem-botao.ativo b { color: var(--app-acento-tinta); }
.esc-quem-botao:focus-visible { outline: none; box-shadow: var(--anel-foco); }

/* Onde a pessoa está lendo uma fase que não é a de quem está no perfil. Vale em
   TODA tela: é na diluição e na fórmula que a dose é decidida. */
.esc-descasado {
  display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
  margin-top: var(--esp-3); padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-m);
  background: var(--cor-acafrao-nevoa); border-left: 3px solid var(--cor-acafrao);
  font-size: var(--tipo-corpo-p); color: var(--tinta-corpo); line-height: var(--tipo-altura-corpo);
}
.esc-descasado .ic { width: 20px; height: 20px; flex: none; color: var(--cor-acafrao-tinta); }
.esc-descasado strong { color: var(--tinta-titulo); }
.esc-descasado-voltar {
  margin-left: auto; min-height: 44px; padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--cor-acafrao); border-radius: var(--raio-m);
  background: var(--sup-cartao); color: var(--cor-acafrao-tinta); cursor: pointer;
  font-family: var(--tipo-controle); font-size: var(--tipo-rotulo-g); font-weight: 600;
  white-space: nowrap;
}
.esc-descasado-voltar:hover { background: var(--cor-acafrao-nevoa); }
.esc-descasado-voltar:focus-visible { outline: none; box-shadow: var(--anel-foco); }
@media (max-width: 680px) { .esc-descasado-voltar { margin-left: 0; width: 100%; } }

/* ==========================================================================
   FIM — DENSIDADE DE PONTEIRO FINO
   Os 44px acima são para o DEDO e continuam valendo no celular. No desktop
   a fase, a aba, a sugestão e o cartão de alternativa encolhem. Fecha o
   arquivo porque @media não soma especificidade.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .esc-fase       { min-height: 34px; }
  .esc-aba        { min-height: 40px; }
  .esc-sugestao   { min-height: 34px; }
  .esc-saida-item { min-height: 40px; }
  .esc-outra      { min-height: 40px; }
  .esc-frasco     { min-height: 36px; }
  .esc-pilula     { min-height: 32px; }
  .esc-opcao      { min-height: 36px; }
  .esc-kit-item   { min-height: 40px; }
  .esc-barra-fase { min-height: 36px; }
  .esc-tempo-item a { min-height: 40px; }
  .esc-maleta-item { min-height: 38px; }
  .esc-ambiguo-item { min-height: 40px; }
  .esc-quem-botao { min-height: 36px; }
  .esc-descasado-voltar { min-height: 34px; }
}

/* ── Escudo Condições: o Cartão para imprimir ───────────────────────────────
   A tela inteira serve para levar a quem acompanha a pessoa. Na impressão fica
   só o cartão: sem casco, sem abas, sem botão. */
.esc-cartao { break-inside: avoid; }
.esc-cartao .esc-lista li { margin-bottom: var(--esp-2); }

@media print {
  .casco-topo,
  .nav-inferior,
  .trilho-lateral,
  .migalhas,
  .esc-barra,
  .esc-abas,
  .esc-destaque,
  .esc-rodape,
  #k-imprimir { display: none !important; }

  body { background: #fff; }
  /* Sem o trilho, o molde precisa recuperar a largura da folha. */
  .molde, main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .esc-cartao {
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .esc-cartao-grupo + .esc-cartao-grupo { margin-top: var(--esp-4); }
  /* O papel não tem hover nem cor de fundo confiável: o semáforo vira palavra. */
  .esc-ponto { border: 1px solid #000; }
}