/* ============ Identidade AMMO ============ */
:root {
  color-scheme: light;
  --teal: #1BA498;
  --ciano: #33C3D3;
  --grafite: #191B1F;
  --fundo: #F5F7F8;
  --branco: #FFFFFF;
  --vermelho: #DC3545;
  --verde: #28A745;
  --laranja: #F59E0B;
  --azul: #2563EB;
  --cancelado-bg: #FDE8E8;
  --cancelado-borda: #F3C2C7;
  --confirmado-bg: #E7F6EC;
  --confirmado-borda: #BFE5CC;
  --creme: #FFF9EC;
  --borda: #E3E8EA;
  --borda-input: #D7DEE1;
  --texto-suave: #5A6268;
  --superficie-esmaecida: #FAFBFB;
  --texto-esmaecido: #B7BFC4;
  --destaque-hoje: #E8F6F4;
  --erro-texto: #DC3545;
}

/* Modo escuro — paleta AMMO (navy profundo + teal/ciano) */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --grafite: #EDF2F7;
  --fundo: #04162C;
  --branco: #0B2038;
  --cancelado-bg: #3B1B23;
  --cancelado-borda: #6E2A36;
  --confirmado-bg: #12312A;
  --confirmado-borda: #1F5B44;
  --creme: #0F2E45;
  --borda: #1C3450;
  --borda-input: #2A4666;
  --texto-suave: #9FB0C3;
  --superficie-esmaecida: #081B31;
  --texto-esmaecido: #56708C;
  --destaque-hoje: #0C3A38;
  --erro-texto: #FF8B96;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fundo);
  color: var(--grafite);
  font-size: 14px;
}

/* ============ Barra superior ============ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--branco);
  padding: 12px 24px;
  border-bottom: 1px solid var(--borda);
}

#busca {
  width: min(360px, 100%);
  padding: 9px 14px;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  font-size: 14px;
  color: var(--grafite);
  background: var(--branco);
}

.topbar-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ============ Chave do modo escuro ============ */
.chave-tema {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  margin-right: 6px;
}

.chave-tema input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chave-trilho {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--borda-input);
  position: relative;
  transition: background 0.2s;
}

.chave-trilho::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: left 0.2s;
}

.chave-tema input:checked + .chave-trilho { background: var(--teal); }
.chave-tema input:checked + .chave-trilho::after { left: 21px; }

#busca:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ciano);
  box-shadow: 0 0 0 3px rgba(51, 195, 211, 0.18);
}

/* ============ Barra de navegação ============ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--branco);
  padding: 10px 24px;
  border-bottom: 1px solid var(--borda);
}

.toolbar-grupo { display: flex; gap: 8px; }

#titulo-periodo {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  min-width: 220px;
}

/* ============ Botões ============ */
.btn {
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  color: var(--grafite);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-primario { background: var(--teal); color: #fff; }
.btn-primario:hover { background: var(--ciano); }

.btn-ciano { background: var(--ciano); color: #fff; }
.btn-ciano:hover { background: var(--teal); }

.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover { filter: brightness(0.93); }

.btn-borda {
  background: var(--branco);
  border: 1px solid var(--borda-input);
}
.btn-borda:hover { border-color: var(--ciano); color: var(--teal); }

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  padding: 9px 0;
}

/* aviso flutuante (ex.: link copiado) */
.aviso-flutuante {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--teal);
  color: #FFFFFF;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(25, 27, 31, 0.25);
}

.btn-nav {
  width: 36px;
  padding: 6px 0;
  font-size: 18px;
  line-height: 1;
  background: var(--branco);
  border: 1px solid var(--borda-input);
}
.btn-nav:hover { border-color: var(--ciano); color: var(--teal); }

.seletor-visao {
  gap: 0;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  overflow: hidden;
}
.seletor-visao .btn { border-radius: 0; background: var(--branco); }
.seletor-visao .btn + .btn { border-left: 1px solid var(--borda-input); }
.seletor-visao .btn:hover { color: var(--teal); }
.seletor-visao .btn.ativo { background: var(--teal); color: #fff; }

/* ============ Conteúdo ============ */
#conteudo { padding: 20px 24px; }

.rolagem { overflow-x: auto; }

.vazio {
  color: var(--texto-suave);
  background: var(--branco);
  border: 1px dashed var(--borda-input);
  border-radius: 10px;
  padding: 28px;
  text-align: center;
}

/* ============ Visualização MÊS ============ */
.grade-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  min-width: 700px;
}

.cab-dia {
  background: var(--branco);
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.celula-mes {
  background: var(--branco);
  min-height: 104px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.num-dia { font-size: 13px; font-weight: 600; }

.celula-mes.outro-mes { background: var(--superficie-esmaecida); }
.celula-mes.outro-mes .num-dia { color: var(--texto-esmaecido); }

.celula-mes.hoje-mes { background: var(--destaque-hoje); }

.resumo-dia {
  background: var(--teal);
  color: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.15s;
}
.resumo-dia:hover { background: var(--ciano); }
.resumo-dia span { opacity: 0.9; }
.resumo-dia strong { font-size: 13px; }

/* ============ Visualização SEMANA ============ */
.grade-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  min-width: 840px;
}

.col-semana {
  background: var(--branco);
  min-height: 62vh;
  display: flex;
  flex-direction: column;
}

.col-semana.col-hoje { background: var(--creme); }

.col-cab {
  padding: 9px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--borda);
}

.col-hoje .col-cab { color: var(--teal); }

.col-corpo {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============ Cards de agendamento ============ */
.card-ag {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--borda-input);
  border-radius: 8px;
  padding: 8px 20px 8px 10px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s;
}
.card-ag:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }

.card-ag.cancelado {
  background: var(--cancelado-bg);
  border-color: var(--cancelado-borda);
  border-left-color: var(--vermelho);
}

.card-ag.confirmado {
  background: var(--confirmado-bg);
  border-color: var(--confirmado-borda);
  border-left-color: var(--verde);
}

.card-hora { font-weight: 700; font-size: 13px; }

.card-nome {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* agendamento feito pelo site */
.origem-site { font-size: 11px; margin-right: 3px; }
.remarcado-site { font-size: 11px; margin-right: 3px; color: var(--laranja); font-weight: 700; }
.det-protocolo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.subtitulo-aba { font-size: 14px; margin: 18px 0 6px; }

.card-obs {
  font-size: 12px;
  color: var(--texto-suave);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-bolinha {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.btn-whatsapp {
  background: #25D366;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto; /* alinha à esquerda no rodapé do modal */
}
.btn-whatsapp:hover { filter: brightness(0.92); }
.tag-bolinha.pendente { background: var(--laranja); }
.tag-bolinha.pago { background: var(--azul); }

/* ============ Visualização DIA ============ */
.titulo-dia {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
}
.titulo-dia::first-letter { text-transform: uppercase; }

.lista-dia {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* área clicável do dia (espaço vazio abre novo agendamento) */
.area-dia { min-height: 55vh; }

/* ============ Modais ============ */
.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(25, 27, 31, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}

.oculto { display: none !important; }

.modal {
  background: var(--branco);
  border-radius: 12px;
  width: 560px;
  max-width: 100%;
  max-height: 92vh;
  overflow: auto;
  padding: 20px 22px;
  box-shadow: 0 12px 40px rgba(25, 27, 31, 0.25);
}

.modal-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.modal-cabecalho h2 { margin: 0; font-size: 18px; }

.btn-fechar {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--texto-suave);
}
.btn-fechar:hover { color: var(--vermelho); }

.grade-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.grade-campos label,
.campo-obs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-suave);
}

.grade-campos input,
.grade-campos select,
.campo-obs textarea {
  padding: 8px 10px;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--grafite);
  background: var(--branco);
}

.campo-obs { margin-top: 12px; }
.campo-obs textarea { resize: vertical; }

.contador {
  align-self: flex-end;
  font-size: 11px;
  font-weight: 400;
}

.secao-status { margin-top: 14px; }

#det-edicao { margin-bottom: 4px; }

.det-nome { margin: 0 0 6px; font-size: 20px; }
.det-linha { margin: 3px 0; }
.det-quando {
  margin: 10px 0 4px;
  font-weight: 700;
  color: var(--teal);
}

/* faixa com quem está escalado, na visualização Dia */
.escala-do-dia {
  background: var(--destaque-hoje);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--teal);
  margin-bottom: 12px;
}

/* ============ Escala semanal ============ */
.escala-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.escala-ajuda {
  margin: 0;
  font-size: 13px;
  color: var(--texto-suave);
}

.grade-escala {
  display: grid;
  grid-template-columns: 92px repeat(7, minmax(130px, 1fr));
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  min-width: 900px;
}

.celula-canto {
  background: var(--branco);
  padding: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--texto-suave);
  text-align: center;
}

.grade-escala .cab-dia.col-hoje { color: var(--teal); background: var(--destaque-hoje); }

.celula-horario {
  background: var(--branco);
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--teal);
}

.celula-escala {
  background: var(--branco);
  min-height: 70px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.celula-escala.col-hoje { background: var(--creme); }

.turno {
  background: var(--destaque-hoje);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
}
.turno:hover { border-left-color: var(--ciano); }

.turno-nome {
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* faixa de horário do turno ("08:00–12:00"); sem fim, o site não oferece o turno */
.turno-faixa {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  margin-top: 1px;
}
.turno-faixa.sem-fim { color: var(--laranja); }

.turno-proc {
  font-size: 11px;
  color: var(--texto-suave);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.turno-obs {
  font-size: 11px;
  font-style: italic;
  color: var(--texto-suave);
  margin-top: 2px;
}

/* seletor de dias da semana no modal */
.campo-dias {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.grupo-dias {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip-dia {
  cursor: pointer;
  user-select: none;
}
.chip-dia input { position: absolute; opacity: 0; pointer-events: none; }

.chip-dia span {
  display: inline-block;
  min-width: 46px;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  background: var(--branco);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip-dia:hover span { border-color: var(--ciano); color: var(--teal); }
.chip-dia input:checked + span { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.chip-dia input:focus-visible + span { box-shadow: 0 0 0 3px rgba(51, 195, 211, 0.3); }

/* ao editar, o turno pertence a um único dia */
.grupo-dias.um-dia .chip-dia input:not(:checked) + span { opacity: 0.55; }

/* ============ Campo de procedimentos (vários por agendamento) ============ */
.campo-procedimentos {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rotulo-campo {
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-suave);
}

.linhas-procedimento {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.linha-procedimento {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.busca-procedimento { flex: 1; min-width: 0; }
.busca-procedimento input { width: 100%; }

/* linha de situação do exame frente a data, horário e médico do formulário */
.situacao-procedimento {
  flex-basis: 100%;
  margin: -2px 0 0;
  font-size: 12px;
  color: var(--texto-suave);
}
.situacao-procedimento:empty { display: none; }
.situacao-procedimento.ok { color: var(--verde); }
.situacao-procedimento.aviso { color: var(--laranja); }
.situacao-procedimento.erro { color: var(--vermelho); }

.btn-remover-procedimento {
  width: 34px;
  flex: none;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  background: var(--branco);
  color: var(--texto-suave);
  font-size: 17px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}
.btn-remover-procedimento:hover { border-color: var(--vermelho); color: var(--vermelho); }
.btn-remover-procedimento[hidden] { display: none; }

.btn-mais-procedimento {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.btn-mais-procedimento:hover { color: var(--ciano); text-decoration: underline; }

/* ============ Relatório ============ */
.campo-largo { grid-column: 1 / -1; }

.resumo-contagem {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  font-size: 13px;
  color: var(--texto-suave);
}

.resumo-contagem.destaque {
  border-color: var(--teal);
  color: var(--teal);
  font-weight: 700;
}

/* ============ Registros ============ */
.lista-registros {
  max-height: 260px;
  overflow-y: auto;
}

.item-registro {
  padding: 8px 0;
  border-bottom: 1px solid var(--borda);
}
.item-registro:last-child { border-bottom: none; }

.registro-data {
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 2px;
}

.registro-texto {
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ============ Bloqueio de dias ============ */
.btn-vermelho { background: var(--vermelho); color: #FFFFFF; }
.btn-vermelho:hover { filter: brightness(0.9); }

.acao-bloqueio {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.subtitulo-modal {
  margin: 18px 0 8px;
  font-size: 14px;
  border-top: 1px solid var(--borda);
  padding-top: 14px;
}

.lista-vazia { color: var(--texto-suave); font-size: 13px; margin: 4px 0; }

.item-bloqueio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
}
.item-bloqueio:last-child { border-bottom: none; }

.item-bloqueio-info { flex: 1; min-width: 180px; overflow-wrap: anywhere; }

.btn-mini { padding: 6px 10px; font-size: 12px; }

.area-desbloqueio {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.area-desbloqueio input {
  padding: 6px 10px;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--grafite);
  background: var(--branco);
  width: 220px;
  max-width: 100%;
}

/* legendas de dia nas visualizações (padrão teal; bloqueada em vermelho) */
.legenda-dia {
  background: var(--destaque-hoje);
  border: 1px solid var(--borda);
  color: var(--teal);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.legenda-dia.bloqueada {
  background: var(--cancelado-bg);
  border-color: var(--cancelado-borda);
  color: var(--erro-texto);
}

.legenda-faixa {
  background: var(--destaque-hoje);
  border-bottom: 1px solid var(--borda);
  color: var(--teal);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.legenda-faixa.bloqueada {
  background: var(--cancelado-bg);
  border-bottom-color: var(--cancelado-borda);
  color: var(--erro-texto);
}

.legenda-banner {
  background: var(--destaque-hoje);
  border: 1px solid var(--borda);
  color: var(--teal);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}
.legenda-banner.bloqueada {
  background: var(--cancelado-bg);
  border-color: var(--cancelado-borda);
  color: var(--erro-texto);
}

.opcao-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  margin-top: 12px;
  user-select: none;
}
.opcao-check input { accent-color: var(--vermelho); }
.opcao-check.opcao-ativo input { accent-color: var(--teal); }

/* situação da integração com o site (modal de configurações) */
.situacao-webhook {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.situacao-webhook.ok {
  background: var(--confirmado-bg);
  border: 1px solid var(--confirmado-borda);
  color: var(--verde);
}
.situacao-webhook.pendente {
  background: var(--creme);
  border: 1px solid var(--borda);
  color: var(--laranja);
}

.selo-bloqueado {
  color: var(--erro-texto);
  font-weight: 700;
  font-size: 12px;
}

/* ============ Modal de WhatsApp ============ */
.opcoes-zap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-zap-confirmar,
.btn-zap-reagendar {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  color: #FFFFFF;
}
.btn-zap-confirmar { background: var(--verde); }
.btn-zap-confirmar:hover { filter: brightness(0.93); }
.btn-zap-reagendar { background: var(--ciano); }
.btn-zap-reagendar:hover { background: var(--teal); }

/* ============ Texto de ajuda dos modais ============ */
.texto-ajuda {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--texto-suave);
}

.msg-erro {
  background: var(--cancelado-bg);
  color: var(--erro-texto);
  border: 1px solid var(--cancelado-borda);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  margin: 12px 0 0;
}

.modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* ============ Busca de médico (dropdown com filtro por digitação) ============ */
.busca-medico { position: relative; }
.busca-medico input { width: 100%; }

.busca-medico-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 60vh; /* o app limita a 4 itens visíveis (limitarAltura); o resto rola */
  overflow-y: auto;
  background: var(--branco);
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(25, 27, 31, 0.18);
}

.busca-medico-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: var(--grafite);
}
.busca-medico-item + .busca-medico-item { border-top: 1px solid var(--borda); }
.busca-medico-item span { font-size: 12px; color: var(--texto-suave); }
.busca-medico-item:hover,
.busca-medico-item.ativo { background: var(--destaque-hoje); }
.busca-medico-item.selecionado strong { color: var(--teal); }

.busca-medico-vazio {
  padding: 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--texto-suave);
}

/* ============ Cadastros (médicos e procedimentos) ============ */
.escala-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.subtitulo-form {
  margin: 0 0 10px;
  font-size: 14px;
}

.acoes-form {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.lista-medicos,
.lista-cadastro {
  max-height: 300px;
  overflow-y: auto;
}

.item-medico,
.item-cadastro {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
}
.item-medico:last-child,
.item-cadastro:last-child { border-bottom: none; }
.item-cadastro.inativo { opacity: 0.55; }

/* chip da esquerda: abreviação do médico ou valor do procedimento */
.medico-abrev,
.cadastro-chip {
  flex: none;
  min-width: 72px;
  text-align: center;
  background: var(--destaque-hoje);
  border: 1px solid var(--borda);
  color: var(--teal);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.item-medico.editando .medico-abrev,
.item-cadastro.editando .cadastro-chip {
  background: var(--teal);
  border-color: var(--teal);
  color: #FFFFFF;
}

.medico-info,
.cadastro-info {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
}

.medico-docs,
.cadastro-docs { font-size: 12px; color: var(--texto-suave); }

.acoes-item { display: flex; gap: 6px; flex-wrap: wrap; }

/* ============ Responsivo ============ */
@media (max-width: 640px) {
  .grade-campos { grid-template-columns: 1fr; }
  #conteudo { padding: 14px 12px; }
  .topbar, .toolbar { padding-left: 12px; padding-right: 12px; }
}

/* ============ Exames por médico ============ */
/* cadastro do médico: lista do catálogo com valor e limite por dia próprios */
.campo-exames {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.lista-exames {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie-esmaecida);
}

/* busca do catálogo (mesmo visual do campo de médico) */
.busca-exame { margin-bottom: 6px; }
.busca-exame input {
  padding: 8px 10px;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--grafite);
  background: var(--branco);
}

/* um bloco por exame adicionado: o nome ocupa a primeira linha inteira e, embaixo,
   ativo/inativo | valor (paciente) | repasse (médico) | limite/dia | tirar.
   O cabeçalho usa a mesma grade para os rótulos ficarem alinhados aos campos. */
.linha-exame,
.cabecalho-exames {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 30px;
  gap: 4px 6px;
  align-items: center;
}
.linha-exame {
  padding: 4px 0 8px;
  border-bottom: 1px dashed var(--borda);
}
.linha-exame:last-child { border-bottom: none; padding-bottom: 2px; }

.cabecalho-exames span {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-suave);
  padding: 0 2px;
  white-space: nowrap;
}

.exame-nome {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.exame-nome em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--texto-suave); }
.linha-exame.desativado .exame-nome { opacity: 0.55; text-decoration: line-through; }

.linha-exame .exame-ativo,
.linha-exame .exame-valor,
.linha-exame .exame-repasse,
.linha-exame .exame-limite {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--grafite);
  background: var(--branco);
}
.linha-exame.desativado .exame-ativo { color: var(--laranja); }
.linha-exame .btn-remover-procedimento { width: 30px; height: 32px; font-size: 16px; }

.medico-exames { font-size: 12px; color: var(--texto-suave); }
.medico-exames.alerta,
.cadastro-docs.alerta,
.turno-proc.alerta { color: var(--laranja); }

/* turno: chips com os exames do médico escolhido */
.chip-exame span { min-width: 0; font-weight: 600; }
.chip-exame.inativo span { text-decoration: line-through; }

.texto-ajuda-campo {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--texto-suave);
}

@media (max-width: 640px) {
  .linha-exame,
  .cabecalho-exames { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 30px; }
}

/* ============ Abas (modais de médicos e procedimentos: Cadastro | cadastrados) ============ */
.abas {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--borda);
}

.aba {
  padding: 8px 14px;
  margin-bottom: -2px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.aba:hover { color: var(--teal); background: var(--destaque-hoje); }
.aba.ativa { color: var(--teal); border-bottom-color: var(--teal); }
.aba:focus-visible { outline: 2px solid var(--ciano); outline-offset: -2px; }

.aba-contagem {
  display: inline-block;
  min-width: 20px;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--destaque-hoje);
  font-size: 12px;
  text-align: center;
}
.aba.ativa .aba-contagem { background: var(--teal); color: #FFFFFF; }

/* a aba da lista só tem a lista: pode ocupar mais altura */
#med-aba-lista .lista-medicos,
#proc-aba-lista .lista-cadastro { max-height: 60vh; }

/* ============ Login e níveis de acesso ============ */
/* sem login, nenhuma ação; só administradores veem o que é de administrador */
body[data-perfil="anonimo"] .so-logado,
body:not([data-perfil="administrador"]) .so-admin { display: none !important; }
body[data-perfil="anonimo"] [data-novo],
body[data-perfil="anonimo"] [data-turno-novo] { cursor: default; }

/* botão redondo de perfil (iniciais quando logado) e o menu suspenso */
.perfil { position: relative; }

.btn-perfil {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borda-input);
  border-radius: 50%;
  background: var(--branco);
  color: var(--texto-suave);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.btn-perfil:hover { border-color: var(--ciano); color: var(--teal); }
.btn-perfil.logado { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.btn-perfil.logado:hover { filter: brightness(1.08); }

.perfil-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 270px;
  padding: 12px;
  background: var(--branco);
  border: 1px solid var(--borda-input);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(25, 27, 31, 0.18);
}
.perfil-menu form { display: flex; flex-direction: column; gap: 8px; }
.perfil-menu label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-suave);
}
.perfil-menu input {
  padding: 8px 10px;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--grafite);
  background: var(--branco);
}
.perfil-menu .msg-erro { margin: 0; }
.perfil-menu .texto-ajuda-campo { margin: 0; }

.perfil-cabecalho {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 8px;
  font-size: 14px;
}
.perfil-cabecalho span { font-size: 12px; color: var(--texto-suave); }

.perfil-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--grafite);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.perfil-item:hover { background: var(--destaque-hoje); color: var(--teal); }

/* registros: texto + ações (excluir, só admin) */
.item-registro { display: flex; gap: 10px; align-items: flex-start; }
.registro-conteudo { flex: 1; min-width: 0; }

/* confirmação inline de exclusão (detalhes do agendamento) */
.confirmacao-exclusao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--cancelado-bg);
  border: 1px solid var(--cancelado-borda);
  border-radius: 8px;
  font-size: 13px;
}
.confirmacao-exclusao span { flex: 1; min-width: 200px; }

.campo-leitura { margin: 0 0 10px; font-size: 13px; color: var(--texto-suave); }

.acoes-item .usu-nova-senha {
  width: 150px;
  padding: 6px 8px;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--grafite);
  background: var(--branco);
}

/* ============ Barras de rolagem (identidade AMMO) ============ */
/* finas, com o polegar em teal, no modal, nas listas e na própria página */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--teal) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--teal);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--ciano); }

/* listas roláveis dentro dos modais: a barra fica afastada dos botões de ação
   (a lista avança sobre a margem do modal e compensa com padding) */
.lista-medicos,
.lista-cadastro,
.lista-registros {
  padding-right: 14px;
  margin-right: -14px;
}
.lista-exames { padding-right: 16px; }

/* ============ Valor do agendamento (total pelos valores do médico + Gratuito) ============ */
.campo-valor {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.linha-valor {
  display: flex;
  align-items: center;
  gap: 10px;
}
.linha-valor input[readonly] {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: var(--teal);
  background: var(--superficie-esmaecida);
}
.opcao-gratuito { margin-top: 0; white-space: nowrap; }
.opcao-gratuito input { accent-color: var(--teal); }

/* sub-linha dos itens do dropdown de médico: realiza / não realiza o exame */
.busca-medico-item span.ok { color: var(--verde); }
.busca-medico-item span.aviso { color: var(--laranja); }
.busca-medico-item span.erro { color: var(--vermelho); }

/* rodapé dos detalhes: ações destrutivas/contato à esquerda, fechar/editar/confirmar à direita */
.rodape-detalhes { justify-content: space-between; }
.rodape-grupo { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============ Notificações (sino) ============ */
.sino { position: relative; }

.btn-sino {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  background: var(--branco);
  color: var(--texto-suave);
  cursor: pointer;
}
.btn-sino:hover { border-color: var(--ciano); color: var(--teal); }

.sino-contagem {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--vermelho);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.sino-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: 380px;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  background: var(--branco);
  border: 1px solid var(--borda-input);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(25, 27, 31, 0.18);
}

.sino-titulo {
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--borda);
}

.sino-lista { max-height: 60vh; overflow-y: auto; }
.sino-lista-completa { max-height: 65vh; border: 1px solid var(--borda); border-radius: 8px; }

.item-notificacao {
  display: block;
  width: 100%;
  padding: 10px 14px 10px 12px;
  border: none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--borda);
  background: none;
  color: var(--grafite);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.item-notificacao:last-child { border-bottom: none; }
.item-notificacao:hover { background: var(--destaque-hoje); }
.item-notificacao.nova { border-left-color: var(--teal); }
.item-notificacao.cancelamento.nova { border-left-color: var(--vermelho); }

.notificacao-titulo {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notificacao-detalhe {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--texto-suave);
}
.notificacao-quando { color: var(--texto-esmaecido); }

.sino-vazio { margin: 0; padding: 16px 14px; font-size: 13px; color: var(--texto-suave); }

.sino-rodape {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  border-top: 1px solid var(--borda);
  background: none;
  color: var(--teal);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sino-rodape:hover { background: var(--destaque-hoje); }

/* ============ Médicos do dia (visualização Dia) ============ */
.medicos-do-dia { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.medico-dia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--branco);
  font-size: 13px;
}
.medico-dia-nome { font-weight: 700; color: var(--teal); }
.medico-dia-exames { color: var(--texto-suave); }

.btn-zap-medico {
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  background: #25D366;
  color: #FFFFFF;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-zap-medico:hover { filter: brightness(0.95); }

/* modal do aviso ao médico: botão à direita, textarea sem redimensionar na horizontal */
.btn-zapmed { margin-right: 0; }
.btn-zapmed:disabled { opacity: 0.5; cursor: default; }
#zapmed-texto { resize: vertical; font-size: 13px; }
.alerta-texto { color: var(--laranja); font-weight: 600; }

/* ============ Controle de custos (aba Custos da administração) ============ */
.barra-custos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.barra-custos label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
}
.barra-custos select {
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--texto);
  font: inherit;
  font-size: 13px;
}
.barra-custos .resumo-contagem { flex: 1; min-width: 200px; margin-top: 0; }

.lista-fechamentos {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 14px;
  margin-right: -14px;
}

/* um cartão por médico: o cabeçalho é o botão que abre/fecha os dias */
.cartao-custo {
  border: 1px solid var(--borda);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--fundo);
  overflow: hidden;
}
.cartao-custo-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.cartao-custo-cabecalho:hover { background: var(--destaque-hoje); }
.cartao-custo-cabecalho:focus-visible { outline: 2px solid var(--ciano); outline-offset: -2px; }
.cartao-custo-seta {
  margin-left: auto;
  color: var(--texto-suave);
  font-size: 14px;
  transition: transform 0.15s;
}
.cartao-custo.aberto .cartao-custo-seta { transform: rotate(180deg); }
.cartao-custo.aberto .cartao-custo-cabecalho { border-bottom: 1px solid var(--borda); }

/* um bloco por dia dentro do cartão */
.dia-fechamento {
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
}
.dia-fechamento:last-child { border-bottom: none; }
.dia-fechamento.pago { background: var(--confirmado-bg); }
.dia-fechamento-cabecalho {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 6px;
}
.chip-pago {
  display: inline-block;
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.chip-pago.ok {
  background: var(--confirmado-bg);
  border: 1px solid var(--confirmado-borda);
  color: var(--verde);
}
.chip-pago.pendente {
  background: var(--creme);
  border: 1px solid var(--borda);
  color: var(--laranja);
}

.tabela-exames {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 6px;
}
.tabela-exames td {
  padding: 4px 6px;
  border-bottom: 1px dashed var(--borda);
  vertical-align: top;
}
.tabela-exames td.qtd { width: 44px; color: var(--texto-suave); white-space: nowrap; }
.tabela-exames td.valor { width: 96px; text-align: right; white-space: nowrap; }
.tabela-exames tfoot td { border-bottom: none; font-weight: 700; }
.tabela-exames .lista-vazia { padding: 6px; }

.sem-valor { color: var(--laranja); font-weight: 600; }
.dia-fechamento .acoes-item { margin-top: 6px; }
.dia-fechamento .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============ Página de administração (no lugar do modal; abre em #administracao) ============ */
body[data-pagina="administracao"] .toolbar,
body[data-pagina="administracao"] #conteudo,
body[data-pagina="administracao"] #busca { display: none; }

.pagina-administracao {
  width: min(1000px, calc(100% - 48px));
  margin: 20px auto 32px;
  padding: 20px 24px 24px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 12px;
}

.pagina-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pagina-cabecalho h2 { margin: 0; font-size: 20px; }
.pagina-subtitulo { margin: 4px 0 0; font-size: 13px; color: var(--texto-suave); }

/* na página há espaço: as listas podem ser mais altas que no modal */
#pagina-administracao .lista-cadastro,
#pagina-administracao .lista-fechamentos { max-height: 60vh; }

@media (max-width: 640px) {
  .pagina-administracao {
    width: 100%;
    margin: 0;
    padding: 16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* "home" da barra superior: só na página de administração (volta à agenda) */
.btn-inicio { display: none; }
body[data-pagina="administracao"] .btn-inicio { display: inline-flex; }

/* ============ Doppler (por exame) e Mutirão (por agendamento) ============ */
.campo-profissional {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.grade-campos .opcao-mutirao,
.grade-campos .opcao-doppler {
  flex-direction: row;
  margin-top: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
}
.grade-campos .opcao-mutirao { margin-top: 2px; }
.grade-campos .opcao-doppler { align-self: center; white-space: nowrap; padding: 0 2px; }
.grade-campos .opcao-mutirao input,
.grade-campos .opcao-doppler input {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: none;
  accent-color: var(--teal);
}

/* ============ Mutirão do dia (legenda) ============ */
.legenda-dia.mutirao,
.legenda-banner.mutirao {
  background: var(--creme);
  border-color: var(--laranja);
  color: var(--laranja);
}
.legenda-faixa.mutirao {
  background: var(--creme);
  border-bottom-color: var(--laranja);
  color: var(--laranja);
}
.selo-mutirao { color: var(--laranja); font-weight: 700; font-size: 12px; }

.campo-mutirao {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.chips-exames { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-exames .lista-vazia { margin: 0; }
.chip-mutirao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  background: var(--creme);
  border: 1px solid var(--laranja);
  color: var(--laranja);
  font-size: 12px;
  font-weight: 700;
}
.chip-mutirao button {
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.chip-mutirao button:hover { color: var(--vermelho); }

/* selo "mutirão" nos itens do dropdown de procedimentos (dia de mutirão) */
.busca-medico-item .selo-mutirao { font-style: normal; font-size: 11px; margin-left: 6px; }

/* caixa Doppler travada pelo catálogo (exame sem Doppler ou Doppler obrigatório) */
.grade-campos .opcao-doppler.travada { opacity: 0.6; cursor: default; }

/* Nomear: capacidade do mutirão e item em edição */
.campo-capacidade { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--texto-suave); }
.campo-capacidade input {
  width: 160px;
  padding: 8px 10px;
  border: 1px solid var(--borda-input);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--grafite);
  background: var(--branco);
}
.item-bloqueio.editando { background: var(--destaque-hoje); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.selo-mutirao.lotado { color: var(--vermelho); }
.capacidade-mutirao { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.capacidade-mutirao .opcao-capacidade-diferente { margin-top: 0; flex-basis: 100%; font-weight: 600; font-size: 12px; }

/* --- Assinatura eletrônica: caixas de link (relatório, Custos, aba Assinaturas) --- */
.caixa-link { margin: 10px 0 4px; padding: 10px 12px; border: 1px dashed var(--teal); border-radius: 10px; background: var(--destaque-hoje); }
.caixa-link .texto-ajuda-campo { margin: 0 0 6px; }
.linha-link { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.linha-link input { flex: 1 1 240px; min-width: 0; padding: 7px 9px; font-size: 13px; border: 1px solid var(--borda-input); border-radius: 8px; background: var(--branco); color: var(--grafite); }
.linha-link a.btn { text-decoration: none; }
.chip-assinatura { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--borda); color: var(--texto-suave); }
.chip-assinatura.assinado { color: var(--verde); border-color: var(--verde); }
.chip-assinatura.pendente { color: var(--laranja); border-color: var(--laranja); }
.chip-assinatura.expirado, .chip-assinatura.cancelado { color: var(--texto-esmaecido); }
.assinatura-item .cadastro-info { gap: 4px; }

/* --- Minhas mensagens (modelos de WhatsApp por usuário) --- */
.chips-campos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.chip-campo { padding: 3px 9px; border: 1px solid var(--borda-input); border-radius: 12px; background: var(--superficie-esmaecida); color: var(--grafite); font-size: 12px; cursor: pointer; font-family: inherit; }
.chip-campo:hover { border-color: var(--teal); color: var(--teal); }
.previa-mensagem { margin-top: 10px; }
.previa-mensagem summary { cursor: pointer; font-size: 13px; color: var(--texto-suave); }
.previa-mensagem pre { white-space: pre-wrap; font-family: inherit; font-size: 13px; background: var(--superficie-esmaecida); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; }
#modal-mensagens .modal { width: min(720px, calc(100% - 32px)); }
#modal-mensagens textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; line-height: 1.4; }

/* --- Página pública /assinar (o médico assina no celular ou no computador) --- */
.pagina-assinar { background: var(--fundo); }
.assinar-topbar { justify-content: flex-start; gap: 10px; }
.assinar-subtitulo { color: var(--texto-suave); font-size: 13px; }
.assinar { max-width: 760px; margin: 16px auto 40px; padding: 0 16px; }
.assinar-caixa { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; }
.assinar-caixa h2 { margin: 0 0 6px; font-size: 18px; }
.assinar-visor iframe { width: 100%; height: 480px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
.assinar-abrir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.assinar-abrir a.btn { text-decoration: none; }
.assinar-aceite { margin: 12px 0 6px; font-weight: 600; }
.assinar-aceite input { accent-color: var(--teal); }
.assinar-quadro { border: 2px dashed var(--borda-input); border-radius: 10px; background: #fff; touch-action: none; overflow: hidden; }
.assinar-quadro canvas { display: block; touch-action: none; cursor: crosshair; }
.assinar-acoes { justify-content: flex-end; }
.assinar-ok { font-weight: 700; color: var(--verde); font-size: 16px; }
.assinar-aceite.destaque-erro { color: var(--vermelho); }
.assinar-aceite.destaque-erro input { accent-color: var(--vermelho); outline: 2px solid var(--vermelho); outline-offset: 2px; }
.assinar-quadro.destaque-erro { border-color: var(--vermelho); }

/* ============ Página de assinaturas (#assinaturas; qualquer perfil logado) ============ */
body[data-pagina="assinaturas"] .toolbar,
body[data-pagina="assinaturas"] #conteudo,
body[data-pagina="assinaturas"] #busca { display: none; }
body[data-pagina="assinaturas"] .btn-inicio { display: inline-flex; }
#pagina-assinaturas .lista-cadastro { max-height: 65vh; }
.filtros-assinaturas { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.filtros-assinaturas label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.filtros-assinaturas select { padding: 7px 9px; border: 1px solid var(--borda-input); border-radius: 8px; background: var(--branco); color: var(--grafite); font-size: 13px; }
#bloco-assinado a.btn { text-decoration: none; display: inline-block; }
@media (max-width: 700px), (pointer: coarse) {
  .assinar-visor { display: none; }
}