/* AureaClin · site público
   Recortes de tela: pedaços do sistema desenhados em HTML com a identidade da marca.
   Cada recorte fica dentro de uma .tela-caixa e mede tudo em "em": 1em vale 16px quando a
   caixa tem a largura de desenho (--cols × 16px) e encolhe junto com ela, como uma foto,
   mas sempre nítido. Os dados são de exemplo. */

.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icones { position: absolute; width: 0; height: 0; overflow: hidden; }

.tela-caixa { container-type: inline-size; }
.tela { --cols: 37; font-size: calc(100cqw / var(--cols)); line-height: 1.4; color: var(--texto); text-align: left; }
.tela b, .tela strong { font-weight: 600; }
.tela small { font-size: inherit; }

/* ───────── Peças comuns ───────── */

.t-pill {
  display: inline-flex; align-items: center; gap: .5em;
  height: 2em; padding: 0 .85em; border-radius: 999px;
  font-size: .75em; font-weight: 600; white-space: nowrap; flex: none;
}
.t-pill::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.t-pill--ok { background: var(--ok-soft); color: var(--ok); }
.t-pill--warn { background: var(--warn-soft); color: var(--warn); }
.t-pill--info { background: var(--marinho-100); color: var(--marinho); }
.t-pill--mudo { background: var(--rebaixado); color: var(--apoio); }

.t-senha {
  display: grid; place-items: center; flex: none;
  height: 2.6em; min-width: 4em; padding: 0 .6em; border-radius: .9em;
  background: var(--tinta); color: #f4f6f8;
  font-size: .875em; font-weight: 600; letter-spacing: .03em; font-variant-numeric: tabular-nums;
}

.t-cta {
  display: inline-flex; align-items: center; gap: .85em; flex: none;
  height: 3.1em; padding: 0 .45em 0 1.4em; border-radius: 999px;
  background: var(--marinho); color: var(--branco);
  font-size: .875em; font-weight: 600; white-space: nowrap;
}
.t-cta i { display: grid; place-items: center; width: 2.25em; height: 2.25em; border-radius: 50%; background: var(--ouro); color: var(--marinho); }
.t-cta .i { width: 1.1em; height: 1.1em; stroke-width: 2.4; }

.t-seg { display: inline-flex; padding: .25em; border-radius: 999px; background: var(--branco); box-shadow: 0 0 0 1px var(--linha); }
.t-seg span { display: flex; align-items: center; height: 2.3em; padding: 0 1.1em; border-radius: 999px; font-size: .875em; font-weight: 500; color: var(--apoio); white-space: nowrap; }
.t-seg .on { background: var(--tinta); color: #f4f6f8; }
.t-seg--suave { background: var(--secundario); box-shadow: none; }
.t-seg--suave span { height: 2.15em; padding: 0 .9em; font-size: .8125em; }
.t-seg--suave .on { background: var(--branco); color: var(--texto); box-shadow: 0 1px 2px rgba(12, 31, 47, .1); }
.t-seg small { margin-left: .5em; opacity: .7; }

.t-campo {
  display: flex; align-items: center; gap: .7em;
  height: 3em; padding: 0 1.1em; border-radius: 999px;
  background: var(--branco); box-shadow: 0 0 0 1px var(--linha);
  color: var(--apoio); font-size: .8125em; white-space: nowrap;
}
.t-campo .i { width: 1.2em; height: 1.2em; }

.t-chips { display: flex; flex-wrap: wrap; gap: .5em; }
.t-chips span {
  display: flex; align-items: center; height: 2.5em; padding: 0 1.1em; border-radius: 999px;
  background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha);
  font-size: .8125em; font-weight: 600; white-space: nowrap;
  transition: background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.t-chips .on { background: var(--tinta); color: #f4f6f8; box-shadow: none; }

.t-rotulo { display: block; font-size: .8125em; font-weight: 600; margin-bottom: .5em; }
.t-entrada { display: flex; align-items: center; min-height: 3em; padding: .6em 1.1em; border-radius: 1.4em; background: var(--rebaixado); font-size: .875em; }

/* ───────── Abertura: a Recepção, ao vivo ───────── */

.tela--recepcao {
  --cols: 70;
  position: relative; display: grid; grid-template-columns: 13.5em minmax(0, 1fr);
  height: 41.5em; border-radius: 1.5em; overflow: hidden;
  background: var(--fundo);
}
.t-lado { background: var(--marinho); color: #c2ccd7; padding: 1.125em .75em; display: flex; flex-direction: column; gap: .125em; }
.t-clinica { display: flex; align-items: center; gap: .625em; padding: .125em .5em 1.125em; }
.t-clinica img { width: 2.125em; height: 2.125em; }
.t-clinica b { display: block; font-size: .875em; line-height: 1.25; color: var(--branco); }
.t-clinica span { display: block; font-size: .6875em; opacity: .7; }
.t-item { display: flex; align-items: center; gap: .85em; height: 2.7em; padding: 0 1em; border-radius: 999px; font-size: .875em; font-weight: 500; }
.t-item .i { width: 1.15em; height: 1.15em; }
.t-item--ativo { background: var(--ouro); color: var(--marinho); }
.t-usuario { margin-top: auto; display: flex; align-items: center; gap: .625em; padding: .875em .5em 0; border-top: 1px solid #1c3a56; }
.t-usuario i { display: grid; place-items: center; flex: none; width: 2.9em; height: 2.9em; border-radius: 50%; background: var(--marinho-800); color: var(--branco); font-size: .6875em; font-weight: 600; font-style: normal; }
.t-usuario b { display: block; font-size: .8125em; color: var(--branco); line-height: 1.3; }
.t-usuario span { display: block; font-size: .6875em; opacity: .7; }

.t-principal { display: flex; flex-direction: column; gap: 1em; min-width: 0; padding: 1em 1.75em 0; }
.t-barra { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.t-barra .t-campo { width: 26em; }
.t-barra > div { display: flex; align-items: center; gap: .625em; }
.t-unidade { display: flex; align-items: center; gap: .6em; height: 3em; padding: 0 1.1em; border-radius: 999px; background: var(--branco); box-shadow: 0 0 0 1px var(--linha); font-size: .8125em; white-space: nowrap; }
.t-unidade span { color: var(--apoio); }
.t-sino { position: relative; display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--branco); box-shadow: 0 0 0 1px var(--linha); }
.t-sino .i { width: 1em; height: 1em; }
.t-sino em { position: absolute; right: -.2em; top: -.4em; min-width: 1.7em; height: 1.7em; padding: 0 .4em; border-radius: 999px; background: var(--ouro); color: var(--marinho); font-size: .625em; font-weight: 700; font-style: normal; line-height: 1.7em; text-align: center; }

.t-titulo { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.t-titulo h3 { font-size: 1.75em; line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.t-titulo p { font-size: .875em; color: var(--apoio); }

.t-resumos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .875em; }
.t-resumo { background: var(--branco); border-radius: 1.5em; box-shadow: 0 0 0 1px var(--linha); padding: .875em 1.125em; overflow: hidden; }
.t-resumo span { display: flex; align-items: center; gap: .6em; font-size: .8125em; font-weight: 500; color: var(--apoio); white-space: nowrap; }
.t-resumo span::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--cor, var(--marinho-300)); }
.t-resumo b { display: block; margin-top: .15em; font-size: 1.75em; line-height: 1.2; font-weight: 500; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.t-resumo small { display: block; font-size: .6875em; color: var(--apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.t-colunas { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 17.5em; gap: 1.125em; }
.t-painel { background: var(--branco); border-radius: 1.5em 1.5em 0 0; box-shadow: 0 0 0 1px var(--linha); overflow: hidden; min-width: 0; }
.t-filtro { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .875em 1.25em; }
.t-filtro .t-campo { width: 13em; height: 2.75em; background: var(--rebaixado); box-shadow: none; }
.t-fila, .t-chegando { position: relative; }
.t-linha { display: flex; align-items: center; gap: .875em; height: 3.75em; padding: 0 1.25em; border-top: 1px solid var(--linha); background: var(--branco); transition: background-color .6s ease; }
.t-linha--chamado { background: #f6f8fa; }
.t-quem { flex: 1; min-width: 0; }
.t-quem b { display: block; font-size: .875em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-quem span { display: block; font-size: .75em; color: var(--apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-espera { font-size: .75em; color: var(--apoio); white-space: nowrap; }

.t-chegando-cab { display: flex; justify-content: space-between; padding: 1em 1.25em .25em; font-size: .875em; font-weight: 600; }
.t-chegando-cab span { font-weight: 400; color: var(--apoio); }
.t-chega { display: flex; align-items: center; gap: .75em; height: 3.5em; margin: 0 1.25em; border-bottom: 1px solid var(--linha); background: var(--branco); }
.t-chega time { width: 3.2em; font-size: .8125em; font-weight: 600; color: var(--warn); font-variant-numeric: tabular-nums; }
.t-chega em {
  display: grid; place-items: center; flex: none; height: 2.5em; padding: 0 1.1em; border-radius: 999px;
  background: var(--tinta); color: #f4f6f8; font-size: .75em; font-weight: 600; font-style: normal;
  transition: transform .35s var(--suave), background-color .35s ease;
}
.t-chega em.tocado { transform: scale(.92); background: var(--ok); }

/* O que acabou de acontecer na recepção */
.t-aviso {
  position: absolute; right: 1.5em; bottom: 1.5em; z-index: 3;
  display: flex; align-items: center; gap: .875em;
  padding: .8em 1.25em .8em 1em; border-radius: 1.1em;
  background: var(--marinho); color: var(--branco);
  box-shadow: 0 1.5em 3em -1em rgba(7, 19, 29, .6);
  pointer-events: none;
}
.t-aviso:empty { display: none; }
.t-aviso i { width: .6em; height: .6em; border-radius: 50%; background: #4cc79a; flex: none; }
.t-aviso b { display: block; font-size: .875em; line-height: 1.3; }
.t-aviso span { display: block; font-size: .75em; color: var(--marinho-300); }

@media (max-width: 61.99rem) {
  .tela--recepcao { --cols: 52; grid-template-columns: minmax(0, 1fr); }
  .t-lado { display: none; }
  .t-filtro .t-campo { width: 8.5em; }
  .t-filtro .t-seg span { padding: 0 .7em; }
}
@media (max-width: 39.99rem) {
  .tela--recepcao { --cols: 25; height: 37.5em; border-radius: 1.25em; }
  .t-principal { padding: .875em .875em 0; gap: .75em; }
  .t-barra, .t-chegando-painel, .t-espera, .t-filtro .t-seg { display: none; }
  .t-colunas { grid-template-columns: minmax(0, 1fr); }
  .t-resumos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625em; }
  .t-titulo h3 { font-size: 1.5em; }
  .t-titulo .t-cta { padding-left: 1.1em; }
  .t-filtro .t-campo { width: 100%; }
  .t-linha { padding: 0 .875em; gap: .625em; }
  .t-filtro { padding: .75em .875em; }
  .t-aviso { right: .75em; left: .75em; bottom: .75em; }
}

/* ───────── Recortes da jornada ───────── */

.recorte {
  position: relative; overflow: hidden;
  height: 27.5em; border-radius: 1.75em;
  background: var(--branco); box-shadow: 0 0 0 1px var(--linha), 0 1px 2px rgba(16, 24, 40, .04);
}
.r-corpo { height: 100%; display: flex; flex-direction: column; gap: 1em; padding: 1.5em; }
.r-cab { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.r-cab h4 { font-size: 1.25em; line-height: 1.3; font-weight: 500; letter-spacing: -.02em; }
.r-cab p { font-size: .8125em; color: var(--apoio); }

/* 1 · Agenda */
.r-agenda { display: grid; grid-template-columns: 3em repeat(3, minmax(0, 1fr)); flex: 1; min-height: 0; border-radius: 1.25em; box-shadow: 0 0 0 1px var(--linha); overflow: hidden; }
.r-horas { padding-top: 3.25em; display: grid; grid-auto-rows: 4.5em; }
.r-horas span { font-size: .6875em; color: var(--apoio); padding: .4em 0 0 .9em; font-variant-numeric: tabular-nums; }
.r-prof { position: relative; border-left: 1px solid var(--linha); background: linear-gradient(var(--linha) 1px, transparent 1px) 0 3.25em / 100% 4.5em repeat-y; }
.r-prof header { height: 3.25em; padding: .5em .75em 0; }
.r-prof header b { display: block; font-size: .75em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-prof header span { display: block; font-size: .625em; color: var(--apoio); }
.r-ev {
  position: absolute; left: .3em; right: .3em;
  top: calc(3.25em + var(--h) * 2.25em + .15em); height: calc(var(--d, 1) * 2.25em - .3em);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 .7em; border-radius: .9em;
  background: var(--marinho-100); color: var(--marinho);
  overflow: hidden;
}
.r-ev b { font-size: .6875em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-ev span { font-size: .5625em; line-height: 1.3; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-ev--aberto { background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); }
.r-ev--chegou { background: var(--ok-soft); color: var(--ok); }
.r-ev--novo { background: var(--marinho); color: var(--branco); }
.r-selo {
  position: absolute; right: 1.25em; bottom: 1.25em;
  display: flex; align-items: center; gap: .6em;
  padding: .6em 1em; border-radius: 999px;
  background: var(--marinho); color: var(--branco);
  font-size: .75em; font-weight: 600;
  box-shadow: 0 1em 2em -.8em rgba(7, 19, 29, .6);
}
.r-selo .i { width: 1.15em; height: 1.15em; }

/* 2 · Chegada */
.r-chegada { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1em; }
.r-bilhete {
  border-radius: 1.5em; background: var(--marinho); color: var(--branco);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em;
  padding: 1em; text-align: center;
}
.r-bilhete > span { font-size: .75em; color: var(--marinho-300); }
.r-bilhete div { background: var(--branco); color: var(--marinho); border-radius: 1.25em; padding: .7em 1.5em .6em; }
.r-bilhete div small { display: block; font-size: .5625em; font-weight: 600; letter-spacing: .2em; color: var(--apoio); }
.r-bilhete div b { display: block; font-size: 2.5em; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.r-bilhete p { font-size: .9375em; font-weight: 600; }
.r-bilhete em { font-size: .6875em; font-style: normal; color: var(--marinho-300); line-height: 1.4; }
.r-lista { display: flex; flex-direction: column; justify-content: center; }
.r-lista li { display: flex; align-items: center; gap: .75em; padding: .8em 0; border-bottom: 1px solid var(--linha); }
.r-lista li:last-child { border: 0; }
.r-lista li > span:not(.r-troca) { flex: 1; min-width: 0; font-size: .8125em; font-weight: 500; }
.r-lista li > span:not(.r-troca) small { display: block; font-size: .85em; font-weight: 400; color: var(--apoio); }
.r-check { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.r-check .i { width: .9em; height: .9em; stroke-width: 3; }
.r-troca { position: relative; display: grid; flex: none; }
.r-troca > * { grid-area: 1 / 1; justify-self: end; align-self: center; }
.r-troca--inicio > * { justify-self: start; }
/* Estado final das trocas; a animação parte do estado anterior. */
.some { opacity: 0; visibility: hidden; }

/* 3 · Telão */
.recorte--telao { background: radial-gradient(120% 90% at 50% 0%, #14304a 0%, #0c1f2f 45%, #07131d 85%); color: var(--branco); box-shadow: none; }
.r-telao-topo { display: flex; justify-content: space-between; align-items: center; }
.r-telao-topo > div { display: flex; align-items: center; gap: .6em; }
.r-telao-topo img { width: 1.9em; height: 1.9em; }
.r-telao-topo b { display: block; font-size: .8125em; line-height: 1.2; }
.r-telao-topo span { display: block; font-size: .625em; color: rgba(255, 255, 255, .6); }
.r-telao-topo time { font-size: 1.25em; font-weight: 500; font-variant-numeric: tabular-nums; }
.r-telao { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.618fr 1fr; gap: 1em; }
.r-chamando { position: relative; border-radius: 1.5em; background: var(--ouro); color: var(--marinho); padding: 0 1.75em; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.r-chamando small { font-size: .625em; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
.r-chamando b { font-size: 5.25em; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.r-chamando p { display: flex; align-items: center; gap: .5em; margin-top: .5em; font-size: 1.25em; font-weight: 500; }
.r-chamando p .i { width: 1em; height: 1em; }
.r-chamando > span { font-size: .8125em; opacity: .75; }
.r-voz { position: absolute; right: 1.5em; top: 1.5em; display: flex; align-items: flex-end; gap: .2em; height: 1.75em; }
.r-voz i { width: .25em; height: 100%; border-radius: 999px; background: var(--marinho); transform-origin: bottom; }
.r-ultimas { border-radius: 1.5em; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); padding: 1em 1.25em; }
.r-ultimas h5 { margin: 0 0 .25em; font-size: .6875em; font-weight: 500; color: rgba(255, 255, 255, .6); }
.r-ultimas div { display: flex; justify-content: space-between; align-items: center; padding: .6em 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.r-ultimas div:last-child { border: 0; }
.r-ultimas b { font-size: 1.375em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.r-ultimas span { font-size: .6875em; color: rgba(255, 255, 255, .75); }
.r-telao-pe { display: flex; align-items: center; gap: .7em; padding: .6em 1.1em; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .6875em; color: rgba(255, 255, 255, .85); }
.r-telao-pe::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--marinho-300); flex: none; }

/* 4 · Atendimento */
.r-paciente { display: flex; align-items: center; gap: .875em; }
.r-paciente > i { display: grid; place-items: center; flex: none; width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--marinho-100); color: var(--marinho); font-size: .8125em; font-weight: 600; font-style: normal; }
.r-paciente div { flex: 1; min-width: 0; }
.r-paciente small { display: block; font-size: .6875em; color: var(--apoio); }
.r-paciente b { display: block; font-size: 1.375em; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
.r-paciente span:not(.t-pill) { display: block; font-size: .75em; color: var(--apoio); }
.r-consulta { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.618fr 1fr; gap: 1em; }
.r-ficha, .r-volta { border-radius: 1.25em; box-shadow: 0 0 0 1px var(--linha); padding: 1em; display: flex; flex-direction: column; gap: .75em; min-width: 0; }
.r-digita { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 100%; }
.r-volta .t-chips span { height: 2.2em; padding: 0 .8em; font-size: .6875em; }
.r-volta p { font-size: .6875em; color: var(--apoio); line-height: 1.45; }
.r-data { display: flex; align-items: center; justify-content: space-between; height: 2.8em; padding: 0 1em; border-radius: 999px; background: var(--rebaixado); font-size: .8125em; font-variant-numeric: tabular-nums; }
.r-data .i { color: var(--apoio); }
.r-pe { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.r-pe > span:first-child { font-size: .6875em; color: var(--apoio); }

/* 5 · Conta */
.r-saldo { display: flex; justify-content: space-between; align-items: center; height: 3em; padding: 0 1.1em; border-radius: 999px; background: var(--rebaixado); font-size: .875em; }
.r-saldo span { color: var(--apoio); }
.r-saldo b { font-variant-numeric: tabular-nums; }
.r-efeitos { margin-top: auto; border-radius: 1.25em; box-shadow: 0 0 0 1px var(--linha); padding: .25em 1em; }
.r-efeitos li { display: flex; align-items: center; gap: .75em; padding: .7em 0; border-bottom: 1px solid var(--linha); font-size: .8125em; }
.r-efeitos li:last-child { border: 0; }
.r-efeitos li span { flex: 1; min-width: 0; }
.r-efeitos li b { font-variant-numeric: tabular-nums; }
.r-efeitos .r-check { font-size: 1.1em; }

/* 6 · Retorno */
.r-cartao { display: flex; align-items: center; gap: .875em; padding: 1em; border-radius: 1.25em; box-shadow: 0 0 0 1px var(--linha); }
.r-cartao > i { display: grid; place-items: center; flex: none; width: 2.75em; height: 2.75em; border-radius: 50%; background: var(--marinho-100); color: var(--marinho); }
.r-cartao > i .i { width: 1.25em; height: 1.25em; }
.r-cartao div { flex: 1; min-width: 0; }
.r-cartao small { display: block; font-size: .6875em; color: var(--apoio); }
.r-cartao b { display: block; font-size: 1em; line-height: 1.3; }
.r-cartao span:not(.t-pill) { display: block; font-size: .75em; color: var(--apoio); }
.r-pesquisa { flex: 1; min-height: 0; border-radius: 1.25em; background: var(--fundo); padding: 1.25em; display: flex; flex-direction: column; gap: .875em; justify-content: center; }
.r-pesquisa small { font-size: .6875em; color: var(--apoio); }
.r-pesquisa h5 { margin: 0; font-size: 1.125em; line-height: 1.3; font-weight: 500; letter-spacing: -.015em; }
.r-escala { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: .3em; }
.r-escala span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); font-size: .75em; font-weight: 600; font-variant-numeric: tabular-nums; }
.r-escala .on { background: var(--marinho); color: var(--branco); box-shadow: none; }
.r-resposta { display: flex; align-items: center; gap: .6em; font-size: .75em; color: var(--ok); font-weight: 600; }

/* ───────── Indicadores (sobre o marinho) ───────── */

.tela--indicadores { --cols: 44; color: #eef1f4; }
.g-resumos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75em; }
.g-resumo { border-radius: 1.5em; background: var(--marinho-900); box-shadow: inset 0 0 0 1px var(--linha-escura); padding: 1em 1.1em; min-width: 0; }
.g-resumo > span { display: block; min-height: 2.8em; font-size: .6875em; line-height: 1.4; color: var(--apoio-escuro); }
.g-resumo b { display: block; margin: .2em 0 .3em; font-size: 1.5em; line-height: 1.15; font-weight: 500; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-resumo small { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .4em; font-size: .625em; line-height: 1.5; color: var(--apoio-escuro); }
.g-resumo small em { flex-basis: 100%; font-style: normal; font-weight: 600; }
.g-sobe em { color: #4cc79a; }
.g-desce em { color: #f07272; }
.g-grafico { margin-top: .75em; border-radius: 1.5em; background: var(--marinho-900); box-shadow: inset 0 0 0 1px var(--linha-escura); padding: 1.1em 1.25em 1em; }
.g-grafico header { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.g-grafico h4 { font-size: .9375em; font-weight: 600; }
.g-legenda { display: flex; gap: 1.25em; font-size: .6875em; color: var(--apoio-escuro); }
.g-legenda span { display: flex; align-items: center; gap: .5em; }
.g-legenda span::before { content: ""; width: 1.4em; height: .2em; border-radius: 2px; background: var(--cor); }
.g-grafico svg { width: 100%; height: auto; margin-top: .75em; overflow: visible; }
.g-eixo { display: flex; justify-content: space-between; margin-top: .4em; font-size: .625em; color: var(--apoio-escuro); }

@media (max-width: 39.99rem) {
  .tela--indicadores { --cols: 25; }
  .g-resumos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recorte { --cols: 33; }
  .r-volta p { display: none; }
}

/* ───────── Miniaturas dos adicionais ───────── */

.tela--mini { --cols: 19.5; }
.mini { height: 10.5em; border-radius: 1.25em; background: var(--fundo); padding: 1em; display: flex; flex-direction: column; justify-content: center; gap: .6em; overflow: hidden; }

.m-dentes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .3em; }
.m-dentes svg { width: 100%; height: auto; }
.m-dentes polygon, .m-dentes rect { fill: var(--branco); stroke: #b9c4d0; stroke-width: 1; transition: fill .5s ease; }
.m-numeros { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .3em; font-size: .5625em; font-weight: 600; color: var(--apoio); text-align: center; font-variant-numeric: tabular-nums; }
.m-legenda { display: flex; gap: 1em; font-size: .625em; color: var(--apoio); }
.m-legenda span { display: flex; align-items: center; gap: .4em; }
.m-legenda span::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--cor); }

.m-leitos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; }
.m-leito { border-radius: .9em; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); padding: .5em .65em; min-width: 0; transition: background-color .6s ease; }
.m-leito b { display: flex; align-items: center; gap: .4em; font-size: .6875em; }
.m-leito b .i { width: 1.1em; height: 1.1em; color: var(--apoio); }
.m-leito span { display: block; font-size: .5625em; color: var(--apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-leito--livre { background: var(--ok-soft); }
.m-leito--livre span { color: var(--ok); font-weight: 600; }
.m-leito--limpeza { background: var(--warn-soft); }
.m-leito--limpeza span { color: var(--warn); font-weight: 600; }

.m-produto { display: flex; align-items: center; gap: .6em; padding: .45em 0; border-bottom: 1px solid var(--linha); }
.m-produto:last-child { border: 0; }
.m-produto div { flex: 1; min-width: 0; }
.m-produto b { display: block; font-size: .6875em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-produto span { display: block; font-size: .5625em; color: var(--apoio); }
.m-produto em { font-size: .6875em; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-produto .t-pill { font-size: .5625em; }