/* Google Agenda dentro da Agenda: botão do cabeçalho, faixa de decisão, janela
   central, diálogo de cópias e marca discreta nos compromissos. Só tokens do
   sistema (style.css). Animação só em transform e opacity, uma vez, sem laço;
   style.css já zera animações em prefers-reduced-motion. */

.agg-slot,.agg-botao-slot{display:contents}
/* style.css anima background em todo botão; aqui só transform (regra de movimento). */
.agg-botao,.agg-faixa button,dialog.agg-janela button{transition:transform var(--dur-1)}
.agg-so-leitor{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ─── botão e selo ───────────────────────────────────────────────────── */
.agg-botao{display:inline-flex;align-items:center;gap:8px;min-block-size:40px;padding-block:8px;margin:0}
.agg-selo{display:inline-grid;place-items:center;min-inline-size:20px;block-size:20px;padding:0 6px;border-radius:10px;
 background:var(--accent-ink);color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}

/* ─── faixa fina de decisão pendente ─────────────────────────────────── */
.agg-faixa{display:flex;align-items:center;gap:var(--s3);padding:6px 6px 6px var(--s3);min-block-size:44px;
 background:var(--aviso-soft);color:var(--aviso);border:1px solid color-mix(in srgb,var(--aviso) 28%,transparent);border-radius:var(--radius)}
.agg-faixa-icone{display:inline-flex;flex:none}
.agg-faixa-texto{flex:1 1 auto;min-inline-size:0;font-size:13px;font-weight:600;color:var(--ink)}
.agg-faixa button{flex:none;margin:0;min-block-size:36px}

/* ─── janela ─────────────────────────────────────────────────────────── */
dialog.agg-janela .janela-corpo{display:flex;flex-direction:column;min-block-size:min(560px,78dvh)}
dialog.agg-janela-copias .janela-corpo{min-block-size:0}
.agg-topo{position:sticky;inset-block-start:0;z-index:2;display:flex;align-items:center;gap:var(--s2);
 padding:16px 24px 12px;background:var(--surface);border-block-end:1px solid var(--line)}
.agg-titulo{flex:1 1 auto;min-inline-size:0;margin:0;font-family:var(--display);font-size:18px;font-weight:600;overflow-wrap:anywhere}
.agg-titulo:focus{outline:none}
.agg-topo .icone-botao{inline-size:44px;block-size:44px;margin:0}
.agg-vista{flex:1 0 auto;display:flex;flex-direction:column}
.agg-entra{animation:agg-entra var(--dur-2) var(--ease-out)}
@keyframes agg-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.agg-vista-corpo{flex:1 0 auto;display:flex;flex-direction:column;gap:var(--s4);padding:20px 24px}
.agg-vista-corpo h3{margin:0;font-size:16px}
.agg-texto{margin:0;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.agg-muted{color:var(--muted);font-size:13px}

/* conta */
.agg-conta{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);flex-wrap:wrap}
.agg-conta-icone{display:grid;place-items:center;flex:none;inline-size:36px;block-size:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink)}
.agg-conta-texto{display:flex;flex-direction:column;gap:2px;min-inline-size:0;flex:1 1 160px}
.agg-email{font-size:14px;overflow-wrap:anywhere}
.agg-conta-texto small{color:var(--muted);font-size:12px}
.agg-pilula{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.agg-ponto{inline-size:8px;block-size:8px;border-radius:50%;background:var(--muted)}
.agg-pilula-ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}.agg-pilula-ok .agg-ponto{background:var(--ok)}
.agg-pilula-aviso{background:var(--aviso-soft);color:var(--aviso);border-color:color-mix(in srgb,var(--aviso) 25%,transparent)}.agg-pilula-aviso .agg-ponto{background:var(--aviso)}
.agg-pilula-erro{background:var(--erro-soft);color:var(--erro);border-color:color-mix(in srgb,var(--erro) 25%,transparent)}.agg-pilula-erro .agg-ponto{background:var(--erro)}
.agg-pilula-info{background:var(--accent-soft);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}.agg-pilula-info .agg-ponto{background:var(--accent)}

/* não conectado */
.agg-explica{display:flex;flex-direction:column;gap:var(--s3)}
.agg-passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.agg-passos li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s3);font-size:14px;line-height:1.5;align-items:start}
.agg-passos .icone{color:var(--accent-ink);margin-block-start:2px}
.agg-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0;font-size:13px}
.agg-links a{color:var(--accent-ink);min-block-size:44px;display:inline-flex;align-items:center}

/* prévia */
.agg-previa{display:flex;flex-direction:column;gap:var(--s3)}
.agg-numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin:0}
.agg-numeros div,.agg-metrica{display:flex;flex-direction:column;gap:4px;padding:var(--s3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-inline-size:0}
.agg-numeros dt,.agg-metrica dt{font-size:12px;color:var(--muted)}
.agg-numeros dd,.agg-metrica dd{margin:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.agg-num,.agg-metrica dd{font-variant-numeric:tabular-nums}
.agg-numeros dd.agg-num{font-size:22px;font-family:var(--display)}
.agg-validade{margin:0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.agg-validade-fim{color:var(--aviso);font-weight:600}

/* sincronizando */
.agg-sync{display:flex;flex-direction:column;gap:var(--s3)}
.agg-metricas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin:0}
.agg-metrica dd{font-size:18px;font-family:var(--display)}
.agg-metrica-aviso{background:var(--aviso-soft);border-color:color-mix(in srgb,var(--aviso) 30%,transparent)}
.agg-metrica-aviso dd{color:var(--aviso)}

/* aviso, vazio, erro, carregando */
.agg-aviso{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--s2);padding:var(--s3);border-radius:var(--radius);font-size:13px;line-height:1.45;border:1px solid var(--line)}
.agg-aviso .icone{margin-block-start:2px}.agg-aviso p{margin:2px 0 0;overflow-wrap:anywhere}.agg-aviso strong{display:block}
.agg-aviso-aviso{background:var(--aviso-soft);color:var(--ink);border-color:color-mix(in srgb,var(--aviso) 30%,transparent)}.agg-aviso-aviso .icone{color:var(--aviso)}
.agg-aviso-erro{background:var(--erro-soft);color:var(--ink);border-color:color-mix(in srgb,var(--erro) 30%,transparent)}.agg-aviso-erro .icone{color:var(--erro)}
.agg-aviso-info{background:var(--accent-soft);color:var(--ink);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}.agg-aviso-info .icone{color:var(--accent-ink)}
.agg-vazio{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center;padding:var(--s6) var(--s4);color:var(--muted);flex:1 0 auto;justify-content:center}
.agg-vazio h3{margin:0;color:var(--ink)}.agg-vazio p{margin:0;font-size:14px}.agg-vazio .icone{color:var(--ok)}
.agg-erro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding:20px 24px}
.agg-erro p{margin:0;font-size:14px;color:var(--erro)}
.agg-carregando{display:flex;flex-direction:column;gap:var(--s4);padding:20px 24px;flex:1 0 auto}
.agg-bloco{display:block;border-radius:var(--radius);background:var(--line);opacity:.5}
.agg-bloco-a{block-size:64px}.agg-bloco-b{block-size:132px}.agg-bloco-c{block-size:56px}

/* decisões, listas */
.agg-decidir{display:flex;flex-direction:column;gap:var(--s2)}
.agg-decidir h3{font-size:13px;color:var(--muted);font-weight:600;text-transform:none}
.agg-decidir ul,.agg-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.agg-linha{display:flex;align-items:center;gap:var(--s3);inline-size:100%;min-block-size:56px;margin:0;padding:var(--s3) var(--s4);text-align:start;
 background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);transition:transform var(--dur-1)}
.agg-linha:active{transform:translateY(1px)}
.agg-linha:hover{border-color:var(--accent);filter:none}
.agg-linha .icone{flex:none;color:var(--muted)}
.agg-linha-texto{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-inline-size:0}
.agg-linha-texto strong{font-size:14px;overflow-wrap:anywhere}.agg-linha-texto small{color:var(--muted);font-size:12px;font-weight:400}
.agg-candidato{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.agg-candidato strong{font-size:14px;overflow-wrap:anywhere}.agg-candidato small{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.agg-orfa{padding:0 24px 20px}

/* conflito: Painel | Google campo a campo */
.agg-campo{display:flex;flex-direction:column;gap:var(--s2)}
.agg-campo h4{margin:0;font-size:12px;color:var(--muted);font-weight:600}
.agg-versoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.agg-versao{display:flex;flex-direction:column;gap:4px;padding:var(--s3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-inline-size:0}
.agg-versao p{margin:0;font-size:14px;line-height:1.45;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.agg-versao-nome{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:12px;font-weight:600;color:var(--muted)}
.agg-versao-nome em{font-style:normal;font-weight:600;font-size:11px;color:var(--ok);background:var(--ok-soft);border-radius:999px;padding:1px 8px}
.agg-versao-uso{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:color-mix(in srgb,var(--ok-soft) 55%,var(--surface))}
.agg-confirma{padding:var(--s3) var(--s4);border-radius:var(--radius);background:var(--aviso-soft);border:1px solid color-mix(in srgb,var(--aviso) 30%,transparent)}
.agg-confirma p{margin:4px 0 0;font-size:13px}
.agg-consequencias{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:var(--s2);font-size:14px;line-height:1.5}

/* rodapé de ação, sempre à vista (nunca sob o teclado virtual) */
.agg-rodape{position:sticky;inset-block-end:0;z-index:2;display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end;
 padding:12px 24px;background:var(--surface);border-block-start:1px solid var(--line)}
.agg-acao{min-block-size:44px;margin:0}
.agg-perigo{border-color:var(--erro)!important;color:var(--erro)!important}
.agg-desconectar{min-block-size:44px;margin:0}
/* Desconectar é a saída: em vermelho, sem moldura, longe da ação principal */
.agg-perigo-texto{background:transparent!important;border-color:transparent!important;color:var(--erro)!important;order:-1;margin-inline-end:auto}
.agg-perigo-texto:hover{background:var(--erro-soft)!important}
/* Para decidir: tom de atenção, distinto dos cartões de número */
.agg-decidir h3{display:flex;align-items:center;gap:var(--s2);color:var(--ink)}
.agg-decidir-total{display:inline-grid;place-items:center;min-inline-size:20px;block-size:20px;padding:0 6px;border-radius:999px;background:var(--aviso);color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.agg-decidir .agg-linha{background:color-mix(in srgb,var(--aviso-soft) 70%,var(--surface));border-color:color-mix(in srgb,var(--aviso) 35%,var(--line));border-inline-start:4px solid var(--aviso)}
.agg-decidir .agg-linha .icone{color:var(--aviso)}

/* diálogo de cópias */
.agg-copias{display:flex;flex-direction:column;gap:var(--s3);padding:24px}
.agg-copias h3{margin:0;font-size:16px;overflow-wrap:anywhere}
.agg-copias-acoes{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}

/* marca "Google" nos compromissos */
.agg-marca{display:inline-flex;align-items:center;gap:3px;align-self:flex-start;font-size:10px;font-weight:600;line-height:1;white-space:nowrap;
 color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px 6px}
.agg-marca .icone{flex:none}
.agg-marca-atualizando{border-style:dashed}
.agg-marca-atualizando .icone{opacity:.6}
.ag-nota-serie{margin:0;font-size:12px}
.agg-marca-enviado{color:var(--ok);background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.agg-marca-aviso{color:var(--aviso);background:var(--aviso-soft);border-color:color-mix(in srgb,var(--aviso) 30%,transparent)}
.agg-marca-icone{padding:2px 3px;margin-inline-start:4px;vertical-align:middle}
.ag-evento .agg-marca{position:absolute;inset-block-start:2px;inset-inline-end:3px;z-index:1}
.ag-evento:has(.agg-marca) .ag-evento-titulo{padding-inline-end:18px}
.ag-grade-dia .ag-evento .agg-marca-icone .agg-so-leitor{position:static;inline-size:auto;block-size:auto;overflow:visible;clip-path:none;margin-inline-start:3px}
.ag-grade-dia .ag-evento:has(.agg-marca) .ag-evento-titulo{padding-inline-end:72px}
.ag-lista-item .agg-marca{margin-block-start:4px}
.ag-chip-mes .agg-marca-icone{background:transparent;border:0;padding:0;margin-inline-start:3px}
.agg-detalhe-marca{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:0}
.agg-detalhe-marca .agg-marca{align-self:center}

@media(max-width:760px){
 .agg-botao{min-block-size:44px;flex:1 1 100%;justify-content:center}
 .agg-topo{padding:calc(12px + env(safe-area-inset-top)) 16px 12px}
 .agg-vista-corpo,.agg-carregando,.agg-erro{padding:16px}
 .agg-orfa{padding:0 16px 16px}
 .agg-numeros{grid-template-columns:minmax(0,1fr)}
 .agg-numeros div{flex-direction:row;justify-content:space-between;align-items:baseline;gap:var(--s3)}
 .agg-numeros dd{text-align:end}
 .agg-versoes{grid-template-columns:minmax(0,1fr)}
 .agg-rodape{flex-direction:column;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
 .agg-rodape button{inline-size:100%}
 .agg-perigo-texto{order:1;margin-inline-end:0}
 .agg-faixa{align-items:center}
 .agg-faixa button{min-block-size:44px}
 .agg-copias{padding:16px}
 .agg-sync{gap:var(--s4)}
 .agg-metrica{padding-block:var(--s4)}
 .agg-copias-acoes{flex-direction:column}.agg-copias-acoes button{inline-size:100%}
 dialog.formulario-modal.janela-central.agg-janela-copias{width:calc(100vw - 32px);max-width:none;height:fit-content;min-height:0;max-height:calc(100dvh - 32px);border-radius:12px}
}
@media(prefers-reduced-motion:reduce){.agg-entra{animation:none}.agg-linha{transition:none}}

/* ─── progresso real e expectativa ───────────────────────────────────── */
.agg-preparo,.agg-envio{display:flex;flex-direction:column;gap:var(--s2)}
.agg-preparo h3{margin:0;font-size:16px}
.agg-progresso{position:relative;block-size:8px;border-radius:999px;background:color-mix(in srgb,var(--line) 70%,var(--paper));overflow:hidden}
.agg-progresso-feito{position:absolute;inset:0;background:var(--accent);border-radius:inherit;transform-origin:left center;transition:transform var(--dur-3) var(--ease-out)}
.agg-progresso-legenda{margin:0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.agg-etapas{list-style:none;margin:var(--s1) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.agg-etapa{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--s2);align-items:center;font-size:14px;line-height:1.4}
.agg-etapa-feita{color:var(--ink)}.agg-etapa-feita .icone{color:var(--ok)}
.agg-etapa-atual{color:var(--ink);font-weight:600}
.agg-etapa-futura{color:var(--muted)}
.agg-etapa-marca{inline-size:10px;block-size:10px;margin-inline:3px;border-radius:999px;border:2px solid var(--line);box-sizing:border-box}
.agg-etapa-atual .agg-etapa-marca{border-color:var(--accent);background:var(--accent-soft)}
.agg-direcao dd{font-size:15px;font-family:inherit}
.agg-direcao small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.agg-aviso-ok{background:var(--ok-soft);color:var(--ink);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}.agg-aviso-ok .icone{color:var(--ok)}
.agg-confirmacao{animation:agg-confirma var(--dur-2) var(--ease-out) both}
@keyframes agg-confirma{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.agg-progresso-feito{transition:none}.agg-confirmacao{animation:none}}