* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --fundo: #F3F4F6;
  --texto: #1F1B2E;
  --texto-suave: #6B7280;
  --borda: #E5E7EB;
  --branco: #FFFFFF;
  --erro: #DC2626;
  --sucesso: #16A34A;

  /* Cores OFICIAIS da marca PsiCoWorking (Manual de Identidade Visual).
     Nunca mudam — usadas só onde a marca da plataforma aparece
     (selo/rodapé "PsiCoWorking"), independente da cor de cada psicóloga. */
  --marca-plataforma: #6A2BD9;
  --marca-plataforma-clara: #A97BEF;
  --marca-plataforma-escura: #3B0D6F;
  --marca-plataforma-lavanda: #EADDFC;

  /* Cor de marca DA CLÍNICA — por padrão igual à cor oficial acima,
     mas cada psicóloga pode trocar em Configurações. Definida via JS
     (document.documentElement.style.setProperty) a partir de psi_config.
     Todo o resto da interface (botões, menu ativo, tabelas) usa esta. */
  --cor-marca: #6A2BD9;
  --cor-marca-clara: #A97BEF;
  --cor-marca-escura: #3B0D6F;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fundo);
  color: var(--texto);
}

/* ── Login (tela dividida) ──────────────────── */
.tela-login-split {
  min-height: 100vh;
  display: flex;
}

.painel-marca {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.22), transparent 40%),
    radial-gradient(circle at 90% 10%, var(--cor-marca-clara) 0%, transparent 45%),
    radial-gradient(circle at 80% 95%, rgba(0,0,0,0.35), transparent 55%),
    linear-gradient(135deg, var(--cor-marca-clara) 0%, var(--cor-marca) 45%, var(--cor-marca-escura) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: white;
}
.painel-marca-conteudo { max-width: 380px; position: relative; z-index: 1; }
.painel-marca-conteudo h1 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.painel-marca-conteudo p { font-size: 15px; opacity: 0.85; line-height: 1.6; margin-bottom: 40px; }

/* Etiqueta que deixa claro qual tela é essa (paciente x psicóloga) —
   mesma classe usada no Portal do Paciente, pra ficarem no mesmo
   padrão mas sempre distinguíveis. */
.etiqueta-tipo-portal {
  display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: rgba(255,255,255,0.18); color: white; padding: 5px 12px; border-radius: 20px; margin-bottom: 22px;
}
/* Foto da profissional + selo da logo, em destaque no login — pra
   quem estiver entrando reconhecer de cara a clínica/psicóloga. */
.marca-clinica-login { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.foto-profissional-login-caixa { position: relative; flex-shrink: 0; }
.foto-profissional-login { height: 64px; width: 64px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.5); display: block; }
.avatar-clinica-login { height: 64px; width: 64px; border-radius: 50%; background: rgba(255,255,255,0.22); border: 3px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; color: white; }
.selo-logo-login { position: absolute; bottom: -3px; right: -3px; height: 26px; width: 26px; border-radius: 7px; object-fit: cover; border: 2px solid var(--cor-marca-escura); background: white; }
.nome-clinica-login { font-weight: 700; font-size: 18px; color: white; }

/* Selo/wordmark oficial "PsiCoWorking" — sempre com as cores fixas
   da marca (Manual de Identidade Visual), nunca com a cor da clínica. */
.logo-plataforma {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  background: linear-gradient(90deg, var(--marca-plataforma-escura), var(--marca-plataforma) 55%, var(--marca-plataforma-clara));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--marca-plataforma);
}
.cartao-login .logo-plataforma { display: block; margin-bottom: 32px; }

.painel-formulario {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--branco);
}

.cartao-login {
  width: 100%;
  max-width: 340px;
}

.cartao-login h2 { font-size: 24px; margin-bottom: 4px; }
.subtitulo { color: var(--texto-suave); margin-bottom: 24px; font-size: 14px; }

.cartao-login label { display: block; text-align: left; font-size: 13px; margin: 14px 0 4px; color: var(--texto-suave); }
.cartao-login input, .modal input, .modal textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 14px;
}
.cartao-login input:focus, .modal input:focus, .modal textarea:focus {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 3px rgba(106, 43, 217, 0.15);
}

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.cartao-login button[type="submit"] {
  width: 100%;
  margin-top: 24px;
  background: var(--cor-marca);
  color: white;
  padding: 13px;
  transition: background .15s;
}
.cartao-login button[type="submit"]:hover { background: var(--cor-marca-escura); }
.cartao-login button[type="submit"]:disabled { opacity: 0.6; cursor: default; }

.mensagem-erro { color: var(--erro); font-size: 13px; margin-top: 10px; }

.link-esqueci-senha {
  display: block;
  width: 100%;
  background: none;
  color: var(--cor-marca);
  font-weight: 500;
  font-size: 13px;
  padding: 12px 0 0;
  text-align: center;
}
.link-esqueci-senha:hover { text-decoration: underline; }

/* Tela central genérica (usada em "Carregando..." e "Acesso não permitido") */
.tela-central {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tela-central .cartao-login {
  background: var(--branco);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  text-align: center;
}

@media (max-width: 768px) {
  .tela-login-split { flex-direction: column; }
  .painel-marca { flex: none; padding: 32px 24px; text-align: center; }
  .painel-marca-conteudo h1 { font-size: 26px; margin-bottom: 8px; }
  .painel-marca-conteudo p { display: none; }
  .painel-formulario { flex: none; padding: 32px 24px; }
}

/* ── Layout admin ──────────────────────────── */
.layout-admin { display: flex; min-height: 100vh; background: var(--fundo); }

.barra-lateral {
  width: 260px;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,0.10), transparent 45%),
    linear-gradient(165deg, var(--cor-marca-clara) 0%, var(--cor-marca) 45%, var(--cor-marca-escura) 100%);
  color: rgba(255,255,255,0.92);
  display: flex;
  flex-direction: column;
  padding: 26px 0 0;
  flex-shrink: 0;
  box-shadow: 2px 0 24px rgba(0,0,0,0.08);
}

.marca-barra-lateral {
  padding: 0 24px 24px;
}

/* Versão negativa (branca) da marca — usada sobre fundo colorido,
   conforme o Manual de Identidade Visual PsiCoWorking. */
.logo-plataforma-negativa {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: rgba(255,255,255,0.95);
}

/* Selo fixo "PsiCoWorking" no rodapé do menu — sempre visível, mesmo
   quando a marca da clínica ocupa o topo (pedido da usuária). */
.selo-rodape {
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.selo-rodape .logo-plataforma-negativa { font-size: 13px; opacity: 0.75; }

.marca-barra-lateral-clinica {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  margin-bottom: 14px;
  font-weight: 700;
  font-size: 15.5px;
  color: white;
}

.avatar-marca, .avatar-usuario {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: rgba(255,255,255,0.92);
  color: var(--cor-marca-escura);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.avatar-usuario { border-radius: 50%; width: 36px; height: 36px; font-size: 14px; }
.avatar-usuario-foto { object-fit: cover; }

.barra-lateral nav { flex: 1; padding: 4px 14px; display: flex; flex-direction: column; gap: 3px; }

.item-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .12s, color .12s;
}
.item-menu:hover { background: rgba(255,255,255,0.10); color: white; }
.item-menu-ativo, .item-menu-ativo:hover {
  background: rgba(255,255,255,0.95);
  color: var(--cor-marca-escura);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.icone-lucide { flex-shrink: 0; }
.item-menu .icone-lucide { color: rgba(255,255,255,0.72); }
.item-menu-ativo .icone-lucide { color: var(--cor-marca-escura); }

.rodape-barra-lateral {
  padding: 18px 22px;
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  gap: 11px;
}
.rodape-info { min-width: 0; flex: 1; }
.email-usuario { font-size: 12px; color: rgba(255,255,255,0.8); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-sair { display: flex; align-items: center; gap: 5px; background: none; color: #FFD1D1; padding: 0; font-size: 12px; font-weight: 600; }
.botao-sair:hover { color: white; }

.area-principal { flex: 1; padding: 36px 40px; min-width: 0; }

.conteudo { max-width: 900px; }

/* ── Dashboard ─────────────────────────────── */
.grade-cartoes-stat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.cartao-stat {
  background: var(--branco);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cabecalho-cartao-stat { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.titulo-cartao-stat { font-size: 13px; color: var(--texto-suave); }
.icone-cartao-stat {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--marca-plataforma-lavanda);
  color: var(--cor-marca);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.valor-cartao-stat { font-size: 28px; font-weight: 700; line-height: 1.1; }
.legenda-cartao-stat { font-size: 12px; color: var(--texto-suave); margin-top: 4px; }

.cartao-secao {
  background: var(--branco);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin-bottom: 20px;
}
.titulo-cartao-secao { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.descricao-cartao-secao { font-size: 13px; color: var(--texto-suave); margin: 4px 0 16px; }

.linha-atividade {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--borda);
}
.linha-atividade:last-child { border-bottom: none; }
.info-atividade { flex: 1; min-width: 0; }
.badges-atividade { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.badge-atividade {
  font-size: 11px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 20px;
  padding: 2px 10px;
  color: var(--texto-suave);
}

/* ── Financeiro ────────────────────────────── */
.seletor-ano { display: flex; gap: 8px; margin-bottom: 16px; }
.botao-ano { background: var(--branco); color: var(--texto-suave); border: 1px solid var(--borda) !important; font-size: 13px; padding: 7px 16px; }
.botao-ano-ativo, .botao-ano-ativo:hover { background: var(--cor-marca); color: white; border-color: var(--cor-marca) !important; }

.abas-financeiro { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.aba-financeiro {
  background: none; color: var(--texto-suave); font-size: 13px; font-weight: 500;
  padding: 10px 14px; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent !important;
}
.aba-financeiro-ativa, .aba-financeiro-ativa:hover { color: var(--cor-marca); border-bottom: 2px solid var(--cor-marca) !important; background: none; }

.faixa-meses { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.botao-mes { background: var(--branco); color: var(--texto-suave); border: 1px solid var(--borda) !important; font-size: 13px; padding: 7px 14px; text-transform: capitalize; }
.botao-mes-ativo, .botao-mes-ativo:hover { background: var(--cor-marca); color: white; border-color: var(--cor-marca) !important; }

.filtro-tipo-lanc { display: flex; gap: 8px; margin-bottom: 16px; }

.grade-resumo-mes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.cartao-resumo { border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.cartao-resumo.receita { background: #ECFDF5; }
.cartao-resumo.despesa { background: #FEF2F2; }
.cartao-resumo.saldo { background: var(--marca-plataforma-lavanda); }
.rotulo-resumo { font-size: 12px; color: var(--texto-suave); }
.cartao-resumo.receita .valor-resumo { color: var(--sucesso); }
.cartao-resumo.despesa .valor-resumo { color: var(--erro); }
.cartao-resumo.saldo .valor-resumo { color: var(--cor-marca-escura); }
.valor-resumo { font-size: 20px; font-weight: 700; }

.cabecalho-secao-lanc { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cabecalho-pacote-paciente {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  transition: background .15s; margin-bottom: 8px;
}
.cabecalho-pacote-paciente:hover { background: var(--marca-plataforma-lavanda); }
.titulo-secao-lanc { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.titulo-secao-receita, .total-secao-receita { color: var(--sucesso); }
.titulo-secao-despesa, .total-secao-despesa { color: var(--erro); }
.total-secao-lanc { font-weight: 700; font-size: 13px; }

.linha-lancamento {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--borda);
}
.linha-lancamento:last-child { border-bottom: none; }
.info-lancamento { flex: 1; min-width: 0; }
.descricao-lancamento { font-size: 14px; font-weight: 500; }
.detalhe-lancamento { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.etiqueta-status-lanc { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.etiqueta-pendente { background: #FEF3C7; color: #92400E; }
.etiqueta-recebido, .etiqueta-pago { background: #DCFCE7; color: var(--sucesso); }
.valor-lancamento { font-weight: 700; font-size: 14px; min-width: 90px; text-align: right; }
.valor-receita { color: var(--sucesso); }
.valor-despesa { color: var(--erro); }
.botao-icone {
  background: none; color: var(--texto-suave); padding: 6px; border-radius: 6px;
}
.botao-icone:hover { background: var(--fundo); }
.botao-icone-perigo:hover { background: #FEE2E2; color: var(--erro); }

/* ── Financeiro: Pacotes & Sessões ─────────────── */
.cartao-pacote {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borda);
}
.cartao-pacote:last-child { border-bottom: none; }
.info-pacote { flex: 1; min-width: 0; }
.barra-progresso {
  background: var(--fundo);
  border-radius: 6px;
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
}
.barra-progresso-preenchimento {
  background: var(--cor-marca);
  height: 100%;
  border-radius: 6px;
  transition: width .2s;
}

/* ── Financeiro: Acompanhamento Geral ──────────── */
.linha-acompanhamento {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borda);
  cursor: pointer;
  transition: background .12s;
}
.linha-acompanhamento:last-child { border-bottom: none; }
.linha-acompanhamento:hover { background: var(--fundo); }
.metricas-acompanhamento { display: flex; gap: 20px; flex-wrap: wrap; }
.metrica { text-align: center; min-width: 56px; }
.metrica-valor { display: block; font-size: 14px; font-weight: 700; }
.metrica-rotulo { font-size: 10px; color: var(--texto-suave); }
.metrica-receita { color: var(--sucesso); }
.metrica-pendente { color: #d97706; }

/* ── Financeiro: Controle de Sessões (paciente) ── */
.barra-controle-sessoes {
  display: flex; align-items: center; gap: 14px;
  background: var(--cor-marca);
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.botao-voltar-sessoes, .botao-imprimir-sessoes {
  background: rgba(255,255,255,0.2); color: white; border: none !important;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.botao-voltar-sessoes:hover, .botao-imprimir-sessoes:hover { background: rgba(255,255,255,0.32); }
.titulo-controle-sessoes { flex: 1; color: white; }
.titulo-controle-sessoes strong { display: block; font-size: 16px; }
.titulo-controle-sessoes span { font-size: 12px; opacity: 0.85; }

.linha-sessao {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--borda);
}
.linha-sessao:last-child { border-bottom: none; }
.select-status-sessao {
  padding: 6px 10px; border: 1px solid var(--borda); border-radius: 8px;
  font-size: 12px; font-weight: 600; background: var(--branco);
}

/* ── Financeiro: Orçamento ─────────────────────── */
.form-servico-orcamento {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 16px;
  margin: 12px 0 16px;
}
.tabela-servicos-scroll { overflow-x: auto; }
.tabela-servicos { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.tabela-servicos th {
  text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--texto-suave); border-bottom: 2px solid var(--borda);
}
.tabela-servicos td { padding: 10px; border-bottom: 1px solid var(--borda); }
.tabela-servicos tr:last-child td { border-bottom: none; }
.lista-selecao-servicos { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.item-selecao-servico {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border: 1.5px solid var(--borda); border-radius: 10px;
  cursor: pointer; transition: all .15s; font-size: 13px; font-weight: 500;
}
.item-selecao-ativo { border-color: var(--cor-marca); background: var(--marca-plataforma-lavanda); }

/* ── Avisos e índice alfabético — aba Pacotes & Sessões ────────────── */
.aviso-pacotes { border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; }
.aviso-pacotes.aviso-amarelo { background: #FEF9C3; border: 1px solid #FDE047; }
.aviso-pacotes.aviso-laranja { background: #FFF7ED; border: 1px solid #FED7AA; }
.aviso-pacotes .aviso-titulo { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 4px; }
.aviso-pacotes.aviso-amarelo .aviso-titulo { color: #78350F; }
.aviso-pacotes.aviso-laranja .aviso-titulo { color: #7C2D12; }
.aviso-pacotes .aviso-subtitulo { font-size: 13px; color: #6B7280; margin-bottom: 8px; }
.aviso-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-aviso { border-radius: 20px; padding: 3px 10px; font-size: 13px; font-weight: 500; }
.chip-aviso.chip-amarelo { background: #FDE68A; color: #78350F; }
.chip-aviso.chip-amarelo-esc { background: #F59E0B; color: white; }
.chip-aviso.chip-laranja { background: #FED7AA; color: #7C2D12; }
.chip-aviso.chip-laranja-esc { background: #F97316; color: white; }
.indice-letras { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.botao-letra {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid #D1D5DB; background: white; color: #374151;
  font-weight: 600; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s, color .15s;
}
.botao-letra:hover { border-color: var(--cor-marca); color: var(--cor-marca); }
.botao-letra.botao-letra-ativo { border-color: var(--cor-marca); background: var(--cor-marca); color: white; }
/* ─────────────────────────────────────────────────────────────────── */

.aviso-modulo-futuro {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--texto-suave);
  background: var(--fundo);
  border-radius: 10px;
  padding: 12px 16px;
}

.cabecalho-secao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.cabecalho-secao h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }

.botao-primario { background: var(--cor-marca); color: white; }
.botao-primario:hover { background: var(--cor-marca-escura); }
.botao-primario:disabled { opacity: 0.6; cursor: default; }

.botao-secundario { background: var(--fundo); color: var(--texto); border: 1px solid var(--borda) !important; }
.botao-perigo { background: #FEE2E2; color: var(--erro); }

.texto-vazio { color: var(--texto-suave); font-size: 14px; }

/* ── Pacientes: cabeçalho, busca, filtros ────── */
.conteudo-larga { max-width: 1000px; }
.subtitulo-pagina { font-size: 13px; color: var(--texto-suave); margin-top: 4px; }
.acoes-cabecalho { display: flex; gap: 10px; flex-wrap: wrap; }
.acoes-cabecalho button { display: flex; align-items: center; gap: 7px; }

.barra-filtros { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.campo-busca { flex: 1; min-width: 220px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; }
.campo-busca:focus { outline: none; border-color: var(--cor-marca); }
.botao-filtro { background: var(--branco); color: var(--texto-suave); border: 1px solid var(--borda) !important; font-size: 13px; padding: 9px 16px; }
.botao-filtro-ativo, .botao-filtro-ativo:hover { background: var(--cor-marca); color: white; border-color: var(--cor-marca) !important; }

/* ── Pacientes: grupos por status ─────────────── */
.grupo-status { margin-bottom: 26px; }
.titulo-grupo-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texto-suave); margin-bottom: 10px;
}
.ponto-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ponto-ativo { background: var(--sucesso); }
.ponto-alta { background: var(--texto-suave); }
.ponto-inativo { background: var(--erro); }
.ponto-pendente { background: #F59E0B; }

.cartao-lista-pacientes {
  background: var(--branco);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.linha-paciente {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borda);
  cursor: pointer;
  transition: background .12s;
}
.linha-paciente:last-child { border-bottom: none; }
.linha-paciente:hover { background: var(--fundo); }
.avatar-paciente {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--marca-plataforma-lavanda);
  color: var(--cor-marca-escura);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.info-paciente { flex: 1; min-width: 0; }
.nome-paciente { font-weight: 500; font-size: 14px; }
.email-paciente { font-size: 13px; color: var(--texto-suave); }

.etiqueta-ativo, .etiqueta-inativo {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
}
.etiqueta-ativo { background: #DCFCE7; color: var(--sucesso); }
.etiqueta-inativo { background: #F3F4F6; color: var(--texto-suave); }

/* ── Modal ─────────────────────────────────── */
.sobreposicao {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 100;
}
.modal {
  background: var(--branco);
  border-radius: 12px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
}
.modal h3 { margin-bottom: 16px; font-size: 18px; }
.modal label { display: block; font-size: 13px; margin: 12px 0 4px; color: var(--texto-suave); }
.modal p { font-size: 14px; margin-bottom: 8px; line-height: 1.5; }
.campo-link { min-height: 70px; margin-top: 8px; font-size: 12px; resize: none; }

.modal-largo { max-width: 680px; max-height: 88vh; overflow-y: auto; }

/* Wizard de vários passos (Nova Ferramenta / Fábula / Psicoeducação) */
.cabecalho-wizard-recurso {
  margin: -28px -28px 20px -28px; padding: 20px 28px; border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, var(--cor-marca), var(--cor-marca-clara, var(--cor-marca)));
  color: white; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  position: sticky; top: -28px; z-index: 2;
}
.titulo-wizard-recurso { font-size: 18px; font-weight: 700; }
.subtitulo-wizard-recurso { font-size: 12px; opacity: 0.85; margin-top: 3px; }
.circulo-passo-wizard {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); flex-shrink: 0;
}
.circulo-passo-ativo { background: white; color: var(--cor-marca); }
.circulo-passo-feito { background: rgba(255,255,255,0.5); color: white; }
.botao-fechar-wizard { background: none; border: none; cursor: pointer; color: white; display: flex; }
.corpo-wizard-recurso label { margin-top: 12px; }
.rotulo-mini {
  font-size: 11px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 10px;
}
.cartao-bloco-wizard { border: 1.5px solid #E5E7EB; border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.cabecalho-bloco-wizard {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--marca-plataforma-lavanda); border-bottom: 1px solid #E5E7EB;
}
.corpo-bloco-wizard { padding: 14px 16px; }
.cartao-resumo-wizard { background: var(--marca-plataforma-lavanda); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
.linha-resumo-bloco {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: white; border: 1px solid #E5E7EB; border-radius: 10px; margin-bottom: 8px;
}

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

/* ── Formulário de paciente (2 colunas) ───────── */
.grade-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.grade-2col label { display: block; font-size: 13px; margin: 12px 0 4px; color: var(--texto-suave); }
.grade-2col input, .grade-2col select { width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; }
.grade-2col input:focus, .grade-2col select:focus { outline: none; border-color: var(--cor-marca); }
.campo-largura-total { grid-column: span 2; }
.opcional { font-size: 11px; color: var(--texto-suave); font-weight: 400; }
.titulo-secao-form {
  font-size: 12px; font-weight: 700; color: var(--cor-marca);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--marca-plataforma-lavanda);
  padding-bottom: 6px; margin: 14px 0 4px;
}

.pills-status { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pill-status {
  padding: 7px 14px; border-radius: 20px; font-size: 13px;
  border: 1.5px solid var(--cor-pill) !important;
  background: white; color: var(--cor-pill);
}
.pill-status-ativa { background: var(--cor-pill); color: white; }

.campo-com-mic { position: relative; }
.campo-com-mic textarea { padding-right: 40px; }
.botao-mic {
  position: absolute; right: 8px; top: 8px;
  background: var(--marca-plataforma-lavanda);
  color: var(--cor-marca);
  border: none; border-radius: 7px; padding: 6px 8px;
}
.botao-mic-gravando { background: var(--erro); color: white; }

.cartao-credenciais {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
}
.titulo-credenciais { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.texto-credenciais { font-size: 13px; color: var(--texto-suave); margin-bottom: 12px; }

/* ── Perfil do paciente: tela cheia com abas ──────── */
.cabecalho-perfil-paciente {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.botao-voltar-perfil { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.titulo-perfil-paciente { flex: 1; min-width: 200px; }
.titulo-perfil-paciente h2 { font-size: 22px; font-weight: 700; }
.abas-perfil-paciente { margin-bottom: 22px; flex-wrap: wrap; }
.acoes-perfil-paciente { justify-content: flex-start; margin-top: 16px; }

/* ── Perfil do paciente: aba Módulos ──────────────── */
.pills-filtro-modulos { margin-bottom: 14px; }
.campo-busca-modulos { width: 100%; margin-bottom: 22px; }
.linha-modulo {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--borda);
  border-left: 3px solid var(--cor-cat, transparent);
}
.linha-modulo:last-child { border-bottom: none; }
.toggle-modulo {
  width: 44px; height: 24px; border-radius: 12px; border: none;
  background: var(--borda); position: relative; flex-shrink: 0; transition: background .2s;
}
.toggle-modulo-ativo { background: var(--cor-marca); }
.toggle-modulo-bola {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: left .2s;
}
.toggle-modulo-ativo .toggle-modulo-bola { left: 22px; }

/* ── Recursos Terapêuticos ─────────────────────────── */
.campo-busca-recursos { width: 100%; margin-bottom: 20px; }
.etiqueta-categoria-recurso {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 3px 10px; border-radius: 12px;
  color: var(--cor-cat, var(--cor-marca)); background: var(--bg-cat, var(--fundo));
  margin-bottom: 6px;
}
.grade-cartoes-recursos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.cartao-recurso {
  background: var(--branco); border: 1.5px solid color-mix(in srgb, var(--cor-cat, var(--borda)) 35%, transparent);
  border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}
.cabecalho-cartao-recurso { display: flex; align-items: center; gap: 10px; }
.icone-cartao-recurso {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--cor-cat, var(--cor-marca)); color: white;
  display: flex; align-items: center; justify-content: center;
}
.titulo-cartao-recurso { font-weight: 600; font-size: 14px; }
.descricao-cartao-recurso { font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; margin: 0; flex: 1; }
.acoes-cartao-recurso { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--borda); padding-top: 10px; }
.acoes-cartao-recurso .botao-secundario { flex: 1; font-size: 12px; padding: 7px 10px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.botao-enviar-recurso { width: 100%; justify-content: center; font-size: 12.5px; padding: 8px 10px; }
.texto-visualizar-recurso { font-size: 13.5px; color: var(--texto-suave); line-height: 1.6; }
.aviso-preview-paciente {
  display: flex; align-items: center; gap: 10px;
  background: var(--marca-plataforma-lavanda); color: var(--cor-marca-escura);
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px;
  margin: 14px 0;
}

@media (max-width: 640px) {
  .grade-2col { grid-template-columns: 1fr; }
  .campo-largura-total { grid-column: span 1; }
}

/* ── Agenda ────────────────────────────────── */
.cartao-conectar {
  background: var(--branco);
  border-radius: 12px;
  padding: 32px;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cartao-conectar h2 { margin-bottom: 12px; }
.cartao-conectar p { color: var(--texto-suave); font-size: 14px; margin-bottom: 20px; line-height: 1.5; }

.navegador-semana {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.botao-seta {
  background: var(--branco);
  border: 1px solid var(--borda) !important;
  width: 34px; height: 34px;
  border-radius: 8px;
  font-size: 16px;
  color: var(--cor-marca);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.botao-seta:hover { background: var(--fundo); }
.rotulo-semana {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  min-width: 140px;
}
.botao-hoje {
  background: var(--fundo);
  color: var(--cor-marca);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}
.botao-hoje:hover { background: var(--borda); }

.texto-vazio-dia { padding: 12px 18px; font-size: 13px; color: var(--texto-suave); }

.grupos-agenda { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }

.cartao-dia {
  background: var(--branco);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
}

.cabecalho-dia {
  font-weight: 600;
  font-size: 14px;
  color: var(--cor-marca);
  background: var(--fundo);
  padding: 10px 18px;
  border-bottom: 1px solid var(--borda);
}

.lista-eventos { list-style: none; }
.item-evento {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}
.item-evento:last-child { border-bottom: none; }
.item-evento-hora {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  min-width: 52px;
}
.item-evento-titulo { font-size: 14px; flex: 1; min-width: 160px; }
.item-evento-link { font-size: 12px; color: var(--cor-marca); white-space: nowrap; }

.campo-descricao { min-height: 60px; resize: vertical; }

/* ── Configurações ─────────────────────────── */
.cartao-config {
  background: var(--branco);
  border-radius: 12px;
  padding: 28px;
  max-width: 460px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cartao-config label { display: block; font-size: 13px; color: var(--texto-suave); margin: 16px 0 6px; }
.cartao-config label:first-child { margin-top: 0; }
.cartao-config input[type="text"],
.cartao-config input:not([type]) { width: 100%; }
.cartao-config button { margin-top: 24px; }

.linha-cor { display: flex; align-items: center; gap: 12px; }
.seletor-cor { width: 48px; height: 40px; padding: 2px; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; }
.valor-cor { font-size: 13px; color: var(--texto-suave); font-family: monospace; }

.preview-logo { max-width: 140px; max-height: 80px; border-radius: 8px; margin-bottom: 10px; display: block; }
.preview-foto { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; margin-bottom: 10px; display: block; }
.dica-campo { font-size: 12px; color: var(--texto-suave); margin-top: 6px; }
.mensagem-sucesso { color: var(--sucesso); font-size: 13px; margin-top: 10px; }

.logo-barra-lateral { width: 38px; height: 38px; object-fit: contain; border-radius: 10px; }

@media (max-width: 640px) {
  .layout-admin { flex-direction: column; }
  .barra-lateral { width: 100%; flex-direction: row; align-items: center; padding: 12px 16px; }
  .barra-lateral nav { flex: none; }
  .rodape-barra-lateral { border: none; padding: 0; margin-left: auto; }
  .area-principal { padding: 20px; }
}

@keyframes girar {
  to { transform: rotate(360deg); }
}