/* Cliup — protótipo. Layout copiado do Clinicorp (barra azul-marinho, cartões brancos, abas sublinhadas),
   com as cores do Cliup: azul-marinho e azul claro no lugar do laranja deles. */
:root{
  --navy:#0F2D52;          /* barra do topo, títulos fortes */
  --navy-2:#173B66;
  --azul:#1D6FD1;          /* ação principal (no Clinicorp é o laranja) */
  --azul-esc:#155AAE;
  --azul-claro:#7CC4FF;    /* a cor clara do Cliup */
  --azul-suave:#E8F2FD;
  --azul-suave-2:#F3F8FE;
  --azul-btn:#4A90E2;      /* o azul do botão "Aprovar" do Clinicorp */
  --fundo:#F4F5F7;
  --branco:#FFFFFF;
  /* cores de TEXTO iguais às do Clinicorp (medido 26/10): corpo rgb(51,51,51), títulos rgb(12,10,9),
     secundário rgba(0,0,0,.6) no branco. As cores de marca (azuis) continuam as do Cliup. */
  --tinta:#333333;         /* era #1C2430 */
  --titulo:#0C0A09;        /* títulos e nomes em negrito */
  --tinta-2:#666666;       /* era #4B5563 */
  --cinza:#8C8C8C;         /* era #8A94A3 */
  --linha:#E3E6EB;
  --linha-2:#D3D8DF;
  --barra-escura:#3B3F45;  /* cabeçalho escuro das tabelas e do "Orçamento" */
  --verde:#4CAF50;
  --verde-2:#2E8B47;
  --verde-suave:#E6F4EA;
  --vermelho:#D93B3B;
  --vermelho-suave:#FDECEC;
  --amarelo:#F4B400;
  --amarelo-suave:#FFF6DB;
  --roxo:#7A55D9;
  --raio:8px;
  --sombra:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --sombra-modal:0 20px 40px rgba(15,45,82,.22);
  --fonte:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fundo);color:var(--tinta);font-family:var(--fonte);font-size:14px;line-height:1.43;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
svg.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.oculto{display:none!important}
.mudo{color:var(--cinza)}
.forte{font-weight:600}
.direita{text-align:right}
.centro{text-align:center}
.linha-flex{display:flex;align-items:center;gap:8px}
.espaco{flex:1}
.nowrap{white-space:nowrap}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}

/* ---------- Faixa de protótipo ---------- */
.faixa-proto{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:90;background:var(--navy);color:#fff;font-size:12px;padding:5px 12px;border-radius:999px;box-shadow:var(--sombra);opacity:.92;display:flex;gap:10px;align-items:center}
.faixa-proto button{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:1px 9px;cursor:pointer;font-size:11.5px}

/* ---------- Login (igual ao do Clinicorp: formulário à esquerda, arte à direita) ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:80px;padding:32px;background:#fff}
.login-form{width:310px}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:34px}
.login-logo img{width:34px;height:34px}
.logo-txt{font-family:"Baloo 2",var(--fonte);font-weight:600;font-size:22px;line-height:1;color:#fff;letter-spacing:.005em;padding-top:3px}
.logo-txt.escuro{color:var(--navy);font-size:28px}
.login-form h1{font-size:26px;margin:0 0 4px}
.login-form .sub{color:var(--tinta-2);margin:0 0 22px}
.login-form label{display:block;font-weight:600;margin:14px 0 6px}
.login-form input{width:100%;height:38px;border:1px solid var(--linha-2);border-radius:6px;padding:0 12px;background:#fff}
.login-form input:focus{outline:2px solid var(--azul-suave);border-color:var(--azul)}
.login-form .btn{width:100%;margin-top:22px;height:38px;justify-content:center}
.login-form .esqueci{display:block;text-align:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--linha);text-decoration:underline}
.login-arte{width:520px;height:420px;border-radius:28px;background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 55%,#1D6FD1 100%);color:#fff;padding:40px;position:relative;overflow:hidden}
.login-arte h2{font-size:34px;line-height:1.1;margin:0 0 14px;max-width:330px}
.login-arte p{font-size:16px;opacity:.85;max-width:320px}
.login-arte .bolha{position:absolute;border-radius:50%;background:rgba(124,196,255,.18)}
.login-arte .tag{display:inline-block;margin-top:22px;border:2px solid var(--azul-claro);color:var(--azul-claro);border-radius:10px;padding:8px 16px;font-weight:700;letter-spacing:.3px}
@media(max-width:900px){.login-arte{display:none}}

/* ---------- Barra do topo ---------- */
.topo{position:sticky;top:0;z-index:40;height:56px;background:var(--navy);color:#fff;display:flex;align-items:center;padding:0 14px;gap:12px}
.topo .icone-btn{color:#fff}
.topo .voltar{display:flex;align-items:center;gap:6px;color:#fff;background:none;border:0;cursor:pointer;font-weight:500;padding:6px 8px;border-radius:6px}
.topo .voltar:hover{background:rgba(255,255,255,.08)}
.topo .logo-topo{height:30px;margin-left:4px}
.busca-topo{position:absolute;left:50%;transform:translateX(-50%);width:420px;max-width:42vw}
.busca-topo .bt-campo{display:flex;align-items:center;gap:8px;background:#fff;color:var(--tinta);border-radius:999px;height:34px;padding:0 14px;border:2px solid transparent}
.busca-topo .bt-campo:focus-within{border-color:var(--azul-claro)}
.busca-topo input{border:0;outline:0;flex:1;background:transparent;font-size:14px}
.busca-topo .resultados{position:absolute;top:40px;left:0;right:0;background:#fff;color:var(--tinta);border-radius:10px;box-shadow:var(--sombra-modal);padding:6px;max-height:380px;overflow:auto}
.busca-topo .grupo{font-size:11.5px;color:var(--cinza);padding:6px 10px 4px}
.busca-topo .item{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer}
.busca-topo .item:hover,.busca-topo .item.ativo{background:var(--azul-suave-2)}
.busca-topo .item .nome{color:var(--azul);font-weight:600}
.busca-topo .item .det{font-size:12px;color:var(--cinza)}
.topo-dir{margin-left:auto;display:flex;align-items:center;gap:4px}
.icone-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:none;border:0;cursor:pointer;color:var(--tinta-2)}
.icone-btn:hover{background:rgba(127,127,127,.12)}
.icone-btn .badge{position:absolute;top:2px;right:0;background:var(--vermelho);color:#fff;font-size:10px;font-weight:700;border-radius:999px;padding:0 4px;min-width:16px;line-height:15px;text-align:center}
.usuario-topo{display:flex;align-items:center;gap:8px;margin-left:8px;padding:4px 8px;border-radius:8px;cursor:pointer;background:none;border:0;color:#fff}
.usuario-topo:hover{background:rgba(255,255,255,.08)}
.usuario-topo .av{width:32px;height:32px;border-radius:50%;background:var(--azul-claro);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;border:2px solid rgba(255,255,255,.5)}
.usuario-topo .q{line-height:1.15;text-align:left}
.usuario-topo .q b{display:block;font-size:14px;font-weight:500}
.usuario-topo .q small{font-size:12px;opacity:.75}
@media(max-width:820px){.busca-topo{position:static;transform:none;flex:1;max-width:none;width:auto}.usuario-topo .q{display:none}.topo .logo-topo{display:none}}

/* ---------- Menu lateral (gaveta) ---------- */
.gaveta-fundo{position:fixed;inset:0;background:rgba(15,45,82,.35);z-index:60}
.gaveta{position:fixed;top:0;left:0;bottom:0;width:280px;background:#fff;z-index:61;box-shadow:var(--sombra-modal);display:flex;flex-direction:column}
.gaveta .cab-clinica{padding:22px 16px 14px;text-align:center;border-bottom:1px solid var(--linha)}
.gaveta .logo-clinica{font-size:24px;font-weight:300;letter-spacing:.06em;color:var(--navy);margin-bottom:10px}
.gaveta .plano{display:inline-block;background:var(--azul);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:2px 10px}
.gaveta .busca-func{display:flex;align-items:center;gap:8px;background:#F1F3F6;border-radius:8px;padding:0 10px;height:34px;margin:8px 4px}
.gaveta .busca-func input{border:0;background:transparent;outline:0;flex:1;font-size:14px}
.gaveta a.it svg.ic{color:var(--azul)}
.gaveta nav{flex:1;overflow:auto;padding:8px}
.gaveta .sec{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza);padding:12px 10px 6px}
.gaveta a.it{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;color:var(--tinta);font-weight:500;text-decoration:none}
.gaveta a.it:hover{background:var(--azul-suave-2)}
.gaveta a.it.ativo{background:var(--azul-suave);color:var(--azul)}
.gaveta a.it .breve{margin-left:auto;font-size:10.5px;background:var(--amarelo-suave);color:#8a6400;border-radius:999px;padding:1px 7px;font-weight:600}
.gaveta .rodape{border-top:1px solid var(--linha);padding:8px}

/* ---------- Página ---------- */
.pagina{padding:24px 28px 80px;max-width:1360px;margin:0 auto}
.pagina.larga{max-width:none}
.titulo-pag{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.titulo-pag h1{font-size:24px;margin:0;font-weight:700;color:var(--titulo)}
.titulo-pag .acoes{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.saudacao{font-size:30px;margin:26px 0 30px;font-weight:400;color:var(--titulo);line-height:1.3}
.saudacao b{font-weight:700}

/* Cartões do início (iguais aos do Clinicorp) */
.atalhos{display:grid;grid-template-columns:repeat(3,210px);gap:16px;justify-content:center}
@media(max-width:760px){.atalhos{grid-template-columns:repeat(2,1fr)}}
.atalho{background:#fff;border-radius:10px;padding:20px 18px 22px;box-shadow:var(--sombra);cursor:pointer;border:1px solid transparent;transition:border-color .15s,transform .15s;text-align:left}
.atalho:hover{border-color:var(--azul-claro);transform:translateY(-1px)}
.atalho .ico{width:34px;height:34px;border-radius:8px;background:var(--cor-icones-suave,var(--azul-suave));color:var(--cor-icones,var(--azul));display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.atalho h3{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--titulo)}
.atalho p{margin:0;color:var(--tinta-2);font-size:14px;line-height:1.43}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:6px;border:1px solid transparent;cursor:pointer;font-weight:500;font-size:14px;white-space:nowrap;background:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primario{background:var(--azul);color:#fff}
.btn.primario:hover:not(:disabled){background:var(--azul-esc)}
.btn.contorno{border-color:var(--azul);color:var(--azul);background:#fff}
.btn.contorno:hover:not(:disabled){background:var(--azul-suave-2)}
.btn.cinza{border-color:var(--linha-2);color:var(--tinta)}
.btn.cinza:hover{background:#f7f8fa}
.btn.perigo{background:var(--vermelho);color:#fff}
.btn.azul-cheio{background:var(--azul-btn);color:#fff;width:100%;justify-content:center;height:38px}
.btn.verde{background:var(--verde-2);color:#fff}
.btn.link{background:none;border:0;color:var(--azul);padding:0 6px;height:auto}
.btn.link:hover{text-decoration:underline}
.btn.peq{height:28px;padding:0 10px;font-size:12px}
.btn.cheio{width:100%;justify-content:center}

/* ---------- Cartões, chips ---------- */
.cartao{background:#fff;border-radius:10px;box-shadow:var(--sombra);padding:16px}
.cartao h3{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--titulo)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;border-radius:4px;padding:2px 8px;line-height:1.5;white-space:nowrap}
.chip.verde{background:var(--verde);color:#fff}
.chip.verde-s{background:var(--verde-suave);color:var(--verde-2)}
.chip.azul{background:var(--azul-suave);color:var(--azul)}
.chip.cinza{background:#EEF0F3;color:var(--tinta-2)}
.chip.vermelho{background:var(--vermelho-suave);color:var(--vermelho)}
.chip.amarelo{background:var(--amarelo-suave);color:#8a6400}
.chip.roxo{background:#EFE9FD;color:var(--roxo)}
.vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 16px;color:var(--tinta-2)}
.vazio .ilu{width:64px;height:64px;border-radius:16px;background:var(--azul-suave);color:var(--azul);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.vazio .ilu svg.ic{width:30px;height:30px}
.vazio b{color:var(--titulo);font-size:16px;margin-bottom:4px}
.vazio p{margin:0;font-size:14px;max-width:300px}

/* ---------- Formulários (estilo do Clinicorp: rótulo pequeno em cima, linha embaixo) ---------- */
.campo{display:flex;flex-direction:column;gap:3px;min-width:0}
.campo>label{font-size:12px;font-weight:500;color:var(--tinta-2)}
/* Clinicorp, telas novas (caixa com borda): rótulo 14px escuro em cima da caixa. Ficha do paciente e páginas de
   configuração (Clínica): rótulo em NEGRITO; janelas de configuração (procedimento, equipamento): peso médio. */
.campo.caixa>label{font-size:14px;font-weight:500;color:var(--tinta)}
.pa-form .campo>label,.cf-conteudo .campo.caixa>label{font-size:14px;font-weight:700;color:var(--titulo)}
.campo>label .obr{color:var(--vermelho)}
.campo input,.campo select,.campo textarea{border:0;border-bottom:1px solid var(--linha-2);background:transparent;padding:6px 2px;outline:0;border-radius:0;min-height:32px;width:100%}
.campo textarea{min-height:64px;resize:vertical;line-height:1.45}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-bottom:2px solid var(--azul)}
.campo.caixa input,.campo.caixa select,.campo.caixa textarea{border:1px solid var(--linha-2);border-radius:6px;padding:7px 10px;background:#fff}
.campo.caixa input:focus,.campo.caixa select:focus,.campo.caixa textarea:focus{border-color:var(--azul);outline:2px solid var(--azul-suave)}
.campo .ajuda{font-size:12px;color:var(--cinza)}
.campo.erro input,.campo.erro select{border-bottom-color:var(--vermelho)}
.grade{display:grid;gap:14px 18px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
.radios{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.radios label,.check{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:14px}
input[type=radio],input[type=checkbox]{accent-color:var(--azul);width:16px;height:16px;margin:0}
.interruptor{position:relative;display:inline-block;width:34px;height:20px;flex:none}
.interruptor input{opacity:0;width:0;height:0}
.interruptor span{position:absolute;inset:0;background:#cfd5dd;border-radius:999px;transition:.2s;cursor:pointer}
.interruptor span:before{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.interruptor input:checked+span{background:var(--azul)}
.interruptor input:checked+span:before{transform:translateX(14px)}
.segmentado{display:inline-flex;background:#F1F3F6;border-radius:8px;padding:3px;gap:2px}
.segmentado button{border:0;background:none;padding:5px 12px;border-radius:6px;cursor:pointer;font-weight:500;color:var(--tinta-2);font-size:14px}
.segmentado button.ativo{background:#fff;color:var(--titulo);box-shadow:var(--sombra)}

/* ---------- Abas sublinhadas ---------- */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--linha);overflow-x:auto;scrollbar-width:thin}
.abas button{border:0;background:none;padding:12px 14px;cursor:pointer;color:var(--tinta-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-size:14px}
.abas button:hover{color:var(--tinta)}
.abas button.ativo{color:var(--azul);border-bottom-color:var(--azul)}
.abas button .breve{font-size:10px;background:var(--amarelo-suave);color:#8a6400;border-radius:999px;padding:0 6px;margin-left:4px}

/* ---------- Tabelas ---------- */
.tabela-env{background:#fff;border-radius:10px;box-shadow:var(--sombra);overflow:auto}
table.tab{width:100%;border-collapse:collapse;font-size:14px}
table.tab th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--linha);white-space:nowrap;background:#fff}
table.tab.escura th{background:var(--barra-escura);color:#fff;text-transform:none;letter-spacing:0;font-size:12px;font-weight:600}
table.tab td{padding:10px 12px;border-bottom:1px solid var(--linha);vertical-align:middle}
table.tab tr:last-child td{border-bottom:0}
table.tab tbody tr:hover td{background:#FAFBFC}
table.tab tr.clicavel{cursor:pointer}
table.tab tr.excluido td{color:var(--cinza);text-decoration:line-through}
.rodape-tab{display:flex;justify-content:flex-end;padding:10px 4px;font-weight:700;font-size:14px}

/* ---------- Modal ---------- */
.modal-fundo{position:fixed;inset:0;background:rgba(20,26,36,.55);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.modal{background:#fff;border-radius:10px;box-shadow:var(--sombra-modal);width:520px;max-width:100%;display:flex;flex-direction:column;max-height:calc(100vh - 80px)}
.modal.grande{width:920px}
.modal.medio{width:680px}
.modal.cheio{width:1100px}
.modal .m-cab{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 6px}
.modal .m-cab h2{margin:0;font-size:17px;font-weight:700;color:var(--titulo)}
.modal .m-cab .sub{font-size:14px;color:var(--tinta-2);margin-top:2px}
.modal .m-cab .fechar{margin-left:auto}
.modal .m-corpo{padding:10px 18px 16px;overflow:auto}
.modal .m-rodape{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--linha)}
.modal .m-rodape.sem-linha{border-top:0}
.aviso{display:flex;gap:10px;align-items:flex-start;border-radius:8px;padding:10px 12px;font-size:12.5px}
.aviso.azul{background:var(--azul-suave);color:#174a8b;border:1px solid #cfe3fa}
.aviso.amarelo{background:var(--amarelo-suave);color:#7a5800;border:1px solid #f6e3a6}
.aviso.vermelho{background:var(--vermelho-suave);color:#9c2525;border:1px solid #f5c7c7}
.aviso.verde{background:var(--verde-suave);color:#1f6b35;border:1px solid #c5e6cf}

/* Etapas (o "Processando" e o envio da anamnese) */
.etapas{display:flex;align-items:flex-start;justify-content:space-between;position:relative;margin:18px 6px 8px}
.etapas:before{content:"";position:absolute;left:30px;right:30px;top:13px;height:2px;background:var(--linha-2)}
.etapas .et{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;width:25%;text-align:center;font-size:12px;color:var(--cinza)}
.etapas .et .b{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--linha-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.etapas .et.feito{color:var(--azul)}
.etapas .et.feito .b{background:var(--azul);border-color:var(--azul);color:#fff}
.etapas .et.atual{color:var(--tinta)}
.etapas .et.atual .b{border-color:var(--azul);color:var(--azul);box-shadow:0 0 0 4px var(--azul-suave)}
.etapas.verde .et.feito .b{background:var(--verde);border-color:var(--verde)}
.etapas.verde .et.feito{color:var(--verde-2)}

/* ---------- Toast e menus ---------- */
.toasts{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:#fff;color:var(--tinta);border-radius:8px;box-shadow:var(--sombra-modal);padding:10px 14px;display:flex;gap:8px;align-items:center;font-size:13px;border-left:4px solid var(--verde)}
.toast.erro{border-left-color:var(--vermelho)}
.menu-flut{position:fixed;z-index:150;background:#fff;border-radius:8px;box-shadow:var(--sombra-modal);padding:6px;min-width:200px}
.menu-flut button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 10px;border-radius:6px;cursor:pointer;text-align:left;font-size:14px;color:var(--tinta)}
.menu-flut button:hover{background:var(--azul-suave-2)}
.menu-flut button.perigo{color:var(--vermelho)}
.menu-flut button:disabled{color:var(--cinza);cursor:not-allowed;background:none}

/* ---------- Ficha do paciente ---------- */
.ficha-cab{background:#fff;padding:20px 28px 0;border-bottom:1px solid var(--linha)}
.ficha-cab .linha1{display:flex;gap:18px;align-items:flex-start;max-width:1360px;margin:0 auto}
.avatar-g{width:84px;height:84px;border-radius:50%;background:#EEF0F3;color:var(--tinta-2);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;flex:none}
.ficha-cab h1{margin:6px 0 4px;font-size:24px;font-weight:700;color:var(--titulo)}
/* no Clinicorp o número do prontuário "(2586)" vai junto do nome, preto e em negrito (o JS põe estilo 400 na linha) */
.ficha-cab h1 .mudo{color:inherit;font-weight:inherit!important}
.ficha-cab .tel{display:flex;align-items:center;gap:6px;color:var(--tinta-2);font-size:14px}
.ficha-cab .tel .wa{color:#25A244}
.ficha-cab .acoes-dir{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ficha-cab .abas{max-width:1360px;margin:16px auto 0;border-bottom:0}
.ficha-cab .abas button{font-size:15px}
.ficha-corpo{padding:20px 28px 80px;max-width:1360px;margin:0 auto}
.visao{display:grid;grid-template-columns:320px 1fr 1fr;gap:16px}
@media(max-width:1000px){.visao{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:0;font-size:14px}
.kv>div{padding:9px 0;border-bottom:1px solid var(--linha)}
.kv>div:nth-child(odd){font-weight:700;padding-right:10px}
.kv>div:nth-child(even){text-align:right;color:var(--tinta-2);word-break:break-word}
.bloco-vazio{background:#F7F8FA;border-radius:8px;padding:14px;display:flex;gap:12px;align-items:center;min-height:110px}
.bloco-vazio .ilu{width:46px;height:46px;border-radius:12px;background:var(--azul-suave);color:var(--azul);display:flex;align-items:center;justify-content:center;flex:none}
.bloco-vazio b{display:block;font-size:16px;color:var(--titulo)}
.bloco-vazio p{margin:2px 0 0;font-size:14px;color:var(--tinta-2)}
.data-box{width:62px;border-radius:8px;background:#fff;border:1px solid var(--linha);text-align:center;padding:6px 0;flex:none}
.data-box .d{font-size:28px;font-weight:700;color:var(--azul);line-height:1}
.data-box .m{font-size:11px;text-transform:uppercase;color:var(--azul);font-weight:700}

/* ---------- Barra escura do orçamento ---------- */
.barra-escura{background:var(--barra-escura);color:#fff;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px 6px 0 0;font-weight:700}
.barra-escura .icone-btn{color:#fff;width:28px;height:28px}
.item-orc{display:flex;align-items:stretch;border-bottom:1px solid var(--linha);background:#F5F6F8}
.item-orc .esq{flex:1;display:flex;gap:12px;align-items:flex-start;padding:10px 12px;font-size:12.5px}
.item-orc .esq b{display:block;font-size:13px}
.item-orc .val{width:160px;background:var(--verde);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}

/* ---------- Painel lateral de seções (relatórios, configurações) ---------- */
.com-lateral{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start}
@media(max-width:900px){.com-lateral{grid-template-columns:1fr}}
.lateral{background:#fff;border-radius:10px;box-shadow:var(--sombra);padding:8px}
.lateral .tit{font-weight:700;padding:8px 10px 10px;display:flex;align-items:center;gap:8px;color:var(--titulo)}
.lateral .grp{font-size:12px;font-weight:700;color:var(--tinta-2);padding:10px 10px 4px}
.lateral a{display:block;padding:7px 10px;border-radius:6px;color:var(--tinta);font-size:14px;text-decoration:none}
.lateral a:hover{background:var(--azul-suave-2)}
.lateral a.ativo{background:var(--azul);color:#fff}

/* ---------- Grade de cartões de configuração ---------- */
.grade-cfg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.cfg-cartao{background:#fff;border-radius:10px;box-shadow:var(--sombra);padding:16px;cursor:pointer;display:flex;gap:12px;align-items:flex-start;border:1px solid transparent}
.cfg-cartao:hover{border-color:var(--azul-claro)}
.cfg-cartao .ico{width:36px;height:36px;border-radius:8px;background:var(--azul-suave);color:var(--azul);display:flex;align-items:center;justify-content:center;flex:none}
.cfg-cartao b{display:block;margin-bottom:2px}
.cfg-cartao p{margin:0;font-size:12px;color:var(--tinta-2)}

/* impressão do orçamento e recibo */
.doc-impresso{border:1px solid var(--linha);border-radius:8px;padding:22px;background:#fff;font-size:12.5px}
.doc-impresso h2{text-align:center;margin:10px 0 16px;font-size:18px}
.doc-impresso table{width:100%;border-collapse:collapse}
.doc-impresso th,.doc-impresso td{border-bottom:1px solid var(--linha);padding:6px;text-align:left}

/* ---------- Celular (até 760px) ---------- */
@media(max-width:760px){
  body{font-size:15px}
  .topo{padding:0 8px;gap:6px}
  .topo .logo-txt{display:none}
  .topo .voltar{font-size:0;padding:6px}
  .topo .voltar svg.ic{width:22px;height:22px}
  .busca-topo{position:static;transform:none;flex:1;width:auto;max-width:none}
  .busca-topo .resultados{position:fixed;left:8px;right:8px;top:52px}
  .topo-dir .icone-btn[title="Ajuda"],.topo-dir .icone-btn[title="Recados"]{display:none}
  .usuario-topo{margin-left:0;padding:2px}
  .usuario-topo svg.ic{display:none}
  .pagina{padding:16px 12px 96px}
  .titulo-pag{flex-wrap:wrap}
  .titulo-pag .acoes{margin-left:0;width:100%}
  .titulo-pag .acoes .btn{flex:1;justify-content:center}
  .saudacao{font-size:22px;margin:8px 0 18px}
  .atalhos{grid-template-columns:1fr 1fr;gap:10px}
  .atalho{padding:14px}
  .atalho h3{font-size:16px}
  .atalho .ico{margin-bottom:10px}
  .btn{height:40px}
  .btn.peq{height:32px}
  /* janelas: do tamanho do conteúdo, subindo de baixo; só as grandes ocupam a tela toda (Dr., 06/11: "Olha o tamanho dessa
     tela. Por que que você não pode otimizar aquilo?") */
  .modal-fundo{padding:0;align-items:flex-end}
  .modal,.modal.grande,.modal.medio,.modal.cheio{width:100%;max-height:none;min-height:0;border-radius:14px 14px 0 0;margin-top:auto}
  .modal .m-corpo{flex:1}
  .modal .m-rodape{position:sticky;bottom:0;background:#fff;flex-wrap:wrap}
  .modal .m-rodape .btn{flex:1;justify-content:center}
  .g2,.g3,.g4{grid-template-columns:1fr!important}
  [style*="grid-column:span 2"]{grid-column:auto!important}
  /* 28/10: no celular a barra QUEBRA a linha em vez de rolar de lado (rolando, o último botão ficava escondido e o Dr. não achava) */
  .segmentado{flex-wrap:wrap;max-width:100%}
  .segmentado button{white-space:nowrap}
  /* tabelas viram cartões (classe .resp + data-label nas células) */
  table.tab.resp thead{display:none}
  table.tab.resp,table.tab.resp tbody,table.tab.resp tr,table.tab.resp td{display:block;width:100%}
  table.tab.resp tr{border-bottom:1px solid var(--linha);padding:10px 12px;display:flex!important;flex-direction:column}
  table.tab.resp td.cel-titulo{order:-1}
  table.tab.resp td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  table.tab.resp td[data-label]:before{content:attr(data-label);color:var(--cinza);font-size:12px;text-align:left;flex:none}
  table.tab.resp td.cel-titulo{justify-content:flex-start;text-align:left;font-size:15px;padding-bottom:6px}
  table.tab.resp td.cel-titulo:before{display:none}
  /* ficha */
  .ficha-cab{padding:14px 12px 0}
  .ficha-cab .linha1{flex-wrap:wrap;gap:12px}
  .avatar-g{width:56px;height:56px;font-size:20px}
  .ficha-cab h1{font-size:20px;margin-top:2px}
  .ficha-cab .acoes-dir{margin-left:0;width:100%;flex-direction:row-reverse;align-items:center;justify-content:space-between}
  .ficha-cab .acoes-dir .linha-flex{flex:1}
  .ficha-cab .acoes-dir .linha-flex .btn{flex:1;justify-content:center;padding:0 8px}
  .ficha-cab .abas{margin-top:10px}
  .abas button{padding:12px 10px}
  .ficha-corpo{padding:14px 12px 96px}
  .kv>div{padding:8px 0}
  .faixa-proto{bottom:6px;font-size:11px;padding:4px 10px;max-width:calc(100% - 16px)}
  .faixa-proto span{display:none}
  .toasts{bottom:52px;left:8px;right:8px;transform:none}
  .com-lateral{grid-template-columns:1fr}
  .login{padding:24px 18px;align-items:flex-start}
  .login-form{width:100%}
}
@media(max-width:760px){.abas{scrollbar-width:none}.abas::-webkit-scrollbar{display:none}}
/* aplicativo instalado no iPhone: respeitar a área do relógio e da barra inferior */
@supports(padding:max(0px)){
  .topo{padding-top:env(safe-area-inset-top);height:calc(56px + env(safe-area-inset-top))}
  .faixa-proto{bottom:max(6px,env(safe-area-inset-bottom))}
}

/* dica ao passar o mouse */
.dica-flut{position:fixed;z-index:1000;background:#1C2430;color:#fff;font-size:12.5px;line-height:1.3;padding:5px 9px;border-radius:6px;max-width:260px;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.18)}
@media (hover:none){.dica-flut{display:none}}
/* Dr., 26/10: o nome nas listas (documento, paciente, lançamento) em cor escura e sem negrito; o azul claro não agradou */
table.tab td.cel-titulo a{color:var(--tinta);font-weight:400}
table.tab td.cel-titulo a:hover{color:var(--navy);text-decoration:underline}
/* Dr., 26/10: "sempre pensar que tem que encaixar tanto na versão celular quanto na do computador": no computador o
 * botão tem ícone e texto; no celular fica só o ícone (o texto vira dica e nome para leitor de tela). */
@media(max-width:760px){
  .btn.so-ico-cel{width:40px;height:40px;padding:0;justify-content:center;gap:0}
  .btn.so-ico-cel .rot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .btn.so-ico-cel svg.ic{width:19px;height:19px;margin:0}
  .titulo-pag .acoes .btn.so-ico-cel{flex:none}  /* só ícone não estica: um botão largo e vazio parecia quebrado */
}
/* voltar para onde estava: texto longo corta com reticências; no celular fica só a seta */
.topo .voltar .voltar-txt{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo .voltar-ficha{margin-left:10px;border:1px solid rgba(255,255,255,.25)}
@media(max-width:760px){.topo .voltar-ficha{margin-left:2px;border:0}.topo{gap:8px;padding:0 10px}.busca-topo,.busca-topo .bt-campo{min-width:0}.busca-topo input{min-width:0;width:100%}.topo>*{flex-shrink:0}.topo>.busca-topo{flex-shrink:1}}
/* o "Voltar para a ficha de ..." ao lado do logo não pode encostar na busca do meio: em tela menor fica só a seta (com a dica) */
@media(max-width:1400px){.topo .voltar-ficha .voltar-txt{display:none}.topo .voltar-ficha{padding:6px}}
/* "É você?" no login (Dr., 26/10: cada pessoa na própria conta) */
.quem-entra{display:flex;align-items:center;gap:14px;margin:4px 0 12px}
.quem-av{width:56px;height:56px;border-radius:50%;background:var(--azul-suave);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex:none}
.quem-entra b{display:block;font-size:18px;color:var(--titulo,var(--tinta))}.quem-entra small{color:var(--tinta-2);font-size:13px}
.quem-txt{margin:0;color:var(--tinta);line-height:1.5}
/* contagem dela na barra de cima (consultas do mês e Staffins) */
.topo-cont{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;margin-right:6px;border-radius:17px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font:inherit;font-size:13px}
.topo-cont:hover{background:rgba(255,255,255,.16)}
.topo-cont svg.ic{width:16px;height:16px}.topo-cont b{font-size:14px}.topo-cont .rot{opacity:.85}
.topo-cont .sep{width:1px;height:16px;background:rgba(255,255,255,.3);margin:0 4px}
@media(max-width:1100px){.topo-cont .rot{display:none}}
@media(max-width:760px){.topo-cont{padding:0 8px;margin-right:2px;gap:4px}.topo-cont .sep{margin:0 2px}}
.minha-espera{margin:6px 0 0;padding-left:18px;line-height:1.9;font-size:14px}
/* tela inicial com a imagem de fundo da clínica (Personalização, 28/10) */
.pagina.com-fundo{position:relative;background:center/cover no-repeat;min-height:calc(100vh - 56px)}
.pagina.com-fundo::before{content:"";position:absolute;inset:0;background:rgba(244,245,247,.82);pointer-events:none}
.pagina.com-fundo>*{position:relative}

/* 02/11 (Dr.: "diminui, os botões ficaram ocupando o espaço do nome"): no alto da ficha, App, Indicação e Agendar viram só
 * ícone até 1200 px (o nome no botão vira dica); o nome do paciente não quebra por causa deles */
.ficha-cab .linha1 > div:nth-child(2){min-width:0;flex:1}
.ficha-cab .acoes-dir .linha-flex{flex-wrap:nowrap}
@media(max-width:1200px){
  .ficha-cab .btn.pa-ico{width:40px;height:40px;padding:0;justify-content:center;gap:0;flex:none}
  .ficha-cab .btn.pa-ico .rot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ficha-cab .btn.pa-ico svg.ic{width:19px;height:19px;margin:0}
}
.ficha-cab .btn.pa-mais{width:40px;height:40px;padding:0;justify-content:center;gap:0;flex:none}
.ficha-cab .btn.pa-mais svg.ic{width:20px;height:20px;margin:0}
.ficha-cab .pa-abas-sel{display:none}
@media(max-width:760px){
  .ficha-cab .pa-abas-sel{display:block;margin:14px 0 12px}
  .ficha-cab .pa-abas-sel select{width:100%;font-size:16px;font-weight:600;padding:10px 12px;border:1px solid var(--linha);border-radius:10px;background:#fff;color:var(--navy)}
  .ficha-cab #pa-abas{display:none}
}
/* 02/11 (Dr.: "esse Ativo pode ser menor nessa versão, estar em outro lugar"): no celular, menor e na linha do telefone */
@media(max-width:760px){
  .ficha-cab .linha1 > div:nth-child(2){display:flex;flex-wrap:wrap;align-items:center;column-gap:8px}
  .ficha-cab .linha1 > div:nth-child(2) h1{flex-basis:100%}
  .ficha-cab .pa-sit{margin-top:0;display:inline-flex;gap:6px;align-items:center}
  .ficha-cab .pa-sit .chip{font-size:11px;padding:1px 7px;line-height:1.5}
}
.pa-abas-btn{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:600;padding:12px 14px;border:1px solid var(--linha);border-radius:10px;background:#fff;color:var(--navy);cursor:pointer}
.pa-folha{position:fixed;inset:0;z-index:300;background:rgba(10,20,40,.45);display:flex;align-items:flex-end}
.pa-folha-in{width:100%;max-height:85vh;overflow:auto;background:#fff;border-radius:16px 16px 0 0;padding:8px 12px calc(12px + env(safe-area-inset-bottom))}
.pa-folha-tit{font-size:13px;color:var(--cinza);padding:10px 8px 6px}
.pa-folha-in button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0 12px;border:0;border-bottom:1px solid var(--linha);background:#fff;font-size:16px;color:var(--tinta);text-align:left;cursor:pointer}
.pa-folha-in button.ativo{color:var(--azul,#2F6FDE);font-weight:700}
.pa-folha-in button small{font-size:12px;color:var(--cinza)}
.pa-folha-in .pa-folha-fechar{justify-content:center;border:0;margin-top:6px;color:var(--cinza)}
/* 02/11 (Dr.: "botões muito grandes, desproporcionais com o layout"): no celular os quatro ficam no tamanho de ícone, juntos,
 * sem esticar para encher a linha */
@media(max-width:760px){
  .ficha-cab .acoes-dir .linha-flex{flex:0 0 auto;gap:8px}
  .ficha-cab .acoes-dir .linha-flex .btn{flex:none;width:40px;height:40px;padding:0}
}
/* 02/11 (Dr.: "o alinhamento deles pode melhorar"): no celular os botões começam na mesma linha do nome (depois da foto) */
@media(max-width:760px){
  .ficha-cab .acoes-dir{padding-left:68px;margin-top:-4px}
}
/* 02/11 (Dr.: "ficam alinhados depois da foto, e não embaixo"): no celular a foto fica à esquerda, no meio da altura, e à
 * direita dela vêm o nome, o telefone e os botões, um embaixo do outro */
@media(max-width:760px){
  .ficha-cab .linha1{display:grid;grid-template-columns:56px 1fr;column-gap:12px;row-gap:8px;align-items:center}
  .ficha-cab .linha1 > :first-child{grid-row:1 / span 2;align-self:center}
  .ficha-cab .linha1 > div:nth-child(2){grid-column:2}
  .ficha-cab .acoes-dir{grid-column:2;padding-left:0;margin-top:0}
}
/* 02/11 (Dr.: "diminui mais os botões"): 34 px */
.ficha-cab .btn.pa-mais,.ficha-cab .acoes-dir .linha-flex .btn.pa-ico{width:34px;height:34px}
@media(max-width:1200px){.ficha-cab .btn.pa-ico{width:34px;height:34px}.ficha-cab .btn.pa-ico svg.ic,.ficha-cab .btn.pa-mais svg.ic{width:17px;height:17px}}
@media(max-width:760px){.ficha-cab .acoes-dir .linha-flex .btn{width:34px;height:34px}.ficha-cab .acoes-dir .linha-flex{gap:6px}}
/* os botões da ficha são sempre só ícone (o nome vira dica), em qualquer largura */
.ficha-cab .btn.pa-ico{padding:0;justify-content:center;gap:0;flex:none}
.ficha-cab .btn.pa-ico .rot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ficha-cab .btn.pa-ico svg.ic{margin:0}
/* 02/11 (Dr.: "simula um nome grande"): no celular o nome usa letra um pouco menor e o número do prontuário fica menor e
 * mais claro, para nome comprido não ocupar a tela */
@media(max-width:760px){
  .ficha-cab h1{font-size:19px;line-height:1.25;margin:2px 0 4px;overflow-wrap:anywhere}
  .ficha-cab h1 .mudo{font-size:.78em;color:var(--cinza)!important}
}
.ficha-cab h1 .mudo{white-space:nowrap}
/* 02/11 (Dr.: "a foto fica alinhada ao lado do nome"): no celular a foto acompanha o nome, no alto, e não o meio do bloco */
@media(max-width:760px){
  .ficha-cab .linha1{align-items:start}
  .ficha-cab .linha1 > :first-child{align-self:start;margin-top:2px}
}
/* 02/11 (Dr.: "número do prontuário pode ser ao lado do +"): no celular o número sai do nome e vai para a linha dos botões */
.ficha-cab .pa-num-lado{display:none}
@media(max-width:760px){
  .ficha-cab h1 .mudo{display:none}
  .ficha-cab .pa-num-lado{display:inline-flex;align-items:center;height:34px;margin-left:12px;padding-left:12px;border-left:1px solid var(--linha,#e3e7ee);font-size:13px;line-height:1;color:var(--cinza);white-space:nowrap}
}
/* 02/11 acesso de suporte (js/suporte.js): faixa da clínica e faixa da aba do suporte */
.faixa-suporte{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#E8F3EA;color:#1D5B2A;border-bottom:1px solid #B9DCC0;font-size:13.5px}
.faixa-suporte .ic{width:18px;height:18px;flex:none}
.faixa-suporte span{flex:1;min-width:0}
.faixa-suporte a,.faixa-suporte button{flex:none;color:inherit;font-weight:700;font-size:13px;background:transparent;border:1px solid currentColor;border-radius:999px;padding:3px 12px;cursor:pointer;text-decoration:none;font-family:inherit}
.faixa-suporte.eu{background:#B8860B;color:#fff;border-bottom-color:#8a6508}
@media(max-width:760px){.faixa-suporte{font-size:12.5px;padding:7px 10px;flex-wrap:wrap}}
.lista-num{padding-left:20px;margin:0}.lista-num li{line-height:1.5}

/* Pagar por Pix (02/11) */
.px-dados{display:grid;gap:6px}
.px-lin{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--linha,#e3e7ee);padding:6px 0}
.px-lin b{text-align:right;word-break:break-all}
.px-qr{display:flex;justify-content:center}
.px-qr svg{width:220px;height:220px;max-width:100%;background:#fff;border:1px solid var(--linha,#e3e7ee);border-radius:6px}
#px-cod{font-family:ui-monospace,Menlo,monospace;font-size:12px;word-break:break-all;resize:none}

/* Pagamentos pelo link (02/11, js/cobranca.js) */
.cb-filtros{flex-wrap:wrap;gap:12px;align-items:flex-end}
.cb-filtros .campo{min-width:160px}
.cb-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.cb-res{display:flex;flex-direction:column;gap:4px;padding:14px 16px}
.cb-res b{font-size:22px}
.cb-res.verde b{color:#1E6B34}
.cb-res.amarelo b{color:#7A5B00}
.cb-acoes{flex-wrap:wrap;gap:8px}
.cb-ficha h3{margin-top:0}
.cb-ref{min-width:0;text-align:left}
@media (max-width:760px){.cb-tab td[data-label="Referente a"] .cb-ref{text-align:right}}
.mn-bloco{margin-bottom:14px}
.chip.menor{background:#6B21A8;color:#fff;font-weight:600}
/* 02/11 (varredura no celular de 375 px): a linha dos botões com o número do prontuário passava 32 px da coluna ao lado
 * da foto; em tela até 400 px os botões ficam com 32 px e os espaços menores, no mesmo desenho aprovado */
@media(max-width:400px){
  .ficha-cab .acoes-dir{gap:6px}
  .ficha-cab .acoes-dir .linha-flex{gap:4px}
  .ficha-cab .acoes-dir .linha-flex .btn,.ficha-cab .acoes-dir > .icone-btn{width:32px;height:32px}
  .ficha-cab .pa-num-lado{margin-left:4px;padding-left:8px;height:32px}
}

.cb-chips{display:inline-flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:100%}
/* botão de texto longo do ponto (Configurações › Ponto) quebra a linha no celular */
@media(max-width:760px){[data-pc="local"]{white-space:normal;height:auto;min-height:38px;padding-top:6px;padding-bottom:6px;text-align:left;max-width:100%}}
/* trilha da indicação (03/11) */
.ind-trilha{display:flex;flex-wrap:wrap;gap:4px}
.ind-et{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;border:1px dashed var(--linha,#d6dbe3);color:var(--cinza,#8a94a6);font-size:12px;white-space:nowrap}
.ind-et.ok{border-style:solid;border-color:#9FD3B2;background:#EAF5EE;color:#1E6B34}
.ind-et.ruim{border-style:solid;border-color:#F0C2C2;background:#FDECEC;color:#9B1C1C}
.ind-et small{font-size:11px;opacity:.8}
/* 03/11: arte do antes e depois no cadastro do profissional */
.pf-arte{border:1px solid var(--linha);border-radius:12px;padding:12px 14px}
.pf-arte-grade{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.pf-arte-it{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pf-arte-logo{width:220px;height:80px;border:1px dashed var(--linha);border-radius:10px;display:flex;align-items:center;justify-content:center;background:#fff;padding:6px}
.pf-arte-logo img{max-width:100%;max-height:100%;object-fit:contain}
.pf-arte-fundo{width:72px;height:128px;border:1px dashed var(--linha);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#F3F4F6;font-size:11px;text-align:center}
.pf-arte-fundo img{width:100%;height:100%;object-fit:cover}
.pf-arte-cor{display:flex;align-items:center;gap:8px;font-size:13px}.pf-arte-cor input{width:36px;height:28px;padding:0;border:1px solid var(--linha);border-radius:6px;background:#fff}
/* 03/11: quadro "Pagamentos pelo link" aceso com a bolinha (js/inicio.js) */
.atalho .ico{position:relative}
.atalho.aceso{border-color:#E7C46A;background:linear-gradient(180deg,#FFFBEF,#fff)}
.atalho.aceso .ico{background:#FCEFC9;color:#8A6416}
.atalho-bolinha{position:absolute;top:-7px;right:-9px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#D93025;color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff}
/* 03/11: "Mostrar inativos" ao lado do título Pacientes; a busca ocupa a largura toda */
.pa-tit-bloco{flex:1;min-width:0}
.pa-tit{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pa-tit h1{margin:0}
.pa-inat{font-size:13.5px;white-space:nowrap}
.pa-filtros .pa-busca{flex:1;width:100%;max-width:none}
/* 03/11: menu lateral com o logo da clínica e o botão de recolher */
.gaveta .cab-clinica{position:relative}
.gaveta .gaveta-recolher{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:99px;border:1px solid var(--linha);color:var(--tinta-2)}
.gaveta .logo-clinica img{max-width:180px;max-height:64px;object-fit:contain;display:block;margin:0 auto}
/* 03/11: varredura em 360 px. A ficha passava 5 px (a coluna do nome não encolhia) e um botão do Fechamento também */
@media(max-width:400px){
  .ficha-cab .linha1{grid-template-columns:56px minmax(0,1fr)}
  .ficha-cab .linha1 > div:nth-child(2) h1{overflow-wrap:anywhere}
  .linha-flex{flex-wrap:wrap}
}
/* 03/11: varredura do texto espremido no celular. Nas tabelas que viram cartões, o que não cabe ao lado do rótulo desce
   para a linha de baixo, em vez de encolher até virar uma coluna de letras (Indicação, ficha › Financeiro e Indicações,
   relatório Faturamento) */
@media(max-width:760px){
  table.tab.resp td{flex-wrap:wrap}
  table.tab.resp td > div{max-width:100%}
}

/* 03/11 (Dr.: "na hora que carregar fotos, vai ter alguma animação?"): carregamento leve, sem motion graphics. Enquanto a foto
 * não chega, o lugar dela fica cinza pulsando; quando chega, aparece esmaecendo. Quem pede menos movimento não vê animação. */
@keyframes img-carrega{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes img-aparece{from{opacity:.2}to{opacity:1}}
.pr-cartao-f .mini img:not(.pronta),.cs-mini:not(.pronta),.cs-esq{background:linear-gradient(90deg,#E9ECF0 25%,#F5F6F8 50%,#E9ECF0 75%);background-size:200% 100%;animation:img-carrega 1.2s ease-in-out infinite}
.pr-cartao-f .mini img.pronta,.cs-mini.pronta{animation:img-aparece .3s ease-out}
.cs-esq{display:block;width:84px;height:84px;border-radius:8px}
.cs-barra{height:4px;border-radius:99px;background:#E9ECF0;overflow:hidden;margin-top:8px;max-width:280px}
.cs-barra i{display:block;height:100%;background:var(--azul);transition:width .2s}
@media (prefers-reduced-motion:reduce){.pr-cartao-f .mini img,.cs-mini,.cs-esq{animation:none!important}.cs-barra i{transition:none}}

/* "?" com a explicação (C.ajudaQ): abre ao tocar, fecha ao tocar fora */
.q-aj{position:relative;display:inline-flex;vertical-align:middle;margin-left:8px}
.q-aj-b{width:22px;height:22px;border-radius:50%;border:1px solid var(--linha-2);background:#fff;color:var(--cinza);font:600 12.5px/1 'Source Sans 3',system-ui,sans-serif;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.q-aj-b[aria-expanded="true"]{border-color:var(--azul);color:var(--azul)}
.q-aj-tx{position:absolute;top:28px;left:0;z-index:60;width:min(340px,82vw);background:#fff;border:1px solid var(--linha-2);border-radius:10px;box-shadow:0 10px 28px rgba(15,23,42,.14);padding:10px 12px;font:400 13.5px/1.5 'Source Sans 3',system-ui,sans-serif;color:var(--tinta);white-space:normal;text-transform:none;letter-spacing:0;text-align:left}
/* 04/11 (Dr., no cabeçalho da ficha: "está bagunçado"): telefone e etiquetas alinhados e separados, também no computador */
.ficha-cab .tel{margin:2px 0 0;line-height:20px}
.ficha-cab .tel svg.ic{width:15px;height:15px;flex:none}
.ficha-cab .tel .wa{display:inline-flex;align-items:center;margin-left:2px}
.ficha-cab .pa-sit{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.ficha-cab .pa-sit .chip{height:24px;padding:0 9px;line-height:24px;font-size:12px;border-radius:12px;white-space:nowrap}
.ficha-cab .pa-sit .chip svg.ic{width:13px;height:13px}
@media (max-width:760px){.ficha-cab .pa-sit{display:inline-flex;margin-top:0}.ficha-cab .pa-sit .chip{height:22px;line-height:22px;font-size:11px;padding:0 8px}}
/* 04/11: gravação da consulta, no atendimento */
.gv-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.gv-rec{width:10px;height:10px;border-radius:50%;background:#d64545;animation:gv-pisca 1s steps(2) infinite}
@keyframes gv-pisca{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.gv-rec{animation:none}}
.gv-lista{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
.gv-it{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--tinta-2,#555)}
.gv-it audio{width:100%;max-width:360px;height:36px}
/* 04/11: sequência do tratamento na ficha */
.tr-trilho{background:#fff;border:1px solid var(--linha,#e3e7ee);border-radius:12px;padding:12px 16px;margin:12px 0 4px}
.tr-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tr-cab b{font-size:14.5px}
.tr-prox{font-size:14px;color:var(--tinta-2,#555);flex:1;min-width:180px}
.tr-passos{list-style:none;margin:12px 0 0;padding:0;display:flex;gap:0}
.tr-passos li{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;font-size:12px;color:var(--cinza,#888);text-align:center}
.tr-passos li:not(:first-child)::before{content:'';position:absolute;top:11px;right:50%;width:100%;height:2px;background:var(--linha,#e3e7ee);z-index:0}
.tr-passos li.ok:not(:first-child)::before,.tr-passos li.agora:not(:first-child)::before{background:#9cc3ee}
.tr-bola{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--linha,#d3d8df);font-size:12px;font-weight:600;position:relative;z-index:1}
.tr-bola svg.ic{width:13px;height:13px}
.tr-passos li.ok .tr-bola{background:#1d6fd1;border-color:#1d6fd1;color:#fff}
.tr-passos li.ok{color:var(--tinta-2,#555)}
.tr-passos li.agora .tr-bola{border-color:#1d6fd1;color:#1d6fd1}
.tr-passos li.agora{color:#1d6fd1;font-weight:600}
@media (max-width:760px){
  .tr-trilho{padding:10px 12px}
  .tr-cab .btn{width:100%;justify-content:center}
  .tr-t{font-size:10.5px;line-height:1.2}
  .tr-bola{width:22px;height:22px}
  .tr-passos li:not(:first-child)::before{top:10px}
}
@media (max-width:760px){
  .tr-passos li .tr-t{display:none}
  .tr-passos li.agora .tr-t{display:block;position:absolute;top:28px;white-space:nowrap;font-size:11px}
  .tr-passos li:first-child.agora .tr-t{left:0}
  .tr-passos li:last-child.agora .tr-t{right:0}
  .tr-passos{padding-bottom:16px}
}
.tr-c{display:none}
@media (max-width:760px){
  .tr-passos{padding-bottom:0}
  .tr-passos li .tr-t,.tr-passos li.agora .tr-t{display:none}
  .tr-c{display:block;font-size:10.5px;line-height:1.2;white-space:nowrap}
}

/* 04/11 (Dr.: "Sim, põe"): três bolinhas enquanto carrega, na cor do Cliup; só depois de meio segundo de espera */
.pontos{display:inline-flex;gap:7px;align-items:center}
.pontos i{width:10px;height:10px;border-radius:50%;background:var(--azul);animation:pontos-pulo 1.1s ease-in-out infinite}
.pontos i:nth-child(2){animation-delay:.15s}.pontos i:nth-child(3){animation-delay:.3s}
@keyframes pontos-pulo{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-6px);opacity:1}}
.carregando-alvo{position:relative}
.carregando-alvo>:not(.carregando-capa){opacity:.35!important}
.carregando-capa{position:absolute;inset:0;z-index:30;pointer-events:none;display:flex;justify-content:center;align-items:flex-start}
.carregando-capa .pontos{position:sticky;top:42vh;margin-top:min(42vh,140px)}
@media (prefers-reduced-motion:reduce){.pontos i{animation:none;opacity:.8}}

/* 04/11 (Dr.: "Sim, faz"): abertura do Cliup. O quadrado entra, o C se desenha, a seta sobe rolando como um placar ("deu um up") e o nome aparece */
#abertura{position:fixed;inset:0;z-index:1000;background:#fff;display:flex;align-items:center;justify-content:center;transition:opacity .35s ease}
#abertura.sai{opacity:0;pointer-events:none}
#abertura .ab-marca{display:flex;align-items:center;gap:8px}   /* Dr., 04/11: "Sim, aplica" (era 14 px) */
#abertura .ab-ic{width:60px;height:60px;overflow:visible}   /* Dr., 04/11: "B, 60 px" */
#abertura .ab-nome{font-family:"Baloo 2",var(--fonte);font-weight:600;font-size:44px;line-height:1;color:var(--navy);padding-top:6px;opacity:0}
#abertura .ab-q{transform-origin:50px 50px;transform:scale(.6);opacity:0}
#abertura .ab-c{stroke-dasharray:100;stroke-dashoffset:100}
#abertura .ab-s{transform:translateY(40px)}
#abertura.anda .ab-q{animation:ab-q .45s cubic-bezier(.22,1.4,.36,1) forwards}
#abertura.anda .ab-c{animation:ab-c .6s .3s ease-out forwards}
#abertura.anda .ab-s{animation:ab-s .95s .75s linear forwards}
#abertura.anda .ab-nome{animation:ab-nome .45s 1.65s ease-out forwards}   /* Dr., 04/11: o nome só depois que a seta sobe */
@keyframes ab-q{to{transform:scale(1);opacity:1}}
@keyframes ab-c{to{stroke-dashoffset:0}}
/* placar: uma seta passa subindo e sai por cima, a próxima entra por baixo e para no lugar, com um leve passo a mais */
@keyframes ab-s{0%{transform:translateY(40px);animation-timing-function:ease-in}38%{transform:translateY(-40px)}38.1%{transform:translateY(40px);animation-timing-function:cubic-bezier(.2,.9,.3,1)}85%{transform:translateY(-4px);animation-timing-function:ease-in-out}100%{transform:translateY(0)}}
@keyframes ab-nome{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@media (max-width:600px){#abertura .ab-ic{width:49px;height:49px}#abertura .ab-nome{font-size:36px}}
@media (prefers-reduced-motion:reduce){#abertura .ab-q,#abertura .ab-nome{opacity:1;transform:none;animation:none!important}#abertura .ab-c{stroke-dashoffset:0;animation:none!important}#abertura .ab-s{transform:none;animation:none!important}}

/* 04/11 (Dr., item 80): cabeçalho dos documentos por doutor e acabamento de documento (recibo, planejamento e termo).
 * Títulos e valores em Source Serif 4, como no recibo feito à mão em 04/11; texto em Source Sans 3. */
.doc-marca{display:flex;align-items:center;gap:18px;padding-bottom:14px;margin-bottom:16px;border-bottom:1.5px solid var(--doc-acento,#0F2D52);flex-wrap:wrap}
.doc-marca-img{height:46px;width:auto;max-width:44%;object-fit:contain}
.doc-marca.dois{justify-content:space-between}
.doc-marca-img.dr{height:60px}   /* o logo do doutor costuma ser letra cursiva, mais fina: um pouco mais alto para ter o mesmo peso; igual sozinho ou ao lado da clínica (Dr., 05/11) */
.doc-marca-txt{font-family:"Source Serif 4",Georgia,serif;font-size:21px;color:#0A1F38}
.doc-v2{font-family:"Source Sans 3",var(--fonte)}
.doc-v2 .doc-titulo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:8px 0 14px;flex-wrap:wrap}
.doc-v2 .doc-titulo h1{font-family:"Source Serif 4",Georgia,serif;font-weight:400;font-size:31px;line-height:1.1;margin:0;letter-spacing:.3px;color:#0A1F38}
.doc-v2 .doc-sub{color:#6b7785;font-size:12.5px;margin-top:3px}
.doc-v2 .doc-valor{font-family:"Source Serif 4",Georgia,serif;font-size:21px;font-weight:600;color:#0A1F38;border:1px solid #C9D2DC;border-radius:6px;padding:6px 16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.doc-v2 .doc-texto{font-size:14px;line-height:1.9;text-align:justify;margin:14px 0;color:#0A1F38}
.doc-v2 .doc-dados{display:grid;grid-template-columns:150px 1fr;row-gap:6px;column-gap:12px;margin:12px 0 14px;font-size:13px;color:#0A1F38}
.doc-v2 .doc-dados dt{color:#6b7785;text-transform:uppercase;letter-spacing:.8px;font-size:10.5px;padding-top:2px}
.doc-v2 .doc-dados dd{margin:0}
.doc-v2 .doc-local{margin-top:24px;color:#0A1F38}
.doc-v2 .doc-assin{margin-top:36px;width:min(340px,100%);line-height:1.45;font-size:12.5px;color:#3d4b5c}   /* Dr., 05/11: "deixa sem a linha" (o recibo ainda não leva assinatura; item 87) */
.doc-v2 .doc-assin-nome{font-family:"Source Serif 4",Georgia,serif;font-size:16px;font-weight:600;color:#0A1F38}
.doc-v2 .doc-rodape{margin-top:30px;padding-top:8px;border-top:1px solid #E4E7EC;font-size:11px;color:#6b7785;text-align:center;line-height:1.5}
@media (max-width:600px){.doc-v2 .doc-dados{grid-template-columns:1fr;row-gap:2px}.doc-v2 .doc-dados dd{margin-bottom:6px}.doc-marca-img{height:36px}.doc-v2 .doc-titulo h1{font-size:26px}}
.doc-v2 .doc-cab-txt{margin:-6px 0 10px;font-size:11.5px;color:#6b7785;line-height:1.45}
/* 05/11 (Dr.): resumo de valores do planejamento, só embaixo: tabela, reduções, descontos e o valor */
/* 05/11 (Dr.): as observações ao lado do quadro de valores, no espaço que ficava em branco */
.doc-v2 .doc-pe{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 24px;margin:14px 0 6px}
.doc-v2 .doc-obs{flex:1 1 220px;min-width:0;font-size:13px;color:#0A1F38;word-break:break-word}
.doc-v2 .doc-obs>div{color:#4A5868;margin-top:4px;line-height:1.5}
.doc-v2 .doc-pe .doc-resumo{margin:0 0 0 auto}
.doc-v2 .doc-resumo{margin:14px 0 6px auto;width:min(380px,100%);border:1px solid #E1E6EC;border-radius:8px;padding:10px 14px;font-size:13px;color:#0A1F38;font-variant-numeric:tabular-nums}
.doc-v2 .doc-res-l{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
.doc-v2 .doc-res-l.menos span:last-child{color:#2E7D46}
.doc-v2 .doc-res-l.total{border-top:1px solid #C9D2DC;margin-top:6px;padding-top:8px;font-family:"Source Serif 4",Georgia,serif;font-size:17px;font-weight:600}
.doc-v2 .doc-res-econ{margin-top:6px;font-size:12px;color:#2E7D46}
.doc-v2 .doc-tab td{vertical-align:top;padding-top:9px;padding-bottom:9px}
.doc-v2 .doc-it-nome{font-weight:600;color:#0A1F38}
.doc-v2 .doc-it-desc{font-size:12px;color:#5A6878;margin-top:2px;line-height:1.45;max-width:58ch}
.pf-ass{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.pf-ass img{max-height:70px;max-width:260px;background:#fff;border:1px dashed #D3D8DF;border-radius:6px;padding:4px}

/* 05/11 (Dr.): assinaturas do planejamento, a do paciente e a do doutor, em cima das linhas */
.doc-v2 .doc-ass{display:flex;flex-wrap:wrap;gap:24px 40px;margin:30px 0 10px;break-inside:avoid}
.doc-v2 .doc-ass>div{flex:1 1 200px;text-align:center;font-size:12px;color:#0A1F38;line-height:1.4}
.doc-v2 .doc-ass .linha{border-top:1px solid #0A1F38;margin:0 0 4px}
.doc-v2 .doc-ass img{display:block;max-height:64px;max-width:85%;margin:0 auto -4px;mix-blend-mode:multiply}
.doc-v2 .doc-ass .vazio{height:60px}
.doc-v2 .doc-res-l.total:first-child{border-top:0;margin-top:0;padding-top:0}
.doc-v2 .doc-pront{color:#5A6878;font-weight:400}

/* 05/11 (Dr.): planejamento mais compacto: nº e data na linha do título, dados do paciente em linha, carimbo curto */
.doc-v2 .doc-titulo-lin{align-items:baseline;margin:8px 0 10px}
.doc-v2 .doc-titulo-lin .doc-sub{margin:0;font-size:13px}
.doc-v2 .doc-dados2{display:flex;flex-wrap:wrap;gap:4px 28px;margin:0 0 12px;font-size:13px;color:#0A1F38}
.doc-v2 .doc-dados2 span:first-child{color:#6b7785;text-transform:uppercase;letter-spacing:.8px;font-size:10.5px;margin-right:8px}
.doc-v2 .as-curto{margin:10px 0 0;font-size:10.5px;line-height:1.45;color:#5A6878}
.doc-v2 .as-curto b{color:#0A1F38;font-weight:600}
.doc-v2 .doc-tab td{padding-top:7px;padding-bottom:7px}
/* 05/11 (Dr.: "essa linha poder quebrar em duas linhas... ficou muito comprida a descrição... caber um pouquinho menor e
 * até poder aumentar um pouquinho mais os números"): o procedimento fica com 56% da largura e quebra em duas linhas;
 * quantidade e investimento ganham espaço e letra maior */
.doc-v2 .doc-tab{table-layout:fixed;width:100%;min-width:480px}
.doc-v2 .doc-tab th:first-child,.doc-v2 .doc-tab td:first-child{width:56%}
.doc-v2 .doc-tab td:first-child{line-height:1.35}
.doc-v2 .doc-tab td.direita{font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.doc-v2 .doc-tab td:last-child{font-weight:600;color:#0A1F38}
.doc-v2 .doc-tab th.direita,.doc-v2 .doc-tab td.direita{text-align:right}
/* 05/11 (Dr.: "faz uma caixa redonda em volta para separar, para mostrar que é o paciente"): o mesmo contorno do quadro de valores */
.doc-v2 .doc-dados2{border:1px solid #E1E6EC;border-radius:8px;padding:9px 14px;background:#FAFBFC;gap:4px 28px}
/* 05/11 (Dr.: "não gosto daquela fonte do planejamento. Coloca uma fonte reta"): os documentos usam só a Source Sans 3 */
.doc-v2,.doc-v2 .doc-titulo h1,.doc-v2 .doc-res-l.total,.doc-v2 .doc-valor{font-family:"Source Sans 3",system-ui,sans-serif}
.doc-v2 .doc-titulo h1{font-weight:600;font-size:28px;letter-spacing:0}
.doc-v2 .doc-res-l.total{font-weight:700}
/* 05/11 (Dr.: "aumentar um pouquinho mais a fonte"): o texto do documento passa de 12,5-13px para 14px */
.doc-v2 .doc-tab td:first-child,.doc-v2 .doc-it-nome{font-size:14px}
.doc-v2 .doc-tab th{font-size:13px}
.doc-v2 .doc-dados2,.doc-v2 .doc-obs,.doc-v2 .doc-resumo,.doc-v2 .fi-doc-p{font-size:14px}
.doc-v2 .doc-tab td.direita{font-size:15px}
.doc-v2 .doc-assin-nome,.doc-v2 .doc-marca-txt{font-family:"Source Sans 3",system-ui,sans-serif}
/* 05/11 (Dr.): o nome em inglês embaixo do português, mais claro, em itálico e entre parênteses */
.doc-v2 .doc-it-en{font-size:12px;font-style:italic;color:#8A96A3;font-weight:400;margin-top:1px;line-height:1.3}
/* 05/11 (Dr.): quantidade e unidade em colunas separadas, alinhadas */
.doc-v2 .doc-tab .doc-c-q{width:8%;padding-right:6px}
.doc-v2 .doc-tab .doc-c-u{width:16%;padding-left:6px;color:#4A5868}
.doc-v2 .doc-tab td.doc-c-u{font-size:14px}
/* 05/11 (Dr., escolhendo entre quatro letras: "B, Nunito Sans"): os documentos (planejamento e recibo) usam a Nunito Sans,
 * mais macia e aconchegante; os apps continuam com a Source Sans 3 */
.doc-v2,.doc-v2 .doc-titulo h1,.doc-v2 .doc-res-l.total,.doc-v2 .doc-valor,.doc-v2 .doc-assin-nome,.doc-v2 .doc-marca-txt{font-family:"Nunito Sans","Source Sans 3",system-ui,sans-serif}
/* 05/11 (Dr.): paciente e doutor em dois blocos, lado a lado; o CPF embaixo do nome do paciente */
.doc-v2 .doc-blocos{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 14px}
.doc-v2 .doc-bloco{border:1px solid #E1E6EC;border-radius:8px;background:#FAFBFC;padding:9px 14px;font-size:14px;color:#0A1F38;min-width:0}
.doc-v2 .doc-bloco-pac{flex:2 1 300px}
.doc-v2 .doc-bloco-dr{flex:1 1 180px}
.doc-v2 .doc-rot{display:inline-block;color:#6b7785;text-transform:uppercase;letter-spacing:.8px;font-size:10.5px;margin-right:8px}
.doc-v2 .doc-bloco>.doc-rot{display:block;margin:0 0 2px}
.doc-v2 .doc-bl-nome{font-weight:600}
.doc-v2 .doc-bl-nome .doc-pront{font-weight:400}
.doc-v2 .doc-bl-l{margin-top:3px}
.doc-v2 .doc-bl-nome{font-size:16.5px;font-weight:700;line-height:1.3}
.doc-v2 .doc-bloco>.doc-rot{margin:0 0 3px}
/* 05/11 (Dr.: "deixa mais espaçado o planejamento, o bloco e os procedimentos") */
.doc-v2 .doc-titulo-lin{margin:12px 0 18px}
.doc-v2 .doc-blocos{margin:0 0 26px}
.doc-v2 .doc-ass .as-curto{text-align:left;margin-top:8px}
.doc-v2 .doc-ass>div{align-self:flex-start}
/* 05/11 (Dr.: "o carimbo pode estar dentro de algum bloquinho também, uma coisa mais discretinha... como se fosse um selo"):
 * o aceite eletrônico vira um selo pequeno, com o escudo de conferido, embaixo da assinatura do paciente */
.doc-v2 .doc-ass .as-curto{position:relative;margin:10px 0 0;padding:7px 10px 7px 34px;border:1px solid #D3DEEA;border-radius:8px;background:#F5F8FC;font-size:10px;line-height:1.4;color:#5A6878;text-align:left}
.doc-v2 .doc-ass .as-curto::before{content:"";position:absolute;left:9px;top:8px;width:17px;height:17px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A73E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.doc-v2 .doc-ass .as-curto b{display:block;color:#0A1F38;font-size:10.5px;margin-bottom:1px}
@media print{.doc-v2 .doc-ass .as-curto{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.lv-it[data-lv-linha]{cursor:pointer}.lv-it[data-lv-linha]:hover{background:var(--fundo)}
/* campo de data inteiro abre o calendário (06/11) */
input[type="date"], input[type="month"] { cursor: pointer; }
/* celular mais limpo (06/11): explicação vira "?" ao lado do título; tabela larga rola dentro dela */
@media (max-width: 760px) {
  .enc-mob { display: none !important; }
  table.tab { display: block; max-width: 100%; overflow-x: auto; }
}
/* Campanha do mês (06/11) */
.cp-cab { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 4px 0 14px; color: var(--tinta-2); font-size: 14px; }
.cp-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 12px; }
.cp-of { padding: 14px 16px; }
.cp-of h3 { margin: 0; font-size: 16px; }
.cp-of-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.cp-of-cab small { color: var(--tinta-2); display: block; margin-top: 2px; }
.cp-preco { display: flex; flex-direction: column; gap: 2px; }
.cp-de { color: #8a94a3; text-decoration: line-through; font-size: 13px; }
.cp-por b { font-size: 20px; color: #1e7e34; }
.cp-cartao { font-size: 13px; color: var(--tinta-2); }
.cp-cartao b { font-size: 18px; color: var(--titulo); }
.cp-obs, .cp-txt { font-size: 13px; color: var(--tinta-2); margin: 8px 0 0; }
.cp-pdrn { display: inline-block; margin-top: 8px; font-size: 12px; background: #eef4ff; color: #1a4fa0; padding: 2px 8px; border-radius: 999px; }
.cp-faixas summary { cursor: pointer; color: #1A73E8; font-size: 13px; font-weight: 600; }
.cp-tab { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.cp-tab th { text-align: left; color: var(--tinta-2); font-weight: 600; padding: 4px 4px; border-bottom: 1px solid var(--linha); }
.cp-tab td { padding: 5px 4px; border-bottom: 1px solid #f0f2f5; vertical-align: top; }
.cp-tab td small { display: block; color: var(--tinta-2); font-size: 11px; }
.cp-tab td.cp-av { color: #1e7e34; font-weight: 600; }
.cp-ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--tinta-2); }
/* criar e editar a campanha (06/11) */
.cp-ed-h { margin: 18px 0 8px; font-size: 15px; }
.cp-ed-of { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 14px 12px; margin: 0 0 12px; }
.cp-ed-of legend { font-size: 12px; font-weight: 700; color: var(--tinta-2); padding: 0 4px; }
.cp-ed-modo { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 8px; font-size: 14px; }
.cp-ed-tab input { width: 100%; min-width: 70px; }
.cp-ed-tab small { display: block; color: var(--tinta-2); font-size: 11px; }
.cp-ed-pe { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cp-lista-cps { display: flex; flex-direction: column; }
.cp-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.cp-linha small { display: block; color: var(--tinta-2); }
.cp-linha-bts { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.perigo-tx { color: #b42318; }
/* preço da campanha: 12x em destaque, total discreto, à vista e economia (06/11) */
.cp-12x { font-size: 14px; color: var(--titulo); }
.cp-12x b { font-size: 22px; color: var(--titulo); }
.cp-total { font-size: 12px; color: #8a94a3; }
.cp-preco .cp-por { font-size: 14px; color: #1e7e34; margin-top: 4px; }
.cp-preco .cp-por b { font-size: 16px; color: #1e7e34; }
.cp-ec-chip { align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 600; background: #e6f4ea; color: #1e7e34; padding: 2px 8px; border-radius: 999px; }
.cp-tab td small.cp-de { text-decoration: line-through; color: #8a94a3; }
.cp-tab td.cp-ec { color: #1e7e34; font-size: 12px; }

/* 07/11 (Dr.): no celular, o menu de seções (CRC, Financeiro) vira um botão que abre a lista em pé, em vez de abas que
 * rolam para o lado. C.lateralCel(aside) cria o botão; no computador ele fica escondido e nada muda. */
.lat-abre{display:none}
@media(max-width:760px){
  .lateral.lat-cel{display:block;padding:6px;overflow:visible}
  .lateral.lat-cel .tit{display:none}
  .lateral.lat-cel .lat-abre{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:8px;background:var(--azul);color:#fff;font:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer}
  .lat-abre-txt{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
  .lat-abre-txt>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lat-abre .cr-lat-n{background:rgba(255,255,255,.22);color:#fff}
  .lat-abre-seta{flex:none;transition:transform .2s}
  .lateral.lat-cel.aberta .lat-abre-seta{transform:rotate(180deg)}
  .lateral.lat-cel a{display:none}
  .lateral.lat-cel.aberta a{display:flex;align-items:center;gap:8px;white-space:normal;margin-top:2px;min-height:44px;padding:10px 12px}
  .lateral.lat-cel.aberta a.ativo{display:none}
}
/* iPhone (07/11, visto no simulador do iPhone 17): (1) campo com letra menor que 16 faz o Safari dar ZOOM ao tocar e a página
   sai da tela; (2) a barra do Safari flutua por cima do pé da página: janela que sobe de baixo e a faixa do protótipo
   respeitam a área de baixo do aparelho */
@media (max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}
  .modal-fundo{bottom:auto;height:100dvh}
  .modal .m-corpo:last-child{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .modal .m-rodape{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .faixa-proto{bottom:calc(10px + env(safe-area-inset-bottom))}
}
/* sininho (07/11): avisos organizados, no jeito da central de notificações do iPhone */
.sn-painel{position:fixed;top:62px;right:16px;width:380px;max-width:calc(100vw - 32px);max-height:min(70vh,620px);background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(16,24,40,.22);z-index:120;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--linha)}
.sn-cab{display:flex;align-items:center;gap:8px;padding:12px 10px 10px 16px;border-bottom:1px solid var(--linha)}
.sn-cab b{font-size:16px;margin-right:auto}
.sn-cab .btn.link{padding:0 4px;height:auto;font-size:13px}
.sn-rolar{overflow:auto;padding-bottom:8px}
.sn-grp{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2);padding:12px 16px 4px}
.sn-it{display:flex;align-items:flex-start;gap:10px;width:100%;padding:9px 16px;border:0;background:none;text-align:left;font:inherit;color:var(--tinta);cursor:pointer;text-decoration:none;position:relative}
.sn-it:hover{background:var(--fundo)}
.sn-ico{width:30px;height:30px;border-radius:50%;background:#eef2f7;display:flex;align-items:center;justify-content:center;flex:none;color:var(--tinta-2)}
.sn-ico .ic{width:16px;height:16px}
.sn-it.nao .sn-ico{background:var(--azul-suave);color:var(--azul)}
.sn-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sn-txt{font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sn-it.nao .sn-txt{font-weight:600}
.sn-tx small{font-size:12px;color:var(--tinta-2)}
.sn-ponto{width:8px;height:8px;border-radius:50%;background:var(--azul);flex:none;margin-top:6px}
.sn-ap{background:#fff8e6}
.sn-ap .sn-ico{background:#ffe9b3;color:#a87500}
.sn-ap b{font-size:14px}
.sn-ver{align-self:center;font-size:13px;font-weight:600;color:#a87500}
.sn-vazio{padding:14px 16px;color:var(--tinta-2);font-size:13px;margin:0}
@media(max-width:760px){
  .sn-painel{top:calc(56px + env(safe-area-inset-top));left:8px;right:8px;width:auto;max-width:none;max-height:calc(100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .sn-txt{font-size:14px}
}
/* 07/11 (Dr.: "margens mais folgadas" no celular): as páginas passam de 12 para 18 de cada lado */
@media(max-width:760px){.pagina{padding-left:18px;padding-right:18px}}
/* 07/11: ficha do paciente mais arejada; número do prontuário embaixo da foto; StaffChat ao lado do telefone */
.pa-foto-num{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.pa-num-foto{font-size:12px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.ficha-cab .tel-sc{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:4px;border:1px solid var(--azul);border-radius:8px;background:#fff;color:var(--azul);cursor:pointer}
.ficha-cab .tel-sc .ic{width:16px;height:16px}
@media(max-width:760px){
  .ficha-cab .acoes-dir .linha-flex{gap:10px!important}
  .ficha-cab .tel{margin:4px 0 8px}
  .ficha-cab .linha1{row-gap:14px}
}
.ficha-cab .tel-sc{width:auto;height:28px;padding:0 10px;font:inherit;font-size:13px;font-weight:600;border-radius:999px}
/* 07/11 (Dr.: "deixa quadradinho o botão... menos arredondado... mais discreto... não precisa ser em negrito") */
.ficha-cab .tel-sc{border-radius:6px;font-weight:400;font-size:12.5px;height:26px;padding:0 8px;border-color:var(--linha-2);color:var(--azul)}
.ficha-cab .tel-sc:hover{border-color:var(--azul)}
/* 07/11 (Dr., no iPhone: "uma página toda cheia sem margem... são coisas que a gente já falou"): a ficha do paciente usa a
   mesma margem das outras páginas no celular (18 de cada lado); o cartão do tratamento não encosta mais nas bordas */
@media(max-width:760px){
  .ficha-cab{padding-left:18px;padding-right:18px}
  .ficha-corpo{padding-left:18px;padding-right:18px}
  main>.tr-trilho,.ficha-cab+.tr-trilho{margin-left:18px;margin-right:18px}
}
/* 07/11 (revisão lendo a tela): na página Pacientes a busca do topo repetia a busca da página; ali fica só a da página */
body[data-rota="pacientes"] .topo .busca-topo{visibility:hidden}
/* 07/11 (vistoria tela a tela no celular): nos cartões que vêm de tabela, o rótulo fica à esquerda e TODO o conteúdo junto à
   direita (antes "Agenda fechada" ia para o meio e "congresso" para a ponta; o lápis das Ações ficava no meio) */
@media(max-width:760px){
  table.tab.resp td{justify-content:flex-end;align-items:center;column-gap:8px}
  table.tab.resp td[data-label]:before{margin-right:auto}
  table.tab.resp td.cel-titulo{justify-content:flex-start}
}
/* 07/11: o balão do "?" escondido nunca aparece, mesmo dentro de um lugar que mostra todo span (ex.: passos do Importar) */
.q-aj-tx[hidden]{display:none!important}

/* 07/11 revisão: o título de Ponto e de Fechamento usava o h1 do navegador (30 px, com margem em cima),
   mais alto e maior que o das outras páginas. Mesmo título de todas: 24 px, colado no topo. */
.pt-pag > h1, .fe-pag > h1{font-size:24px;font-weight:700;margin:0 0 18px;color:var(--titulo)}
/* 07/11 revisão: no celular, número que sobra sozinho na última linha ocupa a linha toda (Estoque: valor em estoque) */
@media(max-width:760px){ .ind-nums > .ind-num:last-child:nth-child(odd){grid-column:1/-1} }
/* 07/11 revisão: na aba Planejamentos o botão "Novo planejamento" já está no cabeçalho da aba;
   o mesmo botão no trilho do tratamento ficava repetido logo acima. Na aba, sai o do trilho. */
body:has([data-fo="novo"]) .tr-trilho [data-tr="planejar"]{display:none}
/* 07/11 revisão: no celular as três escolhas do chat quebravam em duas linhas tortas; agora três colunas iguais */
@media(max-width:760px){
  .segmentado.ac-modos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .segmentado.ac-modos > *{white-space:normal;text-align:center;line-height:1.2;padding:8px 4px;font-size:13px;min-width:0;justify-content:center}
}
/* 07/11: a explicação que virou "?" some também no computador (nas Configurações) */
.enc-mob{display:none!important}
.ap-email-previa{border:1px solid var(--linha);border-radius:10px;overflow:hidden;max-width:100%}
/* 07/11: fotos de antes e de depois no atendimento, para o doutor conferir */
.at-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin:6px 0}
.at-foto{border:0;padding:0;background:none;cursor:pointer;border-radius:8px;overflow:hidden;aspect-ratio:1/1}
.at-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* 08/11 (Dr., no computador: "esse botão aqui ficou muito aleatório"): o botão do próximo passo vem logo depois do texto,
   e o cartão do tratamento tem a mesma largura e margem dos cartões da ficha (antes ia de borda a borda) */
.tr-prox{flex:0 1 auto;min-width:0}
@media(min-width:761px){
  main>.tr-trilho,.ficha-cab+.tr-trilho{box-sizing:border-box;width:calc(100% - 56px);max-width:1304px;margin:12px auto 4px}
}
@media(max-width:760px){ .modal.modal-tela-cheia{border-radius:0!important} }