/* ═══════════════════════════════════════════════════
   Agendamento · folha cheia no celular, gaveta no desktop.
   Carregado sob demanda pelo fluxo (fora do caminho do LCP).

   Tema: toda cor sai de um --ag-* com o valor da Nácar
   (escuro) depois da vírgula. Sem tema, fica como a odonto;
   a vet carrega tema-vet.css, que define os --ag-* claros.
   O tema pode morar no :root ou no próprio diálogo.
   Os --_* daqui são internos: o tema não mexe neles.
   ═══════════════════════════════════════════════════ */

.ag, .zap {
  --_fundo: var(--ag-fundo, #070E1B);
  --_superficie: var(--ag-superficie, rgba(0, 3, 10, .35));
  --_borda: var(--ag-borda, rgba(238, 243, 247, .10));
  --_linha: var(--ag-linha, rgba(127, 216, 255, .18));
  --_texto: var(--ag-texto, var(--pearl, #EEF3F7));
  --_mudo: var(--ag-mudo, var(--slate, #8494AB));
  --_acento: var(--ag-acento, var(--cyan, #7FD8FF));              /* preenchimento */
  --_acento-texto: var(--ag-acento-texto, var(--cyan, #7FD8FF));  /* texto na cor de acento */
  --_sobre-acento: var(--ag-sobre-acento, #00030A);               /* texto em cima do preenchimento */
  --_marca: var(--ag-marca, var(--cyan, #7FD8FF));                /* contorno do que está escolhido */
  --_foco: var(--ag-foco, var(--cyan, #7FD8FF));
  --_coral: var(--ag-coral, #FF9B8A);
  --_ok: var(--ag-ok, #8EF0C4);
  --_cuidado: var(--ag-cuidado, #F5D9A8);
  --_sans: var(--ag-sans, var(--sans, "Manrope", system-ui, sans-serif));
  --_serif: var(--ag-serif, var(--serif, "Bodoni Moda", Georgia, serif));
  --_mono: var(--ag-mono, var(--mono, "JetBrains Mono", ui-monospace, monospace));
  --_ease: cubic-bezier(.22, .61, .36, 1);
  /* forma e peso também vêm do tema: a Nácar é reta e fina, a vet é redonda e cheia */
  --_raio: var(--ag-raio, 4px);
  --_raio-botao: var(--ag-raio-botao, 4px);
  --_peso-titulo: var(--ag-peso-titulo, 400);
  --_nacar:var(--ag-nacar, linear-gradient(100deg, #7FD8FF 0%, #C9C6FF 38%, #FFE3D0 68%, #7FD8FF 100%));
  color: var(--_texto);
  font: 400 16px/1.5 var(--_sans);
}

/* sem a reserva da barra de rolagem: com ela sobrava uma faixa à direita da gaveta */
html.ag-aberto { overflow: hidden; scrollbar-gutter: auto; }

/* ─── diálogo: o display só existe com [open], senão ele nunca fecha ─── */
dialog.ag {
  margin: 0; padding: 0; border: 0;
  width: 100%; max-width: none; height: 100dvh; max-height: none;
  background: var(--_fundo);
  overscroll-behavior: contain;
}
dialog.ag[open] { display: flex; animation: ag-sobe .32s var(--_ease); }
/* o véu lê o --ag-* direto: em navegador antigo o ::backdrop não herda do diálogo */
dialog.ag::backdrop { background: var(--ag-veu, rgba(0, 1, 7, .72)); backdrop-filter: blur(6px); }
@keyframes ag-sobe { from { transform: translateY(24px); opacity: 0; } }

@media (min-width: 760px) {
  dialog.ag {
    margin: 0 0 0 auto; width: min(500px, 100vw);
    border-left: 1px solid var(--_linha);
    box-shadow: -40px 0 80px var(--ag-sombra, rgba(0, 0, 0, .45));
  }
  dialog.ag[open] { animation-name: ag-entra; }
  @keyframes ag-entra { from { transform: translateX(40px); opacity: 0; } }
}

.ag-casca { display: flex; flex-direction: column; width: 100%; min-height: 0; }

/* ─── topo ─── */
.ag-topo {
  padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 16px;
  border-bottom: 1px solid var(--_borda);
  background: var(--ag-topo-fundo, linear-gradient(180deg, rgba(11, 20, 36, .9), rgba(7, 14, 27, .6)));
}
.ag-topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ag-passo { font: 400 12px/1.4 var(--_mono); letter-spacing: .06em; color: var(--_mudo); margin: 0; }
.ag-fechar {
  flex: none; width: 44px; height: 44px; margin-right: -8px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: none; color: var(--_texto); cursor: pointer;
}
.ag-fechar svg { width: 22px; height: 22px; }
.ag-fechar:hover { background: var(--ag-acento-suave, rgba(127, 216, 255, .08)); }
.ag-progresso { height: 2px; margin: 8px 0 18px; background: var(--_borda); border-radius: 2px; overflow: hidden; }
.ag-progresso i { display: block; height: 100%; background: var(--_acento); box-shadow: 0 0 10px var(--ag-brilho, rgba(127, 216, 255, .6)); transition: width .45s var(--_ease); }
.ag-titulo {
  margin: 4px 0 0; font: var(--_peso-titulo) clamp(26px, 6.4vw, 31px)/1.12 var(--_serif);
  letter-spacing: -.012em; outline: none; text-wrap: balance;
}
.ag-fichas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.ag-fichas button {
  min-height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--_linha); background: var(--ag-acento-suave, rgba(127, 216, 255, .06)); color: var(--_texto);
  font: 500 13px/1 var(--_sans);
  position: relative;
}
/* alvo de 44px sem engordar a ficha */
.ag-fichas button::after { content: ""; position: absolute; inset: -4px 0; }
.ag-fichas button:hover { border-color: var(--_acento); }

/* ─── corpo ─── */
/* gap em vez de margem entre irmãos: margin:0 dos blocos anulava a margem e colava tudo */
.ag-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 20px 28px; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 16px; }
.ag-corpo > * { margin-top: 0; margin-bottom: 0; flex: none; }
.ag-contexto { color: var(--_mudo); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.ag-conta { color: var(--_mudo); font-size: 14px; margin: 0; }
.ag-legenda { color: var(--_mudo); font-size: 13px; }
.ag-link {
  border: 0; background: none; padding: 0 2px; min-height: 44px; cursor: pointer;
  color: var(--_acento-texto); font: 500 15px/1 var(--_sans);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ag-sublinhado, rgba(127, 216, 255, .45));
}
.ag-link-perigo { color: var(--_coral); text-decoration-color: var(--ag-coral-borda, rgba(255, 155, 138, .45)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── listas de escolha ─── */
.ag-lista { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: 8px; }
.ag-opcao {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 14px 12px 44px; cursor: pointer;
  border: 1px solid var(--_borda); border-radius: var(--_raio); background: var(--_superficie);
  transition: border-color .25s var(--_ease), background .25s var(--_ease);
}
.ag-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ag-opcao::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border: 1.5px solid var(--_linha); border-radius: 50%;
  transition: background .25s var(--_ease), box-shadow .25s var(--_ease), border-color .25s var(--_ease);
}
.ag-opcao:hover { border-color: var(--_linha); background: var(--ag-acento-suave, rgba(127, 216, 255, .04)); }
.ag-opcao:has(input:checked) { border-color: var(--_marca); background: var(--ag-acento-marcado, rgba(127, 216, 255, .09)); }
.ag-opcao:has(input:checked)::before { background: var(--_marca); border-color: var(--_marca); box-shadow: 0 0 12px var(--ag-brilho, rgba(127, 216, 255, .7)), inset 0 0 0 3px var(--_fundo); }
.ag-opcao:has(input:focus-visible) { outline: 2px solid var(--_foco); outline-offset: 2px; }
.ag-opcao-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ag-opcao-corpo b { font-weight: 600; font-size: 16px; line-height: 1.3; }
.ag-opcao-corpo small { color: var(--_mudo); font-size: 14px; line-height: 1.4; }
.ag-ficticio { font: 400 12px/1.4 var(--_mono) !important; color: var(--_mudo); letter-spacing: .02em; }
.ag-opcao-meta { flex: none; font: 400 12px/1.3 var(--_mono); color: var(--_mudo); text-align: right; }
.ag-opcao-pessoa { padding-left: 44px; }
.ag-rosto { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; border: 1px solid var(--_borda); }
.ag-rostos { display: flex; flex: none; }
.ag-rostos img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--_fundo); }
.ag-rostos img + img { margin-left: -12px; }

/* ─── urgência ("Estou com dor agora", "Emergência") ─── */
.ag-dor {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  min-height: 64px; padding: 12px 16px; cursor: pointer; margin-top: 8px !important;
  border: 1px dashed var(--ag-coral-borda, rgba(255, 155, 138, .5)); border-radius: var(--_raio); background: var(--ag-coral-suave, rgba(255, 155, 138, .05));
  color: var(--_texto); font: inherit;
}
.ag-dor b { display: block; font-weight: 600; }
.ag-dor small { display: block; color: var(--_mudo); font-size: 14px; }
.ag-dor:hover { background: var(--ag-coral-suave, rgba(255, 155, 138, .1)); border-style: solid; }
.ag-dor-pulso { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--_coral); box-shadow: 0 0 0 0 var(--ag-coral-brilho, rgba(255, 155, 138, .6)); animation: ag-pulso 1.8s var(--_ease) infinite; }
@keyframes ag-pulso { 70% { box-shadow: 0 0 0 10px var(--ag-coral-apagado, rgba(255, 155, 138, 0)); } 100% { box-shadow: 0 0 0 0 var(--ag-coral-apagado, rgba(255, 155, 138, 0)); } }

/* ─── pet: nome, espécie e porte (só onde o ramo tem a etapa) ─── */
.ag-escolha { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.ag-escolha legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 500; }
.ag-pilulas { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.ag-pilula { position: relative; display: block; cursor: pointer; }
.ag-pilula input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ag-pilula span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; padding: 6px 8px; border-radius: 999px; text-align: center;
  border: 1px solid var(--_linha); background: var(--ag-acento-suave, rgba(127, 216, 255, .06));
  font: 500 15px/1.2 var(--_sans);
  transition: border-color .2s var(--_ease), background .2s var(--_ease), color .2s var(--_ease);
}
/* com a dica embaixo ("até 10 kg") a pílula vira cartão de canto redondo */
.ag-pilula span:has(small) { border-radius: 14px; min-height: 60px; }
.ag-pilula small { font: 400 12px/1.3 var(--_mono); color: var(--_mudo); white-space: nowrap; }
.ag-pilula:hover span { border-color: var(--_acento); }
.ag-pilula input:checked + span { background: var(--_acento); border-color: var(--_marca); color: var(--_sobre-acento); font-weight: 600; }
.ag-pilula input:checked + span small { color: var(--ag-sobre-acento-mudo, rgba(0, 3, 10, .72)); }
.ag-pilula input:focus-visible + span { outline: 2px solid var(--_foco); outline-offset: 3px; }
.ag-pilula input[aria-invalid="true"] + span { border-color: var(--_coral); }

/* ─── calendário ─── */
.ag-atalho {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 56px; padding: 10px 16px; cursor: pointer; text-align: left;
  border: 1px solid var(--_linha); border-radius: var(--_raio); background: var(--ag-acento-suave, rgba(127, 216, 255, .06)); color: var(--_texto); font: inherit;
}
.ag-atalho span { color: var(--_mudo); font-size: 14px; }
.ag-atalho b { font-weight: 600; }
.ag-atalho:hover { border-color: var(--_acento); }
.ag-calendario { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: 20px; }
.ag-mes-nome { margin: 0 0 8px; font: var(--_peso-titulo) 20px/1.2 var(--_serif); text-transform: capitalize; }
.ag-cal-sem, .ag-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ag-cal-sem span { text-align: center; font: 400 12px/2 var(--_mono); color: var(--_mudo); }
.ag-dia {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 52px; border-radius: var(--_raio); border: 1px solid var(--_borda); cursor: pointer;
  transition: border-color .2s var(--_ease), background .2s var(--_ease);
}
.ag-dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ag-dia > span[aria-hidden] { display: contents; }
.ag-dia b { font: 500 17px/1.1 var(--_sans); }
.ag-dia small { font: 400 11px/1.2 var(--_mono); color: var(--_mudo); margin-top: 3px; white-space: nowrap; }
.ag-dia.is-off small { font-size: 10px; }
.ag-dia:hover { border-color: var(--_linha); }
.ag-dia:has(input:checked) { background: var(--_acento); border-color: var(--_marca); color: var(--_sobre-acento); }
.ag-dia:has(input:checked) small { color: var(--ag-sobre-acento-mudo, rgba(0, 3, 10, .72)); }
.ag-dia:has(input:focus-visible) { outline: 2px solid var(--_foco); outline-offset: 2px; }
.ag-dia.is-off { cursor: default; border-style: dashed; border-color: var(--ag-off-borda, rgba(238, 243, 247, .06)); color: var(--ag-off-texto, rgba(238, 243, 247, .38)); }
.ag-dia.is-off small { color: var(--ag-off-mudo, rgba(132, 148, 171, .8)); }
.ag-dia.is-vazio { border: 0; cursor: default; }

/* ─── horários ─── */
.ag-grupo { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.ag-grupo + .ag-grupo { margin-top: 20px; }
.ag-grupo legend { padding: 0; margin-bottom: 10px; font: 400 12px/1 var(--_mono); letter-spacing: .08em; color: var(--_mudo); text-transform: lowercase; }
.ag-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.ag-hora { position: relative; cursor: pointer; display: block; }
.ag-hora input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ag-hora span {
  display: grid; place-items: center; min-height: 48px; border-radius: var(--_raio);
  border: 1px solid var(--_borda); font: 400 15px/1 var(--_mono); letter-spacing: .02em;
  transition: border-color .2s var(--_ease), color .2s var(--_ease), background .2s var(--_ease);
}
.ag-hora:hover span { border-color: var(--_acento); color: var(--_acento-texto); }
/* o horário escolhido leva a borda de nácar: um dos dois lugares onde ela existe */
.ag-hora input:checked + span { background: var(--_acento); color: var(--_sobre-acento); border-color: transparent; font-weight: 500; isolation: isolate; position: relative; }
.ag-hora input:checked + span::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: calc(var(--_raio) + 2px); background: var(--_nacar); background-size: 220% 100%; animation: ag-nacar 6s linear infinite; }
@keyframes ag-nacar { to { background-position: 220% 0; } }
.ag-hora input:focus-visible + span { outline: 2px solid var(--_foco); outline-offset: 3px; }

/* ─── estados ─── */
.ag-esqueleto { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.ag-esqueleto i { display: block; height: 48px; border-radius: var(--_raio); background: linear-gradient(90deg, var(--ag-esqueleto-a, rgba(238, 243, 247, .04)), var(--ag-esqueleto-b, rgba(238, 243, 247, .09)), var(--ag-esqueleto-a, rgba(238, 243, 247, .04))); background-size: 200% 100%; animation: ag-brilho 1.2s linear infinite; }
@keyframes ag-brilho { to { background-position: -200% 0; } }
.ag-estado { display: grid; gap: 12px; justify-items: start; padding: 20px; border: 1px solid var(--_borda); border-radius: var(--_raio); background: var(--_superficie); }
.ag-estado b { font-size: 17px; }
.ag-estado p { margin: 0; color: var(--_mudo); }
.ag-estado-erro { border-color: var(--ag-coral-borda, rgba(255, 155, 138, .4)); }
.ag-estado-conflito { border-color: var(--ag-coral-borda, rgba(255, 155, 138, .4)); background: var(--ag-coral-suave, rgba(255, 155, 138, .05)); }
.ag-estado-conflito > p:first-child { color: var(--_texto); }
.ag-aviso, .ag-erro-passo {
  display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--_raio); font-size: 15px;
  background: var(--ag-coral-suave, rgba(255, 155, 138, .08)); border: 1px solid var(--ag-coral-borda, rgba(255, 155, 138, .35)); color: var(--ag-alerta-texto, #FFD3CA);
}
.ag-aviso::before, .ag-erro-passo::before { content: ""; flex: none; width: 3px; border-radius: 2px; background: var(--_coral); }
.ag-alternativas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; width: 100%; }
.ag-alt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 60px; padding: 10px 14px; cursor: pointer;
  border: 1px solid var(--_linha); border-radius: var(--_raio); background: var(--ag-acento-suave, rgba(127, 216, 255, .05)); color: var(--_texto); font: inherit;
}
.ag-alt span { font-size: 13px; color: var(--_mudo); }
.ag-alt b { font: 500 18px/1.2 var(--_mono); }
.ag-alt:hover { border-color: var(--_acento); }

/* ─── resumo e formulário ─── */
.ag-resumo { margin: 0; display: grid; border: 1px solid var(--_borda); border-radius: var(--_raio); background: var(--_superficie); }
.ag-resumo > div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 12px 14px; }
.ag-resumo > div + div { border-top: 1px solid var(--_borda); }
.ag-resumo dt { color: var(--_mudo); font-size: 14px; }
.ag-resumo dd { margin: 0; font-weight: 500; display: flex; flex-direction: column; }
.ag-resumo small { color: var(--_mudo); font-weight: 400; font-size: 13px; }
.ag-codigo { font: 500 15px/1.3 var(--_mono); letter-spacing: .06em; color: var(--_acento-texto); }
.ag-form { display: grid; gap: 18px; margin-top: 6px !important; }
.ag-campo label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; font-weight: 500; }
.ag-opcional { font: 400 12px/1 var(--_mono); color: var(--_mudo); border: 1px solid var(--_borda); padding: 3px 7px; border-radius: 3px; }
.ag-campo input, .ag-campo textarea {
  width: 100%; min-height: 52px; padding: 13px 15px; border-radius: var(--_raio);
  border: 1px solid var(--ag-campo-borda, rgba(238, 243, 247, .16)); background: var(--ag-campo-fundo, rgba(0, 3, 10, .6)); color: var(--_texto);
  font: 400 16px/1.45 var(--_sans); transition: border-color .2s var(--_ease);
}
.ag-campo textarea { min-height: 88px; resize: vertical; }
.ag-campo input::placeholder, .ag-campo textarea::placeholder { color: var(--ag-placeholder, rgba(132, 148, 171, .75)); }
.ag-campo input:focus, .ag-campo textarea:focus { outline: none; border-color: var(--_foco); box-shadow: 0 0 0 3px var(--ag-foco-anel, rgba(127, 216, 255, .18)); }
.ag-campo input[aria-invalid="true"] { border-color: var(--_coral); }
.ag-ajuda { margin: 6px 0 0; font-size: 13px; color: var(--_mudo); }
.ag-erro { margin: 6px 0 0; font-size: 14px; color: var(--ag-erro-texto, #FFB8AB); }
.ag-cuidado { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--_cuidado); display: flex; gap: 8px; }
.ag-cuidado::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--_sans); color: var(--ag-sobre-cuidado, #00030A); background: var(--ag-cuidado-fundo, #F5D9A8); margin-top: 1px; }
.ag-privacidade { margin: 0; font-size: 13px; color: var(--_mudo); }
.ag-troca { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--_borda); border-radius: var(--_raio); }
.ag-troca p { margin: 0; display: grid; grid-template-columns: 64px 1fr; gap: 10px; }
.ag-troca span { color: var(--_mudo); font-size: 14px; }
.ag-troca s { color: var(--_mudo); }

/* ─── feito ─── */
.ag-feito { display: grid; gap: 18px; position: relative; }
.ag-feito-quando { margin: 0; font: 400 22px/1.2 var(--_serif); display: flex; flex-direction: column; }
.ag-feito-quando b { font: var(--_peso-titulo) clamp(52px, 14vw, 64px)/1 var(--_serif); letter-spacing: -.02em; color: var(--_acento-texto); margin-top: 4px; }
.ag-status { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin: 0; padding: 8px 14px; border-radius: 999px; font-size: 14px; border: 1px solid var(--_borda); color: var(--_mudo); }
.ag-status span { width: 8px; height: 8px; border-radius: 50%; background: var(--ag-pendente, #F5D9A8); animation: ag-respira 1.8s ease-in-out infinite; }
.ag-status.is-ok { color: var(--_ok); border-color: var(--ag-ok-borda, rgba(142, 240, 196, .4)); background: var(--ag-ok-suave, rgba(142, 240, 196, .06)); }
.ag-status.is-ok span { background: var(--_ok); animation: none; box-shadow: 0 0 10px var(--ag-ok-brilho, rgba(142, 240, 196, .8)); }
@keyframes ag-respira { 50% { opacity: .3; } }
/* chegou agora: a mesma linha de varredura do escaneador do hero passa uma vez */
.ag-feito.is-novo::after {
  content: ""; position: absolute; left: -20px; right: -20px; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--_acento) 18%, var(--ag-varre-meio, #fff) 50%, var(--_acento) 82%, transparent);
  box-shadow: 0 0 22px 3px var(--ag-brilho, rgba(127, 216, 255, .5));
  animation: ag-varre 1.1s var(--_ease) forwards;
}
@keyframes ag-varre { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(420px); } }
.ag-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ag-acoes-leves { display: flex; gap: 20px; }
.ag-nota { margin: 0; font-size: 13px; color: var(--_mudo); }

/* ─── rodapé e botões ─── */
.ag-pe {
  display: flex; gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--_borda); background: var(--ag-pe-fundo, rgba(7, 14, 27, .96));
}
.ag-pe > * { flex: 1; }
.ag-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 18px; border-radius: var(--_raio-botao); cursor: pointer;
  font: 600 15px/1.15 var(--_sans); text-align: center;
  border: 1px solid transparent; transition: background .2s var(--_ease), border-color .2s var(--_ease), color .2s var(--_ease);
}
.ag-btn svg { width: 20px; height: 20px; flex: none; }
.ag-btn-cheio { background: var(--_acento); color: var(--_sobre-acento); }
.ag-btn-cheio:hover { background: var(--ag-acento-forte, #A6E4FF); }
.ag-btn-linha { background: transparent; color: var(--_texto); border-color: var(--_linha); }
.ag-btn-linha:hover { border-color: var(--_acento); color: var(--_acento-texto); }
.ag-btn-perigo { background: transparent; color: var(--_coral); border-color: var(--ag-coral-borda, rgba(255, 155, 138, .5)); }
.ag-btn-perigo:hover { background: var(--ag-coral-suave, rgba(255, 155, 138, .08)); }
/* o botão que fecha o agendamento leva o sublinhado de nácar */
.ag-btn-nacar { position: relative; overflow: hidden; }
.ag-btn-nacar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--_nacar); background-size: 220% 100%; animation: ag-nacar 6s linear infinite; }
.ag-btn[disabled] { opacity: .75; cursor: progress; }
/* Continuar do pet antes dos três campos: parece desligado, mas o toque
   mostra o que falta (por isso aria-disabled, e não disabled) */
.ag-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ag-btn-cheio[aria-disabled="true"]:hover { background: var(--_acento); }
.ag-btn:focus-visible, .ag-link:focus-visible, .ag-fechar:focus-visible, .ag-dor:focus-visible, .ag-atalho:focus-visible, .ag-alt:focus-visible, .ag-fichas button:focus-visible {
  outline: 2px solid var(--_foco); outline-offset: 3px;
}
.ag-giro { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ag-giro-trilho, rgba(0, 3, 10, .3)); border-top-color: var(--_sobre-acento); animation: ag-gira .7s linear infinite; }
@keyframes ag-gira { to { transform: rotate(1turn); } }

@media (max-width: 380px) {
  .ag-corpo, .ag-topo { padding-left: 16px; padding-right: 16px; }
  .ag-acoes { grid-template-columns: 1fr; }
  .ag-resumo > div { grid-template-columns: 96px 1fr; }
}

/* ═══════════ prévia do WhatsApp ═══════════ */
dialog.zap {
  padding: 0; border: 1px solid var(--_linha); border-radius: 10px;
  width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  background: var(--_fundo); box-shadow: 0 30px 80px var(--ag-sombra, rgba(0, 0, 0, .55));
}
dialog.zap[open] { display: block; animation: ag-sobe .28s var(--_ease); }
dialog.zap::backdrop { background: var(--ag-veu, rgba(0, 1, 7, .7)); }
.zap-casca { padding: 22px; display: grid; gap: 14px; }
.zap-tag { margin: 0; font: 400 12px/1 var(--_mono); letter-spacing: .08em; color: var(--_acento-texto); text-transform: lowercase; }
.zap-titulo { margin: 0; font: var(--_peso-titulo) 24px/1.15 var(--_serif); }
/* a tela imita o WhatsApp; o padrão é o modo escuro dele */
.zap-tela { border-radius: 8px; overflow: hidden; background: var(--ag-zap-tela, #0B141A); border: 1px solid var(--ag-zap-tela-borda, rgba(255, 255, 255, .06)); }
.zap-para { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ag-zap-topo, #202C33); color: var(--ag-zap-texto, #E9EDEF); font-size: 15px; }
.zap-para small { display: block; color: var(--ag-zap-sub, #8696A0); font-size: 12px; }
.zap-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ag-zap-avatar, radial-gradient(circle at 35% 30%, #7FD8FF, #20405a)); flex: none; }
.zap-bolha { position: relative; margin: 16px 14px 18px auto; max-width: 88%; padding: 9px 12px 22px; border-radius: 8px 0 8px 8px; background: var(--ag-zap-bolha, #005C4B); color: var(--ag-zap-texto, #E9EDEF); font-size: 15px; line-height: 1.45; }
.zap-bolha p { margin: 0; white-space: pre-wrap; }
.zap-hora { position: absolute; right: 10px; bottom: 5px; font-size: 11px; color: var(--ag-zap-hora, rgba(233, 237, 239, .7)); }
.zap-nota { margin: 0; font-size: 14px; color: var(--_mudo); }
.zap-status { margin: 0; min-height: 1em; font-size: 14px; color: var(--_ok); }
.zap-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  dialog.ag[open], dialog.zap[open], .ag-feito.is-novo::after, .ag-dor-pulso, .ag-status span, .ag-esqueleto i, .ag-hora input:checked + span::before, .ag-btn-nacar::after { animation: none !important; }
  .ag-feito.is-novo::after { display: none; }
  .ag-progresso i { transition: none; }
}

/* profissional sem foto: as iniciais na cor dela */
.ag-iniciais {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  background: color-mix(in srgb, var(--cor, var(--_acento)) 20%, var(--ag-iniciais-fundo, #07101E));
  border: 1px solid color-mix(in srgb, var(--cor, var(--_acento)) 55%, transparent);
  color: var(--cor, var(--_acento)); font: 600 15px/1 var(--_sans); letter-spacing: .02em;
}
.ag-rostos .ag-rosto-mini { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--_fundo); font-size: 11px; }
.ag-rostos .ag-rosto-mini + .ag-rosto-mini { margin-left: -12px; }