/* Unidade (UBS, UPA, CAPS...): conteúdo da casca e Início da unidade */

/* painel embutido (Administração, RH, Recepção...) já traz o próprio cabeçalho: ocupa a largura toda */
#ubs-main-content:has(> .embedded-in-shell){ max-width:none; padding:0 }

.ubs-start-hint{ margin:var(--l-e10) auto; text-align:center; color:var(--l-texto-3) }

/* Início */
.un-home{ display:flex; flex-direction:column; gap:var(--l-e5) }
.un-kpis{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--l-e3) }
.un-kpi{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:var(--l-e4) var(--l-e5);
  border:1px solid var(--l-borda); border-radius:var(--l-raio-3); background:var(--l-sup); text-align:left;
  transition:border-color var(--l-rapido);
}
.un-kpi:hover{ border-color:var(--l-marca) }
.un-kpi b{ font-size:28px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--l-texto) }
.un-kpi span{ font-size:var(--l-t-peq); color:var(--l-texto-3) }
.un-kpis.carregando b{ color:var(--l-texto-3) }
.un-continuar{ margin:0; font-size:var(--l-t-peq); color:var(--l-texto-3) }

.un-colunas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); gap:var(--l-e4); align-items:start }
.un-item{ width:100%; border:0; border-bottom:1px solid var(--l-fio); background:none; text-align:left; color:inherit; font:inherit; padding:12px var(--l-e5) }
.l-lista li:last-child > .un-item{ border-bottom:0 }
.un-item .l-item-corpo small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.un-ico{ display:grid; place-items:center; width:32px; height:32px; border-radius:var(--l-raio-2); background:var(--l-marca-suave); color:var(--l-marca-tinta); flex:none }
.un-ico svg{ width:17px; height:17px }
.un-item .l-item-lado small{ font-size:var(--l-t-mini); color:var(--l-texto-3) }
.un-seta{ font-size:18px; color:var(--l-texto-3); transition:transform var(--l-rapido) }
.un-item:hover .un-seta{ transform:translateX(2px); color:var(--l-marca-tinta) }

@media (max-width:760px){
  .un-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .un-colunas{ grid-template-columns:1fr }
}

/* Telas dos módulos clínicos (vacina, enfermagem, odonto...): só o corpo, empilhado */
.un-tela{ display:flex; flex-direction:column; gap:var(--l-e5); min-width:0 }
.un-tela .au-sec{ display:flex; flex-direction:column; gap:var(--l-e4) }
.un-tela .l-bloco-corpo{ display:flex; flex-direction:column; gap:var(--l-e4) }
.un-tela .au-toolbar{ align-items:flex-end }
.un-tela .au-form{ align-items:start }
.un-tela .l-resumo .is-alerta b{ color:var(--l-erro) }
.un-tela details > summary{ cursor:pointer }
.un-tela details[open] > summary{ margin-bottom:var(--l-e3) }
/* linha de resultado de busca (paciente, item): nome à esquerda, documento à direita */
.un-tela .q-row{ grid-template-columns:minmax(0,1fr) auto; border:0; border-bottom:1px solid var(--l-fio) }
.un-tela .q-row:last-child{ border-bottom:0 }
.un-tela .q-row.is-off{ opacity:.7 }
.un-tela .q-row.c4{ grid-template-columns:auto auto auto minmax(0,1fr) }
.un-tela .au-fld.estreito{ width:150px; flex:none }
.un-tela .cap{ text-transform:capitalize }
.un-tela .un-camaras{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:var(--l-e4) }
.vac-camara.is-alerta{ border-color:var(--l-erro) }
.vac-temp{ margin:0; display:flex; align-items:baseline; gap:var(--l-e2); color:var(--l-texto-3) }
.vac-temp b{ font-size:32px; font-weight:600; letter-spacing:-.02em; color:var(--l-texto); font-variant-numeric:tabular-nums }
.vac-camara.is-alerta .vac-temp b{ color:var(--l-erro) }
.un-tela .l-bloco > .au-table-wrap .au-table{ table-layout:fixed }

/* formulário na página (cadastro pontual dentro da tela do módulo) */
.un-form{ display:flex; flex-direction:column; gap:var(--l-e4); padding-bottom:var(--l-e5) }
.un-form > :not(.l-bloco-cab){ margin-inline:var(--l-e5) }
.l-bloco-cab .l-nota{ margin:2px 0 0 }
/* cabeçalho de ficha (paciente, domicílio): solto, nome grande e dados em uma linha */
.un-ficha{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--l-e4); flex-wrap:wrap }
.un-ficha h2{ font-size:var(--l-t-titulo); font-weight:600 }
.un-ficha p{ margin:2px 0 0; font-size:var(--l-t-peq); color:var(--l-texto-3) }
.un-ficha .pt{ align-items:flex-start }
.un-vitais{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:var(--l-e3) }
.un-pa{ display:flex; align-items:center; gap:4px }
.un-pa input{ min-width:0 }
.un-externa{ display:flex; flex-direction:column; gap:var(--l-e3); padding:var(--l-e4); border:1px dashed var(--l-borda); border-radius:var(--l-raio-2) }
.un-externa[hidden]{ display:none }
.un-tela .q-row.c2{ grid-template-columns:auto minmax(0,1fr) }

/* odontograma: cor da condição chega como --cor (dado clínico) */
.odo-boca{ display:flex; flex-direction:column; align-items:center; gap:var(--l-e2); overflow-x:auto; padding:var(--l-e2) 0 }
.odo-arcada{ display:flex; gap:4px }
.odo-dente{
  display:flex; flex-direction:column; align-items:center; gap:4px; width:42px; padding:7px 2px;
  border:1px solid var(--l-borda); border-radius:var(--l-raio-2); background:var(--l-sup); color:var(--l-texto); font-size:var(--l-t-peq); font-variant-numeric:tabular-nums;
}
.odo-dente:hover{ border-color:var(--l-marca) }
.odo-dente i{ display:block; width:22px; height:5px; border-radius:3px; background:var(--cor, var(--l-borda)) }
.odo-dente em{ font-style:normal; font-size:var(--l-t-mini); font-weight:600; color:var(--l-erro) }
.odo-legenda{ display:flex; flex-wrap:wrap; gap:var(--l-e2) var(--l-e4); margin:0; font-size:var(--l-t-peq); color:var(--l-texto-2) }
.odo-legenda span::before, .odo-cond::before{ content:""; display:inline-block; width:10px; height:10px; margin-right:6px; border-radius:3px; vertical-align:-1px; background:var(--cor) }

/* subtítulo dentro de formulário longo (vigilância) */
.vg-sub{ display:flex; flex-direction:column; gap:2px; margin-top:var(--l-e3); padding-top:var(--l-e3); border-top:1px solid var(--l-fio) }
.vg-sub h4{ font-size:var(--l-t-corpo); font-weight:600 }
.vg-sub p{ margin:0 }
/* alerta clínico calculado (óbito fetal, violência, caderneta) */
.cl-vitais:empty{ display:none }
.cl-vitais{ display:flex; flex-direction:column; gap:4px; padding:var(--l-e3) var(--l-e4); border-radius:var(--l-raio-2); background:var(--l-atencao-fundo, var(--l-sup-2)); border:1px solid var(--l-borda) }
.cl-vitais.grave{ background:var(--l-erro-fundo); border-color:var(--l-erro) }
.cl-vitais-head{ display:flex; align-items:center; gap:var(--l-e2); font-weight:600 }
.cl-vitais-head svg{ width:16px; height:16px }
.cl-vitais ul{ margin:0; padding-left:18px; font-size:var(--l-t-peq) }
.cl-vitais li.g-grave{ color:var(--l-erro); font-weight:500 }
.un-tela .vao-2{ grid-column:span 2 }
.un-tela .vao-3{ grid-column:span 3 }
.un-tela .vao-4{ grid-column:span 4 }
.lb-tubo{ display:inline-block; width:10px; height:10px; margin-right:6px; border-radius:50%; vertical-align:-1px; background:var(--cor) }
/* cabeçalho de bloco com título e linha de apoio (fichas dos módulos) */
.l-bloco-cab h2{ font-size:var(--l-t-med); font-weight:600 }
.l-bloco-cab p{ margin:2px 0 0; font-size:var(--l-t-peq); color:var(--l-texto-3) }
.l-bloco > .q-list{ padding:0 }
/* conteúdo solto dentro de um bloco (formulário, nota, vazio) ganha a margem do corpo */
.un-tela .l-bloco > :is(.au-form, .l-nota, .t-note, .l-barra, .au-toolbar, p){ margin:var(--l-e4) var(--l-e5) }
.un-tela .l-bloco > .au-empty{ margin:var(--l-e4) var(--l-e5) }
/* números do Início da unidade: cartões verdes */
.un-kpi{ background:var(--l-verde); border-color:var(--l-verde-borda) }
.un-kpi:hover{ border-color:var(--l-verde-texto) }
.un-kpi b{ color:var(--l-verde-texto) }
.un-kpi span, .un-kpis.carregando b{ color:var(--l-verde-texto-2) }

/* Avisos dentro da unidade: o feed da intranet com o respiro de uma tela da unidade */
#ubs-main-content > #intranet-blog.embedded-in-shell{ padding:var(--l-e6) var(--l-e8) var(--l-e10) !important }
#ubs-main-content > #intranet-blog .in-blog-cab{ margin-top:0 }

/* ================================================================ números do Início (01/10, 2ª versão)
   Cartão claro com ícone e tom por significado: quem espera puxa atenção, quem foi
   atendido é verde. O bloco sólido da cor do portal deixava os quatro iguais e pesados. */
.un-kpi{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:var(--l-e4); row-gap:0; align-items:center;
  position:relative; overflow:hidden; padding:var(--l-e4) var(--l-e5);
  background:var(--l-sup); border:1px solid var(--l-borda); border-radius:16px;
  box-shadow:0 1px 2px rgba(10,14,6,.05); transition:transform var(--l-rapido), box-shadow var(--l-rapido), border-color var(--l-rapido);
  --kpi:var(--l-marca-tinta); --kpi-fundo:var(--l-marca-suave);
}
.un-kpi::after{ content:""; position:absolute; right:-28px; top:-28px; width:96px; height:96px; border-radius:50%; background:var(--kpi-fundo); opacity:.55; pointer-events:none }
.un-kpi:hover{ transform:translateY(-2px); border-color:var(--kpi); box-shadow:0 10px 24px -14px rgba(10,14,6,.35) }
.un-kpi-ico{ grid-row:1 / 3; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--kpi-fundo); color:var(--kpi) }
.un-kpi-ico svg{ width:22px; height:22px }
.un-kpi b{ position:relative; z-index:1; font-size:30px; font-weight:650; line-height:1.05; color:var(--l-texto) }
.un-kpi span{ position:relative; z-index:1; font-size:var(--l-t-peq); color:var(--l-texto-3) }
.un-kpis.carregando b{ color:var(--l-texto-3) }
.un-kpi-triagem{ --kpi:var(--l-atencao); --kpi-fundo:var(--l-atencao-fundo) }
.un-kpi-consulta{ --kpi:var(--l-info); --kpi-fundo:var(--l-info-fundo) }
.un-kpi-andamento{ --kpi:var(--l-marca-tinta); --kpi-fundo:var(--l-marca-suave) }
.un-kpi-concluidos{ --kpi:var(--l-ok); --kpi-fundo:var(--l-ok-fundo) }