/* ============================================================
   CRM Clinicas - ferramenta de trabalho, nao site.
   Densidade alta, contraste alto, alvos de 44px. Quem usa isso passa
   o dia aqui e atende ao telefone ao mesmo tempo.
   ============================================================ */
:root{
  --navy:#002C45; --navy-2:#0A3E5C; --teal:#13ADAD; --teal-deep:#0E8C8C;
  --amber:#E8912E; --green:#1FA463; --red:#C6413A;
  --bg:#F4F6F7; --card:#FFFFFF; --line:#DFE5E8;
  --text:#12242E; --text-mid:#5A6B75; --text-dim:#8A9AA3;
  --r:10px; --r-lg:14px; --pill:999px;
  --ease:cubic-bezier(.4,0,.2,1);
  --d:'Lexend',system-ui,sans-serif; --b:'Source Sans 3',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--b);font-size:16px;line-height:1.5;color:var(--text);background:var(--bg)}
h1,h2,h3{font-family:var(--d);line-height:1.2;font-weight:600}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--teal-deep)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}
.hidden{display:none !important}

/* ---------- casca ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff}
.top-in{max-width:1280px;margin:0 auto;padding:.6rem 16px;display:flex;align-items:center;gap:1rem}
/* Logo da clinica vem do banco (clinicas.logo_url). Enquanto nao carrega, ou se
   a clinica nao tiver logo, a marca em texto assume: melhor nome escrito que
   espaco vazio esperando imagem. */
.logo{height:34px;width:auto;max-width:11rem;object-fit:contain;flex:0 0 auto}
.marca{font-family:var(--d);font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.marca small{display:block;font-family:var(--b);font-weight:400;font-size:.76rem;color:rgba(255,255,255,.62);letter-spacing:0}
.top-dir{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.quem{font-size:.84rem;color:rgba(255,255,255,.68);max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.abas{background:var(--navy-2);overflow-x:auto;-webkit-overflow-scrolling:touch}
.abas-in{max-width:1280px;margin:0 auto;padding:0 16px;display:flex;gap:.2rem;min-width:max-content}
.aba{appearance:none;background:transparent;border:0;border-bottom:3px solid transparent;color:rgba(255,255,255,.7);
  font-family:var(--d);font-size:.94rem;font-weight:500;padding:.75rem 1rem;min-height:48px;cursor:pointer;
  touch-action:manipulation;white-space:nowrap;transition:color .16s var(--ease),border-color .16s var(--ease)}
.aba:hover{color:#fff}
.aba[aria-selected="true"]{color:#fff;border-bottom-color:var(--teal)}
.aba .cnt{display:inline-block;margin-left:.4rem;background:rgba(255,255,255,.16);border-radius:var(--pill);
  padding:.05rem .45rem;font-size:.78rem;font-variant-numeric:tabular-nums}
.aba[aria-selected="true"] .cnt{background:var(--teal)}
.aba.urgente .cnt{background:var(--amber);color:#3A2408;font-weight:600}

main{max-width:1280px;margin:0 auto;padding:1.1rem 16px 4rem}

/* ---------- botoes ---------- */
.btn{appearance:none;border:1px solid transparent;border-radius:var(--r);font-family:var(--d);font-weight:500;
  font-size:.94rem;min-height:44px;padding:.55rem 1.05rem;display:inline-flex;align-items:center;justify-content:center;
  gap:.42rem;cursor:pointer;touch-action:manipulation;text-decoration:none;
  transition:background-color .16s var(--ease),border-color .16s var(--ease),transform .1s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal-deep);color:#fff}
.btn-primary:hover{background:#0B7A7A}
.btn-wa{background:var(--green);color:#fff}
.btn-wa:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--card);border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep)}
.btn-sm{min-height:38px;padding:.35rem .7rem;font-size:.86rem;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- cards e listas ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.sec-h{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:.2rem 0 .8rem}
.sec-h h2{font-size:1.16rem}
.sec-h p{color:var(--text-mid);font-size:.93rem}

.lista{display:flex;flex-direction:column;gap:.55rem}

/* O card do lead: NOME em destaque, o resto como apoio. Mesma regra do CRM do
   Mission Control, onde o cliente vem primeiro e o servico e subtitulo. */
.lead{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--r);padding:.8rem .95rem;display:grid;gap:.55rem;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.lead:hover{box-shadow:0 3px 14px rgba(0,44,69,.07)}
.lead.atrasado{border-left-color:var(--amber)}
.lead.hoje{border-left-color:var(--teal)}
.lead.ok{border-left-color:var(--green)}
.lead-top{display:flex;align-items:flex-start;gap:.6rem;flex-wrap:wrap}
.lead-nome{font-family:var(--d);font-weight:600;font-size:1.04rem;line-height:1.25;flex:1 1 14rem;min-width:0}
.lead-sub{color:var(--text-mid);font-size:.9rem;margin-top:.12rem;font-family:var(--b);font-weight:400}
.lead-meta{display:flex;flex-wrap:wrap;gap:.35rem}
.lead-acoes{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}

.tag{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--pill);padding:.16rem .58rem;
  font-size:.79rem;font-weight:500;background:#EDF1F3;color:var(--text-mid);white-space:nowrap}
.tag-quente{background:#FDEBE9;color:#93261F}
.tag-morno{background:#FDF1E3;color:#7A4A10}
.tag-frio{background:#E9EFF2;color:#4B606B}
.tag-atraso{background:#FCF0DC;color:#7A4A10;font-weight:600}
.tag-etapa{background:#E4F5F5;color:#0A6B6B;font-weight:600}
.tag-ok{background:#E4F3EA;color:#146B41}
.tag-perdido{background:#EFF1F2;color:#78868D}

/* ---------- filtros e busca ---------- */
.barra{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem;align-items:center}
.busca{position:relative;flex:1 1 16rem;min-width:0}
.busca input{width:100%;min-height:44px;padding:.55rem .8rem .55rem 2.3rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card)}
.busca svg{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:18px;height:18px;
  stroke:var(--text-dim);stroke-width:2;fill:none;pointer-events:none}
select.filtro{min-height:44px;padding:.5rem .7rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}

/* ---------- placar ---------- */
.placar{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem;margin-bottom:1rem}
@media(min-width:720px){.placar{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.75rem .85rem}
.kpi-n{font-family:var(--d);font-size:1.6rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.kpi-l{font-size:.83rem;color:var(--text-mid);margin-top:.25rem}
.kpi-x{font-size:.79rem;color:var(--text-dim);margin-top:.1rem}

/* ---------- quadro (kanban) ----------
   Rola na horizontal, uma coluna por status. "Perdido" NAO tem coluna: com 470
   linhas perdidas no historico ela viraria um paredao e afogaria o que esta em
   jogo. Perdido vive no filtro da aba Leads.
   O card tem seletor de status ALEM do arrastar, porque HTML5 drag-and-drop nao
   funciona em toque: sem o seletor, o quadro seria inutil no celular e no
   teclado. */
.quadro{display:flex;gap:.7rem;overflow-x:auto;padding-bottom:.8rem;-webkit-overflow-scrolling:touch}
.col{flex:0 0 17.5rem;display:flex;flex-direction:column;background:#EDF1F3;
  border:1px solid var(--line);border-radius:var(--r-lg);max-height:74vh}
.col-h{display:flex;align-items:center;gap:.45rem;padding:.6rem .75rem;border-bottom:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;color:#fff;font-family:var(--d);font-weight:600;font-size:.92rem}
.col-h .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.85);flex:0 0 auto}
.col-h .n{margin-left:auto;background:rgba(255,255,255,.22);border-radius:var(--pill);
  padding:.05rem .5rem;font-size:.82rem;font-variant-numeric:tabular-nums}
.col-body{padding:.55rem;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;flex:1}
.col.solta .col-body{outline:2px dashed var(--teal);outline-offset:-6px;background:#E4F5F5}
.col-vazia{color:var(--text-dim);font-size:.85rem;text-align:center;padding:1.1rem .5rem}

.kc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.6rem .65rem;
  cursor:grab;display:grid;gap:.4rem}
.kc:active{cursor:grabbing}
.kc.arrastando{opacity:.45}
.kc-nome{font-family:var(--d);font-weight:600;font-size:.95rem;line-height:1.25}
.kc-sub{color:var(--text-mid);font-size:.84rem;line-height:1.35}
.kc-meta{display:flex;flex-wrap:wrap;gap:.3rem}
.kc-acoes{display:flex;gap:.35rem;align-items:center}
.kc-acoes select{flex:1;min-height:36px;padding:.25rem .4rem;border:1px solid var(--line);
  border-radius:7px;background:var(--card);font-size:.83rem}

/* ---------- tabela de numeros ---------- */
.tab-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:34rem}
th,td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
th{font-family:var(--d);font-weight:600;font-size:.84rem;color:var(--text-mid);background:#FAFBFC;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}

/* ---------- formularios ---------- */
.form{display:grid;gap:.85rem}
@media(min-width:760px){.form.duas{grid-template-columns:1fr 1fr}}
.campo{display:flex;flex-direction:column;gap:.28rem}
.campo label{font-family:var(--d);font-size:.87rem;font-weight:500}
.campo .dica{font-size:.8rem;color:var(--text-dim)}
.campo input,.campo select,.campo textarea{min-height:44px;padding:.55rem .7rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);width:100%}
.campo textarea{min-height:5rem;resize:vertical}
.campo input:invalid:not(:placeholder-shown){border-color:var(--red)}
.full{grid-column:1/-1}

/* ---------- regua ---------- */
.regua{display:flex;flex-direction:column;gap:.4rem}
.toque{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:1px solid var(--line);
  border-radius:8px;background:#FAFBFC;flex-wrap:wrap}
.toque.feito{background:#F1F7F3;border-color:#CFE6D9}
.toque.venceu{background:#FDF6EA;border-color:#EFD9AE}
.toque-nome{font-family:var(--d);font-weight:500;font-size:.9rem;flex:1 1 9rem}
.toque-data{font-size:.82rem;color:var(--text-mid);font-variant-numeric:tabular-nums}

/* ---------- login ----------
   A foto e o estudio dela vazio na luz da manha, e a composicao foi pedida com
   o terco central-esquerdo limpo de proposito. Entao o cartao senta A ESQUERDA,
   sobre a parede lisa, e o reformer fica respirando a direita. Centralizar o
   cartao jogaria texto em cima do equipamento e desperdicaria a composicao.

   O gradiente navy por cima e mais denso do lado do cartao: unifica a foto com
   a paleta e garante que a borda branca do cartao nunca se perca num trecho
   claro da parede. O contraste do texto em si vem do proprio cartao (branco com
   #12242E = 15:1), nao da foto, entao nada depende da imagem carregar. */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:1.5rem;
  background:var(--navy) url('/assets/studio-960.webp') center/cover no-repeat}
@media(min-width:961px){
  .login-wrap{background-image:url('/assets/studio.webp');background-position:62% center}
}
/* Denso SO atras do cartao, e some rapido pra direita. Na primeira versao eu
   usei .93/.80/.42/.30 e a foto virou noite: matou a luz da manha que era a
   razao de ser da imagem e entregou exatamente o "dark editorial" que eu tinha
   dito que ia evitar. O escuro aqui serve o cartao, nao a estetica. */
.login-wrap::before{content:'';position:fixed;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(0,44,69,.86) 0%,rgba(0,44,69,.62) 30%,
             rgba(0,44,69,.20) 56%,rgba(0,44,69,.04) 100%)}
@media(max-width:960px){
  /* No celular o cartao fica centralizado sobre a foto inteira, entao precisa de
     uma cortina mais uniforme, senao a borda dele se perde no trecho claro. */
  .login-wrap::before{background:linear-gradient(180deg,rgba(0,44,69,.78) 0%,rgba(0,44,69,.66) 100%)}
}
@media(min-width:961px){
  .login-wrap{place-items:center start;padding-left:clamp(1.5rem,7vw,7rem)}
}
.login{position:relative;z-index:1;background:var(--card);border-radius:var(--r-lg);
  padding:1.8rem 1.5rem;width:100%;max-width:24rem;
  box-shadow:0 18px 50px rgba(0,20,32,.34)}
.login h1{font-size:1.24rem;margin-bottom:.3rem}
.login p.sub{color:var(--text-mid);font-size:.92rem;margin-bottom:1.2rem}
.erro{background:#FDEBE9;color:#93261F;border:1px solid #F3C9C5;border-radius:8px;padding:.6rem .75rem;
  font-size:.9rem;margin-bottom:.8rem}
.aviso{background:#E4F5F5;color:#0A6B6B;border:1px solid #BFE6E6;border-radius:8px;padding:.6rem .75rem;
  font-size:.9rem;margin-bottom:.8rem}

/* ---------- estados ---------- */
.vazio{text-align:center;padding:2.6rem 1.2rem;color:var(--text-mid)}
.vazio .emoji{font-size:2rem;display:block;margin-bottom:.5rem}
.vazio h3{font-size:1.06rem;margin-bottom:.35rem;color:var(--text)}
.vazio p{font-size:.93rem;max-width:38ch;margin:0 auto}
.carregando{text-align:center;padding:2rem;color:var(--text-dim);font-size:.93rem}

.rodape{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--text-dim);font-size:.82rem}

/* ---------- ficha do lead ---------- */
.btn-perigo{background:var(--card);border-color:#E7BEBB;color:var(--red)}
.btn-perigo:hover{background:#FDEBE9;border-color:var(--red)}

.modal-fundo{position:fixed;inset:0;z-index:200;background:rgba(0,20,32,.55);
  display:grid;place-items:end center;padding:0}
@media(min-width:761px){.modal-fundo{place-items:center;padding:1.5rem}}
.modal{background:var(--card);width:100%;max-width:40rem;max-height:92dvh;display:flex;
  flex-direction:column;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
@media(min-width:761px){.modal{border-radius:var(--r-lg)}}
.modal-h{display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.1rem .8rem;
  border-bottom:1px solid var(--line)}
.modal-h h2{font-size:1.14rem;line-height:1.25;word-break:break-word}
.modal-sub{color:var(--text-mid);font-size:.9rem;margin-top:.15rem}
.modal-body{padding:1rem 1.1rem;overflow-y:auto;display:grid;gap:1rem}
.modal-f{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.1rem;
  border-top:1px solid var(--line);background:#FAFBFC}
.bloco h3{font-family:var(--d);font-size:.86rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-mid);margin-bottom:.5rem}
.dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;font-size:.93rem}
.dl dt{color:var(--text-mid)}
.dl dd{color:var(--text);word-break:break-word}

/* ---------- caixa de confirmação ---------- */
.dlg-fundo{z-index:300}          /* acima da ficha, que é 200 */
.dlg{max-width:26rem}
.dlg-in{padding:1.3rem 1.3rem 1.15rem}
.dlg-in h2{font-size:1.1rem;line-height:1.3}
.dlg-texto{margin-top:.5rem;color:var(--text-mid);font-size:.95rem;line-height:1.55}
.dlg .campo{margin-top:1.1rem}
.dlg-f{justify-content:flex-end}
/* Ação irreversível: vermelho cheio, e o rótulo diz o que faz. Nunca "OK". */
.btn-perigo-cheio{background:var(--red);border-color:var(--red);color:#fff}
.btn-perigo-cheio:hover{background:#A9332D;border-color:#A9332D}

/* ---------- avisos ---------- */
.toasts{position:fixed;z-index:400;left:50%;transform:translateX(-50%);bottom:1rem;
  display:grid;gap:.5rem;width:calc(100% - 2rem);max-width:26rem;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;
  background:var(--navy);color:#fff;border-radius:var(--r);padding:.8rem .9rem;
  font-size:.93rem;line-height:1.45;box-shadow:0 10px 30px rgba(0,20,32,.32);
  animation:toast-sobe 180ms var(--ease)}
.toast.ruim{background:#93261F}
.toast.bom{background:#0E6B46}
/* 44x44 de área de toque, com margem negativa para não engordar o aviso. */
.toast button{margin:-.4rem -.35rem -.4rem auto;flex:none;background:none;border:0;color:inherit;
  opacity:.8;font-size:1.15rem;line-height:1;cursor:pointer;min-width:44px;min-height:44px;
  touch-action:manipulation}
.toast button:hover{opacity:1}
@keyframes toast-sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}