/* ================================================================
   eventos.css — Conecta Bueno — Agenda Cultural
   Design alinhado com home.css · Paleta verde #0f2419→#6aad80
   ================================================================ */

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
    --green-900: #0f2419;
    --green-800: #1a3a2e;
    --green-700: #2d5a3d;
    --green-600: #3d7a52;
    --green-500: #4a9060;
    --green-400: #6aad80;
    --green-300: #9dcfb0;
    --green-200: #c8e6d4;
    --green-100: #e8f5ee;
    --green-50:  #f4faf7;

    --leaf-400: #4cc177;
    --leaf-500: #2f9e52;
    --leaf-700: #1f7a41;
    --leaf-900: #145c30;

    --clay-400: #e08a52;
    --clay-600: #c2703c;
    --clay-800: #96502a;

    --grey-100: #f3f4f6;
    --grey-200: #e5e7eb;
    --grey-300: #d1d5db;
    --grey-400: #9ca3af;
    --grey-500: #6b7280;
    --grey-600: #4b5563;
    --grey-700: #374151;
    --grey-900: #111827;

    --font-display: 'Poppins', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    --shadow-soft: 0 10px 26px rgba(20, 45, 30, 0.12);
    --shadow-card: 0 20px 50px rgba(20, 45, 30, 0.14);

    --off:    #f7f9f8;
    --border: #cce4d4;

    --amber:    #d97706;
    --amber-bg: #fef3c7;
    --red:      #dc2626;
    --red-bg:   #fee2e2;

    --sh-sm:    0 1px 4px rgba(0,0,0,.07);
    --sh-green: 0 4px 14px rgba(20,92,48,.3);

    --ease: cubic-bezier(.4,0,.2,1);
    --t1: .15s;
    --t2: .25s;
    --t3: .3s;

    --r6:  6px;
    --r8:  8px;
    --r10: 10px;
    --r12: 12px;
    --r16: 16px;
    --r99: 9999px;

    --header-h: 66px;
}

/* Garantir que elementos com o atributo hidden sejam realmente ocultos
    (autor CSS pode ter sobrescrito o comportamento padrão). */
[hidden] { display: none !important; }

/* ── Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    font-size: calc(15px * var(--a11y-text-scale, 1));
    line-height: 1.6;
    color: var(--grey-900);
    background: var(--off);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Garante que o body ocupe toda a altura sem travar o fixed do header */
    overflow-x: hidden;
}
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
img, svg { display: block; }
button { cursor: pointer; border: none; background: none; }
main { flex: 1; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ================================================================
   HERO — vídeo full-bleed, mesma técnica da home (cobre a tela
   inteira em qualquer dispositivo, sem depender de altura fixa).
   ================================================================ */
.ev-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ev-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.ev-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 920px 640px at 50% 46%, rgba(5,16,10,.66) 0%, rgba(5,16,10,.32) 52%, transparent 78%),
        linear-gradient(180deg, rgba(5,16,10,.22) 0%, rgba(5,16,10,.1) 34%, rgba(5,16,10,.4) 78%, rgba(5,16,10,.6) 100%);
    z-index: 1;
}

.ev-hero-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
    padding: 96px 24px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    color: white;
}

.ev-eyebrow {
    display: inline-block;
    font-size: calc(11.5px * var(--a11y-text-scale, 1));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--green-400);
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.ev-hero-title {
    font-family: var(--font-display);
    font-size: calc(clamp(36px, 6vw, 60px) * var(--a11y-text-scale, 1));
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.02;
    text-shadow: 0 10px 40px rgba(0,0,0,.55);
}

.ev-hero-subtitle {
    font-size: calc(16px * var(--a11y-text-scale, 1));
    line-height: 1.65;
    color: rgba(255,255,255,.9);
    text-shadow: 0 2px 12px rgba(0,0,0,.55);
    max-width: 460px;
}

.ev-hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ev-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--r10);
    font-size: calc(14.5px * var(--a11y-text-scale, 1));
    font-weight: 700;
    cursor: pointer;
    transition: all var(--t3) var(--ease);
}

.ev-hero-btn-primary {
    background: linear-gradient(135deg, var(--leaf-500), var(--leaf-900));
    color: white;
    border: 1.5px solid rgba(255,255,255,.2);
    box-shadow: 0 10px 26px rgba(20,92,48,.4);
}
.ev-hero-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.06);
    box-shadow: 0 14px 32px rgba(20,92,48,.5);
    color: white;
}

.ev-hero-btn-secondary {
    background: transparent;
    color: white;
    border: 1.5px solid rgba(255,255,255,.7);
}
.ev-hero-btn-secondary:hover {
    background: rgba(255,255,255,.14);
    border-color: white;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
    color: white;
}

/* Barra de busca da faixa branca */
.ev-search-bar {
    flex: 0 1 280px;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--grey-100);
    border: 1px solid rgba(19, 40, 29, 0.08);
    border-radius: var(--r99);
    padding: 10px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: box-shadow var(--t2), border-color var(--t2);
}

.ev-search-bar:focus-within {
    border-color: rgba(45,90,61,.35);
    box-shadow: 0 0 0 3px rgba(106,173,128,.18);
}

.ev-search-bar svg     { color: var(--grey-400); flex-shrink: 0; }
.ev-search-input       { flex: 1; border: none; outline: none; font-size: calc(14px * var(--a11y-text-scale, 1)); color: var(--grey-900); background: transparent; }
.ev-search-input::placeholder { color: var(--grey-400); }

.ev-search-clear {
    padding: 3px;
    color: var(--grey-400);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--t1), background var(--t1);
}
.ev-search-clear:hover { color: var(--grey-700); background: var(--grey-100); }

/* ── Faixa discreta com os números da agenda, logo abaixo do hero ── */
.ev-agenda-strip {
    position: relative;
    background: white;
    border-bottom: 1px solid var(--grey-200);
    box-shadow: 0 2px 14px rgba(20,45,30,.05);
    transition: background var(--t3) var(--ease), border-color var(--t3) var(--ease), box-shadow var(--t3) var(--ease);
}

/* Faixa de acento à esquerda no estado "ao vivo" — reforça o alerta sem
   depender só da mudança de cor de fundo. */
.ev-agenda-strip::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--red);
    opacity: 0;
    transition: opacity var(--t3) var(--ease);
}
.ev-agenda-strip-live::before { opacity: 1; }

.ev-agenda-strip-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
}

.ev-agenda-strip-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ev-agenda-strip-icon {
    color: var(--green-600);
    flex-shrink: 0;
    transition: color var(--t3) var(--ease);
}
.ev-agenda-strip-live .ev-agenda-strip-icon { color: var(--red); }

.ev-agenda-divider {
    width: 1px;
    height: 26px;
    background: var(--grey-200);
    flex-shrink: 0;
    transition: background var(--t3) var(--ease);
}
.ev-agenda-strip-live .ev-agenda-divider { background: rgba(220,38,38,.2); }

.ev-agenda-stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ev-agenda-stat strong {
    font-family: var(--font-display);
    font-size: calc(22px * var(--a11y-text-scale, 1));
    font-weight: 800;
    color: var(--grey-900);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.ev-agenda-stat span {
    font-size: calc(12.5px * var(--a11y-text-scale, 1));
    color: var(--grey-500);
    font-weight: 600;
    white-space: nowrap;
}

.ev-summary-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: var(--r99);
    background: var(--green-50);
    border: 1px solid var(--green-200);
    color: var(--leaf-700);
    font-size: calc(10px * var(--a11y-text-scale, 1));
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all var(--t3) var(--ease);
}

/* Ponto pulsante "ao vivo" — mesma linguagem visual dos badges vermelhos
   (.ev-badge-hoje, toasts de erro) já usados no resto da agenda. */
.ev-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    margin-right: 5px;
    position: relative;
    flex-shrink: 0;
}
.ev-live-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--red);
    animation: liveDotPulse 1.6s ease-out infinite;
}
@keyframes liveDotPulse {
    0%   { transform: scale(.6); opacity: .9; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* Estado "ao vivo": algum evento está acontecendo hoje (ver isLiveNow()
   em eventos.js). Reaproveita o vermelho já usado para urgência (badge
   "Hoje", toasts de erro) em vez de introduzir uma cor nova. */
.ev-agenda-strip-live { background: var(--red-bg); border-bottom-color: rgba(220,38,38,.25); }
.ev-agenda-strip-live .ev-summary-pill { background: white; border-color: rgba(220,38,38,.35); color: var(--red); }

.ev-agenda-strip-meta-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.ev-agenda-strip-meta {
    color: var(--grey-500);
    font-size: calc(12.5px * var(--a11y-text-scale, 1));
    line-height: 1.5;
    flex: 1 1 auto;
    min-width: 200px;
}
.ev-agenda-strip-live .ev-agenda-strip-meta { color: var(--red); font-weight: 600; }

.ev-agenda-strip-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r99);
    background: var(--green-700);
    color: white;
    font-size: calc(12.5px * var(--a11y-text-scale, 1));
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--t2) var(--ease);
}
.ev-agenda-strip-cta:hover { background: var(--green-800); transform: translateY(-1px); }
.ev-agenda-strip-live .ev-agenda-strip-cta { background: var(--red); }
.ev-agenda-strip-live .ev-agenda-strip-cta:hover { background: #b91c1c; }

/* ================================================================
   BARRA DE FILTROS — sticky
   ================================================================ */
.ev-filters-bar {
    background: white;
    border-bottom: 1px solid var(--grey-200);
    position: sticky;
    top: var(--header-h);
    /* Abaixo do .site-header (800) para nao cobrir o menu do usuario. */
    z-index: 700;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.ev-filters-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Cada linha da barra: busca+período na primeira, categorias+visualização
   na segunda — em vez de deixar os 7 controles quebrarem de forma
   imprevisível numa única linha. */
.ev-filters-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
}

/* Agrupa visualização + contador à direita da segunda linha */
.ev-filters-row-end {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Separador visual entre grupos */
.ev-filter-sep {
    width: 1px;
    height: 24px;
    background: var(--grey-200);
    flex-shrink: 0;
}

/* Tabs de período. min-width:0 é o que permite ao grupo encolher dentro
   da linha e o próprio flex-wrap (abaixo) finalmente quebrar os botões
   em vez de estourar a largura da tela. */
.ev-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }

.ev-tab {
    padding: 8px 16px;
    border-radius: var(--r99);
    font-size: calc(13.5px * var(--a11y-text-scale, 1));
    font-weight: 600;
    color: var(--grey-500);
    background: white;
    border: 1.5px solid transparent;
    transition: all var(--t2) var(--ease);
    white-space: nowrap;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
}
.ev-tab:hover      { background: var(--green-100); color: var(--green-700); border-color: var(--green-200); }
.ev-tab-active     { background: linear-gradient(135deg, var(--leaf-500), var(--leaf-900)); color: white; box-shadow: var(--sh-green); border-color: var(--leaf-900); }
/* Reafirma o visual "ativo" no hover: .ev-tab:hover tem a mesma especificidade
   (classe + :hover) e, sem isso, "apaga" o fundo/cor da aba selecionada
   ao passar o mouse. */
.ev-tab-active:hover {
    background: linear-gradient(135deg, var(--leaf-500), var(--leaf-900));
    color: white;
    border-color: var(--leaf-900);
    filter: brightness(1.06);
}

/* Categorias — mesmo raciocínio de min-width:0 que .ev-tabs acima */
.ev-cats { display: flex; gap: 7px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }

/* A categoria vem crua do Firestore (ex.: "show"); capitaliza na exibição
   em vez de depender de como cada admin digitou o cadastro. */
.ev-cat,
.ev-card-cat,
.ev-tl-cat,
.ev-modal-hero-cat {
    text-transform: capitalize;
}

.ev-cat {
    padding: 7px 15px;
    border-radius: var(--r99);
    font-size: calc(13px * var(--a11y-text-scale, 1));
    font-weight: 600;
    color: var(--grey-700);
    border: 1.5px solid var(--grey-200);
    background: white;
    transition: all var(--t2) var(--ease);
    white-space: nowrap;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
}
.ev-cat:hover       { border-color: var(--green-400); color: var(--green-700); background: var(--green-50); transform: translateY(-1px); }
.ev-cat-active      { background: linear-gradient(135deg, var(--leaf-500), var(--leaf-900)); border-color: var(--leaf-900); color: white; font-weight: 700; box-shadow: var(--sh-green); }
/* Mesmo caso de .ev-tab-active:hover acima — mantém o fundo/cor ativos
   em vez de deixar .ev-cat:hover (mesma especificidade) sobrescrever. */
.ev-cat-active:hover {
    background: linear-gradient(135deg, var(--leaf-500), var(--leaf-900));
    border-color: var(--leaf-900);
    color: white;
    filter: brightness(1.06);
}

/* Toggle de visualização */
.ev-view-toggle {
    display: flex;
    gap: 2px;
    background: var(--grey-100);
    border-radius: var(--r8);
    padding: 3px;
    flex-shrink: 0;
}

.ev-view-btn {
    padding: 7px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-500);
    transition: all var(--t1);
}
.ev-view-btn:hover  { color: var(--grey-700); }
.ev-view-active     { background: white; color: var(--green-700); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.ev-view-active:hover { color: var(--green-700); }

/* Contador */
.ev-count {
    font-size: calc(12.5px * var(--a11y-text-scale, 1));
    font-weight: 600;
    color: var(--grey-400);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ================================================================
   LAYOUT PRINCIPAL
   ================================================================ */
.ev-main { padding: 36px 0 72px; }

.ev-main-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

/* Sem isto, o conteúdo mínimo de um card (título longo, tabela do
   calendário) impede a coluna de encolher e a página ganha rolagem
   horizontal em telas estreitas. */
.ev-main-inner > * { min-width: 0; }

/* ================================================================
   SIDEBAR
   ================================================================ */
.ev-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    /* --filters-h é medido em tempo real por js/eventos.js: a barra muda de
       2 para 3 linhas conforme a largura, e o valor fixo antigo (201px)
       deixava a sidebar entrar por baixo dela. */
    top: calc(var(--header-h) + var(--filters-h, 123px) + 12px);
    min-width: 0;
}

/* Mini calendário */
.ev-mini-cal {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--r16);
    padding: 20px;
    box-shadow: var(--sh-sm);
}

.ev-cal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--grey-400);
    font-size: calc(13px * var(--a11y-text-scale, 1));
}

/* Navegação do calendário */
.ev-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ev-cal-nav-btn {
    width: 28px; height: 28px;
    border-radius: var(--r6);
    display: flex; align-items: center; justify-content: center;
    color: var(--grey-500);
    transition: all var(--t1);
}
.ev-cal-nav-btn:hover { background: var(--green-100); color: var(--green-700); }

.ev-cal-month-name {
    font-size: calc(14px * var(--a11y-text-scale, 1));
    font-weight: 700;
    color: var(--grey-900);
}

.ev-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.ev-cal-wd {
    text-align: center;
    font-size: calc(10px * var(--a11y-text-scale, 1));
    font-weight: 700;
    color: var(--grey-400);
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 3px 0;
    margin-bottom: 2px;
}

.ev-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r6);
    font-size: calc(12px * var(--a11y-text-scale, 1));
    font-weight: 500;
    color: var(--grey-500);
    cursor: default;
    transition: all var(--t1);
}

.ev-cal-empty    { opacity: 0; pointer-events: none; }
.ev-cal-past     { color: var(--grey-300); }

.ev-cal-today {
    font-weight: 700;
    color: var(--green-700);
    border: 2px solid var(--green-500);
}

.ev-cal-has-event {
    background: var(--green-700);
    color: white;
    font-weight: 700;
    cursor: pointer;
}
.ev-cal-has-event:hover    { background: var(--green-600); transform: scale(1.12); }
.ev-cal-has-event.ev-cal-today {
    background: var(--green-700);
    border: 2px solid var(--amber);
}

.ev-cal-selected {
    background: var(--green-800) !important;
    color: white !important;
    box-shadow: 0 0 0 3px var(--green-300) !important;
}

/* Legenda */
.ev-cal-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--grey-100);
}
.ev-cal-leg-item { display: flex; align-items: center; gap: 6px; font-size: calc(11.5px * var(--a11y-text-scale, 1)); color: var(--grey-500); }
.ev-cal-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ev-cal-dot-event { background: var(--green-700); }
.ev-cal-dot-today { background: transparent; border: 2px solid var(--green-500); }

/* Próximas datas */
.ev-upcoming-list {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--r16);
    padding: 18px;
    box-shadow: var(--sh-sm);
}

.ev-sidebar-title {
    font-size: calc(11px * var(--a11y-text-scale, 1));
    font-weight: 800;
    color: var(--grey-400);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.ev-upcoming-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: var(--r8);
    cursor: pointer;
    transition: background var(--t1);
}
.ev-upcoming-item:hover { background: var(--green-50); }

.ev-upcoming-date {
    width: 40px; height: 46px;
    background: var(--green-100);
    border-radius: var(--r8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ev-upcoming-date .ud-day { font-size: calc(17px * var(--a11y-text-scale, 1)); font-weight: 800; color: var(--green-700); line-height: 1; }
.ev-upcoming-date .ud-mon { font-size: calc(9px * var(--a11y-text-scale, 1)); font-weight: 700; color: var(--green-500); text-transform: uppercase; letter-spacing: .5px; }

/* Evento em andamento hoje — mesma cor de urgência do resto da agenda.
   "HOJE" é mais largo que um número de dois dígitos, então reduz a fonte
   para continuar cabendo na caixinha de 40px. */
.ev-upcoming-date-live { background: var(--red-bg); }
.ev-upcoming-date-live .ud-day {
    font-size: calc(12px * var(--a11y-text-scale, 1));
    color: var(--red);
}
.ev-upcoming-date-live .ud-mon { color: var(--red); }

.ev-upcoming-info { flex: 1; min-width: 0; }
.ev-upcoming-info strong { display: block; font-size: calc(13px * var(--a11y-text-scale, 1)); font-weight: 700; color: var(--grey-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-upcoming-info span   { font-size: calc(11.5px * var(--a11y-text-scale, 1)); color: var(--grey-500); }

.ev-upcoming-empty {
    font-size: calc(13px * var(--a11y-text-scale, 1));
    color: var(--grey-400);
    padding: 4px 8px;
}

/* ================================================================
   ÁREA DE CONTEÚDO — estados
   ================================================================ */
.ev-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 20px;
    color: var(--grey-400);
    font-size: calc(14px * var(--a11y-text-scale, 1));
}

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

.ev-spinner {
    width: 32px; height: 32px;
    border: 2.5px solid var(--grey-200);
    border-top-color: var(--green-600);
    border-radius: 50%;
    animation: spin .75s linear infinite;
    flex-shrink: 0;
}
.ev-spinner-lg { width: 44px; height: 44px; border-width: 3px; }

.ev-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 72px 20px;
    text-align: center;
}
.ev-empty svg  { opacity: .4; }
.ev-empty h3   { font-size: calc(20px * var(--a11y-text-scale, 1)); font-weight: 700; color: var(--grey-700); }
.ev-empty p    { font-size: calc(14px * var(--a11y-text-scale, 1)); color: var(--grey-400); max-width: 300px; }

/* ================================================================
   GRID DE CARDS
   ================================================================ */
/* Mesmo raciocínio de home.css: com auto-fill a grade reservava 3 colunas
   mesmo com 1 evento cadastrado e o card ficava sozinho encostado à
   esquerda. Flex centralizado distribui o que existe. */
.ev-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

/* ── Card de evento ─────────────────────────────────────────── */
.ev-card {
    flex: 1 1 260px;
    max-width: 340px;
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: var(--r16);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-shadow: var(--sh-sm);
    transition: transform var(--t3) var(--ease), box-shadow var(--t3) var(--ease), border-color var(--t3) var(--ease);
    position: relative;
}
.ev-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,.08), 0 8px 24px rgba(45,90,61,.12);
    border-color: var(--green-400);
}

/* Topo do card: data + imagem */
.ev-card-top {
    position: relative;
    display: flex;
}

.ev-card-date-col {
    background: linear-gradient(160deg, var(--green-700), var(--green-600));
    color: white;
    padding: 16px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 62px;
    flex-shrink: 0;
}
.ev-card-date-col .c-day   { font-size: calc(28px * var(--a11y-text-scale, 1)); font-weight: 900; line-height: 1; }
.ev-card-date-col .c-month { font-size: calc(10px * var(--a11y-text-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; opacity: .9; }

.ev-card-img {
    flex: 1;
    min-height: 130px;
    background-color: var(--green-100);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.ev-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.25));
    pointer-events: none;
}
/* Badges flutuantes */
.ev-card-badges {
    position: absolute;
    top: 10px; right: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    z-index: 1;
}

.ev-badge {
    font-size: calc(11px * var(--a11y-text-scale, 1));
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--r99);
    white-space: nowrap;
    backdrop-filter: blur(6px);
}
.ev-badge-hoje   { background: var(--red); color: white; }
.ev-badge-live   { background: var(--red); color: white; display: inline-flex; align-items: center; gap: 4px; }
.ev-badge-live .ev-live-dot { margin-right: 0; background: white; }
.ev-badge-live .ev-live-dot::after { border-color: white; }
.ev-badge-amanha { background: var(--amber); color: white; }
.ev-badge-breve  { background: rgba(255,255,255,.9); color: var(--green-700); }
.ev-badge-em-alta {
    background: linear-gradient(135deg, #fdba74, #f97316);
    color: white;
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.25);
}

/* Corpo */
.ev-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ev-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ev-card-cat {
    display: inline-flex;
    align-items: center;
    font-size: calc(11.5px * var(--a11y-text-scale, 1));
    font-weight: 700;
    color: var(--leaf-700);
    background: var(--green-50);
    padding: 3px 10px;
    border-radius: var(--r99);
}

/* Botão favorito */
.ev-card-fav {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--grey-400);
    transition: all var(--t1);
    flex-shrink: 0;
}
.ev-card-fav:hover  { color: var(--amber); background: var(--amber-bg); }
.ev-card-fav.is-fav { color: var(--amber); }
.ev-card-fav.is-fav:hover { color: var(--red); background: var(--red-bg); }

.ev-card-title {
    font-family: var(--font-display);
    font-size: calc(16px * var(--a11y-text-scale, 1));
    font-weight: 800;
    color: var(--grey-900);
    line-height: 1.3;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ev-card-desc {
    font-size: calc(13px * var(--a11y-text-scale, 1));
    color: var(--grey-500);
    line-height: 1.55;
    flex: 1;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ev-card-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
}
.ev-card-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(12.5px * var(--a11y-text-scale, 1));
    color: var(--grey-500);
}
.ev-card-meta-row svg { color: var(--green-500); flex-shrink: 0; }

/* Rodapé */
.ev-card-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--grey-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ev-card-footer-actions { display: flex; align-items: center; gap: 6px; }

.ev-card-share {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r8);
    color: var(--grey-500);
    background: transparent;
    border: 1px solid var(--grey-200);
    transition: all var(--t2) var(--ease);
    flex-shrink: 0;
}
.ev-card-share:hover { color: var(--leaf-700); border-color: var(--leaf-500); background: var(--green-50); }

/* RSVP button */
.ev-rsvp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    min-width: 64px;
    padding: 7px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff, #fff);
    color: var(--green-700);
    border: 1px solid rgba(0,0,0,.06);
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.ev-rsvp-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.ev-rsvp-btn.is-going { background: linear-gradient(135deg, var(--leaf-500), var(--leaf-900)); color: white; }
.ev-rsvp-btn .rsvp-count { font-weight: 800; margin-left: 4px; }

/* data-tooltip (não title): usar o atributo nativo aqui faria o balão
   customizado abaixo aparecer JUNTO com o tooltip nativo do navegador
   ao passar o mouse — dois balões sobrepostos. */
.ev-rsvp-btn[data-tooltip] {
    position: relative;
}
.ev-rsvp-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    background: rgba(17, 24, 39, 0.96);
    color: white;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: calc(11px * var(--a11y-text-scale, 1));
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    z-index: 20;
}
.ev-rsvp-btn[data-tooltip]:hover::after,
.ev-rsvp-btn[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.ev-rsvp-btn:focus { outline: 2px solid rgba(106,173,128,.35); }

/* RESPONSIVIDADE */
@media (max-width: 900px) {
    .ev-main-inner { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
    /* Empilhada abaixo dos eventos: sem o teto de largura o mini-calendário
       esticava para os ~780px da coluna e as células ficavam ridiculamente
       espaçadas. */
    .ev-sidebar {
        position: static;
        top: auto;
        order: 2;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }
    /* 210px espremia demais o card (data + foto + texto). */
    .ev-card { flex-basis: 240px; }
}

@media (max-width: 480px) {
    .ev-filters-inner { padding: 10px 14px; gap: 8px; }
    .ev-tab, .ev-cat { min-height: 44px; padding: 10px 14px; font-size: calc(14px * var(--a11y-text-scale, 1)); }
    .ev-search-bar { max-width: 100%; padding: 10px 14px; }
}

/* ================================================================
   CELULAR — barra de filtros e faixa da agenda
   Duas correções de organização:
   1) os 6 botões de período + as categorias quebravam em 3-4 linhas e a
      barra sticky comia metade da tela; viram uma faixa de rolagem
      horizontal, o padrão de filtro em app de celular;
   2) a faixa de números do hero ficava com a busca, o contador e a pill
      espalhados em alturas diferentes.
   ================================================================ */
@media (max-width: 700px) {
    /* Busca ocupa a linha inteira; período rola na horizontal logo abaixo. */
    .ev-filters-row-primary { flex-direction: column; align-items: stretch; gap: 8px; }
    .ev-filter-sep { display: none; }
    /* flex-basis: 280px vira ALTURA quando a linha passa a ser coluna —
       sem zerar isso a barra de busca vira um oval de 280px de altura. */
    .ev-search-bar { flex: 0 0 auto; max-width: none; width: 100%; }

    .ev-tabs,
    .ev-cats {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* O padding negativo alinha o primeiro chip à margem do container
           sem cortar a sombra do chip ativo durante a rolagem. */
        margin: 0 -14px;
        padding: 2px 14px;
        /* Sem isto, align-items:stretch não é suficiente para conter a
           linha (flex-wrap:nowrap dos chips) dentro do container: o item
           assume a largura de conteúdo e estoura a página inteira para o
           lado no celular. Compensa a margem negativa dos dois lados. */
        width: calc(100% + 28px);
        scroll-snap-type: x proximity;
    }
    .ev-tabs::-webkit-scrollbar,
    .ev-cats::-webkit-scrollbar { display: none; }
    .ev-tab, .ev-cat { flex-shrink: 0; scroll-snap-align: start; }

    .ev-filters-row-secondary { align-items: center; gap: 8px; }
    .ev-filters-row-end { gap: 8px; }

    /* Faixa da agenda: rótulo e número em bloco único, pill na mesma linha. */
    .ev-agenda-strip-inner  { padding: 12px 16px; gap: 10px 14px; align-items: flex-start; }
    .ev-agenda-strip-stats  { gap: 10px; flex: 1 1 auto; }
    .ev-agenda-divider      { display: none; }
    .ev-agenda-stat         { flex-direction: column; align-items: flex-start; gap: 0; }
    .ev-agenda-stat strong  { font-size: calc(19px * var(--a11y-text-scale, 1)); line-height: 1.2; }
    .ev-agenda-stat span    { white-space: normal; }
    .ev-summary-pill        { margin-left: auto; align-self: flex-start; }
    .ev-agenda-strip-meta-row { padding: 0 16px 12px; gap: 8px 12px; }
    .ev-agenda-strip-meta   { min-width: 0; }
}

.ev-card-link {
    font-size: calc(13px * var(--a11y-text-scale, 1));
    font-weight: 700;
    color: var(--green-600);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap var(--t1), color var(--t1);
}
.ev-card-link:hover { gap: 8px; color: var(--green-800); }

.ev-modal-calendar-menu {
    display: none;
    margin-top: 12px;
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: var(--r10);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    overflow: hidden;
}
.ev-modal-calendar-menu.show { display: block; }
.ev-modal-calendar-option {
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    background: white;
    color: var(--grey-700);
    font-size: calc(13px * var(--a11y-text-scale, 1));
    font-weight: 600;
    border-bottom: 1px solid var(--grey-100);
}
.ev-modal-calendar-option:last-child { border-bottom: none; }
.ev-modal-calendar-option:hover { background: var(--green-50); color: var(--green-700); }

/* ================================================================
   TIMELINE VIEW
   ================================================================ */
.ev-timeline { display: flex; flex-direction: column; gap: 12px; }

.ev-tl-item {
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: var(--r16);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    transition: all var(--t3);
    position: relative;
}
.ev-tl-item:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.09);
    border-color: var(--green-400);
    transform: translateX(4px);
}

.ev-tl-date {
    width: 54px; height: 58px;
    background: linear-gradient(160deg, var(--green-700), var(--green-600));
    border-radius: var(--r10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}
.ev-tl-date .tl-day   { font-size: calc(22px * var(--a11y-text-scale, 1)); font-weight: 900; line-height: 1; }
.ev-tl-date .tl-month { font-size: calc(10px * var(--a11y-text-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; opacity: .9; }

.ev-tl-body { flex: 1; min-width: 0; }

.ev-tl-title {
    font-family: var(--font-display);
    font-size: calc(16px * var(--a11y-text-scale, 1));
    font-weight: 800;
    color: var(--grey-900);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ev-tl-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: calc(13px * var(--a11y-text-scale, 1));
    color: var(--grey-500);
}

.ev-tl-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.ev-tl-meta-item svg { color: var(--green-500); flex-shrink: 0; }

.ev-tl-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.ev-tl-cat {
    font-size: calc(11.5px * var(--a11y-text-scale, 1));
    font-weight: 700;
    color: var(--leaf-700);
    background: var(--green-50);
    padding: 3px 10px;
    border-radius: var(--r99);
}

.ev-tl-fav {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--grey-400);
    background: var(--grey-100);
    transition: all var(--t1);
}
.ev-tl-fav:hover  { color: var(--amber); background: var(--amber-bg); }
.ev-tl-fav.is-fav { color: var(--amber); background: var(--amber-bg); }
.ev-tl-fav.is-fav:hover { color: var(--red); background: var(--red-bg); }

.ev-tl-share {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-400);
    background: var(--grey-100);
    transition: all var(--t1);
}
.ev-tl-share:hover { color: var(--leaf-700); background: var(--green-50); }

/* ================================================================
   BOTÕES
   ================================================================ */
.ev-btn-secondary {
    padding: 10px 22px;
    background: white;
    border: 1.5px solid var(--grey-200);
    border-radius: var(--r8);
    font-size: calc(13.5px * var(--a11y-text-scale, 1));
    font-weight: 600;
    color: var(--grey-700);
    transition: all var(--t1);
}
.ev-btn-secondary:hover { border-color: var(--green-400); color: var(--green-700); background: var(--green-50); }

.ev-btn-loadmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--leaf-500), var(--leaf-900));
    color: white;
    border-radius: var(--r8);
    font-size: calc(14px * var(--a11y-text-scale, 1));
    font-weight: 700;
    box-shadow: var(--sh-green);
    transition: background var(--t1), transform var(--t1), filter var(--t1);
}
.ev-btn-loadmore:hover { filter: brightness(1.06); transform: translateY(-2px); }
.ev-load-more { text-align: center; padding-top: 32px; }

/* ================================================================
   SEÇÃO DE NOTÍCIAS
   ================================================================ */
.ev-news-section {
    padding: 72px 0;
    background: var(--off);
    border-top: 1px solid var(--grey-200);
}

.ev-sec-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.ev-sec-tag {
    display: block;
    font-size: calc(11.5px * var(--a11y-text-scale, 1));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--green-600);
    margin-bottom: 6px;
}

.ev-sec-header h2 {
    font-family: var(--font-display);
    font-size: calc(clamp(22px, 2.8vw, 32px) * var(--a11y-text-scale, 1));
    font-weight: 800;
    color: var(--grey-900);
    letter-spacing: -.5px;
    margin-bottom: 6px;
}
.ev-sec-header p { font-size: calc(15px * var(--a11y-text-scale, 1)); color: var(--grey-500); }


.ev-grid-loading {
    grid-column: 1/-1;
    flex: 1 1 100%;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: var(--grey-400);
    font-size: calc(14px * var(--a11y-text-scale, 1));
}

/* ================================================================
   MODAL DE DETALHES
   ================================================================ */
.ev-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ev-modal[hidden] { display: none; }

.ev-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
}

.ev-modal-box {
    position: relative;
    z-index: 1;
    background: white;
    border-radius: var(--r16);
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 72px rgba(0,0,0,.3);
    animation: modalIn .28s var(--ease);
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ev-modal-box::-webkit-scrollbar       { width: 4px; }
.ev-modal-box::-webkit-scrollbar-thumb { background: var(--green-200); border-radius: 2px; }

.ev-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--grey-700);
    transition: background var(--t1), color var(--t1);
}
.ev-modal-close:hover { background: rgba(0,0,0,.16); color: var(--grey-900); }

.ev-modal-hero {
    height: 210px;
    background: linear-gradient(135deg, var(--green-800), var(--green-600));
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 18px 20px;
    position: relative;
}
.ev-modal-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.48), transparent 55%);
    pointer-events: none;
}

.ev-modal-hero-cat {
    position: relative;
    z-index: 1;
    padding: 4px 12px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
    border-radius: var(--r99);
    font-size: calc(12px * var(--a11y-text-scale, 1));
    font-weight: 700;
    color: var(--leaf-700);
}

.ev-modal-body { padding: 24px; }

.ev-modal-title {
    font-family: var(--font-display);
    font-size: calc(22px * var(--a11y-text-scale, 1));
    font-weight: 800;
    color: var(--grey-900);
    letter-spacing: -.3px;
    margin-bottom: 18px;
    line-height: 1.25;
}

.ev-modal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.ev-modal-info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--green-50);
    border-radius: var(--r8);
}
.ev-modal-info-item svg { color: var(--green-600); flex-shrink: 0; margin-top: 1px; }
.ev-modal-info-item strong { display: block; font-size: calc(10.5px * var(--a11y-text-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--grey-400); margin-bottom: 2px; }
.ev-modal-info-item span  { font-size: calc(13px * var(--a11y-text-scale, 1)); color: var(--grey-900); font-weight: 600; }

.ev-modal-desc-label { font-size: calc(13px * var(--a11y-text-scale, 1)); font-weight: 700; color: var(--grey-700); margin-bottom: 8px; }
.ev-modal-desc       { font-size: calc(14px * var(--a11y-text-scale, 1)); color: var(--grey-600); line-height: 1.7; margin-bottom: 20px; }

/* Prova social: quem já confirmou presença (populado sob demanda ao
   abrir o modal — ver loadAttendeesPreview() em eventos.js). */
.ev-modal-attendees {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
    background: var(--green-50);
    border: 1px solid var(--green-200);
    border-radius: var(--r10);
    font-size: calc(13px * var(--a11y-text-scale, 1));
    color: var(--leaf-700);
    font-weight: 600;
    line-height: 1.4;
}

.ev-modal-footer {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--grey-100);
}

.ev-modal-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--leaf-500), var(--leaf-900));
    color: white;
    border-radius: var(--r8);
    font-size: calc(14px * var(--a11y-text-scale, 1));
    font-weight: 700;
    box-shadow: var(--sh-green);
    transition: background var(--t1), transform var(--t1), filter var(--t1);
}
.ev-modal-btn-primary:hover { filter: brightness(1.06); transform: translateY(-2px); color: white; }

.ev-modal-btn-sec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    color: var(--grey-700);
    border: 1.5px solid var(--grey-200);
    border-radius: var(--r8);
    font-size: calc(14px * var(--a11y-text-scale, 1));
    font-weight: 600;
    transition: all var(--t1);
}
.ev-modal-btn-sec:hover { border-color: var(--green-400); color: var(--green-700); background: var(--green-50); }

/* ================================================================
   RESPONSIVO
   ================================================================ */
@media (min-width: 901px) and (max-width: 1024px) {
    .ev-main-inner { grid-template-columns: 240px 1fr; gap: 20px; }
}

/* ≤900px já empilha a sidebar em coluna única (ver .ev-sidebar logo
   acima de .ev-mini-cal). Nada específico de 768px é necessário aqui —
   uma regra anterior forçava flex-direction:row nessa faixa, o que
   esticava o mini-calendário a ~500px de largura por falta de um
   segundo item ao lado para dividir a linha. Removida. */

@media (max-width: 760px) {
    /* Cabeçalho da Sala de Notícias: título e barra de busca deixavam de
       caber lado a lado e a busca ficava colada na borda direita. */
    .ev-sec-header { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 28px; }
    .nw-toolbar    { justify-content: space-between; }
    .nw-search     { width: 100%; }
}

@media (max-width: 640px) {
    .ev-hero-content  { padding: 84px 20px 32px; gap: 12px; }
    .ev-hero-title    { font-size: calc(32px * var(--a11y-text-scale, 1)); }
    .ev-hero-subtitle { font-size: calc(14.5px * var(--a11y-text-scale, 1)); }
    .ev-hero-btn      { padding: 12px 20px; font-size: calc(14px * var(--a11y-text-scale, 1)); }

    .ev-filters-inner { padding: 10px 16px; }

    .ev-main   { padding: 24px 0 52px; }
    .container { padding: 0 16px; }

    .ev-grid { gap: 16px; }
    .ev-card { flex: 1 1 100%; max-width: 100%; }

    .ev-modal-info-grid { grid-template-columns: 1fr; }

    .ev-tl-item  { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
    /* Em vez de escondida (o que também removia categoria, compartilhar
       e favoritar do modo lista no celular), a coluna lateral vira uma
       linha própria abaixo do título — flex-basis:100% força a quebra
       mesmo havendo espaço sobrando ao lado do texto. */
    .ev-tl-aside {
        flex-direction: row;
        align-items: center;
        flex-basis: 100%;
        justify-content: flex-start;
        gap: 10px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--grey-100);
    }
}

/* ================================================================
   LOADING OVERLAY (carregamento inicial da página)
   ================================================================ */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: linear-gradient(145deg, var(--green-900), var(--green-700));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: white;
    transition: opacity .35s;
}

.loading-spinner {
    width: 46px;
    height: 46px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .9s linear infinite;
}

/* ================================================================
   TOAST
   ================================================================ */
.toast-container {
    position: fixed;
    top: calc(var(--header-h) + 14px);
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    padding: 14px 18px;
    background: white;
    border-radius: var(--r12);
    box-shadow: var(--shadow-card);
    animation: slideInRight .25s ease;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.toast.success { border-left: 4px solid var(--leaf-500); }
.toast.error   { border-left: 4px solid var(--red); }
.toast.info    { border-left: 4px solid #3b82f6; }
.toast-icon    { font-size: calc(18px * var(--a11y-text-scale, 1)); }
.toast-message { flex: 1; font-size: calc(13.5px * var(--a11y-text-scale, 1)); color: var(--grey-700); font-weight: 600; }

@media (max-width: 768px) {
    .toast-container { left: 16px; right: 16px; }
    .toast { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ================================================================
   ACESSIBILIDADE — ajustes específicos da agenda de eventos
   ================================================================ */
.a11y-focus .ev-hero-video { animation-play-state: paused; }
.a11y-focus .ev-agenda-strip { opacity: .7; }
.a11y-focus .hero-scroll-indicator { display: none; }
/* Calendário/próximas datas é apoio à lista principal de eventos —
   reduz o peso visual sem escondê-lo (continua acessível). */
.a11y-focus .ev-sidebar { opacity: .75; }

.a11y-high-contrast { background: #fff; }
/* Cartões escuros/coloridos com texto claro (destaques, tabs ativas...)
   viram invisíveis se só o fundo ou só o texto for forçado. Zera os dois
   em cascata para todo mundo dentro dos contêineres principais — não uma
   lista fixa de seletores, que sempre fica incompleta. */
.a11y-high-contrast .ev-card,
.a11y-high-contrast .nw-card,
.a11y-high-contrast .nw-lead-card,
.a11y-high-contrast .nw-reader-panel,
.a11y-high-contrast .ev-sidebar,
.a11y-high-contrast .ev-mini-cal,
.a11y-high-contrast .ev-filters-bar,
.a11y-high-contrast .ev-modal-box,
.a11y-high-contrast .ev-timeline {
    background: #fff !important;
    background-image: none !important;
    color: #111827 !important;
    border-color: #000 !important;
}
.a11y-high-contrast .ev-card *:not(.ev-card-img),
.a11y-high-contrast .nw-card *:not(.nw-card-media),
.a11y-high-contrast .nw-lead-card *:not(.nw-lead-media),
.a11y-high-contrast .nw-reader-panel *:not(.nw-read-hero),
.a11y-high-contrast .ev-sidebar *,
.a11y-high-contrast .ev-mini-cal *,
.a11y-high-contrast .ev-filters-bar *,
.a11y-high-contrast .ev-modal-box *:not(.ev-modal-hero),
.a11y-high-contrast .ev-timeline * {
    color: inherit !important;
    background: transparent !important;
    background-image: none !important;
    text-shadow: none !important;
}
.a11y-high-contrast .ev-tab-active,
.a11y-high-contrast .ev-cat-active,
.a11y-high-contrast .ev-view-active { outline: 2px solid #000 !important; }

/* .ev-card-img / .nw-*-media / .ev-modal-hero guardam a foto real do
   evento/notícia via background-image inline — não são fundo decorativo
   do cartão, são o próprio conteúdo. A cascata acima (necessária pros
   cartões escuros ao redor) não pode apagá-las; só reforça a borda pra
   continuar se destacando do cartão branco. */
.a11y-high-contrast .ev-card-img,
.a11y-high-contrast .nw-card-media,
.a11y-high-contrast .nw-lead-media,
.a11y-high-contrast .nw-read-hero,
.a11y-high-contrast .ev-modal-hero { border: 1px solid #000 !important; }