/* MODAL */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--veu);
  backdrop-filter: blur(2px);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 460px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
  animation: modalIn 0.18s ease;
}

/* Scrollbar fina e discreta (Chrome/Edge/Safari) */
.modal::-webkit-scrollbar { width: 6px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 10px;
}
.modal::-webkit-scrollbar-thumb:hover { background: var(--gray-300); }

/* Fallback (Firefox) */
.modal { scrollbar-width: thin; scrollbar-color: var(--gray-200) transparent; }

/* Variante maior - usada no modal de paciente, que tem abas com
   tabelas (Histórico, Financeiro) e precisa de mais espaço */
.modal--lg {
  width: 700px;
  max-width: 92vw;
  border-radius: 26px;
}

.modal--lg .modal-footer {
  border-radius: 0 0 26px 26px;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  letter-spacing: -0.2px;
}

.modal-body { padding: 20px 24px; }

.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--gray-50);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* FORM */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 6px;
  letter-spacing: 0.1px;
}

.form-input, .form-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  color: var(--gray-900);
  background: var(--surface);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: inherit;
  box-shadow: var(--shadow-xs);
}

.form-input:focus, .form-select:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.form-input::placeholder { color: var(--gray-400); }

/* Campo bloqueado para edição.
   Sem isto, um input `disabled` fica igualzinho a um editável: a pessoa clica, nada acontece e
   não há explicação. O fundo apagado e o cursor barrado dizem "aqui não se mexe" antes do
   clique. Regra na classe base, então vale para qualquer campo bloqueado do sistema. */
.form-input:disabled,
.form-select:disabled,
.form-input[readonly] {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--line);
  box-shadow: none;
  cursor: not-allowed;
}

/* O readonly do "Fim (calculado)" é um resultado, não um campo bloqueado: mantém o cursor
   normal, já que não há nada a tentar clicar. */
.form-input[readonly] { cursor: default; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Item de grid tem `min-width: auto`: ele se RECUSA a ficar menor que o conteúdo. Com um par
   data+hora dentro, a coluna não encolhia e o modal passava a rolar na horizontal - com metade
   do formulário fora da vista. `min-width: 0` devolve o direito de encolher. */
.form-row > * { min-width: 0; }

/* Linha "data + hora | horário de fim": o primeiro grupo carrega DOIS campos e o segundo é
   um resultado calculado, curto e só de leitura. Divididos em 1fr/1fr, a data e a hora
   ficavam espremidas em metade da largura enquanto "18:30" sobrava espaço do outro lado. */
.form-row--data-hora { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* CONFIRM DIALOG */
.confirm-dialog { text-align: center; padding: 8px 0 4px; }

.confirm-dialog p {
  color: var(--gray-600);
  font-size: 13.5px;
  margin-top: 10px;
  line-height: 1.6;
}

.confirm-icon {
  width: 48px;
  height: 48px;
  background: var(--red-50);
  border: 1px solid var(--red-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.confirm-icon svg { width: 22px; height: 22px; color: var(--red-600); }

/* MODAL TABS */
.modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--gray-200);
  margin: -4px 0 18px;
}

.modal-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-400);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}

.modal-tab:hover { color: var(--gray-700); }

.modal-tab.active {
  color: var(--blue-600);
  border-bottom-color: var(--blue-500);
}

.modal-tab-content { display: none; }
.modal-tab-content.active { display: block; }

/* ANAMNESE */
.anamnese-lista { display: flex; flex-direction: column; gap: 14px; }
.anamnese-row { display: flex; flex-direction: column; gap: 5px; }
.anamnese-pergunta { font-size: 13px; font-weight: 500; color: var(--gray-700); }
.anamnese-opcoes { display: flex; gap: 16px; font-size: 13px; color: var(--gray-600); }
.anamnese-opcoes label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* TOAST CONTAINER */
#toast-container,
.toast-container {
  position: fixed !important;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: auto;
  max-width: 340px;
}

/* COMANDA SALDO */
.comanda-saldo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}

.saldo-item {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.saldo-label { font-size: 11px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.5px; }
.saldo-valor { font-size: 17px; font-weight: 700; color: var(--gray-900); letter-spacing: -0.3px; }

/* Par data + hora-24h lado a lado (substitui o <input type="datetime-local"> nativo, cujo
   seletor de hora mostra AM/PM em navegadores configurados em inglês). */
/* A data precisa de mais largura que a hora: "31/12/2026" ocupa bem mais que "18:30", e o
   campo de data ainda reserva espaço à direita para o botão do calendário. */
/* O campo de data precisa caber "dd/mm/aaaa" MAIS os 34px reservados ao botão de calendário.
   Com `min-width: 0` ele encolhia abaixo disso e o ano aparecia cortado ("16/08/202"). O piso
   de 118px impede o corte; `flex-wrap` garante que, quando nem assim couber, os dois campos
   empilhem em vez de espremer - largura de tela nunca deve poder esconder um dígito. */
.data-hora-par { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.data-hora-par .datepicker { flex: 1 1 118px; min-width: 118px; }
.data-hora-par .input-hora-24h { flex: 0 1 72px; min-width: 66px; }
.input-hora-24h { max-width: 84px; text-align: center; font-variant-numeric: tabular-nums; }
/* Escolha dos dias da semana no bloqueio recorrente */
.dias-semana { display: flex; gap: 6px; flex-wrap: wrap; }

.dia-chip {
  font: inherit;
  font-size: 12.5px;
  min-width: 44px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.dia-chip:hover { border-color: var(--primary); color: var(--primary); }
.dia-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dia-chip[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}

/* Campo com um botão de atalho ao lado (ex: criar paciente sem sair do agendamento) */
.campo-com-acao { display: flex; gap: 6px; align-items: stretch; }
.campo-com-acao .form-select,
.campo-com-acao .form-input { flex: 1; min-width: 0; }
.campo-com-acao .btn { flex-shrink: 0; white-space: nowrap; }

/* Botão só com o "+" ao lado do select: quadrado, largura igual à altura do campo. */
.btn-icone {
  width: 38px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- SELETOR COM BUSCA (seletor.js) ----
   O <select> nativo continua no DOM, invisível: ele é quem guarda o valor. O que se vê é o
   botão abaixo; a lista é desenhada em body para não ser cortada por overflow de modal. */
.seletor { position: relative; display: block; width: 100%; }

/* Fora da tela em vez de display:none - um campo escondido assim continua acessível a
   preenchimento automático e a leitores de tela que caiam nele. */
.seletor > select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.seletor-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--gray-900);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.seletor-botao:hover:not(:disabled) { border-color: var(--line-forte); }

.seletor-botao:focus-visible,
.seletor[data-aberto] .seletor-botao {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.seletor-botao:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.seletor-valor {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "Selecione..." é marcador de lugar, não escolha: cor de placeholder. */
.seletor-valor[data-vazio="sim"] { color: var(--gray-400); }

.seletor-seta {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--transition);
}
.seletor-seta svg { width: 15px; height: 15px; }
.seletor[data-aberto] .seletor-seta { transform: rotate(180deg); color: var(--primary); }

/* ---- Painel ----
   position:fixed e filho de body: dentro do modal ele seria cortado pelo overflow. */
.seletor-painel {
  position: fixed;
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--primary-tint-borda);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: seletor-entra 0.12s ease-out;
}

@keyframes seletor-entra {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .seletor-painel { animation: none; }
}

.seletor-busca { padding: 8px; border-bottom: 1px solid var(--line); }

.seletor-busca-campo {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.seletor-busca-campo::placeholder { color: var(--gray-400); }
.seletor-busca-campo:focus { border-color: var(--primary); background: var(--surface); }

.seletor-lista { max-height: 240px; overflow-y: auto; padding: 5px; }

.seletor-opcao {
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Marcada = alvo do Enter, seja por teclado ou por hover. Um estado só para as duas formas
   de navegar evita que o mouse e o teclado disputem qual linha está "ativa". */
.seletor-opcao[data-marcada="sim"] { background: var(--primary-tint); color: var(--primary-forte); }

/* A escolhida fica marcada mesmo sem estar sob o cursor. */
.seletor-opcao[aria-selected="true"] { font-weight: 600; color: var(--primary); }
.seletor-opcao[aria-selected="true"][data-marcada="sim"] { color: var(--primary-forte); }

.seletor-opcao[data-desabilitada="sim"] {
  color: var(--text-muted);
  cursor: not-allowed;
  background: none;
}

.seletor-vazio {
  padding: 16px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Lista de sessões que caem num período que se quer bloquear. Só as primeiras aparecem - o
   resto vira contagem, porque quarenta linhas viram um borrão que ninguém lê. */
.lista-conflitos {
  list-style: none;
  margin: 10px 0;
  padding: 10px 12px;
  text-align: left;
  background: var(--surface-2, var(--gray-50));
  border-radius: var(--radius-md);
  font-size: 13px;
  max-height: 40vh;
  overflow-y: auto;
}

.lista-conflitos li { padding: 4px 0; overflow-wrap: anywhere; }
.lista-conflitos li + li { border-top: 1px solid var(--gray-100); }

.lista-conflitos-resto {
  font-size: 12px;
  color: var(--gray-400);
  margin-top: -4px;
}