/* =========================================================
   CRM de Visitas Comerciais — FertGroup
   Design tokens conforme especificação (paleta rosa/cinza/creme)
   ========================================================= */
:root{
  --pink-1:#C4547A;
  --pink-2:#9E3F60;
  --pink-solid:#C4547A;
  --ink:#3D3D3D;
  --cream:#FAF6F3;
  --white:#FFFFFF;
  --border:#EDE3DE;
  --muted:#8A8380;

  --green:#3FA34D;
  --green-bg:#E7F5EA;
  --amber:#E0A82E;
  --amber-bg:#FCF3DD;
  --red:#D9534F;
  --red-bg:#FBEAE9;
  --blue:#4A90D9;
  --blue-bg:#E9F1FB;

  --stage-lead:#8791A0;
  --stage-contato:#4A90D9;
  --stage-agendada:#8E6FCE;
  --stage-realizada:#3FA7A0;
  --stage-proposta:#E0A82E;
  --stage-ganho:#3FA34D;
  --stage-perdido:#D9534F;
  --stage-acompanhamento:#C4547A;

  --radius:10px;
  --shadow:0 2px 10px rgba(61,61,61,0.08);
  --shadow-lg:0 8px 30px rgba(61,61,61,0.18);

  --header-h:64px;
  --indicators-h:64px;
  --tabs-h:48px;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{
  height:100%;
  margin:0;
  overflow:hidden;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
}
h1,h2{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:14px;}

/* ---------------- BOTÕES ---------------- */
.btn{
  border:none;
  border-radius:8px;
  padding:11px 20px;
  font-size:14px;
  font-weight:600;
  transition:filter .15s ease, transform .05s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:linear-gradient(135deg,var(--pink-1),var(--pink-2));
  color:#fff;
}
.btn-primary:hover{filter:brightness(1.06);}
.btn-secondary{
  background:var(--white);
  color:var(--pink-2);
  border:1.5px solid var(--pink-1);
}
.btn-secondary:hover{background:#fff5f8;}
.btn-danger{
  background:var(--white);
  color:var(--red);
  border:1.5px solid var(--red);
}
.btn-danger:hover{background:var(--red-bg);}
.btn-block{width:100%;}

/* ---------------- TELAS DE AUTENTICAÇÃO ---------------- */
.auth-screen{
  height:100vh;
  width:100vw;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,var(--cream) 0%, #f3e4ea 100%);
  padding:20px;
}
.auth-card{
  background:var(--white);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  padding:36px 32px;
  width:100%;
  max-width:400px;
}
.auth-logo{
  height:34px;
  display:block;
  margin:0 auto 24px;
}
.auth-card h1{
  font-size:20px;
  text-align:center;
  color:var(--ink);
  margin-bottom:8px;
}
.auth-sub{
  text-align:center;
  color:var(--muted);
  font-size:13.5px;
  margin:0 0 24px;
  line-height:1.5;
}
.auth-card form{display:flex;flex-direction:column;gap:6px;}
.auth-card label{font-size:13px;font-weight:600;color:var(--ink);margin-top:10px;}
.auth-card input{
  padding:11px 12px;
  border:1.5px solid var(--border);
  border-radius:8px;
  outline:none;
}
.auth-card input:focus{border-color:var(--pink-1);}
.auth-card .btn{margin-top:18px;}
.auth-error{
  background:var(--red-bg);
  color:var(--red);
  padding:9px 12px;
  border-radius:8px;
  font-size:13px;
  margin-top:10px;
}
/*
.auth-hint{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
  text-align:center;
  line-height:1.6;
}
.auth-hint code{
  background:#f4eeec;
  padding:2px 6px;
  border-radius:5px;
  color:var(--pink-2);
}
*/

/* ---------------- LAYOUT PRINCIPAL ---------------- */
#app{
  height:100vh;
  display:flex;
  flex-direction:column;
}
.app-header{
  height:var(--header-h);
  flex:0 0 auto;
  background:linear-gradient(120deg,var(--pink-1),var(--pink-2));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}
.header-left h1{
  font-size:17px;
  font-weight:700;
  letter-spacing:.2px;
}
.header-status{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  opacity:.92;
  margin-top:2px;
}
.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:#8CE9A0;
  box-shadow:0 0 0 2px rgba(255,255,255,0.25);
}
.header-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.header-user{
  font-size:12.5px;
  background:rgba(255,255,255,0.16);
  padding:6px 12px;
  border-radius:20px;
}
.header-logo{
  height:33px;
  background:#fff;
  border-radius:50%;
  padding:4px;
}

/* ---------------- INDICADORES ---------------- */
.indicators-strip{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:8px;
  padding:10px 16px;
  background:var(--white);
  border-bottom:1px solid var(--border);
}
.indicator{
  border-radius:8px;
  padding:8px 6px;
  text-align:center;
  background:var(--cream);
  border-top:3px solid var(--stage-color, var(--pink-1));
}
.indicator .count{
  font-size:19px;
  font-weight:700;
  color:var(--ink);
  line-height:1.1;
}
.indicator .label{
  font-size:10px;
  color:var(--muted);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------------- ABAS ---------------- */
.tabs{
  flex:0 0 auto;
  display:flex;
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:0 12px;
  gap:4px;
}
.tab-btn{
  background:none;
  border:none;
  border-bottom:3px solid transparent;
  padding:12px 16px;
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
}
.tab-btn.active{
  color:var(--pink-2);
  border-bottom-color:var(--pink-1);
}
.tab-btn:hover{color:var(--pink-2);}

/* ---------------- CONTEÚDO DAS ABAS ---------------- */
.tab-content{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  position:relative;
}
.tab-pane{
  display:none;
  height:100%;
  overflow-y:auto;
}
.tab-pane.active{display:block;}
#tab-pipeline.active{display:flex;flex-direction:column;}

/* ---------------- BOARD (KANBAN) ---------------- */
.board{
  flex:1;
  display:flex;
  gap:8px;
  padding:10px;
  height:100%;
  overflow:hidden;
}
.board-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#F2EBE7;
  border-radius:10px;
  overflow:hidden;
}
.board-col-head{
  padding:8px 9px;
  font-size:11.5px;
  font-weight:700;
  color:#fff;
  background:var(--stage-color);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
}
.board-col-head span:first-child{
  overflow-wrap:break-word;
  line-height:1.2;
}
.board-col-count{
  flex:0 0 auto;
  background:rgba(255,255,255,0.28);
  border-radius:10px;
  padding:1px 7px;
  font-size:10.5px;
}
.board-col-body{
  flex:1;
  overflow-y:auto;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.board-col-body.drag-over{
  background:rgba(196,84,122,0.08);
}

.card{
  background:#fff;
  border-radius:8px;
  padding:10px 12px;
  box-shadow:var(--shadow);
  border-left:4px solid var(--stage-color);
  cursor:grab;
}
.card:active{cursor:grabbing;}
.card.dragging{opacity:.4;}
.card h3{
  margin:0 0 3px;
  font-size:13.5px;
  color:var(--ink);
}
.card .card-sub{
  font-size:11.5px;
  color:var(--muted);
  margin-bottom:6px;
}
.card .tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:6px;
}
.tag{
  font-size:10px;
  font-weight:600;
  padding:2px 7px;
  border-radius:10px;
  background:var(--blue-bg);
  color:var(--blue);
}
.card .notes{
  font-size:11.5px;
  color:#6b6663;
  margin-bottom:6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.badge-followup{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:10px;
  margin-bottom:6px;
}
/* Potencial: rotulo amigavel no card (a chave A/B/C fica para o Excel). */
.badge-potential{
  font-size:10px;
  font-weight:600;
  padding:2px 7px;
  border-radius:10px;
  background:#F0E8F8;
  color:#7A4FBF;
}
.badge-followup.ok{background:var(--green-bg);color:var(--green);}
.badge-followup.soon{background:var(--amber-bg);color:var(--amber);}
.badge-followup.late{background:var(--red-bg);color:var(--red);}
.card .card-by{
  font-size:10px;
  color:#a89f9c;
  text-align:right;
}

/* ---------------- FORMULÁRIOS ---------------- */
.visit-form, .export-card{
  max-width:760px;
  margin:20px auto;
  background:#fff;
  border-radius:12px;
  padding:24px 28px 28px;
  box-shadow:var(--shadow);
}
.visit-form h2, .export-card h2{
  font-size:17px;
  margin-bottom:16px;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
  margin-bottom:18px;
}
.field{display:flex;flex-direction:column;gap:5px;}
.field-full{grid-column:1 / -1;}
.field label{font-size:12.5px;font-weight:600;color:#6b6663;}
.field input, .field select, .field textarea{
  padding:10px 11px;
  border:1.5px solid var(--border);
  border-radius:8px;
  outline:none;
  background:#fff;
  color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--pink-1);}
.field textarea{resize:vertical;}
.field input[readonly]{
  background:var(--cream);
  color:var(--muted);
  cursor:default;
}

/* ---------------- SEÇÕES DO FORMULÁRIO ----------------
   O formulário de visita tem ~24 campos. Sem agrupamento vira uma
   parede; com cinco blocos nomeados (Identificação, Classificação,
   Visita, Financeiro, Registro) a pessoa acha o que procura. */
.form-section{
  border-top:1px solid var(--border);
  margin-top:20px;
  padding-top:16px;
}
.form-section:first-of-type{
  border-top:none;
  margin-top:0;
  padding-top:0;
}
.form-section h3{
  margin:0 0 12px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--pink-2);
}
.form-section .form-grid{margin-bottom:0;}
.visit-form > .btn{margin-top:22px;}

.saved-msg{
  margin-left:14px;
  color:var(--green);
  font-weight:600;
  font-size:13.5px;
}

/* ---------------- LISTA "TODAS" ---------------- */
.list-toolbar{
  display:flex;
  gap:10px;
  padding:14px 16px;
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
}
.list-toolbar input[type=search]{
  flex:1;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:8px;
}
.list-toolbar select{
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:8px;
}
.visit-list{padding:12px 16px;}
.list-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border-radius:8px;
  padding:12px 14px;
  margin-bottom:8px;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.list-row:hover{filter:brightness(0.98);}
.list-row .stage-pill{
  flex:0 0 auto;
  font-size:10.5px;
  font-weight:700;
  color:#fff;
  padding:4px 10px;
  border-radius:12px;
  background:var(--stage-color);
}
.list-row .row-main{flex:1;min-width:0;}
.list-row .row-main .clinic{font-weight:700;font-size:14px;}
.list-row .row-main .sub{font-size:12px;color:var(--muted);}
.list-row .row-date{font-size:12px;color:var(--muted);flex:0 0 auto;}
.empty-msg{
  text-align:center;
  color:var(--muted);
  padding:40px 20px;
  font-size:13.5px;
}

/* ---------------- EXPORTAR ---------------- */
.export-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;}
.toggle-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#6b6663;
  margin-top:6px;
}

/* ---------------- LOGOUT ---------------- */
.logout-btn{
  position:fixed;
  right:20px;
  bottom:20px;
  background:var(--pink-1);
  color:#fff;
  border:none;
  border-radius:24px;
  padding:12px 22px;
  font-weight:700;
  font-size:13.5px;
  box-shadow:var(--shadow-lg);
  z-index:50;
}
.logout-btn:hover{background:var(--pink-2);}

/* ---------------- MODAL ---------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:16px;
}
.modal{
  background:#fff;
  border-radius:12px;
  padding:26px 28px;
  /* Era 560px, com cinco campos. Agora o modal tem os mesmos ~24 campos
     do cadastro, em duas colunas. */
  max-width:720px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  box-shadow:var(--shadow-lg);
}
.modal-close{
  position:absolute;
  top:14px;right:16px;
  background:none;border:none;
  font-size:22px;
  color:var(--muted);
  line-height:1;
}
.modal h2{font-size:18px;margin-bottom:2px;}
.modal-sub{color:var(--muted);font-size:13px;margin:0 0 18px;}
.modal-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:11.5px;
  color:var(--muted);
  background:var(--cream);
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:18px;
}
.modal-actions{display:flex;justify-content:space-between;gap:10px;}

/* ---------------- RESPONSIVO ---------------- */
@media (max-width:640px){
  .indicators-strip{grid-template-columns:repeat(4,1fr);}
  html,body{overflow:auto;}
  #app{height:auto;min-height:100vh;}
  .tab-content{overflow:visible;}
  .tab-pane{overflow-y:visible;}
  #tab-pipeline.active{display:block;}
  .board{flex-direction:column;overflow-x:visible;height:auto;}
  .board-col{flex:0 0 auto;min-width:0;height:340px;}
  .header-logo{height:24px;}
  .header-left h1{font-size:14.5px;}
  .header-user{display:none;}
  .form-grid{grid-template-columns:1fr;}
  .visit-form, .export-card{margin:14px;padding:18px;}
  .list-toolbar{flex-direction:column;}
}
/* =========================================================
   COLE ESTE BLOCO NO FINAL DO css/style.css
   (depois do @media (max-width:640px) que ja existe)
   ========================================================= */

/* ---------------- MENSAGEM DE SUCESSO ----------------
   .auth-error tem FUNDO vermelho. Sem esta variante, "Senha alterada com
   sucesso" aparecia em verde sobre vermelho - o sinal errado no momento
   em que a pessoa mais precisa de confirmacao. */
.auth-error.ok{
  background:var(--green-bg);
  color:var(--green);
}

/* ---------------- BOTÃO "MINHA SENHA" ----------------
   Vive dentro do cabecalho, que tem fundo rosa. O .btn-secondary padrao
   (branco com borda rosa) brigaria com ele, e o tamanho padrao do .btn
   nao cabe nos 64px de altura. Copia o visual da pilula do e-mail, que
   ja esta ali ao lado. */
#btn-minha-senha{
  background:rgba(255,255,255,0.16);
  color:#fff;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:20px;
  padding:6px 14px;
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
}
#btn-minha-senha:hover{background:rgba(255,255,255,0.28);}

/* ---------------- MODAL "MINHA SENHA" ----------------
   O .modal cresceu para 720px por causa dos ~24 campos da visita. Aqui
   sao tres campos em coluna: naquela largura o formulario fica perdido. */
#senha-modal .modal{max-width:420px;}
#senha-modal .modal-actions{justify-content:flex-end;}
#senha-modal .modal-actions .btn{min-width:180px;}

/* ---------------- IMPORTAÇÃO ---------------- */
.import-nome{
  font-size:12.5px;
  color:var(--muted);
  align-self:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:260px;
}

/* O relatorio reaproveitava .empty-msg, que e centralizada, cinza clara e
   com 40px de respiro - desenhada para dizer "nao ha nada aqui". Uma
   lista de quinze linhas com numero e motivo precisa do oposto: alinhada
   a esquerda, compacta, e com a cor carregando a informacao. */
#import-report{padding:0;margin-top:6px;}
.relato{
  text-align:left;
  font-size:13px;
  line-height:1.45;
  padding:8px 12px;
  border-radius:8px;
  margin-bottom:6px;
  background:var(--cream);
  color:var(--ink);
}
.relato.ok{background:var(--green-bg);color:var(--green);font-weight:600;}
.relato.erro{background:var(--red-bg);color:var(--red);}

/* ---------------- RESPONSIVO ---------------- */
@media (max-width:640px){
  /* A pilula do e-mail some no celular (.header-user{display:none}), mas
     o botao fica: e o unico caminho para trocar a propria senha. */
  #btn-minha-senha{padding:5px 10px;font-size:11.5px;}
  .import-nome{max-width:100%;flex:1 1 100%;}
}

/* =========================================================
   Seletor de perfil na lista de usuários
   ========================================================= */

/* Vive dentro de .row-date, ao lado dos botoes da linha. Sem regra
   propria herdaria o tamanho padrao de <select> e ficaria maior que os
   botoes que estao do lado. */
.papel-select{
  padding:7px 10px;
  border:1.5px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-size:12.5px;
  font-weight:600;
  outline:none;
  max-width:170px;
}
.papel-select:focus{border-color:var(--pink-1);}
.papel-select:disabled{opacity:.55;cursor:progress;}

/* A linha de usuario tem nome, e-mail, perfil e dois botoes. No celular
   isso nao cabe lado a lado: a coluna da direita passa a empilhar. */
@media (max-width:640px){
  .list-row .row-date{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:flex-end;
  }
  .papel-select{max-width:100%;flex:1 1 100%;}
}

/* =========================================================
   COLE ESTE BLOCO NO FINAL DO css/style.css
   (depois do bloco do seletor de perfil)

   Tudo aqui SOBRESCREVE regras que ja existem mais acima no
   arquivo. Foi feito por acrescimo, e nao editando as regras
   originais no meio do arquivo, por um motivo pratico: mexer no
   miolo do style.css pelo PowerShell ja corrompeu os acentos
   duas vezes. Acrescentar no fim e a operacao mais segura que
   existe aqui, e em CSS a ultima regra de mesma especificidade
   e a que vale.
   ========================================================= */

/* ---------------- LOGO DO CABECALHO ----------------
   Antes: monograma redondo (icon-fertgroup.png) num circulo branco.
   Agora: a assinatura completa (logo-fertgroup.svg), como na versao
   antiga do CRM.

   O arquivo oficial e azul ardosia (#354957) com um detalhe rosa -
   sobre o gradiente rosa do cabecalho ele ficaria ilegivel. Em vez de
   manter um segundo SVG so para a versao branca (dois arquivos para
   sair de sincronia depois), `brightness(0)` achata a imagem inteira
   para preto e `invert(1)` a vira branco puro. Um asset so, e se a
   marca mudar de cor o cabecalho acompanha sozinho.

   A proporcao do SVG e ~5,1:1 (viewBox 763x148,5), entao 26px de
   altura dao ~133px de largura - cabe ao lado do botao "Alterar senha"
   sem apertar o cabecalho de 64px. */
.header-logo{
  height:26px;
  width:auto;
  background:none;      /* anula o circulo branco da regra anterior */
  border-radius:0;
  padding:0;
  filter:brightness(0) invert(1);
}

/* ---------------- FORMULARIO OCUPANDO A TELA ----------------
   Antes: max-width:760px, o que deixava ~1100px de branco de cada lado
   num monitor de 1920. Com ~24 campos, o formulario ficava numa coluna
   estreita no meio de uma tela vazia.

   Nota sobre um perigo que NAO nos atinge: no CRM antigo, alargar este
   mesmo formulario quebrou o layout, porque `margin:0 auto` num filho
   direto de container flex desativa o esticamento e o navegador colapsa
   a largura. Aqui o pai (.tab-pane) e `display:block` - so o painel do
   pipeline e flex. Por isso `margin:24px auto` pode ficar.

   1680px em vez de largura livre: acima disso os campos viram uma faixa
   larga demais para o olho acompanhar do rotulo ate o valor. */
.visit-form, .export-card{
  max-width:1680px;
  margin:24px auto;
  padding:28px 32px 32px;
}

/* A grade era fixa em duas colunas: numa tela larga isso significa dois
   campos gigantes por linha, que e desperdicio de outro tipo. `auto-fill`
   com minimo de 240px deixa o NAVEGADOR decidir quantas cabem - duas num
   notebook, cinco ou seis num monitor grande, uma no celular - sem
   precisar de um @media para cada tamanho.

   240px e o minimo porque abaixo disso rotulos como "POTENCIAL DO MEDICO"
   e "PROXIMO FOLLOW-UP" quebram em duas linhas e desalinham a grade. */
.form-grid{
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:16px 18px;
}

/* .field-full continua valendo (grid-column:1 / -1): "Resumo da reuniao",
   "Acoes definidas" e "Observacoes" seguem ocupando a linha inteira,
   qualquer que seja o numero de colunas que o navegador escolheu. */

/* ---------------- RESPONSIVO ---------------- */
@media (max-width:640px){
  /* No celular a assinatura completa nao cabe ao lado do botao de senha.
     Encolhe o suficiente para continuar legivel sem empurrar o resto. */
  .header-logo{height:18px;}

  /* Reafirma a coluna unica: a regra original resolvia isso com
     `grid-template-columns:1fr`, e o auto-fill acima e mais especifico
     em ordem, entao precisa ser repetido aqui depois dele. */
  .form-grid{grid-template-columns:1fr;}
  .visit-form, .export-card{margin:14px;padding:18px;}
}

/* =========================================================
   COLE ESTE BLOCO NO FINAL DO css/style.css
   (depois do bloco da logo e da largura do formulario)

   Nono estagio: Finalizado. Ver a migracao f2a7d3c9b6e1.
   ========================================================= */

/* ---------------- FAIXA DE INDICADORES ----------------
   A regra original fixa oito colunas (`repeat(8,1fr)`). Com nove
   estagios, o nono cairia numa segunda linha sozinho, ocupando 1/8 da
   largura e desalinhado de tudo.

   Este e o tipo de numero que so se descobre quebrado: nada no
   JavaScript reclama, porque ele so despeja os cartoes na faixa e quem
   decide o arranjo e o CSS. Se um decimo estagio aparecer um dia, e
   aqui que precisa mudar junto. */
.indicators-strip{
  grid-template-columns:repeat(9,1fr);
}

/* ---------------- COLUNA DO BOARD ----------------
   As colunas do kanban sao `flex:1 1 0`, entao a nona se acomoda
   sozinha sem regra nova - cada uma so fica mais estreita. Num monitor
   de 1920 sao ~200px por coluna, que continua confortavel para o card.

   Abaixo de ~1100px nove colunas ficariam apertadas demais para o nome
   da clinica caber. O `min-width` faz a faixa rolar na horizontal em
   vez de espremer o conteudo: melhor precisar arrastar do que ler
   "Fertvida Pri..." em toda coluna. */
@media (min-width:641px) and (max-width:1100px){
  .board{overflow-x:auto;}
  .board .board-col{min-width:150px;flex:0 0 150px;}
}

/* ---------------- RESPONSIVO ---------------- */
@media (max-width:640px){
  /* Tres por linha dao tres fileiras exatas com nove estagios. Com
     quatro (o valor anterior) a ultima fileira teria um cartao solitario
     esticado na largura inteira. */
  .indicators-strip{grid-template-columns:repeat(3,1fr);}
}

/* =========================================================
   COLE ESTE BLOCO NO FINAL DO css/style.css
   (depois do bloco do estagio Finalizado)

   Marca de autoria nos cards e na lista da aba Todas.
   ========================================================= */

/* ---------------- SELO DE AUTORIA ----------------
   Substitui o antigo `.card-by`, que era 10px, cinza #a89f9c e alinhado
   a direita no rodape. Aquilo bastava quando cada pessoa so via as
   proprias visitas; com o quadro compartilhado e nove colunas, virou
   informacao presente e invisivel ao mesmo tempo. */
.autoria{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  font-size:11.5px;
  color:var(--muted);
  min-width:0;          /* deixa o nome truncar em vez de esticar o card */
}
.autoria-nome{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* A cor de fundo vem inline do JavaScript (corDaPessoa), porque e
   calculada a partir do nome - nao ha como enumerar as pessoas aqui. O
   CSS cuida so da forma. */
.avatar{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.3px;
  /* O matiz do avatar e sorteado pelo nome e pode cair perto do fundo do
     card. A borda branca garante o contorno em qualquer caso. */
  box-shadow:0 0 0 1.5px #fff, 0 1px 3px rgba(61,61,61,.18);
}

/* Os proprios cards: o nome vira "Você" no JavaScript, e aqui ele ganha
   peso. E a resposta para a primeira pergunta de quem abre um quadro de
   equipe - "o que e meu?". */
.autoria.meu .autoria-nome{
  font-weight:700;
  color:var(--ink);
}

/* ---------------- O CARD QUE É SEU ----------------
   Marca discreta de proposito. Um destaque forte faria o board parecer
   dividido em dois times; a ideia e reconhecer os seus de relance, nao
   apagar os dos outros. A borda esquerda continua sendo a cor do
   estagio: aquilo diz em que pe a visita esta, e essa informacao nao
   pode ser disputada pela autoria. */
.card.meu{
  background:#FFFDFB;
  box-shadow:0 2px 6px rgba(61,61,61,.06), inset 0 0 0 1px rgba(196,84,122,.22);
}

/* ---------------- NA ABA TODAS ----------------
   A lista tambem passou a mostrar as visitas de todo mundo. O selo entra
   entre o conteudo e a data, com largura fixa para as linhas ficarem
   alinhadas - nome comprido de uma pessoa nao pode empurrar a data de
   todas as outras. */
.list-row .autoria{
  margin-top:0;
  flex:0 0 auto;
  max-width:150px;
}

/* ---------------- RESPONSIVO ---------------- */
@media (max-width:640px){
  /* Na lista do celular o nome nao cabe ao lado da data. Fica so a
     bolinha: a cor sozinha ja diferencia, e o title= continua contando
     quem e para quem tocar e segurar. */
  .list-row .autoria-nome{display:none;}
  /* No card, ao contrario, o nome FICA - o card tem largura inteira da
     coluna e e onde a duvida aparece de verdade. */
}

/* =========================================================
   Marca SIMB — Sistema Integrado de Monitoramento da Base
   ========================================================= */

/* ---------------- LOGO NAS TELAS DE LOGIN ----------------
   Substitui a logo da FertGroup no topo do cartao (a marca corporativa
   continua no cabecalho do app, do lado direito).

   Dimensionado pela LARGURA, com height:auto. O documento do CRM antigo
   registra que esta mesma imagem, controlada por altura, estourou a
   largura do cartao de login e o conteudo saiu da tela - a proporcao e
   de ~7,2:1, entao uma altura que parece modesta vira uma largura
   enorme. O max-width:100% e a rede de seguranca. */
.simb-logo{
  width:280px;
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto 20px;
}

/* ---------------- ICONE NO CABECALHO ----------------
   Quadrado (viewBox 100x100), entao altura e largura andam juntas e nao
   ha risco de transbordar. */
.simb-icone{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:block;
}

.header-left{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;          /* deixa o texto truncar em vez de empurrar o resto */
}
.header-titulo{min-width:0;}

/* "SIMB" em peso forte, o nome por extenso ao lado em peso normal e
   opacidade menor: lê-se a sigla de relance e o significado quando se
   quer. O documento do sistema pede o extenso sempre visivel - nunca so
   em tooltip -, e por isso ele e texto, nao title=. */
.header-left h1{
  font-size:17px;
  font-weight:700;
  letter-spacing:.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.header-extenso{
  font-weight:400;
  font-size:13px;
  opacity:.85;
  letter-spacing:0;
}

@media (max-width:640px){
  /* No celular o extenso nao cabe ao lado do botao de senha e da logo.
     Some o extenso, nao a sigla: quem usa todo dia reconhece SIMB, e o
     nome completo esta na tela de login toda vez que entra. */
  .header-extenso{display:none;}
  .simb-icone{width:26px;height:26px;}
  .simb-logo{width:230px;}
}
/* =========================================================
   COLE ESTE BLOCO NO FINAL DO css/style.css
   (depois do bloco da marca SIMB)

   Campos obrigatórios e a linha própria de UF/Cidade.
   ========================================================= */

/* ---------------- MARCA DE CAMPO OBRIGATORIO ----------------
   Asterisco vermelho ao lado do rotulo. Antes isso era um " *" escrito
   dentro do proprio texto do <label>, em tres campos - mesma cor e mesmo
   peso do rotulo, ou seja, invisivel na pratica.

   O title= serve para quem usa leitor de tela ou nao reconhece a
   convencao do asterisco. Nao substitui a validacao: quem barra de
   verdade e o criticarVisita(), que lista TODOS os campos que faltam de
   uma vez em vez de parar no primeiro. */
.obrigatorio{
  color:var(--red);
  font-weight:700;
  margin-left:2px;
  cursor:help;
}

/* ---------------- UF E CIDADE NA MESMA LINHA ----------------
   Elas saem da grade fluida (.form-grid, que usa auto-fill) e ganham uma
   linha propria de duas colunas.

   O motivo: na grade fluida, o numero de colunas muda com a largura da
   tela, e UF e Cidade podem acabar em pontas opostas - ou em linhas
   diferentes. Sao o par mais acoplado do formulario, porque escolher a
   UF e o que carrega a lista de cidades. Ve-las separadas faz a cascata
   parecer quebrada quando ela esta funcionando.

   A UF e estreita (duas letras) e a cidade e larga, por isso 1fr/2fr em
   vez de duas colunas iguais. */
.form-row2{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:16px 18px;
  margin-bottom:18px;
}
.form-row2 .field{min-width:0;}

/* O .form-grid dentro de uma .form-section tem margin-bottom:0 (para a
   secao controlar o respiro). A linha de UF/Cidade fica ENTRE duas
   grades, entao precisa do seu proprio espaco embaixo. */
.form-section .form-row2{margin-bottom:16px;}

@media (max-width:640px){
  /* No celular, uma embaixo da outra - e nessa ordem, que e a ordem em
     que se preenche. */
  .form-row2{grid-template-columns:1fr;}
}

/* ---------------- BARRA DE FILTROS DO PIPELINE ----------------
   Mesma linguagem visual da .list-toolbar da aba Todas: sao a mesma
   funcao em telas diferentes, e dar aparencias distintas faria parecer
   que fazem coisas distintas.

   flex-wrap porque sao tres selects mais um botao: em tela estreita eles
   quebram em duas linhas em vez de espremer o texto das opcoes. */
.board-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}
.board-toolbar select{
  min-width:190px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  font-size:14px;
  color:var(--ink);
}

/* Filtro ativo fica visivelmente diferente de "Todos". Sem isto, um
   filtro esquecido de ontem parece quadro vazio hoje. */
.board-toolbar select.ativo,
.list-toolbar select.ativo{
  border-color:var(--pink-1);
  font-weight:600;
}

.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink);}

/* A .list-toolbar foi desenhada para dois controles e agora tem cinco.
   Sem o wrap, os selects espremem o campo de busca ate sobrar so
   "Busc...". */
.list-toolbar{flex-wrap:wrap;}
.list-toolbar select{min-width:170px;}

@media (max-width:640px){
  .board-toolbar select,
  .list-toolbar select{flex:1 1 100%;min-width:0;}
}

/* ---------------- LOGO NOVA NO CABECALHO ----------------
   A regra anterior de .header-logo aplicava `filter:brightness(0)
   invert(1)`: a assinatura antiga era um SVG azul ardosia (#354957) e
   sumiria no gradiente rosa do cabecalho, entao o filtro a achatava para
   branco puro.

   A imagem nova ja vem na cor certa para esse fundo. Manter o filtro a
   transformaria numa silhueta branca solida - apareceria, mas sem
   nenhuma das cores dela. Por isso `filter:none`, acrescentado no fim do
   arquivo em vez de editar a regra la em cima: a ultima regra de mesma
   especificidade e a que vale, e este arquivo so e editado por
   acrescimo desde os incidentes de encoding.

   max-width impede que uma imagem larga empurre o botao "Alterar senha"
   para fora do cabecalho, que tem 64px de altura e largura limitada.
   object-fit:contain garante que ela caiba inteira nesse espaco em vez
   de ser cortada. */
.header-logo{
  filter:none;
  height:33px;
  width:auto;
  max-width:200px;
  object-fit:contain;
  background:none;
  border-radius:0;
  padding:0;
}

@media (max-width:640px){
  .header-logo{height:24px;max-width:130px;}
}

/* =========================================================
   ACABAMENTO DO CABECALHO
   ========================================================= */

/* O cabecalho tinha 20px de respiro lateral e quatro elementos
   disputando as pontas: o logo encostava na borda direita e no botao, e
   sobrava um vazio grande no meio. Mais respiro nas bordas e menos
   aperto entre os controles resolve sem mudar a altura de 64px, que e
   calculada no --header-h e usada pelo layout inteiro. */
.app-header{padding:0 24px;gap:20px;}
.header-right{gap:12px;}

/* A pilula do e-mail competia com o botao: fundo parecido, tamanho
   parecido, e o olho nao sabia qual dos dois era clicavel. Ela e
   INFORMACAO (quem esta logado), nao acao - entao perde contraste e
   peso, e o botao fica como o unico elemento que parece botao.

   O max-width existe porque e-mail corporativo longo empurraria o resto
   para fora; o ellipsis corta no fim, que e a parte previsivel
   (@fertgroup.com.br). */
.header-user{
  background:rgba(255,255,255,0.12);
  font-size:12px;
  padding:5px 13px;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Divisor fino antes da marca. 1px solido ficaria duro sobre o
   gradiente; o degrade transparente-branco-transparente desaparece nas
   pontas e so marca o meio, que e onde o olho precisa da pausa. */
.header-sep{
  flex:0 0 auto;
  width:1px;
  height:28px;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 25%,
    rgba(255,255,255,.35) 75%,
    rgba(255,255,255,0) 100%
  );
  margin:0 2px;
}

/* 30px em vez de 33px: a logo tem uma assinatura pequena embaixo
   ("Juntos por um sonho") e, no tamanho anterior, ela ficava maior que
   o nome do proprio sistema na outra ponta. A marca da empresa deve
   estar presente, nao gritar mais alto que o conteudo. */
.header-logo{
  height:30px;
  max-width:190px;
}

@media (max-width:640px){
  .app-header{padding:0 14px;gap:10px;}
  /* O divisor so faz sentido separando duas coisas visiveis. No celular
     a pilula do e-mail some, entao ele separaria o botao do logo - que
     ja estao distantes o suficiente. */
  .header-sep{display:none;}
}

/* =========================================================
   CABECALHO - PAINEL DE CONTROLES
   =========================================================

   Sobrescreve regras que ja existem acima. Acrescimo no fim, como todo
   o resto deste arquivo desde os incidentes de encoding: em CSS a
   ultima regra de mesma especificidade e a que vale. */

/* A esquerda tem tres linhas agora (nome, extenso, estado). Em 64px
   elas se espremeriam. O --header-h e consumido pelo layout inteiro,
   entao muda aqui e o resto acompanha. */
:root{--header-h:84px;}

/* Tres paradas no gradiente, terminando mais escuro a direita: da
   profundidade na horizontal e assenta o painel, que vive naquele
   canto.

   A sombra embaixo e o fio de luz no topo fazem a faixa flutuar sobre
   os indicadores - sem isso as duas areas viram uma mancha rosa unica.
   O z-index garante que a sombra caia SOBRE a faixa de indicadores. */
.app-header{
  padding:0 28px;
  gap:24px;
  background:linear-gradient(118deg,#C4547A 0%, #A8456A 55%, #8E3756 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 3px 14px rgba(61,61,61,.18);
  position:relative;
  z-index:10;
}

/* ---------------- ESQUERDA: QUEM E O SISTEMA ---------------- */

.header-left{gap:15px;}

/* Branco sobre rosa sem sombra parece adesivo colado. */
.simb-icone{
  width:46px;
  height:46px;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.22));
}

/* A sigla sobe para 22px e o extenso desce para uma linha propria, em
   12px. Antes eram 17 e 13 na mesma linha - proximos demais para o olho
   separar, e o resultado era uma faixa de texto uniforme que ninguem
   lia ate o fim. */
.header-left h1{
  font-size:22px;
  font-weight:700;
  letter-spacing:.5px;
  line-height:1.1;
}
.header-extenso{
  display:block;
  margin-top:2px;
  font-weight:400;
  font-size:12px;
  opacity:.68;
  letter-spacing:.3px;
}

/* Fora do painel e sem fundo proprio: o estado pertence ao sistema, nao
   aos controles do usuario. O halo e o que faz o ponto parecer ACESO -
   o anel branco de 2px da regra antiga lia como contorno. */
.header-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:0;
  background:none;
  font-size:11px;
  letter-spacing:.2px;
  opacity:.9;
}
.status-dot{
  width:7px;
  height:7px;
  background:#7BE495;
  box-shadow:0 0 0 3px rgba(123,228,149,.25);
}

/* ---------------- DIREITA: VOCE E A EMPRESA ---------------- */

/* O painel e o que transforma tres coisas soltas num grupo, e o que da
   a faixa um ponto de parada visual na direita. */
.header-right{
  gap:10px;
  padding:8px 10px 8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
}

.header-user{
  background:rgba(255,255,255,.14);
  border:none;
  font-size:12px;
  padding:6px 14px;
}

/* Solido, e nao contornado: dentro do painel translucido um botao so de
   contorno se perde contra a borda do proprio painel - duas linhas
   claras quase concentricas. Com fundo branco ele se destaca do painel
   sem competir com a marca, porque agora os dois estao visivelmente no
   mesmo grupo. */
#btn-minha-senha{
  background:#fff;
  color:#9E3F60;
  border:none;
  border-radius:20px;
  padding:7px 16px;
  font-size:12.5px;
  font-weight:700;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
#btn-minha-senha:hover{background:#FFF0F5;}

.header-sep{height:26px;margin:0 2px;}
.header-logo{height:30px;max-width:190px;}

/* ---------------- CELULAR ---------------- */
@media (max-width:640px){
  :root{--header-h:64px;}
  .app-header{padding:0 12px;gap:10px;}
  .simb-icone{width:30px;height:30px;}
  .header-left h1{font-size:16px;}
  /* Extenso e estado saem: em 390px competiriam por uma largura que nao
     existe, e o nome completo esta na tela de login toda vez que a
     pessoa entra. */
  .header-extenso{display:none;}
  .header-status{display:none;}
  /* O painel viraria uma caixa apertada em volta de dois elementos. */
  .header-right{padding:0;background:none;border:none;gap:8px;}
  .header-sep{display:none;}
  #btn-minha-senha{padding:5px 11px;font-size:11px;}
  /* Sem este limite a assinatura empurra o nome do sistema para fora e
     sobra "SI...". Testado em 390px. */
  .header-logo{height:20px;max-width:96px;}
  .header-titulo{min-width:0;}
}