/* ============================================================
   FLUA — componentes comuns das telas do sistema
   (modais da casca createModal/agenda-modal, alerta/confirmar/prompt,
   SearchableSelect, Novo Atendimento).

   Carregar DEPOIS do CSS da pagina e ANTES da camada propria dela
   (<pagina>-flua.css). Saiu do agenda-flua.css em 2026-10-18 para as outras
   telas (orcamentos, cupons, enfermagem...) reaproveitarem sem copiar.
   Tokens: flua.css.
   ============================================================ */

/* ---------- SearchableSelect ---------- */
.ss-dropdown {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
}

.ss-item {
  padding: 9px 16px;
  font-size: 14px;
  color: var(--flua-navy);
}

.ss-item:hover,
.ss-item.ss-highlighted {
  background: var(--h-f3f5f7, #F3F5F7);
  color: var(--flua-navy);
}


/* ============================================================
   MODAIS — base comum (createModal, modais estaticos, alertas)
   ============================================================ */
.agenda-modal-overlay,
.alert-overlay {
  background-color: rgba(11, 44, 69, 0.6);
}

.agenda-modal {
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-xl);
  color: var(--flua-navy);
}

/* Cabecalho branco (o roxo cheio saiu): titulo navy + X em botao redondo */
.agenda-modal-header {
  padding: 20px 20px 12px 28px;
  background-color: var(--h-ffffff, #fff);
  color: var(--flua-navy);
  border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  border-bottom: 0;
}

.agenda-modal-header h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--flua-navy);
}

/* Os outros cabecalhos de modal da tela (cada um com classe propria e o mesmo roxo cheio) */
.month-calendar-header,
.ss-orientacao-modal-header,
.modal-header,
.modal-novo-atendimento-header,
.na-modal-header {
  background: var(--h-ffffff, #fff) !important;
  color: var(--flua-navy) !important;
  border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  border-bottom: 0;
  padding: 20px 20px 12px 28px;
}

.month-calendar-header h3,
.ss-orientacao-modal-header h3,
.modal-header h2,
.modal-header h3,
.modal-novo-atendimento-header h2,
.modal-novo-atendimento-header h3,
.na-modal-header h3,
.na-modal-header h4 {
  font-size: 20px;
  font-weight: 500;
  color: var(--flua-navy) !important;
}

.month-calendar-header button,
.ss-orientacao-modal-header button,
.modal-header button,
.modal-novo-atendimento-header button,
.na-modal-header button {
  color: var(--flua-navy) !important;
  opacity: 1;
}

.month-calendar-modal {
  border-radius: var(--radius-modal);
}

/* Filtros do Encontrar Disponibilidade e da Transferencia */
.smart-search-filters .form-group label {
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--flua-navy);
}

.smart-search-filters .form-group select,
.smart-search-filters .form-group input:not([type="checkbox"]):not([type="radio"]),
.address-search-wrap input {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--h-ffffff, #fff);
  padding-left: 18px;
  font-size: 15px;
  color: var(--flua-navy);
}

.address-search-wrap input {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.addr-search-btn {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--flua-navy);
  border-color: var(--flua-navy);
}

.btn-nova-busca,
.btn-limpar-filtros {
  min-height: 44px;
  border-radius: var(--radius-pill) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.btn-nova-busca {
  background: var(--flua-navy);
  white-space: nowrap;
}

.btn-limpar-filtros {
  background: transparent !important;
  color: var(--flua-navy) !important;
  border: 1.5px solid var(--flua-navy) !important;
}

.agenda-modal-header h3 i {
  color: var(--flua-navy);
}

.agenda-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  color: var(--flua-navy);
  font-size: 24px;
  line-height: 1;
  opacity: 1;
}

.agenda-modal-close:hover {
  background: rgba(var(--rgb-0b2c45, 11, 44, 69), 0.06);
}

.agenda-modal-body {
  padding: 8px 28px 24px;
  font-size: 14px;
}

.agenda-modal-body .form-group label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--flua-navy);
}

/* Campos: pilula de 44px; textarea com raio 20 */
.agenda-modal-body .form-group input:not([type="checkbox"]):not([type="radio"]),
.agenda-modal-body .form-group select,
.agenda-modal .ss-input {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--h-ffffff, #fff);
  font-size: 15px;
  color: var(--flua-navy);
}

.agenda-modal-body .form-group select,
.agenda-modal .ss-input {
  padding-right: 40px;
  background-position: right 16px center;
}

/* Seta navy em todo select dos modais (o nativo varia por navegador) */
.agenda-modal select,
.alert-overlay select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20d%3D%22M1%201.5l5%205%205-5%22%20fill%3D%22none%22%20stroke%3D%22%2355697A%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 40px;
}

.agenda-modal textarea,
.agenda-modal input,
.agenda-modal select,
.agenda-modal button {
  font-family: inherit;
}

.agenda-modal-body .form-group textarea {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background-color: var(--h-ffffff, #fff);
  font-size: 15px;
  color: var(--flua-navy);
}

.agenda-modal-body .form-group input::placeholder,
.agenda-modal-body .form-group textarea::placeholder {
  color: var(--text-muted);
}

.agenda-modal-body .form-group input:focus,
.agenda-modal-body .form-group select:focus,
.agenda-modal-body .form-group textarea:focus,
.agenda-modal .ss-input:focus {
  border-color: var(--flua-navy);
  box-shadow: inset 0 0 0 1px var(--flua-navy);
}

.agenda-modal-body .form-group input:disabled,
.agenda-modal-body .form-group select:disabled,
.agenda-modal-body .form-group input[readonly],
.agenda-modal-body .form-group textarea[readonly] {
  background-color: var(--h-eef1f3, #EEF1F3);
  border-color: transparent;
  color: var(--text-muted);
}

.agenda-modal-footer {
  padding: 16px 28px;
  gap: 12px;
  border-top: 1px solid var(--border);
}

/* Botoes base dos modais (createModal: Cancelar = button-secondary, confirmar = button-primary) */
.agenda-modal .button-primary,
.agenda-modal .button-secondary,
.alert-overlay .alert-ok-button,
.alert-overlay .alert-confirm-button,
.alert-overlay .alert-cancel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

.agenda-modal .button-primary,
.alert-overlay .alert-ok-button,
.alert-overlay .alert-confirm-button {
  border: 0;
  background: var(--flua-navy);
  color: var(--h-ffffff, #fff);
}

.agenda-modal .button-primary:hover:not(:disabled),
.alert-overlay .alert-ok-button:hover,
.alert-overlay .alert-confirm-button:hover {
  background: var(--primary-light);
  transform: none;
  box-shadow: none;
}

/* Sem :disabled nenhum no projeto, o botao travado parecia clicavel (ver CLAUDE.md,
   SimCampos). Dentro dos modais da agenda ele passa a parecer travado. */
.agenda-modal .button-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.agenda-modal .button-secondary,
.alert-overlay .alert-cancel-button {
  border: 0;
  background: transparent;
  color: var(--flua-navy);
}

.agenda-modal .button-secondary:hover,
.alert-overlay .alert-cancel-button:hover {
  background: rgba(var(--rgb-0b2c45, 11, 44, 69), 0.06);
  color: var(--flua-navy);
}

.alert-overlay .alert-confirm-button--perigo {
  background: var(--status-busy);
}

.alert-overlay .alert-confirm-button--perigo:hover {
  background: var(--h-8f1c2e, #8F1C2E);
}

.alert-overlay .alert-confirm-button--atencao {
  background: var(--status-maint);
}

.alert-overlay .alert-confirm-button--atencao:hover {
  background: var(--h-7d4900, #7D4900);
}

/* ---------- Alerta / Confirmar / Prompt ---------- */
.alert-content {
  max-width: 420px;
  padding: 28px;
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-xl);
  color: var(--flua-navy);
}

.alert-icon-area {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 999px;
}

.alert-icon-area i {
  font-size: 22px;
}

.alert-icon-area.alert-type-error { background: var(--status-busy-bg); }
.alert-icon-area.alert-type-error i { color: var(--status-busy); }
.alert-icon-area.alert-type-warning { background: var(--status-maint-bg); }
.alert-icon-area.alert-type-warning i { color: var(--status-maint); }
.alert-icon-area.alert-type-info { background: var(--flua-light-blue); }
.alert-icon-area.alert-type-info i { color: var(--flua-navy); }
.alert-icon-area.alert-type-success { background: var(--status-ok-bg); }
.alert-icon-area.alert-type-success i { color: var(--status-ok); }

.alert-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--flua-navy);
}

.alert-message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--flua-navy);
}

.alert-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.alert-prompt-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 15px;
  color: var(--flua-navy);
  outline: none;
}

.alert-prompt-input:focus {
  border-color: var(--flua-navy);
  box-shadow: inset 0 0 0 1px var(--flua-navy);
}

.alert-prompt-input--erro {
  border-color: var(--status-busy);
}

.alert-prompt-erro {
  margin-top: 6px;
  font-size: 14px;
  color: var(--status-busy);
  text-align: left;
}

/* ---------- Faixa de contexto do slot (montarFaixaSlot) ---------- */
.slot-info-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--h-fbfaf7, #FBFAF7);
  color: var(--flua-navy);
}

/* ---------- Celular: modal vira folha de baixo ---------- */
@media (max-width: 600px) {
  .agenda-modal-overlay {
    align-items: flex-end;
    padding-top: 56px;
  }

  .agenda-modal,
  .agenda-modal-wide .agenda-modal {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100vh - 56px) !important;
    max-height: calc(100dvh - 56px) !important; /* iOS: 100vh inclui a barra do navegador */
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  }

  .agenda-modal-header {
    padding: 16px 12px 8px 20px;
  }

  .agenda-modal-body {
    padding: 8px 20px 20px;
  }

  /* Pares lado a lado montados com flex inline nos templates (ex.: Convenio + Categoria)
     viram coluna: em 390px os dois campos nao cabem com o texto inteiro. */
  .agenda-modal-body .form-group[style*="display:flex"] {
    flex-direction: column;
    align-items: stretch !important;
  }

  .agenda-modal-body .form-group[style*="display:flex"] > div {
    width: 100%;
  }

  /* Rodape empilhado, na ORDEM do codigo (Cancelar antes do principal) */
  .agenda-modal-footer {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px 28px;
  }

  .agenda-modal-footer > * {
    width: 100%;
    order: 0 !important;
  }

  .alert-overlay {
    align-items: flex-end !important;
  }

  .alert-content {
    max-width: none;
    width: 100%;
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
    padding: 24px 20px 28px;
  }

  .alert-buttons {
    flex-direction: column;
  }
}

/* ============================================================
   NOVO ATENDIMENTO (novo-atendimento.css) — camada Flua
   ============================================================ */
.modal-novo-atendimento {
  background: rgba(11, 44, 69, 0.6);
}

.modal-novo-atendimento-content {
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-xl);
  color: var(--flua-navy);
}

.modal-close-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  color: var(--flua-navy);
}

.modal-close-btn:hover {
  background: rgba(var(--rgb-0b2c45, 11, 44, 69), 0.06);
}

/* Indicador de passos */
.atendimento-steps::before {
  background: var(--border);
}

/* Linha de progresso: do 1o circulo ate o passo atual (cada passo ocupa 1/4 da
   largura e o circulo fica no centro dele). */
.atendimento-steps::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 12.5%;
  width: calc(var(--na-passos-feitos, 0) * 25%);
  height: 2px;
  background: var(--status-ok);
  z-index: 0;
}

.step-circle {
  background: var(--h-eef1f3, #EEF1F3);
  color: var(--text-muted);
  border: 0;
}

.atendimento-step.active .step-circle {
  background: var(--flua-navy);
  color: var(--h-ffffff, #fff);
}

.atendimento-step.completed .step-circle {
  background: var(--status-ok);
  color: var(--h-ffffff, #fff);
}

.step-label {
  color: var(--text-muted);
}

.atendimento-step.active .step-label {
  color: var(--flua-navy);
}

.na-form-section-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--flua-navy);
  border-bottom: 1px solid var(--border);
}

.na-form-group label,
.na-proc-field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--flua-navy);
}

.na-form-group input,
.na-form-group select,
.na-proc-field input,
.na-autocomplete-wrapper input,
.na-nav-select,
.na-tabela-busca input {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--h-ffffff, #fff);
  font-family: inherit;
  font-size: 15px;
  color: var(--flua-navy);
}

.na-form-group select,
.na-nav-select,
.modal-novo-atendimento select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20d%3D%22M1%201.5l5%205%205-5%22%20fill%3D%22none%22%20stroke%3D%22%2355697A%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

.na-form-group input:focus,
.na-form-group select:focus,
.na-proc-field input:focus,
.na-autocomplete-wrapper input:focus,
.na-nav-select:focus {
  border-color: var(--flua-navy);
  box-shadow: inset 0 0 0 1px var(--flua-navy);
}

.na-form-group input:disabled,
.na-form-group select:disabled,
.na-form-group input[readonly] {
  background-color: var(--h-eef1f3, #EEF1F3);
  border-color: transparent;
  color: var(--text-muted);
}

.na-autocomplete-results {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
}

/* Botoes do wizard */
.na-btn,
.na-nav-btn,
.na-s4-actions button {
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
  transform: none;
}

.na-btn-primary,
.na-btn-success,
.na-btn-info {
  border: 0;
  background: var(--flua-navy);
  color: var(--h-ffffff, #fff);
}

.na-btn-primary:hover:not(:disabled),
.na-btn-success:hover:not(:disabled),
.na-btn-info:hover:not(:disabled) {
  background: var(--primary-light);
}

.na-btn-secondary {
  border: 0;
  background: transparent;
  color: var(--flua-navy);
}

.na-btn-secondary:hover:not(:disabled) {
  background: rgba(var(--rgb-0b2c45, 11, 44, 69), 0.06);
}

.na-btn-warning {
  border: 1.5px solid var(--status-maint);
  background: var(--status-maint-bg);
  color: var(--status-maint);
}

.na-btn-warning:hover:not(:disabled) {
  background: var(--h-eadcc8, #EADCC8);
  color: var(--status-maint);
}

.na-btn:disabled {
  opacity: 0.4;
}

.na-s4-actions button,
.na-nav-btn {
  border: 1.5px solid var(--flua-navy);
  background: var(--h-ffffff, #fff);
  color: var(--flua-navy);
}

.na-s4-actions button:hover,
.na-nav-btn:hover:not(:disabled) {
  background: var(--flua-beige);
}

.na-s4-actions button.active {
  background: var(--flua-navy);
  color: var(--h-ffffff, #fff);
}

/* Excluir/Cancelar conta: contorno vermelho, como as demais acoes (design). */
.na-s4-actions button.na-s4-acao-perigo {
  border-color: var(--status-busy);
  color: var(--status-busy);
}

.na-s4-actions button.na-s4-acao-perigo:hover {
  background: var(--status-busy-bg);
}

/* Rodape do passo 4: as formas de pagamento sao alternativas, de contorno; so a
   acao principal (Gerar Titulo e NF) fica cheia. */
.modal-novo-atendimento-footer--compacto #na-btn-link-pagamento,
.modal-novo-atendimento-footer--compacto #na-btn-adyen-terminal,
.modal-novo-atendimento-footer--compacto #na-btn-dinheiro {
  border: 1.5px solid var(--flua-navy);
  background: var(--h-ffffff, #fff);
  color: var(--flua-navy);
}

.modal-novo-atendimento-footer--compacto #na-btn-link-pagamento:hover:not(:disabled),
.modal-novo-atendimento-footer--compacto #na-btn-adyen-terminal:hover:not(:disabled),
.modal-novo-atendimento-footer--compacto #na-btn-dinheiro:hover:not(:disabled) {
  background: var(--flua-beige);
}

.modal-novo-atendimento-footer,
.na-modal-footer {
  border-top: 1px solid var(--border);
}

.na-orcamento-card,
.na-cupom-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.na-orcamento-card:hover,
.na-cupom-card:hover {
  border-color: var(--flua-navy);
  box-shadow: none;
}

/* Passo 3: cards de resumo em creme e "Pronto para criar" em verde-claro (design). */
.na-info-box {
  background: var(--flua-beige);
  border-left: 0;
  border-radius: var(--radius-md);
  color: var(--flua-navy);
}

.na-info-box.success {
  background: var(--status-ok-bg);
}

.na-info-box.success .na-info-box-title,
.na-info-box.success .na-info-box-title i {
  color: var(--status-ok);
}

/* Procedimentos do Convenio: o padding esquerdo do campo da pilula (18px) jogava o
   texto em cima da lupa absoluta; abre espaco para ela. */
.na-tabela-busca input {
  padding-left: 40px;
}

@media (max-width: 600px) {
  .modal-novo-atendimento {
    align-items: flex-end;
    padding-top: 56px;
  }

  .modal-novo-atendimento-content {
    width: 100% !important;
    max-width: none !important;
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  }
}

/* ---------- Novo Atendimento: modo noturno ----------
   As variaveis de marca (--color-primary...) sao redefinidas no escuro em flua-escuro.css. */
/* Seta dos selects: o traco #55697A embutido no SVG fica apagado no fundo escuro.
   Desabilitado fica de fora: no claro o `background:` dele tira a seta. */
:root[data-theme="dark"] .na-form-group select:not(:disabled),
:root[data-theme="dark"] .na-nav-select:not(:disabled),
:root[data-theme="dark"] .modal-novo-atendimento select:not(:disabled) {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20d%3D%22M1%201.5l5%205%205-5%22%20fill%3D%22none%22%20stroke%3D%22%23A3B3C0%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

/* Rotulos SENHA / CONTA / TOTAL do passo 4: o cinza claro dava 3,6:1 nos cards coloridos. */
:root[data-theme="dark"] .na-s4-item small,
:root[data-theme="dark"] .na-empty-state {
  color: var(--text-muted);
}


/* ---------- FluaDialogo (flua-dialogo.js): alerta / confirmar / perguntar ---------- */
.fd-fundo {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 44, 69, 0.6);
  font-family: var(--font-family, Arial, sans-serif);
}

.fd-caixa {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  padding: 28px;
  border-radius: var(--radius-modal, 24px);
  background: var(--h-ffffff, #fff);
  box-shadow: var(--shadow-xl, 0 16px 40px rgba(11, 44, 69, 0.16));
  color: var(--flua-navy, var(--h-0b2c45, #0B2C45));
  text-align: center;
}

.fd-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-size: 22px;
}

.fd-icone--erro { background: var(--status-busy-bg, var(--h-f6e5e7, #F6E5E7)); color: var(--status-busy, var(--h-b4233a, #B4233A)); }
.fd-icone--aviso { background: var(--status-maint-bg, var(--h-f3ebe0, #F3EBE0)); color: var(--status-maint, var(--h-9a5a00, #9A5A00)); }
.fd-icone--info { background: var(--flua-light-blue, var(--h-cceef0, #CCEEF0)); color: var(--flua-navy, var(--h-0b2c45, #0B2C45)); }
.fd-icone--sucesso { background: var(--status-ok-bg, var(--h-e3efec, #E3EFEC)); color: var(--status-ok, var(--h-17765f, #17765F)); }

.fd-titulo {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 500;
}

.fd-msg {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
}

.fd-campo {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  margin-top: 16px;
  padding: 0 18px;
  border: 1px solid var(--border, rgba(var(--rgb-0b2c45, 11, 44, 69), 0.15));
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  color: var(--flua-navy, var(--h-0b2c45, #0B2C45));
  outline: none;
}

.fd-campo:focus {
  border-color: var(--flua-navy, var(--h-0b2c45, #0B2C45));
  box-shadow: inset 0 0 0 1px var(--flua-navy, var(--h-0b2c45, #0B2C45));
}

.fd-campo--erro { border-color: var(--status-busy, var(--h-b4233a, #B4233A)); }

.fd-erro {
  margin-top: 6px;
  font-size: 14px;
  color: var(--status-busy, var(--h-b4233a, #B4233A));
  text-align: left;
}

.fd-erro[hidden] { display: none; }

.fd-acoes {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.fd-btn {
  min-height: 44px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

/* var(--color-primary): navy nas telas internas; cor da clinica na sala de telemedicina do paciente */
.fd-btn--cancelar { background: transparent; color: var(--color-primary, var(--flua-navy, var(--h-0b2c45, #0B2C45))); }
.fd-btn--cancelar:hover { background: rgba(var(--rgb-0b2c45, 11, 44, 69), 0.06); }
.fd-btn--ok { background: var(--color-primary, var(--flua-navy, var(--h-0b2c45, #0B2C45))); color: var(--h-ffffff, #fff); }
.fd-btn--ok:hover { background: var(--primary-light, var(--h-183850, #183850)); }
.fd-btn--perigo { background: var(--status-busy, var(--h-b4233a, #B4233A)); }
.fd-btn--perigo:hover { background: var(--h-8f1c2e, #8F1C2E); }
.fd-btn:focus-visible { outline: 2px solid var(--flua-navy, var(--h-0b2c45, #0B2C45)); outline-offset: 2px; }

@media (max-width: 600px) {
  .fd-fundo { align-items: flex-end; padding: 0; }
  .fd-caixa { max-width: none; border-radius: 24px 24px 0 0; padding: 24px 20px 28px; }
  /* ordem do codigo: Cancelar antes do principal */
  .fd-acoes { flex-direction: column; }
}

/* ---------- Recebimento em Dinheiro (recebimento-dinheiro.js injeta o CSS dele DEPOIS desta folha,
   por isso o id do modal na frente). Vale para agenda, Novo Atendimento e orcamentos. ---------- */
#srd-modal {
  background: rgba(11, 44, 69, 0.6);
}

#srd-modal .srd-card {
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-xl);
  color: var(--flua-navy);
}

#srd-modal .srd-header {
  padding: 20px 20px 12px 28px;
  background: var(--h-ffffff, #fff);
  color: var(--flua-navy);
}

#srd-modal .srd-header h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 500;
}

#srd-modal .srd-header h3 i {
  width: 40px;
  height: 40px;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--flua-beige);
  font-size: 16px;
}

#srd-modal .srd-close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--flua-navy);
  font-size: 24px;
}

#srd-modal .srd-close:hover {
  background: rgba(var(--rgb-0b2c45, 11, 44, 69), 0.06);
}

#srd-modal .srd-body {
  padding: 8px 28px 24px;
}

#srd-modal .srd-campo label {
  font-size: 14px;
  font-weight: 500;
  color: var(--flua-navy);
}

#srd-modal .srd-select {
  height: 44px;
  padding: 0 40px 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  color: var(--flua-navy);
  /* mesma seta dos selects dos modais Flua (o nativo varia por navegador) */
  appearance: none;
  -webkit-appearance: none;
  background: var(--h-ffffff, #fff) url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20d%3D%22M1%201.5l5%205%205-5%22%20fill%3D%22none%22%20stroke%3D%22%2355697A%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat right 16px center / 12px 8px;
}

#srd-modal .srd-footer {
  padding: 16px 28px;
  gap: 12px;
  border-top: 1px solid var(--border);
}

#srd-modal .srd-btn {
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
}

#srd-modal .srd-btn-sec {
  border: 0;
  background: transparent;
  color: var(--flua-navy);
}

#srd-modal .srd-btn-ok {
  background: var(--flua-navy);
  color: var(--h-ffffff, #fff);
}

#srd-modal .srd-btn-ok:disabled {
  opacity: 0.4;
}

@media (max-width: 768px) {
  #srd-modal {
    align-items: flex-end;
  }

  #srd-modal .srd-card {
    width: 100%;
    max-width: none;
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  }

  #srd-modal .srd-footer {
    flex-direction: column;
    padding: 16px 20px 28px;
  }

  #srd-modal .srd-btn {
    width: 100%;
  }
}