/* Agenda (Pedido 1), estilo Outlook. Só o desta tela: tokens, .panel, .empty,
   .primary/.secondary e o vocabulário de formulário vêm de style.css. */

.ag-tela{display:flex;flex-direction:column;gap:var(--s3);min-block-size:0}
.ag-barra{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.ag-nav{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.ag-titulo{font-size:16px;margin:0;white-space:nowrap}
.ag-acoes{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-inline-start:auto}
.ag-views{display:flex;gap:2px;border:1px solid var(--line);border-radius:var(--radius);padding:2px;background:var(--paper)}
.ag-views button{padding:6px 12px;font-size:12px}

/* flex:1 nasceu pensando numa grade cujo pai tivesse altura definida (viewport),
   mas `.ag-tela` mora dentro de `#content`, que é bloco comum de altura
   automática: sem parede nenhuma pra crescer, `flex:1 1 0` com
   `min-block-size:0` colapsava esta caixa a ZERO de altura sempre que o
   conteúdo (a LISTA do celular, que não tem altura própria como a grade tem
   via `max-block-size:calc(100dvh...)`) não fosse ele mesmo quem definisse a
   altura. O filho continuava desenhando por cima (overflow visível), só que
   fora da caixa do pai: por isso o rodapé, que vem depois em fluxo normal,
   media a partir do fim da caixa (zero) e caía visualmente sobre os cartões.
   Sem `min-block-size:0`, a caixa não pode encolher abaixo do próprio
   conteúdo (tamanho mínimo automático do item flex), então corpo-tela sempre
   mede pelo menos a altura real do que está dentro. */
.ag-corpo-tela{flex:1 1 0}

/* ─── grade de Dia/Semana ─────────────────────────────────────────────── */
.ag-grade{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
 background:var(--surface);overflow:auto;max-block-size:calc(100dvh - 280px);min-block-size:420px;contain:layout paint}
/* As DUAS linhas de topo (Dia inteiro + cabeçalho dos dias) grudam JUNTAS
   num único sticky. Antes cada uma tinha o PRÓPRIO `position:sticky`, e a
   segunda usava `inset-block-start:28px` fixo, um número que só está certo
   quando a primeira linha mede exatamente 28px de altura, o que ela só faz
   sem nenhum chip de "dia inteiro" (medido no navegador: com pelo menos um
   evento de dia inteiro OU o rótulo quebrando linha, a linha passa de 28px e
   o cabeçalho dos dias, colado 28px abaixo do TOPO da grade, fica desenhado
   por cima da sobra: sobreposição vertical real, confirmada por
   getBoundingClientRect nas duas caixas). Agrupando as duas num wrapper com
   sticky ÚNICO em 0, o cabeçalho dos dias fica sempre logo ABAIXO da linha de
   dia inteiro em fluxo normal, qualquer que seja a altura real dela: não
   depende de nenhum pixel fixo, então nem quantidade de eventos de dia
   inteiro nem tamanho de fonte/idioma futuro voltam a quebrar isto. */
.ag-topo-fixo{position:sticky;inset-block-start:0;z-index:3;background:var(--surface)}
.ag-linha-diainteiro{display:grid;grid-template-columns:74px repeat(var(--ag-dias),minmax(90px,1fr));
 border-block-end:1px solid var(--line)}
.ag-coluna-diainteiro{border-inline-start:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:2px;min-block-size:28px;cursor:pointer}
.ag-chip-diainteiro{display:flex;align-items:center;gap:4px;border-radius:6px;padding:2px 6px;font-size:11px;
 border:1px solid var(--line);background:var(--accent-soft);color:var(--accent-ink);text-align:left;cursor:pointer;width:100%}
.ag-chip-diainteiro.ag-privado{background:var(--paper);color:var(--ink);border-style:dashed}

.ag-cabecalho-dias{display:grid;grid-template-columns:74px repeat(var(--ag-dias),minmax(90px,1fr));
 border-block-end:1px solid var(--line)}
/* O rótulo em si também não pode quebrar linha (fica feio e reduz ainda mais
   a folga da coluna de 74px): fonte menor, sem quebra, com reticências como
   última salvaguarda se um idioma futuro tiver um rótulo mais comprido.
   `scrollWidth` ≤ `clientWidth` medido no navegador confirma que "Dia
   inteiro" cabe inteiro, sem cortar. */
.ag-canto{border-inline-start:1px solid transparent;padding:6px 4px;font-size:11px;color:var(--muted);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}
.ag-dia-topo{padding:6px var(--s2);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;
 align-items:center;font-size:12px;gap:1px}
.ag-dia-topo.ag-hoje{box-shadow:inset 0 -2px 0 var(--accent)}
.ag-dia-topo.ag-hoje strong,.ag-dia-topo.ag-hoje span{color:var(--accent-ink)}
.ag-feriado{color:var(--accent-ink);font-size:10px}

.ag-corpo{display:grid;grid-template-columns:74px repeat(var(--ag-dias),minmax(90px,1fr));position:relative}
.ag-coluna-horas{display:flex;flex-direction:column}
.ag-hora-rotulo{block-size:48px;font-size:10px;color:var(--muted);padding-inline-end:6px;text-align:right;
 border-block-start:1px solid var(--line);box-sizing:border-box}
.ag-hora-rotulo:first-child{border-block-start:none}
.ag-coluna{position:relative;border-inline-start:1px solid var(--line)}
.ag-coluna.ag-hoje{background:color-mix(in srgb,var(--accent-soft) 35%,transparent)}
.ag-slot{block-size:48px;border-block-start:1px solid var(--line);box-sizing:border-box;cursor:pointer}
.ag-slot:first-child{border-block-start:none}
.ag-slot:hover{background:var(--paper)}

.ag-evento{position:absolute;inset-inline:2px;border-radius:6px;border:1px solid var(--line);
 border-inline-start:3px solid var(--accent);background:var(--accent-soft);color:var(--accent-ink);
 padding:3px 6px;font-size:11px;overflow:hidden;cursor:grab;touch-action:pan-y;z-index:1;
 display:flex;flex-direction:column;gap:1px}
.ag-evento:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ag-evento.ag-privado{background:var(--surface);border-inline-start-color:var(--muted)}
.ag-evento.ag-somente-leitura{cursor:pointer}
/* Toque longo armou o arraste: trava a rolagem (a grade já rolou o que
   tinha que rolar por toque simples) e dá um retorno visual do que está
   sendo segurado. */
.ag-evento.ag-arrastando{touch-action:none;cursor:grabbing;box-shadow:var(--sombra-2,0 4px 12px rgba(0,0,0,.18));z-index:5}
.ag-evento-titulo{font-weight:600;line-height:1.25;flex:0 0 auto;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-evento-titulo .icone{vertical-align:-2px;margin-inline-end:2px}
.ag-evento-hora{flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.ag-badge-pendente{position:absolute;inset-block-start:2px;inset-inline-end:2px;inline-size:14px;block-size:14px;
 border-radius:50%;background:var(--accent);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center}
.ag-alca{position:absolute;inset-inline:0;inset-block-end:0;block-size:6px;cursor:ns-resize}

/* ─── grade de Mês ───────────────────────────────────────────────────── */
.ag-mes{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.ag-mes-cabecalho{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-block-end:1px solid var(--line)}
.ag-mes-cabecalho div{padding:6px;text-align:center;font-size:11px;color:var(--muted)}
.ag-mes-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(92px,1fr)}
.ag-mes-celula{border-inline-start:1px solid var(--line);border-block-start:1px solid var(--line);padding:4px;
 display:flex;flex-direction:column;gap:2px;min-inline-size:0;cursor:pointer}
.ag-mes-celula.ag-fora-do-mes{background:var(--paper);color:var(--muted)}
.ag-mes-celula.ag-hoje .ag-mes-numero{background:var(--accent);color:#fff;border-radius:50%}
.ag-mes-numero{font-size:11px;inline-size:20px;block-size:20px;display:flex;align-items:center;justify-content:center}
.ag-mes-itens{display:flex;flex-direction:column;gap:1px;min-inline-size:0}
.ag-chip-mes{display:block;width:100%;text-align:left;font-size:10px;border-radius:4px;padding:1px 4px;
 background:var(--accent-soft);color:var(--accent-ink);border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-chip-mes.ag-privado{background:var(--paper);color:var(--ink)}
.ag-mes-mais{font-size:10px;color:var(--muted);background:none;border:none;text-align:left;padding:0}

/* ─── lista (celular) ────────────────────────────────────────────────── */
.ag-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.ag-lista-feriado{font-size:12px;color:var(--accent-ink);padding:4px 0}
.ag-lista-item{display:flex;flex-direction:column;gap:2px;padding:var(--s3);border:1px solid var(--line);
 border-inline-start:3px solid var(--accent);border-radius:var(--radius);background:var(--surface);cursor:pointer}
.ag-lista-item.ag-privado{border-inline-start-color:var(--muted)}
.ag-lista-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* T4 (parecer rodada 2, 24/09): alternador Lista/Grade da visão Dia do
   celular. A lista não tem grade de horário (arrastar não faz sentido nela);
   a grade já suporta mover por toque longo. */
.ag-alternador-dia{display:flex;justify-content:flex-end;margin-block-end:var(--s2)}
.ag-alternador-dia button{display:inline-flex;align-items:center;gap:6px}

.ag-vazio-icone{color:var(--muted)}

/* ─── janela central de criar/editar/detalhe (R2 item 12, public/janela.js) ─
   O cabeçalho fica preso no alto e as ações no pé da janela: no celular o
   botão Salvar não some embaixo do teclado nem no fim do formulário. */
.ag-janela .ag-form,.ag-janela .ag-detalhe{padding:0 24px}
.ag-janela .ag-form{gap:var(--s2)}
.ag-janela .ag-form label{display:flex;flex-direction:column;gap:4px;margin:0;font-size:12px}
.ag-janela .ag-form textarea{inline-size:100%;min-inline-size:0;box-sizing:border-box}
.ag-janela .ag-form .ag-checkbox{flex-direction:row;align-items:center;gap:8px}
.ag-janela .ag-checkbox input{inline-size:16px;block-size:16px;margin:0;flex:0 0 auto}
.ag-janela .ag-form-cabecalho{position:sticky;top:0;z-index:2;background:var(--surface);padding:16px 0 10px;border-bottom:1px solid var(--line)}
.ag-janela .ag-form-acoes{position:sticky;bottom:0;z-index:2;background:var(--surface);padding:12px 0;border-top:1px solid var(--line);margin-block-start:var(--s2)}
.ag-form,.ag-detalhe{display:flex;flex-direction:column;gap:var(--s2)}
.ag-form-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.ag-form-cabecalho h3{margin:0;font-size:15px}
.ag-form textarea{resize:vertical}
.ag-form-periodo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.ag-form-periodo label{display:flex;flex-direction:column;gap:2px}
.ag-checkbox{display:flex;align-items:center;gap:6px;flex-direction:row}
.ag-participantes{border:1px solid var(--line);border-radius:8px;padding:var(--s2);display:flex;flex-direction:column;gap:4px;
 max-block-size:160px;overflow-y:auto}
.ag-recorrencia{border:1px solid var(--line);border-radius:8px;padding:var(--s2)}
.ag-recorrencia-campos{display:flex;flex-direction:column;gap:var(--s2);margin-block-start:var(--s2)}
.ag-weekdays{display:flex;flex-wrap:wrap;gap:6px;border:none;padding:0;margin:0}
.ag-weekdays legend{font-size:11px;color:var(--muted)}
.ag-form-acoes{display:flex;gap:var(--s2);flex-wrap:wrap;margin-block-start:var(--s2)}
.ag-form-acoes button{flex:1 1 auto}
.ag-escopo{display:flex;flex-direction:column;gap:2px;font-size:11px;flex:1 1 100%}
.ag-confirmar-exclusao{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--ink);
 flex:1 1 100%;background:var(--accent-soft);border-radius:8px;padding:6px 8px}
.ag-confirmar-exclusao button{flex:0 0 auto}
.ag-btn-perigo{border-color:#96271f;color:#96271f}
.ag-escolha{flex:1 1 100%;display:flex;flex-direction:column;gap:var(--s2)}
.ag-escolha-titulo{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.ag-escolha-opcao{display:flex;flex-direction:column;align-items:flex-start;gap:2px;inline-size:100%;min-block-size:56px;margin:0;padding:10px 14px;text-align:start;
 background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;transition:transform .12s}
.ag-escolha-opcao:hover{border-color:var(--accent)}
.ag-escolha-opcao:active{transform:translateY(1px)}
.ag-escolha-opcao strong{font-size:15px}
.ag-escolha-opcao small{font-size:13px;line-height:1.4;letter-spacing:.01em;color:color-mix(in srgb,var(--ink) 72%,var(--surface));font-weight:400}
.ag-escolha-principal{border:1.5px solid var(--accent);box-shadow:0 1px 0 var(--accent-soft)}
.ag-escolha-principal strong{color:var(--accent-ink)}
.ag-escolha-perigo strong{color:#96271f}
.ag-escolha-perigo:hover,.ag-escolha-perigo.ag-escolha-principal{border-color:#96271f}
.ag-escolha-voltar{inline-size:100%;min-block-size:44px;margin:var(--s1) 0 0;background:var(--paper);border-color:transparent;color:var(--ink)}
.ag-form-escolhendo>:not(.ag-form-cabecalho):not(.ag-form-acoes):not(.ag-escolha-resumo):not(.error){display:none}
.ag-form-escolhendo .ag-form-acoes{margin-block-start:0}
.ag-escolha-resumo{display:flex;gap:var(--s2);align-items:flex-start;padding:12px 14px;border-radius:8px;background:var(--accent-soft)}
.ag-escolha-resumo-icone{display:inline-flex;padding-block-start:2px;color:var(--accent)}
.ag-escolha-resumo div{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.ag-escolha-resumo strong{font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.ag-escolha-resumo small{font-size:12px;color:var(--muted)}
.ag-participantes-lista ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:12px}
.ag-resposta{border-radius:4px;padding:0 4px}
.ag-resposta-accepted{color:#2f5f42}
.ag-resposta-declined{color:#96271f}
.ag-resposta-pending{color:var(--muted)}
.ag-resposta-acoes{display:flex;gap:var(--s2)}

.ag-erro{padding:var(--s4);text-align:center}

@media (prefers-reduced-motion:reduce){
 .ag-evento,.ag-escolha-opcao{transition:none}
}

/* Celular: visão padrão é Dia (lista), e a barra empilha para não estourar
   largura. A grade de Semana/Mês, quando escolhida, rola por DENTRO do
   próprio quadro (contain:layout paint acima), nunca a página inteira. */
@media (max-width:760px){
 .ag-confirmar-exclusao button{min-block-size:44px}
 .ag-barra{flex-direction:column;align-items:stretch}
 .ag-acoes{margin-inline-start:0;justify-content:space-between}
 .ag-views{flex:1 1 auto;justify-content:space-between}
 .ag-views button{flex:1}
 .ag-janela .ag-form,.ag-janela .ag-detalhe{padding:0 16px}
 .ag-janela .ag-form-cabecalho{padding-top:calc(12px + env(safe-area-inset-top))}
 .ag-janela .ag-form-acoes{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
 .ag-form-periodo{grid-template-columns:1fr}
 /* Pergunta de escopo no celular: resumo no alto, escolhas presas embaixo, perto do polegar. */
 .ag-janela .janela-corpo:has(.ag-form-escolhendo){display:flex;flex-direction:column}
 dialog.janela-central .janela-corpo form.ag-form-escolhendo{flex:1 0 auto}
 .ag-form-escolhendo .ag-form-acoes{margin-block-start:auto;padding-block-start:var(--s3);border-block-start:1px solid var(--line)}
}