/* ================= Clínica de Medicina Perioperatória — interface ========= */

:root{
  --azul:#0f4c81; --azul2:#1668ad; --azulclaro:#e8f1f8;
  --verde:#0f7b45; --verdeclaro:#e2f5ea;
  --vermelho:#b3261e; --amarelo:#fff4d1;
  --texto:#182430; --suave:#5d6b7a; --linha:#d5dde5; --fundo:#f2f5f8;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  background:var(--fundo); color:var(--texto); font-size:15px;
}
.oculto{display:none !important}

/* ------------------------------------------------------------------ topo */
#topo{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--azul); color:#fff; padding:10px 18px;
  position:sticky; top:0; z-index:50;
}
.marca strong{display:block; font-size:16px; line-height:1.2}
.marca span{font-size:12px; opacity:.8}
#topoMenu{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
#topoMenu button{
  background:rgba(255,255,255,.12); color:#fff; border:0; padding:8px 14px;
  border-radius:7px; cursor:pointer; font-size:14px;
}
#topoMenu button:hover{background:rgba(255,255,255,.25)}
#topoMenu button.ativo{background:#fff; color:var(--azul); font-weight:600}
.usuario{display:flex; align-items:center; gap:10px; font-size:14px}

main{max-width:1180px; margin:0 auto; padding:20px 16px 60px}

/* --------------------------------------------------------------- botões */
.btn{
  border:0; border-radius:8px; padding:10px 18px; font-size:15px;
  cursor:pointer; background:var(--azul2); color:#fff; font-family:inherit;
}
.btn:hover{filter:brightness(1.1)}
.btn.secundario{background:#fff; color:var(--azul); border:1.5px solid var(--linha)}
.btn.verde{background:var(--verde)}
.btn.perigo{background:#fff; color:var(--vermelho); border:1.5px solid #f0c9c6}
.btn.fantasma{background:transparent; color:inherit; border:1px solid rgba(255,255,255,.4); padding:6px 12px; font-size:13px}
.btn.pequeno{padding:6px 12px; font-size:13px}
.btn:disabled{opacity:.45; cursor:default}

/* ---------------------------------------------------------------- login */
.loginCaixa{max-width:820px; margin:6vh auto; text-align:center}
.loginCaixa h1{font-size:26px; color:var(--azul); margin:0 0 4px}
.loginCaixa p{color:var(--suave); margin:0 0 30px}
.grid-login{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.cartaoUsuario{
  background:#fff; border:2px solid var(--linha); border-radius:12px;
  padding:22px 16px; cursor:pointer; text-align:center; font-size:16px; font-weight:600;
}
.cartaoUsuario:hover{border-color:var(--azul2); background:var(--azulclaro)}
.cartaoUsuario small{display:block; font-weight:400; color:var(--suave); font-size:12px; margin-top:4px}
.cartaoUsuario.sec{border-color:#c9b08a; background:#fdf8f0}
.cartaoUsuario.sec:hover{border-color:#a8863f}

/* ---------------------------------------------------------------- cards */
.painel{background:#fff; border:1px solid var(--linha); border-radius:12px; margin-bottom:18px; overflow:hidden}
.painelTopo{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; background:var(--azulclaro); border-bottom:1px solid var(--linha);
}
.painelTopo h2{margin:0; font-size:16px; color:var(--azul)}
.painelCorpo{padding:14px 16px; background:#eef2f7}
.barra{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.barra h1{font-size:20px; margin:0; color:var(--azul)}

/* --------------------------------------------------------------- agenda */
.itemAgenda{
  display:flex; align-items:center; gap:14px; padding:11px 12px;
  border:1px solid var(--linha); border-radius:9px; margin-bottom:8px; background:#fff;
}
.itemAgenda .hora{font-weight:700; font-size:16px; min-width:52px; color:var(--azul)}
.itemAgenda .quem{flex:1; min-width:180px}
.itemAgenda .quem b{display:block; font-size:15px}
.itemAgenda .quem small{color:var(--suave)}
.itemAgenda.chegou{background:var(--verdeclaro); border-color:#8fcfae}
.itemAgenda.atendido{opacity:.55}
.pastilha{
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px;
  background:#eceff3; color:var(--suave); text-transform:uppercase; letter-spacing:.4px;
}
.pastilha.verde{background:var(--verde); color:#fff}
.pastilha.cinza{background:#e2e7ec}
.pastilha.azul{background:var(--azul2); color:#fff}
.bolinha{width:9px;height:9px;border-radius:50%;background:var(--verde);display:inline-block;margin-right:5px;animation:pisca 1.4s infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.25}}
.aviso-espera{
  background:var(--verde); color:#fff; padding:10px 16px; border-radius:9px;
  font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.vazio{color:var(--suave); text-align:center; padding:22px; font-style:italic}

/* -------------------------------------------------------------- campos */
/* Sem o "label." na frente: os grupos de botao (Mallampati, protese, ASA,
   liberado, UTI, sangue) deixaram de ser <label> e viraram <div>, para o
   clique no rotulo nao apertar o primeiro botao. O visual e o mesmo. */
.campo{display:block; margin-bottom:12px; font-size:13px; color:var(--suave)}
.campo > span{display:block; margin-bottom:4px; font-weight:600; color:var(--texto)}
/* Contraste alto durante o preenchimento: campo branco sobre fundo cinza,
   com borda escura. O olho acha na hora o que falta preencher. */
input[type=text],input[type=date],input[type=time],input[type=number],select,textarea{
  width:100%; padding:8px 11px; border:1.5px solid #7d93a8; border-radius:5px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--texto);
  box-shadow:inset 0 1px 2px rgba(20,40,60,.07);
}
input:focus,select:focus,textarea:focus{
  outline:0; border-color:var(--azul2); border-width:2px; padding:7px 10px;
  box-shadow:0 0 0 3px rgba(22,104,173,.20);
}
textarea{resize:vertical; min-height:64px}
.linhaCampos{display:grid; gap:14px}
.c2{grid-template-columns:1fr 1fr}
.c3{grid-template-columns:1fr 1fr 1fr}
.c4{grid-template-columns:repeat(4,1fr)}
.c6{grid-template-columns:repeat(6,1fr)}
@media(max-width:760px){.c2,.c3,.c4,.c6{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------- patologias 1 clique */
/* Os grupos se empilham em colunas, como no formulário antigo: assim os
   títulos não custam uma faixa inteira da largura cada um. */
.gruposPat{column-count:3; column-gap:30px}
@media(max-width:980px){.gruposPat{column-count:2}}
@media(max-width:640px){.gruposPat{column-count:1}}
.grupoPat{break-inside:avoid; page-break-inside:avoid; margin:0 0 13px}
.grupoPat h3{
  font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--azul);
  margin:0 0 3px; padding-bottom:2px; border-bottom:1px solid var(--linha);
}
/* Lista simples de marcar, no espírito do sistema antigo: caixinha e nome,
   sem moldura nem selo. Denso, para caber muita coisa sem poluir. */
.listaPat{display:block}
.pat{
  display:flex; align-items:center; gap:8px; padding:4px 6px; cursor:pointer;
  border:0; border-radius:5px; background:none;
  font-size:14px; user-select:none; line-height:1.3;
}
.pat:hover{background:var(--azulclaro)}
.pat:focus-visible{outline:2px solid var(--azul2); outline-offset:-2px}
.pat .cx{
  width:16px; height:16px; flex:none; background:#fff; position:relative;
  border:1.5px solid #9aa8b5; border-radius:3px;
}
.pat.sim{color:var(--azul); font-weight:600}
.pat.sim .cx{background:var(--azul); border-color:var(--azul)}
.pat.sim .cx::after{
  content:"✓"; position:absolute; inset:0; color:#fff; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.detalhePat{margin:1px 0 5px; padding-left:24px}
.detalhePat input{border-color:var(--azul2); background:#fbfdff; padding:6px 9px; font-size:14px}

.opcoes{display:flex; gap:6px; flex-wrap:wrap}
.opcoes button{
  border:1.5px solid var(--linha); background:#fff; border-radius:7px; padding:8px 14px;
  cursor:pointer; font-size:14px; font-family:inherit; color:var(--texto);
}
.opcoes button.on{background:var(--azul); color:#fff; border-color:var(--azul); font-weight:600}
.opcoes.simnao button.on.nao{background:var(--suave); border-color:var(--suave)}

.chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--azulclaro);
  border:1px solid #c3d9ea; border-radius:20px; padding:4px 12px; font-size:13px;
}

/* ------------------------------------------ conduta com os medicamentos */
.suspLinha{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1.5px solid var(--linha); border-left:4px solid var(--suave);
  border-radius:8px; padding:9px 12px; margin-bottom:7px; background:#fff;
}
.suspLinha.suspender{border-left-color:var(--vermelho); background:#fffbfb}
.suspLinha.manter{border-left-color:var(--verde); background:#fafdfb}
.suspLinha.ajustar{border-left-color:#b8860b; background:#fffdf7}
.suspLinha.avaliar{border-left-color:var(--azul2)}
.suspNome{flex:1; min-width:190px}
.suspNome b{display:block; font-size:14.5px; line-height:1.2}
.suspNome small{color:var(--suave); font-size:12px}
.suspAcao{width:auto; min-width:130px; padding:6px 9px; font-size:13.5px}
.suspDias{display:flex; align-items:center; gap:6px; margin:0; font-size:13px; color:var(--suave)}
.suspDias input{width:64px; padding:6px 8px; text-align:center; font-size:14px}
.suspData{font-size:13px; color:var(--suave); min-width:170px}
.suspData b{color:var(--texto)}
.suspObs{flex-basis:100%; font-size:12.5px; color:var(--suave); border-top:1px dashed var(--linha); padding-top:6px; margin-top:2px}
.dica{
  background:var(--amarelo); border:1px solid #e6d28a; border-radius:8px;
  padding:9px 13px; font-size:13.5px; margin-top:8px;
}
.orientAuto{
  display:flex; align-items:center; gap:12px; padding:8px 12px; margin-bottom:6px;
  background:var(--verdeclaro); border:1px solid #a9d9c0; border-radius:8px; font-size:14px;
}
.orientAuto span{flex:1}

/* -------------------------------------------------------------- exames */
.gradeExames{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.gradeExames label{margin:0}
.gradeExames small{color:var(--suave)}

/* --------------------------------------------------------------- modal */
#modal{
  position:fixed; inset:0; background:rgba(15,30,45,.55); z-index:100;
  display:flex; align-items:flex-start; justify-content:center; padding:24px; overflow:auto;
}
.modalCaixa{background:#fff; border-radius:12px; max-width:640px; width:100%; padding:22px}
.modalCaixa h2{margin:0 0 16px; font-size:18px; color:var(--azul)}
.modalBotoes{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}

/* -------------------------------------------------------------- toasts */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--texto); color:#fff; padding:12px 22px; border-radius:9px;
  z-index:200; box-shadow:0 6px 20px rgba(0,0,0,.25); font-size:14px;
}
.toast.erro{background:var(--vermelho)}
.toast.ok{background:var(--verde)}
.toast.sai{opacity:0; transition:opacity .4s}

table.lista{width:100%; border-collapse:collapse; font-size:14px}
table.lista th{text-align:left; font-size:12px; text-transform:uppercase; color:var(--suave); padding:8px; border-bottom:2px solid var(--linha)}
table.lista td{padding:9px 8px; border-bottom:1px solid var(--linha)}
table.lista tr:hover td{background:var(--azulclaro)}

.rodapeFicha{
  position:sticky; bottom:0; background:#fff; border-top:2px solid var(--linha);
  padding:12px 16px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
  margin:0 -16px -60px; z-index:40;
}
.rodapeFicha .esq{margin-right:auto; color:var(--suave); font-size:13px; align-self:center}

/* ==========================================================================
   IMPRESSÃO — 1 folha A4
   ========================================================================== */
#areaImpressao{position:absolute; left:-10000px; top:0; width:192mm; visibility:hidden}

@media print{
  @page{size:A4 portrait; margin:8mm 10mm}
  /* Nada de sobra de largura ou altura: um fiapo de estouro faz o
     navegador imprimir uma segunda pagina em branco. */
  html,body{margin:0; padding:0; width:auto; height:auto; overflow:visible}
  body{background:#fff; font-size:11pt}
  #areaImpressao{margin:0; padding:0}
  .folha:last-child{page-break-after:auto; break-after:auto}
  #topo,main,#modal,.toast{display:none !important}
  #areaImpressao{position:static !important; left:auto !important; width:auto !important; visibility:visible !important}
}

/* ==========================================================================
   Estilo da folha impressa — compartilhado com o arquivo exportado.
   Segue o desenho da ficha antiga: moldura, faixas pretas de seção e
   quadros com borda. Tamanhos em "em" para a ficha poder encolher
   proporcionalmente quando o conteúdo for muito grande.
   ========================================================================== */
.folha{
  width:190mm; max-width:100%; margin:0 auto; color:#000; font-family:"Segoe UI",Arial,sans-serif;
  font-size:11pt; line-height:1.3;
}
.folha .quadro{border:1.5pt solid #000; padding:0}

.folha .cab{text-align:center; padding:0.3em 0.35em 0.22em; border-bottom:1.5pt solid #000}
.folha.compacta .cab{padding:0.15em 0.35em 0.1em}
.folha .cab .cl{font-size:1.25em; font-weight:700; line-height:1.15}
.folha .cab .ti{font-size:1.05em; font-weight:600; letter-spacing:.6px}
/* Endereco e contato profissional (Resolucao CFM 2.381/2024, art. 2o, VII e
   VIII), no PE da folha. Letra pequena, cinza e centralizada: e exigencia de
   rodape, nao informacao de leitura, e a ficha ja vinha apertada por cima.
   Enquanto o cadastro estiver vazio a linha nem e gerada. */
.folha .rodClinica{
  margin-top:0.3em; padding-top:0.2em; border-top:0.5pt solid #999;
  font-size:0.72em; color:#444; text-align:center; line-height:1.1;
}
/* Na ficha do paciente carregado cada pixel conta: some a linha e aperta o
   respiro. O rodape continua legivel, so para de gastar espaco que o corpo
   da ficha precisa mais que ele. */
.folha.compacta .rodClinica{
  margin-top:0.12em; padding-top:0; border-top:0; font-size:0.66em;
}

/* Faixa de secao. O respiro vertical em "em" e o que faz a folha do paciente
   simples ficar arejada e a do complexo continuar cabendo: os dois usam a
   mesma regra, e ela encolhe junto com a letra. */
.folha .faixa{
  background:#000; color:#fff; font-size:0.78em; font-weight:700; letter-spacing:1.4px;
  padding:0.28em 0.5em; text-transform:uppercase;
}
.folha.compacta .faixa{padding:0.12em 0.5em; letter-spacing:1.1px}

/* A cirurgia proposta em faixa propria, na largura toda e embaixo do bloco de
   identificacao. Motivo pratico: no hospital colam a etiqueta do paciente em
   cima do nome, e a etiqueta e grande - acabava cobrindo tambem o nome do
   procedimento, que estava logo ao lado. Aqui embaixo, e destacada, ela
   sobrevive a etiqueta e ainda fica mais facil de achar. */
/* Linha inteira, logo abaixo da identificacao - longe da etiqueta que o
   hospital cola em cima do nome. O destaque vem da POSICAO e do rotulo em
   caixa alta, nao de corpo grande nem de fundo: a folha inteira e desenhada
   sem area preenchida, e a linha estava pesando mais que o nome do paciente. */
.folha table.g td.proc{letter-spacing:.1px}
.folha table.g td.proc b{letter-spacing:.5px}

.folha table.g{width:100%; border-collapse:collapse; table-layout:fixed}
.folha table.g td{
  border:0.75pt solid #000; padding:0.26em 0.42em; vertical-align:top;
  font-size:0.94em; word-wrap:break-word;
}
.folha.compacta table.g td{padding:0.14em 0.42em}
.folha table.g b{font-weight:600}
/* Era 1.15em: no papel virava a coisa mais forte da folha, competindo com o
   nome do paciente por um "SIM" que so confirma o esperado. */
.folha .grande{font-size:1.02em; font-weight:700}
.folha .grande.nao{background:#000; color:#fff; padding:0 6px}
.folha .alerta{font-weight:700; background:#e8e8e8; padding:0 3px}
.folha .peq{font-size:0.82em; color:#333}

/* Anamnese: itens em 3 colunas, com SIM / não como na ficha antiga.
   O positivo ganha negrito e fundo cinza para saltar na leitura. */
.folha .patgrade3{columns:3; column-gap:10px; font-size:0.86em}
.folha .pitem{
  display:flex; justify-content:space-between; gap:4px; break-inside:avoid;
  border-bottom:0.5pt dotted #b0b0b0; padding:0.12em 0; line-height:1.3;
}
.folha.compacta .pitem{padding:0.02em 0; line-height:1.24}
.folha .pitem .pn{overflow:hidden}
.folha .pitem .pv{color:#777; flex:none; font-size:0.92em}
.folha .pitem.sim{background:#e6e6e6; font-weight:700}
.folha .pitem.sim .pv{color:#000; font-weight:700}
.folha .pitem i{font-weight:400; font-style:italic}

.folha .labbox{font-size:0.88em}
.folha .labtit{font-weight:700; text-transform:uppercase; font-size:0.86em; letter-spacing:.4px; border-bottom:0.5pt solid #000; margin-bottom:1px}
.folha .labl{display:flex; justify-content:space-between; gap:6px; border-bottom:0.5pt dotted #c8c8c8; line-height:1.3}
.folha .labl .labv{font-weight:700}

.folha .pendencia{
  border:1.5pt solid #000; background:#e6e6e6; padding:3px 6px; font-size:0.95em; font-weight:600;
}

/* ATENCAO A ORDEM: o atalho "border" apaga o que veio antes dele. Estava
   escrito border-top:0 ANTES do border, e o atalho ressuscitava a borda de
   cima - que somava com o filete da faixa logo acima e saia um traco duplo
   estranho na impressao, bem em cima de "MEDICAMENTOS". */
.folha .suspBox{border:0.75pt solid #000; border-top:0; padding:0.34em 0.5em; font-size:0.92em}
/* Duas colunas SO com tres ou mais medicamentos. Com um item so, a coluna
   tinha metade da largura da folha e a frase quebrava no meio - "(So no
   dia)" virava "(So no / dia)" - com a outra metade em branco ao lado. */
.folha .suspLista{margin:0; padding-left:1.2em}
.folha .suspLista.duasCol{columns:2; column-gap:1.2em}
.folha .suspLista li{margin-bottom:0.3em; break-inside:avoid; line-height:1.35}
.folha.compacta .suspBox{padding:0.18em 0.5em}
.folha.compacta .suspLista li{margin-bottom:0.12em; line-height:1.28}
.folha .suspLista i{font-style:italic; color:#333; font-weight:400}
.folha .suspManter{border-top:0.5pt solid #999; margin-top:2px; padding-top:1px}

.folha .obs{font-size:0.92em; border:0.75pt solid #000; border-top:0; padding:0.34em 0.5em}
.folha .obs ul{margin:0.2em 0; padding-left:1.2em}
.folha .obs li{line-height:1.4; margin-bottom:0.28em}
.folha.compacta .obs{padding:0.18em 0.5em}
.folha.compacta .obs ul{margin:0.08em 0}
.folha.compacta .obs li{line-height:1.3; margin-bottom:0.1em}
.folha .orientProc{border-bottom:0.5pt dotted #999; padding-bottom:2px; margin-bottom:2px}

.folha .assinT{margin-top:0}
.folha .assinT td{height:2.4em; vertical-align:bottom; text-align:center; font-size:0.9em}

.suspRecado{border-top:0; padding-top:4px}
.suspRecado input{font-size:13px; padding:6px 9px; border-style:dashed}

/* ------------------------------------------------------- visão do mês */
.calendario{
  display:grid; grid-template-columns:repeat(7,1fr); gap:5px;
  background:#fff; border:1px solid var(--linha); border-radius:12px; padding:10px;
}
.calCab{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--suave); text-align:center; padding:2px 0 6px;
}
.diaCel{
  min-height:82px; border:1px solid var(--linha); border-radius:8px; padding:5px 6px;
  cursor:pointer; background:#fff; display:flex; flex-direction:column; gap:2px;
}
.diaCel:hover{border-color:var(--azul2); background:var(--azulclaro)}
.diaCel.fora{border:0; background:none; cursor:default; min-height:0}
.diaCel.domingo{background:#fafbfc}
.diaCel.hoje{border:2px solid var(--azul); background:var(--azulclaro)}
.diaNum{font-size:13px; font-weight:700; color:var(--texto); line-height:1}
.diaCel.hoje .diaNum{color:var(--azul)}
.diaLivre{color:#c3ccd5; font-size:12px; margin:auto auto}
.perLinha{
  display:flex; align-items:center; gap:5px; font-size:11.5px; line-height:1.2;
  background:#eef2f6; border-radius:5px; padding:2px 5px; border-left:3px solid var(--suave);
}
.perLinha.meu{background:var(--azulclaro); border-left-color:var(--azul)}
.perLinha.semMedico{background:var(--amarelo); border-left-color:#c79a17}
.perLinha b{color:var(--azul); flex:none}
.perLinha .qtd{font-weight:700; flex:none}
.perLinha .quem{
  color:var(--suave); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.perLinha .pt{
  width:7px; height:7px; border-radius:50%; background:var(--verde); flex:none;
  animation:pisca 1.4s infinite;
}
.legenda{
  display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  font-size:12.5px; color:var(--suave); margin-top:12px;
}
.legenda i.lg{
  display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px;
  vertical-align:-1px; background:var(--azulclaro); border-left:3px solid var(--azul);
}
.legenda i.lg.semMedico{background:var(--amarelo); border-left-color:#c79a17}
.legenda i.lg.ponto{border-radius:50%; background:var(--verde); border:0; width:9px; height:9px}
.chip.alerta{background:var(--amarelo); border-color:#e0c778; color:#7a5c05; font-weight:600}
@media(max-width:760px){
  .diaCel{min-height:62px; padding:3px}
  .perLinha .quem{display:none}
}

/* --------------------------------- grade de horários, confirmação, histórico */
.itemAgenda.livre{
  border-style:dashed; border-color:#e2e8ee; background:#fcfdfe;
  cursor:pointer; padding:6px 12px; margin-bottom:4px; min-height:0;
}
.itemAgenda.livre:hover{border-color:var(--azul2); background:var(--azulclaro)}
.itemAgenda.livre .hora{color:#a8b4c0; font-weight:600; font-size:14px}
.itemAgenda.livre .convite{color:#b3bfca; font-size:13px}
.itemAgenda.livre:hover .convite{color:var(--azul2)}
.itemAgenda.ocupado{border-width:1.5px}
.itemAgenda.confirmado{border-color:#d8b84a; background:#fffdf4}
.itemAgenda .hora small.enc{
  display:block; font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:#b07d10; line-height:1.4;
}
.btn.amarelo{background:#b8860b; color:#fff}

.histBox{
  background:var(--azulclaro); border:1px solid #c3d9ea; border-radius:8px;
  padding:9px 12px; margin-bottom:14px; font-size:13.5px; line-height:1.5;
}
.histBox.novo{background:#f4f6f8; border-color:var(--linha); color:var(--suave); font-style:italic}
.histBox .hqtd{color:var(--suave)}
.histBox .hfut{margin-top:3px; color:#7a5c05}

/* ------------------------------- campos com padrão impresso e via aérea */
.comPadrao::placeholder{color:#9aa8b5; font-style:italic}
.dicaPadrao{display:block; color:#8fa0ad; font-size:11.5px; margin-top:3px; font-weight:400}
.dicaPadrao i{font-style:italic}
.viaAerea{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:6px 18px;
  margin-bottom:14px;
}
.vaItem{display:flex; align-items:center; gap:10px; justify-content:space-between}
.vaNome{font-size:14px}
.vaItem .opcoes button{padding:5px 12px; font-size:13px}
.opcoes.compacto button{padding:6px 9px; font-size:13px}
.pendBox{
  background:#fdeeec; border:1.5px solid var(--vermelho); border-radius:9px;
  padding:12px 14px; margin-top:6px;
}

/* ------------------------------------- autocomplete, busca e registro */
.autocomplete{position:relative}
.sugestoes{
  position:absolute; left:0; right:0; top:100%; z-index:30; background:#fff;
  border:1.5px solid var(--azul2); border-top:0; border-radius:0 0 7px 7px;
  box-shadow:0 8px 24px rgba(20,40,60,.18); max-height:290px; overflow:auto;
}
.sugItem{padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--linha)}
.sugItem:last-child{border-bottom:0}
.sugItem:hover{background:var(--azulclaro)}
.sugItem b{display:block; font-size:14.5px}
.sugItem small{color:var(--suave); font-size:12.5px}
.sugVazio{padding:9px 12px; color:var(--suave); font-style:italic; font-size:13px}

.buscaGrande{font-size:19px !important; padding:13px 16px !important}
.resBusca{margin-bottom:10px}
.resTopo{display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap}
.resNome{font-size:16px; display:block}
.resTopo small{color:var(--suave)}
.resProx{
  margin-top:9px; padding-top:9px; border-top:1px solid var(--linha);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px;
}
.resProx.sem{color:var(--suave); font-style:italic}
.resAnt{margin-top:5px; color:var(--suave); font-size:13px}

.selo{
  padding:13px 18px; border-radius:10px; margin-bottom:18px;
  font-size:15px; font-weight:600;
}
.selo.ok{background:var(--verdeclaro); border:1.5px solid var(--verde); color:#0b5c34}
.selo.quebrado{background:#fdeeec; border:2px solid var(--vermelho); color:var(--vermelho)}
.chip.azulforte{background:var(--azul); color:#fff; border-color:var(--azul); font-weight:700}
tr.linhaRuim td{background:#fdeeec}
.peqcinza{color:var(--suave); font-size:12.5px}
.mono{font-family:Consolas,monospace; font-size:12px; word-break:break-all}

/* ------------------------------------------ receita e encaminhamento */
.docLinha{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#fff; border:1.5px solid var(--linha); border-radius:9px;
  padding:10px 12px; margin-bottom:7px;
}
.docTipo{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:4px 10px; border-radius:20px; flex:none;
}
.docTipo.receita{background:var(--azul); color:#fff}
.docTipo.encaminhamento{background:#7a4fa8; color:#fff}
.docResumo{flex:1; min-width:200px; font-size:14px; color:var(--suave)}
.docResumo b{color:var(--texto); margin-right:6px}

/* A folha do documento — receituário / encaminhamento */
.folha.doc{
  display:flex; flex-direction:column; min-height:265mm; padding-top:4mm;
}
.folha.doc:first-child{page-break-before:auto; break-before:auto}
.folha .docCab{text-align:center; border-bottom:1.5pt solid #000; padding-bottom:5px; margin-bottom:14px}
.folha .docCab .cl{font-size:1.3em; font-weight:700}
.folha .docCab .ti{font-size:1.1em; font-weight:700; letter-spacing:2px; margin-top:3px}
.folha .docPara{margin-bottom:8px; font-size:1.05em}
.folha .docPac{
  border:1pt solid #000; padding:4px 8px; margin-bottom:16px; font-size:1.05em;
}
.folha .docCorpo{flex:1; font-size:1.1em; line-height:1.9; white-space:normal; padding:0 4px}
.folha .docData{text-align:center; margin:20px 0 8px; font-size:1.02em}
.folha .docAssin{text-align:center; margin-bottom:6mm}
.folha .docAssin .linhaAssin{
  width:72mm; margin:0 auto 3px; border-top:1pt solid #000;
}
.folha .docAssin .assNome{font-weight:700; font-size:1.02em}
.folha .docAssin .assCrm{font-size:0.95em}
.folha .docAssin .assEsp{font-size:0.95em; color:#333}

/* Campo que já veio preenchido pela recepção — fundo diferente, para o
   médico saber de longe que não precisa mexer. */
input.daAgenda, textarea.daAgenda, select.daAgenda{
  background:#eaf1f7; border-color:#a9c0d4; color:#2c3e50;
}
input.daAgenda:focus, textarea.daAgenda:focus, select.daAgenda:focus{background:#fff}
.selo-agenda{
  font-style:normal; font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.4px; color:#6f8ba4; background:#dbe7f0; border-radius:3px;
  padding:1px 5px; margin-left:6px;
}

/* Via aérea na folha impressa */
.folha .vaItemP{white-space:nowrap; margin-right:9px}
.folha .vaItemP b{color:#666; font-weight:600}
.folha .vaItemP.sim{background:#e6e6e6; font-weight:700; padding:0 3px}
.folha .vaItemP.sim b{color:#000}

/* ===================== folha: caixas que crescem para preencher a página */
.folha .linha2{display:flex; gap:0; margin:0}
/* Padding em "em" pelo mesmo motivo das faixas: em pixel ele nao encolhia
   junto com a letra e a folha apertada gastava respiro que nao tinha. */
.folha .cxb{
  flex:1; border:0.75pt solid #000; border-top:0; padding:0.2em 0.4em;
  display:flex; flex-direction:column; min-width:0;
}
.folha.compacta .cxb{padding:0.1em 0.4em}
.folha .linha2 > .cxb + .cxb{border-left:0}
.folha .linha2:first-of-type .cxb{border-top:0.75pt solid #000}
.folha .cxb .rot{
  font-size:0.78em; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  border-bottom:0.5pt solid #999; margin-bottom:2px; color:#000;
}
.folha .conteudoCx{flex:1; font-size:0.95em; line-height:1.35}
.folha .anamneseLinha .cxb{border-top:0.75pt solid #000}

/* Na impressão a ficha estica até encher a folha, como a antiga:
   as caixas de escrever absorvem a sobra em vez de deixar um vão branco. */
@media print{
  .folha .quadro{display:flex; flex-direction:column; min-height:271mm}
  .folha .cresce{flex:1 1 auto}
  .folha .cresce .conteudoCx{flex:1}
  /* Quebra de página explícita: cada folha termina uma página, menos a
     última — é o que evita a folha em branco no fim. */
  .folha{page-break-after:always; break-after:page}
  .folha:last-child{page-break-after:avoid !important; break-after:avoid !important}
  .folha.doc{page-break-before:auto; break-before:auto}
}

/* ==========================================================================
   Cores da folha impressa.
   O navegador NÃO imprime fundo por padrão — era por isso que as faixas
   pretas saíam como texto cinza claro. A linha abaixo obriga a imprimir
   as cores como foram desenhadas. Paleta sóbria, de documento médico:
   azul-ardósia escuro nos títulos, preto no conteúdo.
   ========================================================================== */
.folha, .folha *{
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
}
.folha .faixa{
  background:#1d3c5a; color:#fff; letter-spacing:1.1px;
}
.folha .quadro{border-color:#1d3c5a}
.folha table.g td{border-color:#7d93a8}
.folha .cxb{border-color:#7d93a8}
.folha .cxb .rot{color:#1d3c5a; border-bottom-color:#a9bccd}
.folha .labtit{color:#1d3c5a; border-bottom-color:#1d3c5a}
.folha .pitem.sim{background:#dce6ef}
.folha .vaItemP.sim{background:#dce6ef}
.folha .nao{color:#6d7c8a; font-weight:400}
.folha .grande.nao{background:#1d3c5a; color:#fff; font-weight:700; padding:0 6px}
.folha .pendencia{border-color:#1d3c5a; background:#dce6ef}
.folha .suspBox{border-color:#7d93a8}
.folha .obs{border-color:#7d93a8}
.folha .assinT td{border-color:#7d93a8}

/* Cabeçalho com o logotipo da clínica */
.folha .cab{display:flex; align-items:center; gap:8px; text-align:left}
.folha .cab .logo{height:15mm; width:auto; flex:none}
.folha .cabTexto{flex:1; text-align:center}
.folha .docCab .logoDoc{height:17mm; width:auto; display:block; margin:0 auto 3px}

/* Orientações que entraram por regra, agora junto das impressas */
.orientAutoBloco{margin-bottom:12px}
.rotAuto{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--verde); margin-bottom:5px;
}

/* ==========================================================================
   Economia de tinta: nenhuma área preenchida na folha.
   Os títulos se distinguem por cor de texto, caixa alta e um filete —
   quase nada de tinta, e a hierarquia continua clara. Positivos e
   alterações usam negrito, não fundo.
   ========================================================================== */
/* O padding fica em "em" tambem aqui: escrito em pixel, ele nao encolhia
   junto com a letra quando a folha aperta, e anulava - so nas faixas - o
   ajuste de densidade do resto da folha. */
.folha .faixa{
  background:none !important; color:#1d3c5a !important;
  border-bottom:1pt solid #1d3c5a; padding:0.26em 0.44em 0.16em; letter-spacing:1.2px;
}
.folha.compacta .faixa{padding:0.1em 0.44em 0.06em; letter-spacing:1px}
.folha .pitem.sim{background:none !important}
.folha .vaItemP.sim{background:none !important; padding:0}
.folha .grande.nao{
  background:none !important; color:#1d3c5a !important;
  border:1pt solid #1d3c5a; padding:0 5px;
}
.folha .pendencia{background:none !important; border:1.2pt solid #1d3c5a}
.folha .alerta{background:none !important}

/* -------------------- sinais vitais compactos e painéis lado a lado */
.vitais{
  display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:8px; margin-bottom:12px;
}
.vitais .campo{margin:0}
.vitais .campo > span{font-size:12px; margin-bottom:3px}
.vitais input, .vitais select{padding:7px 6px; font-size:14px; text-align:center}
@media(max-width:1100px){.vitais{grid-template-columns:repeat(4, minmax(0,1fr))}}
@media(max-width:560px){.vitais{grid-template-columns:repeat(2, minmax(0,1fr))}}

.doisPaineis{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.doisPaineis > .painel{margin-bottom:0}
@media(max-width:1150px){.doisPaineis{grid-template-columns:1fr; gap:0}
  .doisPaineis > .painel{margin-bottom:18px}}
.doisPaineis .gradeExames{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.doisPaineis .viaAerea{grid-template-columns:1fr}

/* --------------------------------- forma de pagamento do particular */
.pagBox{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#fff8e6; border:1.5px solid #d9b444; border-radius:9px;
  padding:11px 14px; margin-top:4px;
}
.pagBox.ok{background:var(--verdeclaro); border-color:#8fcfae}
.pagBox.cortesia{background:#f2f5f8; border-color:var(--linha); color:var(--suave); font-size:14px}
.pagRot{font-weight:600; font-size:14px}
.pagAviso{color:#8a6d1f; font-size:13px; font-weight:600}
.pagBox .opcoes button{padding:7px 16px}
/* O painel do exame físico é mais alto — fica à esquerda, os exames à direita */
.doisPaineis > .painel:first-child{min-width:0}

/* ---------------------------- duas agendas por período, lado a lado */
.periodoCab{display:flex; align-items:baseline; gap:12px; margin:4px 0 10px}
.periodoCab h2{margin:0; font-size:18px; color:var(--azul)}
.periodoHora{color:var(--suave); font-size:14px}
.duasAgendas{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; align-items:start}
@media(max-width:1150px){.duasAgendas{grid-template-columns:1fr; gap:14px}}
.agendaSala .painelTopo{gap:8px; padding:9px 12px}
.agendaSala .painelTopo h2{font-size:14px; flex:none}
.agendaSala.semMed .painelTopo{background:var(--amarelo)}
.selMedico{width:auto; flex:1; min-width:120px; padding:6px 8px; font-size:13px}
.agendaSala .itemAgenda{gap:8px; padding:8px 10px; flex-wrap:wrap}
.agendaSala .itemAgenda .hora{min-width:44px; font-size:15px}
.agendaSala .itemAgenda .quem{min-width:130px}
.agendaSala .itemAgenda .btn.pequeno{padding:5px 9px; font-size:12px}

/* --------------------------------------------- telas de edição das listas */
.tabEditor td{vertical-align:middle}
.tagAcao{
  display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; padding:3px 8px; border-radius:20px; margin-right:6px;
}
.tagAcao.suspender{background:#fdeeec; color:var(--vermelho)}
.tagAcao.manter{background:var(--verdeclaro); color:var(--verde)}
.tagAcao.ajustar{background:#fff4d1; color:#8a6d1f}
.tagAcao.avaliar{background:var(--azulclaro); color:var(--azul)}
.alvosRegra{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:2px 12px;
  max-height:250px; overflow:auto; border:1.5px solid var(--linha); border-radius:7px;
  padding:8px 10px; background:#fff; margin-bottom:4px;
}
.alvoItem{display:flex; align-items:center; gap:7px; font-size:13.5px; cursor:pointer; padding:2px 0}
.alvoItem input{width:auto; margin:0}

/* Positivos da anamnese em vermelho — destacam mais que o negrito sozinho.
   É só cor de texto, não consome tinta de fundo. */
.folha .pitem.sim,
.folha .pitem.sim .pv,
.folha .pitem.sim i{color:#b3261e}
.folha .vaItemP.sim,
.folha .vaItemP.sim b{color:#b3261e}

/* Sugestão flutuante de cirurgia e cirurgião */
.sugestoes.flutuante{
  position:fixed; z-index:300; border-top:0; border-radius:0 0 7px 7px;
  max-height:250px; overflow:auto;
}
.sugestoes.flutuante .sugItem{padding:7px 12px}
.sugestoes.flutuante .sugItem b{font-size:14px; font-weight:500}


/* --------------------------------------------------------------- v2.1
   Alergia positiva. Vale na tela e na ficha impressa: o !important e o
   print-color-adjust existem porque o bloco de impressao apaga cor de
   fundo e alguns navegadores descartam cor no papel. */
.alergiaSim{color:var(--vermelho); font-weight:700}
input.alergiaSim{color:var(--vermelho); font-weight:700}
/* ATENCAO ao mexer aqui: o arquivo .html que vai para o Drive leva SO as
   regras cujo seletor comeca com ".folha" - e o documentoExportado que
   filtra assim. Por isso a cor tem que ser escrita por extenso: um
   var(--vermelho) aponta para o :root, que NAO e exportado, e no arquivo
   salvo o texto saia preto. Ficou assim por meses sem ninguem ver, porque
   dentro do sistema aparecia vermelho normalmente. */
.folha .alergiaSim{
  color:#b3261e !important;
  font-weight:700 !important;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

/* Orientacao que entrou por regra: e a que vale para ESTE paciente, e nao
   a que sai em toda folha. Vermelho so nelas - se tudo fosse vermelho,
   nada seria. Cor por extenso pelo mesmo motivo acima. */
.folha .orientEspecifica{
  color:#b3261e;
  font-weight:700;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

/* Recado escrito direto na linha da agenda, sem abrir janela. */
.linhaRecado{margin-top:3px}
.recadoRec{
  display:inline-block; padding:2px 8px; cursor:text;
  background:var(--amarelo); border-radius:5px;
  color:#7a5c05; font-size:12.5px; line-height:1.4;
}
.recadoRec:hover{filter:brightness(.96)}
.addRecado{
  display:inline-block; cursor:pointer; font-size:12px;
  color:var(--suave); opacity:.55; padding:2px 0;
}
.addRecado:hover{opacity:1; color:var(--azul); text-decoration:underline}
.inpRecado{
  width:100%; max-width:520px; font-size:12.5px;
  padding:3px 8px; border:1.5px solid #e0c778; border-radius:5px;
  background:var(--amarelo); color:#5c4504;
}
.inpRecado:focus{outline:none; border-color:var(--azul)}

/* Paciente que nao compareceu. Continua visivel - o horario foi reservado
   e a falta conta -, mas apagado o bastante para nao competir com quem
   ainda vai ser atendido. */
.itemAgenda.faltou{opacity:.6; background:#faf7f7; border-color:#e6d4d2}
.itemAgenda.faltou .hora{color:var(--suave)}
.pastilha.falta{background:#fbeceb; color:var(--vermelho); border:1px solid #f0c9c6}

/* Com o botao "Faltou" sao cinco na mesma linha, e a agenda e dividida em
   duas colunas. Um pouco menos de folga lateral mantem tudo numa linha so
   nas telas da clinica. */
.itemAgenda .btn.pequeno{padding-left:9px; padding-right:9px}

/* Os botoes da agenda ficam numa faixa propria, embaixo. Antes eles
   disputavam a linha com o nome do paciente, e um nome comprido empurrava
   tudo, quebrando de um jeito diferente em cada linha. */
.itemAgenda{flex-wrap:wrap}
.itemAgenda .acoes{
  flex:1 0 100%;
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:8px; padding-top:8px;
  border-top:1px solid rgba(0,0,0,.07);
}
.itemAgenda.livre .acoes{display:none}

/* Relatorio do mes: numeros alinhados por coluna, com o algarismo de
   largura fixa para a coluna nao dancar de linha em linha. */
.relMes .n{text-align:right; font-variant-numeric:tabular-nums; width:104px}
.relMes th.n{text-align:right}
.relMes .forte{font-weight:700; color:var(--azul); font-size:16px}
.relMes .zero{color:#c3cbd3}
.relMes .falta{color:var(--vermelho); font-weight:600}
.relMes .totalLinha td{border-top:2px solid var(--linha); font-weight:600}

/* Um mes de registro nao pode encostar no outro: sao fechamentos
   diferentes, e a leitura se perde. Respiro maior e um risco fino
   separando, alem do titulo por extenso. */
.mesRegistro{margin-bottom:38px}
.mesRegistro + .mesRegistro{
  border-top:0;
  position:relative;
}
.mesRegistro + .mesRegistro::before{
  content:"";
  position:absolute; left:0; right:0; top:-20px;
  border-top:1px solid var(--linha);
}
.mesRegistro .painelTopo h2{font-size:18px; letter-spacing:-.01em}

/* Quem ja esta na sala de espera, em ordem de chegada, no topo da agenda
   do medico. A agenda de baixo continua em ordem de horario. */
.salaEspera{border-color:#8fcfae}
.salaEspera .painelCorpo{background:var(--verdeclaro); padding:10px 12px}
.linhaEspera{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#fff; border:1px solid #b9dfc9; border-radius:9px;
  padding:8px 12px; margin-bottom:6px;
}
.linhaEspera:last-child{margin-bottom:0}
.linhaEspera .chegouAs{
  font-weight:700; font-size:15px; color:var(--verde);
  min-width:52px; font-variant-numeric:tabular-nums;
}
.linhaEspera .quem{flex:1; min-width:170px}
.linhaEspera .quem b{display:block; font-size:15px}
.linhaEspera .quem small{color:var(--suave)}

/* ---- Lista de confirmacao do dia (modal da recepcao) ---- */

.subConf{margin:-8px 0 14px; color:var(--suave); font-size:14px; line-height:1.5}

.listaConf{max-height:56vh; overflow:auto; padding-right:4px}

.linhaConf{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 4px; border-bottom:1px solid var(--linha);
}
.linhaConf:last-child{border-bottom:none}
.linhaConf .horaConf{
  font-weight:800; color:var(--azul); font-size:15px;
  min-width:50px; font-variant-numeric:tabular-nums;
}
.linhaConf .quem{flex:1; min-width:180px}
.linhaConf .quem b{display:block; font-size:14px; line-height:1.35}
.linhaConf .quem small{color:var(--suave); font-variant-numeric:tabular-nums}

/* Ja confirmado: fica na lista, mas apagado, para nao competir com quem
   ainda falta. */
.linhaConf.jaConf{opacity:.55}
.linhaConf.jaConf .horaConf{color:var(--suave)}

.alertaFixo{color:#a8620d; font-style:normal; font-weight:600}
.semZap{color:var(--suave); font-size:13px}

.btn.zap{background:#1f9d55}
.btn.zap:hover{background:#18804a}

.divisorConf{
  margin:14px 0 4px; padding-top:10px; border-top:1px dashed var(--linha);
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--suave);
}

/* Carimbo de versao do servidor, na tela de configuracoes. */
.carimbo{
  margin:12px 0 0; padding:10px 12px; border-radius:8px;
  background:#f2f5f8; border:1px solid var(--linha);
  font-size:13px; line-height:1.55; color:var(--texto);
}
.carimbo span{color:var(--suave)}


/* Ultimo recurso: se nem no menor corpo couber, a pagina vira - mas nunca no
   meio de um quadro. Antes o navegador cortava onde desse, e um paciente
   complexo podia ter a conduta de medicamentos partida ao meio. */
@media print{
  .folha .quadro > .faixa,
  .folha .quadro > table.g,
  .folha .quadro > .suspBox,
  .folha .quadro > .obs,
  .folha .quadro > .linha2{break-inside:avoid; page-break-inside:avoid}
}

/* Caixa de "guardar na lista" na janela de medicamento manual. */
.marcaGuardar{
  display:flex; gap:10px; align-items:flex-start; margin-top:12px;
  padding:10px 12px; border:1px solid var(--linha); border-radius:9px; background:#f7f9fb;
  cursor:pointer; font-size:14px; line-height:1.45;
}
.marcaGuardar input{margin-top:2px; width:17px; height:17px; flex:none}
.marcaGuardar small{color:var(--suave)}

/* ---- Barra da tela (data, navegacao) grudada abaixo do cabecalho ---- */
:root{--altTopo:56px}
.barra{
  position:sticky; top:var(--altTopo); z-index:40;
  background:var(--fundo); padding:10px 0 12px; margin-bottom:6px;
  border-bottom:1px solid var(--linha);
}

/* ---- Horarios livres reunidos no alto de cada agenda ---- */
.faixaLivres{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:8px 10px; margin-bottom:10px;
  background:var(--azulclaro); border:1px solid #cfe0ee; border-radius:9px;
}
.faixaLivres.cheia{
  background:#f4f6f8; border-color:var(--linha); color:var(--suave); font-size:13px;
  justify-content:center; padding:6px 10px;
}
.faixaLivres .rotLivres{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--azul); margin-right:2px;
}
.chipLivre{
  border:1px solid #b9d3e8; background:#fff; color:var(--azul);
  border-radius:7px; padding:5px 10px; font-size:14px; font-weight:600;
  font-family:inherit; cursor:pointer; font-variant-numeric:tabular-nums;
}
.chipLivre:hover{background:var(--azul); border-color:var(--azul); color:#fff}

/* O horario vago na grade tambem ficou mais visivel - continua discreto
   perto do paciente agendado, mas deixou de desaparecer. */
.itemAgenda.livre{border-color:#c9d6e2; background:#fafcfe}
.itemAgenda.livre .hora{color:#7f8f9e}
.itemAgenda.livre .convite{color:var(--azul2); font-weight:600}

/* Os dois cartoes de LADO na primeira tela: maiores que os de pessoa,
   porque sao uma escolha de caminho, nao de nome. */
.cartaoUsuario.lado{padding:26px 22px; font-size:19px}
.cartaoUsuario.lado small{margin-top:6px; font-size:13px}

/* Data da coleta do laboratorio, na tela da ficha. */
.dataLab{display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; flex-wrap:wrap}
.dataLab .campo{margin:0; min-width:180px}
.dataLab small{color:var(--suave); font-size:13px; line-height:1.45; flex:1; min-width:220px; align-self:center}

/* Na folha, a data fica na mesma linha do titulo, alinhada a direita. */
/* O titulo e a data da coleta.

   Na coluna do laboratorio nao cabem os dois na mesma linha: o titulo
   sozinho ja ocupa 166px de uns 199 uteis, e a data pede mais 50. Deixado
   solto, o TITULO e que quebrava - saia "EXAMES PRE-" numa linha e
   "OPERATORIOS" na outra, com a data pendurada no canto.

   Entao o titulo e travado em uma linha e quem desce e a data, alinhada a
   direita. Onde couber - a folha compacta, que e menor - os dois voltam a
   ficar lado a lado sozinhos. Nao custa altura: a caixa do laboratorio
   sempre sobra espaco, porque quem manda na altura dessa faixa e a grade
   de patologias ao lado. */
.folha .labtit{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px}
.folha .labNome{white-space:nowrap}
.folha .labData{margin-left:auto; font-weight:600; letter-spacing:0;
                text-transform:none; font-size:0.86em}

/* ==========================================================================
   v59  RITMO DA FOLHA IMPRESSA

   Reclamacao: "as linhas ficam todas meio coladas, dificil bater olho e
   achar a orientacao sobre as medicacoes de cara".

   A causa nao era espaco - era HIERARQUIA. A faixa de secao (ANAMNESE,
   EXAME FISICO, MEDICAMENTOS - CONDUTA...) e o rotulo de caixa
   (Antecedentes, Medicamentos em uso, Alergias) estavam os DOIS em
   0.78em, negrito, caixa alta. Dois niveis diferentes desenhados do
   mesmo tamanho: de longe a folha vira uma lista uniforme de titulinhos
   e nenhum salta.

   Aqui a faixa cresce, o rotulo encolhe, e cada faixa ganha respiro
   ANTES dela - nao depois. Titulo colado no texto de cima parece
   pertencer ao texto de cima; com o espaco em cima, ele passa a
   anunciar o que vem embaixo. Nada disso gasta tinta.
   ========================================================================== */

/* nivel 1 - as secoes da folha */
.folha .faixa{
  font-size:0.95em; font-weight:800; letter-spacing:1.4px;
  margin-top:0.42em; padding:0.2em 0.44em 0.14em;
}
.folha .quadro > .faixa:first-child{margin-top:0}
.folha.compacta .faixa{margin-top:0.2em; padding:0.1em 0.44em 0.06em}

/* nivel 2 - as caixas dentro de uma secao */
.folha .cxb .rot{
  font-size:0.74em; letter-spacing:.6px; font-weight:700;
  color:#3d566e; margin-bottom:3px;
}
.folha.compacta .cxb .rot{margin-bottom:2px}

/* ==========================================================================
   v59  LINHA SO ONDE ELA LIGA DUAS COISAS

   A folha tinha 143 lados de borda. 64 eram as celulas da tabela de
   identificacao e 21 eram retangulos em volta de texto que ja tem
   titulo - cercar, nao informar. Esses saem.

   Os que ficam sao os que LIGAM: o pontilhado que leva o nome da
   patologia ate o SIM/nao, e o que leva o nome do exame ate o valor la
   na direita. Sem eles o olho se perde no meio do vao - foi o que
   aconteceu quando tirei tudo.
   ========================================================================== */

/* identificacao: sem grade. um filete claro entre uma linha e a seguinte */
.folha table.g td{border:0; border-bottom:0.4pt solid #d3dce4; padding:0.26em 0.42em}
.folha.compacta table.g td{padding:0.14em 0.42em}
.folha table.g tr:last-child td{border-bottom:0}
.folha table.g td.proc{border-left:0.4pt solid #d3dce4; line-height:1.45}

/* caixas deixam de ser caixas: fica so o que separa uma faixa da seguinte */
.folha .cxb{border:0; border-bottom:0.5pt solid #c3cfda}
.folha .linha2:first-of-type .cxb{border-top:0.5pt solid #c3cfda}
.folha .anamneseLinha .cxb{border-top:0.5pt solid #c3cfda}
/* a unica vertical da folha. sem ela o laboratorio vira apendice */
.folha .linha2 > .cxb + .cxb{border-left:0.4pt solid #d3dce4}
.folha .suspBox{border:0; border-bottom:0.5pt solid #c3cfda}
.folha .obs{border:0; border-bottom:0.5pt solid #c3cfda}

/* as que ficam, porque ligam o nome ao valor */
.folha .pitem{border-bottom:0.4pt dotted #bcbcbc}
.folha .labl{border-bottom:0.4pt dotted #bcbcbc}
.folha .labtit{border-bottom:0.6pt solid #1d3c5a}

/* moldura de fora mais fina: e ela que faz parecer documento */
.folha .quadro{border-width:1pt}

/* ==========================================================================
   v59  A CONCLUSAO E UM BLOCO A PARTE

   ASA, liberado para cirurgia, UTI, sangue e plano anestesico vinham
   logo abaixo das ausculatas, na mesma tabela corrida, e liam como se
   fossem mais uma linha do exame fisico. Nao sao: sao a CONCLUSAO da
   avaliacao - inclusive a estratificacao de risco que o item 1 do Anexo
   II da Resolucao CFM 2.174/2017 exige.

   Separado por respiro e por um filete da cor das faixas, sem titulo e
   sem tinta de fundo. O filete e mais forte que os das caixas de cima,
   entao o olho para ali.
   ========================================================================== */
.folha table.g.conclusao{
  margin-top:0.42em; border-top:0.9pt solid #1d3c5a;
}
.folha.compacta table.g.conclusao{margin-top:0.24em}
.folha table.g.conclusao td{padding-top:0.38em; border-bottom:0}
.folha.compacta table.g.conclusao td{padding-top:0.2em}

/* ==========================================================================
   v59b  ACABAMENTOS
   ========================================================================== */

/* a data da coleta estava pequena demais para o que ela vale */
.folha .labData{font-size:0.95em}

/* Via aerea: eram quatro itens em fluxo livre, e a quebra caia onde
   calhasse - dois numa linha, dois na outra, desalinhados. Vira grade de
   duas colunas: mesma altura de antes, mas os quatro alinhados. */
.folha .viaGrade{
  display:grid; grid-template-columns:1fr 1fr; gap:0 14px; margin-top:1px;
}
.folha .viaGrade .vaItemP{white-space:normal; margin-right:0}

/* As duas ausculatas dividem a linha. Um filete claro entre elas, que e a
   unica coisa que diz onde termina uma e comeca a outra. */
.folha table.g tr.ausc td + td{border-left:0.4pt solid #d3dce4}

/* O plano anestesico vinha espremido no fim da celula de UTI/Sangue e
   quebrava no meio. Ganhou a linha inteira, e so aparece se estiver escrito. */
.folha table.g td.plano{border-top:0.4pt solid #d3dce4}

/* O parecer do especialista saia como texto solto logo acima das
   orientacoes do paciente, sem nada dizendo que e outra coisa. Ele e da
   equipe, elas sao do paciente. Um filete a esquerda separa os dois
   assuntos - um lado de borda na folha inteira. */
/* Negrito, e nao vermelho. O vermelho ja carrega as patologias positivas e
   as orientacoes automaticas: mais um item vermelho aqui e a folha vira
   toda vermelha e a cor para de significar alguma coisa. O peso 600 mais o
   filete azul destacam sem competir. */
.folha .orientProc{
  border-bottom:0; border-left:1.2pt solid #1d3c5a;
  padding:1px 0 1px 7px; margin-bottom:4px; font-weight:600;
}
.folha.compacta .orientProc{margin-bottom:2px}

/* ==========================================================================
   v59b  O ROTULO SAI DE CIMA E VAI PARA O LADO

   "Antecedentes", "Medicamentos em uso" e "Alergias" gastavam uma linha
   inteira so para dizer o proprio nome, e o texto comecava embaixo. Com o
   rotulo na lateral, alinhado a direita, o olho desce a coluna dos nomes
   e para no que procura - que era exatamente a queixa. Some uma linha por
   bloco, sem tirar nada do papel e sem tinta nenhuma.

   Testei tambem a alternativa da caixa com borda: ficou 8px MAIS ALTA (o
   retangulo pede recuo dos quatro lados) e nao ajudou a achar nada.
   ========================================================================== */
.folha .linha2.cresce > .cxb{
  flex-direction:row; align-items:flex-start; gap:9px;
  border-bottom:0.5pt solid #c3cfda;
}
/* Alinhado a ESQUERDA, nao a direita. Com os rotulos a direita, o comeco de
   cada um caia num ponto diferente - "ANTECEDENTES" numa altura,
   "MEDICAMENTOS EM USO" noutra, "ALERGIAS" noutra - e a coluna nao tinha
   borda esquerda nenhuma para ancorar o olho. Cada rotulo parecia comecar
   no meio do nada. A esquerda, todos partem da mesma margem, que e a mesma
   do resto da folha. */
.folha .linha2.cresce > .cxb .rot{
  flex:0 0 20%; border-bottom:0; margin:0; text-align:left;
  padding-top:1px; line-height:1.35;
}
.folha .linha2.cresce > .cxb .conteudoCx{flex:1; min-width:0}

/* Via aerea pelo mesmo principio: rotulo a esquerda, os quatro itens em
   duas colunas ao lado. Antes o rotulo tomava a linha e os itens caiam
   desalinhados embaixo - tres linhas onde cabem duas. */
/* O flex tem de ficar num div DENTRO da celula. Posto na propria <td>, o
   navegador deixa de trata-la como celula e o colspan e ignorado: a linha
   encolheu para meia largura e passou de 22px para 110px de altura. */
.folha .viaLinha{display:flex; align-items:flex-start; gap:8px}
.folha .viaLinha > b{flex:0 0 auto; white-space:nowrap}
.folha .viaGrade{flex:1; margin-top:0}

/* Cor literal, nao var(--vermelho): o arquivo exportado para o Drive so
   leva as regras cujo seletor comeca em ".folha", e o :root com as
   variaveis fica de fora. Com var() isto imprimia PRETO no Drive - foi o
   que aconteceu com o vermelho das alergias. */
.folha .reservaSim{color:#b3261e}

/* Valor de exame fisico fora do esperado. Cor literal pelo mesmo motivo do
   .reservaSim: o arquivo do Drive nao leva o :root com as variaveis. */
.folha .vAlerta{color:#b3261e; font-weight:700}

/* Risco alto: negrito, nao vermelho. O vermelho do papel esta reservado
   para UTI e reserva de sangue, que sao as duas coisas que obrigam ALGUEM
   a providenciar leito e bolsa antes da cirurgia. Vermelho em tudo e
   vermelho em nada. */
.folha .riscoAlto{font-weight:800; letter-spacing:0.2px}
.folha .critRisco{font-size:0.84em; line-height:1.25}

/* O logotipo tinha altura fixa em milimetros, entao era a unica coisa da
   folha que NAO encolhia quando a ficha ficava apertada: a 9pt ele
   segurava 57px de cabecalho para um texto que ocupava 30. Mesmo erro do
   34px da assinatura. Na folha compacta - onde a letra inteira ja
   encolheu - ele encolhe junto. Na folha normal fica como sempre foi. */
.folha.compacta .cab .logo{height:12mm}

/* O traco de "nao foi medido". Cinza, discreto: nao e valor alterado, e
   ausencia de valor - mas tem de estar visivel no papel. */
.folha .semValor{color:#8a8a8a}

/* Espaco em branco de peso, altura e IMC nao preenchidos. A largura minima
   existe para os rotulos nao colarem uns nos outros ("Peso: Altura:") e
   para sobrar onde escrever a mao. */
.folha .paraEscrever{display:inline-block; min-width:2.4em}


/* ======================================================= risco do ato
   Calculadora do Anexo V. Linha inteira clicavel, nao so a caixinha: o
   texto dos criterios e longo, e mirar um quadradinho de 16px com o mouse
   e trabalho que a ficha nao precisa dar. */
.listaCrit{border:1px solid var(--linha); border-radius:10px; overflow:hidden}
.critLinha{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  padding:9px 11px; border-bottom:1px solid var(--linha); line-height:1.3;
  font-size:14px; background:#fff;
}
.critLinha:last-child{border-bottom:0}
.critLinha:hover{background:#f5f7f9}
.critLinha.on{background:#eef4ff}
.critCaixa{
  flex:none; width:18px; height:18px; border:1.5px solid #9aa6b2; border-radius:4px;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
  font-size:13px; font-weight:700; color:#fff; background:#fff;
}
.critLinha.on .critCaixa{background:var(--azul, #2f6fb5); border-color:var(--azul, #2f6fb5)}
.critLinha.on .critTexto{font-weight:600}

.contaRisco{
  margin-top:14px; padding:11px 14px; border-radius:10px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#f1f4f7; border:1px solid var(--linha);
}
.contaRisco .contaNums{font-size:13.5px; color:var(--suave)}
.contaRisco .contaResultado{font-size:17px; font-weight:800}
.contaRisco.r_baixo{background:#eef7ee; border-color:#bcd9bc}
.contaRisco.r_intermediario{background:#fdf5e6; border-color:#e6d3a8}
.contaRisco.r_alto{background:#fdeeec; border-color:#e8b4ae}
.contaRisco.r_alto .contaResultado{color:#b3261e}

.opcoes .btnCalc{
  margin-left:auto; font-weight:600; border-style:dashed;
}