/* Paleta AmorSaúde: teal claro #61c1d0 (marca) + vermelho #d53e36 (Saúde).
   --rosa/--rosa2 mantêm o NOME (evita tocar todas as regras) mas agora são o TEAL
   forte, escuro o bastante p/ texto branco legível em botões/abas.
   OBS: este CSS é COMPARTILHADO com o /admin — as regras de "app-shell" (travar
   zoom/rolagem, altura cheia) ficam escopadas em `body.app` pra não afetar o admin. */
:root{--rosa:#0a7082;--rosa2:#085e6d;--amor:#61c1d0;--amor2:#8ad3df;--saude:#d53e36;--tx:#1f2430;--mut:#6b7280;--bg:#eef1f4;--cd:#fff;--bd:#e5e7eb;--ok:#16a34a;--sombra:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06)}
/* [hidden] TEM que vencer regras com display: (ex.: .carregando/.tela{display:flex}),
   senão o overlay do spinner nunca some e trava a tela girando. */
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.45 -apple-system,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* mata o zoom por duplo-toque e realça o toque sem halo azul */
*{-webkit-tap-highlight-color:transparent}
button,a,.card,.slot,.aba{touch-action:manipulation}

/* ────────────────────────────────────────────────────────────────────────────
   APP-SHELL (só no app do paciente): uma página só, header fixo, miolo rola.
   ──────────────────────────────────────────────────────────────────────────── */
body.app{height:100dvh;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;position:fixed;inset:0;width:100%;-webkit-user-select:none;user-select:none}
/* touch-action:pan-y → só rolagem vertical; mata pinça e duplo-toque de zoom */
body.app #app{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding-bottom:max(20px,env(safe-area-inset-bottom))}
/* campos de texto podem ser selecionados */
body.app input,body.app textarea{-webkit-user-select:text;user-select:text}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:#fff;color:var(--tx);border-bottom:1px solid var(--bd);box-shadow:0 1px 4px rgba(0,0,0,.04);padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top))}
.top .marca{font-weight:800;font-size:18px;flex:1;text-align:center;color:var(--rosa)}
.top .logo-amor{flex:1;height:30px;object-fit:contain}
.top .voltar,.top .conta{background:rgba(10,112,130,.08);border:0;color:var(--rosa);width:38px;height:38px;border-radius:12px;font-size:18px;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center;transition:background .15s}
.top .voltar:active,.top .conta:active{background:rgba(10,112,130,.2)}

/* ── Cabeçalho branded do APP: marca empilhada (ícone em cima, wordmark embaixo) ── */
body.app .top{position:relative;flex:0 0 auto;flex-direction:column;gap:7px;padding:calc(max(10px,env(safe-area-inset-top)) + 8px) 14px 16px;border-bottom:0;background:linear-gradient(170deg,#ffffff 0%,#e8f6f8 100%);box-shadow:0 4px 18px rgba(10,112,130,.08)}
body.app .top .marca-ico{width:60px;height:60px;border-radius:19px;box-shadow:0 8px 20px rgba(10,112,130,.22);overflow:hidden;background:#fff}
body.app .top .marca-ico img{width:100%;height:100%;display:block}
body.app .top .marca-word{font-family:'Nunito',-apple-system,Segoe UI,Roboto,sans-serif;font-weight:900;font-size:26px;line-height:1;letter-spacing:-.02em}
body.app .top .marca-word .m-amor{color:var(--amor)}
body.app .top .marca-word .m-saude{color:var(--saude)}
body.app .top .voltar{position:absolute;left:12px;top:max(12px,env(safe-area-inset-top))}
body.app .top .conta{position:absolute;right:12px;top:max(12px,env(safe-area-inset-top));background:#fff;box-shadow:var(--sombra)}
#app{max-width:560px;margin:0 auto;padding:16px;width:100%}
.tela{animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h1,h2{font-family:'Nunito',-apple-system,Segoe UI,Roboto,sans-serif}
h1{font-size:24px;font-weight:800;margin:4px 0 14px;letter-spacing:-.02em}h2{font-size:20px;font-weight:800;margin:2px 0 8px;letter-spacing:-.02em}
.sub{color:var(--mut);margin:0 0 14px}

/* Abas genéricas (compartilhadas com o admin): pílula teal preenchida */
.abas{display:flex;gap:8px;margin-bottom:12px}
.aba{flex:1;padding:10px;border:1px solid var(--bd);background:#fff;border-radius:10px;font-weight:600;color:var(--mut);cursor:pointer}
.aba.ativa{background:var(--rosa);color:#fff;border-color:var(--rosa)}
/* No APP do paciente as abas viram cápsula com "pílula" branca deslizante */
body.app .abas{gap:4px;background:#e4e8ec;padding:4px;border-radius:14px}
body.app .aba{border:0;background:transparent;border-radius:11px;font-size:14px;transition:all .18s}
body.app .aba.ativa{background:#fff;color:var(--rosa);border-color:transparent;box-shadow:0 1px 3px rgba(16,24,40,.12)}
.tipo{margin-bottom:12px}

label{display:block;font-size:13px;color:var(--mut);margin-bottom:12px}
label.full,label.check{display:block}
label.check{display:flex;gap:10px;align-items:flex-start;color:var(--tx);font-size:14px;background:#fff;border:1px solid var(--bd);border-radius:12px;padding:12px}
/* font-size 16px EXPLÍCITO (nunca shorthand com `inherit`, que invalida a regra e
   deixa o campo <16px → iOS dá zoom ao focar e, com zoom travado, não volta). */
input,select,textarea{width:100%;font-size:16px;font-family:inherit;padding:13px 14px;border:1px solid var(--bd);border-radius:12px;background:#fff;color:var(--tx);margin-top:6px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{outline:0;border-color:var(--amor);box-shadow:0 0 0 3px rgba(97,193,208,.25)}
label.check input{width:auto;margin-top:2px}

/* Cards: sombra suave, seta à direita, feedback de toque */
.cards{display:flex;flex-direction:column;gap:10px}
.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;color:var(--tx);background:var(--cd);border:1px solid var(--bd);border-radius:16px;padding:15px 40px 15px 15px;cursor:pointer;box-shadow:var(--sombra);transition:transform .12s,border-color .15s,box-shadow .15s}
.card:not(.estatico)::after{content:"›";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--amor);font-size:26px;font-weight:700;line-height:1}
.card:not(.estatico):active{transform:scale(.985);border-color:var(--amor);box-shadow:0 0 0 2px rgba(97,193,208,.25),var(--sombra)}
.card.ativa{border-color:var(--rosa);box-shadow:0 0 0 2px rgba(10,112,130,.25),var(--sombra)}
.card.estatico{cursor:default;padding-right:15px}
.card b{font-size:16px;color:var(--tx)}
/* card com avatar à esquerda (listas de especialidade/profissional/filiado) */
.card.comav{padding-left:70px;min-height:72px;justify-content:center}
.av{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:17px;box-shadow:0 3px 8px rgba(16,24,40,.18);overflow:hidden}
.av-foto{background-size:cover;background-position:center;background-repeat:no-repeat;color:transparent}
.esp-ic{background:linear-gradient(135deg,#61c1d0,#2f9fb2);color:#fff}
.esp-ic svg{width:24px;height:24px}

/* Calendário de agendamento — pinta dias com atendimento */
.cal{background:var(--cd,#fff);border:1px solid var(--bd,#e6e8ec);border-radius:16px;padding:12px;box-shadow:var(--sombra)}
.cal-load{padding:28px 0;text-align:center;color:#8a93a0}
.cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:16px;color:var(--tx)}
.cal-nav{width:36px;height:36px;border-radius:50%;border:1px solid var(--bd,#e6e8ec);background:#f6f7f9;color:#2f9fb2;font-size:20px;line-height:1;cursor:pointer}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-head span{text-align:center;font-size:11px;color:#9aa3af;padding:2px 0;font-weight:700}
.cal-dias{margin-top:2px}
.cal-dia,.cal-x{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:15px;border:0;background:transparent}
.cal-x{visibility:hidden}
.cal-dia{color:#c3c8cf;font-weight:600}
.cal-dia.cal-pass{color:#d8dbe0}
.cal-dia.cal-sem{color:#c3c8cf}
.cal-dia.cal-livre{background:#e4f5f8;color:#1b7e8f;font-weight:800;cursor:pointer;box-shadow:inset 0 0 0 1.5px #a9e0e8}
.cal-dia.cal-cheio{background:#fff3df;color:#c67c00;font-weight:800;cursor:pointer;box-shadow:inset 0 0 0 1.5px #ffd591}
.cal-dia.cal-livre:active,.cal-dia.cal-cheio:active{transform:scale(.94)}
.cal-dia.sel{background:linear-gradient(135deg,#61c1d0,#2f9fb2)!important;color:#fff!important;box-shadow:0 2px 8px rgba(47,159,178,.4)!important}
.cal-leg{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:#8a93a0;flex-wrap:wrap}
.cal-leg .lg{width:13px;height:13px;border-radius:4px;display:inline-block}
.cal-leg .lg-livre{background:#e4f5f8;box-shadow:inset 0 0 0 1.5px #a9e0e8}
.cal-leg .lg-cheio{background:#fff3df;box-shadow:inset 0 0 0 1.5px #ffd591;margin-left:8px}
.encaixe{background:#fff7ea;border:1px solid #ffdca3;border-radius:14px;padding:14px;margin-top:12px}
.encaixe p{margin:0 0 10px;font-size:14px;color:#7a5a12}
.tag{color:var(--mut);font-size:13px}

/* Horários: grade de chips */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;margin-top:12px}
.slot{padding:13px 4px;border:1px solid var(--bd);background:#fff;color:var(--tx);border-radius:12px;font-weight:700;cursor:pointer;box-shadow:var(--sombra);transition:transform .12s,background .15s,color .15s}
.slot:active{transform:scale(.95);background:var(--rosa);color:#fff;border-color:var(--rosa)}

/* Botões */
.primario{width:100%;background:linear-gradient(180deg,var(--rosa),var(--rosa2));color:#fff;border:0;border-radius:14px;padding:15px;font-weight:700;font-size:16px;cursor:pointer;margin-top:10px;box-shadow:0 4px 14px rgba(10,112,130,.3);transition:transform .12s,box-shadow .15s}
.primario:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(10,112,130,.3)}
.link{display:block;width:100%;background:none;border:0;color:var(--rosa);font-weight:600;padding:12px;cursor:pointer;margin-top:4px}
.resumo{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:15px;margin-bottom:14px;box-shadow:var(--sombra)}
.msg{color:#b91c1c;font-size:14px;min-height:18px;margin-top:8px}
.vazio{color:var(--mut);text-align:center;padding:28px 16px}
.ok{font-size:54px;text-align:center;animation:pop .35s ease}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}
#tela-ok{text-align:center;padding-top:16px}
.status{font-size:12px;font-weight:700;color:var(--ok)}
.status.erro,.status.cancelado{color:#b91c1c}
.status.solicitado{color:#9a5b00}
.status.cancelado{color:#b91c1c}.status.compareceu{color:#0a7082}
/* ações no card do histórico (remarcar/cancelar) */
.hist-acoes{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #f0f0f0}
.mini-link{flex:1;background:#f3f6f7;border:1px solid var(--bd);color:var(--rosa);font-weight:700;font-size:13px;padding:9px;border-radius:10px;cursor:pointer}
.mini-link.danger{color:#b91c1c;background:#fdf1f0;border-color:#f6d7d4}
.mini-link:active{transform:scale(.97)}

/* Spinner */
.carregando{position:fixed;inset:0;background:rgba(238,241,244,.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:40}
.spinner{width:38px;height:38px;border:4px solid var(--bd);border-top-color:var(--rosa);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Banner de instalar (barra inferior) */
.banner{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;gap:12px;background:#fff;border-top:1px solid var(--bd);box-shadow:0 -4px 20px rgba(16,24,40,.12);padding:12px 14px;padding-bottom:max(12px,env(safe-area-inset-bottom));animation:subir .25s ease}
@keyframes subir{from{transform:translateY(100%)}to{transform:none}}
.banner-ico{width:40px;height:40px;border-radius:10px;flex:0 0 auto}
.banner-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.banner-txt b{font-size:14px}
.banner-txt span{font-size:12px;color:var(--mut)}
.banner-btn{flex:0 0 auto;background:linear-gradient(180deg,var(--rosa),var(--rosa2));color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:700;font-size:14px;cursor:pointer}
.banner-x{flex:0 0 auto;background:none;border:0;color:var(--mut);font-size:16px;cursor:pointer;padding:4px}

/* Toast de atualização */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:12px;background:#1f2430;color:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 8px 28px rgba(0,0,0,.3);animation:subir .25s ease;max-width:92vw}
.toast span{font-size:14px}
.toast-btn{background:var(--amor);color:#063b45;border:0;border-radius:9px;padding:8px 14px;font-weight:700;font-size:14px;cursor:pointer}

/* ── Chat Vertiba (falar com a clínica) ───────────────────────────────────── */
.hist-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chat-ico{position:relative;width:42px;height:42px;border:none;border-radius:50%;
  background:var(--rosa);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--sombra)}
.chat-ico:active{transform:scale(.94)}
.chat-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--saude);color:#fff;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--cd)}

/* a tela de chat ocupa a área toda, com a barra de digitar fixa embaixo */
#tela-chat{display:flex;flex-direction:column;height:calc(100vh - 64px);padding:0}
#tela-chat[hidden]{display:none}
.chat-topo{padding:12px 16px;border-bottom:1px solid var(--bd);background:var(--cd)}
.chat-topo b{display:block;font-size:16px;color:var(--tx)}
.chat-sub{font-size:12px;color:var(--mut)}
.chat-msgs{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(180deg,#e9f4f6,#eef1f4)}
.chat-bolha{max-width:78%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.35;
  word-wrap:break-word;box-shadow:var(--sombra);position:relative}
.chat-bolha .hora{display:block;font-size:10px;opacity:.6;margin-top:3px;text-align:right}
.chat-bolha.in{align-self:flex-end;background:var(--rosa);color:#fff;border-bottom-right-radius:4px}
.chat-bolha.out{align-self:flex-start;background:var(--cd);color:var(--tx);border-bottom-left-radius:4px}
.chat-bolha.sistema{align-self:center;background:#fff3df;color:#7a5a12;font-size:12.5px;text-align:center}
.chat-bolha img{max-width:100%;border-radius:10px;display:block;margin:2px 0}
.chat-bolha audio{width:230px;max-width:60vw;margin:2px 0}
.chat-bolha a.arq{color:inherit;text-decoration:underline}
.chat-bolha.in .pend{opacity:.7}
.chat-vazio{align-self:center;color:var(--mut);font-size:13px;margin:auto 0;text-align:center;padding:0 24px}
.chat-barra{display:flex;align-items:center;gap:6px;padding:8px;border-top:1px solid var(--bd);
  background:var(--cd)}
.chat-btn,.chat-send{width:40px;height:40px;flex:0 0 auto;border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;background:#eef1f4;color:var(--rosa)}
.chat-send{background:var(--rosa);color:#fff}
.chat-btn:active,.chat-send:active{transform:scale(.92)}
.chat-btn.gravando{background:var(--saude);color:#fff;animation:chatpulse 1s infinite}
@keyframes chatpulse{0%,100%{opacity:1}50%{opacity:.55}}
.chat-input{flex:1;min-width:0;border:1px solid var(--bd);border-radius:20px;padding:10px 14px;
  font:inherit;font-size:14px;outline:none}
.chat-input:focus{border-color:var(--amor)}

/* ── Chat Vertiba — FAB persistente, fundo WhatsApp, autor e tiques ──────────── */
/* botão flutuante do chat (todas as telas, quando logado) */
.fab-chat{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));
  width:70px;height:70px;border:none;border-radius:50%;background:var(--rosa);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;z-index:900;
  box-shadow:0 6px 18px rgba(10,112,130,.45)}
.fab-label{font-size:10px;font-weight:900;letter-spacing:.5px;line-height:1}
.fab-chat:active{transform:scale(.93)}
.fab-chat[hidden]{display:none}

/* fundo da conversa igual ao WhatsApp (bege + rabiscos suaves) */
.chat-msgs{background-color:#e7e0d6;
  background-image:url("icones/chatbg.svg");background-size:200px auto;background-repeat:repeat}

/* nome de quem respondeu (acima da bolha da clínica) */
.chat-bolha .chat-autor{display:block;font-size:11px;font-weight:800;color:#0a7082;margin-bottom:2px;line-height:1.1}

/* tiques de entrega/leitura (só nas minhas bolhas) */
.chat-bolha.in .hora{color:rgba(255,255,255,.82)}
.chat-bolha .hora .tick{margin-left:3px;font-size:11px;letter-spacing:-1px}
.chat-bolha .hora .tick.lido{color:#7fe3ff}      /* ✓✓ lido — azul claro (lê bem no teal) */
.chat-bolha .hora .tick.err{color:#ffd0cc;font-weight:800}

/* botões do menu da URA (interativos, estilo WhatsApp) + formatação */
.chat-opts{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.chat-opt{border:1px solid var(--amor);background:#f0fbfd;color:#0a7082;border-radius:10px;
  padding:9px 10px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:center;width:100%}
.chat-opt:active{transform:scale(.97)}
.chat-bolha code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  background:rgba(0,0,0,.06);padding:0 3px;border-radius:4px;white-space:pre-wrap}
.chat-bolha.in code{background:rgba(255,255,255,.22)}
.chat-bolha b{font-weight:800}

/* gravação de áudio estilo WhatsApp (bar "gravando") */
.chat-grav{display:none;flex:1;align-items:center;gap:8px;min-width:0}
.chat-barra.gravando .chat-grav{display:flex}
.chat-barra.gravando .chat-input,
.chat-barra.gravando #chatAnexo,
.chat-barra.gravando .chat-send{display:none}
.rec-dot{width:11px;height:11px;border-radius:50%;background:var(--saude);flex:0 0 auto;animation:chatpulse 1s infinite}
.rec-time{font-weight:800;color:var(--saude);font-variant-numeric:tabular-nums;flex:0 0 auto}
.rec-hint{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-cancel{margin-left:auto;background:none;border:none;color:var(--saude);font-weight:800;cursor:pointer;font-size:13px;flex:0 0 auto;padding:4px 6px}
/* mídia nas bolhas */
.chat-bolha img{max-width:220px;max-height:260px;object-fit:cover;cursor:pointer}
.chat-bolha audio{width:240px;max-width:62vw;height:40px;margin:2px 0}

/* player de voz próprio (play + barra + tempo) — funciona em iOS e sobrevive ao re-render */
.voice{display:flex;align-items:center;gap:9px;min-width:210px;max-width:64vw;padding:2px 0}
.voice-play{width:34px;height:34px;flex:0 0 auto;border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
  background:rgba(255,255,255,.25);color:#fff}
.chat-bolha.out .voice-play{background:var(--rosa);color:#fff}
.voice-bar{flex:1;height:4px;border-radius:2px;position:relative;overflow:hidden;background:rgba(255,255,255,.4)}
.chat-bolha.out .voice-bar{background:rgba(10,112,130,.18)}
.voice-prog{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:#fff;transition:width .15s linear}
.chat-bolha.out .voice-prog{background:var(--rosa)}
.voice-time{font-size:11px;font-variant-numeric:tabular-nums;opacity:.9;flex:0 0 auto;min-width:36px;text-align:right}

/* durante a gravação, o botão do microfone VIRA o botão de enviar (ícone + cor) */
#chatAudio .ic-send{display:none}
#chatAudio.gravando .ic-mic{display:none}
#chatAudio.gravando .ic-send{display:block}
.chat-btn.gravando{background:var(--rosa);color:#fff;animation:none}
.chat-barra.gravando .rec-hint{color:var(--rosa);font-weight:800}

/* visualizador de imagem em tela cheia */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;padding:20px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:82vh;border-radius:8px;object-fit:contain}
.lb-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:16px;width:40px;height:40px;
  border:none;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:18px;cursor:pointer}
.lb-save{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  border:none;border-radius:22px;padding:12px 26px;background:var(--rosa);color:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.lb-save:active{transform:translateX(-50%) scale(.96)}

/* ── Login: centralizar + código em 6 caixinhas (estilo Mac) ─────────────────── */
#tela-login h1{text-align:center}
.sub.center{text-align:center}
.otp-label{display:block;text-align:center;font-weight:800;color:var(--tx);margin:8px 0 6px;font-size:15px}
.otp{display:flex;align-items:center;justify-content:center;gap:7px;margin:2px 0 16px}
.otp-cell{width:42px;height:52px;flex:0 0 auto;border:1.5px solid var(--bd);border-radius:12px;background:#fff;
  text-align:center;font-size:24px;font-weight:800;color:var(--tx);outline:none;caret-color:var(--rosa);padding:0}
.otp-cell:focus{border-color:var(--amor);box-shadow:0 0 0 3px rgba(97,193,208,.28)}
.otp-sep{color:var(--mut);font-weight:800;font-size:22px;user-select:none}

/* ── Cabeçalho: ícone de agenda + "Meus Agendamentos" ───────────────────────── */
body.app .top .conta{width:auto;min-width:46px;height:auto;flex-direction:column;gap:2px;padding:6px 9px;border-radius:14px}
.conta-label{font-size:8.5px;font-weight:800;color:var(--rosa);line-height:1.04;text-align:center;letter-spacing:.2px}

/* reforço: cada caixinha do código ignora o padding/margin do input global */
.otp-cell{padding:0;margin-top:0;box-sizing:border-box}

/* ── Seletor de praça (domínio genérico) ── */
.praca-lista{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.praca-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--cd);border:1px solid var(--bd);border-radius:14px;padding:18px;font-weight:700;font-size:17px;color:var(--rosa);cursor:pointer;box-shadow:var(--sombra);transition:transform .12s,border-color .15s,box-shadow .15s}
.praca-btn:active{transform:scale(.98);border-color:var(--rosa);box-shadow:0 0 0 2px rgba(10,112,130,.2),var(--sombra)}
#trocarCidade{text-align:left;width:auto;margin:0 0 4px;padding:6px 0;font-size:14px}