:root {
  --cor-primaria: #10B981;
  --cor-primaria-escura: #059669;
  --cor-primaria-suave: #D1FAE5;
  --cor-fundo: #F8FAFC;
  --cor-card: #FFFFFF;
  --cor-texto: #0F172A;
  --cor-texto-suave: #64748B;
  --cor-borda: #E2E8F0;
  --cor-destaque: #0F172A;
  --cor-alerta: #EF4444;
  --cor-aviso: #F59E0B;
  --sombra-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --sombra-card-hover: 0 6px 14px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
}

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 14px;
}

h1, h2, h3, .titulo-pagina {
  font-size: 20px;
  font-weight: 700;
  color: var(--cor-destaque);
  letter-spacing: -0.01em;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fade-in 0.3s ease-out; }

/* Cards */
.card {
  background-color: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: var(--sombra-card);
  padding: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--sombra-card-hover);
}

/* Cards de estatísticas */
.card-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 3px solid var(--cor-primaria);
}

.stat-icone {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.stat-valor { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--cor-texto); }
.stat-valor-total { font-size: 15px; font-weight: 500; color: var(--cor-texto-suave); margin-left: 5px; }
.stat-rotulo { font-size: 13px; color: var(--cor-texto-suave); font-weight: 500; margin-bottom: 4px; }

.stat-indicador { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 6px; }
.stat-indicador .fa-solid, .stat-indicador .fa-circle { font-size: 8px; }
.stat-indicador.ok { color: var(--cor-primaria); }
.stat-indicador.atencao { color: var(--cor-alerta); }

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 14px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn:hover { box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12); }
.btn:active { transform: scale(0.98); }

.btn-primario { background-color: var(--cor-primaria); color: #FFFFFF; }
.btn-primario:hover { background-color: var(--cor-primaria-escura); }
.btn-secundario { background-color: #F1F5F9; color: var(--cor-texto); }
.btn-secundario:hover { background-color: #E2E8F0; }
.btn-perigo { background-color: var(--cor-alerta); color: #FFFFFF; }
.btn-perigo:hover { background-color: #DC2626; }
.btn-aviso { background-color: var(--cor-aviso); color: #FFFFFF; }
.btn-aviso:hover { background-color: #D97706; }

/* Layout */
.header-gradiente {
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--cor-borda);
}

.sidebar {
  background-color: #FFFFFF;
  border-right: 1px solid var(--cor-borda);
  display: flex;
  flex-direction: column;
}

.sidebar-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--cor-primaria);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sidebar-logo.tem-imagem {
  background: transparent;
}

.logo-preview {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1px solid var(--cor-borda);
  background: #F8FAFC;
  color: var(--cor-primaria);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
}

.logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sidebar a { color: var(--cor-texto-suave); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; font-weight: 500; }
.sidebar a:hover { color: var(--cor-texto); background-color: #F8FAFC; }
.sidebar a.ativo {
  color: var(--cor-primaria-escura);
  background-color: var(--cor-primaria-suave);
  font-weight: 600;
}

.nav-icone {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  color: var(--cor-texto-suave);
  transition: color 0.15s ease;
}

.sidebar a:hover .nav-icone { color: var(--cor-texto); }
.sidebar a.ativo .nav-icone { color: var(--cor-primaria-escura); }

.btn-sair {
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-sair:hover { background-color: #FEF2F2; color: var(--cor-alerta); }
.btn-sair:hover .nav-icone { color: var(--cor-alerta); }

.avatar-usuario {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--cor-primaria);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* Tabelas */
table.tabela-zebra { border-collapse: separate; border-spacing: 0; }
table.tabela-zebra thead th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--cor-texto-suave);
  font-weight: 600;
  background-color: #F8FAFC;
}
table.tabela-zebra tbody tr { border-bottom: 1px solid var(--cor-borda); }
table.tabela-zebra tbody tr:last-child { border-bottom: none; }
table.tabela-zebra tbody tr:nth-child(odd) { background-color: #FFFFFF; }
table.tabela-zebra tbody tr:hover { background-color: #F8FAFC; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background-color: currentColor; opacity: 0.8; }
.badge-desenvolvedor { background-color: #F5F3FF; color: #6D28D9; }
.badge-administrador { background-color: #F0F9FF; color: #0369A1; }
.badge-medico { background-color: #D1FAE5; color: #047857; }
.badge-recepcionista { background-color: #FFFBEB; color: #B45309; }

/* Badges de status de agendamento (verde/azul/vermelho) */
.badge-status-agendado { background-color: #F0F9FF; color: #0369A1; }
.badge-status-confirmado { background-color: #D1FAE5; color: #047857; }
.badge-status-em_espera { background-color: #FFFBEB; color: #B45309; }
.badge-status-em_atendimento { background-color: #F0F9FF; color: #0369A1; }
.badge-status-finalizado { background-color: #D1FAE5; color: #047857; }
.badge-status-finalizado::before {
  content: '\2713';
  width: auto;
  height: auto;
  background-color: transparent;
  font-size: 11px;
  font-weight: 700;
  opacity: 1;
}
.badge-status-cancelado { background-color: #FEF2F2; color: #B91C1C; }
.badge-status-faltou { background-color: #FFFBEB; color: #B45309; }

/* Badge de atraso: destaque vermelho usado junto ao status em agenda, agenda do dia e pacientes aguardando */
.badge-atraso { background-color: #B91C1C; color: #FFFFFF; }
.badge-atraso::before { display: none; }

.badge-retorno { background-color: #FFEDD5; color: #C2410C; }

/* Badges de status de prontuário: rascunho (amarelo), finalizado (verde), assinado (azul) */
.badge-prontuario-rascunho { background-color: #FFFBEB; color: #B45309; }
.badge-prontuario-finalizado { background-color: #D1FAE5; color: #047857; }
.badge-prontuario-assinado { background-color: #F0F9FF; color: #0369A1; }

/* Numeração da ordem de chegada: posição do paciente na fila de espera,
   definida pelo horário em que a recepção marcou "Chegou" (chegada_em) */
.numero-chegada {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  background-color: #047857;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Formulários */
.input-padrao {
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  width: 100%;
  background-color: #FFFFFF;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-padrao:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Campo de senha com botão de mostrar/ocultar */
.campo-senha-wrapper { position: relative; }
.campo-senha-wrapper .input-padrao { padding-right: 42px; }
.btn-alternar-senha {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--cor-texto-suave);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.btn-alternar-senha:hover { color: var(--cor-texto); background-color: #F1F5F9; }

/* Validação de campos obrigatórios (jsvalidator) */
.input-padrao.campo-invalido {
  border-color: var(--cor-alerta);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.mensagem-erro-campo {
  color: var(--cor-alerta);
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

/* Agenda: grade mensal */
.grade-semana-cabecalho {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.grade-semana-cabecalho span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto-suave);
}

.grade-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.celula-dia {
  aspect-ratio: 1;
  max-width: 76px;
  max-height: 76px;
  margin: 0 auto;
  width: 100%;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.celula-dia:hover { transform: scale(1.06); box-shadow: var(--sombra-card-hover); z-index: 1; }
.celula-dia-vazia { visibility: hidden; cursor: default; }
.celula-dia-vazia:hover { transform: none; box-shadow: none; }

.celula-dia-numero { font-size: 15px; font-weight: 700; color: var(--cor-texto); }
.celula-dia-indicador { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.celula-dia-indicador.status-disponivel { background-color: #10B981; }
.celula-dia-indicador.status-parcial { background-color: #F59E0B; }
.celula-dia-indicador.status-lotado { background-color: #EF4444; }
.celula-dia-indicador.status-sem_atendimento { background-color: #94A3B8; }

.celula-dia.status-disponivel { background-color: #ECFDF5; border-color: #A7F3D0; }
.celula-dia.status-parcial { background-color: #FFFBEB; border-color: #FDE68A; }
.celula-dia.status-lotado { background-color: #FEF2F2; border-color: #FECACA; }
.celula-dia.status-sem_atendimento { background-color: #F1F5F9; border-color: var(--cor-borda); }

.celula-dia.celula-dia-selecionada { border-color: var(--cor-primaria); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3); }

.celula-dia-contagem {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--cor-texto-suave);
}

.card-agendamento-dia {
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.card-agendamento-dia:hover { border-color: var(--cor-primaria); background-color: var(--cor-primaria-suave); }
.card-agendamento-dia.atrasado { border-color: #FECACA; border-left: 4px solid var(--cor-alerta); background-color: #FEF2F2; }
.card-agendamento-dia.atrasado:hover { background-color: #FEE2E2; }

/* Combo de busca (autocomplete simples) */
.combo-busca { position: relative; }
.combo-busca-sugestoes {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background-color: #FFFFFF;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  box-shadow: var(--sombra-card-hover);
  max-height: 220px;
  overflow-y: auto;
  margin-top: 4px;
}
.combo-busca-sugestao { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.combo-busca-sugestao:hover { background-color: var(--cor-primaria-suave); }

/* Barra de progresso (card "Agendamentos por Especialidade Hoje" do painel) */
.barra-progresso {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background-color: #F1F5F9;
  overflow: hidden;
}
.barra-progresso-preenchimento {
  height: 100%;
  background-color: var(--cor-primaria);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Item de alerta de atendimento atrasado no painel: borda vermelha de destaque */
.alerta-item-atrasado {
  border: 1px solid #FECACA;
  border-left: 4px solid var(--cor-alerta);
  background-color: #FEF2F2;
  border-radius: 8px;
  padding: 8px 10px;
}

/* Seletor de CID (busca com sugestões) no prontuário */
.cid-busca-wrapper { position: relative; }
.cid-sugestoes {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background-color: #FFFFFF;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  max-height: 220px;
  overflow-y: auto;
}
.cid-sugestoes button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}
.cid-sugestoes button:hover { background-color: var(--cor-primaria-suave); }
.cid-sugestoes .cid-sem-resultado { padding: 8px 12px; font-size: 13px; color: #94A3B8; }

/* Alertas / flash messages */
.alert { border-radius: 10px; padding: 12px 16px; font-size: 14px; margin-bottom: 16px; border: 1px solid transparent; }
.alert-sucesso { background-color: #D1FAE5; color: #047857; border-color: #A7F3D0; }
.alert-erro { background-color: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.alert-aviso { background-color: #FFFBEB; color: #B45309; border-color: #FDE68A; }