:root{
  --ink:var(--green-900);
  --deep:var(--green-900);
  --teal:var(--green-600);
  --cream:var(--neutral-100);
  --paper:var(--surface-card);
  --line:var(--border);
  --muted:var(--text-muted);
  --peach:var(--clay-400);
  --lime:var(--lime-300);
  --soft:var(--lime-200);
}
*{box-sizing:border-box}
body{margin:0;background:var(--neutral-100);color:var(--ink);font-family:"DM Sans",sans-serif}
/* min-width:0 é obrigatório aqui. .main-area é item flex, e item flex nasce
   com min-width:auto — ele se recusa a encolher abaixo da largura mínima do
   conteúdo. Um único elemento largo lá dentro empurra a página inteira, cria
   rolagem horizontal, e como a barra lateral é fixa ela passa a cobrir o
   texto. O overflow-x é o cinto de segurança: nesta tela nada deve rolar
   de lado — tabela larga já tem o próprio contêiner com rolagem. */
.app-shell{min-height:100vh;min-height:100dvh;display:flex;min-width:0}
html{overflow-x:hidden}
.sidebar{
  width:255px;
  background:var(--deep);
  color:#e8f1e9;
  padding:29px 21px;
  display:flex;
  flex-direction:column;
  position:fixed;
  inset:0 auto 0 0;
}
.app-brand{
  font-size:23px;
  font-weight:700;
  letter-spacing:-1.3px;
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.app-brand b{color:var(--clay-400)}
.brand-mark{
  display:inline-flex;
  width:23px;
  height:23px;
  position:relative;
  align-items:center;
  justify-content:center;
}
.brand-mark i{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  border:3px solid currentColor;
}
.brand-mark i:nth-child(1){transform:translate(-4px,-4px)}
.brand-mark i:nth-child(2){transform:translate(4px,-4px)}
.brand-mark i:nth-child(3){transform:translateY(4px)}
.clinic-mini{
  margin:56px 0 31px;
  padding:13px 10px;
  background:var(--green-800);
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:var(--radius-xs);
}
.clinic-logo,.logo-preview,.identity-logo,
/* Mesma ideia da tela do paciente: quem assina a proposta é a clínica. */
.document-logo{
  height:54px;
  width:54px;
  border-radius:50%;
  background:var(--clay-400);
  color:var(--green-900);
  display:grid;
  place-items:center;
  font:600 22px Fraunces,serif;
  overflow:hidden;
  flex:none;
  box-shadow:0 2px 9px rgba(40,70,62,.12);
}
.clinic-logo img,
.logo-preview img,
.identity-logo img,
.document-logo img,
.user-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.clinic-logo,.logo-preview,.identity-logo,.document-logo,.user-avatar{overflow:hidden}
.clinic-mini div:nth-child(2){display:grid;gap:2px;min-width:0}
.clinic-mini strong{
  font-size:var(--text-xs);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.clinic-mini small{font-size:var(--text-xs);color:#a9c4bb}
.app-nav{display:grid;gap:6px}
.app-nav button{
  background:transparent;
  border:0;
  border-radius:var(--radius-xs);
  text-align:left;
  color:#b8d0c7;
  padding:12px 11px;
  font:500 var(--text-sm) "DM Sans";
  cursor:pointer;
}
.app-nav button span{
  width:22px;
  display:inline-flex;
  align-items:center;
  color:#91aca4;
  font-size:var(--text-md);
  vertical-align:middle;
}
.app-nav button i{font-style:normal}

/* ------------------------------------------- A FITA ACESA, TAMBÉM NO PC
   A mesma luz da barra do celular, virada de lado: no computador as abas
   são uma coluna, então ela é uma fita vertical que escorrega para cima e
   para baixo à esquerda da aba aberta.

   `--sentido` é como o CSS conta ao JS de que lado ele deve medir. Quem sabe
   onde está o ponto de virada é a folha de estilo — ela já tem o @media. Se o
   JS tivesse o próprio `innerWidth < 700`, os dois passariam a guardar o mesmo
   número em lugares diferentes, e um dia um mudaria sem o outro.
   Ver acenderLuzDaAba() no app.js.
------------------------------------------------------------------------- */
.app-nav{position:relative;--sentido:vertical}
.nav-luz{
  display:block;
  position:absolute;
  left:-9px;
  top:0;
  width:3px;
  height:0;
  border-radius:999px;
  background:var(--lime);
  opacity:0;
  pointer-events:none;
  transition:transform var(--dur-panel) cubic-bezier(.34,1.1,.4,1), height var(--dur-panel) cubic-bezier(.34,1.1,.4,1), opacity var(--dur-base) var(--ease-out);
}
.nav-luz.acesa{opacity:1}
/* O halo: a mesma fita, larga e desfocada, saindo para o lado. */
.nav-luz:before{
  content:"";
  position:absolute;
  left:-7px;
  top:50%;
  width:17px;
  height:150%;
  transform:translateY(-50%);
  border-radius:999px;
  background:var(--lime);
  filter:blur(9px);
  opacity:.5;
}
@media(prefers-reduced-motion:reduce){
  .nav-luz{transition:none}
}
.app-nav button span svg{width:17px;height:17px;display:block}
.app-nav button.active,.app-nav button:hover{background:var(--surface-dark-on);color:#fff}
.app-nav button.active span{color:var(--lime)}
.side-footer{
  margin-top:auto;
  border-top:1px solid #3b6a64;
  padding:20px 7px 4px;
  display:flex;
  gap:9px;
  align-items:center;
}
.help-dot{
  border:1px solid #9cb8ae;
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:var(--text-xs);
}
.side-footer div{display:grid;gap:2px}
.side-footer strong{font-size:var(--text-xs)}
.side-footer small{font-size:var(--text-xs);color:#a9c4bb}
.main-area{width:calc(100% - 255px);margin-left:255px;min-width:0;overflow-x:clip}
.topbar{
  height:96px;
  background:var(--surface-card);
  border-bottom:1px solid var(--line);
  padding:0 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.topbar small{font-size:var(--text-xs);color:var(--text-muted)}
.topbar h1{font:600 var(--display-sm) Fraunces,serif;letter-spacing:-.6px;margin:4px 0 0}
.topbar-user{display:flex;align-items:center;gap:9px}
.topbar-user>div{display:grid;gap:2px}
.topbar-user strong{font-size:var(--text-xs)}
.topbar-user small{font-size:var(--text-xs)}
.user-avatar{
  height:30px;
  width:30px;
  border-radius:50%;
  background:var(--clay-400);
  display:grid;
  place-items:center;
  color:var(--green-900);
  font-size:var(--text-xs);
  font-weight:700;
}
.more{
  border:0;
  background:transparent;
  color:var(--text-muted);
  font-size:var(--text-base);
  margin-left:12px;
}
.view{min-width:0;display:none;max-width:1170px;margin:auto;padding:39px 48px 65px}
.view.active{display:block}
.setup-banner{
  background:#e4e8af;
  border-radius:var(--radius-xs);
  min-height:75px;
  padding:15px 19px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:25px;
}
.setup-badge{
  height:31px;
  width:31px;
  border-radius:50%;
  background:var(--green-800);
  color:#e4e8af;
  display:grid;
  place-items:center;
  font:var(--text-sm) "DM Mono";
}
.setup-banner div:nth-child(2){display:grid;gap:2px;flex:1}
.setup-banner strong{font-size:var(--text-xs)}
.setup-banner p{font-size:var(--text-xs);color:var(--text-muted);margin:0}
.setup-banner button{
  background:transparent;
  border:0;
  color:#23584f;
  font:700 var(--text-xs) "DM Sans";
  cursor:pointer;
}
.setup-banner button span{font-size:var(--text-md);margin-left:6px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:24px}
.builder,.settings-card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:31px 33px;
}
.builder-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:start;
  gap:var(--space-16);
  padding-bottom:29px;
  border-bottom:1px solid #e7e8e1;
}
/* AÇÕES DA MESA DE TRABALHO — salvar rascunho e limpar
   Ficam no alto, junto do título, e não no rodapé com Voltar/Avançar: aquelas
   duas navegam entre etapas, estas duas agem sobre a proposta inteira. Juntar
   as quatro faria a pessoa ler "Limpar" como "limpar esta etapa".
   O conjunto quebra para a linha de baixo em tela estreita em vez de
   comprimir o título — h2 de duas palavras por linha é pior que um botão
   deslocado. */
.builder-acoes{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--space-8);
  margin-left:auto;
}
.builder-botoes{display:flex;gap:var(--space-8)}
.acao-forma{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:0 var(--space-16);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  color:var(--text-body);
  font:var(--weight-semi) var(--text-xs)/1 "DM Sans";
  white-space:nowrap;
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.acao-forma:hover{border-color:var(--border-strong);color:var(--text-strong)}
/* RETOMAR RASCUNHO
   Mesma forma da tarja de edição — são o mesmo tipo de aviso: "o formulário
   não está em branco por acaso". Verde em vez de argila porque este é um
   convite, e a tarja de edição é uma advertência. */
.rascunho-banner{
  background:var(--green-50);
  border:1px solid var(--border-brand);
  border-radius:var(--radius-xs);
  padding:12px 15px;
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:20px;
  flex-wrap:wrap;
}
.rascunho-banner>span{color:var(--text-brand);font-size:var(--text-md);line-height:1}
.rascunho-banner p{
  flex:1;
  min-width:180px;
  font-size:var(--text-xs);
  color:var(--text-body);
  margin:0;
  line-height:1.5;
}
.rascunho-banner b{color:var(--text-brand)}
.rascunho-banner button{
  min-height:44px;
  border:0;
  background:transparent;
  color:var(--text-brand);
  font:var(--weight-bold) var(--text-xs) "DM Sans";
  cursor:pointer;
  text-decoration:underline;
  white-space:nowrap;
  padding:0 var(--space-4);
}
.rascunho-banner button.e-mudo{color:var(--text-muted);font-weight:var(--weight-semi)}
.rascunho-botoes{display:flex;gap:var(--space-8);margin-left:auto}
/* Em tela estreita as duas ações ocupam a largura inteira, e a etiqueta de
   estado desce para baixo delas: pendurada no canto, sozinha, ela parecia um
   rótulo solto em vez do estado do rascunho. */
@media(max-width:640px){
  .builder-acoes{width:100%;align-items:stretch;gap:var(--space-12)}
  .acao-forma{flex:1;justify-content:center}
  .save-state{order:2;align-self:start}
}
.eyebrow{font-size:var(--text-2xs);color:var(--clay-700);letter-spacing:1.15px;font-weight:700}
.builder-head h2{font:600 var(--display-sm)/1 Fraunces,serif;letter-spacing:-.7px;margin:9px 0 0}
.builder-head p{font-size:var(--text-xs);color:var(--muted);margin:9px 0 0}
/* A etiqueta não quebra: 'Rascunho salvo' em duas linhas dentro de uma
   pastilha de 81px parece defeito, e ela é só uma confirmação discreta. */
.save-state{
  font-size:var(--text-2xs);
  color:var(--text-muted);
  background:#edf5ed;
  padding:6px 9px;
  border-radius:var(--radius-full);
  white-space:nowrap;
  flex:none;
  align-self:start;
}
.form-group{padding:26px 0;border-bottom:1px solid #e7e8e1}
.group-title{display:flex;align-items:center;gap:9px;margin-bottom:19px}
.group-title>span{
  background:var(--clay-100);
  color:var(--clay-700);
  width:23px;
  height:23px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font:var(--text-xs) "DM Mono";
}
.group-title h3{font-size:var(--text-base);margin:0}
.fields{display:grid;gap:13px}
.fields.two{grid-template-columns:1fr 1fr}
/* Filho DIRETO de propósito: os rótulos que moram mais fundo (caixas de
   marcar, pastilhas do "o que está incluso", parcelas por tratamento) não
   são campos e têm o próprio desenho. Enquanto esta regra pegava qualquer
   descendente, cada um deles precisava de !important para escapar dela. */
.fields>label{display:grid;gap:7px;color:#4d6761;font-size:var(--text-xs);font-weight:600}
.fields input,.fields select,.fields textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  padding:11px 12px;
  color:#254d47;
  font:var(--text-sm) "DM Sans";
  outline-color:#56a094;
  resize:vertical;
}
.fields input::placeholder,.fields textarea::placeholder{color:#a7b1ac}
.hidden{display:none!important}
.field-tip{font-size:var(--text-xs);color:var(--text-muted);margin:0 0 12px}
.checkbox{display:flex;align-items:center;gap:7px;font-weight:500;font-size:var(--text-xs)}
.checkbox input{width:auto}
.generate{
  border:0;
  background:var(--teal);
  color:#fff;
  border-radius:var(--radius-xs);
  padding:14px 18px;
  font:600 var(--text-xs) "DM Sans";
  cursor:pointer;
  box-shadow:0 5px 12px rgba(20,86,79,.13);
}
.generate>span{color:var(--lime);font-size:var(--text-md);margin-right:7px}
.generate b{font-size:var(--text-md);margin-left:16px}
.builder .generate{margin-top:27px;width:100%;font-size:var(--text-sm)}
.builder-side{display:grid;align-content:start;gap:15px}
.ai-card{background:#d9d6f2;padding:23px;border-radius:var(--radius-xs)}
.ai-star{font-size:22px;color:var(--clay-700)}
.ai-card h3{font:600 23px/1.05 Fraunces,serif;letter-spacing:-.6px;margin:13px 0 10px}
.ai-card>p{font-size:var(--text-xs);line-height:1.6;color:var(--text-muted);margin:0 0 19px}
.ai-line{
  border-top:1px solid #c8c6e4;
  padding:10px 0 0;
  margin-top:10px;
  font-size:var(--text-xs);
  font-weight:600;
}
.ai-line span{color:var(--clay-700);margin-right:5px}
.tip-card{background:#f1c19b;border-radius:var(--radius-xs);padding:16px;display:flex;gap:10px}
.tip-card>span{font-size:23px}
.tip-card div{display:grid;gap:3px}
.tip-card strong{font-size:var(--text-xs)}
.tip-card p{font-size:var(--text-xs);color:var(--text-muted);line-height:1.4;margin:0}
.settings-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}
.settings-card .fields{margin-top:27px}
.logo-upload{
  margin:25px 0 0;
  padding:18px;
  background:var(--neutral-100);
  display:flex;
  align-items:center;
  gap:13px;
}
.logo-preview{height:57px;width:57px;font-size:24px}
.logo-upload strong{font-size:var(--text-xs)}
.logo-upload p{font-size:var(--text-xs);color:var(--text-muted);margin:4px 0 8px}
.upload-button{
  display:inline-block;
  background:var(--surface-card);
  border:1px solid #d6ddd4;
  padding:7px 9px;
  border-radius:var(--radius-xs);
  color:#22544e;
  font-size:var(--text-xs);
  font-weight:700;
  cursor:pointer;
}
.logo-upload input{display:none}
.save-clinic{margin-top:26px}
.settings-aside{background:var(--clay-100);padding:25px}
/* O painel é pêssego claro — o fundo mais escuro do app onde ainda entra
   texto. O terracota do sistema chega só a 4,3:1 aqui; desce um degrau,
   como nos cartões lilás e pêssego da coluna. */
.identity-preview .eyebrow{color:var(--clay-800)}
.identity-paper{
  background:var(--surface-card);
  min-height:455px;
  margin-top:14px;
  padding:24px;
  display:flex;
  flex-direction:column;
  box-shadow:8px 8px 0 #d4de9a;
}
.identity-logo{height:35px;width:35px;font-size:var(--text-md)}
.identity-paper>small{
  font-size:var(--text-2xs);
  letter-spacing:1px;
  color:var(--clay-700);
  margin-top:84px;
}
.identity-paper h3{font:600 28px/1 Fraunces,serif;letter-spacing:-.8px;margin:8px 0}
.identity-paper p{font:var(--text-xs)/1.6 "DM Sans";color:#63766f}
.identity-sign{
  border-top:1px solid var(--border);
  margin-top:auto;
  padding-top:12px;
  display:flex;
  justify-content:space-between;
  color:var(--text-muted);
  font-size:var(--text-xs);
}
.identity-sign b{color:var(--clay-700)}
.empty-proposals{min-height:450px;display:grid;place-content:center;text-align:center}
.empty-proposals>span{font-size:36px;color:var(--clay-500)}
.empty-proposals h2{font:600 32px Fraunces,serif;letter-spacing:-.7px;margin:10px 0}
.empty-proposals p{font-size:var(--text-sm);color:var(--text-muted);margin:0 0 22px}
.history-item div{display:grid;gap:4px}
.history-item strong{font-size:var(--text-base)}
.history-item small{font-size:var(--text-xs);color:var(--text-muted)}
.history-item button{
  border:1px solid var(--border);
  background:transparent;
  color:#5c716b;
  border-radius:var(--radius-xs);
  padding:8px 12px;
  font:600 var(--text-xs) "DM Sans";
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.history-item button:hover{border-color:#9dbdb4;color:var(--green-600)}
.history-item button[data-open-proposal]{
  background:var(--green-600);
  border-color:var(--green-600);
  color:#fff;
}
.history-item button[data-open-proposal]:hover{background:var(--green-700);color:#fff}
.history-item .danger-button:hover{border-color:#d8a68f;color:var(--clay-700)}
.document-actions{max-width:800px;margin:0 auto 18px;display:flex;justify-content:space-between}
.document-actions>div{display:flex;gap:8px}
.back-button,.outline-button{
  border:1px solid #ced9d1;
  background:var(--surface-card);
  border-radius:var(--radius-xs);
  color:#285e56;
  padding:11px 12px;
  font:600 var(--text-xs) "DM Sans";
  cursor:pointer;
}
.proposal-document{
  max-width:800px;
  margin:auto;
  background:var(--surface-card);
  padding:46px 56px;
  box-shadow:0 6px 20px rgba(44,61,53,.1);
}
.document-header{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #e6e8df;
  padding-bottom:22px;
}
.document-clinic{display:flex;align-items:center;gap:14px}
.document-logo{height:48px;width:48px;font-size:var(--text-xl)}
.document-clinic small,.document-label,.document-hero>span{
  font-size:var(--text-2xs);
  letter-spacing:1.1px;
  color:var(--clay-700);
  font-weight:700;
}
.document-clinic h2{font:600 25px/1.15 Fraunces,serif;letter-spacing:-.6px;margin:3px 0 0}
.document-sign{display:block;font-size:var(--text-xs);font-weight:600;color:#6d7f74;margin-top:3px}
.document-date{font-size:var(--text-xs);color:#71827d}
.document-hero{padding:53px 0 42px}
.document-hero h1{font:600 var(--display-lg)/1 Fraunces,serif;letter-spacing:-1.6px;margin:11px 0}
.document-hero p{font:var(--text-base)/1.6 Fraunces,serif;max-width:530px;color:#385e57;margin:0}
.document-section{padding:25px 0;border-top:1px solid #e6e8df}
.document-section h2{font:600 29px Fraunces,serif;letter-spacing:-.8px;margin:8px 0 10px}
.document-section>p{font-size:var(--text-sm);line-height:1.7;color:#53706a;max-width:610px}
.includes-section>p{margin-bottom:0}
.investment{
  background:var(--lime-300);
  padding:25px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
}
.investment span{font-size:var(--text-2xs);letter-spacing:1px;font-weight:700;color:#517168}
.investment h2{font:600 var(--display-lg) Fraunces,serif;margin:6px 0}
.investment p{font-size:var(--text-xs);color:#3d6058;max-width:530px;margin:0;line-height:1.55}
.investment-accent{font-size:var(--display-xl);color:#e38364}
.document-footer{padding-top:30px;display:flex;justify-content:space-between;align-items:end}
.document-footer div{display:grid;gap:5px}
.document-footer strong{font-size:var(--text-xs)}
.document-footer span{font-size:var(--text-xs);color:#768781}
.document-footer>b{font-size:var(--text-lg);color:var(--clay-500)}
.toast{
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,20px);
  background:var(--green-800);
  color:#fff;
  padding:12px 16px;
  border-radius:var(--radius-xs);
  font-size:var(--text-xs);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  z-index:5;
}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.field-hint{
  display:block;
  font-size:var(--text-xs);
  font-weight:500;
  color:var(--text-muted);
  margin-top:-2px;
}
.identity-contact{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  width:max-content;
  text-decoration:none;
  color:#1f5b50;
  background:var(--lime-200);
  border-radius:var(--radius-full);
  padding:6px 11px;
  font:700 var(--text-xs) "DM Sans";
}
.identity-contact span{font-size:var(--text-xs);color:#2b7a5f}
.whatsapp-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  width:max-content;
  text-decoration:none;
  color:#1f5b50;
  background:var(--lime-200);
  border:1px solid #cfdcc9;
  border-radius:var(--radius-full);
  padding:7px 12px;
  font:700 var(--text-xs) "DM Sans";
}
.whatsapp-tag span{font-size:var(--text-xs);color:#2b7a5f}
.whatsapp-tag b{font-weight:700;color:#33564f}
.edit-banner{
  background:var(--clay-100);
  border:1px solid #e7cdb4;
  border-radius:var(--radius-xs);
  padding:12px 15px;
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:20px;
}
.edit-banner>span{color:var(--clay-700);font-size:var(--text-base)}
.edit-banner p{flex:1;font-size:var(--text-xs);color:#6d5546;margin:0;line-height:1.5}
.edit-banner b{color:#a8563a}
.edit-banner button{
  border:0;
  background:transparent;
  color:#ab5b3c;
  font:700 var(--text-xs) "DM Sans";
  cursor:pointer;
  text-decoration:underline;
  white-space:nowrap;
}
.history-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* ------------------------------------- O ARQUIVO, NUMA ABA QUE EXPANDE
   Fechado por padrão: quem entra em Documentos quase sempre vai emitir um,
   não procurar um antigo — e com dezenas de registros a lista empurrava o
   compositor para fora da tela. */
.rx-historico-cartao{padding:0}
.rx-historico>summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;cursor:pointer;list-style:none;
  border-radius:var(--radius-sm);
}
.rx-historico>summary::-webkit-details-marker{display:none}
.rx-historico>summary:hover{background:var(--neutral-100)}
.rx-historico-titulo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.rx-historico-titulo h3{margin:0}
.rx-historico-conta,.rx-historico-titulo small{
  font:500 var(--text-xs) "DM Sans";color:var(--text-muted);
}
.rx-historico-seta{
  flex:none;color:var(--text-muted);font-size:var(--text-sm);
  transition:transform var(--dur-fast) var(--ease-out);
}
.rx-historico[open]>summary .rx-historico-seta{transform:rotate(180deg)}
.rx-historico[open]>summary{border-bottom:1px solid var(--border);border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.rx-historico-corpo{padding:16px 20px 20px}
.rx-historico-busca{margin:0 0 14px}
/* A busca do arquivo é menor que a do catálogo: ali ela é a porta da tela,
   aqui é um filtro dentro de uma gaveta já aberta. */
.rx-historico-busca input{padding:11px 0;font-size:var(--text-sm)}
.rx-historico-busca svg{width:16px;height:16px}
.ghost-button{
  border:1px solid #d6ddd4;
  background:var(--surface-card);
  color:#2a5f56;
  border-radius:var(--radius-xs);
  padding:9px 11px;
  font:700 var(--text-xs) "DM Sans";
  cursor:pointer;
}
.danger-button{
  border:1px solid #eccfc4;
  background:var(--neutral-100);
  color:#ad563a;
  border-radius:var(--radius-xs);
  padding:9px 11px;
  font:700 var(--text-xs) "DM Sans";
  cursor:pointer;
}
.outline-button.danger{color:#ad563a;border-color:#eccfc4}
.include-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.include-chips span{
  background:var(--neutral-200);
  border-radius:var(--radius-full);
  padding:9px 14px;
  font:600 var(--text-xs) "DM Sans";
  color:#4c6a63;
}
.include-chips span:before{content:"✓";color:#2b7a5f;margin-right:7px}
.include-group{
  margin-top:6px;
  background:var(--neutral-100);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:17px 18px;
}
.include-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.include-head>span{font:700 var(--text-xs) "DM Sans";color:#3d5b55}
.include-head small{
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:.3px;
  color:var(--text-muted);
  background:var(--neutral-200);
  border-radius:var(--radius-sm);
  padding:5px 10px;
  white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.include-head small.is-active{background:var(--lime-300);color:#3d6055}
.include-group .field-tip{margin:6px 0 14px}
/* O QUE ESTÁ INCLUSO — pastilhas do tamanho da palavra
   Era uma grade de colunas iguais (auto-fit/minmax). Toda coluna ficava com a
   largura do menor caso, e as palavras longas não caíam dentro: "Limpeza"
   sobrava espaço e "Acompanhamento" — uma palavra só, que não tem onde
   quebrar — vazava por fora da pastilha. Em flex cada pastilha pede a
   largura de que precisa e o resto se acomoda ao lado, o que também empacota
   mais itens por linha no celular: 15 pastilhas em ~7 linhas em vez de 15. */
.include-options{display:flex;flex-wrap:wrap;gap:8px}
.include-chip{
  position:relative;
  display:flex;
  align-items:center;
  min-height:44px;
  gap:10px;
  border:1px solid var(--border);
  background:var(--surface-card);
  border-radius:var(--radius-xs);
  padding:12px 13px;
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.include-chip input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.include-chip i{
  flex:none;
  width:18px;
  height:18px;
  border:1.5px solid #c6cfc4;
  border-radius:50%;
  background:var(--neutral-0);
  display:grid;
  place-items:center;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.include-chip i:after{
  content:"✓";
  font:700 var(--text-xs) "DM Sans";
  color:#fff;
  opacity:0;
  transform:scale(.4);
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.include-chip b{font:600 var(--text-xs) "DM Sans";color:#4d6761;line-height:1.3}
.include-chip:hover{border-color:#a9c2b6;background:var(--neutral-0)}
.include-chip:has(input:focus-visible){box-shadow:0 0 0 3px rgba(36,120,111,.22)}
.include-chip.is-on{
  border-color:var(--green-600);
  background:var(--neutral-200);
  box-shadow:0 1px 5px rgba(28,90,79,.1);
}
.include-chip.is-on i{background:var(--green-600);border-color:var(--green-600)}
.include-chip.is-on i:after{opacity:1;transform:scale(1)}
.include-chip.is-on b{color:#1b5a4f}
.include-other{
  margin-top:13px;
  border-top:1px dashed #d8ddce;
  padding-top:14px;
  display:grid;
  gap:7px;
  animation:includeOpen .18s ease;
}
@keyframes includeOpen{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}
.include-other label{display:block;font:700 var(--text-xs) "DM Sans";color:#4d6761}
.include-other textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  padding:11px 12px;
  color:#254d47;
  font:var(--text-sm) "DM Sans";
  outline-color:#56a094;
  resize:vertical;
  min-height:66px;
}
.include-other small{font:var(--text-xs) "DM Sans";color:var(--text-muted)}
.payment-picks{display:grid;gap:10px}
.payment-pick{
  border:1px solid var(--border);
  background:var(--surface-card);
  border-radius:var(--radius-xs);
  overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.payment-pick.is-on{border-color:var(--green-600);box-shadow:0 2px 10px rgba(28,90,79,.1)}
.pick-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 16px;
  cursor:pointer;
  background:var(--neutral-100);
  transition:background-color var(--dur-fast) var(--ease-out);
}
.payment-pick.is-on .pick-head{background:var(--neutral-200)}
.pick-head input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pick-head>i{
  flex:none;
  width:18px;
  height:18px;
  border:1.5px solid #c6cfc4;
  border-radius:50%;
  background:var(--neutral-0);
  display:grid;
  place-items:center;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pick-head>i:after{
  content:"✓";
  font:700 var(--text-xs) "DM Sans";
  color:#fff;
  opacity:0;
  transform:scale(.4);
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.payment-pick.is-on .pick-head>i{background:var(--green-600);border-color:var(--green-600)}
.payment-pick.is-on .pick-head>i:after{opacity:1;transform:scale(1)}
.pick-head>div{display:grid;gap:3px;flex:1;min-width:0}
.pick-head b{font:700 var(--text-xs) "DM Sans";color:#2f544d}
.pick-head small{font:var(--text-xs) "DM Sans";color:var(--text-muted)}
.pick-badge{
  flex:none;
  background:var(--neutral-200);
  color:var(--text-muted);
  border-radius:var(--radius-sm);
  padding:6px 11px;
  font:700 var(--text-xs) "DM Sans";
  white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.payment-pick.is-on .pick-badge{background:var(--green-600);color:#fff}
.pick-body{
  padding:17px 16px 18px;
  border-top:1px solid #e7e8e1;
  display:grid;
  gap:12px;
  animation:includeOpen .18s ease;
}
.payment-pick:not(.is-on) .pick-body{display:none}
.pick-body .field-tip{margin:0}
.payment-warning{
  margin:11px 0 0;
  font:600 var(--text-xs) "DM Sans";
  color:#b0563a;
  background:var(--neutral-100);
  border:1px solid #eccfc4;
  border-radius:var(--radius-xs);
  padding:10px 12px;
}
.payment-choices{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  gap:11px;
}
.choice{
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:18px 19px;
  background:var(--neutral-100);
  display:grid;
  align-content:start;
  gap:3px;
}
.choice-tag{font:700 var(--text-2xs) "DM Sans";letter-spacing:1.1px;color:var(--clay-700)}
.choice h3{
  font:600 var(--text-lg) Fraunces,serif;
  letter-spacing:-.4px;
  margin:5px 0 6px;
  color:var(--text-strong);
}
.choice>strong{
  font:600 25px Fraunces,serif;
  letter-spacing:-.8px;
  color:var(--green-600);
  line-height:1.1;
}
.choice>small{font:var(--text-xs)/1.5 "DM Sans";color:#71827c;margin-top:4px}
.choice.is-featured{
  border-color:var(--green-600);
  background:var(--neutral-200);
  box-shadow:0 3px 14px rgba(28,90,79,.13);
}
.choice.is-featured .choice-tag{color:#1f5b50}
.choice.is-featured>strong{color:#1b5a4f}
.choice-lines{
  display:grid;
  gap:5px;
  margin-top:13px;
  border-top:1px solid var(--border);
  padding-top:12px;
}
.choice-lines span{font:var(--text-xs)/1.45 "DM Sans";color:#516d66}
.choice-lines span:before{content:"✓";color:#2a695e;margin-right:6px}
.stage-list{display:grid;gap:7px;container-type:inline-size}
.stage-head,.stage-row{
  display:grid;
  grid-template-columns:1.5fr .9fr 1.15fr 30px;
  gap:8px;
  align-items:center;
}
.stage-head span{
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:.4px;
  color:var(--text-muted);
  padding-left:2px;
}
.stage-row input,.stage-row select{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  padding:10px;
  color:#254d47;
  font:var(--text-xs) "DM Sans";
  outline-color:#56a094;
  min-width:0;
}
.stage-campo{min-width:0}
.stage-campo>i{display:none}
.stage-term{display:flex;gap:5px;min-width:0}
.stage-term input{flex:1;min-width:0}
.stage-term select{
  flex:none;
  width:82px;
  padding:10px 4px 10px 8px;
  font-size:var(--text-xs);
  cursor:pointer;
}
.remove-stage{
  border:0;
  background:#f5e1d7;
  color:#b45f45;
  border-radius:var(--radius-xs);
  height:37px;
  font-size:var(--text-base);
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out);
}
.remove-stage:hover{background:#efd0c1}
.treatment-row .stage-term input{flex:1;width:auto;min-width:0}
.treatment-row .stage-term select{flex:none;width:104px;padding:11px 4px 11px 10px;cursor:pointer}
.checkbox.is-disabled{opacity:.5;cursor:default}
.card-per-list{display:grid;gap:7px;margin-top:2px}
.card-per-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--neutral-100);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:10px 12px;
}
.card-per-row>span{
  font:600 var(--text-xs) "DM Sans";
  color:#4d6761;
  flex:1;
  min-width:0;
  display:grid;
  gap:2px;
}
.card-per-row>span i{
  font-style:normal;
  font-weight:500;
  font-size:var(--text-xs);
  color:var(--text-muted);
}
.card-per-row select{
  flex:none;
  width:88px;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  padding:9px 6px 9px 10px;
  color:#254d47;
  font:var(--text-xs) "DM Sans";
  outline-color:#56a094;
  cursor:pointer;
}
.stage-actions{display:flex;flex-wrap:wrap;gap:8px}
.stage-actions .add-stage{margin-top:11px}
.add-stage{
  margin-top:11px;
  border:1px dashed #81a39a;
  background:transparent;
  color:#287269;
  border-radius:var(--radius-xs);
  padding:9px 12px;
  font:700 var(--text-xs) "DM Sans";
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.add-stage:hover{background:var(--neutral-200);border-style:solid}
.photo-uploader{display:grid;gap:12px;margin-top:4px}
.photo-drop{
  display:grid;
  justify-items:center;
  gap:3px;
  text-align:center;
  border:1.5px dashed #b7c7bc;
  border-radius:var(--radius-xs);
  background:var(--neutral-100);
  padding:22px 18px;
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.photo-drop:hover{border-color:var(--green-600);background:var(--neutral-200)}
.photo-drop>span{font-size:var(--text-xl);color:var(--clay-500)}
.photo-drop b{font:700 var(--text-xs) "DM Sans";color:#2f544d}
.photo-drop small{font:var(--text-xs) "DM Sans";color:var(--text-muted)}
.photo-drop input{display:none}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.photo-card{
  margin:0;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  overflow:hidden;
  background:var(--surface-card);
  position:relative;
}
.photo-card img{
  display:block;
  width:100%;
  height:120px;
  object-fit:contain;
  background:var(--neutral-200);
}
.photo-meta.is-heavy{color:#ad563a;font-weight:700}
.steps-title{
  font:600 26px Fraunces,serif;
  letter-spacing:-.7px;
  margin:8px 0 4px;
  color:var(--text-strong);
}
.document-steps{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}
.document-step{
  background:var(--neutral-200);
  border-radius:var(--radius-xs);
  padding:16px 17px;
  display:grid;
  align-content:start;
  gap:0;
}
.document-step span{
  display:block;
  color:var(--clay-500);
  font:var(--text-base) Fraunces,serif;
  margin-bottom:7px;
}
.document-step b{font:700 var(--text-xs) "DM Sans";color:#28524b;margin-bottom:6px}
.document-step p{font:var(--text-xs)/1.6 "DM Sans";color:#5b7069;margin:0}
.document-extra{
  font-size:var(--text-sm);
  line-height:1.7;
  color:#53706a;
  max-width:610px;
  margin-top:12px;
}
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:11px;
  margin-top:16px;
  align-items:start;
}
.gallery-item{
  margin:0;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  overflow:hidden;
  background:var(--neutral-100);
}
.gallery-item img{display:block;width:100%;height:auto;background:var(--neutral-200)}
.gallery-item figcaption{padding:10px 12px;display:grid;gap:3px}
.gallery-item b{
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:1.1px;
  color:var(--clay-700);
  text-transform:uppercase;
}
.gallery-item span{font:var(--text-xs)/1.45 "DM Sans";color:#516d66}
.photo-card.needs-kind{border-color:#e6cdb4;box-shadow:0 0 0 2px rgba(214,150,100,.16)}
.photo-tools{position:absolute;top:7px;right:7px;display:flex;gap:4px}
.photo-tools button{
  border:0;
  width:23px;
  height:23px;
  border-radius:50%;
  background:rgba(23,74,70,.8);
  color:#fff;
  font-size:var(--text-xs);
  line-height:1;
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out);
  display:grid;
  place-items:center;
}
.photo-tools button:hover:not(:disabled){background:var(--green-800)}
.photo-tools button:disabled{opacity:.3;cursor:default}
.photo-tools .photo-remove{font-size:var(--text-base)}
.photo-tools .photo-remove:hover{background:#b0563a}
.photo-card figcaption{display:grid;gap:6px;padding:10px 9px 9px}
.photo-ask{font:700 var(--text-2xs) "DM Sans";letter-spacing:.3px;color:var(--text-muted)}
.photo-card.needs-kind .photo-ask{color:#bb7a4f}
.photo-kinds{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.photo-kind{
  border:1px solid var(--border);
  background:var(--surface-card);
  color:#68807a;
  border-radius:var(--radius-xs);
  padding:6px 4px;
  font:700 var(--text-xs) "DM Sans";
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.photo-kind:hover{border-color:#a9c2b6;color:#2f544d}
.photo-kind.is-on{background:var(--green-600);border-color:var(--green-600);color:#fff}
.photo-card input{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  padding:7px 8px;
  font:var(--text-xs) "DM Sans";
  color:#254d47;
  outline-color:#56a094;
}
.photo-meta{margin:0;font:var(--text-xs)/1.5 "DM Sans";color:var(--text-muted)}
.photo-meta.is-pending{color:#a9713f}
.choice-pix{
  margin-top:12px;
  border-top:1px solid var(--border);
  padding-top:12px;
  display:grid;
  gap:5px;
}
.choice-pix>span{font:700 var(--text-2xs) "DM Sans";letter-spacing:1.1px;color:var(--clay-700)}
.choice-pix code{
  font:var(--text-xs) "DM Mono",monospace;
  color:#28524b;
  background:var(--neutral-200);
  border-radius:var(--radius-xs);
  padding:8px 9px;
  word-break:break-all;
}
.pix-copy{
  border:1px solid #cfdcc9;
  background:var(--surface-card);
  color:#1f5b50;
  border-radius:var(--radius-xs);
  padding:8px;
  font:700 var(--text-xs) "DM Sans";
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out);
}
.pix-copy:hover{background:var(--neutral-200)}
.choice-pay{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:12px;
  background:var(--green-600);
  color:#fff;
  border-radius:var(--radius-xs);
  padding:12px 14px;
  text-decoration:none;
  font:700 var(--text-xs) "DM Sans";
  transition:background-color var(--dur-fast) var(--ease-out);
}
.choice-pay:hover{background:var(--green-700)}
.choice-pay b{font-size:var(--text-base)}
.field-hint em{font-style:normal;color:#a3aea7;font-weight:500}
.pick-body .fields label em{font-style:normal;color:var(--text-muted)}
.billing-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:23px 0 11px}
.billing-card .billing-actions .generate{margin:0}
.billing-actions .outline-button{
  background:transparent;
  border-color:#a9bd6f;
  color:#3f5f43;
  padding:14px 16px;
  font-size:var(--text-xs);
}
.billing-actions .outline-button:hover{background:rgba(255,254,250,.5)}
.pay-methods{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:13px}
.pay-methods b{
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:1.1px;
  color:var(--text-muted);
  margin-right:2px;
}
.pay-methods span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(255,254,250,.75);
  border:1px solid rgba(45,90,80,.16);
  border-radius:var(--radius-full);
  padding:6px 11px;
  font:700 var(--text-xs) "DM Sans";
  color:#2f5c52;
}
.pay-methods span.soon{background:transparent;border-style:dashed;color:var(--text-muted)}
.pay-methods span.soon i{font-style:normal;font-weight:500;font-size:var(--text-xs);opacity:.85}
.billing-card .pay-methods b{color:#5d746c}
.paywall{
  background:var(--lime-300);
  border-radius:var(--radius-xs);
  padding:20px 22px;
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:24px;
  box-shadow:6px 6px 0 #c3cf78;
}
.paywall>span{font-size:26px;color:var(--clay-700)}
.paywall>div{flex:1;display:grid;gap:5px}
.paywall strong{
  font:600 var(--text-lg) Fraunces,serif;
  letter-spacing:-.4px;
  color:var(--text-strong);
}
.paywall p{font:var(--text-xs)/1.6 "DM Sans";color:#4a6a5f;margin:0;max-width:520px}
.paywall .generate{white-space:nowrap;background:var(--green-800)}
.free-banner{
  background:var(--neutral-200);
  border:1px solid #cfe0cd;
  border-radius:var(--radius-xs);
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
}
.free-banner>span{color:var(--clay-700);font-size:var(--text-base)}
.free-banner p{margin:0;font:var(--text-xs) "DM Sans";color:#4a6a5f}
.free-banner b{color:#1b5a4f}
.builder.is-locked{opacity:.5;pointer-events:none;filter:grayscale(.35)}
#submit-proposal:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.subscription-mini.is-blocked{background:#8a4a33}
.subscription-mini.is-blocked span{color:#f4d3a8}
.subscription-mini.is-blocked button{color:#f6e3d2}
button.group-title{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
  padding:0;
  font-family:inherit;
}
.group-title i{
  margin-left:auto;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--neutral-200);
  color:#5d7a72;
  display:grid;
  place-items:center;
  font-style:normal;
  transition:transform var(--dur-base) var(--ease-out);
}
.group-title i:after{
  content:"⌃";
  font-size:var(--text-xs);
  transform:translateY(2px) rotate(180deg);
  display:block;
}
.form-group.is-closed .group-title i{transform:rotate(180deg)}
.form-group.is-closed .group-body{display:none}
.form-group.is-closed .group-title{margin-bottom:0}
.group-title:hover i{background:var(--lime-300);color:#28524b}
.history-tools{margin-bottom:14px}
.history-tools input{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  padding:12px 14px;
  font:var(--text-sm) "DM Sans";
  color:#254d47;
  outline-color:#56a094;
}
.history-empty-search{
  background:var(--neutral-100);
  border:1px dashed #d5dbcd;
  border-radius:var(--radius-xs);
  padding:18px;
  text-align:center;
  font:var(--text-xs) "DM Sans";
  color:#7b8a83;
  margin:0 0 14px;
}
.crop-modal{
  position:fixed;
  inset:0;
  z-index:30;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(17,44,40,.62);
  backdrop-filter:blur(3px);
  padding:20px;
}
.crop-modal.is-open{display:flex}
.crop-card{
  background:var(--paper);
  border-radius:var(--radius-sm);
  padding:24px;
  width:min(420px,100%);
  max-height:92vh;
  max-height:92dvh;
  overflow:auto;
  box-shadow:0 18px 50px rgba(20,45,40,.3);
}
.crop-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.crop-head h2{font:600 22px Fraunces,serif;letter-spacing:-.6px;margin:7px 0 0}
.crop-counter{
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:.4px;
  color:var(--text-muted);
  background:var(--neutral-200);
  border-radius:var(--radius-sm);
  padding:5px 10px;
  white-space:nowrap;
}
.crop-stage{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--radius-xs);
  background:#e9e8e0;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.crop-stage:active{cursor:grabbing}
.crop-stage img{
  position:absolute;
  top:0;
  left:0;
  max-width:none;
  pointer-events:none;
  will-change:transform;
}
.crop-stage:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.crop-tip{font:var(--text-xs) "DM Sans";color:var(--text-muted);margin:9px 0 14px;text-align:center}
.crop-ratios{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.crop-ratios button{
  border:1px solid var(--border);
  background:var(--surface-card);
  color:#68807a;
  border-radius:var(--radius-xs);
  padding:10px 6px;
  font:700 var(--text-xs) "DM Sans";
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.crop-ratios button:hover{border-color:#a9c2b6;color:#2f544d}
.crop-ratios button.is-on{background:var(--green-600);border-color:var(--green-600);color:#fff}
.crop-zoom{display:grid;gap:7px;font:700 var(--text-xs) "DM Sans";color:#4d6761;margin-bottom:18px}
.crop-zoom input{width:100%;accent-color:var(--green-600)}
.crop-actions{display:flex;gap:8px}
.crop-actions .outline-button{flex:none}
.crop-actions .generate{flex:1}
.photo-tools .photo-crop{font-size:var(--text-xs)}
.treatment-default{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  background:var(--neutral-100);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:11px 14px;
  margin-top:2px;
}
.treatment-default>span{font:var(--text-xs) "DM Sans";color:#6d7d76;flex:1;min-width:180px}
.default-actions{display:flex;gap:6px;flex-wrap:wrap}
.default-actions button{padding:8px 11px;font-size:var(--text-xs)}
.ghost-button.is-locked{border-style:dashed;color:#a0aca5;background:var(--neutral-100)}
.ghost-button.is-locked:hover{border-color:#d4a373;color:#a06a3f}
.include-chip{padding:10px 12px}
.include-chip b{font-size:var(--text-xs)}
#subtype-wrap select{border-left:3px solid var(--green-600)}
#subtype-wrap span{display:block}
#treatment-type optgroup{
  font:700 var(--text-xs) "DM Sans";
  color:var(--text-muted);
  background:var(--neutral-100);
}
#treatment-type option{font:var(--text-sm) "DM Sans";color:#254d47;padding:4px}
/* A lista é um container: quem decide se o cartão vira duas colunas é a
   LARGURA DELA, não a da janela. O formulário mora numa coluna estreita ao
   lado da barra lateral — medir a janela colocaria duas colunas num cartão
   de 420px e espremeria tudo (é a mesma armadilha do layout que quebrava em
   1024px, não no celular). */
.treatment-list{display:grid;gap:10px;container-type:inline-size}
.treatment-row{
  border:1px solid var(--border);
  background:var(--surface-card);
  border-radius:var(--radius-xs);
  padding:15px 16px;
  display:grid;
  gap:11px;
}

/* Duas colunas a partir de 520px DE CARTÃO. Só os campos curtos dividem a
   linha: seletor de tratamento, dentes, descrição e valor continuam
   inteiros, porque são os que têm conteúdo largo (o odontograma e o
   alternador de preço não cabem em meia linha). */
@container (min-width: 520px) {
  .treatment-row:not(.is-fechada){grid-template-columns:1fr 1fr}
  .treatment-row:not(.is-fechada) > *{grid-column:1 / -1}
  .treatment-row:not(.is-fechada) > .campo-curto{grid-column:span 1}
}

/* ------------------------------------------- O TRATAMENTO JÁ PREENCHIDO
   Recolhido, ele é uma linha: rótulo, nome, detalhe e valor. Clicar abre.
   É o que permite montar uma proposta de quatro etapas sem perder de vista
   onde se está — antes, cada etapa aberta tinha sete campos de altura. */
.treatment-row.is-fechada{
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px;
  padding:9px 10px 9px 14px;
}
.treatment-resumo{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:3px 10px;
  width:100%;
  padding:4px 2px;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
  color:inherit;
  font:inherit;
}
.resumo-rotulo{
  grid-row:1 / span 2;
  align-self:center;
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:1px;
  color:var(--clay-700);
  white-space:nowrap;
}
/* Posição explícita, não automática: o rótulo ocupa as duas linhas da
   primeira coluna, e com colocação automática o valor caía para uma
   terceira linha, embaixo e à esquerda, em vez de ficar à direita do nome. */
.treatment-resumo b{grid-column:2;grid-row:1;font:600 var(--text-sm) "DM Sans";color:#254d47}
.treatment-resumo em{
  grid-column:3;
  grid-row:1;
  font-style:normal;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--green-600);
  white-space:nowrap;
}
.treatment-resumo small{
  grid-column:2 / -1;
  grid-row:2;
  font:var(--text-xs) "DM Sans";
  color:var(--text-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.treatment-row.is-fechada:hover{border-color:#9dbdb4}
.treatment-resumo:active{transform:scale(.995)}
.row-dup,.row-fechar{font-size:var(--text-sm)}
.treatment-row-head{display:flex;align-items:center;justify-content:space-between}
.treatment-row-head span{
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:1px;
  color:var(--clay-700);
}
.treatment-row label{display:grid;gap:6px}
.treatment-row label span{font:600 var(--text-xs) "DM Sans";color:#4d6761}
.treatment-row select,.treatment-row input{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  padding:11px 12px;
  color:#254d47;
  font:var(--text-sm) "DM Sans";
  outline-color:#56a094;
}
.row-tools{display:flex;gap:5px;align-items:center}
.row-move{
  border:1px solid var(--border);
  background:var(--surface-card);
  color:#5d7a72;
  border-radius:var(--radius-xs);
  height:26px;
  width:26px;
  font-size:var(--text-xs);
  line-height:1;
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  display:grid;
  place-items:center;
  padding:0;
}
.row-move:hover:not(:disabled){
  border-color:var(--green-600);
  color:var(--green-600);
  background:var(--neutral-200);
}
.row-move:disabled{opacity:.35;cursor:default}
.treatment-row .remove-stage{position:static;height:26px;width:26px;font-size:var(--text-sm)}
.budget-mode{
  margin-top:16px;
  background:var(--neutral-100);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:14px 16px;
}
.budget-mode>span{font:700 var(--text-xs) "DM Sans";color:#3d5b55;display:block;margin-bottom:10px}
.budget-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.budget-option{
  border:1px solid var(--border);
  background:var(--surface-card);
  color:#68807a;
  border-radius:var(--radius-xs);
  padding:12px 10px;
  font:700 var(--text-xs) "DM Sans";
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.budget-option:hover{border-color:#a9c2b6;color:#2f544d}
.budget-option.is-on{background:var(--green-600);border-color:var(--green-600);color:#fff}
#budget-hint{margin:10px 0 0}
#total-wrap.is-computed input{background:var(--neutral-200);color:#5d746c;cursor:default}
.treatment-block .treatment-price{
  display:block;
  font:600 24px Fraunces,serif;
  color:var(--green-600);
  letter-spacing:-.6px;
  margin:2px 0 12px;
}
.investment-breakdown{
  display:grid;
  gap:6px;
  margin:12px 0;
  padding:12px 0;
  border-top:1px solid rgba(34,83,75,.22);
  border-bottom:1px solid rgba(34,83,75,.22);
}
.investment-breakdown div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  font:var(--text-xs) "DM Sans";
  color:#3d6058;
}
.investment-breakdown b{font-weight:700;white-space:nowrap}
.treatment-block h2{font:600 29px Fraunces,serif;letter-spacing:-.8px;margin:8px 0 10px}
.treatment-block .steps-title{font-size:22px;margin-top:22px}
.document-step strong{
  font:700 var(--text-xs) "DM Sans";
  color:#28524b;
  margin-bottom:6px;
  display:block;
}
.gallery.is-single{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
.gallery-item figcaption{padding:11px 13px}
.price-mode{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:2px}
.price-option{
  border:1px solid var(--border);
  background:var(--surface-card);
  color:#68807a;
  border-radius:var(--radius-xs);
  padding:8px 6px;
  font:700 var(--text-xs) "DM Sans";
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.price-option:hover{border-color:#a9c2b6;color:#2f544d}
.price-option.is-on{background:var(--green-600);border-color:var(--green-600);color:#fff}
.price-computed{font:var(--text-xs) "DM Sans";color:var(--text-muted);margin-top:2px}
.price-computed b{color:var(--green-600);font-weight:700}
.treatment-unit{
  display:block;
  font:var(--text-xs) "DM Sans";
  color:var(--text-muted);
  margin:-8px 0 12px;
}
.investment-breakdown span i{
  display:block;
  font-style:normal;
  font-size:var(--text-xs);
  opacity:.75;
  margin-top:2px;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.admin-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:22px;
}
.admin-head h2{font:600 var(--display-sm)/1 Fraunces,serif;letter-spacing:-.7px;margin:9px 0 0}
.admin-refresh-wrap{display:flex;align-items:center;gap:12px;flex:none}
#admin-updated{font:var(--text-xs) "DM Sans";color:var(--text-muted);white-space:nowrap}
#admin-updated.is-fresh{animation:leituraNova 1.1s ease}
@keyframes leituraNova{
  0%{color:var(--green-600);font-weight:700}
  70%{color:var(--green-600);font-weight:700}
  100%{color:var(--text-muted);font-weight:400}
}
@media(max-width:700px){
  .admin-refresh-wrap{margin-top:14px;justify-content:space-between;width:100%}
}
.admin-head p{font:var(--text-xs) "DM Sans";color:var(--muted);margin:8px 0 0;max-width:460px}
.kpi-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-bottom:22px;
}
.kpi{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:17px 18px;
  display:grid;
  gap:5px;
}
.kpi span{
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:.9px;
  text-transform:uppercase;
  color:var(--text-muted);
}
.kpi strong{font:600 34px/1 Fraunces,serif;letter-spacing:-1.2px;color:var(--text-strong)}
.kpi small{font:var(--text-xs) "DM Sans";color:var(--muted)}
/* auto-fit em vez de duas colunas fixas: numa tela larga cabem duas ou
   três; numa estreita, uma. E o cartão nunca fica menor que 400px, que é
   onde as tabelas começam a quebrar palavra no meio. */
.admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:16px;
  align-items:start;
}
.admin-card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:20px 22px;
}
.admin-card h3{font:600 var(--text-lg) Fraunces,serif;letter-spacing:-.4px;margin:0}
.admin-sub{font:var(--text-xs)/1.55 "DM Sans";color:var(--muted);margin:6px 0 18px}
.funnel{display:grid;gap:11px}
.funnel-row{display:grid;grid-template-columns:1fr 2.1fr auto 42px;align-items:center;gap:11px}
.funnel-label{font:600 var(--text-xs) "DM Sans";color:#4d6761}
.funnel-track{
  background:var(--neutral-200);
  border-radius:var(--radius-xs);
  height:20px;
  overflow:hidden;
}
.funnel-bar{
  display:block;
  height:100%;
  background:var(--green-600);
  border-radius:0 4px 4px 0;
  min-width:3px;
  transition:width var(--dur-panel) var(--ease-out);
}
.funnel-value{font:600 var(--text-base) Fraunces,serif;color:var(--text-strong);text-align:right}
.funnel-step{
  font:600 var(--text-xs) "DM Sans";
  color:var(--text-muted);
  font-style:normal;
  text-align:right;
}
.admin-grid-wide{margin-top:16px}
/* Separa o que existia antes do que veio com os documentos. As métricas de
   conta e proposta são as que se olha todo dia; as de receita vêm depois. */
.admin-corte{margin:34px 0 18px;padding-top:20px;border-top:1px solid var(--border)}
.admin-corte span{
  display:block;
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--text-muted);
}
.admin-corte small{
  display:block;
  font:var(--text-xs)/1.55 "DM Sans";
  color:var(--muted);
  margin-top:5px;
  max-width:520px;
}
.rank-row{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.9fr) auto 92px;
  align-items:center;
  gap:11px;
}
.rank-label{
  font:600 var(--text-xs) "DM Sans";
  color:#4d6761;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rank-money{
  font:600 var(--text-xs) "DM Sans";
  color:var(--text-muted);
  font-style:normal;
  text-align:right;
  white-space:nowrap;
}
.ticket-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:10px;
  margin-bottom:12px;
}
.ticket-strip div{
  background:var(--cream);
  border-radius:var(--radius-xs);
  padding:10px 11px;
  min-width:0;
}
.ticket-strip span{
  display:block;
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--text-muted);
}
.ticket-strip b{
  display:block;
  font:600 var(--text-base) Fraunces,serif;
  color:var(--text-strong);
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ticket-note{margin:0 0 18px}
.admin-empty{font:var(--text-xs) "DM Sans";color:var(--muted);margin:0}
.rank-chips{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start}
.rank-chips span{
  background:var(--soft);
  border-radius:var(--radius-xs);
  padding:3px 7px;
  font:600 var(--text-xs) "DM Sans";
  color:#3f5f59;
  white-space:nowrap;
}
.rank-chips .rank-more{background:transparent;color:var(--text-muted)}
.rank-total{white-space:nowrap;text-align:right}
.rank-total b{font:600 var(--text-sm) Fraunces,serif;color:var(--text-strong)}
#rank-accounts td:nth-child(3){text-align:right;font-weight:600;color:var(--text-strong)}
.funnel-table{width:100%;border-collapse:collapse;margin-top:18px;font:var(--text-xs) "DM Sans"}
.funnel-table th{
  text-align:left;
  font-weight:700;
  color:var(--text-muted);
  font-size:var(--text-2xs);
  letter-spacing:.7px;
  text-transform:uppercase;
  padding:7px 0;
  border-bottom:1px solid #e7e8e1;
}
.funnel-table td{padding:8px 0;border-bottom:1px solid var(--neutral-200);color:#4d6761}
.funnel-table td:nth-child(n+2){text-align:right;font-weight:600;color:var(--text-strong)}
/* Mesma altura das sugestões: a caixa para de crescer e rola por dentro. */
.admin-table-wrap{overflow:auto;max-height:420px}
.admin-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--paper);
  box-shadow:inset 0 -1px 0 #e7e8e1;
}
@media (max-width:760px){
  .admin-table-wrap{max-height:300px}
}
.admin-table{width:100%;border-collapse:collapse;font:var(--text-xs) "DM Sans"}
.admin-table th{
  text-align:left;
  font-weight:700;
  color:var(--text-muted);
  font-size:var(--text-2xs);
  letter-spacing:.7px;
  text-transform:uppercase;
  padding:8px 10px 8px 0;
  border-bottom:1px solid #e7e8e1;
  white-space:nowrap;
}
.admin-table td{
  padding:11px 10px 11px 0;
  border-bottom:1px solid var(--neutral-200);
  color:#4d6761;
  vertical-align:top;
}
/* break-word quebra só quando não há mesmo alternativa; "anywhere"
   partia "victoria_khaled@hotmail.com" em três linhas sem precisar. */
.admin-table b{
  display:block;
  font-size:var(--text-xs);
  color:var(--text-strong);
  overflow-wrap:break-word;
  hyphens:none;
}
.admin-table small{display:block;font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}
.plano{
  display:inline-block;
  border-radius:var(--radius-sm);
  padding:4px 9px;
  font:700 var(--text-xs) "DM Sans";
  white-space:nowrap;
}
.plano-active{background:var(--neutral-200);color:#1f6a4a}
.plano-inactive{background:var(--neutral-200);color:var(--text-muted)}
.plano-overdue{background:var(--neutral-100);color:#ad563a}
.plano-canceled{background:var(--neutral-100);color:#8a7a75}
/* ------------------------------------------ A COLUNA LATERAL DESCE MAIS CEDO
   A barra de etapas do formulário precisa de 579px para os cinco rótulos
   caberem. Com a coluna lateral de 272px ao lado, o cartão só chega a isso
   em telas de 1366px ou mais — em 1024, 1152 e 1280 (a maioria das janelas
   de notebook) o "05 Observações" ficava cortado no canto.

   A escolha foi dar a largura ao formulário. A coluna lateral é informativa
   (a explicação da IA e a dica da semana); o formulário é trabalho. Abaixo de
   1366px ela desce para baixo do formulário em vez de disputar espaço com
   ele — continua visível, só deixa de espremer a ferramenta.
--------------------------------------------------------------------------- */
@media(max-width:1365px){
  .workspace{grid-template-columns:minmax(0,1fr)}
  .builder-side{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}

@media(max-width:950px){
  .sidebar{width:210px}
  .main-area{width:calc(100% - 210px);margin-left:210px}
  .workspace{grid-template-columns:1fr}
  .builder-side{grid-template-columns:1fr 1fr}
  .settings-layout,.admin-grid{grid-template-columns:1fr}
  .settings-aside{display:none}
}
@media(max-width:700px){
  .sidebar{
    position:static;
    width:100%;
    height:auto;
    padding:16px;
    flex-direction:row;
    align-items:center;
    gap:12px;
  }
  .clinic-mini{display:none}
  .side-footer{display:flex;margin:0 0 0 auto;padding:0;border:0;gap:0}
  .side-footer>div{display:none}
  .sidebar .instagram-link{margin:0 0 0 12px}
  .sidebar .instagram-link span{display:none}
/* grid-auto-flow:column em vez de um número fixo de colunas. A barra tinha
  4 colunas cravadas; quando as abas viraram 5 (e 6 para o admin), elas
  quebravam para uma segunda linha dentro de uma barra de altura fixa e a
  primeira fileira ficava cortada acima da tela. Assim ela se divide pelo
  número de abas que existir, hoje e quando eu acrescentar outra. */

/* ------------------------------------------------- BARRA DE ABAS NO CELULAR
  Eram seis abas empilhadas numa faixa verde no alto da tela, cada uma com
  ícone e rótulo de 8px — o rótulo quebrava no meio da palavra e a faixa
  virava um paredão.
  
  Agora é uma pastilha flutuante embaixo, como a de um aplicativo: só o
  ícone em cada aba, e o rótulo aparece apenas na aba aberta. É o que
  devolve o espaço — em vez de dividir a largura por seis rótulos, divide
  por seis ícones e sobra folga para o que está aberto.
  
  Embaixo e não no alto porque o polegar chega lá, e porque é onde a barra
  que ela mostrou fica no celular.
  
  A "luz" é a fita acesa acima da aba aberta: um elemento só, que desliza
  de uma aba para a outra (a posição vem do JS, em `acenderLuzDaAba`).
  Com um por aba ela piscaria de um lugar para o outro; com um só, escorrega.
  ------------------------------------------------------------------------- */
  .app-nav{
    --sentido:horizontal;
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(9px + env(safe-area-inset-bottom));
    top:auto;
    z-index:20;
    margin:0;
    display:flex;
    align-items:stretch;
    gap:2px;
    padding:6px;
    height:auto;
    border-radius:999px;
    background:rgba(255,254,250,.80);
    backdrop-filter:blur(18px) saturate(1.5);
    -webkit-backdrop-filter:blur(18px) saturate(1.5);
    border:1px solid rgba(17,59,56,.10);
    box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 14px 34px -14px rgba(15,45,40,.45),
    0 3px 10px -6px rgba(15,45,40,.25);
    overflow:visible;
  }
/* As abas fechadas ocupam só o ícone (`flex:0 1 auto`) e a aberta fica com
  TODA a sobra (`flex:1 1 auto`) — é o que dá lugar ao rótulo inteiro. Com
  proporções fixas, "Minha clínica" saía como "Minha…".
  
  `min-width:0` em todas é o cinto de segurança: nenhuma aba pode empurrar a
  barra para fora da tela, não importa quantas existam. */
  .app-nav button{
    flex:0 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:10px 8px;
    border-radius:999px;
    background:transparent;
    font:600 var(--text-2xs)/1 "DM Sans";
    letter-spacing:0;
    color:#5f7169;
    text-align:center;
    position:relative;
    /* A largura NÃO faz transição de propósito. Se ela animasse, a fita acima
     seria medida no meio do caminho e pararia na aba errada — o JS precisa
     da largura final no mesmo quadro em que a aba abre. */
  transition:background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }
  .app-nav button span{width:auto;margin:0;color:inherit;display:block;flex:none}
  .app-nav button span svg{width:20px;height:20px;display:block;margin:0}
/* O rótulo só existe na aba aberta. Nas outras ele continua no HTML (leitor
  de tela e busca continuam achando), mas não ocupa espaço. */
  .app-nav button i{
    display:none;
    font-style:normal;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
  }
  .app-nav button.active{
    flex:1 1 auto;
    background:rgba(31,119,112,.11);
    color:#17544d;
  }
  .app-nav button.active i{display:block}
  .app-nav button.active span{color:var(--teal)}
  .app-nav button:hover{background:rgba(31,119,112,.07);color:#17544d}
  .app-nav button.active:hover{background:rgba(31,119,112,.13)}

/* A fita acesa. Fica na borda de cima da pastilha e joga luz para dentro
  da tela — por isso as sombras são todas para cima (y negativo). */
  .nav-luz{
    display:block;
    position:absolute;
    top:-1px;
    left:0;
    width:0;
    height:4px;
    /* deitada: o JS mede na horizontal (ver --sentido mais acima) */
  border-radius:999px;
    background:#1c6b63;
    opacity:0;
    pointer-events:none;
    transition:transform var(--dur-panel) cubic-bezier(.34,1.1,.4,1), width var(--dur-panel) cubic-bezier(.34,1.1,.4,1), opacity var(--dur-base) var(--ease-out);
  }
  .nav-luz.acesa{opacity:1}
/* O halo: a mesma fita, larga e desfocada, saindo por cima. */
  .nav-luz:before{
    content:"";
    position:absolute;
    left:50%;
    top:-9px;
    width:150%;
    height:22px;
    transform:translateX(-50%);
    border-radius:999px;
    background:var(--teal);
    filter:blur(9px);
    opacity:.55;
  }
/* A bolinha de aviso da aba "Em tratamento" precisa sair do fluxo: dentro de
  uma aba sem rótulo ela empurrava o ícone para o lado. */
/* Uma pastilha que desliza sozinha é movimento decorativo: sem ele a aba
  aberta continua clara e com rótulo, que é o que informa. */
  @media(prefers-reduced-motion:reduce){
    .app-nav button,.nav-luz{transition:none}
  }

/* A barra saiu do alto: o respiro vai para baixo, e o aviso sobe para não
  ficar atrás dela. */
  .app-shell{display:block;padding-top:0}
  .main-area{width:100%;margin:0;padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .topbar{height:77px;padding:0 20px}
  .topbar-user>div,.more{display:none}
  .view{padding:24px 16px}
/* No celular o aviso era três colunas numa linha só: bolinha, texto e botão.
  Com o texto no tamanho legível a coluna do meio virou uma sanfona de seis
  linhas. O botão desce para a própria linha e o texto recupera a largura. */
  .setup-banner{align-items:start;flex-wrap:wrap;row-gap:6px}
  .setup-banner div:nth-child(2){flex:1 1 auto;min-width:0}
  .setup-banner button{flex:1 0 100%;text-align:left;padding:4px 0 0}
  .budget-options{grid-template-columns:1fr}
  .treatment-default{display:block}
  .default-actions{margin-top:10px}
  .crop-card{padding:18px 15px}
  .crop-actions{flex-direction:column-reverse}
  .crop-actions .outline-button{width:100%}
  .paywall{display:block}
  .paywall .generate{margin-top:14px;width:100%}
  .setup-banner button{white-space:nowrap}
  .fields.two,.document-steps,.gallery{grid-template-columns:1fr}
  .admin-head{display:block}
  .admin-head .outline-button{margin-top:14px}
  .funnel-row{grid-template-columns:1fr auto 40px;gap:8px}
  .rank-row{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px}
  .rank-label{order:0}
  .rank-row .funnel-value{order:1;font-size:var(--text-sm)}
  .rank-money{order:2}
  .rank-row .funnel-track{grid-column:1/-1;order:3;height:14px}
  .rank-chips{max-width:none}
  .funnel-track{grid-column:1/-1;order:2}
  .funnel-label{order:0}
  .funnel-value{order:1}
  .funnel-step{order:1}
  .photo-grid{grid-template-columns:1fr}
/* Uma coluna única resolvia o vazamento, mas 15 pastilhas empilhadas viravam
  uma rolagem longa e cansativa. Agora que cada pastilha tem a largura da
  própria palavra, duas ou três entram por linha sem estourar nada — e a
  bolinha e o acolchoamento encolhem um pouco para caber mais uma. */
  .include-options .include-chip{padding:0 11px;gap:8px}
  .include-options .include-chip i{width:16px;height:16px}
/* O contador empurrava "O que está incluso?" para duas linhas. Descendo
  para a linha de baixo, a pergunta volta a caber inteira. */
  .include-head{flex-wrap:wrap}
  .payment-choices{grid-template-columns:1fr}
  .pick-head{flex-wrap:wrap}
  .pick-badge{order:3;margin-left:29px}
  .include-group{padding:15px 14px}
  .builder,.settings-card{padding:23px 19px}
  .builder-side{grid-template-columns:1fr}
  .remove-stage{height:24px;width:24px;font-size:var(--text-sm)}
  .history-actions{margin-top:12px;justify-content:flex-start}
  .proposal-document{padding:30px 25px}
  .document-actions{gap:8px}
  .document-actions{flex-wrap:wrap;gap:8px}
  .document-actions #copy-link{display:none}
  .document-actions .generate{padding:11px}
  .app-brand{font-size:var(--text-xl)}
}
@media print{
/* Sem isto o documento sai sem nenhum bloco colorido. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:12mm}
  body{background:#fff}
  .sidebar,.topbar,.document-actions,.toast,.share-panel{display:none!important}
  .main-area{width:100%;margin:0}
  .view{padding:0}
  .view:not(#document-view){display:none!important}
  #document-view{display:block!important}
  .proposal-document{max-width:none;box-shadow:none;padding:0}

  p,li{orphans:3;widows:3}

/* Só o que é PEQUENO fica inteiro. Proibir quebra em bloco alto obriga o
  navegador a empurrá-lo inteiro para a página seguinte, e o documento
  vira uma sequência de páginas quase vazias. */
  .document-step,
  .choice,
  .gallery-item,
  .investment,
  .investment-breakdown>div,
  .document-footer{
    break-inside:avoid;
    page-break-inside:avoid;
  }

/* Um único título que não pode ficar órfão: o que abre a grade de etapas. */
  .steps-title{break-after:avoid-page;page-break-after:avoid}

  .document-section{padding:16px 0}

/* O Chrome ignora "não quebrar" em itens de grid ao paginar — os cartões
  saíam cortados ao meio. Em papel eles viram uma lista empilhada, que
  o navegador sabe paginar direito. */
  .document-steps,.payment-choices,.gallery{display:block}
  .document-step,.choice,.gallery-item{margin-bottom:9px}
  .document-step:last-child,.choice:last-child,.gallery-item:last-child{margin-bottom:0}
  .document-step{padding:13px 14px}
  .document-step p{font-size:var(--text-xs);line-height:1.5}
  .payment-choices{gap:8px}
  .choice{padding:12px 13px}
  .choice h3{font-size:var(--text-base)}
  .choice>strong{font-size:var(--text-lg)}
  .choice-pay{background:none;color:var(--text-strong);border:1px solid #b9c9b3;padding:8px}
  .choice-pay b{display:none}
  .whatsapp-tag{border-color:#b9c9b3}

  .gallery{gap:9px}
  .gallery-item img{
    display:block;
    width:100%;
    height:auto;
    max-height:70mm;
    object-fit:contain;
    background:var(--neutral-200);
  }

  .document-hero{padding:20px 0 24px}
  .document-hero h1{font-size:36px}
}
a.side-footer{
  text-decoration:none;
  color:inherit;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  border-radius:var(--radius-xs);
}
a.side-footer:hover{background:rgba(255,255,255,.06)}
a.side-footer:hover .help-dot{border-color:var(--lime-300);color:var(--lime-300)}
.sidebar .instagram-link{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 7px 0;
  color:#a9c4bb;
  text-decoration:none;
  font:600 var(--text-xs) "DM Sans";
  transition:color var(--dur-fast) var(--ease-out);
}
.sidebar .instagram-link:hover{color:var(--lime-300)}
/* ---------------------------------------------------------------- FICHA DE DENTES
   Odontograma: cada dente tem a silhueta do seu tipo, e a raiz aponta para
   fora da boca — para cima na arcada de cima, para baixo na de baixo. O
   número fica do lado de fora, como na ficha de papel, para não poluir o
   meio, que é onde as duas arcadas se encontram.
------------------------------------------------------------------------- */
.teeth-box{
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--neutral-100);
  margin-top:14px;
  padding:0;
}
.teeth-box>summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  font:600 var(--text-xs) "DM Sans";
  color:#4e6962;
}
.teeth-box>summary::-webkit-details-marker{display:none}
.teeth-box>summary::after{
  content:"▾";
  margin-left:auto;
  color:var(--text-muted);
  font-size:var(--text-xs);
  transition:transform var(--dur-base) var(--ease-out);
}
.teeth-box[open]>summary::after{transform:rotate(180deg)}
.teeth-box>summary i{font-style:normal;font-weight:400;color:var(--text-muted)}
.teeth-box>summary b{font:600 var(--text-xs) "DM Sans";color:var(--green-600)}

.teeth-group{padding:0 14px 14px}
/* A GRADE COMO FICHA, NÃO COMO PAREDE
   Trinta e dois dentes brancos colados uns nos outros, cada um com sombra,
   viram um bloco que grita. O painel branco atrás, o vão maior entre eles e
   a sombra quase apagada transformam o mesmo conteúdo em ficha de consulta:
   quem fala alto é o dente marcado, o resto é referência. */
.teeth-painel{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 10px}
.teeth-legend{
  display:block;
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:8px;
}
.teeth-grid{
  display:grid;
  /* DUAS colunas, não "quantas couberem": são o lado direito e o lado
     esquerdo da boca. Com auto-fit, numa tela larga cabiam três, e a arcada
     de baixo subia para a mesma linha da de cima — deixava de ser odontograma
     e virava uma fileira de dentes. */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 26px;
  /* A linha vertical é a linha média da boca — separa o lado direito do
     esquerdo. Desenhada como fundo, funciona sem saber quantas colunas a
     grade resolveu usar. */
  background:linear-gradient(var(--border),var(--border)) center/1px 100% no-repeat;
}
.hemi{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.teeth-deciduos .teeth-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.teeth-deciduos .hemi{grid-template-columns:repeat(5,minmax(0,1fr))}

/* O botão é o dente inteiro: silhueta mais número. */
/* O número fica sempre do lado de FORA da boca: acima na arcada de cima,
   abaixo na de baixo. Entre as duas fica o vão da mordida, limpo. */
.tooth{
  border:0;
  background:transparent;
  padding:3px 0 4px;
  cursor:pointer;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:1px;
  min-width:0;
  border-radius:var(--radius-xs);
  transition:background-color var(--dur-press) var(--ease-out);
}
.tooth.is-lower{flex-direction:column}
/* A arte é imagem, não desenho: duas por dente (natural e marcada), uma por
   cima da outra. Trocar a cor de um dente branco por filtro de CSS não dá
   verde, dá cinza — por isso a segunda imagem. */
/* A sombra fica no invólucro, e o giro nas imagens: se a sombra girasse
   junto, na arcada de cima ela cairia para CIMA, que é de onde vem a luz. */
.tooth-art{
  position:relative;
  display:block;
  line-height:0;
  /* Sombra de dente marcado é uma; de trinta e dois é sujeira. */
  filter:drop-shadow(0 1px 1px rgba(60,50,30,.1));
  transition:opacity var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.tooth:not(.is-on) .tooth-art{opacity:.78}
.tooth:hover .tooth-art,.tooth.is-on .tooth-art{opacity:1;filter:drop-shadow(0 1px 2px rgba(60,50,30,.2))}
/* A largura sai da casa, não de um número fixo: o molar (o mais largo da
   arte, 121px) ocupa 92% da casa e os outros a fração que lhes cabe. Como as
   quatro imagens têm a mesma altura, a proporção da largura já acerta a
   altura de todos, e a escala entre os tipos continua sendo a real. */
.tooth-art img{
  display:block;
  width:calc(var(--dw) / 121 * 84%);
  height:auto;
}
.tooth-art .tooth-on{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.tooth.is-on .tooth-on{opacity:1}
/* A ilustração vem com a coroa para cima, que é a arcada de BAIXO. A de cima
   é a mesma virada — e assim as coroas das duas se encontram no meio. */
.tooth:not(.is-lower) .tooth-art img{transform:scaleY(-1)}
.tooth i{
  font:500 var(--text-2xs) "DM Sans";
  font-style:normal;
  color:var(--text-muted);
  line-height:1;
  transition:color var(--dur-press) var(--ease-out);
}
.tooth:hover{background:var(--green-50)}
.tooth:hover i{color:var(--green-600)}
.tooth.is-on{background:var(--green-50)}
.tooth.is-on i{color:var(--green-700);font-weight:700}
.tooth:focus-visible{outline:2px solid #56a094;outline-offset:1px}

/* Linha entre as arcadas: é onde os dentes se encontram na mordida. */
/* O plano da mordida: as duas hemiarcadas de baixo levam a linha, senão no
   PC ela atravessaria só metade da ficha. */
.hemi-baixo{margin-top:9px;padding-top:11px;border-top:1px solid var(--border)}

.teeth-foot{display:flex;align-items:center;gap:12px;padding:0 14px 12px}
.teeth-foot small{font:var(--text-xs)/1.45 "DM Sans";color:var(--text-muted);flex:1}
.teeth-clear{
  border:1px solid var(--border);
  background:var(--surface-card);
  border-radius:var(--radius-xs);
  color:var(--text-muted);
  font:600 var(--text-xs) "DM Sans";
  padding:6px 11px;
  cursor:pointer;
  flex:none;
}
.teeth-clear:hover{border-color:#c9a08c;color:var(--clay-700)}

@media(max-width:700px){
  .teeth-grid,.teeth-deciduos .teeth-grid{grid-template-columns:1fr;gap:4px;background:none}
  /* Empilhadas numa coluna só, as duas hemiarcadas de baixo desenhariam DUAS
     linhas: a do plano da mordida e outra no meio da arcada inferior, que não
     existe. A segunda perde a linha. */
  .hemi-baixo + .hemi-baixo{margin-top:4px;padding-top:0;border-top:0}
  .tooth{padding:4px 0 5px}
  .tooth i{font-size:var(--text-2xs)}
  .teeth-foot{flex-direction:column;align-items:stretch}
  .teeth-clear{width:100%;padding:9px}
}
@media print{
  .teeth-box{display:none}
}

/* ---------------------------------------------------------------- CELULAR: SEM ZOOM AUTOMÁTICO
   O Safari do iPhone dá zoom sozinho quando o campo tem fonte menor que
   16px, e depois não volta — a pessoa fica com o app inteiro ampliado.
   Manter 16px no celular é a única forma confiável de evitar isso (o
   maximum-scale no viewport é ignorado e ainda tira o zoom de quem precisa).
   O !important existe porque as regras originais usam classe e venceriam
   por especificidade, independente da ordem.
------------------------------------------------------------------------- */
@media(max-width:820px){
  input,select,textarea{font-size:var(--text-md)!important;line-height:1.35}
  .stage-term select{width:auto;min-width:0;padding:10px 6px 10px 9px}
  label,.field label{font-size:var(--text-xs)}
}
/* ---------------------------------------------------------------- LISTA DE PROPOSTAS
   Mesma leitura da home: quem é, o que é, e em que pé está. A etiqueta é o
   que se procura ao bater o olho, então ela vem antes dos botões. */
.proposal-history{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 8px;
  box-shadow:0 14px 38px rgba(37,66,60,.07);
}
/* Cada paciente é um cartão, não uma linha.

   Eram blocos altos (nome, tratamento, acompanhamento e cinco botões)
   separados por um fio de 1px quase invisível — com três pacientes na tela
   não dava para dizer onde um terminava e o outro começava.

   O fundo creme dentro do cartão branco desenha o bloco inteiro, e o vão de
   9px faz o resto. Um fio mais escuro resolveria só metade: marcaria a
   fronteira, mas não mostraria a extensão de cada paciente. */
.history-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 16px;
  align-items:center;
  padding:15px 16px;
  border-radius:var(--radius-sm);
  background:var(--neutral-100);
  border:1px solid var(--border);
}
.history-item+.history-item{margin-top:9px}
/* Quem não abriu o link continua sendo o cartão diferente da lista. Antes a
   linha era branca e o var(--neutral-100) já saltava; agora que TODAS são creme, esse
   tom ficou perto demais do vizinho — o aviso precisa de mais âmbar e de uma
   borda da mesma família para continuar sendo visto de longe. */
.history-item.esfriando{background:#fdf1e0;border-color:#f0dcc2}
.history-quem strong{display:block;font:600 var(--text-base) "DM Sans";color:var(--text-strong)}
.history-quem small{
  display:block;
  font:var(--text-xs) "DM Sans";
  color:var(--text-muted);
  margin-top:2px;
}
.history-item .depois-tag{justify-self:end}
.history-item .history-actions{
  grid-column:1/-1;
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  padding-top:11px;
}
/* as etiquetas são as mesmas da home: um vocabulário só para os dois lugares */
.depois-tag{
  flex:none;
  font:700 var(--text-xs) "DM Sans";
  border-radius:var(--radius-full);
  padding:6px 12px;
  white-space:nowrap;
}
.depois-tag.lida{background:#eef3ee;color:var(--green-700)}
.depois-tag.falou{background:var(--lime-300);color:#3d4a2a}
.depois-tag.parada{background:#f6e3d3;color:var(--clay-700)}
@media(max-width:700px){
  .history-item{grid-template-columns:1fr}
  .history-item .depois-tag{justify-self:start}
  .history-actions button{flex:1;min-width:calc(50% - 4px)}
}

/* ---------------------------------------------------------------- RECEITAS */
/* Certificado digital: a exigência que trava todo mundo na primeira vez. */
.cert-box{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--neutral-100);
  padding:18px 19px;
  margin-bottom:18px;
}
.cert-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.cert-head>span{flex:none;font-size:var(--text-lg);line-height:1.2}
.cert-head strong{display:block;font-size:var(--text-sm);color:var(--text-strong);margin-bottom:4px}
.cert-head p{margin:0;font:var(--text-xs)/1.6 "DM Sans";color:#5c716b}
.cert-head b{color:#2b433e}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:8px}
.cert-card{
  display:block;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:11px 12px;
  text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cert-card:hover{border-color:#9dbdb4;box-shadow:0 3px 10px rgba(37,66,60,.07)}
.cert-card strong{display:block;font:600 var(--text-xs) "DM Sans";color:var(--text-strong)}
.cert-card small{display:block;font-size:var(--text-xs);color:var(--text-muted);margin-top:1px}
.cert-card i{
  display:block;
  font-style:normal;
  font:600 var(--text-xs) "DM Sans";
  color:var(--green-600);
  margin-top:7px;
}
.cert-faq{margin-top:16px;border-top:1px solid var(--neutral-200);padding-top:14px}
.cert-faq>summary{
  cursor:pointer;
  list-style:none;
  font:600 var(--text-xs) "DM Sans";
  color:var(--green-600);
  display:flex;
  align-items:center;
  gap:6px;
}
.cert-faq>summary::-webkit-details-marker{display:none}
.cert-faq>summary::after{
  content:"▾";
  color:var(--text-muted);
  transition:transform var(--dur-base) var(--ease-out);
}
.cert-faq[open]>summary::after{transform:rotate(180deg)}
.cert-faq-body{padding-top:12px}
.cert-faq-body h5{margin:14px 0 4px;font:600 var(--text-xs) "DM Sans";color:var(--text-strong)}
.cert-faq-body h5:first-child{margin-top:0}
.cert-faq-body p{margin:0;font:var(--text-xs)/1.65 "DM Sans";color:#5c716b}
.cert-faq-body b{color:#2b433e}
p.cert-faq-note{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid var(--neutral-200);
  font-size:var(--text-xs);
  color:var(--text-muted);
}
.cert-have{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--neutral-200);
}
.cert-have small{flex:1;min-width:200px;font:var(--text-xs)/1.5 "DM Sans";color:var(--text-muted)}
.cert-form{
  margin-top:14px;
  padding:15px 16px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
}
.cert-form-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
/* O resumo que fica no lugar do painel. O botão Alterar mora aqui: é ele
   que garante que nada fique escondido para sempre por um clique errado. */
.cert-done{
  display:flex;
  align-items:center;
  gap:13px;
  background:#eef5ef;
  border:1px solid #cfe2d3;
  border-radius:var(--radius-xs);
  padding:13px 16px;
  margin-bottom:18px;
}
.cert-done>span{flex:none;font-size:var(--text-md)}
.cert-done div{flex:1;min-width:0}
.cert-done strong{display:block;font-size:var(--text-xs);color:var(--text-strong)}
.cert-done small{font:var(--text-xs) "DM Sans";color:#6c8a7c}
.cert-done .outline-button{flex:none}
@media(max-width:700px){
  .cert-have .outline-button,.cert-form-actions>*{width:100%}
  .cert-done{flex-wrap:wrap}
  .cert-done .outline-button{width:100%}
}
.cert-link{
  display:inline-block;
  margin-top:15px;
  font:600 var(--text-xs) "DM Sans";
  color:var(--green-600);
  text-decoration:none;
}
.cert-link:hover{text-decoration:underline}
@media(max-width:700px){
  .cert-grid{grid-template-columns:1fr 1fr}
}
/* Seletor de documento. Três caminhos que compartilham paciente,
   certificado e plataforma — por isso moram na mesma tela. */
.doc-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:22px}
.doc-tab{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:12px 10px;
  cursor:pointer;
  text-align:left;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  min-width:0;
}
.doc-tab b{display:block;font:600 var(--text-xs) "DM Sans";color:#4d6761}
.doc-tab small{display:block;font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}
.doc-tab:hover{border-color:#9dbdb4}
.doc-tab.is-on{
  background:#eef5ef;
  border-color:var(--text-muted);
  box-shadow:inset 0 0 0 1px var(--text-muted);
}
.doc-tab.is-on b{color:var(--text-strong)}
.doc-tab.is-on small{color:#6c8a7c}
@media(max-width:700px){
  .doc-picker{grid-template-columns:1fr;gap:6px}
  .doc-tab{display:flex;align-items:baseline;gap:8px}
  .doc-tab small{margin:0}
}
.rx-models{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px}
/* Sem display:grid o rótulo fica na mesma linha do campo — as outras
   labels do app herdam isso de .fields, e estas aqui estão fora dele. */
.rx-models label{
  flex:1;
  min-width:190px;
  display:grid;
  gap:7px;
  color:#4d6761;
  font-size:var(--text-xs);
  font-weight:600;
}
.rx-models select{width:100%}
.rx-subtitle{
  font:600 var(--text-xs) "DM Sans";
  color:#4d6761;
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.rx-item{
  background:var(--neutral-100);
  border-radius:var(--radius-xs);
  padding:12px 13px;
  margin-bottom:9px;
  position:relative;
}
.rx-item-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rx-item-tools{display:flex;align-items:center;gap:6px}

/* ------------------------------------- O MEDICAMENTO DEPOIS DE INCLUÍDO
   Vira cartão de leitura. Os cinco campos abertos de uma vez eram uma
   parede de formulário: com três medicamentos a tela virava quinze caixas
   de texto, e nenhuma delas pedia para ser mexida. */
.rx-cartao{
  border:1px solid var(--border);
  border-left:3px solid var(--green-600);
  background:var(--surface-card);
  border-radius:var(--radius-xs);
  padding:13px 15px;
  margin-bottom:9px;
}
.rx-cartao-topo{display:flex;align-items:flex-start;gap:10px}
.rx-cartao-n{
  flex:none;width:21px;height:21px;border-radius:50%;
  background:var(--green-900);color:#fff;
  font:700 var(--text-2xs)/21px "DM Sans";text-align:center;
}
.rx-cartao-topo b{flex:1;min-width:0;font:600 var(--text-sm)/1.35 "DM Sans";color:#254d47}
.rx-cartao-acoes{display:flex;align-items:center;gap:5px;flex:none}
.rx-acao{
  border:1px solid transparent;background:transparent;color:#5d726c;
  border-radius:var(--radius-xs);padding:4px 9px;
  font:600 var(--text-2xs) "DM Sans";cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rx-acao:hover{background:var(--surface-sunken);color:var(--green-600)}
.rx-acao.perigo{font-size:var(--text-sm);line-height:1;padding:3px 8px}
.rx-acao.perigo:hover{color:var(--clay-700);background:var(--clay-100)}
.rx-cartao-pos{margin:7px 0 0 31px;font:var(--text-sm)/1.5 "DM Sans";color:#3d5b55}
.rx-cartao-total{margin:5px 0 0 31px;font:var(--text-xs) "DM Sans";color:var(--text-muted)}
.rx-cartao-total b{color:#254d47;font-weight:600}

/* Em edição o cartão se abre, e o aro verde diz qual está aberto. */
.rx-item.is-editando{border-color:var(--green-600);box-shadow:0 0 0 1px var(--green-600) inset}

/* A conta da quantidade, feita a partir da posologia. */
.rx-conta{
  margin:9px 0 0;padding:8px 11px;border-radius:var(--radius-xs);
  background:var(--clay-100);color:var(--clay-700);
  font:var(--text-xs)/1.5 "DM Sans";
}
.rx-conta.ok{background:var(--lime-100);color:#3d5b55}
.rx-conta b{font-weight:700}
.rx-usar-conta{
  border:0;background:transparent;color:inherit;cursor:pointer;
  font:700 var(--text-xs) "DM Sans";text-decoration:underline;padding:0;margin-left:4px;
}
/* "Guardar nos meus medicamentos". Discreto: aparece em toda linha
   preenchida, e quem usa o catálogo nunca precisa dele. */
.rx-guardar{
  border:1px solid var(--border);background:var(--surface-card);color:#5d726c;
  border-radius:999px;padding:4px 10px;font:600 var(--text-2xs) "DM Sans";cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rx-guardar:hover{border-color:var(--green-600);color:var(--green-600)}

/* ------------------------------------------- BUSCA NO CATÁLOGO
   O que tirou a lentidão da emissão: digitar, clicar, e o medicamento entra
   com dosagem, apresentação, quantidade e posologia prontas. */
/* A BUSCA É A PORTA DA TELA. Ela era um campo igual aos outros, perdida
   entre rótulo e dica; agora tem a altura de um botão grande, a lupa
   dentro e o foco em aro verde. É o primeiro gesto de toda receita. */
.rx-busca-caixa{position:relative;margin-bottom:16px}
.rx-busca-campo{
  display:flex;align-items:center;gap:11px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface-card);
  padding:0 16px;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.rx-busca-campo:focus-within{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(31,119,112,.12)}
.rx-busca-campo svg{flex:none;width:19px;height:19px;color:var(--green-600)}
.rx-busca-campo input{
  flex:1;min-width:0;
  border:0;background:transparent;padding:15px 0;
  font:var(--text-base) "DM Sans";color:#254d47;
}
.rx-busca-campo input:focus{outline:none}
.rx-busca-campo input::placeholder{color:#9aa8a0}
/* O X nativo do type=search some: ele some sozinho quando o campo esvazia,
   e no meio da caixa grande ele parecia um botão de fechar a tela. */
.rx-busca-campo input::-webkit-search-cancel-button{display:none}
.rx-busca-dica{display:block;margin-top:7px}
.rx-busca-lista{
  position:absolute;left:0;right:0;top:100%;z-index:20;
  margin-top:4px;max-height:320px;overflow:auto;
  background:var(--surface-card);border:1px solid var(--border);
  border-radius:var(--radius-xs);box-shadow:0 18px 40px -22px rgba(21,63,59,.45);
}
.rx-achado{
  display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:9px 12px;border-bottom:1px solid var(--neutral-200);
}
.rx-achado:last-child{border-bottom:0}
.rx-achado:hover{background:var(--surface-sunken)}
.rx-achado b{display:block;font:600 var(--text-sm) "DM Sans";color:#254d47}
.rx-achado small{display:block;font:var(--text-xs)/1.4 "DM Sans";color:var(--text-muted);margin-top:2px}
.rx-selo{
  display:inline-block;margin-top:5px;padding:2px 7px;border-radius:999px;
  background:var(--clay-100);color:var(--clay-700);
  font:700 10px "DM Sans";font-style:normal;letter-spacing:.05em;
}
.rx-selo.meu{background:var(--lime-100);color:#3d5b55}
.rx-nada{margin:0;padding:12px;font:var(--text-xs)/1.5 "DM Sans";color:var(--text-muted)}

/* O VAZIO QUE CONVIDA A BUSCAR. Tracejado e sem peso: ele não é conteúdo,
   é o lugar onde o conteúdo vai aparecer. O botão de escrever à mão fica
   ali porque é a saída de quem não achou — não a porta de entrada. */
.rx-vazio{
  display:grid;justify-items:center;gap:5px;
  border:1.5px dashed var(--border);
  border-radius:var(--radius-sm);
  background:var(--neutral-100);
  padding:26px 20px;
  text-align:center;
}
.rx-vazio b{font:600 var(--text-sm) "DM Sans";color:#3d5b55}
.rx-vazio span{font:var(--text-xs)/1.5 "DM Sans";color:var(--text-muted);max-width:42ch}
.rx-escrever{
  margin-top:7px;
  border:1px solid var(--border);background:var(--surface-card);color:#287269;
  border-radius:999px;padding:8px 16px;
  font:700 var(--text-xs) "DM Sans";cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.rx-escrever:hover{border-color:var(--green-600);background:var(--lime-100)}
.rx-nada .rx-escrever{margin-top:9px}

/* COMO O DOCUMENTO TEM VALIDADE.

   O OrçaDent deixou de oferecer o caminho do CFO: ele monta e imprime, e a
   validade vem da assinatura à mão. Isso precisa estar dito com todas as
   letras na tela de emitir — a dentista assina com o CRO dela, e não pode
   descobrir no balcão da farmácia que fez do jeito errado.

   Os dois parágrafos têm pesos diferentes de propósito: o primeiro
   tranquiliza (papel vale), o segundo avisa (PDF solto não vale). */
.rx-como-vale{
  margin:18px 0 12px;padding:14px 16px;
  border:1px solid var(--border);border-left:3px solid var(--green-600);
  border-radius:var(--radius-xs);
  background:var(--neutral-100);
}
.rx-como-vale>b{display:block;font:700 var(--text-sm) "DM Sans";color:#254d47;margin-bottom:6px}
.rx-como-vale p{margin:0;font:var(--text-xs)/1.6 "DM Sans";color:#3d5b55}
.rx-como-vale p+p{margin-top:9px;padding-top:9px;border-top:1px solid var(--border)}
.rx-como-vale-aviso{color:var(--clay-700) !important}
.rx-como-vale b{font-weight:700}
.rx-item-head>span{
  font:600 var(--text-xs) Fraunces,serif;
  color:#a2704f;
  background:#f3ded0;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.rx-item .remove-stage{position:static;height:24px;width:24px}
.rx-wide{
  display:grid;
  gap:7px;
  color:#4d6761;
  font-size:var(--text-xs);
  font-weight:600;
  margin-bottom:8px;
}
.rx-item .fields.two,.rx-item .fields.three,.rx-item .fields.four{margin-bottom:8px}
.fields.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
/* dosagem · unidade · quantidade · apresentação — a unidade é estreita
   porque "mg/mL" é o rótulo mais largo que ela precisa caber. */
.fields.four{
  display:grid;
  grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr) minmax(0,1.2fr);
  gap:10px;
}
@media(max-width:700px){
  .fields.three,.fields.four{grid-template-columns:1fr 1fr}
}
.rx-full{
  display:grid;
  gap:7px;
  margin-top:18px;
  color:#4d6761;
  font-size:var(--text-xs);
  font-weight:600;
}
.rx-full textarea{width:100%}
.rx-preview{
  margin-top:20px;
  background:var(--neutral-100);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:14px 16px;
}
.rx-preview .eyebrow{display:block;margin-bottom:8px}
/* A PRÉVIA É O PAPEL, não mais o texto de máquina de escrever.

   A folha tem 210mm de largura fixa (é A4 de verdade, a mesma que imprime).
   Aqui ela é reduzida por `scale` para caber na coluna — e `scale` não
   encolhe o espaço que o elemento ocupa, por isso o invólucro tem altura
   própria e `overflow:hidden`. Sem isso sobraria um buraco branco do
   tamanho da folha inteira embaixo da prévia. */
.rx-previa-folha{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-xs);
  background:var(--neutral-200);
  padding:10px;
}
.rx-previa-folha .doc{
  transform-origin:top left;
  box-shadow:0 10px 30px -18px rgba(21,63,59,.5);
}
.rx-previa-nota{
  position:absolute;left:0;right:0;bottom:8px;margin:0;text-align:center;
  font:600 var(--text-2xs) "DM Sans";color:var(--clay-700);
}
.rx-preview pre{
  margin:0;
  font:var(--text-xs)/1.65 "DM Mono",ui-monospace,monospace;
  color:#2b433e;
  white-space:pre-wrap;
  word-break:break-word;
}
.rx-preview pre.is-empty{color:var(--text-muted);font-style:italic}
.rx-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.rx-actions .generate{
  width:100%;
  min-width:0;
  padding:13px 12px;
  font-size:var(--text-xs);
  line-height:1.3;
}
/* O controle especial é o caminho menos comum: fica visível, mas não
   disputa a atenção com o receituário do dia a dia. */
.generate.alt{background:var(--surface-card);color:var(--green-600);border:1px solid #bcd4cd}
.generate.alt:hover{border-color:var(--green-600);background:#f4faf8}
.generate.alt b{color:var(--text-strong)}
.rx-actions-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.rx-actions-sub small{
  flex:1;
  min-width:200px;
  font:var(--text-xs)/1.5 "DM Sans";
  color:var(--text-muted);
}
.rx-after{margin-top:20px;padding-top:18px;border-top:1px solid var(--neutral-200)}
.rx-after strong{display:block;font-size:var(--text-sm);color:var(--text-strong)}
.rx-after>p{margin:4px 0 14px;font:var(--text-xs)/1.55 "DM Sans";color:var(--muted)}
.rx-after-action{display:flex;align-items:flex-end}
.rx-after-action .generate{width:100%}
@media(max-width:700px){
  .rx-models{display:block}
  .rx-models .outline-button{width:100%;margin-top:8px}
  .rx-actions{grid-template-columns:1fr}
  .rx-actions-sub .outline-button{width:100%}
}

.prescriber-box{
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--neutral-100);
  padding:16px 16px 4px;
  margin-top:18px;
}
.prescriber-box .eyebrow{display:block;margin-bottom:6px}
.prescriber-box .field-tip{margin:0 0 12px}

.prescriber-status{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius:var(--radius-xs);
  padding:15px 17px;
  margin-bottom:18px;
}
.prescriber-status>span{
  flex:none;
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font:700 var(--text-xs) "DM Sans";
  color:#fff;
}
.prescriber-status strong{
  display:block;
  font-size:var(--text-sm);
  color:var(--text-strong);
  margin-bottom:3px;
}
.prescriber-status p{margin:0;font:var(--text-xs)/1.55 "DM Sans";color:#5c716b}
.prescriber-status .outline-button{margin-top:11px}
.prescriber-status.is-ready{background:#eef5ef;border:1px solid #cfe2d3}
.prescriber-status.is-ready>span{background:var(--text-muted)}
.prescriber-status.is-pending{background:var(--neutral-100);border:1px solid #e8d5b8}
.prescriber-status.is-pending>span{background:#c08a3e}
.prescriber-status:empty{display:none}
#rx-hint.is-error{color:var(--clay-700)}

@media print{
  #prescriptions-view{display:none}
}

/* Faixa de ambiente de teste. Fica no rodapé para não brigar com a
   navegação nem com a barra de endereço do celular. */
.env-flag{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:3px 10px;
  background:#a4432a;
  color:#fff;
  text-align:center;
  padding:7px 14px calc(7px + env(safe-area-inset-bottom));
  font:var(--text-xs) "DM Sans",sans-serif;
  box-shadow:0 -3px 14px rgba(80,25,10,.28);
  pointer-events:none;
}
.env-flag b{font-weight:700;letter-spacing:1px;font-size:var(--text-2xs)}
.env-flag span{color:var(--clay-100);font-size:var(--text-xs)}
.has-env-flag{padding-bottom:42px}
@media print{
  .env-flag{display:none}
  .has-env-flag{padding-bottom:0}
}

.history-nota{margin:14px 16px 8px;font:var(--text-xs)/1.6 "DM Sans";color:var(--text-muted)}

/* ---------------------------------------------------------------- LINK × PDF
   Aparece junto da proposta pronta, que é o momento em que a pessoa decide
   como vai enviar. Depois é tarde: o PDF já saiu. */
.link-vantagem{
  background:#eef5ef;
  border:1px solid #cfe2d3;
  border-radius:var(--radius-sm);
  padding:18px 20px;
  margin-bottom:16px;
}
.link-vantagem-topo{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.link-vantagem-topo>span{flex:none;font-size:var(--text-md);line-height:1.2}
.link-vantagem-topo strong{
  display:block;
  font:600 var(--text-base) "DM Sans";
  color:var(--text-strong);
  margin-bottom:3px;
}
.link-vantagem-topo p{margin:0;font:var(--text-xs)/1.6 "DM Sans";color:#5c716b}
.link-vantagem-itens{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.link-vantagem-itens>div{background:var(--paper);border-radius:var(--radius-sm);padding:12px 14px}
.link-vantagem-itens b{
  display:block;
  font:600 var(--text-xs) "DM Sans";
  color:var(--text-strong);
  margin-bottom:3px;
}
.link-vantagem-itens small{font:var(--text-xs)/1.55 "DM Sans";color:#6b807a}
.link-vantagem-pe{
  margin:15px 0 0;
  padding-top:13px;
  border-top:1px solid #d5e5d9;
  font:var(--text-xs)/1.65 "DM Sans";
  color:#5c716b;
}
.link-vantagem-pe b{color:var(--text-strong)}
@media(max-width:700px){
  .link-vantagem-itens{grid-template-columns:1fr}
}
@media print{
  .link-vantagem{display:none}
}
/* Convite para instalar. Fica no rodapé, acima da faixa de teste quando
   ela existe, e some do PDF. */
.install-bar{
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:50;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--green-900);
  color:#eaf1ec;
  border-radius:var(--radius-sm);
  padding:13px 14px;
  box-shadow:0 8px 26px rgba(15,45,40,.32);
  animation:sobeBarra .28s ease;
}
.has-env-flag .install-bar{bottom:calc(52px + env(safe-area-inset-bottom))}
@keyframes sobeBarra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.install-bar>div:first-child{flex:1;min-width:0}

/* ------------------------------------------- AVISO DE VERSÃO NOVA
   Mesmo lugar e mesma forma do convite de instalar — é a mesma categoria
   de recado: o app falando de si mesmo, não do trabalho. Cor diferente
   porque este pede uma ação com consequência (recarregar a tela). */
.versao-nova{
  position:fixed;
  left:12px;right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:51;
  display:flex;align-items:center;gap:12px;
  background:var(--clay-700);color:#fdf3ec;
  border-radius:var(--radius-xs);
  padding:13px 15px;
  box-shadow:0 18px 40px -20px rgba(70,30,15,.6);
  animation:sobeBarra var(--dur-slow, .32s) var(--ease-out) both;
}
.has-env-flag .versao-nova{bottom:calc(52px + env(safe-area-inset-bottom))}
.versao-nova>div:first-child{flex:1;min-width:0}
.versao-nova strong{display:block;font:600 var(--text-xs) "DM Sans";color:#fff;margin-bottom:3px}
.versao-nova span{display:block;font:var(--text-xs)/1.5 "DM Sans";color:#f3d9c9}
.versao-nova-acoes{display:flex;align-items:center;gap:6px;flex:none}
.versao-recarregar{
  border:0;border-radius:var(--radius-xs);
  background:#fdf3ec;color:var(--clay-700);
  font:700 var(--text-xs) "DM Sans";
  padding:9px 14px;cursor:pointer;white-space:nowrap;
}
.versao-fechar{
  border:0;background:transparent;color:#f3d9c9;
  font-size:var(--text-base);line-height:1;cursor:pointer;padding:4px 7px;
}
@media (min-width:720px){
  .versao-nova{left:auto;right:20px;max-width:420px}
}
@media print{
  .versao-nova{display:none}
}
.install-bar strong{display:block;font:600 var(--text-xs) "DM Sans";color:#fff;margin-bottom:3px}
.install-bar span{display:block;font:var(--text-xs)/1.5 "DM Sans";color:#aac6bc}
.install-bar b{color:var(--lime-300);font-weight:600}
.install-actions{display:flex;align-items:center;gap:6px;flex:none}
/* No Android este botão é um <a> para a Play Store, e no computador um
   <button> que dispara a instalação do navegador. O desenho é o mesmo; o que
   o link precisa a mais é não herdar sublinhado nem a cor de link. */
.install-go{
  background:var(--lime);
  border:0;
  border-radius:var(--radius-xs);
  color:var(--green-900);
  font:700 var(--text-xs) "DM Sans";
  padding:9px 14px;
  cursor:pointer;
  white-space:nowrap;
  display:inline-block;
  text-decoration:none;
  line-height:1.2;
}
a.install-go:hover{color:var(--green-900);background:var(--lime-400)}
.install-close{
  background:transparent;
  border:0;
  color:#8fada3;
  font-size:var(--text-lg);
  line-height:1;
  padding:4px 8px;
  cursor:pointer;
}
.install-close:hover{color:#fff}
@media(min-width:701px){
  .install-bar{left:auto;right:20px;max-width:390px}
}
@media print{
  .install-bar{display:none}
}
/* Pendente há mais de uma semana: dificilmente volta sozinho. */
.pend-frio td{color:#a08b7d}
.pend-frio b{color:#8a6a55}
#admin-pending td:nth-child(n+2){white-space:nowrap}

/* ---------------------------------------------------------------- CARTÕES REORDENÁVEIS */
.admin-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:16px 0 10px;
}
.admin-toolbar small{font:var(--text-xs)/1.5 "DM Sans";color:var(--muted)}
.admin-toolbar .outline-button{flex:none;padding:8px 14px;font-size:var(--text-xs)}

/* A alça só aparece quando o ponteiro está no cartão: é ferramenta, não
   conteúdo, e ficar sempre visível competiria com os números. */
.admin-card{position:relative}
.card-grip{
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  align-items:center;
  gap:1px;
  opacity:0;
  transition:opacity var(--dur-fast) var(--ease-out);
  background:var(--paper);
  border-radius:var(--radius-xs);
  padding:2px;
}
.admin-card:hover .card-grip,.card-grip:focus-within{opacity:1}
.card-drag{color:#c2cbc4;font-size:var(--text-sm);cursor:grab;padding:0 3px;letter-spacing:-1px}
.admin-card[draggable="true"]:active .card-drag{cursor:grabbing}
.card-move{
  border:1px solid var(--border);
  background:var(--surface-card);
  color:var(--text-muted);
  border-radius:var(--radius-xs);
  width:22px;
  height:22px;
  line-height:1;
  font-size:var(--text-xs);
  cursor:pointer;
  padding:0;
}
.card-move:hover{border-color:#9dbdb4;color:var(--green-600)}
.card-move:focus-visible{outline:2px solid #56a094;outline-offset:1px;opacity:1}

.card-arrastando{opacity:.4}
.card-moveu{animation:piscaCartao .4s ease}
@keyframes piscaCartao{
  0%{box-shadow:0 0 0 3px rgba(36,120,111,.35)}
  100%{box-shadow:0 0 0 3px rgba(36,120,111,0)}
}

/* No celular a alça fica sempre visível: não existe passar o mouse. */
@media(max-width:700px){
  .card-grip{opacity:1;top:6px;right:6px}
  .card-drag{display:none}
  .card-move{width:30px;height:30px;font-size:var(--text-sm)}
  .admin-toolbar{display:block}
  .admin-toolbar .outline-button{width:100%;margin-top:10px}
}
@media print{
  .card-grip,.admin-toolbar{display:none}
}

/* Cartão de senha em Minha clínica. O medidor e a dica ficam dentro do
   <label>, então o botão precisa de folga própria para não montar em cima. */
#access-card .fields{margin-bottom:0}
#access-card label{align-content:start}
#access-card .auth-error{margin:16px 0 0}
#access-card .field-hint{min-height:14px}

/* Confirmação das duas senhas: verde quando batem, âmbar quando não. */
#access-match.is-good{color:#2f8579;font-weight:600}
#access-match.is-bad{color:var(--clay-700);font-weight:600}

.access-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.access-actions .generate{margin:0}
.link-button{
  border:0;
  background:transparent;
  color:#4e6962;
  font:600 var(--text-xs) "DM Sans";
  cursor:pointer;
  padding:4px 0;
  text-decoration:underline;
  text-underline-offset:3px;
}
.link-button:hover{color:var(--green-600)}
.link-button:disabled{opacity:.55;cursor:default}

@media(max-width:700px){
  .access-actions{display:block}
  .access-actions .generate{width:100%}
  .link-button{display:block;width:100%;text-align:center;margin-top:12px}
}

/* ================================================================= PAINEL NO CELULAR

   A página inteira estava rolando para o lado. A causa eram as tabelas: com
   colunas que não quebram, elas ficam mais largas que a tela e empurram tudo.

   A correção é fazer cada tabela rolar dentro do próprio cartão, em vez de
   esticar a página. `display:block` numa <table> a transforma em caixa de
   rolagem própria — o conteúdo continua todo lá, só que contido.
================================================================================ */
@media(max-width:700px){
/* Trava de segurança: nada deve vazar a largura da tela. */
  .app-shell,.main-area,.view{max-width:100%;overflow-x:clip}

  .admin-card{padding:15px 14px}

  .funnel-table,.admin-table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .funnel-table thead,.admin-table thead, .funnel-table tbody,.admin-table tbody{
    display:table;
    width:100%;
    table-layout:fixed;
  }
  .funnel-table th,.funnel-table td{padding:7px 6px 7px 0}
  .admin-table th,.admin-table td{padding:9px 6px 9px 0;font-size:var(--text-xs)}
  .admin-table th{font-size:var(--text-xs)}
  .admin-table b{font-size:var(--text-xs)}
  .admin-table small{font-size:var(--text-xs)}

/* A coluna do e-mail é a que estica: deixa ela quebrar e aperta as outras. */
  #admin-pending th:first-child,#admin-pending td:first-child{width:52%}
  #admin-accounts td:first-child,#rank-accounts td:first-child{width:38%}
  .rank-chips span{font-size:var(--text-xs);padding:2px 5px}

/* A alça de mover fica dentro do cartão, sem encostar na borda da tela. */
  .card-grip{right:4px;top:4px}

/* A barra de abas agora mostra um rótulo só (o da aba aberta), então ela
  não precisa mais encolher a fonte para caber. */
  .app-nav button span svg{width:19px;height:19px}
}

/* ---- Painel no computador: densidade ----------------------------------
   As tabelas ficavam altas por dois motivos que se somavam: o e-mail
   quebrava no meio e as etiquetas de tratamento empilhavam uma por linha.
   Resolvidos os dois, os cartões encolhem e a grade fica pareja. */
@media(min-width:701px){
  #admin-accounts td:first-child,
  #rank-accounts td:first-child,
  #admin-pending td:first-child{
    min-width:186px;
  }
  #rank-accounts td:nth-child(2){min-width:210px}
  .admin-table td{padding:9px 12px 9px 0}
  .admin-card{padding:18px 20px}
}
/* Agora a explicação vem em parágrafos curtos, e cada um precisa do seu
   espaço — sem isso os dois primeiros ficavam colados, parecendo um
   bloco só. O primeiro não recebe margem para não afastar do título. */
.treatment-block>p+p{margin-top:12px}
.treatment-block>p:first-of-type{margin-top:0}
.document-extra+.document-extra{margin-top:12px}
/* O painel do link subiu para cima do aviso: a ação vem antes da
   explicação de por que ela importa. O espaçamento acompanha. */
.share-panel+.link-vantagem{margin-top:14px}

/* ---- Valor de cada dente ------------------------------------------------
   Uma grade de campos pequenos, cada um com o número do dente em cima.
   O dentista vê de relance qual preço é de qual dente. */
.unit-prices{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:8px;
  margin-top:4px;
}
.unit-price{display:grid;gap:4px;margin:0}
.unit-price>span{font:600 var(--text-xs) "DM Sans";color:var(--text-muted)}
.unit-price input{width:100%}
.price-mode{flex-wrap:wrap}
@media(max-width:700px){
  .unit-prices{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:7px}
  .unit-price>span{font-size:var(--text-xs)}
}

/* ---- Sugestões dos dentistas -------------------------------------------
   Cada uma é um bloco com etiqueta do assunto, o texto e quem escreveu.
   A cor da etiqueta separa o que é falta de tratamento (o mais acionável)
   de erro (o mais urgente) — as duas coisas que ela vai querer achar rápido. */
.sugestoes{display:grid;gap:10px;max-height:420px;overflow-y:auto}
.sugestao{
  background:var(--cream);
  border:1px solid #e7e8e1;
  border-radius:var(--radius-xs);
  padding:12px 13px;
}
.sugestao-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}
.sugestao-tipo{
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:.7px;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:var(--radius-xs);
  background:#e3e8e1;
  color:#4d6761;
}
.tipo-tratamento{background:var(--lime-300);color:#3f5320}
.tipo-erro{background:#f6ddd2;color:var(--clay-700)}
.tipo-melhoria{background:#dfeae4;color:var(--green-600)}
.sugestao-topo small{font:var(--text-xs) "DM Sans";color:var(--text-muted);white-space:nowrap}
/* O prazo de sumiço fica em destaque: é uma contagem, não uma data. */
.sugestao.is-feita .sugestao-acoes small{color:#a08b7d;font-weight:600}
.sugestao p{
  margin:0 0 8px;
  font:var(--text-xs)/1.6 "DM Sans";
  color:#3f5f59;
  white-space:pre-wrap;
  overflow-wrap:break-word;
}
.sugestao-autor{
  display:block;
  font:var(--text-xs) "DM Sans";
  color:var(--text-muted);
  overflow-wrap:break-word;
}

/* ---- Caixa de sugestão em Minha clínica --------------------------------
   O seletor não precisa da largura toda: uma frase curta num campo largo
   fica solta. A caixa de texto, sim — é onde a pessoa escreve. */
#suggest-card .admin-sub{margin:8px 0 0;max-width:62ch}
#suggest-card .fields{margin-top:22px}
#suggest-card .fields.two{grid-template-columns:minmax(0,300px)}
#suggest-card textarea{min-height:112px;line-height:1.6;resize:vertical}
#suggest-card .field-hint{margin-top:2px}
#suggest-card .auth-error{margin:16px 0 0}
#suggest-send{margin-top:22px}
@media(max-width:700px){
  #suggest-card .fields.two{grid-template-columns:1fr}
  #suggest-card textarea{min-height:132px}
  #suggest-send{width:100%}
}

/* Marcada como resolvida: some do primeiro plano sem sumir da lista. */
.sugestao.is-feita{opacity:.55;background:var(--neutral-100)}
.sugestao.is-feita p{text-decoration:line-through;text-decoration-color:#b4bfb8}
.sugestao-feita{display:flex;align-items:center;gap:7px;cursor:pointer;margin:0}
.sugestao-feita input{
  width:15px;
  height:15px;
  flex:none;
  accent-color:var(--green-600);
  cursor:pointer;
  margin:0;
}
.sugestao-acoes{display:flex;align-items:center;gap:8px;flex:none}
.sugestao-apagar{
  border:0;
  background:transparent;
  color:#b4bfb8;
  font-size:var(--text-md);
  line-height:1;
  padding:2px 5px;
  border-radius:var(--radius-xs);
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sugestao-apagar:hover{background:#f6ddd2;color:var(--clay-700)}

/* ---- Troca de senha recolhida ------------------------------------------
   Vira uma linha até alguém querer. O cartão para de gritar por atenção
   para algo que se faz uma vez por ano. */
#access-card{padding-top:22px;padding-bottom:22px}
#suggest-card{padding-top:22px;padding-bottom:22px}
#suggest-card .admin-sub{margin:14px 0 0}
.access-toggle{
  margin:0;
  font:600 var(--text-base) "DM Sans";
  color:var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
}
.access-toggle input{
  width:16px;
  height:16px;
  accent-color:var(--green-600);
  cursor:pointer;
  flex:none;
  margin:0;
}
#pane-forgot-email{text-align:left}
#pane-forgot-email .auth-note{text-align:left;margin:0}
#pane-forgot-email .auth-links{justify-content:center}
.auth-steps{
  margin:14px 0 16px;
  padding-left:20px;
  display:grid;
  gap:9px;
  font-size:var(--text-sm);
  line-height:1.55;
  color:#4a5a51;
}
.auth-steps li{padding-left:2px}
.auth-steps b{color:var(--green-900);font-weight:700}
a#forgot-email-mail{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
}
.access-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.access-actions .link-button{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--green-600);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  width:auto;
  align-self:flex-start;
  text-align:left;
}
.access-actions .link-button:hover{color:var(--green-900)}
.title-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.topbar-email{
  font-size:var(--text-xs);
  font-weight:600;
  color:#6d7f74;
  background:var(--neutral-200);
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px 10px;
  line-height:1.4;
  word-break:break-all;
}
@media (max-width:760px){
  .topbar-email{font-size:var(--text-xs);padding:2px 8px}
}
#access-body{padding-top:4px}
#access-body .admin-sub{margin:10px 0 0}

/* ---- Busca e cortesia na lista de contas -------------------------------- */
.admin-busca{display:flex;align-items:center;gap:11px;margin:0 0 14px}
.admin-busca input{
  flex:1;
  min-width:0;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  padding:9px 11px;
  font:var(--text-xs) "DM Sans";
  color:#254d47;
  outline-color:#56a094;
}
.admin-busca small{
  flex:none;
  font:var(--text-xs) "DM Sans";
  color:var(--text-muted);
  white-space:nowrap;
}

.btn-cortesia{
  border:1px solid var(--border);
  background:var(--surface-card);
  color:#5d726c;
  border-radius:var(--radius-xs);
  padding:6px 10px;
  font:600 var(--text-xs) "DM Sans";
  cursor:pointer;
  white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-cortesia:hover:not(:disabled){border-color:#9dbdb4;color:var(--green-600)}
.btn-cortesia.is-on{background:var(--neutral-200);border-color:#cfe2c9;color:#3f6b34}
.btn-cortesia.is-on:hover:not(:disabled){border-color:#c9a08c;color:var(--clay-700)}
.btn-cortesia:disabled{opacity:.45;cursor:default}
.plano-cortesia{background:var(--neutral-200);color:#3f6b34}
#admin-accounts td:last-child{text-align:right;white-space:nowrap}

@media(max-width:700px){
  .admin-busca{flex-direction:column;align-items:stretch;gap:6px}
  .admin-busca input{font-size:var(--text-md)}
/* Largura fixa: com layout automático a coluna do e-mail comia o espaço e   empurrava o botão de cortesia para fora da caixa. Assim a tabela nunca   passa de 100% e o e-mail quebra em duas linhas quando precisa. */
}
/* Conta que ainda não nomeou a clínica: mostra a pessoa, em cinza. */
/* O WhatsApp da conta é link de conversa, não texto. */
.conta-whats{color:var(--green-600);font-weight:600;text-decoration:none;white-space:nowrap}
.conta-whats:hover{text-decoration:underline}
/* Cinza de texto, não cinza de enfeite: "não preencheu" e "acabou em tal
   dia" são informação da linha. O tom anterior (#a3aea8) dava 2,1:1 sobre o
   creme — legível numa tela boa e sumido em qualquer outra. */
.conta-sem-clinica{font-style:normal;color:var(--text-muted)}

/* ---- regras de nível superior (estavam presas num @media por engano) ---- */
.btn-reenviar{
  padding:7px 12px;
  font:inherit;
  font-size:var(--text-xs);
  font-weight:600;
  white-space:nowrap;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  color:#3f5349;
  cursor:pointer;
}
.btn-reenviar:hover:not(:disabled){border-color:#9dbdb4;color:var(--green-600)}
.btn-reenviar:disabled{opacity:.55;cursor:default}
#admin-pending td:last-child{text-align:right;width:1%}
.pend-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px}
.pend-toolbar small{font-size:var(--text-xs);color:#6d7f74}
/* Seis colunas, seis larguras. Quando a coluna Excluir entrou, estas somavam
   100% em quatro — as duas últimas ficavam sem largura nenhuma e o conteúdo
   delas vazava por cima do cabeçalho fixo. */
#admin-accounts{table-layout:fixed;width:100%}
#admin-accounts th:nth-child(1){width:28%}
#admin-accounts th:nth-child(2){width:17%}
#admin-accounts th:nth-child(3){width:15%}
#admin-accounts th:nth-child(4){width:11%}
#admin-accounts th:nth-child(5){width:16%}
#admin-accounts th:nth-child(6){width:13%}
.cel-plano .btn-cortesia{
  display:block;
  margin-top:6px;
  padding:5px 9px;
  font-size:var(--text-xs);
  width:auto;
}
.setup-agora{background:var(--neutral-100);border:1px solid #f0d9c8}
.setup-agora .setup-badge{background:var(--clay-400)}
#fields-paciente label{align-content:start}
@media (max-width:760px){
  #admin-accounts th:nth-child(1){width:26%}
  #admin-accounts th:nth-child(2){width:16%}
  #admin-accounts th:nth-child(3){width:15%}
  #admin-accounts th:nth-child(4){width:11%}
  #admin-accounts th:nth-child(5){width:17%}
  #admin-accounts th:nth-child(6){width:15%}
}

/* ------------------------------------------- OPÇÕES DE TRATAMENTO
   Dois tratamentos na lista podem ser um plano em etapas ou alternativas.
   No segundo caso, as condições de pagamento entram dentro de cada opção —
   juntas no fim, valeriam para a proposta inteira, que é o que não são. */
.options-total{
  margin-top:16px;
  background:var(--neutral-100);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:14px 16px;
  display:grid;
  gap:7px;
}
.options-total>span{font:700 var(--text-xs) "DM Sans";color:#3d5b55}
.options-total>div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  font:var(--text-xs) "DM Sans";
  color:#3d6058;
}
.options-total b{font-weight:700;white-space:nowrap;color:var(--green-600)}
.options-total .field-hint{margin:2px 0 0}
.options-intro h2{color:var(--green-600)}
.treatment-block.is-option{border-left:3px solid #dfeae1;padding-left:20px}
.treatment-choices{margin-top:18px;padding-top:15px;border-top:1px dashed var(--border)}
.choices-title{
  display:block;
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:1.1px;
  color:var(--clay-700);
  margin-bottom:9px;
}
.treatment-choices .payment-choices{margin-top:0}
@media(max-width:640px){
  .treatment-block.is-option{border-left:0;padding-left:0}
}

/* Campos de porcentagem: o % fica colado no número, como sinal do campo e não
   como palavra à parte — o campo já é estreito e um rótulo roubaria a largura. */
.stage-percent,.desconto-campo{display:flex;align-items:center;gap:5px}
.stage-percent input,.desconto-campo input{flex:1;min-width:0;width:100%}
.stage-percent>b,.desconto-campo>b{font:700 var(--text-xs) "DM Sans";color:var(--text-muted)}
.desconto-campo{flex:none;width:92px}
#stage-percent-sum{display:block;margin-top:9px}
#stage-percent-sum.is-alerta{color:#a8412a;font-weight:600}

/* Seletor de qual opção está sendo editada. Fica em cima da tabela porque é
   ele que dá sentido a tudo o que vem abaixo. */
.stage-option{
  display:grid;
  gap:6px;
  margin-bottom:14px;
  padding-bottom:13px;
  border-bottom:1px solid #e7e8e1;
}
.stage-option>span{font:700 var(--text-xs) "DM Sans";color:#3d5b55}
.stage-option select{width:100%}
.stage-todas{margin-top:10px}
.stage-todas .ghost-button{font-size:var(--text-xs)}

/* Excluir conta: vermelho só na intenção (ao passar o mouse), não em repouso.
   Um botão vermelho em toda linha da tabela viraria ruído e, pior, um convite. */
.btn-excluir-conta{
  border:1px solid var(--border);
  background:var(--surface-card);
  color:#8d7a74;
  border-radius:var(--radius-xs);
  padding:5px 9px;
  font:600 var(--text-xs) "DM Sans";
  cursor:pointer;
  white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-excluir-conta:hover:not(:disabled){
  border-color:#d8a496;
  background:var(--neutral-100);
  color:#a8412a;
}
.btn-excluir-conta:disabled{opacity:.4;cursor:default}
.cel-excluir{text-align:right;white-space:nowrap}

/* --------------------------------------- ETAPAS DE PAGAMENTO EM CAIXA ESTREITA
   A tabela de quatro colunas (Etapa | Valor | Prazo | ×) não cabe em pouco
   espaço: o nome da etapa encolhia e "Conclusão do tratamento" aparecia como
   "Conclusão do t".

   A medida aqui é a largura da CAIXA, não a da janela — e essa diferença é o
   ponto. Havia uma versão empilhada presa a `max-width:380px`, mais estreita
   que a maioria dos iPhones, então quase ninguém a via. E medir a janela nem
   resolveria: em 1024px o formulário passa a dividir a tela com a coluna
   lateral e o campo do nome cai para 87px — pior do que no celular, numa
   largura que qualquer regra de "isto é telefone" trataria como desktop.

   O desenho é de duas linhas: o nome ocupa a largura toda (é o texto mais
   longo) com o × ao lado, e embaixo o valor e o prazo dividem a linha. As três
   colunas existem para isso — o nome atravessa as duas primeiras, o prazo
   atravessa as duas últimas, e cada um fica com a largura de que precisa em
   vez da que sobrou.
------------------------------------------------------------------------- */
@container (max-width:470px){
  .stage-head{display:none}
  .stage-list{gap:10px}
  .stage-row{
    grid-template-columns:100px minmax(0,1fr) 34px;
    grid-template-areas:
      "nome  nome   remover"
      "valor prazo  prazo";
    gap:11px 8px;
    padding:13px;
    background:var(--neutral-100);
    border:1px solid var(--neutral-200);
    border-radius:var(--radius-xs);
    align-items:start;
  }
  .stage-nome{grid-area:nome}
  .stage-campo-valor{grid-area:valor}
  .stage-campo-prazo{grid-area:prazo}
  .stage-row .remove-stage{grid-area:remover;height:38px;width:34px;font-size:var(--text-base)}
/* O rótulo aparece: sem o cabeçalho da tabela, "0 / dias" não diz o que é. */
  .stage-campo{display:grid;gap:5px}
  .stage-campo>i{
    display:block;
    font:700 var(--text-2xs)/1 "DM Sans";
    letter-spacing:.4px;
    color:var(--text-muted);
    font-style:normal;
    padding-left:2px;
  }
  .stage-row input,.stage-row select{padding:11px 10px;font-size:var(--text-md)}
  .stage-term select{flex:none;width:88px;font-size:var(--text-sm)}
  .stage-percent>b{font-size:var(--text-sm)}
}

/* ------------------------------------- CONTAS DO PAINEL EM CAIXA ESTREITA
   Seis colunas (Conta | Clínica | WhatsApp | Propostas | Plano | Excluir) não
   cabem num telefone. A regra antiga espremia todas na largura disponível com
   `table-layout:fixed`, e o e-mail saía cortado no meio — "tato.odontoelite@g
   .com" — com o nome da clínica e o WhatsApp colados um no outro.

   Aqui cada linha vira um cartão, e o rótulo de cada campo vem do
   `data-rotulo` que o app.js escreve em cada célula. Rolagem lateral seria a
   saída fácil, mas some com a informação em vez de mostrá-la.

   A medida é a largura da CAIXA, não a da janela — ver o bloco das etapas de
   pagamento, mesmo motivo: aqui dentro o painel divide espaço com a coluna
   lateral e encolhe antes da tela.
------------------------------------------------------------------------- */
/* O contêiner é a CAIXA, não a tabela: container query não vale para o próprio
   elemento que declara `container-type`, só para os descendentes. Com ele na
   tabela, a regra `display:block` não a alcançava e a primeira célula continuava
   encolhendo como célula de tabela. */
.admin-table-wrap:has(#admin-accounts){container-type:inline-size}
/* 560px é onde as seis colunas deixam de caber. Com a seção Contas ocupando a
   largura inteira do painel, a caixa mede ~870px no computador (tabela) e
   ~330px no telefone (cartão). Entre os dois fica o notebook estreito, onde o
   painel vira uma coluna só e sobram ~537px: ali a tabela daria 150px para o
   e-mail, então é cartão também. Medido em 393, 900, 1280 e 1440. */
@container (max-width:560px){
  #admin-accounts, #admin-accounts tbody, #admin-accounts tr, #admin-accounts td{
    display:block;
    width:100%;
    box-sizing:border-box;
  }
/* As larguras de coluna do modo tabela precisam ser desfeitas uma a uma:
  `#admin-accounts td:first-child{width:38%}` é mais específica do que a
  regra acima e sozinha já segurava o e-mail em 115px dentro do cartão. */
  #admin-accounts{table-layout:auto}
  #admin-accounts td:first-child{width:100%;min-width:0}
  #admin-accounts thead{display:none}
  #admin-accounts tbody{table-layout:auto}
  #admin-accounts tr{
    background:var(--neutral-100);
    border:1px solid var(--neutral-200);
    border-radius:var(--radius-sm);
    padding:12px 13px;
    margin-bottom:9px;
  }
  #admin-accounts td{
    border:0;
    padding:5px 0;
    display:flex;
    align-items:baseline;
    gap:12px;
  }
  #admin-accounts td:before{
    content:attr(data-rotulo);
    flex:none;
    width:74px;
    font:700 var(--text-2xs) "DM Sans";
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--text-muted);
  }
/* O e-mail é o nome do cartão: ocupa a linha inteira, sem rótulo. */
  #admin-accounts td[data-rotulo="Conta"]{
    display:block;
    padding:0 0 9px;
    margin-bottom:6px;
    border-bottom:1px solid var(--neutral-200);
  }
  #admin-accounts td[data-rotulo="Conta"]:before{content:none}
  #admin-accounts td[data-rotulo="Conta"] b{font-size:var(--text-xs);line-height:1.35}
/* Plano e ações ficam lado a lado no pé do cartão. */
  #admin-accounts td.cel-plano{align-items:center;gap:10px;flex-wrap:wrap}
  #admin-accounts td.cel-plano .btn-cortesia{display:inline-block;margin:0}
  #admin-accounts td.cel-excluir{justify-content:flex-end;padding-top:2px}
  #admin-accounts td.cel-excluir:before{content:none}
/* Com cartões a caixa precisa de mais altura antes de rolar por dentro. */
  .admin-table-wrap:has(#admin-accounts){max-height:min(70vh,620px)}
}

/* Os dois botões de adicionar dividem a linha; em caixa estreita empilham. */
/* ------------------------------------------- ETAPA OU OPÇÃO: DOIS CAMINHOS
   Eram dois botões iguais, tracejados, lado a lado, e a diferença entre eles
   morava numa linha de texto embaixo dos dois. Com o paciente na cadeira não
   dá para parar e ler: ela clicava num e descobria depois que era o outro.

   Agora cada um é um cartão que se explica, e a COR é o que diferencia —
   verde para o que soma (etapa, continuação do mesmo plano), terracota para
   o que é escolha (opção, caminho alternativo). O mesmo par de cores volta
   no cartão de cada tratamento da lista, então a cor sozinha já responde
   "isto aqui soma ou é alternativa?". */
.add-treatment-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.add-treatment-row .add-stage{
  margin:0;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  gap:1px 10px;
  text-align:left;
  align-items:center;
  padding:12px 14px;
  border-style:solid;
  border-radius:var(--radius-sm, 10px);
}
.add-sinal{
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:30px;height:30px;
  border-radius:50%;
  font:700 var(--text-base) "DM Sans";
  line-height:1;
}
.add-treatment-row .add-stage b{font:700 var(--text-sm) "DM Sans"}
.add-treatment-row .add-stage small{
  font:400 var(--text-xs)/1.35 "DM Sans";
  color:var(--text-muted);
}
.add-treatment-row .add-stage small b{font-weight:700;font-size:inherit;color:inherit}

.add-etapa{border-color:#bcd0b9;background:var(--lime-100);color:var(--green-700, #1d5f58)}
.add-etapa .add-sinal{background:var(--green-600);color:#fff}
.add-etapa:hover{background:var(--lime-200);border-color:var(--green-600)}

.add-opcao{border-color:var(--clay-200);background:var(--clay-100);color:var(--clay-700)}
.add-opcao .add-sinal{background:var(--clay-600);color:#fff}
.add-opcao:hover{background:var(--clay-200);border-color:var(--clay-600)}

.add-treatment-row .add-stage:active{transform:scale(.99)}

/* O cartão do tratamento usa as mesmas duas cores. A faixa da esquerda é
   fina de propósito: ela precisa responder de relance, sem competir com o
   conteúdo do campo. */
.treatment-row{border-left:3px solid var(--green-600)}
.treatment-row.is-opcao{border-left-color:var(--clay-500)}
.treatment-row.is-opcao .treatment-row-head span,
.treatment-row.is-opcao .resumo-rotulo{color:var(--clay-600)}
.treatment-row.is-opcao .treatment-resumo em{color:var(--clay-700)}
.treatment-row:not(.is-opcao) .treatment-row-head span,
.treatment-row:not(.is-opcao) .resumo-rotulo{color:var(--green-600)}

/* E o seletor de modo, logo abaixo, fala a mesma língua. */
.plan-option.is-on[data-plan="opcoes"]{
  border-color:var(--clay-600);
  background:var(--clay-100);
  box-shadow:0 0 0 1px var(--clay-600) inset;
  color:var(--clay-700);
}

@media (max-width:560px){
  .add-treatment-row{grid-template-columns:1fr}
}
#add-treatment-tip{margin:9px 0 0}
@media(max-width:560px){
  .add-treatment-row{grid-template-columns:1fr}
}

/* A caixa do número livre nasce embaixo da linha a que pertence. */
.card-per-item{display:grid;gap:7px}
.card-per-livre{display:grid;gap:5px;padding:0 2px 2px 12px;border-left:2px solid var(--border)}
.card-per-livre>span{font:700 var(--text-xs) "DM Sans";color:#5d726c}
.card-per-livre input{
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  padding:9px 10px;
  font:var(--text-xs) "DM Sans";
  color:#254d47;
  outline-color:#56a094;
  width:100%;
  box-sizing:border-box;
}
.card-per-livre .field-hint{margin:0}

/* Alternador de formato das etapas: reais ou porcentagem, em qualquer modo. */
.stage-unidade{
  margin-bottom:14px;
  padding-bottom:13px;
  border-bottom:1px solid #e7e8e1;
  display:grid;
  gap:8px;
}
.stage-unidade>span{font:700 var(--text-xs) "DM Sans";color:#3d5b55}

/* A seção Contas atravessa as duas colunas do painel. Ela tem seis colunas de
   tabela; dividindo espaço com a vizinha sobravam ~400px, ou 68px por coluna —
   ilegível. Atravessando, a tabela ganha o dobro e volta a dar para ler quem é
   assinante de bater o olho.

   O grid é `auto-fit`, então `grid-column:1/-1` só tem efeito quando existe
   mais de uma coluna — no telefone ele não faz nada, que é o certo. */
.admin-card[data-card="contas"]{grid-column:1/-1}

/* ------------------------------------ ACOMPANHAMENTO NA LINHA DA PROPOSTA
   Quantas vezes o paciente abriu, quanto leu, se pediu para falar e em qual
   opção passou mais tempo — tudo na própria linha da lista. Antes isso só
   existia dentro da proposta, e ver o estado de dez pacientes custava abrir
   dez telas.

   Ocupa a largura toda da linha (`grid-column:1/-1`) e fica entre a etiqueta
   e os botões: é leitura, não ação.
------------------------------------------------------------------------- */
.acompanhamento{
  grid-column:1/-1;
  display:grid;
  gap:8px;
  margin-top:9px;
  padding-top:10px;
  border-top:1px solid var(--neutral-200);
}
.acomp-leitura{margin:0;font:var(--text-xs) "DM Sans";color:var(--text-muted)}
.acomp-leitura b{color:#3d6058;font-weight:700}

.acomp-pediu{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  background:var(--neutral-200);
  border:1px solid #cfe2c9;
  border-radius:var(--radius-xs);
  padding:8px 11px;
}
.acomp-pediu>span{flex:1;min-width:0;font:700 var(--text-xs) "DM Sans";color:#3f6b34}
/* Sobrescreve o botão genérico da linha: aqui ele vive dentro da faixa verde. */
.history-item .acomp-pediu button{
  flex:none;
  background:var(--surface-card);
  border-color:#c4dbbd;
  color:#3f6b34;
  padding:6px 11px;
  font-size:var(--text-xs);
}
.history-item .acomp-pediu button:hover:not(:disabled){border-color:#8fb587;color:#2f5527}

.acomp-opcoes{display:grid;gap:5px}
.acomp-opcao{
  display:grid;
  grid-template-columns:62px minmax(40px,110px) auto;
  align-items:center;
  gap:9px;
  font:var(--text-xs) "DM Sans";
  color:var(--text-muted);
}
.acomp-barra{height:5px;border-radius:999px;background:var(--neutral-200);overflow:hidden}
.acomp-barra>i{display:block;height:100%;border-radius:999px;background:var(--green-600)}
.acomp-opcao>b{font-weight:700;color:#3d6058;white-space:nowrap}

@media(max-width:560px){
  .acomp-pediu{align-items:stretch;flex-direction:column}
  .history-item .acomp-pediu button{width:100%}
  .acomp-opcao{grid-template-columns:58px 1fr auto;gap:8px}
}

/* Tópicos no texto do tratamento. Ver paragrafos() — um bloco de linhas
   começadas por "· " vira lista. */
.topicos{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.topicos li{
  position:relative;
  padding-left:19px;
  font-size:var(--text-sm);
  line-height:1.6;
  color:#54716a;
}
.topicos li:before{
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#7fb8ac;
}

/* ------------------------------------------------------- BUSCA RÁPIDA
   Cmd+K abre por cima de qualquer tela. O campo antigo vivia dentro da aba
   Propostas e só aparecia com cinco ou mais — para achar alguém era preciso
   primeiro lembrar em que aba ele estava. */
.botao-busca{
  display:flex;
  align-items:center;
  gap:9px;
  margin-right:16px;
  background:var(--surface-card);
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 13px;
  font:600 var(--text-xs) "DM Sans";
  color:var(--text-muted);
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.botao-busca:hover{border-color:#a9c2b6;color:var(--green-600)}
.botao-busca>span:first-child{font-size:var(--text-base);line-height:1}
.botao-busca kbd{
  font:600 var(--text-xs) "DM Sans";
  background:var(--neutral-200);
  border-radius:var(--radius-xs);
  padding:3px 6px;
  color:var(--text-muted);
}

.spot{
  position:fixed;
  inset:0;
  z-index:40;
  display:none;
  background:rgba(14,44,41,.34);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  padding:max(64px,12vh) 20px 20px;
  justify-content:center;
  align-items:flex-start;
}
.spot.is-open{display:flex}
.spot-caixa{
  width:min(620px,100%);
  background:var(--surface-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:0 26px 60px -20px rgba(14,44,41,.5);
  overflow:hidden;
  display:grid;
}
.spot-campo{
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px 17px;
  border-bottom:1px solid var(--neutral-200);
}
.spot-campo>span{font-size:var(--text-lg);color:var(--text-muted);line-height:1}
.spot-campo input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font:500 var(--text-md) "DM Sans";
  color:var(--text-strong);
}
.spot-campo kbd{
  font:600 var(--text-xs) "DM Sans";
  background:var(--neutral-200);
  border-radius:var(--radius-xs);
  padding:4px 7px;
  color:var(--text-muted);
}
.spot-lista{max-height:min(52vh,420px);overflow-y:auto;padding:7px}
.spot-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:transparent;
  border:0;
  border-radius:var(--radius-sm);
  padding:11px 12px;
  cursor:pointer;
  text-align:left;
  font:inherit;
  transition:background-color var(--dur-press) var(--ease-out);
}
.spot-item:hover,.spot-item.is-on{background:var(--neutral-200)}
.spot-nome{display:grid;gap:2px;min-width:0}
.spot-nome{font:600 var(--text-base) "DM Sans";color:var(--text-strong)}
.spot-nome i{
  font-style:normal;
  font:var(--text-xs) "DM Sans";
  color:var(--text-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.spot-lado{display:flex;align-items:center;gap:10px;flex:none}
.spot-lado b{font:700 var(--text-xs) "DM Sans";color:#3d6058;white-space:nowrap}
.spot-lado em{font-style:normal}
.spot-vazio{
  margin:0;
  padding:22px 14px;
  text-align:center;
  font:var(--text-xs) "DM Sans";
  color:var(--text-muted);
}
.spot-pe{
  display:flex;
  gap:16px;
  justify-content:center;
  padding:10px;
  border-top:1px solid var(--neutral-200);
  font:var(--text-xs) "DM Sans";
  color:var(--text-muted);
  background:var(--neutral-100);
}
.spot-pe kbd{
  font:600 var(--text-xs) "DM Sans";
  background:var(--neutral-200);
  border-radius:var(--radius-xs);
  padding:2px 5px;
  margin-right:3px;
}

@media(max-width:700px){
/* Só o ícone, mas com alvo de 44px: com 31x33 o dedo erra. */
  .botao-busca{margin-right:10px;padding:0;width:44px;height:44px;justify-content:center}
  .botao-busca>span:first-child{font-size:var(--text-lg)}
  .botao-busca-texto,.botao-busca kbd{display:none}
  .spot{padding-top:max(28px,6vh)}
  .spot-pe{display:none}
}

/* ------------------------------------------------- PACIENTES EM TRATAMENTO
   Quem fechou sai da lista de pendentes e vem para cá. Nada é apagado: o link
   do paciente continua valendo e o histórico fica guardado. */
.tratando-topo{margin-bottom:20px}
.tratando-topo h2{
  font:600 27px Fraunces,serif;
  letter-spacing:-.8px;
  color:var(--ink,var(--green-900));
  margin:0 0 7px;
}
.tratando-topo p{margin:0;font:var(--text-xs)/1.6 "DM Sans";color:var(--text-muted);max-width:620px}
.depois-tag.tratando{background:#d7e8dd;color:#2c6b4f}
.history-item button.is-fechar:hover{
  border-color:#b9d3a9;
  color:#3f6b34;
  background:var(--neutral-100);
}

/* ------------------------------------------------------ BOTÃO DE ASSINAR
   Um aro de luz que gira ao redor do botão, nas cores da marca: verde, lima,
   pêssego, rosa e lavanda — as mesmas que já aparecem nas seções do site.
   O arco-íris original era vermelho/roxo/azul, que não existe em lugar nenhum
   aqui e faria o botão parecer de outro produto.

   O truque é o fundo em duas camadas: a de dentro (padding-box) é o verde
   sólido, a de fora (border-box) é o degradê. Como a borda é transparente, o
   degradê aparece só nela. A animação empurra a posição do degradê, e o aro
   parece girar.
------------------------------------------------------------------------- */
.botao-assinar{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:2px solid transparent;
  border-radius:999px;
  padding:15px 28px;
  font:700 var(--text-base) "DM Sans",sans-serif;
  color:var(--text-on-dark);
  cursor:pointer;
  background:
    linear-gradient(var(--green-900),#0e332f) padding-box,
    linear-gradient(90deg,var(--green-600),var(--lime-300),var(--clay-300),var(--pink),var(--lavender),var(--green-600)) border-box;
  background-size:auto, 200% 100%;
  animation:assinar-aro 3.2s linear infinite;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.botao-assinar b{font-size:var(--text-md);font-weight:600;color:var(--lime-300)}
/* O brilho de baixo: a mesma faixa, desfocada, saindo por trás do botão. */
.botao-assinar:before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-16%;
  width:64%;
  height:36%;
  transform:translateX(-50%);
  z-index:-1;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green-600),var(--lime-300),var(--clay-300),var(--pink),var(--lavender),var(--green-600));
  background-size:200% 100%;
  filter:blur(13px);
  opacity:.85;
  animation:assinar-aro 3.2s linear infinite;
}
.botao-assinar:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(14,58,54,.5)}

.botao-assinar:focus-visible{outline:2px solid var(--green-600);outline-offset:4px}
.botao-assinar:disabled{opacity:.6;cursor:default;animation-play-state:paused}
@keyframes assinar-aro{
  from{background-position:0 0, 0% 0}
  to{background-position:0 0, 200% 0}
}
/* Um aro girando sem parar é exatamente o que "reduzir movimento" pede para
   não existir: fica o degradê parado, que continua bonito. */
@media(prefers-reduced-motion:reduce){
  .botao-assinar,.botao-assinar:before{animation:none}
  .botao-assinar:hover{transform:none}
}

/* -------------------------------------------------- ASSINATURA JÁ ATIVA
   O outro estado da tela de Assinatura. O cartão lima e a sombra deslocada
   são de VENDA: chamam atenção porque querem uma decisão. Quem já assina não
   tem decisão nenhuma para tomar aqui — então este cartão é papel, borda fina
   e nada piscando. Ele informa, não convence.
--------------------------------------------------------------------------- */
.billing-ativa{
  max-width:700px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:40px 44px;
  box-shadow:0 14px 38px rgba(37,66,60,.07);
}
.billing-ativa .eyebrow{color:var(--text-muted)}
.billing-ativa h2{
  font:600 var(--display-md)/1.15 Fraunces,serif;
  letter-spacing:-1px;
  color:var(--text-strong);
  margin:10px 0 0;
}
.billing-ativa>p{
  font:var(--text-sm)/1.65 "DM Sans";
  color:var(--muted);
  margin:9px 0 0;
  max-width:46ch;
}
/* auto-fit e não duas colunas fixas: na tela estreita vira uma, sem media
   query e sem um par de linhas órfãs no meio.

   Sem caixa em volta: a primeira versão era uma grade com fio de 1px entre as
   células, e como os dados são quatro ou cinco (a linha "renova em" some na
   cortesia), sobrava uma célula vazia cinza no canto. Um fio só, em cima,
   separa os dados do texto sem criar buraco nenhum. */
.assin-dados{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:18px 26px;
  margin:26px 0 0;
  padding:22px 0 0;
  border-top:1px solid #e7e9e0;
}
.assin-dados>div{margin:0}
.assin-dados>div.hidden{display:none}
.assin-dados dt{
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:.9px;
  text-transform:uppercase;
  color:var(--text-muted);
}
.assin-dados dd{
  margin:5px 0 0;
  font:600 var(--text-base) "DM Sans";
  color:var(--text-strong);
  overflow-wrap:break-word;
}
.billing-ativa #assin-ajuda{margin:22px 0 0;padding:13px 16px;font-size:var(--text-xs)}
.billing-ativa>small{
  display:block;
  margin-top:14px;
  font:var(--text-xs)/1.6 "DM Sans";
  color:var(--muted);
}
@media(max-width:700px){
  .billing-ativa{padding:26px 21px}

  .billing-ativa #assin-ajuda{width:100%}
}

/* O atalho para a assinatura dentro de Minha clínica. Existe porque a aba
   some para quem assina — ver mostrarAssinatura() no app.js. */
.assin-atalho{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:16px;
  padding:18px 20px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.assin-atalho.hidden{display:none}
.assin-atalho strong{display:block;font:600 var(--text-base) "DM Sans";color:var(--text-strong)}
.assin-atalho small{
  display:block;
  font:var(--text-xs)/1.55 "DM Sans";
  color:var(--muted);
  margin-top:4px;
}
.assin-atalho .outline-button{flex:none;padding:11px 14px;font-size:var(--text-xs)}
@media(max-width:700px){
  .assin-atalho{padding:16px}
  .assin-atalho .outline-button{width:100%}
}

/* ----------------------------------- O FUNDO VIVO DO CARTÃO DE ASSINATURA
   O cartão era um retângulo lima chapado — e é a única tela do app que
   precisa convencer alguém.

   Agora o fundo é desenhado pela placa de vídeo: ruído em movimento nas cores
   da marca, com vinheta e grão de filme (ver fundo.js). Com o fundo escuro, o
   texto vira claro — é por isso que há tantas linhas de cor aqui embaixo: não
   é redecoração, é o contraste seguindo o fundo.

   O degradê de CSS não é fallback de enfeite: é O FUNDO. O canvas desenha por
   cima dele. Num aparelho sem WebGL, ou se o sistema recolher a GPU, o cartão
   continua escuro e legível em vez de virar um buraco branco.
--------------------------------------------------------------------------- */
.billing-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:var(--radius-xs);
  color:var(--neutral-200);
  background:
    radial-gradient(72% 86% at 24% 18%, var(--green-700) 0%, rgba(28,95,88,0) 62%),
    radial-gradient(62% 78% at 84% 74%, #2b6f60 0%, rgba(43,111,96,0) 60%),
    radial-gradient(46% 56% at 62% 96%, #7f8a44 0%, rgba(127,138,68,0) 58%),
    var(--green-950);
  box-shadow:12px 12px 0 var(--green-900);
}
.billing-tela{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
  /* Só aparece depois do primeiro quadro — ver desenhar() no fundo.js. */
  opacity:0;
  transition:opacity 700ms var(--ease-out);
}
.billing-tela.aceso{opacity:1}
/* Um véu escuro entre o canvas e o texto.

   O ruído passeia: uma hora a faixa clara cai atrás do parágrafo e o texto
   claro some. Escurecer o shader inteiro tiraria a cor junto; o véu resolve
   onde o problema existe — forte do lado do texto, quase nada do outro, que é
   onde a cor continua aparecendo. Assim o contraste não depende de onde o
   desenho parou. */
.billing-card:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(7,34,31,.88) 0%,
    rgba(7,34,31,.82) 62%,
    rgba(7,34,31,.34) 100%);
}
/* O conteúdo sobe uma camada, senão o canvas o cobre por inteiro. */
.billing-card>*:not(.billing-tela){position:relative;z-index:1}

.billing-card .eyebrow{color:var(--clay-300)}
.billing-card h2{color:var(--text-on-dark)}
/* A coluna de texto fica na metade escura do véu: o parágrafo corria até a
   borda e a última linha caía justamente onde a luz do shader passa. */
/* A classe repetida não é enfeite: growth.css ainda carrega a cor do cartão
   LIMA antigo neste mesmo seletor (.billing-card>p, #47665d) e é carregado
   depois do app.css. Com a mesma especificidade, quem vinha ganhando era o
   verde escuro sobre o fundo escuro de hoje — o parágrafo de abertura do
   cartão de assinatura estava em 2:1. Dobrar a classe faz a cor certa
   ganhar sem !important e sem mexer no que o growth.css ainda sustenta
   (o fundo lima que fica POR BAIXO da camada escura). */
.billing-card.billing-card>p{color:#d6e5db;max-width:40ch}
.billing-card #plan-status{max-width:44ch}
.billing-card .billing-price{color:var(--text-on-dark)}
.billing-card .billing-price small,.billing-card .billing-price span{color:#bcd2c9}
.billing-card ul li{color:var(--border)}
.billing-card #plan-status{color:#a8c0b5}
/* "Já assinei": pastilha de vidro sobre o fundo escuro, no lugar da borda
   oliva que sumia ali. */
.billing-card .billing-actions .outline-button{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.30);
  color:var(--neutral-100);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.billing-card .billing-actions .outline-button:hover{background:rgba(255,255,255,.18)}
/* O botão de assinar dentro do cartão escuro fica CLARO.

   Ele nasceu verde-escuro para valer sobre o creme da home, e ali continua
   assim. Aqui o fundo virou escuro — verde sobre verde some, e o aro colorido
   passava a ser a única coisa visível do botão. Invertido, a pastilha clara é
   o ponto mais aceso do cartão e o aro vira moldura, que é o papel dele.

   `background-size` precisa ser repetido: a forma curta `background` reseta o
   tamanho das camadas, e sem os 200% da segunda camada o aro para de girar.
   Foi o que aconteceu na primeira tentativa. */
.billing-card .botao-assinar{
  color:var(--green-900);
  background:
    linear-gradient(180deg,var(--surface-card) 0%,var(--neutral-200) 100%) padding-box,
    linear-gradient(90deg,var(--green-600),var(--lime-300),var(--clay-300),var(--pink),var(--lavender),var(--green-600)) border-box;
  background-size:auto, 200% 100%;
}
.billing-card .botao-assinar b{color:var(--green-600)}
/* O brilho de baixo era discreto sobre o creme; sobre o escuro ele tem
   espaço para existir de verdade. */
.billing-card .botao-assinar:before{opacity:.95}
.billing-card .botao-assinar:hover{box-shadow:0 16px 34px -14px rgba(0,0,0,.55)}
.billing-card .botao-assinar:focus-visible{outline-color:var(--lime-300)}

.billing-card .pay-methods b{color:#a8c0b5}
.billing-card .pay-methods span{
  background:rgba(255,254,250,.92);
  border-color:rgba(255,255,255,.35);
  color:var(--text-strong);
}
@media(max-width:700px){
  .billing-card{box-shadow:7px 7px 0 var(--green-900)}
/* Os dois botões deixam de dividir a linha: com o texto no tamanho legível,
  "Já assinei" ficava espremido em três linhas ao lado da pastilha larga. */
  .billing-actions{flex-direction:column;align-items:stretch}
  .billing-card .billing-actions .outline-button{width:100%}
/* No computador o texto ocupa a metade esquerda, então o véu pode clarear
  para a direita e deixar a cor aparecer. No celular o texto atravessa o
  cartão inteiro — qualquer lado claro cai em cima de alguma linha. Aqui
  ele é quase uniforme, e a cor aparece só no canto de baixo, onde não há
  texto nenhum. */
  .billing-card:after{
    background:linear-gradient(150deg,
      rgba(7,34,31,.88) 0%,
      rgba(7,34,31,.85) 68%,
      rgba(7,34,31,.62) 100%);
  }
  .billing-card>p{max-width:none}
/* O <br> do título foi escolhido para a largura do computador. No cartão
  estreito ele soma com a quebra natural e sobra um "limites." sozinho na
  quarta linha. Escondê-lo só funciona porque há um espaço antes dele no
  HTML — sem esse espaço as duas palavras se colavam ("simplespara"). */
  .billing-card h2 br{display:none}
}

/* --------------------------------- OS DOIS CARTÕES COLORIDOS DA COLUNA
   O lilás e o pêssego são os fundos mais escuros onde ainda se põe texto. O
   terracota e o cinza do sistema, que passam com folga no papel, chegam a
   4,3:1 e 3,9:1 aqui — abaixo dos 4,5 exigidos. Sobre estes dois fundos o
   texto desce um degrau.
------------------------------------------------------------------------- */
.ai-card .eyebrow,.ai-card li,.ai-card b{color:var(--clay-800)}
.ai-card p,.ai-card li span{color:var(--neutral-800)}
.tip-card p,.tip-card small,.tip-card div{color:var(--neutral-800)}
.tip-card strong,.tip-card b{color:var(--green-900)}

/* ================================================ RITMO E HIERARQUIA DO FORM
   O formulário tem 49 campos em cinco grupos. Nenhum campo mudou de lugar,
   nome ou função aqui — o que mudou é o espaço entre eles e o peso de cada
   coisa.

   O DEFEITO PRINCIPAL era o `align-items` da grade. `.fields` é grid, e grid
   estica todas as células da linha até a altura da mais alta. Como a dica da
   Idade tem três linhas de texto, a linha inteira passava a ter 115px — e o
   campo "Nome do paciente", que precisa de 55, ficava com 60px de vazio
   embaixo. Multiplicado pelos grupos, é metade do ar desperdiçado do
   formulário. `start` faz cada campo ter a própria altura.

   RITMO: os vãos eram 2, 6, 7, 9, 10, 12, 13, 14, 19, 22, 26, 27px — quinze
   valores distintos sem padrão. Agora são três: 6px entre o rótulo e o campo,
   20px entre um campo e o próximo, 32px entre um grupo e o outro. A distância
   passa a dizer o que pertence a quê.

   HIERARQUIA: o rótulo ("Nome do paciente") e a dica ("Opcional. Com a
   idade…") tinham 12px os dois, pesos 600 e 500, cores vizinhas. Liam como a
   mesma coisa. Agora o rótulo é tinta forte e a dica é peso normal em cinza —
   dois níveis, não um e meio.
--------------------------------------------------------------------------- */
.fields{gap:var(--space-20);align-items:start}
.fields.two{column-gap:var(--space-16)}
.fields.three,.fields.four{gap:var(--space-12) var(--space-16)}
.fields>label{gap:var(--space-6);color:var(--text-strong)}
.field-hint{margin-top:0;font-weight:var(--weight-regular)}
.field-tip{margin:0 0 var(--space-16)}
.form-group{padding:var(--space-32) 0}
/* O cabeçalho de seção é o botão que abre e fecha o grupo — o mais clicado
   do formulário — e tinha 23px de altura. A margem vira acolchoamento: a área
   de clique passa de 23px para 47px e o espaço na página é praticamente o
   mesmo, porque o que saiu da margem entrou no padding. */
/* `button.group-title` (elemento + classe) já existe mais acima com
   `padding:0`, e vence qualquer `.group-title` sozinho por especificidade,
   não por ordem. Por isso esta também nomeia o elemento. */
button.group-title{padding:var(--space-12) 0;margin-bottom:var(--space-8)}
.builder .generate{margin-top:var(--space-32)}

/* O título do grupo é a navegação do formulário: é por ele que se acha
   "Condições de pagamento" numa página de três telas. A 14px ele tinha o
   mesmo peso de um rótulo de campo. */
.group-title h3{font-size:var(--text-md)}

/* A grade do "O que está incluso": um rótulo de duas linhas ("Pino
   intra-radicular") esticava a linha inteira para 46px, e as outras ficavam
   em 40. Quatro fileiras, duas alturas. Com a altura mínima igual em todas,
   a grade fica uniforme — e uma grade uniforme é lida de relance, que é
   exatamente o que se faz numa lista de marcar. */
.include-options .include-chip{min-height:46px}

/* ===================================================== A BARRA DE ETAPAS
   Cinco abas, não cinco páginas. Ver o bloco "ETAPAS DA PROPOSTA" no app.js
   para o porquê de cada decisão.

   O desenho é de aba, não de pastilha: a etapa aberta é marcada por um traço
   embaixo e pela cor da marca. Pastilha grande aqui competiria com os botões
   do próprio formulário, e a barra é orientação — precisa ser lida, não
   clicada com força.
--------------------------------------------------------------------------- */
.passos{
  display:flex;
  gap:var(--space-4);
  margin:var(--space-24) 0 var(--space-8);
  border-bottom:1px solid var(--border);
  /* Rolagem lateral é o plano B quando a fonte do sistema é maior que a nossa
     e os cinco rótulos não cabem. Sem barra visível: ela apareceria por cima
     do traço da aba aberta. */
  overflow-x:auto;
  scrollbar-width:none;
}
.passos::-webkit-scrollbar{display:none}

.passo{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--space-8);
  flex:none;
  border:0;
  background:transparent;
  padding:var(--space-12) var(--space-12);
  margin-bottom:-1px;
  border-bottom:2px solid transparent;
  color:var(--text-muted);
  font:var(--weight-semi) var(--text-xs)/1 "DM Sans",sans-serif;
  cursor:pointer;
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.passo b{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:var(--radius-full);
  background:var(--neutral-200);
  color:var(--text-muted);
  font:var(--weight-semi) var(--text-2xs)/1 "DM Mono",monospace;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.passo.is-on{color:var(--text-brand);border-bottom-color:var(--green-600)}
.passo.is-on b{background:var(--green-600);color:var(--text-on-dark)}
@media (hover:hover) and (pointer:fine){
  .passo:hover:not(.is-on){color:var(--text-strong)}
  .passo:hover:not(.is-on) b{background:var(--border)}
}

/* Uma etapa por vez: a fechada sai inteira, título e tudo. O título dela já
   está na barra de cima — repetido aqui viraria uma lista de cinco cabeçalhos
   com um corpo no meio, que é o acordeão que a gente saiu de ter. */
#proposal-form .form-group.is-closed{display:none}

/* O cabeçalho da etapa aberta também sai de vista — a aba logo acima já diz
   "01 Paciente", e ler a mesma coisa duas vezes em 40px é ruído.

   Ele CONTINUA no HTML, escondido do jeito que leitor de tela ainda alcança:
   é o <h3> que dá estrutura ao documento, e quem navega por títulos depende
   dele para saber onde está. Esconder com display:none o apagaria também para
   essa pessoa. */
#proposal-form .group-title{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
/* Sem grupo embaixo, a linha de baixo do último não separa nada. */
#proposal-form .form-group{border-bottom:0;padding-top:var(--space-24)}

/* ------------------------------------------------------- BARRA DE AÇÕES */
.passo-acoes{
  display:flex;
  align-items:center;
  gap:var(--space-12);
  margin-top:var(--space-32);
  padding-top:var(--space-24);
  border-top:1px solid var(--border);
}
.passo-conta{
  margin-right:auto;
  font:var(--weight-semi) var(--text-xs) "DM Sans",sans-serif;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
/* O Voltar vem antes da contagem no HTML para a ordem de tabulação ser a da
   tela; visualmente ele fica na esquerda e a contagem colada nele. */
/* 44px de altura: o Voltar é botão de dedo como qualquer outro, e o
   `.ghost-button` do app nasce com 36.

   `:not([hidden])` pela segunda vez no projeto: `display` declarado aqui vence
   o `display:none` que o atributo hidden traz do navegador, e o botão ficava
   na tela na etapa 1, onde não há para onde voltar. */
#passo-voltar:not([hidden]){flex:none;min-height:44px;display:inline-flex;align-items:center}
.passo-acoes .generate{flex:none;width:auto;margin:0}
.passo-acoes [hidden]{display:none}

@media (max-width:700px){
  .passos{margin:var(--space-20) 0 var(--space-4);gap:0}
/* No celular só a etapa aberta mostra o rótulo. Cinco rótulos em 375px não
  cabem, e a barra rolando de lado esconde etapas — é o mesmo recurso da
  barra de abas do app, e por isso já é um gesto conhecido aqui. */
  .passo{padding:var(--space-12) var(--space-8);gap:var(--space-6)}
  .passo span{display:none}
  .passo.is-on span{display:inline}
  .passo-acoes{margin-top:var(--space-24);flex-wrap:wrap}
  .passo-conta{order:-1;flex:1 0 100%;margin:0 0 var(--space-4)}
  .passo-acoes .generate{flex:1}
}

/* `min-width:0` nos itens da grade — o mesmo defeito que a .main-area já tinha
   documentado mais acima. Item de grade nasce com `min-width:auto`, ou seja,
   ele se recusa a ficar menor que o conteúdo mais largo que tem dentro. Um
   único elemento largo no formulário empurrava a coluna para 358px dentro de
   um espaço de 343, e a página passava a rolar de lado no celular. */
.builder,.builder-side{min-width:0}
/* Mesma coisa um nível abaixo: a caixa do "O que está incluso" é item de
   grade dentro de .fields, e a grade de pastilhas dela tem coluna mínima
   de 132px. Sem min-width:0 ela empurrava a etapa 2 em 15px. */
.fields>*,.include-group{min-width:0}

/* Os botões de "+ Outra etapa" e "+ Opção de tratamento" são dedo também. */
.add-stage{min-height:44px;display:inline-flex;align-items:center}

/* ============================================ OS DOIS ÍCONES DO CABEÇALHO
   1. O "?" no rodapé da barra lateral SEMPRE foi um link `mailto:` — só não
      parecia. Interrogação é o símbolo universal de "ajuda", e ajuda pode ser
      chat, central de artigos, telefone. Envelope diz a única coisa que
      acontece: abre o e-mail. E a pastilha foi de 22px para 44, porque no
      celular ela é o alvo inteiro (o texto "Precisa de ajuda?" fica escondido
      ali).

   2. A lupa sozinha não diz o que se busca. Agora ela leva a palavra
      "Buscar" no celular e "Buscar paciente" no computador, mais o título
      completo no `title`/`aria-label`: "Buscar paciente ou orçamento".
--------------------------------------------------------------------------- */
.help-dot svg{display:block}
.botao-busca-lupa{display:inline-flex;align-items:center}
.botao-busca-curto{display:none}

@media (max-width:700px){
/* A pastilha do e-mail é o alvo inteiro no celular: 44px. */
  .help-dot{width:44px;height:44px}
  .help-dot svg{width:17px;height:17px}

/* A lupa deixa de ser um círculo mudo e vira pastilha com palavra. */
  .botao-busca{
    width:auto;
    min-height:44px;
    padding:0 var(--space-16) 0 var(--space-12);
    gap:var(--space-8);
    border-radius:var(--radius-full);
  }
  .botao-busca-curto{display:inline;font:var(--weight-semi) var(--text-xs) "DM Sans",sans-serif}
/* O título da tela vem antes e pode ser longo ("Pacientes em tratamento").
  Com `min-width:0` ele encolhe em vez de empurrar a busca para fora. */
  .topbar>div:first-child{min-width:0}
  .topbar h1{overflow-wrap:anywhere}
}

/* ============================================================== CUPONS
   O painel ganhou duas seções, e uma grade de cartões arrastáveis não
   comporta a segunda: criar cupom é um formulário, e as duas tabelas de
   parceria são largas. Por isso abas — a visão geral continua sendo a
   tela de sempre, e os cupons ficam ao lado dela, não no meio dela.

   As abas ficam logo abaixo do cabeçalho do painel, e não na barra
   lateral do app: são duas vistas de uma mesma área, e não duas áreas.
--------------------------------------------------------------------- */
.admin-tabs{
  display:flex;
  gap:4px;
  margin:20px 0 0;
  padding:4px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--neutral-100);
  width:fit-content;
  max-width:100%;
  overflow:auto;
}
.admin-tab{
  flex:none;
  border:0;
  background:transparent;
  color:#5d726c;
  border-radius:var(--radius-xs);
  padding:9px 15px;
  font:600 var(--text-xs) "DM Sans";
  cursor:pointer;
  white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.admin-tab:hover{color:var(--green-700)}
.admin-tab.is-on{
  background:var(--paper);
  color:var(--text-strong);
  box-shadow:0 1px 3px rgba(20,86,79,.10);
}
.admin-tab:active{transform:scale(.98)}

#painel-cupons{display:grid;gap:16px;margin-top:16px}
/* Uma coluna só: o formulário tem três campos lado a lado e as tabelas
   têm seis colunas. Espremer isso em meia largura devolveria o problema
   que as abas resolveram. */
.cupom-novo .fields{margin-bottom:13px}
.cupom-acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.cupom-acoes .generate{padding:12px 20px}

.btn-cupom{
  border:1px solid var(--border);
  background:var(--surface-card);
  color:#5d726c;
  border-radius:var(--radius-xs);
  padding:6px 10px;
  font:600 var(--text-2xs) "DM Sans";
  cursor:pointer;
  white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-cupom:hover:not(:disabled){border-color:#9dbdb4;color:var(--green-600)}
.btn-cupom:active:not(:disabled){transform:scale(.97)}
.btn-cupom:disabled{opacity:.45;cursor:default}
.btn-cupom.perigo:hover:not(:disabled){border-color:#c9a08c;color:var(--clay-700)}

/* Os e-mails que entraram pelo cupom, embaixo do número de usos. É uma
   lista de atalhos, não uma tabela dentro da tabela: o e-mail inteiro não
   cabe na coluna, então ele corta com elipse e o título mostra o resto. */
.cupom-quem-lista{display:grid;gap:3px;margin-top:6px;max-width:260px}
.cupom-quem{
  display:flex;align-items:center;gap:6px;
  width:100%;padding:3px 6px;
  border:0;border-radius:var(--radius-xs);
  background:transparent;color:#5d726c;
  font:500 var(--text-2xs) "DM Sans";text-align:left;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cupom-quem span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cupom-quem em{margin-left:auto;flex:none;font-style:normal;color:var(--text-muted);font-size:10px}
.cupom-quem:hover{background:var(--surface-sunken);color:var(--green-600)}
.cupom-quem:active{transform:scale(.99)}
.cupom-quem-luz{flex:none;width:6px;height:6px;border-radius:50%;background:#c6cfc9}
.cupom-quem-luz.on{background:var(--green-600)}
.cupom-quem-luz.paga{background:var(--clay-500)}
.cupom-quem-mais{justify-content:center;font-weight:600;color:var(--green-600)}
/* nowrap no modo tabela: os quatro botões são uma tira só, e é a tira
   inteira que decide se a tabela ainda cabe. Deixá-los quebrar escondia o
   aperto em vez de resolvê-lo — a tabela parecia caber e não cabia. */
.cel-cupom-acoes{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}
#tabela-cupons td:last-child,
#tabela-cupom-contas td:last-child{text-align:right;white-space:nowrap}

/* O filtro divide a linha com a busca. Mesma altura e mesma borda: eles
   são um par, e o select é quem manda no que a busca procura. */
.admin-busca select{
  flex:none;
  max-width:230px;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  padding:9px 11px;
  font:var(--text-xs) "DM Sans";
  color:#254d47;
  outline-color:#56a094;
  cursor:pointer;
}

/* ------------------------------------------------- O CUPOM DO DENTISTA
   Do outro lado do balcão, o cupom é uma linha só, embaixo da oferta: um
   campo e um botão. Ele não compete com "Assinar por R$ 9,99" — quem tem
   cupom procura por ele, e quem não tem não precisa nem ler. */
/* Texto à esquerda, campo à direita: na largura da coluna, um campo de
   código sozinho no meio de 700px parecia grande demais para o que pede. */
.cupom-caixa{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  align-items:center;
  gap:18px;
  margin:18px 0 0;
  padding:18px 22px;
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface-card);
  text-align:left;
}
.cupom-chamada b{
  display:block;
  font:600 var(--text-sm) "DM Sans";
  color:var(--text-strong);
}
.cupom-chamada span{
  display:block;
  font:var(--text-xs)/1.5 "DM Sans";
  color:var(--muted);
  margin-top:3px;
}
.cupom-linha{display:flex;gap:8px;margin:0}
.cupom-linha input{
  flex:1;
  min-width:0;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--paper);
  padding:11px 12px;
  font:600 var(--text-sm) "DM Sans";
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#254d47;
  outline-color:#56a094;
}
.cupom-linha input::placeholder{letter-spacing:0;text-transform:none;font-weight:400;color:#a7b1ac}
.cupom-linha .outline-button{flex:none}
.cupom-aviso{
  grid-column:1 / -1;
  font:var(--text-xs)/1.5 "DM Sans";
  color:var(--muted);
  margin:0;
  min-height:0;
}
.cupom-aviso:empty{display:none}
.cupom-aviso.is-erro{color:var(--clay-700)}
/* Cupom já gasto: a caixa vira recado, e o contorno tracejado (que promete
   "preencha aqui") sai junto com o campo. */
.cupom-caixa.is-usado{
  border-style:solid;
  background:var(--neutral-100);
  grid-template-columns:minmax(0,1fr);
}

/* As tabelas de cupom viram cartões pela mesma medida das Contas: a
   largura da CAIXA, não a da janela. Ver o bloco de #admin-accounts. */
.admin-table-wrap:has(#tabela-cupons),
.admin-table-wrap:has(#tabela-cupom-contas){container-type:inline-size}

@container (max-width:760px){
  #tabela-cupons, #tabela-cupons tbody, #tabela-cupons tr, #tabela-cupons td,
  #tabela-cupom-contas, #tabela-cupom-contas tbody, #tabela-cupom-contas tr, #tabela-cupom-contas td{
    display:block;
    width:100%;
    box-sizing:border-box;
  }
  #tabela-cupons thead, #tabela-cupom-contas thead{display:none}
  #tabela-cupons tr, #tabela-cupom-contas tr{
    background:var(--neutral-100);
    border:1px solid var(--neutral-200);
    border-radius:var(--radius-sm);
    padding:12px 13px;
    margin-bottom:9px;
  }
  #tabela-cupons td, #tabela-cupom-contas td{
    border:0;
    padding:5px 0;
    display:flex;
    align-items:baseline;
    gap:12px;
  }
  #tabela-cupons td:before, #tabela-cupom-contas td:before{
    content:attr(data-rotulo);
    flex:none;
    width:86px;
    font:700 var(--text-2xs) "DM Sans";
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--text-muted);
  }
  /* A primeira célula é o nome do cartão: linha inteira, sem rótulo. */
  #tabela-cupons td[data-rotulo="Cupom"], #tabela-cupom-contas td[data-rotulo="Conta"]{
    display:block;
    padding:0 0 9px;
    margin-bottom:6px;
    border-bottom:1px solid var(--neutral-200);
  }
  #tabela-cupons td[data-rotulo="Cupom"]:before,
  #tabela-cupom-contas td[data-rotulo="Conta"]:before{content:none}
  #tabela-cupons td.cel-cupom-acoes,
  #tabela-cupom-contas td.cel-cupom-acoes{justify-content:flex-start;padding-top:8px;flex-wrap:wrap}
  #tabela-cupons td.cel-cupom-acoes:before,
  #tabela-cupom-contas td.cel-cupom-acoes:before{content:none}
  .admin-table-wrap:has(#tabela-cupons),
  .admin-table-wrap:has(#tabela-cupom-contas){max-height:min(70vh,620px)}
}

@media(max-width:700px){
  .admin-tabs{width:100%}
  .admin-tab{flex:1;text-align:center}
  .admin-busca select{max-width:none}
}

/* ========================================================== INDICAÇÕES
   O convite é o único bloco desta tela que pede uma ação sem pedir
   dinheiro. Por isso ele não é mais um cartão igual aos outros: tem o
   verde da marca por fundo, e o link já vem escrito dentro do campo.
   A ação é copiar, não gerar.
--------------------------------------------------------------------- */
/* A tela de assinatura passa a ter UMA coluna, da largura do cartão da
   assinatura ativa (700px + o respiro da view). Antes eram quatro medidas
   empilhadas — o cartão de venda ocupando a tela inteira, a caixa do cupom
   com 420, o convite com 560 e a assinatura com 700 — e cada bloco começava
   e terminava num lugar diferente. */
#billing-view{max-width:796px}
.billing-ativa{max-width:none}

.indicar{
  margin:26px 0 0;
  padding:26px 28px 24px;
  border-radius:var(--radius-sm);
  background:var(--surface-dark);
  color:var(--lime-100);
  text-align:left;
}
.indicar .eyebrow{color:var(--lime-300)}
.indicar h2{
  font:600 var(--text-xl)/1.2 Fraunces,serif;
  letter-spacing:-.02em;
  color:#fff;
  margin:8px 0 10px;
  text-wrap:balance;
}
.indicar-topo p{
  font:var(--text-sm)/1.6 "DM Sans";
  color:var(--lime-100);
  margin:0;
}
.indicar-topo p b{color:#fff;font-weight:600}

.indicar-link{display:flex;gap:8px;margin-top:20px}
.indicar-link input{
  flex:1;
  min-width:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-xs);
  background:rgba(255,255,255,.08);
  padding:12px 13px;
  font:var(--text-xs) "DM Sans";
  color:#fff;
  outline-color:var(--lime-300);
  text-overflow:ellipsis;
}
.indicar-link .generate{flex:none;padding:12px 18px}
.indicar-acoes{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.indicar-acoes .outline-button{
  background:transparent;
  color:var(--lime-200);
  box-shadow:0 0 0 1px rgba(255,255,255,.28) inset;
  padding:10px 15px;
}
.indicar-acoes .outline-button:hover{box-shadow:0 0 0 1px var(--lime-300) inset;color:#fff}
.indicar-acoes small{font:var(--text-xs) "DM Sans";color:var(--lime-100);opacity:.8}

/* O placar fica depois do link, e não antes: quem chega aqui vem para
   pegar o link. O número é o que traz de volta, não o que convence. */
.indicar-placar{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
}
.indicar-placar div{margin:0}
.indicar-placar dt{
  font:700 var(--text-2xs) "DM Sans";
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--lime-300);
  margin:0 0 4px;
  white-space:nowrap;
}
.indicar-placar dd{
  margin:0;
  font:600 var(--text-xl)/1 Fraunces,serif;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.indicar-nota{
  font:var(--text-xs)/1.55 "DM Sans";
  color:var(--lime-200);
  margin:14px 0 0;
  padding-left:11px;
  border-left:2px solid var(--lime-300);
}

/* O atalho de Minha clínica reaproveita o desenho do atalho de assinatura;
   só a cor da borda muda, para os dois não virarem um bloco só. */
#indicar-atalho{border-color:#cfe2c9}

/* ------------------------------------------------ O SELO DA ABA DO PAINEL
   Crédito pendente é a única coisa do painel que espera uma ação sua. O
   número na aba existe para você não precisar abrir para descobrir. */
.aba-selo{
  display:inline-grid;
  place-items:center;
  min-width:19px;
  height:19px;
  margin-left:7px;
  padding:0 5px;
  border-radius:999px;
  background:var(--clay-600);
  color:#fff;
  font:700 var(--text-2xs)/1 "DM Sans";
  font-variant-numeric:tabular-nums;
}
.btn-cupom.destaque{
  background:var(--green-700);
  border-color:var(--green-700);
  color:#fff;
}
.btn-cupom.destaque:hover:not(:disabled){background:var(--green-600);border-color:var(--green-600);color:#fff}
.codigo-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--text-xs);
  letter-spacing:.06em;
  color:var(--text-strong);
}
.admin-table small.pendente{color:var(--clay-700);font-weight:600}
/* Sem fila, o cartão de créditos não some (a explicação dele ensina o que
   vai aparecer ali) — só perde o peso visual de tarefa aberta. */
#card-creditos.is-vazio{opacity:.72}
#kpi-indicacoes{margin-top:16px}

.admin-table-wrap:has(#tabela-creditos),
.admin-table-wrap:has(#tabela-indicadores),
.admin-table-wrap:has(#tabela-indicacoes){container-type:inline-size}

@container (max-width:700px){
  #tabela-creditos, #tabela-creditos tbody, #tabela-creditos tr, #tabela-creditos td,
  #tabela-indicadores, #tabela-indicadores tbody, #tabela-indicadores tr, #tabela-indicadores td,
  #tabela-indicacoes, #tabela-indicacoes tbody, #tabela-indicacoes tr, #tabela-indicacoes td{
    display:block;
    width:100%;
    box-sizing:border-box;
  }
  #tabela-creditos thead, #tabela-indicadores thead, #tabela-indicacoes thead{display:none}
  #tabela-creditos tr, #tabela-indicadores tr, #tabela-indicacoes tr{
    background:var(--neutral-100);
    border:1px solid var(--neutral-200);
    border-radius:var(--radius-sm);
    padding:12px 13px;
    margin-bottom:9px;
  }
  #tabela-creditos td, #tabela-indicadores td, #tabela-indicacoes td{
    border:0;
    padding:5px 0;
    display:flex;
    align-items:baseline;
    gap:12px;
  }
  #tabela-creditos td:before, #tabela-indicadores td:before, #tabela-indicacoes td:before{
    content:attr(data-rotulo);
    flex:none;
    width:92px;
    font:700 var(--text-2xs) "DM Sans";
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--text-muted);
  }
  #tabela-creditos td[data-rotulo="Quem ganhou"],
  #tabela-indicadores td[data-rotulo="Conta"],
  #tabela-indicacoes td[data-rotulo="Quem entrou"]{
    display:block;
    padding:0 0 9px;
    margin-bottom:6px;
    border-bottom:1px solid var(--neutral-200);
  }
  #tabela-creditos td[data-rotulo="Quem ganhou"]:before,
  #tabela-indicadores td[data-rotulo="Conta"]:before,
  #tabela-indicacoes td[data-rotulo="Quem entrou"]:before{content:none}
  #tabela-creditos td.cel-cupom-acoes{justify-content:flex-start;padding-top:8px;flex-wrap:wrap}
  #tabela-creditos td.cel-cupom-acoes:before{content:none}
}

@media(max-width:700px){
  .cupom-caixa{grid-template-columns:minmax(0,1fr);gap:12px}
}
@media(max-width:560px){
  .indicar{padding:22px 18px 20px}
  .indicar-link{flex-direction:column}
  .indicar-link .generate{width:100%}
  .indicar-placar{grid-template-columns:1fr;gap:12px}
  .indicar-placar div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .indicar-placar dt{margin:0}
}

/* ============================================ CUPOM DE DESCONTO EM %
   O cupom deixou de ser só "meses grátis": ele também pode abater uma
   porcentagem da mensalidade. Isso trouxe três peças novas de tela — o
   campo de porcentagem no painel, a linha que explica o desconto no
   cartão de oferta, e o placar que o parceiro vê na conta dele. */

/* O "%" vive colado no campo, e não num rótulo à parte: fora da caixa
   ele vira legenda solta e a pessoa digita "30%" dentro do input. */
.campo-sufixo{display:flex;align-items:stretch}
.campo-sufixo input{
  flex:1;
  min-width:0;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.campo-sufixo span{
  display:flex;
  align-items:center;
  padding:0 13px;
  border:1px solid var(--border);
  border-left:0;
  border-radius:0 var(--radius-xs) var(--radius-xs) 0;
  background:var(--surface-sunken);
  font:600 var(--text-sm) "DM Sans";
  color:var(--text-muted);
}
.campo-sufixo input:focus-visible+span{border-color:var(--green-600)}

/* A linha do desconto no cartão de oferta. Ela fica entre o preço e o
   botão porque é ali que a dúvida nasce: "por que está 6,99 se o site
   todo diz 9,99?". A resposta tem que estar no caminho do olho, não
   depois do clique. */
.billing-card>p.billing-desconto{
  margin:16px 0 0;
  padding:12px 14px;
  border-radius:var(--radius-xs);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  font:var(--text-xs)/1.6 "DM Sans";
  color:#d6e5db;
  max-width:44ch;
}
.billing-desconto b{color:#fff;font-weight:600}
.billing-desconto del{color:#bcd2c9;text-decoration-thickness:1px}
.billing-card>p.billing-desconto{color:#d6e5db}

/* ------------------------------------------------ O PLACAR DO PARCEIRO
   Mesmo cartão escuro do "indique e ganhe": para quem tem os dois, são
   duas caixas iguais contando a mesma história — o que a sua divulgação
   trouxe. A borda do atalho muda de cor só para eles não virarem um
   bloco único em Minha clínica. */
#meu-cupom-atalho{border-color:#d9d2bd}

.meu-cupom-item{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
}
.meu-cupom-item:first-child{margin-top:18px}
.meu-cupom-item header{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.meu-cupom-item header b{
  font:600 var(--text-lg)/1 Fraunces,serif;
  color:#fff;
  letter-spacing:.02em;
}
.meu-cupom-item header small{
  font:var(--text-xs) "DM Sans";
  color:var(--lime-200);
}
.meu-cupom-item .indicar-placar{margin-top:16px;padding-top:14px}

.meu-cupom-link{display:flex;gap:8px;margin-top:16px}
.meu-cupom-link input{
  flex:1;
  min-width:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-xs);
  background:rgba(255,255,255,.08);
  padding:12px 13px;
  font:var(--text-xs) "DM Sans";
  color:#fff;
  outline-color:var(--lime-300);
  text-overflow:ellipsis;
}
.meu-cupom-link .generate{flex:none;padding:12px 18px}
.meu-cupom-nota{
  display:block;
  margin-top:10px;
  font:var(--text-xs) "DM Sans";
  color:var(--lime-200);
}

@media (max-width:640px){
  .meu-cupom-link{flex-direction:column}
  .meu-cupom-link .generate{width:100%}
  .billing-card>p.billing-desconto{max-width:none}
}

/* O "R$" do valor fixo vai à ESQUERDA, como se escreve dinheiro. É a mesma
   peça do "%", espelhada: o arredondamento e a borda trocam de lado. */
.campo-prefixo span{
  order:-1;
  border-left:1px solid var(--border);
  border-right:0;
  border-radius:var(--radius-xs) 0 0 var(--radius-xs);
}
.campo-prefixo input{
  border-radius:0 var(--radius-xs) var(--radius-xs) 0;
}
.campo-prefixo input:focus-visible+span{border-color:var(--border)}
.campo-prefixo:focus-within span{border-color:var(--green-600)}

/* ============================================== ORÇAMENTO RÁPIDO
   Dois cartões lado a lado no topo do formulário. É uma escolha de FORMATO,
   não de etapa — por isso fica acima da barra de etapas, e com texto de
   apoio: "rápido" sozinho não diz o que some. */
.modo-orcamento{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-8);
  margin:var(--space-20) 0 0;
}
.modo-op{
  display:grid;
  gap:2px;
  text-align:left;
  padding:var(--space-12) var(--space-16);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface-card);
  color:var(--text-strong);
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.modo-op b{font:var(--weight-semi) var(--text-sm) "DM Sans",sans-serif}
.modo-op small{font:var(--text-xs)/1.4 "DM Sans",sans-serif;color:var(--text-muted)}
.modo-op.is-on{border-color:var(--green-600);background:var(--lime-100);box-shadow:0 0 0 1px var(--green-600) inset}
.modo-op:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .modo-op:hover:not(.is-on){border-color:var(--text-muted)}
}
.modo-op:focus-visible{outline:2px solid var(--green-600);outline-offset:2px}

/* No rápido: sem abas, tudo numa tela. Os grupos fechados voltam a aparecer
   (menos Fotos e Observações), e o título de cada um volta a ser visível —
   sem a barra de abas, é ele que diz onde começa o pagamento. */
#proposal-form.is-rapido .passos,
#proposal-form.is-rapido .passo-conta{display:none}
#proposal-form.is-rapido .form-group.is-closed{display:block}
/* O acordeão antigo ainda esconde o CORPO do grupo fechado (.is-closed
   .group-body). Sem isto, no rápido apareciam só os títulos. */
#proposal-form.is-rapido .form-group.is-closed .group-body{display:block}
/* O número da etapa sai: com Fotos fora, a tela diria 01, 02, 04. */
#proposal-form.is-rapido .group-title>span{display:none}
#proposal-form.is-rapido .form-group[data-grupo="fotos"],
#proposal-form.is-rapido .form-group[data-grupo="obs"]{display:none}
#proposal-form.is-rapido .group-title{
  position:static;
  width:auto;
  height:auto;
  overflow:visible;
  clip:auto;
  white-space:normal;
  margin-bottom:var(--space-12);
}
#proposal-form.is-rapido .form-group + .form-group{border-top:1px solid var(--border)}
/* O que é detalhe de proposta completa sai: idade, "o que está incluso" e o
   tratamento padrão salvo.

   As OPÇÕES de tratamento ficaram. Elas saíam daqui por serem tratadas como
   coisa da proposta completa, e o resultado é que no rápido não havia como
   oferecer caminhos à escolha do paciente — era justamente o que faltava
   (08/10/2026). A ficha agora imprime Opção A, Opção B, cada uma com o seu
   valor e as suas condições, sem somar alternativa nenhuma. */
#proposal-form.is-rapido label:has(#patient-age),
#proposal-form.is-rapido .include-group,
#proposal-form.is-rapido .treatment-default{display:none}
#proposal-form.is-rapido #fields-paciente{grid-template-columns:1fr}

@media (max-width:520px){
  .modo-orcamento{grid-template-columns:1fr}
}

/* A proposta rápida, dentro do app e no PDF. */
.resumo-lista{list-style:none;margin:var(--space-12) 0 0;padding:0;display:grid}
.resumo-lista li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--space-16);
  padding:var(--space-12) 0;
  border-bottom:1px solid var(--border);
  font:var(--text-sm)/1.45 "DM Sans",sans-serif;
  color:var(--text-strong);
}
.resumo-lista li:first-child{border-top:1px solid var(--border)}
.resumo-lista span{display:grid;gap:2px}
.resumo-lista i{font-style:normal;font-size:var(--text-xs);color:var(--text-muted)}
.resumo-lista b{white-space:nowrap;font-weight:var(--weight-semi);font-variant-numeric:tabular-nums}
.resumo-nota{margin:var(--space-4) 0 0;color:var(--text-muted)}

/* Campos que só existem no orçamento rápido (a Descrição de cada tratamento,
   que vai para a coluna dela na ficha). No completo eles não têm onde
   aparecer, então não aparecem. */
#proposal-form:not(.is-rapido) .so-rapido{display:none}

/* Link de pagamento que não é endereço: aviso, nunca bloqueio. */
[data-link-pagamento].is-aviso{border-color:var(--clay-600, #8a4a33)}
.field-hint.is-aviso{color:var(--clay-700, #8a4a33);font-weight:600}

/* ------------------------------------------------ PAGAMENTOS SEM CONTA
   Fica no topo da Visão geral porque é o único quadro que espera uma ação
   com dinheiro envolvido: alguém pagou e ainda não tem o acesso. Com
   pendência, ganha a borda de alerta; sem, é uma linha discreta. */
.sem-conta{margin-bottom:var(--space-16)}
.sem-conta.tem-pendente{border-color:var(--clay-600);box-shadow:0 0 0 1px var(--clay-600) inset}
.sem-conta h3{display:flex;align-items:center;gap:8px}
.sem-conta-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px 16px;
  align-items:center;
  padding:12px 0;
  border-top:1px solid var(--border);
}
.sem-conta-item > div > b{display:block;font:600 var(--text-sm) "DM Sans",sans-serif;color:var(--text-strong);word-break:break-word}
.sem-conta-item small{display:block;margin-top:2px;font:var(--text-xs) "DM Sans",sans-serif;color:var(--text-muted)}
.sem-conta-item.is-resolvido{opacity:.75}
.sem-conta-ligar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sem-conta-ligar input{min-width:220px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-xs);font:var(--text-sm) "DM Sans",sans-serif}
.sem-conta-mao{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.sem-conta-mao summary{cursor:pointer;font:600 var(--text-sm) "DM Sans",sans-serif;color:var(--text-brand, var(--green-700))}
.sem-conta-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-top:8px}
.sem-conta-form label{display:grid;gap:4px;font:600 var(--text-xs) "DM Sans",sans-serif;color:var(--text-strong)}
.sem-conta-form input{padding:9px 10px;border:1px solid var(--border);border-radius:var(--radius-xs);font:var(--text-sm) "DM Sans",sans-serif}
.sem-conta-form .generate{margin:0;width:auto}
@media (max-width:760px){
  .sem-conta-item{grid-template-columns:1fr}
  .sem-conta-ligar input{min-width:0;flex:1}
  .sem-conta-form{grid-template-columns:1fr}
}

/* ------------------------------------------------ ANTES DE PAGAR
   O quadro que segura o checkout até ela confirmar o e-mail. O e-mail é o
   maior texto da caixa de propósito: é a única coisa que importa aqui. */
.aviso-checkout{
  width:min(460px, calc(100% - 32px));
  padding:0;
  border:0;
  border-radius:var(--radius-sm);
  background:var(--surface-card);
  color:var(--text-strong);
  box-shadow:0 30px 70px -30px rgba(10,40,37,.55);
}
.aviso-checkout::backdrop{background:rgba(10,40,37,.55)}
.aviso-checkout-caixa{padding:26px 26px 22px;display:grid;gap:12px}
.aviso-checkout-caixa h2{margin:0;font:600 var(--text-xl)/1.2 Fraunces,serif;color:var(--green-900)}
.aviso-checkout-caixa p{margin:0;font:var(--text-sm)/1.6 "DM Sans",sans-serif;color:var(--text-muted)}
.aviso-checkout-email{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:var(--radius-xs);
  background:var(--lime-100);border:1px solid var(--green-600);
}
.aviso-checkout-email b{font:700 var(--text-base) "DM Sans",sans-serif;color:var(--green-900);word-break:break-all}
.aviso-checkout-email .outline-button{flex:none}
.aviso-checkout-confirma{display:flex;gap:10px;align-items:flex-start;font:600 var(--text-sm)/1.45 "DM Sans",sans-serif;color:var(--text-strong);cursor:pointer}
.aviso-checkout-confirma input{margin-top:2px;width:18px;height:18px;accent-color:var(--green-600);flex:none}
.aviso-checkout-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.aviso-checkout-acoes .generate{margin:0;width:auto}
.aviso-checkout-acoes .generate:disabled{opacity:.45;cursor:not-allowed}

/* "3 completos · 2 rápidos" na lista de contas: quebra entre as partes,
   nunca no meio de uma delas. */
.conta-formato span{white-space:nowrap}

/* ------------------------------------------- DENTRO DO APP DA PLAY STORE
   O app instalado pela loja é este site em tela cheia. A assinatura é
   cobrada no navegador, pelo Asaas, então dentro do app não há botão de
   assinar — é o que a regra do Google pede para conteúdo digital vendido
   fora do pagamento dele. Ver `dentroDoApp` no app.js. */
.no-app-store #activate-plan,
.no-app-store #billing-oferta .billing-actions,
.no-app-store #cupom-caixa,
.no-app-store #paywall .generate,
.no-app-store .so-navegador{display:none}
/* o `hidden` do HTML sai pelo app.js; aqui fica só o desenho */
.no-app-store .so-app{display:block}

/* O bloco da escolha de formato ganhou título: era dois cartões soltos no
   meio do formulário, e quem abria pela primeira vez não percebia que ali
   havia uma escolha — ela pediu para ficar mais visível (23/09/2026). */
.modo-bloco{
  margin:var(--space-20) 0 0;
  padding:var(--space-16);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface-sunken);
}
.modo-topo{display:grid;gap:2px;margin-bottom:var(--space-12)}
.modo-topo strong{font:var(--weight-semi) var(--text-sm) "DM Sans",sans-serif;color:var(--text-strong)}
.modo-topo small{font:var(--text-xs)/1.45 "DM Sans",sans-serif;color:var(--text-muted)}
.modo-bloco .modo-orcamento{margin:0}
/* O escolhido ganha um visto: a borda sozinha some no meio de um formulário
   cheio de caixas com borda. */
.modo-op{position:relative;padding-right:var(--space-32)}
.modo-op.is-on::after{
  content:"✓";
  position:absolute;
  top:50%;
  right:var(--space-12);
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:20px;height:20px;
  border-radius:var(--radius-full);
  background:var(--green-600);
  color:#fff;
  font:700 11px/1 "DM Sans",sans-serif;
}

/* Embaixo da etiqueta de plano, na lista de Contas: até quando o acesso
   está pago. Vencido fica em vermelho — a conta ainda diz "Assinante", e é
   justamente essa contradição que precisa saltar aos olhos. */
.conta-prazo{
  display:block;
  margin-top:4px;
  font:500 var(--text-xs)/1.3 "DM Sans",sans-serif;
  color:var(--text-muted);
  white-space:nowrap;
}
.conta-prazo.is-vencido{color:#ad563a;font-weight:600}

/* No computador a faixa de instalação não precisa atravessar a tela inteira:
   em 1600px ela virava um tapete escuro com duas linhas de texto miúdo no
   canto. Encosta no canto de baixo, do tamanho do que tem para dizer. */
@media (min-width:760px){
  .install-bar{left:auto;max-width:440px}
}

/* A nota de "mesmo procedimento do Tratamento N" na prévia e no PDF. O
   desenho acompanha o da página do paciente (patient.css): quem confere a
   prévia precisa ver exatamente o que vai sair. */
.treatment-repete{
  margin:14px 0 0;
  padding:12px 14px;
  border-left:3px solid var(--neutral-200);
  background:var(--neutral-100);
  border-radius:0 var(--radius-xs) var(--radius-xs) 0;
  font:var(--text-sm)/1.5 "DM Sans",sans-serif;
  color:var(--text-muted);
}
.treatment-repete b{color:var(--text-strong);font-weight:600}

/* ------------------------------- EDITAR O TEXTO DENTRO DA PROPOSTA ABERTA
   Só aqui, com o orçamento pronto na frente: é olhando o resultado que se
   percebe o que está sobrando. Durante a criação não aparece.
   `.so-tela` é o que não vai para o papel — some na impressão e o onclone
   do PDF esconde também. */
@media print { .so-tela { display: none !important; } }

.bloco-editar{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;padding:7px 12px;
  background:transparent;border:1px dashed var(--neutral-300,#d9e2d6);
  border-radius:var(--radius-xs);
  font:600 var(--text-xs) "DM Sans",sans-serif;color:var(--text-muted);
  cursor:pointer;
}
.bloco-editar:hover{border-style:solid;color:var(--text-strong);border-color:var(--green-600,#1f7770)}

.bloco-texto-edicao{
  margin:14px 0;padding:14px;
  background:var(--neutral-100);border:1px solid var(--neutral-200);
  border-radius:var(--radius-sm);
}
.bloco-texto-edicao label{display:block;margin-bottom:10px}
.bloco-texto-edicao label>span{display:block;margin-bottom:5px;font:600 var(--text-xs) "DM Sans",sans-serif}
.bloco-texto-edicao label>span i{font-style:normal;font-weight:400;color:var(--text-muted)}
.bloco-texto-edicao textarea{
  width:100%;resize:vertical;font:var(--text-sm)/1.55 "DM Sans",sans-serif;
  /* A altura é calculada no JS pelo conteúdo (ajustarAltura). O min-height é
     só o piso de quando o campo está vazio; o overflow escondido evita a
     barra de rolagem piscar enquanto se digita. */
  min-height:64px;overflow:hidden;
}
.bloco-texto-acoes{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.bloco-texto-acoes .generate,.bloco-texto-acoes .outline-button{width:auto;margin:0;padding:9px 14px;font-size:var(--text-xs)}

/* As etapas dentro da caixa de edição. Numeradas como o paciente vê, para a
   ordem na tela de edição e a da proposta serem a mesma coisa. */
.bloco-passos{margin:4px 0 14px;padding-top:12px;border-top:1px solid var(--neutral-200)}
.bloco-passos-titulo{display:block;margin-bottom:10px;font:600 var(--text-xs) "DM Sans",sans-serif}
.bloco-passo{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;margin-bottom:10px}
.bloco-passo-num{
  margin-top:9px;font:700 var(--text-xs) "DM Mono",monospace;color:var(--text-accent,#9a4c34);
}
.bloco-passo input,.bloco-passo textarea{width:100%;font:var(--text-sm)/1.5 "DM Sans",sans-serif}
.bloco-passo textarea{margin-top:6px;resize:vertical}
.bloco-passo-remover{
  margin-top:4px;width:30px;height:30px;flex:none;
  background:transparent;border:1px solid var(--neutral-200);border-radius:var(--radius-xs);
  color:var(--text-muted);font-size:var(--text-base);cursor:pointer;
}
.bloco-passo-remover:hover{border-color:#eccfc4;color:#ad563a}
.bloco-passos .outline-button{width:auto;margin:2px 0 0;padding:8px 12px;font-size:var(--text-xs)}

/* ---------------------------- AS CAPACIDADES NO CARTÃO DA ASSINATURA
   O mesmo desenho da home, adaptado ao cartão escuro: é aqui que a conta
   grátis chega quando esbarra no limite ou clica em editar, então a lista
   precisa mostrar o tamanho do que ela ainda não tem. */
.billing-features{
  margin:20px 0 4px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:16px 20px;
}
.billing-features h4{
  margin:0 0 8px;
  font:700 11px/1 "DM Sans",sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--lime-300,#cfe0b0);
}
.billing-features ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.billing-features li{
  display:grid;grid-template-columns:auto 1fr;gap:8px;
  font:500 var(--text-xs)/1.4 "DM Sans",sans-serif;
  color:var(--border);
}
.billing-features li:before{content:"✓";color:var(--lime-300,#cfe0b0);font-weight:700}
.billing-features li b{color:#fff;font-weight:700}

/* "Usar também nas próximas propostas deste tratamento", dentro da caixa de
   edição. Fica abaixo dos botões porque é uma escolha sobre o que salvar, e
   não um campo a preencher. */
/* A especificidade precisa vencer `.bloco-texto-edicao label{display:block}`
   aqui em cima, senão a caixa e o rótulo empilham. */
.bloco-texto-edicao .bloco-futuras{
  display:flex;align-items:flex-start;gap:9px;
  margin:2px 0 8px;cursor:pointer;
  font:500 var(--text-xs)/1.45 "DM Sans",sans-serif;color:var(--text-strong);
}
.bloco-texto-edicao .bloco-futuras>span{display:inline;margin:0;font-weight:500}
.bloco-texto-edicao .bloco-futuras input{
  margin-top:1px;width:16px;height:16px;flex:none;accent-color:var(--green-600,#1f7770);
}
.bloco-texto-acoes .outline-button.danger{color:#ad563a;border-color:#eccfc4}