/**
 * O calendário vestido com o design system.
 *
 * O FullCalendar traz CSS próprio e um conjunto de variáveis `--fc-*`. Em vez de
 * sobrescrever regra por regra — que quebraria na primeira atualização dele —,
 * aqui se **remapeiam as variáveis dele para os tokens do kit**. Trocar a paleta
 * do núcleo repinta o calendário junto, sem tocar neste arquivo.
 */
.a12-cal {
  --fc-border-color: var(--e-global-color-370a0d0);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--e-global-color-a12superficiesutil);
  --fc-today-bg-color: var(--e-global-color-a12superficiesutil);
  --fc-button-bg-color: var(--e-global-color-a12marcaescura);
  --fc-button-border-color: var(--e-global-color-a12marcaescura);
  --fc-button-hover-bg-color: var(--e-global-color-a12marca);
  --fc-button-hover-border-color: var(--e-global-color-a12marca);
  --fc-button-active-bg-color: var(--e-global-color-a12marca);
  --fc-button-active-border-color: var(--e-global-color-a12marca);
  --fc-event-text-color: #fff;
  /* o fundo de toda barra, escuro o bastante para texto branco */
  --a12-barra: var(--e-global-color-a12marcaescura);
  font-family: var(--e-global-typography-text-font-family, inherit);
}

/**
 * **A cor não distingue mais o tipo — a faixa lateral distingue.**
 *
 * Medido na primeira versão: texto branco sobre `a12marca` dá 3,68:1 e sobre
 * `a12marcamedia` dá 2,06:1. Os dois reprovam os 4,5:1 exigidos, e não é
 * acidente: um token de marca é piso de **componente** (3:1), não suporte de
 * texto. Pintar a barra com o tom claro para diferenciar o tipo trocava
 * legibilidade por decoração.
 *
 * Agora toda barra tem o mesmo fundo escuro e o tipo aparece na **faixa de 4px
 * à esquerda** — onde a cor não precisa carregar texto. E, porque cor sozinha
 * nunca é informação suficiente (WCAG 1.4.1), o tipo também vem escrito no
 * rótulo da barra e no painel.
 */
.a12-cal .fc-event {
  background: var(--a12-barra);
  border: 0;
  border-left: 4px solid var(--e-global-color-a12superficiesutil);
  cursor: pointer;
}
.a12-cal .a12-ev--missao   { border-left-color: #fff; }
.a12-cal .a12-ev--pre      { border-left-color: var(--e-global-color-a12marcamedia); }
.a12-cal .a12-ev--pos      { border-left-color: var(--e-global-color-a12marca); }
.a12-cal .a12-ev--romaria  { border-left-color: var(--e-global-color-accent, #e8b931); }
.a12-cal .a12-ev--retiro   { border-left-color: var(--e-global-color-a12superficiesutil); }
.a12-cal .a12-ev--encontro { border-left-color: var(--e-global-color-secondary, #9ad1c0); }
.a12-cal .a12-ev--outro    { border-left-color: var(--e-global-color-370a0d0); }

/**
 * O título é mais largo que a barra e vazava sobre a célula vizinha.
 *
 * **O corte precisa ser na barra, não no título.** Medido: a barra tem 154px e
 * o `.fc-event-main` dentro dela tem 329px com `overflow: visible` — o
 * `fc-sticky` que o FullCalendar põe no título o faz escapar do pai. Cortar só
 * em `.fc-event-title` não adiantava, porque quem transborda é o contêiner
 * acima dele.
 */
.a12-cal .fc-event,
.a12-cal .fc-event-main,
.a12-cal .fc-event-main-frame,
.a12-cal .fc-event-title-container {
  overflow: hidden;
}
.a12-cal .fc-event-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a12-cal .fc-daygrid-event {
  min-height: 24px;            /* alvo de clique: WCAG 2.5.8 pede 24×24 */
  display: flex;
  align-items: center;
  padding: 2px 8px;
  margin: 1px 0;
  font-size: .86rem;
  border-radius: 3px;
}
.a12-cal .fc-event:focus-visible {
  outline: 3px solid var(--e-global-color-a12marcaescura);
  outline-offset: 2px;
}

.a12-cal .fc .fc-toolbar-title { font-size: 1.25rem; font-weight: 600; }
.a12-cal .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 12px; }
.a12-cal .fc .fc-button { text-transform: none; font-weight: 600; box-shadow: none; }
.a12-cal .fc .fc-button:focus-visible {
  outline: 3px solid var(--e-global-color-a12marca);
  outline-offset: 2px;
}
.a12-cal .fc .fc-col-header-cell-cushion { padding: 8px 4px; font-weight: 600; }
.a12-cal .fc .fc-daygrid-day-number { padding: 6px 8px; }

/* ── a barra de tipos: legenda e filtro ──────────────────────────────────── */
.a12-cal__filtros {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 14px;
}
/**
 * **Botão desligado precisa parecer desligado sem depender da cor.** Opacidade
 * sozinha não basta — quem não distingue o verde veria dois botões iguais. Aqui
 * o estado muda três coisas: o preenchimento, a borda e o risco sobre o rótulo.
 */
.a12-cal__filtro {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 4px 12px 4px 8px;
  border: 1px solid var(--e-global-color-370a0d0) !important;
  border-radius: 16px;
  background: var(--e-global-color-a12superficiesutil) !important;
  color: var(--e-global-color-a12marcaescura) !important;
  font-size: .85rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; box-shadow: none;
}
.a12-cal__filtro i {
  width: 4px; height: 16px; border-radius: 2px; display: block;
  background: currentColor;
}
.a12-cal__filtro.a12-ev--missao i   { background: var(--e-global-color-a12marcaescura); }
.a12-cal__filtro.a12-ev--pre i      { background: var(--e-global-color-a12marcamedia); }
.a12-cal__filtro.a12-ev--pos i      { background: var(--e-global-color-a12marca); }
.a12-cal__filtro.a12-ev--romaria i  { background: var(--e-global-color-accent, #e8b931); }
.a12-cal__filtro.a12-ev--retiro i   { background: var(--e-global-color-text); }
.a12-cal__filtro.a12-ev--encontro i { background: var(--e-global-color-secondary, #9ad1c0); }

.a12-cal__filtro[aria-pressed='false'] {
  background: transparent !important;
  border-style: dashed !important;
  color: var(--e-global-color-text) !important;
}
.a12-cal__filtro[aria-pressed='false'] i { opacity: .35; }
.a12-cal__filtro[aria-pressed='false'] { text-decoration: line-through; }
.a12-cal__filtro:focus-visible {
  outline: 3px solid var(--e-global-color-a12marcaescura); outline-offset: 2px;
}
.a12-cal__filtro:hover { border-color: var(--e-global-color-a12marca) !important; }

/* ── o painel de detalhe ─────────────────────────────────────────────────── */
.a12-cal__painel {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: rgba(8, 22, 18, .6); padding: 16px;
}
.a12-cal__caixa {
  background: #fff; border-radius: 10px; padding: 28px; max-width: 560px;
  width: 100%; max-height: 86vh; overflow: auto; position: relative;
}
/**
 * **O botão de fechar precisa anular o estilo global de `button` do tema**, que
 * o pintava de rosa (`rgb(204,51,102)`) — cor que não existe no kit. `all:
 * revert` devolveria o do navegador e traria a borda cinza junto; aqui cada
 * propriedade que o tema mexe é declarada de volta.
 */
.a12-cal .a12-cal__fechar,
.a12-cal__painel .a12-cal__fechar {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; min-height: 36px;
  display: grid; place-items: center;
  background: var(--e-global-color-a12superficiesutil) !important;
  color: var(--e-global-color-a12marcaescura) !important;
  border: 1px solid var(--e-global-color-370a0d0) !important;
  border-radius: 50%; box-shadow: none; padding: 0;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.a12-cal__fechar:hover { background: var(--e-global-color-370a0d0) !important; }
.a12-cal__fechar:focus-visible {
  outline: 3px solid var(--e-global-color-a12marcaescura); outline-offset: 2px;
}
.a12-cal__tipo {
  margin: 0 0 4px; text-transform: uppercase; letter-spacing: .08em;
  font-size: .8rem; font-weight: 600;
  color: var(--e-global-color-a12marcaescura);
}
.a12-cal__titulo { margin: 0 0 6px; font-size: 1.3rem; padding-right: 40px; }
.a12-cal__quando { margin: 0 0 16px; color: var(--e-global-color-text); }
.a12-cal__fases { margin: 0 0 16px; padding: 0; list-style: none; }
.a12-cal__fases li {
  display: grid; grid-template-columns: 7rem 1fr; gap: 0 12px; padding: 8px 0;
  border-bottom: 1px solid var(--e-global-color-370a0d0);
}
.a12-cal__fases strong { color: var(--e-global-color-a12marcaescura); }
.a12-cal__texto p { margin: 0 0 8px; }
.a12-cal__texto { color: var(--e-global-color-text); }

@media (max-width: 767px) {
  .a12-cal__fases li { grid-template-columns: 1fr; gap: 2px; }
  .a12-cal__caixa { padding: 20px; }
  .a12-cal__titulo { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .a12-cal * { transition: none !important; animation: none !important; }
}

/* ── a barra de visão: Mês ou Lista ──────────────────────────────────────── */
.a12-cal__visao { display: flex; gap: 0; margin: 0 0 12px; }
.a12-cal__visao-bt {
  min-height: 36px; padding: 6px 18px;
  border: 1px solid var(--e-global-color-a12marcaescura) !important;
  background: transparent !important;
  color: var(--e-global-color-a12marcaescura) !important;
  font-weight: 600; font-size: .9rem; cursor: pointer; box-shadow: none;
}
.a12-cal__visao-bt:first-child { border-radius: 6px 0 0 6px; }
.a12-cal__visao-bt:last-child { border-radius: 0 6px 6px 0; border-left-width: 0 !important; }
/* o ativo é escuro: `a12marca` com texto branco dá 3,68:1 e reprova */
.a12-cal__visao-bt[aria-pressed='true'] {
  background: var(--e-global-color-a12marcaescura) !important;
  color: #fff !important;
}
.a12-cal__visao-bt:focus-visible {
  outline: 3px solid var(--e-global-color-a12marca); outline-offset: 2px;
}

/* o número do dia fora do mês dava 3,20:1 sobre a célula esmaecida */
.a12-cal .fc .fc-daygrid-day-number { color: var(--e-global-color-text); }
/* Dia de outro mês fica esmaecido por convenção, mas esmaecido não é ilegível:
   o cinza do FullCalendar sobre a célula cinza dava 1,75:1. */
.a12-cal .fc .fc-day-other .fc-daygrid-day-number { color: #4a4a4a; opacity: 1; }
.a12-cal .fc .fc-day-other { background: #f4f4f4; }
.a12-cal .fc .fc-daygrid-more-link { color: var(--e-global-color-a12marcaescura); font-weight: 600; }

/* ── a lista própria ─────────────────────────────────────────────────────── */
.a12-cal__lista { list-style: none; margin: 0; padding: 0; }
.a12-cal__lista li { border-bottom: 1px solid var(--e-global-color-370a0d0); }
.a12-cal__lista button {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  grid-template-areas: 'tipo nome quando' 'tipo fases quando';
  gap: 2px 16px; align-items: center;
  width: 100%; padding: 14px 8px; min-height: 56px;
  background: transparent !important; border: 0 !important; box-shadow: none;
  text-align: left; cursor: pointer; color: var(--e-global-color-text) !important;
  border-left: 4px solid transparent !important;
}
.a12-cal__lista button:hover { background: var(--e-global-color-a12superficiesutil) !important; }
.a12-cal__lista button:focus-visible {
  outline: 3px solid var(--e-global-color-a12marcaescura); outline-offset: -3px;
}
.a12-cal__lista .a12-ev--missao   button { border-left-color: var(--e-global-color-a12marcaescura) !important; }
.a12-cal__lista .a12-ev--pre      button { border-left-color: var(--e-global-color-a12marcamedia) !important; }
.a12-cal__lista .a12-ev--pos      button { border-left-color: var(--e-global-color-a12marca) !important; }
.a12-cal__lista .a12-ev--romaria  button { border-left-color: var(--e-global-color-accent, #e8b931) !important; }
.a12-cal__lista .a12-ev--retiro   button { border-left-color: var(--e-global-color-text) !important; }
.a12-cal__lista .a12-ev--encontro button { border-left-color: var(--e-global-color-secondary, #9ad1c0) !important; }

.a12-cal__lista-tipo {
  grid-area: tipo; text-transform: uppercase; letter-spacing: .06em;
  font-size: .72rem; font-weight: 700;
  color: var(--e-global-color-a12marcaescura);
}
.a12-cal__lista-nome { grid-area: nome; font-weight: 600; }
.a12-cal__lista-quando { grid-area: quando; font-size: .85rem; white-space: nowrap; }
.a12-cal__lista-fases { grid-area: fases; font-size: .8rem; color: #5a5a5a; }
.a12-cal__vazio { padding: 24px 8px; color: var(--e-global-color-text); }

@media (max-width: 767px) {
  .a12-cal__lista button {
    grid-template-columns: 1fr;
    grid-template-areas: 'tipo' 'nome' 'quando' 'fases';
    gap: 2px;
  }
  .a12-cal__lista-quando { white-space: normal; }
}

/**
 * ── os botões de navegação, em todos os estados ──────────────────────────
 *
 * O kit do portal pinta `button` de rosa (`rgb(204,51,102)`) em `:active`, e as
 * variáveis `--fc-button-*` não cobrem esse estado: o rosa aparecia só com o
 * botão pressionado, que é quando ninguém está medindo. Aqui cada estado é
 * declarado — e o `:hover` deixou de clarear, porque branco sobre `a12marca`
 * dá 3,68:1 e reprova. Hover agora **escurece**, que é o que mantém o texto
 * legível enquanto indica a interação.
 */
.a12-cal .fc .fc-button-primary,
.a12-cal .fc .fc-button-primary:not(:disabled) {
  background-color: var(--e-global-color-a12marcaescura) !important;
  border-color: var(--e-global-color-a12marcaescura) !important;
  color: #fff !important;
}
.a12-cal .fc .fc-button-primary:hover,
.a12-cal .fc .fc-button-primary:focus,
.a12-cal .fc .fc-button-primary:active,
.a12-cal .fc .fc-button-primary:not(:disabled):active,
.a12-cal .fc .fc-button-primary:not(:disabled).fc-button-active {
  background-color: #123b31 !important;   /* a12marcaescura, dois passos abaixo */
  border-color: #123b31 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.a12-cal .fc .fc-button-primary:focus-visible {
  outline: 3px solid var(--e-global-color-a12marca) !important;
  outline-offset: 2px;
}
.a12-cal .fc .fc-button-primary:disabled {
  background-color: #5a6b66 !important;
  border-color: #5a6b66 !important;
  color: #fff !important;
  opacity: 1;
}
/* o mesmo para os nossos botões, que o kit também alcança */
.a12-cal__filtro:active,
.a12-cal__visao-bt:active { background-color: inherit; }