/* ==========================================================================
   Calendário Institucional TCE-ES
   Cores: Azul escuro #1C4E80 | Azul claro #14609F | Amarelo #FFCD00 | Branco #F9F9F9
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

.ci-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    color: #1C4E80;
    background: #F9F9F9;
    border: 1px solid #dce6f0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.ci-container {
    /* Recuo horizontal ÚNICO para cabeçalho, busca e filtros. Antes cada bloco
       repetia "14px" por conta própria e bastava o tema mexer em um deles para
       as bordas esquerdas saírem do prumo. */
    --ci-pad-x: 14px;

    /* Botões flutuantes do cabeçalho da modal (expandir e fechar) e o recuo
       que o título precisa ter para não passar por baixo deles.
       Estão aqui, e derivados uns dos outros, porque já se desencontraram uma
       vez: o recuo do cabeçalho (54px) foi calculado quando só existia o
       "fechar"; o "expandir" entrou ao lado dele na v3.5.1 e ninguém refez a
       conta, então títulos longos corriam por baixo do segundo botão (os
       botões têm `z-index: 2`, então quem sumia era o texto). Com a conta
       escrita, mexer na posição ou no tamanho de um botão ajusta o recuo
       sozinho. */
    --ci-modal-btn: 26px;        /* lado do botão (é um círculo) */
    --ci-modal-btn-dir: 16px;    /* do "fechar" até a borda direita da modal */
    --ci-modal-btn-gap: 6px;     /* entre "expandir" e "fechar" */
    --ci-modal-btn-folga: 12px;  /* do título até o botão mais à esquerda */

    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;   /* deixa o cabeçalho encolher quando o pai e um flex container */
}

/* O shortcode não tem mais parâmetro de altura (v2.3.0): a altura é definida
   aqui, e precisa ser generosa o bastante para a grade do mês caber sem barra
   de rolagem interna — 6 linhas de semana + cabeçalho + filtros. */
/* 530px foi medido: com os filtros abertos a linha da semana fica em ~52px,
   que é o piso do FullCalendar para UMA faixa de evento + o chip "N eventos"
   (dayMaxEventRows: 1). Reduzir mais não encolhe a linha — só sobra espaço
   vazio dentro do contêiner. */
.ci-container { min-height: 530px; }

/* ---------- Modo tela cheia ---------- */
/* :fullscreen / :-webkit-full-screen aplicam no elemento que chamou
   requestFullscreen() (.ci-container) — o navegador já estica ele pra
   ocupar a tela toda; aqui só ajustamos densidade (fontes/alturas maiores)
   pra aproveitar o espaço extra, não só esticar o layout compacto. */
.ci-container:fullscreen,
.ci-container:-webkit-full-screen {
    max-width: none;
    background: #F9F9F9;
    padding: 24px;
}
.ci-container:fullscreen .ci-mes-nome,
.ci-container:-webkit-full-screen .ci-mes-nome { font-size: 22px; }
.ci-container:fullscreen .ci-header,
.ci-container:-webkit-full-screen .ci-header { padding: 16px 28px; }
.ci-container:fullscreen .fc .fc-daygrid-body tr,
.ci-container:-webkit-full-screen .fc .fc-daygrid-body tr { height: 96px; }
.ci-container:fullscreen .fc .fc-daygrid-day-number,
.ci-container:-webkit-full-screen .fc .fc-daygrid-day-number { font-size: 15px; }
.ci-container:fullscreen .fc .fc-col-header-cell-cushion,
.ci-container:-webkit-full-screen .fc .fc-col-header-cell-cushion { font-size: 13px; padding: 8px 4px; }
.ci-container:fullscreen .fc-daygrid-event,
.ci-container:-webkit-full-screen .fc-daygrid-event { font-size: 13px; padding: 3px 6px; }

/* ---------------------------------------------------------------------------
   BLINDAGEM CONTRA O TEMA
   O plugin roda dentro do tema da intranet, que estiliza `button` e `input`
   globalmente — largura 100%, altura fixa, line-height grande, sombra,
   maiúsculas. Foi isso que esticou o antigo <select> de visão até cobrir o
   título do mês.

   Por que `!important`: a ordem de carregamento entre o CSS do tema e o do
   plugin não é garantida no WordPress, e um tema pode usar `!important` no
   seletor de elemento. Escopo em `.ci-container` — nada vaza para fora.
--------------------------------------------------------------------------- */
/* Controles que vivem dentro de um flex container precisam de uma garantia a
   mais: `width` sozinho entra numa disputa de especificidade com o tema
   (`body.tema button { width: 100% !important }` vence `.ci-container button`),
   e aí os botões de visão viram caixas de largura igual, com o rótulo mais
   longo cortado. `width: max-content` com três classes ganha a disputa, e
   `flex: 0 0 auto` impede o encolhimento mesmo que a largura fosse perdida. */
.ci-container .ci-visoes .ci-visao,
.ci-container .ci-header .ci-btn,
.ci-container .ci-acoes .ci-btn-acao {
    width: max-content !important;
    flex: 0 0 auto !important;
}

.ci-container button {
    box-sizing: border-box !important;
    font-family: inherit !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    box-shadow: none !important;
    float: none !important;
    text-indent: 0 !important;
}

/* Links dentro do calendário (o FullCalendar usa <a> em eventos, no "+N" e
   nos números de dia). Sem isto o `a:hover` do tema pinta o texto de azul —
   inclusive o do chip "+N eventos", que tem fundo azul: some da tela. */
.ci-wrapper .fc a,
.ci-wrapper .fc a:hover,
.ci-wrapper .fc a:focus,
.ci-wrapper .fc a:active,
.ci-wrapper .fc a:visited {
    text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
   LINHA DE BUSCA + AÇÕES (dentro do calendário, logo abaixo do cabeçalho)
   Busca e ações (filtro, atualizar, tela cheia) dividem a mesma linha: a
   busca ocupa o espaço disponível e as ações ficam encostadas à direita,
   completando-a.
--------------------------------------------------------------------------- */
.ci-busca-linha {
    display: flex;
    align-items: center;
    gap: 8px;
    /* folga à direita para o badge do funil, que projeta para fora do botão
       e era cortado pela borda da barra */
    padding: 9px 6px 9px var(--ci-pad-x) !important;
    overflow: visible;
}

/* Grupo de visões (Mês | Semana | Lista) — vive DENTRO da faixa azul do
   cabeçalho, junto com a navegação, não mais numa barra separada acima do
   calendário. Por isso segue a paleta do .ci-header (transparente/branco),
   igual aos botões de navegação, em vez do branco/cinza de antes. */
.ci-header .ci-visoes { display: inline-flex; }

.ci-container .ci-header .ci-visao {
    display: inline-flex !important;
    align-items: center;
    /* Não escolhida: mais apagada, para não competir com a opção ativa. */
    border: 1.5px solid rgba(249,249,249,0.3) !important;
    background: transparent !important;
    color: rgba(249,249,249,0.6) !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    /* Mesma altura dos botões de navegação ao lado (que têm um SVG de 14px):
       sem isto, a altura da linha do texto (variável por navegador) deixava
       este botão 1-2px mais baixo/alto que os de navegação. */
    line-height: 14px !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    margin-left: -1.5px !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ci-container .ci-header .ci-visao:first-child { border-radius: 5px 0 0 5px !important; margin-left: 0 !important; }
.ci-container .ci-header .ci-visao:last-child  { border-radius: 0 5px 5px 0 !important; }

.ci-container .ci-header .ci-visao:hover,
.ci-container .ci-header .ci-visao:focus-visible {
    background: rgba(249,249,249,0.14) !important;
    color: #F9F9F9 !important;
    outline: none;
}

/* Escolhida: destaque em branco — a mesma cor de "identidade" do título e
   dos textos do cabeçalho, em vez do amarelo (reservado para feriados/CTA). */
.ci-container .ci-header .ci-visao[aria-pressed="true"] {
    background: #F9F9F9 !important;
    border-color: #F9F9F9 !important;
    color: #1C4E80 !important;
    position: relative;
    z-index: 1;
}

/* Ações: filtro, atualizar, tela cheia */
.ci-acoes {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.ci-container .ci-btn-acao {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    padding: 5px 6px !important;
    color: #8496a8 !important;
    cursor: pointer;
    border-radius: 4px !important;
    transition: color 0.15s, background 0.15s;
}
.ci-container .ci-btn-acao:hover,
.ci-container .ci-btn-acao:focus-visible {
    color: #1C4E80 !important;
    background: #eef3f8 !important;
    outline: none;
}
.ci-container .ci-btn-filtros-toggle.ci-btn-filtros-toggle--ativo { color: #1C4E80 !important; }

/* Filtro ativo: o funil fica âmbar com fundo, enquanto QUALQUER seção estiver
   oculta. É o sinal permanente que impede alguém de conviver meses com uma
   seção escondida sem perceber. */
.ci-container .ci-btn-acao--filtrando,
.ci-container .ci-btn-acao--filtrando:hover {
    color: #9A6B10 !important;
    background: #FDF3DA !important;
}

/* Contador de filtros ativos.
   Fica DENTRO do botão, ao lado do ícone — não sobreposto no canto. A versão
   anterior era um círculo em `position:absolute` projetando para fora do
   botão: qualquer ancestral com overflow/clip do tema o cortava, e não há
   combinação de top/right que resolva isso em todo tema. Como pílula em
   fluxo normal, não existe o que cortar. */
/* Rótulo do botão de filtro. O funil sozinho não dizia FILTRO DE QUÊ; com a
   palavra, o botão passa a ser autoexplicativo. A barra de busca cede o
   espaço sozinha (ela é `flex:1 1 auto` e as ações não encolhem). */
.ci-container .ci-acao-rotulo {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    /* Rótulo à ESQUERDA do funil: lê-se "Categorias ▼" na ordem natural da
       leitura, e não um ícone seguido do que ele significa. A distância até o
       ícone é o `gap` do botão (4px) — margem aqui perdia para a do tema. */
    margin: 0;
    white-space: nowrap;
}
/* Só some quando a barra realmente não comporta: 560px escondia o rótulo no
   próprio site (a coluna do calendário na intranet tem ~560px), que foi
   exatamente onde ele precisava aparecer. */
@container ci (max-width: 380px) {
    .ci-container .ci-acao-rotulo { display: none; }
}

.ci-acao-badge {
    display: inline-block;
    min-width: 15px;
    padding: 1px 5px;
    margin-left: 2px;
    border-radius: 8px;
    background: #14609F;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    /* "5 de 8" tem espaços: sem isto, num botão apertado pela barra de busca,
       o contador pode quebrar em duas linhas dentro da pílula. */
    white-space: nowrap;
    pointer-events: none;
}
/* Sem número quando TODAS as seções estão marcadas: o contador só serve para
   avisar que há filtro escondendo coisa. */
.ci-acao-badge:empty { display: none; }

#ci-btn-atualizar[aria-busy="true"] { cursor: default; }
#ci-btn-atualizar.ci-girando svg { animation: ci-spin 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) {
    #ci-btn-atualizar.ci-girando svg { animation: none; }
}

/* ---------- Cabeçalho: identificação à esquerda, navegação à direita ---------- */
.ci-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1C4E80;
    color: #F9F9F9;
    padding: 9px var(--ci-pad-x) !important;
    gap: 10px;
    flex-wrap: nowrap;
}

.ci-header-left {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Separador entre o mês/ano e a data de hoje */
.ci-header-left .ci-mes-range::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin-right: 10px;
    background: rgba(249,249,249,0.3);
    vertical-align: -1px;
}

.ci-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Abaixo de 640px, os seis botões (visões + navegação) começam a disputar
   espaço com o título — antes disso virava "Agosto 2..." cortado. A solução
   agora é encolher (gaps e botões menores) e deixar o subtítulo "Hoje, 31 de
   agosto" ceder espaço primeiro (ele trunca com reticências antes do
   mês/ano, que nunca encolhe — ver flex-shrink:0 em .ci-mes-nome). Só quebra
   para duas linhas em telas bem estreitas, onde encolher não basta mais. */
@container ci (max-width: 640px) {
    .ci-header { gap: 6px; padding: 8px 11px !important; }
    .ci-header-right { gap: 4px; }
    .ci-mes-nome { font-size: 15px; }
    .ci-container .ci-header .ci-visao { padding: 4px 8px !important; font-size: 11px !important; }
    .ci-container .ci-header .ci-btn { padding: 4px 8px !important; font-size: 11px !important; }
}
/* Segunda linha do cabeçalho: navegação à ESQUERDA, escolha de visão à
   DIREITA — dois grupos, não cinco botões espalhados. `space-between` repartia
   o vão entre TODOS os filhos (‹, Hoje, ›, e o par Calendário|Lista), e a
   segunda linha se lia como cinco controles soltos sem relação entre si. Com
   os botões de navegação encostados uns nos outros e `margin-left: auto` no
   grupo de visões, o vão vai todo para o meio e cada canto tem um grupo só. */
@container ci (max-width: 380px) {
    .ci-header { flex-wrap: wrap; row-gap: 6px; }
    .ci-header-left { flex: 1 1 100%; }
    .ci-header-right { flex: 1 1 100%; justify-content: flex-start; }
    .ci-header-right .ci-visoes { margin-left: auto; }
}
@supports not (container-type: inline-size) {
    @media (max-width: 640px) {
        .ci-header { gap: 6px; padding: 8px 11px !important; }
        .ci-header-right { gap: 4px; }
        .ci-mes-nome { font-size: 15px; }
        .ci-container .ci-header .ci-visao { padding: 4px 8px !important; font-size: 11px !important; }
        .ci-container .ci-header .ci-btn { padding: 4px 8px !important; font-size: 11px !important; }
    }
    @media (max-width: 380px) {
        .ci-header { flex-wrap: wrap; row-gap: 6px; }
        .ci-header-left { flex: 1 1 100%; }
        .ci-header-right { flex: 1 1 100%; justify-content: flex-start; }
        .ci-header-right .ci-visoes { margin-left: auto; }
    }
}

.ci-mes-nome {
    font-size: 17px;
    font-weight: 700;
    color: #FFCD00;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* Nunca encolhe: é a informação mais importante do cabeçalho. Quem cede
       espaço quando aperta é o subtítulo "Hoje, 31 de agosto" ao lado
       (ci-mes-range, que tem flex-shrink normal) — não o mês/ano. */
    flex-shrink: 0;
}

.ci-mes-range {
    font-size: 12px;
    font-weight: 400;
    color: rgba(249,249,249,0.72);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
    cursor: default;
}

/* Botões de navegação, dentro da faixa azul */
.ci-container .ci-header .ci-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(249,249,249,0.5) !important;
    background: transparent !important;
    color: #F9F9F9 !important;
    border-radius: 5px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    /* Mesma altura do grupo Mês/Semana/Lista ao lado — ver comentário em
       .ci-visao. */
    line-height: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ci-container .ci-header .ci-btn:hover,
.ci-container .ci-header .ci-btn:focus-visible {
    background: #FFCD00 !important;
    border-color: #FFCD00 !important;
    color: #1C4E80 !important;
    outline: none;
}
.ci-container .ci-header .ci-btn-nav  { padding: 5px 8px !important; }
.ci-container .ci-header .ci-btn-hoje { background: rgba(249,249,249,0.14) !important; }

/* ---------------------------------------------------------------------------
   Adaptação por LARGURA DO CONTÊINER, não da janela.
   Na intranet o calendário costuma ficar numa coluna estreita dentro de uma
   página larga — @media olha a janela e não dispara nesse caso. @container
   resolve; o @media mais abaixo fica como rede para navegadores sem suporte.
--------------------------------------------------------------------------- */
.ci-container { container-type: inline-size; container-name: ci; }

/* As regras de contêiner estreito da LISTA não moram aqui — moram depois das
   regras-base de `.ci-lista-*`, lá embaixo ("Lista em contêiner estreito").
   `@container` não acrescenta especificidade nenhuma: estando aqui, acima da
   base, toda declaração que colidisse com ela perdia por ordem de cascata. */

/* ---------- Barra de busca + filtros (linha própria, logo abaixo do cabeçalho) ---------- */
/* O botão de categorias tem rótulo E ícone: sem moldura, os dois flutuavam
   soltos na barra e não se liam como um controle só. A borda existe nos DOIS
   estados (v3.4.9) — antes só o estado "filtros abertos" tinha borda, então
   com os chips recolhidos o botão se desmontava visualmente. */
.ci-container .ci-btn-filtros-toggle {
    border: 1px solid #d9e5f0 !important;
    background: #fff !important;
    padding: 5px 8px !important;
    /* `gap` em vez de margem no rótulo: o tema da intranet aplica margem em
       `button svg` e em filhos de botão, e era ISSO que continuava afastando o
       funil do texto — a margem do rótulo já estava em 4px. O gap fixa a
       distância e o `margin: 0 !important` abaixo tira a do tema. */
    gap: 4px !important;
}
.ci-container .ci-btn-filtros-toggle > * { margin: 0 !important; }
.ci-container .ci-btn-filtros-toggle svg { margin: 0 !important; flex: 0 0 auto; }
.ci-container .ci-btn-filtros-toggle.ci-btn-filtros-toggle--ativo {
    background: #fff !important;
    border: 1px solid #c8dcea !important;
    color: #1C4E80 !important;
}
.ci-container .ci-btn-filtros-toggle:hover,
.ci-container .ci-btn-filtros-toggle:focus-visible {
    border-color: #a9c8e0 !important;
}

/* A linha em si NÃO recolhe mais — só os chips de calendário (abaixo). A
   busca fica sempre visível, porque "achar um evento" é útil independente
   do filtro de calendário estar mostrado ou escondido. */
.ci-filtros-linha {
    background: #eaf1f8;
    border-bottom: 1px solid #dce6f0;
    flex-shrink: 0;
}

/* ---------- Busca de eventos (typeahead) ---------- */
.ci-busca-wrap {
    position: relative;
    /* Encolhe para dividir a linha com os botões de ação à direita — antes
       ocupava a linha inteira sozinha. */
    flex: 1 1 auto;
    min-width: 0;
}
.ci-busca-icone {
    position: absolute;
    left: 10px;
    top: 0;
    height: 30px;
    display: flex;
    align-items: center;
    color: #9ab4cc;
    pointer-events: none;
}
.ci-wrapper .ci-busca-input {
    /* 100% do wrap (que agora divide a linha com os botões de ação — ver
       .ci-busca-wrap, flex:1 1 auto). */
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    box-sizing: border-box !important;
    /* altura explícita: o tema da intranet define height/line-height em
       `input` e esticava o campo (ver blindagem no topo do arquivo) */
    height: 30px !important;
    line-height: 18px !important;
    padding: 6px 10px 6px 30px !important;
    font-size: 12px !important;
    font-family: inherit;
    color: #1C4E80;
    background: #fff;
    border: 1px solid #c8dcea;
    border-radius: 14px;
}
.ci-busca-input:focus {
    outline: none;
    border-color: #14609F;
}
.ci-busca-input::-webkit-search-cancel-button { cursor: pointer; }

.ci-busca-resultados {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    /* Acompanha a largura do campo (que agora é total). O max-width de 340px
       vinha da época em que a busca era um controle estreito e deixava o
       dropdown mais curto que o input. */
    max-width: none;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dce6f0;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(28,78,128,0.15);
    z-index: 30;
}
.ci-busca-resultados.ci-busca-resultados--visivel { display: block; }

.ci-busca-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 12px;
    color: #1C4E80;
    border-bottom: 1px solid #eef2f6;
}
.ci-busca-item:last-child { border-bottom: none; }
.ci-busca-item:hover,
.ci-busca-item.ci-busca-item--ativo { background: #eaf1f8; }
.ci-busca-item-cor {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ci-busca-item-info { flex: 1 1 auto; min-width: 0; }

/* Seção à direita, na mesma linha do título — mesma gramática da view de
   lista, para os dois lugares se lerem igual. */
.ci-busca-item-secao {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 11px;
    color: #5b6b7a;
}
.ci-busca-item-secao-texto {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Mesmo arranjo de `.ci-lista-titulo`: flex, com o corte por reticências no
   `<span>` de dentro, para a estrela de destaque (que vem depois do título)
   não ser engolida junto com o fim de um título longo. */
.ci-busca-item-titulo {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}

.ci-busca-item-titulo-texto {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-busca-item-data {
    font-size: 11px;
    color: #7b8ea3;
}
/* Cabeçalho "Nada em Setembro. Em outros meses:" — a busca é do mês na tela,
   e quando ela extravasa para outros meses isso precisa estar escrito, senão
   a pessoa lê um evento de outubro achando que é de agora. */
.ci-busca-secao {
    padding: 8px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #7b8ea3;
    background: #f3f7fb;
    border-bottom: 1px solid #e6eef7;
}

/* Busca em outros meses: escolha explícita de quem procurou e não achou no
   mês da tela (v3.4.7). */
.ci-container .ci-busca-outros {
    display: block !important;
    width: 100% !important;
    padding: 9px 12px !important;
    border: none !important;
    border-top: 1px solid #e6eef7 !important;
    background: #f3f7fb !important;
    color: #14609F !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: left !important;
    cursor: pointer;
}
.ci-container .ci-busca-outros:hover,
.ci-container .ci-busca-outros:focus-visible {
    background: #e8f1f9 !important;
    outline: none;
}
.ci-container .ci-busca-outros[disabled] { opacity: .6; cursor: default; }

.ci-busca-vazio {
    padding: 10px 12px;
    font-size: 12px;
    color: #7b8ea3;
    font-style: italic;
}

.ci-filtros-itens {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px 8px;
    padding: 0 var(--ci-pad-x) 9px !important;
    overflow-y: auto;
    max-height: 160px;
    transition: max-height 0.2s ease, padding 0.2s ease;
}
.ci-filtros-itens.ci-filtros-itens--recolhida {
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

.ci-filtro-item {
    display: flex;
    align-items: center;
    gap: 6px;
    /* a cor da seção chega por style inline (--ci-cor) vindo do PHP */
    font-size: 12px;
    font-weight: 600;
    color: #1C4E80;
    cursor: pointer;
    user-select: none;
    padding: 4px 10px 4px 8px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #c8dcea;
    transition: background 0.12s, opacity 0.12s;
    line-height: 1.3;
}
.ci-filtro-item:hover {
    background: #f4f8fc;
}
.ci-filtro-item[data-ativo="false"] {
    opacity: 0.5;
    border-color: #dbe4ec;
}

/* O PRÓPRIO checkbox carrega a cor da seção (`--ci-cor`, definida inline no
   label pelo PHP). Antes eram dois elementos — checkbox neutro + bolinha
   colorida — para a mesma informação; um só ocupa menos e lê melhor.
   `accent-color` é nativo: mantém o controle do sistema, o foco do teclado e
   o modo de alto contraste funcionando. */
.ci-container .ci-filtro-item input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: var(--ci-cor, #1C4E80);
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: none !important;
}

/* Desmarcado, o quadrinho fica com a borda na cor da seção — assim a cor
   continua legível mesmo sem o preenchimento do accent-color. */
.ci-filtro-item[data-ativo="false"] input[type="checkbox"] {
    outline: 1.5px solid var(--ci-cor, #1C4E80);
    outline-offset: -1px;
    border-radius: 3px;
}

/* Uma linha sempre que couber — numa faixa com quebra, o flex só encolhe o
   chip que é mais largo que a linha INTEIRA; os demais pulam de linha
   inteiros. Desde a v3.7.0 há rótulo maior que a faixa no celular ("Reuniões
   do Conselho Superior de Administração (CSA)" passa de 310px): com nowrap,
   ele vazava do container e, como a faixa tem overflow-y: auto, criava uma
   rolagem LATERAL dentro dela. Agora esse chip quebra em duas linhas. */
.ci-filtro-item {
    max-width: 100%;
    box-sizing: border-box;
    /* Largura do conteúdo, nunca esticado para fechar a linha: a v3.8.1
       chegou a fazer os chips crescerem (`flex: 1 1 auto`), e a última linha
       virava pílulas enormes com pouco texto. O que encurta a faixa são os
       nomes curtos (`curto` em CI_CAIXAS). */
    flex: 0 1 auto;
}
.ci-filtro-label {
    white-space: normal;
    min-width: 0;
}

/* ==========================================================================
   Renderização via FullCalendar v6 — overrides escopados
   Todas as regras abaixo ficam sob .ci-wrapper / #ci-fc para não vazar
   para o restante do WordPress.
   ========================================================================== */

.ci-fc-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

/* Posicionamento absoluto dá ao #ci-fc uma altura definida, necessária para
   que o height:'100%' do FullCalendar resolva e o scroll interno funcione. */
#ci-fc { position: absolute; inset: 0; }

/* Variáveis do FullCalendar ajustadas à identidade visual do TCE-ES */
.ci-wrapper .fc {
    --fc-border-color: #dce6f0;
    --fc-page-bg-color: #fff;
    --fc-neutral-bg-color: #f4f7fb;
    --fc-today-bg-color: transparent;
    --fc-event-border-color: transparent;
    --fc-list-event-hover-bg-color: #eaf1f8;
    --fc-small-font-size: 11px;
    font-family: inherit;
    font-size: 14px;
    color: #1C4E80;
}

.ci-wrapper .fc a { text-decoration: none; color: inherit; box-shadow: none; }
.ci-wrapper .fc table { margin: 0; border-collapse: collapse; }
.ci-wrapper .fc th,
.ci-wrapper .fc td { padding: 0; }

/* Neutraliza zebra / hover / sombras que temas do WordPress aplicam em
   <table>, <tr> e <td>. Fica ANTES das regras especificas do calendario
   (cabecalho dos dias, dias de outro mes, etc.), que continuam valendo. */
.ci-wrapper .fc table,
.ci-wrapper .fc thead,
.ci-wrapper .fc tbody,
.ci-wrapper .fc tr,
.ci-wrapper .fc th,
.ci-wrapper .fc td,
.ci-wrapper .fc table:hover,
.ci-wrapper .fc tr:hover,
.ci-wrapper .fc tr:hover > td,
.ci-wrapper .fc tr:hover > th,
.ci-wrapper .fc td:hover,
.ci-wrapper .fc tbody tr:nth-child(odd),
.ci-wrapper .fc tbody tr:nth-child(even),
.ci-wrapper .fc tbody tr:nth-child(odd) > td,
.ci-wrapper .fc tbody tr:nth-child(even) > td {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
}

/* O popover nativo de "+N" é substituído pelo modal do plugin */
.ci-wrapper .fc-popover { display: none !important; }

/* ---------- Cabeçalho dos dias da semana ---------- */
.ci-wrapper .fc .fc-col-header-cell {
    background: #e8f0f8;
    border-right: 1px solid #dce6f0;
    border-bottom: 1px solid #dce6f0;
    text-align: center;
}

.ci-wrapper .fc .fc-col-header-cell-cushion {
    display: block;
    text-align: center;
    padding: 3px 2px;
    color: #4a7aaa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- Colunas de fim de semana vazias ---------- */
/* Classes postas em #ci-calendario por `ajustarFimDeSemana()` (JS) quando
   NENHUM evento da janela visível cai naquele dia da semana. Some com o <th>
   do cabeçalho e com todos os <td> daquele dia: a tabela redistribui a largura
   entre as colunas restantes sozinha, sem nenhuma conta de largura aqui.

   Só na grade mensal — a lista não tem coluna de dia da semana.

   Por que no CSS e não com `hiddenDays` do FullCalendar: `hiddenDays` recorta
   também a janela de datas BUSCADA, e o calendário deixaria de carregar os
   eventos do dia escondido — nunca mais descobriria que a coluna precisa
   voltar. Ver o comentário de `diasVaziosDoFimDeSemana()` no JS. */
.ci-wrapper.ci-sem-domingo .fc-dayGridMonth-view .fc-day-sun,
.ci-wrapper.ci-sem-sabado  .fc-dayGridMonth-view .fc-day-sat {
    display: none;
}

/* ---------- Células da grade mensal ---------- */
/* O piso de altura fica na linha, não no frame: `min-height` no frame
   sobrescreve o `min-height: 100%` do FullCalendar e a célula deixa de ser
   preenchida quando `expandRows` estica a linha. */
.ci-wrapper .fc .fc-daygrid-day-frame {
    min-height: 100%;
    padding: 3px 3px 3px;
}

.ci-wrapper .fc .fc-daygrid-body tr { height: 52px; }

.ci-wrapper .fc .fc-daygrid-day-top {
    flex-direction: row;
    opacity: 1;
}

.ci-wrapper .fc .fc-daygrid-day-number {
    font-size: 12px;
    font-weight: 600;
    color: #1C4E80;
    padding: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ci-wrapper .fc .fc-day-other .fc-daygrid-day-number { color: #aab8c8; }

/* ---------- Hover: nada muda de aparência ----------
   A grade tem 3 camadas sobrepostas (td, harness de background e o frame do
   dia); temas do WordPress ainda colorem <tr>/<td> no hover e trocam a cor de
   <a> (o número do dia é um <a>).

   O fundo do dia é pintado no <td>, não no frame: com `expandRows: true` a
   linha estica além do `min-height` do frame, e pintar o frame deixaria uma
   faixa vazia embaixo da célula.

   Os blocos abaixo usam seletores MUTUAMENTE EXCLUSIVOS
   (`:not(.fc-day-other)` / `.fc-day-other` / `.fc-day-today`) de propósito:
   com `!important` dos dois lados quem decide é a especificidade, e `:hover`
   sozinho já bastava para o dia comum vencer o dia de outro mês. Com os
   conjuntos disjuntos, ordem e especificidade não importam.
   Ao editar, preserve essa exclusão mútua. */

/* Camadas acima do <td> sempre transparentes */
.ci-wrapper .fc .fc-daygrid-day-frame,
.ci-wrapper .fc .fc-daygrid-day:hover .fc-daygrid-day-frame,
.ci-wrapper .fc .fc-daygrid-day:hover .fc-daygrid-day-events,
.ci-wrapper .fc .fc-daygrid-bg-harness,
.ci-wrapper .fc .fc-highlight,
.ci-wrapper .fc .fc-non-business,
.ci-wrapper .fc .fc-day-disabled {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Fundo — dia do mês exibido */
.ci-wrapper .fc .fc-daygrid-day:not(.fc-day-other),
.ci-wrapper .fc .fc-daygrid-day:not(.fc-day-other):hover {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Fundo — dia do mês anterior/seguinte */
.ci-wrapper .fc .fc-daygrid-day.fc-day-other,
.ci-wrapper .fc .fc-daygrid-day.fc-day-other:hover {
    background: #f4f7fb !important;
    background-color: #f4f7fb !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Número — dia comum do mês exibido */
.ci-wrapper .fc .fc-daygrid-day:not(.fc-day-other):not(.fc-day-today) .fc-daygrid-day-number,
.ci-wrapper .fc .fc-daygrid-day:not(.fc-day-other):not(.fc-day-today) .fc-daygrid-day-number:hover,
.ci-wrapper .fc .fc-daygrid-day:not(.fc-day-other):not(.fc-day-today) .fc-daygrid-day-number:focus,
.ci-wrapper .fc .fc-daygrid-day:not(.fc-day-other):not(.fc-day-today):hover .fc-daygrid-day-number {
    color: #1C4E80 !important;
    background: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Número — dia do mês anterior/seguinte */
.ci-wrapper .fc .fc-daygrid-day.fc-day-other:not(.fc-day-today) .fc-daygrid-day-number,
.ci-wrapper .fc .fc-daygrid-day.fc-day-other:not(.fc-day-today) .fc-daygrid-day-number:hover,
.ci-wrapper .fc .fc-daygrid-day.fc-day-other:not(.fc-day-today) .fc-daygrid-day-number:focus,
.ci-wrapper .fc .fc-daygrid-day.fc-day-other:not(.fc-day-today):hover .fc-daygrid-day-number {
    color: #aab8c8 !important;
    background: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Número — dia atual: bolinha azul com o número em amarelo, com ou sem hover.
   Vale também quando hoje aparece como dia de outro mês na grade vizinha. */
.ci-wrapper .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number,
.ci-wrapper .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number:hover,
.ci-wrapper .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number:focus,
.ci-wrapper .fc .fc-daygrid-day.fc-day-today:hover .fc-daygrid-day-number {
    background: #1C4E80 !important;
    background-color: #1C4E80 !important;
    color: #FFCD00 !important;
    border: none !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.ci-wrapper .fc .fc-daygrid-day-events { margin-top: 0; min-height: 0; }
.ci-wrapper .fc .fc-daygrid-day-bottom { margin-top: 0; }
.ci-wrapper .fc .fc-daygrid-event-harness { margin-top: 2px; }
/* Mesma respiro abaixo da badge do evento (chip único ou "+N eventos") que
   existe entre o número do dia e o topo da célula (padding-top do frame,
   3px) — antes só havia esse respiro em cima. */
.ci-wrapper .fc .fc-daygrid-event-harness:last-child { margin-bottom: 3px; }
.ci-wrapper .fc .fc-daygrid-more-link { margin-bottom: 3px; }

/* ---------- Chips de evento na grade ---------- */
.ci-wrapper .fc .fc-daygrid-event {
    margin: 0;
    padding: 2px 4px;
    border: none;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: opacity 0.15s, filter 0.15s;
}

.ci-wrapper .fc .fc-daygrid-event:hover,
.ci-wrapper .fc .fc-daygrid-event:focus {
    opacity: 0.85;
    filter: brightness(1.1);
    outline: 2px solid #FFCD00;
    outline-offset: 1px;
}

.ci-wrapper .fc .fc-daygrid-event .fc-event-main {
    display: flex;
    align-items: baseline;
    gap: 4px;
    overflow: hidden;
    color: inherit;
}

.ci-wrapper .fc .fc-daygrid-event .fc-event-time {
    font-weight: 600;
    flex-shrink: 0;
    overflow: visible;
}

.ci-wrapper .fc .fc-daygrid-event .fc-event-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contraste para o chip amarelo (Feriados) */
.ci-wrapper .fc .fc-daygrid-event[data-cor="#FFCD00"],
.ci-wrapper .fc .fc-daygrid-event[data-cor="#ffcd00"] { color: #1C4E80; }

/* ---------- Chip "N eventos" (substitui o popover +N do FullCalendar) ---------- */
.ci-wrapper .fc .fc-daygrid-more-link {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 4px;
    border-radius: 3px;
    background: #1C4E80 !important;
    color: #fff !important;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
}

.ci-wrapper .fc .fc-daygrid-more-link:hover,
.ci-wrapper .fc .fc-daygrid-more-link:focus {
    background: #14609F !important;
    color: #fff !important;
    outline: 2px solid #FFCD00;
    outline-offset: 1px;
}

/* ---------- Scroller ---------- */
.ci-wrapper .fc .fc-scroller { overflow-y: auto !important; }
.ci-wrapper .fc .fc-scrollgrid,
.ci-wrapper .fc .fc-scrollgrid-section > * { border-left-width: 0; border-top-width: 0; }
.ci-wrapper .fc .fc-scrollgrid { border-left: 1px solid #dce6f0; border-top: 1px solid #dce6f0; }

/* ---------- View de lista ---------- */

/* Alinhamento à esquerda reafirmado.
   O FullCalendar monta a lista como TABELA, e temas costumam ter
   `th, td { text-align: center }` — o que centraliza título, horário e
   cabeçalho de dia, deixando a lista visualmente torta e inconsistente com o
   resto. Como a regra do tema mira o elemento (td/th), ela vence qualquer
   herança nossa; daí o !important escopado. */
.ci-wrapper .fc .fc-list-table th,
.ci-wrapper .fc .fc-list-table td,
.ci-wrapper .fc .fc-list-day-cushion,
.ci-wrapper .fc .fc-list-event-time,
.ci-wrapper .fc .fc-list-event-title,
.ci-wrapper .fc .fc-list-event-title a,
.ci-wrapper .ci-lista-info,
.ci-wrapper .ci-lista-titulo {
    text-align: left !important;
}

/* Mesma proteção na grade do mês: número do dia e chips não podem herdar
   centralização de célula do tema. */
.ci-wrapper .fc .fc-daygrid-day-frame,
.ci-wrapper .fc .fc-daygrid-event,
.ci-wrapper .fc .fc-daygrid-more-link {
    text-align: left !important;
}

.ci-wrapper .fc .fc-list {
    border: none;
    background: #F9F9F9;
}

/* Layout fixo: sem isso, o navegador dimensiona as colunas pelo CONTEÚDO
   (auto layout) — e como o título não quebra linha (nowrap, para permitir
   reticências), um título muito comprido "pede" uma coluna larga o
   suficiente para caber inteiro, empurrando/tapando a coluna da categoria ao
   lado dele. Com largura fixa nas colunas de hora/marcador, a coluna do
   título fica com a largura restante SEMPRE igual, e aí sim o
   overflow+ellipsis do título (e não a categoria) é o que cede espaço. */
/* !important nas duas propriedades: um reset de tema de intranet que mira
   `table { width: ... }` genérico (comum em resets de conteúdo) tem a MESMA
   especificidade da nossa classe encadeada quando vem com !important — e aí
   quem decide é a ordem de carregamento, que a gente não controla. Sem o
   !important aqui, uma dessas regras vence a nossa, a tabela encolhe para a
   largura do CONTEÚDO (bem menor que o `.fc-scroller`) e a lista inteira
   aparece espremida à esquerda, com um vão em branco do lado direito — foi o
   que aconteceu depois de clicar em "Hoje" num tema real. */
.ci-wrapper .fc .fc-list-table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* A largura acima é em PORCENTAGEM, e porcentagem precisa de um contêiner de
   largura definida para resolver. Quando algum elo acima cai num contexto de
   dimensionamento intrínseco, `100%` degrada para `auto` e a tabela encolhe
   até a largura MÍNIMA do conteúdo — a lista espremida à esquerda com um vão
   branco à direita. Quem fecha esse caso é `normalizarLarguraLista()` no JS,
   que grava a largura em pixels depois do render; as regras daqui são a
   primeira linha de defesa, para o caso normal.

   `display` reafirmado em toda a tabela: resets de tema que transformam
   tabelas em blocos roláveis (`table { display: block; overflow-x: auto }`,
   padrão em temas "responsivos") desmontam a grade de colunas inteira — as
   larguras declaradas nas <th> do thead deixam de valer e a lista se
   desalinha. */
.ci-wrapper .fc .fc-list-table { display: table !important; box-sizing: border-box !important; float: none !important; margin: 0 !important; max-width: none !important; }
.ci-wrapper .fc .fc-list-table > thead { display: table-header-group !important; }
.ci-wrapper .fc .fc-list-table > tbody { display: table-row-group !important; }
.ci-wrapper .fc .fc-list-table > * > tr { display: table-row !important; }
.ci-wrapper .fc .fc-list-table > * > tr > th,
.ci-wrapper .fc .fc-list-table > * > tr > td { display: table-cell !important; }

/* Defesa extra na cadeia de contêineres ACIMA da tabela da lista. O fix
   anterior só travava a `.fc-list-table` — mas se um reset de tema mirar um
   elemento mais externo (`.fc-view-harness`, `.fc-scrollgrid`, `.fc-scroller`)
   com uma largura menor, a tabela interna herda "100% de um espaço já
   encolhido" e continua estreita mesmo com o `!important` no lugar certo.
   Isto reproduziu de novo em produção mesmo com o fix anterior aplicado —
   dado que não há como inspecionar ao vivo qual elemento exato o tema está
   afetando, a rota mais segura é blindar toda a cadeia de uma vez. */
.ci-wrapper .fc .fc-view-harness,
.ci-wrapper .fc .fc-scrollgrid,
.ci-wrapper .fc .fc-scroller,
.ci-wrapper .fc .fc-list {
    width: 100% !important;
    max-width: none !important;
}

/* O <th> do cabeçalho de dia e as <td> dos eventos não podem herdar padding
   do tema: qualquer diferença entre eles desalinha o dia da semana em relação
   ao conteúdo abaixo. O recuo é definido só no cushion e no td:first-child. */
.ci-wrapper .fc .fc-list-day > * {
    background: transparent;
    border: none;
    padding: 0 !important;
}

/* Cabeçalho de dia NÃO fica preso no topo enquanto a lista rola.
   O FullCalendar aplica `position: sticky; top: 0` nesta <th>. Numa tabela,
   o retângulo que limita um `sticky` é a TABELA INTEIRA — não o grupo de
   linhas daquele dia: todos os cabeçalhos já rolados ficam empilhados no
   mesmo `top: 0`, um por cima do outro, e nenhum sai de cena. Como o
   cabeçalho de hoje é mais alto (carrega a etiqueta "Hoje"), sobrava uma tira
   de "16 de setembro… Hoje" colada no topo por cima de eventos de OUTRO dia —
   e a leitura errada de que o dia 16 não tinha evento nenhum.
   A lista rola inteira, como uma página comum: o dia acompanha os eventos
   dele e sai da tela junto com eles. */
.ci-wrapper .fc .fc-list-day > *,
.ci-wrapper .fc .fc-list-sticky .fc-list-day > * {
    position: static !important;
    top: auto !important;
}

.ci-wrapper .fc .fc-list-day-cushion {
    /* Fundo cinza-claro em TODOS os dias (não só "hoje"): cada dia vira uma
       faixa visualmente separada da anterior, como nas listas de agenda de
       referência — antes só havia uma linha fina entre um dia e outro. */
    background: #eef1f5;
    padding: 9px var(--ci-pad-x) 7px !important;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ci-wrapper .fc .fc-list-day-text {
    font-size: 13px;
    font-weight: 700;
    color: #1C4E80;
    /* `capitalize` deixava "Segunda-Feira, 3 De Agosto" — em português só a
       primeira letra sobe. */
    text-transform: none;
    display: inline-block;
}
.ci-wrapper .fc .fc-list-day-text::first-letter { text-transform: uppercase; }

/* A faixa que marca "hoje" NÃO pode ocupar espaço: `border-left` empurrava o
   texto 4px e desalinhava o cabeçalho de hoje em relação aos outros dias.
   `box-shadow` resolvia isso, mas temas costumam zerar sombra em células de
   tabela — então a faixa virou um pseudo-elemento posicionado, que não ocupa
   espaço E não depende de nenhuma propriedade que o tema mexa.
   O padding é reafirmado idêntico ao dos demais dias, para o alinhamento não
   depender de herança. */
.ci-wrapper .fc .fc-list-day.fc-day-today .fc-list-day-cushion {
    position: relative;
    background: #eaf3fc;
    box-shadow: none;
    border: none;
    padding: 9px var(--ci-pad-x) 7px !important;
}
.ci-wrapper .fc .fc-list-day.fc-day-today .fc-list-day-cushion::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #14609F;
}

.ci-wrapper .fc .fc-list-day.fc-day-today .fc-list-day-text { color: #14609F; }

.ci-wrapper .fc .fc-list-event {
    cursor: pointer;
    background: #fff;
}

.ci-wrapper .fc .fc-list-event:hover td { background: #eaf1f8; }

/* Placeholder de "hoje sem eventos" (ver `garantirHojeNaLista` no JS): não é
   clicável nem tem cor/hora — só a mensagem, para não parecer um evento de
   verdade. */
.ci-wrapper .fc .fc-list-event.ci-evento-vazio { cursor: default; }
.ci-wrapper .fc .fc-list-event.ci-evento-vazio:hover td { background: #fff; }
.ci-lista-vazio {
    color: #98a4b0;
    font-style: italic;
    font-size: 13px;
}

.ci-wrapper .fc .fc-list-event td {
    border-top: 1px solid #e6eef7;
    padding: 8px 8px !important;
    vertical-align: top;
}

/* Só a coluna do título sobra visível (ver regras de colapso abaixo), então
   ela carrega o recuo cheio dos dois lados — é o que mantém o título do evento
   começando na mesma coluna de "28 de agosto, sexta-feira" no cabeçalho. */
.ci-wrapper .fc .fc-list-event td:first-child { padding: 0 !important; }
.ci-wrapper .fc .fc-list-event td:nth-child(2) { padding: 0 !important; }
.ci-wrapper .fc .fc-list-event td:last-child  { padding-left: var(--ci-pad-x) !important; padding-right: var(--ci-pad-x) !important; }

/* A linha de "hoje sem eventos" vira um único <td colspan="3"> (ver
   `eventDidMount`), então é ao mesmo tempo first-child e last-child — e a
   regra acima a recuaria só 2px. Precisa vir DEPOIS das três regras de
   coluna: a especificidade é idêntica, quem decide é a ordem. O recuo cheio
   alinha a mensagem com o cabeçalho do dia logo acima. */
.ci-wrapper .fc .fc-list-event.ci-evento-vazio td {
    padding-left: var(--ci-pad-x) !important;
    padding-right: var(--ci-pad-x) !important;
}

/* Coluna nativa de horário: colapsada. A ordem pedida é título → horário →
   categoria, e o FullCalendar sempre monta a hora na PRIMEIRA célula da linha;
   como não dá para reordenar as <td>, o horário é remontado dentro da célula
   do título (ver `conteudoEvento` no JS, classe `.ci-lista-hora`) e esta aqui
   fica sem largura nem conteúdo visível. */
.ci-wrapper .fc .fc-list-event-time {
    width: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
    white-space: nowrap;
}

/* AQUI mora o vão gigante entre horário, traço e título.
   Em `table-layout: fixed` a largura das colunas vem exclusivamente da
   PRIMEIRA LINHA EM FLUXO da tabela. O FullCalendar esconde o cabeçalho de
   acessibilidade com `thead { position: absolute; left: -10000px }` — e um
   elemento posicionado absolutamente sai do fluxo, ou seja, aquele thead
   (o único lugar onde existe um <th> por coluna) simplesmente NÃO participa
   do cálculo. A primeira linha em fluxo vira o cabeçalho de dia, que é um
   único `<th colspan="3">`; como uma célula que abrange as três colunas não
   atribui largura a nenhuma delas, o navegador cai no rateio padrão e dá
   ~33% para cada uma. Daí "Dia inteiro", o traço e o título aparecerem
   espalhados em terços da largura.
   Por isso as larguras declaradas nas <td> dos eventos também não adiantavam:
   em layout fixo, linhas que não são a primeira são ignoradas.

   Solução: devolver o thead ao fluxo (é ele que carrega uma célula por
   coluna) e escondê-lo por COLAPSO em vez de posicionamento — linha de altura
   zero, sem padding, borda ou texto visível. Continua no DOM e legível por
   leitores de tela, mas agora define a grade de colunas. */
.ci-wrapper .fc .fc-list-table thead {
    position: static !important;
    left: auto !important;
}

.ci-wrapper .fc .fc-list-table thead th {
    /* Colapso total: sem isto o cabeçalho volta a ser visível como uma
       faixa de texto no topo da lista. */
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
}

.ci-wrapper .fc .fc-list-table thead th:nth-child(1) { width: 0 !important; }
.ci-wrapper .fc .fc-list-table thead th:nth-child(2) { width: 0 !important; }
.ci-wrapper .fc .fc-list-table thead th:nth-child(3) { width: auto !important; }

/* Coluna do traço colorido: removida do layout. A cor da categoria já aparece
   na tag da seção (à direita do título), então o traço era redundante e só
   afastava o título do horário. A <td> continua no DOM (o FullCalendar a
   monta sempre), mas colapsada em largura/padding zero. */
.ci-wrapper .fc .fc-list-event-graphic {
    width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.ci-wrapper .fc .fc-list-event-dot { display: none !important; }

.ci-wrapper .fc .fc-list-empty {
    background: transparent;
    color: #888;
    font-size: 13px;
    font-style: italic;
}

/* Conteúdo customizado dos itens da lista.
   Ordem: título (esquerda) → horário → categoria (encostada na direita), tudo
   na MESMA linha. Título e categoria formam colunas visuais constantes; o
   horário fica entre os dois com largura fixa, para que as categorias também
   se alinhem de cima a baixo mesmo com horários de tamanhos diferentes. */
.ci-lista-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 14px;
}

.ci-lista-titulo {
    /* Cresce para empurrar horário e categoria até a direita e encolhe (com
       reticências) quando o título é longo demais. */
    flex: 1 1 auto;
    min-width: 0;
    /* Sem negrito: no print de referência o título do evento é regular,
       deixando a categoria (à direita) como o único elemento com peso. */
    font-weight: 400;
    color: #1C4E80;
    font-size: 14px;
    /* Flex, e não bloco de texto: o título ganhou um vizinho — a estrela de
       evento em destaque, que vem depois dele. Com o corte por reticências
       aqui, um título longo engoliria a estrela junto com o fim do texto;
       movendo o corte para o `<span>` de dentro, quem encolhe é só o texto e
       a marca nunca some. */
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}

.ci-lista-titulo-texto {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Horário remontado dentro da célula do título (a coluna nativa do
   FullCalendar está colapsada — ver `.fc-list-event-time`). Largura fixa o
   bastante para "12:00 às 12:30" sem quebrar, mantendo a categoria alinhada
   em coluna. */
.ci-lista-hora {
    flex: 0 0 auto;
    width: 92px;
    text-align: right;
    font-size: 12px;
    font-weight: 400;
    color: #14609F;
    white-space: nowrap;
}

/* Badge outline na cor da seção. Antes era uma bolinha + texto cinza: a cor
   ficava reduzida a 8px e a etiqueta não se lia como um rótulo. A cor vem
   inline do JS (borda e texto), já ajustada para contraste (`corLegivel`). */
/* Coluna de largura FIXA para a categoria. A etiqueta continua do tamanho do
   seu texto, mas dentro de uma coluna constante e encostada à direita: assim
   as etiquetas se alinham pela direita (como já faziam) E o horário, que vem
   antes, para de dançar conforme o nome da categoria — "Pós-Graduação" e
   "Eventos Institucionais" empurravam o horário para posições diferentes em
   cada linha. */
.ci-lista-tag-col {
    flex: 0 0 156px;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.ci-lista-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* Não pode encolher: com `flex-shrink` a etiqueta perdia espaço para o
       título e sumia por trás dele em eventos com nome longo — a categoria
       é a informação que menos se pode dar ao luxo de desaparecer aqui. */
    flex: 0 1 auto;
    max-width: 100%;
    padding: 2px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 500;
    color: #5b6b7a;
    /* Esmaecida em repouso para não competir com o título — uma coluna inteira
       de etiquetas coloridas em força total puxa mais o olho que o próprio
       evento. Ao passar o mouse, a linha em foco recupera a cor cheia. */
    opacity: .48;
    transition: opacity .15s ease;
}

.ci-wrapper .fc .fc-list-event:hover .ci-lista-tag { opacity: 1; }

.ci-lista-tag-texto {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Aviso de seção indisponível
   O calendário passou a sair COM o que funcionou quando uma caixa falha, em
   vez de sumir inteiro (ver ci_buscar_mes no PHP). Este aviso é a outra
   metade dessa decisão: servir dados incompletos só é aceitável se quem olha
   souber que estão incompletos — senão o site mente por omissão, e "não tem
   evento externo esta semana" vira indistinguível de "a seção está fora do ar".
   Tom vermelho, e não âmbar como o aviso de filtro: filtro é escolha da
   pessoa, isto é defeito do sistema.
--------------------------------------------------------------------------- */
.ci-aviso-secoes {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    margin: 10px 14px;
    padding: 9px 12px;
    border: 1px solid #f3cfcf;
    border-left: 3px solid #C0392B;
    border-radius: 6px;
    background: #fdf1f0;
    color: #8a3126;
    font-size: 12px;
    line-height: 1.4;
}
.ci-aviso-secoes[hidden] { display: none; }
.ci-aviso-secoes > svg { flex-shrink: 0; color: #C0392B; }
.ci-aviso-secoes-texto { flex: 1 1 auto; min-width: 0; }
.ci-aviso-secoes-lista { font-weight: 700; }

/* ---------------------------------------------------------------------------
   Aviso de filtro escondendo tudo
   Um calendário vazio por causa do filtro era visualmente idêntico a um
   período sem eventos. Como o filtro fica salvo no navegador, a pessoa podia
   abrir o calendário vazio indefinidamente sem nenhuma pista da causa.
--------------------------------------------------------------------------- */
.ci-aviso-filtro {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    /* O recuo superior evita que o aviso encoste na barra de filtros logo
       acima — sem ele os dois blocos pareciam um só. */
    margin: 10px 14px;
    padding: 9px 12px;
    border: 1px solid #f0dca8;
    border-left: 3px solid #E0A93B;
    border-radius: 6px;
    background: #fdf7e8;
    color: #7a5c1e;
    font-size: 12px;
    line-height: 1.4;
}
.ci-aviso-filtro[hidden] { display: none; }
.ci-aviso-filtro > svg { flex-shrink: 0; color: #E0A93B; }
.ci-aviso-filtro-texto { flex: 1 1 auto; min-width: 0; }

.ci-container .ci-aviso-filtro-acao {
    flex-shrink: 0;
    background: #1C4E80 !important;
    border: none !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    cursor: pointer;
    width: max-content !important;
    transition: background 0.15s;
}
.ci-container .ci-aviso-filtro-acao:hover,
.ci-container .ci-aviso-filtro-acao:focus-visible {
    background: #14609F !important;
    outline: none;
}

/* Badge em alarme: nenhuma seção visível. Um "0" em azul discreto passa por
   decoração; em vermelho ele é lido como estado anormal. */
.ci-acao-badge--zero {
    background: #C0392B;
}

/* ---------- Loader ---------- */
.ci-loader {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(249,249,249,.75);
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.ci-loader.ativo { display: flex; }
.ci-loader { flex-direction: column; gap: 10px; }

.ci-spinner {
    width: 36px; height: 36px;
    border: 4px solid #dce6f0;
    border-top-color: #14609F;
    border-radius: 50%;
    animation: ci-spin 0.7s linear infinite;
}

@keyframes ci-spin { to { transform: rotate(360deg); } }

/* ---------- Painel de detalhes (dentro do wrapper) ---------- */
.ci-modal-painel {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(28,78,128,.22);
    /* `align-items: center` + rolagem corta o TOPO da modal quando ela é mais
       alta que o painel (o excesso vai para cima do início da área rolável e
       fica inalcançável). `flex-start` + `margin: auto` na modal centraliza
       quando cabe e ancora no topo quando não cabe. */
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}
.ci-modal-painel.aberto { display: flex; }

.ci-modal {
    background: #F9F9F9;
    border-radius: 12px;
    max-width: 440px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    position: relative;
    animation: ci-modal-in 0.2s ease;
    /* A modal nunca passa da altura do calendário: cabeçalho e rodapé ficam
       fixos e o CORPO rola. Sem isto, um convite de reunião do Teams (data,
       hora, local, botão e o bloco de descrição) crescia além do painel e o
       título e o rodapé saíam da tela. */
    margin: auto;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.ci-modal-cabecalho,
.ci-modal-rodape { flex: 0 0 auto; }

@keyframes ci-modal-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Fechar: botão de ícone do mesmo tamanho do "voltar", alinhado à linha do
   título. Antes era um "×" de 22px solto no canto, maior que tudo à volta. */
.ci-container .ci-modal-fechar {
    position: absolute;
    top: 10px;
    right: var(--ci-modal-btn-dir);
    width: var(--ci-modal-btn) !important;
    height: var(--ci-modal-btn) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.14) !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 17px !important;
    line-height: 1 !important;
    color: #F9F9F9 !important;
    cursor: pointer;
    z-index: 2;
    padding: 0 !important;
    transition: background 0.15s, color 0.15s;
}
.ci-container .ci-modal-fechar:hover,
.ci-container .ci-modal-fechar:focus-visible {
    background: rgba(255,255,255,0.28) !important;
    color: #FFCD00 !important;
    outline: none;
}

/* Voltar: à ESQUERDA do título, na mesma linha — antes ficava numa linha
   própria acima, sem alinhamento com nada. */
.ci-modal-linha-titulo {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.ci-container .ci-modal-voltar {
    flex-shrink: 0;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.14) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #F9F9F9 !important;
    cursor: pointer;
    padding: 0 !important;
    transition: background 0.15s, color 0.15s;
}
.ci-container .ci-modal-voltar:hover,
.ci-container .ci-modal-voltar:focus-visible {
    background: rgba(255,255,255,0.28) !important;
    color: #FFCD00 !important;
    outline: none;
}

/* O recuo à direita é a LARGURA DOS DOIS BOTÕES flutuantes mais uma folga —
   ver as variáveis em `.ci-container`. Escrito como conta, e não como o 54px
   de antes, que só cobria um deles. */
.ci-modal-cabecalho {
    padding: 12px
             calc(var(--ci-modal-btn-dir) + 2 * var(--ci-modal-btn)
                  + var(--ci-modal-btn-gap) + var(--ci-modal-btn-folga))
             12px 20px;
    background: #1C4E80;
    color: #F9F9F9;
}

.ci-modal-cabecalho .ci-modal-titulo {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
}

.ci-modal-tags { margin-top: 6px; }
.ci-modal-tags:empty { display: none; }

.ci-modal-cabecalho .ci-modal-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    padding: 1px 7px;
    border-radius: 8px;
    /* Um evento pode pertencer a mais de uma seção (mais de uma categoria no
       Outlook) e ganhar várias tags lado a lado — daí o espaçamento à direita
       e o wrap, para não estourar a largura do cabeçalho do modal. */
    margin-right: 4px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Rodapé discreto: substitui o ícone "i" do cabeçalho. Mesma informação
   (qual setor cadastrou o evento), mas sempre visível — não dependia de a
   pessoa descobrir que havia um tooltip escondido. */
.ci-modal-rodape {
    padding: 9px 20px 12px;
    border-top: 1px solid #e6eef7;
    background: #f3f7fb;
    font-size: 11px;
    font-weight: 400;
    color: #8a99a8;
    line-height: 1.4;
}
.ci-modal-rodape:empty { display: none; }

.ci-modal-corpo {
    padding: 16px 20px;
    flex: 1 1 auto;
    min-height: 0;      /* sem isto o flex item não encolhe e não rola */
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Detalhes sem ícone — estilo "label: valor".
   Sem linha divisória e com espaçamento curto: são três a quatro linhas de
   duas palavras cada, e um traço entre cada uma transformava um bloco de
   dados em uma tabela cheia de régua. A hierarquia já vem do rótulo azul. */
.ci-detalhe-linha {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0;
    font-size: 13px;
    color: #333;
}

.ci-detalhe-label {
    color: #14609F;
    font-weight: 600;
    min-width: 80px;
    flex-shrink: 0;
    font-size: 12px;
}

.ci-detalhe-valor {
    color: #222;
    flex: 1;
    line-height: 1.5;
}

/* A descrição é o único campo que pode ter parágrafos, e precisa respirar
   depois das linhas curtas de data/hora/local. */
.ci-detalhe-linha--descricao {
    display: block;
    margin-top: 10px;
    padding-top: 0;
}

/* Régua no lugar do rótulo "Descrição" (v3.4.2): separa os dados do evento do
   corpo do convite sem gastar uma linha de texto. */
.ci-container hr.ci-descricao-regua {
    border: 0;
    border-top: 1px solid #e6eef7;
    height: 0;
    margin: 0 0 10px;
    padding: 0;
    background: none;
}

/* ---------------------------------------------------------------------------
   Descrição do evento (corpo do convite do Outlook)
   O conteúdo vem higienizado do servidor (ver `ci_sanitizar_descricao`): sem
   style e sem class, então tudo aqui é o CSS do site.
   --------------------------------------------------------------------------- */
.ci-descricao {
    /* Teto de altura + rolagem própria: descrição longa é comum (convite com
       pauta, lista de inscritos, assinatura) e sem isto ela empurrava o rodapé
       para fora da tela — a modal virava uma página. */
    /* 160px ≈ 8 linhas: o suficiente para ver do que trata o convite sem
       empurrar o rodapé para fora. Era 260px, e num convite do Teams (que traz
       separadores, ID e senha da reunião) isso sozinho estourava a modal. */
    max-height: 160px;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
}
/* Só imagem, sem texto (v3.4.5): o teto de texto não se aplica — o cartaz É a
   descrição. Quem limita a altura total continua sendo a modal. */
.ci-descricao--so-imagem { max-height: 340px; }
.ci-descricao--so-imagem .ci-descricao-img { max-height: 320px; }

.ci-descricao:focus-visible { outline: 2px solid #14609F; outline-offset: 2px; }

/* Só quando há transbordo (classe posta pelo JS): a borda e o recuo existem
   para avisar que aquilo rola, e em descrição de duas linhas seriam enfeite. */
.ci-descricao--rolavel {
    border-left: 2px solid #e6eef7;
    padding: 0 10px 0 10px;
    /* Sombra de "tem mais coisa aqui embaixo" presa ao fim da área rolável. */
    background:
        linear-gradient(#fff 30%, rgba(255,255,255,0)) top    / 100% 20px no-repeat,
        linear-gradient(rgba(255,255,255,0), #fff 70%) bottom / 100% 20px no-repeat,
        radial-gradient(farthest-side at 50% 100%, rgba(28,78,128,.14), rgba(28,78,128,0)) bottom / 100% 8px no-repeat;
    background-attachment: local, local, scroll;
}

.ci-descricao > *:first-child { margin-top: 0; }
.ci-descricao > *:last-child  { margin-bottom: 0; }
.ci-descricao p  { margin: 0 0 8px; }
.ci-descricao ul,
.ci-descricao ol { margin: 0 0 8px; padding-left: 20px; }
.ci-descricao li { margin-bottom: 2px; }
.ci-descricao a  { color: #14609F; text-decoration: underline; }
.ci-descricao table { border-collapse: collapse; max-width: 100%; }
.ci-descricao td,
.ci-descricao th { border: 1px solid #e6eef7; padding: 3px 6px; text-align: left; }

/* Imagem do convite vira miniatura clicável. O original costuma ter largura de
   e-mail (1000px+): sem teto ela estoura a modal; sem o clique não haveria
   como ler nada nela. O clique expande a própria modal para tela cheia (ver
   JS `prepararDescricao`/`expandirModal`), não abre em nova guia — por isso
   o wrapper agora é um <button>, não um <a>, e precisa resetar a aparência
   nativa de botão do navegador. */
.ci-descricao-img-link {
    display: inline-block;
    margin: 4px 6px 4px 0;
    line-height: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #dbe6f2;
    transition: border-color .15s, box-shadow .15s;
    background: none;
    padding: 0;
    font: inherit;
    cursor: zoom-in;
}
.ci-descricao-img-link:hover,
.ci-descricao-img-link:focus-visible {
    border-color: #14609F;
    box-shadow: 0 2px 8px rgba(28,78,128,.18);
    outline: none;
}
.ci-descricao-img {
    display: block;
    /* v3.4.5: 190x130 era pequeno demais para o caso que motivou tudo isto —
       o convite que É um cartaz. Agora ocupa a largura da caixa (com teto de
       altura, para não empurrar o resto) e o clique expande a modal para
       tela cheia, onde o teto de altura é removido (ver
       `.ci-modal--cheia .ci-descricao-img` mais abaixo). */
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
}

/* Anexos de imagem que o corpo do convite não referencia (quem arrastou a
   imagem para o convite em vez de colar no texto). */
.ci-descricao-imagens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   Link de reunião
   Em reunião online o botão É o valor do campo "Local": o texto que vinha do
   Outlook ("Reuniões do Microsoft Teams") repetia o que o botão já diz.
   --------------------------------------------------------------------------- */
.ci-modal-reuniao {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}

/* Link em texto (v3.4.2). O botão azul vinha com `!important` para vencer o
   tema da intranet, e era justamente esse peso que quebrava o layout do site.
   Um link herda a tipografia da modal e não disputa nada com o tema.
   Discreto (v3.4.4): peso normal, azul apagado e sublinhado fino — é um
   destino, não uma chamada para ação. O domínio saiu da linha: sendo um link
   de verdade, o próprio navegador mostra para onde vai ao passar o mouse
   (e o `title` diz que abre em nova guia). */
.ci-container .ci-link-reuniao {
    color: #4a7296 !important;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: #c3d5e6;
    text-underline-offset: 2px;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 13px;
}
.ci-container .ci-link-reuniao:hover,
.ci-container .ci-link-reuniao:focus-visible {
    color: #14609F !important;
    text-decoration-color: #14609F;
}

/* Linha "Local" quando o valor é o botão: o rótulo alinha pelo topo, não pela
   linha de base de um botão de 34px de altura. */
.ci-detalhe-linha--local {
    align-items: baseline;
    padding: 2px 0;
}
.ci-detalhe-linha--local .ci-modal-reuniao { margin: 0; }
/* Sala física do evento híbrido: fica na linha de cima, o link embaixo. */
.ci-local-presencial {
    display: block;
    margin: 0 0 2px;
}

/* Para onde o botão leva. Um "Entrar na reunião" que abre um domínio externo
   sem dizer qual é um convite a clicar no escuro. */
.ci-reuniao-host {
    font-size: 11px;
    color: #8a99a8;
}
.ci-reuniao-host:empty { display: none; }

/* Itens da lista "+N mais" dentro do painel */
/* Virou <button> na v3.5.0 (acessibilidade): precisa desmanchar a aparência
   de botão que o tema da intranet impõe a todo <button> — inclusive
   `display: inline-block` e `text-align: center`, que juntos anulavam o
   `display: flex` de baixo e centralizavam hora/título no meio do item. Daí
   o `!important` também em `display` e `justify-content`, escopados com o
   `#ci-modal-corpo` para vencer regras de tema tão ou mais específicas. */
#ci-modal-corpo .ci-container .ci-dia-ev-item,
.ci-container .ci-dia-ev-item {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    padding: 6px 8px !important;
    font: inherit !important;
    color: inherit !important;
}

.ci-dia-ev-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-radius: 6px;
    padding: 7px 8px;
    background: #f0f5fb;
    margin-bottom: 6px;
    font-size: 13px;
    color: #1C4E80;
    transition: background 0.12s;
}
.ci-dia-ev-item:hover { background: #dce9f6; }

.ci-dia-ev-hora {
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------- Responsividade ---------- */

@media (max-width: 640px) {
    .ci-header { padding: 8px 12px; }
    .ci-mes-nome { font-size: 15px; }
    .ci-filtros-itens { padding: 6px 10px; gap: 5px 6px; }
    .ci-filtro-item { font-size: 11px; padding: 3px 8px 3px 6px; }
}

/* Grade compacta para containers estreitos (max 440px) */
@media (max-width: 440px) {
    .ci-wrapper .fc .fc-daygrid-body tr { height: 48px; }
    .ci-wrapper .fc .fc-daygrid-day-frame { padding: 2px 2px; }
    .ci-wrapper .fc .fc-daygrid-day-number { font-size: 10px; width: 20px; height: 20px; }
    .ci-wrapper .fc .fc-col-header-cell-cushion { font-size: 9px; padding: 3px 1px; }
    .ci-wrapper .fc .fc-daygrid-event { font-size: 9px; padding: 1px 2px; }
    .ci-wrapper .fc .fc-daygrid-more-link { font-size: 9px; padding: 1px 2px; }
    .ci-header { padding: 7px 10px; }
    .ci-mes-nome { font-size: 14px; }
}

/* ---------- Sem eventos / erro ---------- */
.ci-sem-eventos {
    display: block;
    font-size: 10px;
    color: #8d8d8d;
    font-style: normal;
    font-weight: 400;
    padding: 2px 2px;
    margin-top: 2px;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.ci-erro-ajax {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 15;
    padding: 14px 16px;
    text-align: center;
    color: #c0392b;
    font-size: 13px;
    font-weight: 600;
    background: #fdf3f3;
    border: 1px solid #f2d4d0;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(28,78,128,0.10);
}

/* ---------------------------------------------------------------------------
   v3.5.1 — leitura da lista, busca no corpo e modal expansível
   --------------------------------------------------------------------------- */

/* Recuo do título do evento. Sem ele, o título começava na mesma coluna do
   cabeçalho da data ("1 de setembro, terça-feira") e as duas linhas se liam
   como uma coisa só; o recuo mostra a hierarquia sem precisar de mais peso
   tipográfico. */
.ci-lista-titulo { padding-left: 14px; }

/* Etiqueta "Hoje" no cabeçalho do dia, na lista. Azul escuro com texto amarelo
   é o par de identidade do calendário (mesmo do cabeçalho), e aqui ele marca a
   única linha que a pessoa procura ao abrir a agenda. */
.ci-wrapper .fc .fc-list-day.fc-day-today .fc-list-day-text::after {
    content: 'Hoje';
    display: inline-block;
    margin-left: 8px;
    /* Sem padding vertical e com altura de linha travada: a etiqueta acompanha
       a linha do texto da data em vez de crescer acima e abaixo dela. */
    padding: 0 7px;
    height: 15px;
    line-height: 15px;
    border-radius: 999px;
    background: #1C4E80;
    color: #FFCD00;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    /* baseline, não middle: alinha pelo pé do texto ao lado. */
    vertical-align: baseline;
    position: relative;
    top: -1px;
}

/* Alternador "Outros meses" da barra de busca. */
.ci-container .ci-busca-outros-meses {
    flex: 0 0 auto !important;
    width: max-content !important;
    height: 30px !important;
    padding: 0 10px !important;
    border: 1px solid #c8dcea !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #14609F !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    cursor: pointer;
    white-space: nowrap;
}
.ci-container .ci-busca-outros-meses:hover,
.ci-container .ci-busca-outros-meses:focus-visible { border-color: #a9c8e0 !important; outline: none; }
/* Ligado: fundo cheio, para não restar dúvida de que a busca saiu do mês. */
.ci-container .ci-busca-outros-meses--ativo {
    background: #14609F !important;
    border-color: #14609F !important;
    color: #fff !important;
}
.ci-container .ci-busca-outros-meses[hidden] { display: none !important; }

/* Corpo de resultados: ocupa o lugar do calendário. */
.ci-fc--oculto { display: none !important; }

.ci-resultados-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: #fff;
}
.ci-resultados-corpo[hidden] { display: none !important; }

.ci-resultados-cabecalho {
    padding: 10px 14px;
    background: #f3f7fb;
    border-bottom: 1px solid #e6eef7;
    font-size: 12px;
    font-weight: 600;
    color: #5b6b7a;
}

.ci-container .ci-resultados-acao {
    display: block !important;
    width: 100% !important;
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 1px solid #e6eef7 !important;
    background: #fff !important;
    color: #14609F !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: left !important;
    cursor: pointer;
}
.ci-container .ci-resultados-acao:hover,
.ci-container .ci-resultados-acao:focus-visible { background: #eef3f8 !important; outline: none; }

/* Item de resultado dentro do corpo (a mesma marcação do antigo dropdown). */
.ci-resultados-corpo .ci-busca-item { border-bottom: 1px solid #eef3f8; }

/* Painel em tela cheia pela API do navegador: ele passa a ser o elemento
   raiz da tela, então precisa de fundo opaco (atrás dele não há mais o
   calendário) e de padding próprio. */
#ci-modal-painel:fullscreen,
#ci-modal-painel:-webkit-full-screen {
    background: #dbe7f2;
    padding: 24px;
}
#ci-modal-painel:fullscreen .ci-modal,
#ci-modal-painel:-webkit-full-screen .ci-modal {
    max-width: 1100px !important;
    width: 100% !important;
    height: 100%;
    max-height: 100%;
}

/* Reserva: navegador sem API de tela cheia, ou iframe sem permissão. Aqui a
   modal ocupa o calendário — melhor do que nada, e é o comportamento antigo. */
.ci-modal-painel--reserva .ci-modal { max-width: 100% !important; }

/* Modal expandida: o corpo já rola sozinho (ver .ci-modal-corpo), então só o
   teto muda. */
.ci-modal.ci-modal--cheia {
    max-width: 100% !important;
    width: 100% !important;
    height: 100%;
    max-height: 100%;
    border-radius: 8px;
}
.ci-modal--cheia .ci-descricao,
.ci-modal--cheia .ci-descricao--so-imagem { max-height: none; }
.ci-modal--cheia .ci-descricao-img { max-height: none; max-width: 100%; }

/* Botão de expandir, ao lado do fechar. */
.ci-container .ci-modal-expandir {
    position: absolute;
    top: 10px;
    /* Encostado no "fechar", à esquerda dele. */
    right: calc(var(--ci-modal-btn-dir) + var(--ci-modal-btn) + var(--ci-modal-btn-gap));
    width: var(--ci-modal-btn) !important;
    height: var(--ci-modal-btn) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    background: rgba(255,255,255,0.14) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #F9F9F9 !important;
    cursor: pointer;
    z-index: 2;
}
.ci-container .ci-modal-expandir:hover,
.ci-container .ci-modal-expandir:focus-visible {
    background: rgba(255,255,255,0.28) !important;
    outline: none;
}

/* ---------------------------------------------------------------------------
   Lista em contêiner estreito (celular)
   ---------------------------------------------------------------------------
   Este bloco precisa ficar DEPOIS das regras-base de `.ci-lista-*` e do recuo
   do título da v3.5.1 — as duas coisas estão acima. A versão anterior destas
   regras morava junto da declaração do contêiner (`container-type`, bem no
   começo do arquivo), e como `@container` NÃO acrescenta especificidade, tudo
   que colidia com a base perdia por ordem de cascata: `flex` da coluna da
   etiqueta, `width` do horário e `align-items` eram simplesmente ignorados.

   Sobrava só o `flex-direction: column` — e ele sozinho é o que estragava a
   tela. Em coluna, o eixo principal vira o VERTICAL: a `flex-basis: 156px` da
   coluna da etiqueta, escrita para ser largura, passava a valer como ALTURA, e
   a etiqueta (que estica por `align-items: stretch`) virava um balão de 156px
   de altura. Era o "padding gigante" que se via no celular.

   O arranjo agora é em duas linhas, com `wrap` em vez de `column`:

       Título do evento ............... 14h às 16h
           ( Categoria )
--------------------------------------------------------------------------- */
@container ci (max-width: 460px) {
    .ci-lista-info {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        /* 4px entre as duas linhas, 10px entre título e horário. */
        gap: 4px 10px;
    }

    /* `flex-basis: 0`, e não `auto` como na versão larga. Num contêiner com
       `wrap`, o navegador decide as QUEBRAS antes de encolher qualquer item:
       ele soma os tamanhos-base e, se não couber, joga o próximo item para a
       linha seguinte — o encolhimento só acontece depois, dentro da linha já
       formada. Com base `auto` o tamanho-base do título é o texto inteiro, de
       modo que um título longo empurrava o horário para uma terceira linha em
       vez de simplesmente truncar (visto em 320px com "Workshop de
       Contratações Públicas"). Base 0 tira o título da conta da quebra: ele
       cresce para o que sobrar da linha e corta com reticências. */
    .ci-lista-titulo { flex: 1 1 0; }

    /* O horário fica na MESMA linha do título, encostado à direita — não numa
       linha só dele. Largura pelo conteúdo: a coluna fixa de 92px existe para
       alinhar horários de linhas diferentes quando tudo cabe lado a lado, e
       aqui, com a etiqueta embaixo, não há nada para alinhar.
       `margin-left: auto` porque o título pode não crescer o bastante (ele é
       `flex: 1 1 auto`, mas um título curto para de empurrar). */
    .ci-lista-hora {
        width: auto;
        text-align: right;
        margin-left: auto;
    }

    /* Linha inteira: é a base 100% que joga a etiqueta para a segunda linha.
       O recuo repete o do título, para a etiqueta nascer embaixo do texto do
       evento e não na borda da célula. */
    .ci-lista-tag-col {
        flex: 0 0 100%;
        justify-content: flex-start;
        padding-left: 14px;
    }

    /* Sem a coluna fixa, quem limita a etiqueta é a largura disponível. E a
       altura passa a ser a do conteúdo (`stretch` numa linha de itens de
       alturas diferentes é o que a esticava). */
    .ci-lista-tag {
        max-width: 100%;
        align-self: flex-start;
    }
}

/* Etiqueta de categoria em aparelho SEM hover (celular, tablet).
   Em repouso a etiqueta vive esmaecida (`opacity: .48`) e recupera a cor cheia
   quando o mouse passa pela linha — a ideia era uma lista calma, em que a cor
   só acende onde o olho já está. Só que num aparelho de toque o hover nunca
   acontece: a etiqueta fica em 48% para sempre, e o contraste que `corLegivel`
   calculou no JS para ela ser legível é justamente o que a opacidade desfaz.
   Sem o estado que devolvia a cor, o estado de repouso tem que já ser legível.
   O critério é `hover: none`, e não largura: uma coluna estreita num desktop
   continua tendo mouse, e lá o esmaecido segue fazendo sentido. */
@media (hover: none) {
    .ci-lista-tag { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Barra de busca no celular
   ---------------------------------------------------------------------------
   Duas correções de toque, não de estética.

   1. `font-size: 16px` no campo de busca. Abaixo de 16px o Safari do iPhone
      dá ZOOM na página inteira ao focar um input — e não volta sozinho depois:
      a pessoa digita e fica com o calendário cortado na horizontal, tendo que
      dar pinça para voltar. 16px é o limiar exato em que o Safari não mexe.
      A altura sobe junto (34px) porque 16px num campo de 30px fica apertado.

   2. Os quatro botões de ação (categorias, destaques, atualizar, tela cheia)
      mediam 27x25px, encostados uns nos outros. Isso é metade do alvo mínimo
      confortável de toque, e eles ficam lado a lado — errar o vizinho é o
      resultado esperado, não o acidente. Aqui viram ~33x31px com mais folga
      entre eles; a busca é `flex: 1 1 auto` e cede a largura sozinha.
--------------------------------------------------------------------------- */
@container ci (max-width: 460px) {
    .ci-wrapper .ci-busca-input {
        height: 34px !important;
        line-height: 20px !important;
        font-size: 16px !important;
        padding: 6px 10px 6px 30px !important;
    }
    .ci-busca-icone { height: 34px; }

    .ci-container .ci-btn-acao { padding: 8px 9px !important; }
    .ci-acoes { gap: 4px; }
}

/* ---------------------------------------------------------------------------
   Painel de categorias mais baixo no celular
   ---------------------------------------------------------------------------
   Com as onze seções abertas, os chips empilham em SETE linhas e comem a tela
   inteira do telefone: era preciso rolar para chegar ao primeiro evento da
   agenda. O painel já rolava dentro de si (`overflow-y: auto`), mas com teto de
   160px — quase tudo.

   Aqui o teto cai para 92px, e o número não é redondo por acaso: a linha de
   chip mede 22px e o intervalo entre linhas, 5px. 92px mostra TRÊS linhas
   inteiras e a METADE da quarta. Uma linha cortada ao meio é o aviso de que há
   mais coisa abaixo — num telefone a barra de rolagem é sobreposta e só
   aparece enquanto o dedo arrasta, então ela não serve de sinal.

   O que este bloco NÃO faz é recolher o painel sozinho. Aberto ou fechado
   continua sendo escolha da pessoa, gravada no navegador por
   `aplicarRecolhido()` (`LS_FILTROS_RECOLHIDO`) — isto aqui só muda o tamanho
   do painel ABERTO. `.ci-filtros-itens--recolhida` tem duas classes contra a
   nossa uma, então o estado fechado continua vencendo e zerando a altura.

   `overscroll-behavior: contain`: ao chegar ao fim dos chips, o gesto parava e
   PASSAVA a rolar a página inteira por baixo — numa área de 92px num telefone
   isso acontece o tempo todo. Contido, o gesto morre no painel. */
@container ci (max-width: 460px) {
    .ci-filtros-itens {
        max-height: 92px;
        overscroll-behavior: contain;
    }
}

/* Botões/inputs travados durante uma consulta ao Graph em curso (ver
   `travarControlesConsulta` no JS). Só a aparência — o navegador já cuida de
   bloquear clique/foco via `disabled`. */
.ci-container .ci-header .ci-btn:disabled,
.ci-container .ci-header .ci-visao:disabled,
.ci-container .ci-btn-acao:disabled,
.ci-container .ci-busca-input:disabled,
.ci-container .ci-busca-outros-meses:disabled,
.ci-container .ci-aviso-filtro-acao:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ===========================================================================
   EVENTOS EM DESTAQUE (v3.6.0)
   ===========================================================================
   O editor aplica a categoria "Evento em destaque" no Outlook; o PHP devolve
   `destaque: true` e o JS marca o elemento com `.ci-evento--destaque` no
   `eventDidMount` — mesmo molde de `.ci-evento-vazio`, mais acima.

   Uma nota sobre o que NÃO se usa aqui: anel colorido no chip da grade. O
   `outline: 2px solid #FFCD00` já é o hover E o `:focus-visible` do chip (ver
   "Chips de evento na grade"). Um segundo anel fixo faria o mesmo elemento ter
   duas molduras concorrentes, e o amarelo ainda é a cor da seção Feriados.
   Na grade, quem marca o destaque é só a estrela. */

/* ---------- A estrela ---------- */
/* `inline-block`: transform do CSS não se aplica a inline não-substituído, e a
   animação de hover mais abaixo depende disso. */
.ci-estrela {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.14em;
    overflow: visible;   /* o contorno da variante clara, e o scale da animação */
}

/* Dentro do chip: pequena, e a cor vem do texto do próprio chip (branco, ou
   #1C4E80 no amarelo dos feriados) — ver `corTexto()` no JS.

   Sem `margin-right`: aqui a estrela é IRMÃ do horário dentro de
   `.fc-event-main`, que é flex com `gap: 4px` — a margem viraria espaço dobrado.
   E `align-self: center` porque aquele flex é `align-items: baseline`, e a
   linha de base de um SVG é a borda de baixo dele: pela baseline a estrela
   subiria acima do texto. */
.ci-wrapper .fc .fc-daygrid-event .ci-estrela--chip {
    width: 9px;
    height: 9px;
    align-self: center;
}

/* Fundo claro: lista, resultados de busca e lista do dia. Sem margem própria —
   nos três a estrela é filha de um flex com `gap` (5px nos títulos, 8px no item
   da lista do dia), e a margem entraria em cima do gap. */
.ci-estrela--clara {
    width: 13px;
    height: 13px;
}

/* Cabeçalho da modal, sobre #1C4E80. Aqui ela é inline dentro do <p> do título
   e vem DEPOIS dele, então a margem é à esquerda. */
.ci-estrela--escura {
    width: 15px;
    height: 15px;
    margin-left: 6px;
}

/* ---------- Linha em destaque na visão de lista ---------- */
/* No REPOUSO a linha não tem fundo. A primeira versão pintava o fundo âmbar o
   tempo todo e pesava demais: numa lista com vários destaques o realce virava
   o estado normal da tela, e a lista foi afinada para ser calma (ver o
   `font-weight: 400` do título e o `opacity: .48` da etiqueta).

   O âmbar migrou para o HOVER. A linha comum acende em azul (#eaf1f8); a linha
   em destaque acende em âmbar — mesma intensidade, cor diferente, e a
   diferença só aparece quando o olho já está ali. */
.ci-wrapper .fc .fc-list-event.ci-evento--destaque:hover td {
    background: #FDF6E7 !important;
}

/* Faixa lateral como PSEUDO-ELEMENTO POSICIONADO — nem `border-left`, nem
   `box-shadow`. As duas alternativas já foram testadas e descartadas neste
   arquivo, pelo marcador de "hoje" do cabeçalho de dia (ver o comentário lá):
   a borda ocupa espaço e, com `table-layout: fixed` e a primeira coluna em
   `width: 0`, empurra as colunas; e sombra em célula de tabela é justamente o
   que um tema de intranet zera — o próprio harness reproduz isso com
   `body.tema-hostil td { box-shadow: none !important }`.
   O pseudo-elemento não ocupa espaço E não depende de nenhuma propriedade que
   o tema costume mexer. */
.ci-wrapper .fc .fc-list-event.ci-evento--destaque td:first-child {
    position: relative;
}
.ci-wrapper .fc .fc-list-event.ci-evento--destaque td:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #B45309;
}

/* ---------- Dia que ESCONDE um destaque ---------- */
/* `dayMaxEventRows: 1` transforma todo dia com 2+ eventos na pílula
   "N eventos", sem desenhar chip nenhum. Sem esta marca, um evento em destaque
   num dia cheio ficaria invisível na grade — e dia cheio costuma ser dia
   importante. A classe vai no <td> do dia e a estrela é injetada dentro da
   pílula, as duas por `marcarDiasComDestaque()` no JS.

   A pílula tem `background: #1C4E80 !important; color: #fff !important`, então
   a estrela usa a variante 'chip' e sai branca por `currentColor`. */
.ci-wrapper .fc .fc-daygrid-more-link .ci-estrela--chip {
    width: 9px;
    height: 9px;
    margin-right: 3px;
}

/* ---------- Cintilar no hover do evento ---------- */
/* Gira e cresce um pouco, TRÊS vezes, e para — mesmo com o mouse parado em
   cima. Animação em loop infinito num item de lista é ruído que não desliga:
   o objetivo aqui é um aceno no momento em que a pessoa aponta o evento, não
   um chamariz permanente.

   A alternativa considerada era a estrela vazada enchendo no hover. Não vai:
   no chip ela tem 9px e é monocromática — um contorno fino sobre fundo
   colorido é um borrão —, e vazá-la no repouso enfraquece justamente o
   marcador que a coluna inteira usa para ser percorrida de olho.

   O gatilho é o EVENTO, não a estrela: a área de hover é a linha/chip inteira,
   que é o que a pessoa aponta. */
@keyframes ci-estrela-cintila {
    0%   { transform: rotate(0deg)   scale(1); }
    25%  { transform: rotate(-16deg) scale(1.25); }
    50%  { transform: rotate(12deg)  scale(1.18); }
    75%  { transform: rotate(-7deg)  scale(1.10); }
    100% { transform: rotate(0deg)   scale(1); }
}

.ci-wrapper .fc .fc-daygrid-event:hover .ci-estrela,
.ci-wrapper .fc .fc-daygrid-more-link:hover .ci-estrela,
.ci-wrapper .fc .fc-list-event:hover .ci-estrela,
.ci-container .ci-dia-ev-item:hover .ci-estrela,
.ci-container .ci-busca-item:hover .ci-estrela,
.ci-container .ci-busca-item--ativo .ci-estrela {
    animation: ci-estrela-cintila 0.45s ease-in-out 3;
}

/* O projeto já respeita esta preferência no botão "Atualizar" (ver
   `prefers-reduced-motion` mais acima). Não respeitá-la aqui seria incoerente,
   e girar um ícone é exatamente o tipo de movimento que ela existe para
   desligar. */
@media (prefers-reduced-motion: reduce) {
    .ci-wrapper .fc .fc-daygrid-event:hover .ci-estrela,
    .ci-wrapper .fc .fc-daygrid-more-link:hover .ci-estrela,
    .ci-wrapper .fc .fc-list-event:hover .ci-estrela,
    .ci-container .ci-dia-ev-item:hover .ci-estrela,
    .ci-container .ci-busca-item:hover .ci-estrela,
    .ci-container .ci-busca-item--ativo .ci-estrela {
        animation: none;
    }
}

/* ---------- Botão "somente destaques" ---------- */
/* Mesmo tratamento visual de `.ci-btn-filtros-toggle--ativo`: ligado, a
   estrela fica cheia e dourada; desligado, é só o contorno do ícone. */
.ci-container .ci-btn-destaque--ativo {
    background: #1C4E80 !important;
    color: #FFCD00 !important;
    border-color: #1C4E80 !important;
}
.ci-container .ci-btn-destaque--ativo svg {
    fill: currentColor;
    stroke: currentColor;
}

/* ---------- Telas estreitas ---------- */
/* Espelha o encolhimento do chip logo acima (`font-size: 9px; padding: 1px 2px`).
   Atenção ao testar: este bloco é @media, não @container — numa coluna estreita
   dentro de uma janela larga o chip NÃO encolhe, e a estrela tem que caber
   assim mesmo. */
@media (max-width: 440px) {
    .ci-wrapper .fc .fc-daygrid-event .ci-estrela--chip {
        width: 8px;
        height: 8px;
    }
    .ci-wrapper .fc .fc-daygrid-more-link .ci-estrela--chip {
        width: 8px;
        height: 8px;
        margin-right: 2px;
    }
}