:root {
  --azul: #2563eb;
  --azul-escuro: #1e40af;
  --cinza-bg: #f1f5f9;
  --cinza-borda: #d8dee9;
  --cinza-texto: #475569;
  --verde: #059669;
  --vermelho: #dc2626;
  --amarelo: #d97706;
  --radius: 10px;
  --sombra: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cinza-bg);
  color: #1e293b;
  font-size: 14px;
}

/* Cabeçalho e abas */
.topo {
  background: #fff;
  border-bottom: 1px solid var(--cinza-borda);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topo h1 { font-size: 18px; margin: 0; }
.marca { display: flex; align-items: center; gap: 10px; }
.marca .logo { height: 40px; width: auto; display: block; }
.abas { display: flex; gap: 6px; }
.aba-btn {
  border: 1px solid transparent;
  background: transparent;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--cinza-texto);
}
.aba-btn:hover { background: var(--cinza-bg); }
.aba-btn.ativo { background: var(--azul); color: #fff; }

main { padding: 20px; max-width: 1200px; margin: 0 auto; }
.aba-secao { display: none; }
.aba-secao.ativo { display: block; }

/* Cartões e grids */
.card {
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--sombra);
}
.card h2 { margin: 0 0 14px; font-size: 16px; }
.grid-2 { display: grid; grid-template-columns: 380px 1fr; gap: 18px; align-items: start; }
.grid-cad { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.card-largo { grid-column: 1 / -1; }
@media (max-width: 900px) { .grid-2, .grid-cad { grid-template-columns: 1fr; } }

/* Formulários */
form label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--cinza-texto); font-size: 13px; }
form input, form select, form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--cinza-borda);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
form input:focus, form select:focus, form textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.linha-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.curto { max-width: 200px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.check-inline input { width: auto; display: inline; margin: 0; }
.form-titulo, form h3 { margin: 0 0 14px; font-size: 15px; }
.form-acoes { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

fieldset.terapeutas-resp { border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
fieldset.terapeutas-resp legend { font-weight: 600; color: var(--cinza-texto); font-size: 13px; padding: 0 4px; }
.checks { display: flex; flex-wrap: wrap; gap: 12px; }

/* Botões */
.btn-primario, .btn-secundario {
  border: none; border-radius: 8px; padding: 9px 18px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-escuro); }
.btn-secundario { background: #e2e8f0; color: #334155; }
.btn-secundario:hover { background: #cbd5e1; }
.btn-mini {
  border: 1px solid var(--cinza-borda); background: #fff; border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-size: 12px; color: #334155;
}
.btn-mini:hover { background: var(--cinza-bg); }
.btn-perigo { color: var(--vermelho); border-color: #fecaca; }
.btn-perigo:hover { background: #fef2f2; }
.btn-whats { color: #128c7e; border-color: #a7f3d0; }
.btn-whats:hover { background: #ecfdf5; }
.btn-whats:disabled { opacity: .5; cursor: default; }

/* Tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th, .tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eef2f7; }
.tabela th { color: var(--cinza-texto); font-weight: 600; background: #f8fafc; position: sticky; top: 0; }
.tabela td.acoes { white-space: nowrap; display: flex; gap: 6px; }
.tabela td.vazio { text-align: center; color: #94a3b8; padding: 20px; }
.tabela-rolavel { max-height: 460px; overflow: auto; border: 1px solid var(--cinza-borda); border-radius: 8px; margin-top: 12px; }

.badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-on { background: #dcfce7; color: #166534; }
.badge-off { background: #f1f5f9; color: #64748b; }

.status-sel { padding: 4px 6px; border-radius: 6px; border: 1px solid var(--cinza-borda); font-size: 12px; }
.status-agendado { background: #eff6ff; }
.status-realizado { background: #ecfdf5; }
.status-cancelado { background: #fef2f2; }
.status-falta { background: #fffbeb; }

/* Barra de filtros */
.barra-filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.barra-filtros label { font-weight: 600; color: var(--cinza-texto); font-size: 13px; }
.barra-filtros select, .barra-filtros input { padding: 7px 9px; border: 1px solid var(--cinza-borda); border-radius: 7px; font-size: 13px; }
.barra-filtros.compacta { margin-bottom: 0; }

/* Avisos de conflito / sucesso */
.aviso { margin: 12px 0; }
.ok-box { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 10px 12px; border-radius: 8px; font-weight: 600; }
.erro-box { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 10px 12px; border-radius: 8px; }

.conflito-box { background: #fff7ed; border: 1px solid #fdba74; border-radius: 8px; padding: 12px; }
.conflito-titulo { font-weight: 700; color: #9a3412; margin-bottom: 8px; }
.conflito-item { margin: 4px 0; font-size: 13px; color: #7c2d12; }
.conflito-item .tag {
  display: inline-block; font-size: 10px; text-transform: uppercase; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; margin-right: 6px; color: #fff;
}
.tipo-terapeuta .tag { background: #7c3aed; }
.tipo-sala .tag { background: #0891b2; }
.tipo-paciente .tag { background: #db2777; }
.tipo-disponibilidade .tag { background: #ca8a04; }
.sugestao-titulo { margin-top: 10px; font-weight: 700; color: #1e40af; font-size: 13px; }
.sugestao-linha { font-size: 13px; margin-top: 4px; color: #334155; }
.sugestao-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { background: #dbeafe; color: #1e40af; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }

/* Lote */
.dica { color: var(--cinza-texto); font-size: 13px; margin: 0 0 14px; }
.relatorio { margin-top: 16px; }
.relatorio h3 { font-size: 15px; }
.rel-item { padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; }
.rel-ok { background: #ecfdf5; color: #065f46; }
.rel-conflito { background: #fff7ed; }
.rel-erro { background: #fef2f2; color: #991b1b; }
#tabela-lote select, #tabela-lote input { margin: 0; padding: 6px 8px; }

/* Relatórios */
.rel-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 20px; }
.rel-card { flex: 1 1 120px; border-radius: 10px; padding: 14px 16px; color: #fff; min-width: 110px; }
.rel-num { font-size: 26px; font-weight: 700; line-height: 1; }
.rel-rotulo { font-size: 12px; opacity: .9; margin-top: 4px; }
.rel-azul { background: #2563eb; }
.rel-verde { background: #059669; }
.rel-amarelo { background: #d97706; }
.rel-vermelho { background: #dc2626; }
#aba-relatorios h3 { font-size: 14px; margin: 0 0 8px; color: var(--cinza-texto); }

/* Cadastros — layout com menu lateral */
.cad-layout { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: start; }
.cad-menu {
  display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--cinza-borda); border-radius: var(--radius);
  padding: 10px 8px; box-shadow: var(--sombra); position: sticky; top: 68px;
}
.cad-menu-btn {
  border: none; background: transparent; text-align: left; padding: 10px 14px;
  border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--cinza-texto); font-weight: 600;
}
.cad-menu-btn:hover { background: var(--cinza-bg); }
.cad-menu-btn.ativo { background: var(--azul); color: #fff; }
.cad-tela { display: none; }
.cad-tela.ativo { display: block; }
@media (max-width: 700px) {
  .cad-layout { grid-template-columns: 1fr; }
  .cad-menu { flex-direction: row; overflow-x: auto; position: static; }
}

/* Disponibilidade */
#tabela-disp { max-width: 560px; }
#tabela-disp select, #tabela-disp input { margin: 0; padding: 6px 8px; }

/* Toasts */
.toast-box { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast {
  background: #1e293b; color: #fff; padding: 11px 16px; border-radius: 8px; font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2); opacity: 0; transform: translateY(8px); transition: .25s; max-width: 360px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-ok { background: #065f46; }
.toast-erro { background: #991b1b; }
.toast-aviso { background: #9a3412; }

/* Login */
.login-overlay {
  position: fixed; inset: 0; background: linear-gradient(135deg, #1e40af, #2563eb);
  display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px;
}
.login-card {
  background: #fff; border-radius: 14px; padding: 32px; width: 100%; max-width: 360px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-logo { display: block; width: 150px; max-width: 70%; margin: 0 auto 10px; }
.login-sub { color: var(--cinza-texto); margin: 0 0 18px; font-size: 14px; text-align: center; }
.login-btn { width: 100%; margin-top: 8px; }

/* Barra do usuário no topo */
.usuario-bar { margin-left: auto; display: flex; align-items: center; gap: 12px; }
#usuario-atual { font-size: 13px; color: var(--cinza-texto); font-weight: 600; }

/* Calendário */
#calendario { background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: var(--sombra); }
.fc .fc-button-primary { background: var(--azul); border-color: var(--azul); }
.fc .fc-button-primary:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.fc-event { cursor: pointer; font-size: 12px; }
.evt-inativo { text-decoration: line-through; opacity: .75; }