/* Saúde — o dia do corpo (23/09/2026).

   Mesma gramática visual do resto do Tião: painel escuro, número grande,
   toque de 44px. O que é novo aqui é o anel — a leitura que se entende de
   relance, sem ler nenhuma palavra. */

.sd-abas {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sd-abas::-webkit-scrollbar { display: none; }
.sd-aba {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  border: 1px solid var(--linha-forte); background: transparent; color: var(--fraco);
  border-radius: 999px; padding: 8px 15px; font-size: 14px; min-height: 40px;
}
.sd-aba .ic { width: 16px; height: 16px; }
.sd-aba.ativa { background: var(--marca); border-color: var(--marca); color: #fff; }

/* -------------------------------------------------------------- os anéis */
.sd-aneis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.sd-anel {
  position: relative; display: grid; justify-items: center; gap: 2px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--painel);
  padding: 14px 10px 12px; text-align: center;
}
.sd-anel svg { width: 72px; height: 72px; transform: rotate(-90deg); }
.sd-anel .sd-trilho { fill: none; stroke: var(--linha-forte); stroke-width: 7; }
.sd-anel .sd-arco { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.sd-anel-ic { position: absolute; top: 40px; color: var(--fraco); }
.sd-anel-ic .ic { width: 20px; height: 20px; }
.sd-anel b { font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; }
.sd-anel b small { font-size: 12px; font-weight: 500; color: var(--fraco); }
.sd-anel > small { color: var(--apagado); font-size: 11.5px; }

/* ------------------------------------------------------ barras e tirinhas */
.sd-barra { height: 9px; border-radius: 999px; background: var(--fundo2); overflow: hidden; }
.sd-barra i { display: block; height: 100%; border-radius: 999px; transition: width .35s ease; }
.sd-tira { display: flex; gap: 3px; align-items: flex-end; height: 38px; margin-top: 8px; }
.sd-tira i { flex: 1; border-radius: 3px 3px 0 0; min-height: 3px; display: block; opacity: .85; }

/* ------------------------------------------------- blocos de número e ação */
.sd-agua { display: grid; gap: 9px; }
.sd-agua b { font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.sd-agua b small { font-size: 14px; font-weight: 500; color: var(--fraco); }
.sd-agua span { color: var(--fraco); font-size: 13.5px; }
.sd-bts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.sd-bts button { font-size: 14px; border-radius: 999px; padding: 9px 15px; min-height: 42px; }

.sd-placar { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.sd-placar b { font-size: 24px; display: block; line-height: 1; font-variant-numeric: tabular-nums; }
.sd-placar small { color: var(--apagado); font-size: 11.5px; }

.sd-grade-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 12px; }
.sd-num b { font-size: 20px; display: block; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sd-num small { color: var(--apagado); font-size: 11.5px; }

.sd-ajuda { color: var(--fraco); font-size: 13px; margin: 0 0 10px; line-height: 1.5; }
.sd-rodape { color: var(--apagado); font-size: 12.5px; margin-top: 8px; }

/* ---------------------------------------------------------------- o corpo */
.sd-corpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; }
.sd-corpo-card {
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--painel2); padding: 12px 13px; display: grid; gap: 2px;
}
.sd-corpo-nome { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--apagado); }
.sd-corpo-card b { font-size: 25px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sd-corpo-card b small { font-size: 13px; font-weight: 500; color: var(--fraco); }
.sd-corpo-card em { font-style: normal; font-size: 13px; color: var(--fraco); }
.sd-corpo-card em.sobe-bom { color: var(--ok); }
.sd-corpo-card em.sobe-ruim { color: var(--alerta); }
.sd-desde { color: var(--apagado); font-size: 11px; }

/* ----------------------------------------------------------- o equilíbrio */
.sd-nota { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.sd-nota b { font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; }
.sd-nota b small { font-size: 18px; color: var(--apagado); }
.sd-nota span { color: var(--fraco); font-size: 14px; }
.sd-nota small { color: var(--apagado); }
.sd-criterios { display: grid; gap: 13px; margin-top: 12px; }
.sd-criterio { display: grid; gap: 5px; }
.sd-crit-nome { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; flex-wrap: wrap; }
.sd-crit-nome small { color: var(--apagado); font-variant-numeric: tabular-nums; }
.sd-crit-leitura { color: var(--fraco); font-size: 12.5px; line-height: 1.45; }
.sd-area { display: grid; gap: 5px; margin-bottom: 10px; }
.sd-area span { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.sd-area small { color: var(--apagado); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ formulários */
.sd-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.sd-campos label { font-size: 11.5px; color: var(--apagado); display: grid; gap: 3px; }
.sd-campos input, .sd-campos select { width: 100%; }
.sd-campos label small { color: var(--apagado); font-size: 10.5px; line-height: 1.35; }
.sd-marcas { display: grid; gap: 9px; margin: 14px 0 4px; }
.sd-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--fraco); }
.sd-check input { width: 20px; height: 20px; }
.sd-x {
  background: transparent; border: none; color: var(--apagado); min-height: 34px;
  padding: 4px 6px; border-radius: 8px;
}
.sd-x:hover { color: var(--alerta); border: none; }
.sd-x .ic { width: 16px; height: 16px; }

@media (max-width: 700px) {
  .sd-aneis { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .sd-anel svg { width: 62px; height: 62px; }
  .sd-anel-ic { top: 35px; }
  .sd-nota b { font-size: 44px; }
}

/* ------------------------------------------- a análise e os remédios (24/09) */
.sd-lido {
  border-left: 3px solid var(--marca); padding: 2px 0 2px 12px; margin-bottom: 14px;
  display: grid; gap: 3px;
}
.sd-lido-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.sd-lido-topo b { font-size: 14.5px; }
.sd-lido-topo em { font-style: normal; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.sd-lido-num { font-size: 21px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sd-lido p { margin: 0; color: var(--fraco); font-size: 13px; line-height: 1.5; }

.sd-remedio {
  border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--painel2);
  padding: 12px 14px; display: grid; gap: 9px; margin-bottom: 10px;
}
.sd-rem-nome { display: grid; gap: 2px; }
.sd-rem-nome small { color: var(--apagado); font-size: 12px; }
.sd-rem-estoque b { font-size: 19px; font-variant-numeric: tabular-nums; }
.sd-rem-estoque b.baixo { color: var(--alerta); }
.sd-rem-estoque small { color: var(--apagado); font-size: 12px; margin-left: 6px; }
.sd-bt-dose {
  background: var(--marca); border-color: var(--marca); color: #fff;
  border-radius: 999px; padding: 6px 14px; min-height: 36px; font-size: 13px;
}
.sd-bt-dose:hover { border-color: var(--marca); filter: brightness(1.08); }
.selo.aviso { background: var(--aviso); color: #16202b; }

/* Os botões do cartão de remédio (24/09/2026). A forma deles nasceu na tela de
   Gestão, que injeta o próprio estilo só quando abre — aqui, sem esta regra, o
   navegador empilhava três botões soltos no meio do cartão. */
.sd-remedio .g-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sd-remedio .g-acoes button {
  font-size: 13px; border-radius: 9px; padding: 7px 13px; min-height: 36px;
}
.sd-remedio .g-acoes button.perigo { color: var(--fraco); border-style: dashed; }
.sd-remedio .g-acoes button.perigo:hover { color: var(--alerta); border-color: var(--alerta); }

/* o passo a passo do Atalho (24/09/2026) */
.sd-passos { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 10px; }
.sd-passos li { font-size: 13.5px; line-height: 1.55; color: var(--fraco); }
.sd-passos li b { color: var(--texto); }
.sd-passos li i { font-style: normal; color: var(--azul-claro); }
.sd-copiar { display: flex; gap: 8px; align-items: center; }
.sd-copiar input { flex: 1; min-width: 0; }
.sd-copiar button { white-space: nowrap; border-radius: 999px; padding: 8px 16px; min-height: 42px; }
.sd-campos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sd-campos-lista span { display: grid; gap: 1px; border: 1px solid var(--linha); border-radius: 10px; padding: 7px 10px; }
.sd-campos-lista b { font-family: var(--mono); font-size: 12.5px; }
.sd-campos-lista small { color: var(--apagado); font-size: 11px; }