/* ==========================================================================
   /agenda/ — a lista de eventos

   Carregada só na agenda. Herda tokens, tipografia, .chip, .tag, .empty e .btn
   do app.css; aqui mora só o que é da agenda.
   ========================================================================== */

/* ------------------------------- os filtros ------------------------------- */

/*
 * O PAINEL EXISTE PARA SEPARAR, e a falta dele era o problema que o dono viu:
 * quatro linhas de pílulas idênticas empilhadas soltas na página, sem nada
 * dizendo onde os filtros terminam e os resultados começam. Um bloco com fundo
 * e borda responde isso sem uma palavra.
 */
.ag-filters{margin:20px 0 0;padding:14px 16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);
  display:flex;flex-direction:column;gap:12px}

/* As escolhas binárias: três controles, para sempre. */
.ag-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/*
 * O separador diz "aqui muda de assunto" sem gastar um rótulo.
 *
 * Os dois primeiros chips são tempo e o terceiro é preço. Sem a marca eles leem
 * como uma lista só de três opções que se excluem, que é o contrário do que
 * fazem - e foi exatamente o que aconteceu quando "apenas gratuitos" morava na
 * linha rotulada "Quando".
 */
.ag-sep{width:1px;height:22px;background:var(--line-2);margin:0 4px;flex:none}

/*
 * MENU, E NÃO PÍLULA, para o que cresce.
 *
 * Tipo já são nove. Cidade são duas hoje porque só duas têm evento: o
 * vocabulário tem quarenta e sete e a dívida registrada prevê 8.545. Uma parede
 * de pílulas com oito mil botões não é um filtro, é um obstáculo, e no celular
 * seria uma tela inteira de rolagem antes do primeiro evento.
 */
.ag-pick{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0;
  padding-top:12px;border-top:1px solid var(--line)}
.ag-field{display:flex;flex-direction:column;gap:5px;margin:0;flex:1 1 180px;min-width:0}
.ag-field label{font-size:12.5px;font-weight:700;color:var(--muted);
  letter-spacing:.03em;text-transform:uppercase}
/*
 * SÓ LAYOUT AQUI. A cor, a borda, o raio, o corpo e o foco vêm de
 * `.input,select.input` no app.css - o mesmo controle da busca de
 * profissionais. Esta regra redeclarava os cinco com valores diferentes, e o
 * mesmo `select.input` ficava com duas caras em duas telas do mesmo site, que
 * é exatamente o que o comentário do template diz querer evitar. O
 * `:focus-visible` repetia letra por letra o global. Achado por
 * `code-review`, 2026-09-18.
 *
 * `min-height` fica: 44px é alvo de toque, não estilo.
 */
.ag-field .input{width:100%;min-height:44px;cursor:pointer}

.ag-go{min-height:44px;flex:none}
/*
 * Ele mora fora do formulário (ver o template), então não é item de flex de
 * ninguém: o espaçamento é margem, não `gap`.
 */
.ag-clear{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;
  font-size:13.5px;color:var(--muted);padding:0 4px}
.ag-clear:hover{color:var(--petrol)}

@media (max-width:560px){
  .ag-pick{flex-direction:column;align-items:stretch}
  .ag-go{width:100%}
  .ag-clear{width:100%;justify-content:center}
}

/* --------------------------- a linha dos resultados ----------------------- */

.ag-resbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin:22px 0 0}
.ag-resbar .res-count{margin:0}

/*
 * O ALTERNADOR É UM GRUPO EMENDADO, e não duas pílulas soltas.
 *
 * Ele não filtra nada: filtro muda QUAIS eventos aparecem, este muda COMO eles
 * aparecem. Desenhado igual aos filtros, virava a quinta linha de pílulas
 * idênticas e pedia para ser lido duas vezes. Emendado, é a forma que todo
 * mundo já conhece de "escolha um destes dois".
 */
.ag-views{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;
  padding:3px;background:var(--bg-2);flex:none}
.ag-view{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted);
  text-decoration:none;min-height:38px;transition:background .15s var(--ease),color .15s var(--ease)}
.ag-view svg{width:15px;height:15px}
.ag-view:hover{color:var(--petrol)}
.ag-view.on{background:var(--petrol);color:#fff;box-shadow:var(--shadow-1)}

@media (max-width:480px){
  .ag-resbar{flex-direction:column;align-items:stretch}
  .ag-views{width:100%}
  .ag-view{flex:1;justify-content:center}
}

/* ------------------------------ o calendário ------------------------------ */

/*
 * UMA GRADE SÓ, EM TODA LARGURA.
 *
 * Não existe "versão de celular" desta grade, e o motivo é a decisão que a
 * governa: se a célula nunca carrega título, ela não precisa de mais espaço no
 * desktop. A diferença entre 360px e a tela grande passa a ser tamanho de
 * célula e abreviação do cabeçalho — não estrutura. Isso elimina dois arranjos
 * para construir, estilizar, testar e manter em sincronia, que é a coisa mais
 * cara que esta fatia poderia ter feito.
 */

.ag-cal{margin:16px 0 4px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px}

.ag-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 10px}
.ag-cal-title{margin:0;font-size:17px;text-align:center;flex:1}
/* Only the month: "capitalize" printed "Outubro De 2026" (QA 2026-09-25). */
.ag-cal-title::first-letter{text-transform:uppercase}

/* 44px de alvo nas setas, que é o mínimo que este projeto usa como orçamento. */
.ag-cal-nav{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--petrol);background:var(--card)}
.ag-cal-nav:hover{border-color:var(--petrol);background:var(--petrol-wash)}
.ag-cal-nav svg{width:18px;height:18px}

.ag-cal-grid{width:100%;border-collapse:collapse;table-layout:fixed}
.ag-cal-grid th{padding:0 0 6px;font-size:11.5px;font-weight:700;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;text-align:center}
.ag-cal-grid th abbr{text-decoration:none;border:0}

/*
 * `table-layout:fixed` mais sete colunas iguais é o que impede a rolagem
 * horizontal a 360px: sem ele, uma célula com contagem de dois dígitos alarga a
 * coluna e a tabela empurra a página.
 */
.ag-day{padding:2px;text-align:center;vertical-align:middle}
.ag-day a,
.ag-day > .ag-day-n{display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:44px;border-radius:var(--r-sm);
  color:var(--ink);text-decoration:none;font-size:14px}

.ag-day.is-out .ag-day-n{color:var(--faint);opacity:.45}

/* Hoje é um contorno, não um bloco de cor: a régua da grade continua legível. */
.ag-day.is-today a,
.ag-day.is-today > .ag-day-n{box-shadow:inset 0 0 0 1.5px var(--petrol-soft)}

.ag-day.has-events a{background:var(--petrol-wash);font-weight:650;
  color:var(--petrol-deep)}
.ag-day.has-events a:hover{background:var(--petrol-soft)}
.ag-day.is-on a{background:var(--petrol);color:#fff}

.ag-day-n{line-height:1.1}

/*
 * A CONTAGEM, e nunca o título.
 *
 * Ponto e número ocupam o mesmo pixel e o número diz mais: "tem alguma coisa"
 * contra "tem três coisas". Título dentro da célula renderizaria conteúdo duas
 * vezes, truncaria para nada em 48px, e arrastaria atrás de si o "+N mais" —
 * que é popover, que é componente com strings em JavaScript, que é o que a CSP
 * deste site proíbe.
 */
.ag-day-c{font-size:11px;font-weight:700;line-height:1;margin-top:2px;
  color:var(--petrol)}
.ag-day.is-on .ag-day-c{color:rgba(255,255,255,.9)}

.ag-cal-clear{margin:10px 0 0;text-align:center}
.ag-cal-clear[hidden]{display:none}

@media (max-width:480px){
  .ag-cal{padding:10px}
  .ag-day a,.ag-day > .ag-day-n{font-size:13px}
  .ag-cal-title{font-size:15.5px}
}

/* ------------------------- em destaque (2026-09-24) ------------------------ */

/* A faixa paga, acima da lista: título, a linha que diz que é espaço pago, e
   os cartões com o filete. Moldura branca e sem filete próprio: o amarelo é
   dos cartões, e dois filetes empilhados viram faixa (CLAUDE.md: amarelo é
   geometria, nunca superfície). Fica fora da .ev-list de propósito (ver o
   agenda-list.php). */
.ev-featured{margin:18px 0 6px;padding:14px 16px 16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md)}
.ev-featured-title{margin:0;font-size:17px}
.ev-featured-note{margin:2px 0 12px;font-size:12.5px;color:var(--muted)}
.ev-featured-list{display:grid;gap:12px}

/* ---------------------------- vista mapa (2026-09-25) ---------------------- */

/* The map view: the events in a column on the left, the map on the right.
   Without JavaScript (.is-live never arrives) it is a plain list, one column:
   the map box stays hidden and so does its credit. On a phone the map goes on
   top and the list under it, the page scrolling as one. Tokens only. */
.agm{margin:16px 0 8px}
.agm-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.agm-item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color .15s ease,box-shadow .15s ease}
.agm-link{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start;
  padding:10px 12px;color:inherit;text-decoration:none;border-radius:inherit}
.agm-link:focus-visible{outline:3px solid var(--coral-deep);outline-offset:2px}
.agm-when{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:7px 4px;border-radius:var(--r-sm);background:var(--petrol-wash);
  border:1px solid var(--petrol-soft);min-height:52px}
.agm-day{font-family:var(--font-display);font-weight:var(--display-weight);font-size:21px;
  line-height:1;color:var(--petrol-deep)}
.agm-month{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--petrol);margin-top:3px}
.agm-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.agm-title{font-weight:700;font-size:15px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.agm-meta{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.agm-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
.agm-tags:empty{display:none}
.agm-tags .tag{font-size:11.5px;padding:2px 8px}
.agm-price{font-size:12.5px;font-weight:600;color:var(--ink)}
.agm-flag{font-size:12px;font-weight:700;color:var(--petrol)}
.agm-flag-now{color:var(--ok)}
.agm-flag-bad{color:var(--bad)}
.agm-nopin{font-size:12px;color:var(--faint)}
.agm-item.is-cancelled .agm-title{text-decoration:line-through;color:var(--muted)}
.agm-item.is-cancelled .agm-when{background:var(--bg-2);border-color:var(--line)}
.agm-item.has-pin .agm-link{cursor:pointer}
.agm-item.is-hot,.agm-item.has-pin:hover{border-color:var(--petrol);box-shadow:var(--shadow-2)}
.agm-item.is-active{border-color:var(--petrol);box-shadow:0 0 0 2px var(--petrol-soft)}
.agm-note{margin:0 0 12px;padding:12px 14px;border-radius:var(--r-md);background:var(--bg-2);
  font-size:14px;color:var(--muted)}

/* The map. Its own stacking context: Leaflet's panes run to z-index 1000 and
   would otherwise paint over the sticky header while the page scrolls. */
.agm-stage{display:none}
.agm.is-live .agm-stage{display:block}
.agm-map{position:relative;z-index:0;isolation:isolate;height:420px;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2)}
.agm-map[hidden]{display:none}
/* The site header (66px + 1px rule) is sticky: scrollIntoView would land the
   map under it without this. The same 82px the sticky column below uses. */
.agm-map{scroll-margin-top:82px}
.agm-credit{margin:6px 0 0;font-size:12px;color:var(--muted)}
.agm-credit a{color:inherit}

/* A pin under the pointer, or the pair of a list item under it, lifts. */
.agm-pin{transition:transform .15s ease}
.agm-pin.is-hot{transform-origin:13px 31px}
.agm-pin.is-hot .br-pin-body{background:var(--petrol-deep);box-shadow:var(--shadow-3)}
.br-cluster.is-hot .br-cluster-disc{transform:scale(1.1)}

/* The popup: the event's small card. */
.agm-popup .leaflet-popup-content-wrapper{padding:0;border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-3)}
.agm-popup .leaflet-popup-content{margin:0;width:260px!important;font-family:"Inter",sans-serif;
  font-size:13.5px;line-height:1.45;color:var(--ink)}
.agm-pop-ph{aspect-ratio:16/9;background:var(--bg-2);overflow:hidden}
.agm-pop-ph img{display:block;width:100%;height:100%;object-fit:cover}
.agm-pop-body{padding:12px 14px 14px}
/* Scoped under .agm-pop on purpose: leaflet.css gives every
   `.leaflet-popup-content p` a 1.3em margin, and that beats a bare class. It
   was adding ~90px, enough to make the card taller than the map on a phone. */
.agm-pop .agm-pop-kind{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--petrol)}
.agm-pop .agm-pop-title{margin:0 0 8px;font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:17px;line-height:1.25;color:var(--ink)}
.agm-pop .agm-pop-row{display:flex;gap:7px;align-items:flex-start;margin:0 0 5px}
.agm-pop-row svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--petrol)}
.agm-pop-price{font-weight:600}
.agm-pop .agm-pop-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:10px 0 0}
.agm-popup .agm-pop-actions .btn{color:#fff}
.agm-pop-go{color:var(--petrol);font-weight:600;font-size:13px}
.agm-popup a.leaflet-popup-close-button{top:6px;right:6px;width:24px;height:24px;line-height:22px;
  border-radius:50%;background:var(--card);color:var(--ink);box-shadow:var(--shadow-1)}

/* Two columns from 900px: the list on the left, scrolling inside itself; the
   map on the right, as tall as the window under the sticky header allows. */
@media (min-width:900px){
  .agm.is-live{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:18px;align-items:start}
  .agm.is-live .agm-side{order:0}
  .agm.is-live .agm-stage{order:1;position:sticky;top:82px}
  .agm.is-live .agm-list{max-height:clamp(460px,calc(100vh - 150px),760px);overflow-y:auto;
    padding-right:4px;overscroll-behavior:contain}
  .agm-map{height:clamp(460px,calc(100vh - 150px),760px)}
}
/* A phone: the map first, then the list, the page scrolling as one. */
@media (max-width:899px){
  .agm.is-live{display:flex;flex-direction:column;gap:14px}
  .agm.is-live .agm-stage{order:-1}
  .agm-map{height:min(62vh,480px)}
  /* A shorter photo, so the card AND its pin fit the phone map together. */
  .agm-pop-ph{aspect-ratio:3/1}
}