/* ============================================================
   AGENDA DE EVENTOS (engine/core/agenda.js) — etapa E5 de
   techterra-online-backend/docs/spec-eventos-programados/ (contrato L).
   Mock aprovado: docs/mock-calendario-eventos-v2-INATIVO.html, variação C3
   ("Tipagem Viva"): painel ardósia, fonte Fredoka, cada dia na cor de uma
   tipagem (--td) e cada linha num degradê das próprias tipagens (--c1/--c2).
   O tema vale SÓ dentro de .agenda-tela: o dourado do sistema é trocado
   por branco redefinindo --gold/--gold-light nesse escopo.

   A casca é a do jogo: .mestre-form-overlay / .mestre-form-modal /
   .mestre-form-header / .mestre-form-close (style.css) — aqui só a
   proporção (a do .monster-detail) e o miolo. Tudo que é novo começa com
   `agenda-`. A scrollbar é a global do style.css; nada de barra própria.
   Depois do style.css e ANTES do mobile.css (a folha de celular da casca
   precisa continuar vencendo).
   ============================================================ */

/* ---------- botão na barra de cima (#btn-agenda, criado pelo JS) ---------- */
#btn-agenda { position: relative; }
/* A Agenda é da ficha do jogador: no perfil narrador some, como o de Eventos. */
body.is-narrador #btn-agenda,
body.is-narrador-editing #btn-agenda { display: none !important; }

/* ---------- casca ---------- */
.mestre-form-modal.agenda-tela {
    --agenda-borda: rgba(255, 255, 255, .22);
    --agenda-fraca: rgba(255, 255, 255, .1);
    --agenda-text: #f4f4f7;
    --agenda-muted: #a3a7b8;
    --agenda-verde: #7fd08a;
    --agenda-verm: #ff8f82;
    --agenda-sel: #ffe27a;
    --agenda-fonte: 'Fredoka', system-ui, sans-serif;
    /* o dourado do sistema vira branco aqui dentro (cabeçalho, fechar, 'i') */
    --gold: #ffffff;
    --gold-light: #ffffff;
    background: linear-gradient(180deg, #191c25, #0e1016);
    border: 1px solid var(--agenda-borda);
    border-radius: 14px;
    width: min(1060px, 96vw);
    height: min(86vh, 760px);
    height: min(86dvh, 760px);
    color: var(--agenda-text);
    font-family: 'Lora', Georgia, serif;
    font-size: 13px;
    outline: none;
}
.agenda-tela *, .agenda-tela *::before, .agenda-tela *::after { box-sizing: border-box; }
.agenda-tela button, .agenda-tela select, .agenda-tela input { font: inherit; color: inherit; }
.agenda-tela [hidden] { display: none !important; }
.agenda-k-raid { --c: #e0665e; }
.agenda-k-exp { --c: #62b3e6; }
.agenda-k-evt { --c: #e8c56a; }
.agenda-k-camp { --c: #b58cff; }

/* ---------- cabeçalho: título + navegação por mês + fechar ---------- */
.agenda-tela .agenda-top { gap: 12px; padding: 9px 14px 9px 16px; flex: 0 0 auto; background: transparent; border-bottom: 1px solid var(--agenda-fraca); }
.agenda-tela .agenda-top h3 { min-width: 0; font: 600 1.15rem var(--agenda-fonte); letter-spacing: 0; line-height: 1.2; color: #fff; }
.agenda-top h3 small { display: block; font: 400 .72rem 'Lora', serif; letter-spacing: 0; color: var(--agenda-muted); margin-top: 1px; }
.agenda-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.agenda-nav button {
    width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 1px solid var(--agenda-borda); background: rgba(0, 0, 0, .35); color: #fff;
}
.agenda-nav button:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.agenda-nav button:disabled { opacity: .3; cursor: default; }
.agenda-nav span { font: 600 .95rem var(--agenda-fonte); color: var(--agenda-text); min-width: 150px; text-align: center; white-space: nowrap; }
.agenda-tela .agenda-top .mestre-form-close { flex: 0 0 auto; color: #fff; border-color: var(--agenda-borda); font-family: var(--agenda-fonte); }
.agenda-tela .agenda-top .mestre-form-close:hover { background: rgba(255, 255, 255, .16); }

/* ---------- filtros ---------- */
.agenda-barra {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 7px 16px;
    border-bottom: 1px solid var(--agenda-fraca);
    background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01));
}
.agenda-seg { display: inline-flex; border: 1px solid var(--agenda-borda); border-radius: 999px; overflow: hidden; max-width: 100%; }
.agenda-seg button {
    border: 0; background: transparent; padding: 4px 11px; cursor: pointer; font-size: .74rem; color: var(--agenda-muted);
    display: inline-flex; gap: 5px; align-items: center; white-space: nowrap;
}
.agenda-seg button.on { background: rgba(255, 255, 255, .2); color: #fff; font-weight: 600; }
.agenda-seg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; background: var(--c); }
.agenda-selt {
    background: rgba(0, 0, 0, .35); border: 1px solid var(--agenda-borda); border-radius: 999px; padding: 4px 10px;
    font-size: .74rem; color: #fff !important; cursor: pointer; max-width: 100%;
}
.agenda-selt option { background: #191c25; color: #f4f4f7; }
.agenda-chk { display: inline-flex; gap: 6px; align-items: center; font-size: .74rem; color: var(--agenda-muted); cursor: pointer; }
.agenda-chk input { accent-color: #ffe27a; margin: 0; }
.agenda-roda { margin-left: auto; display: inline-flex; align-items: center; color: var(--agenda-muted); font-size: .72rem; white-space: nowrap; }
.agenda-roda .tt-info-btn svg { width: 18px; height: 18px; }

/* ---------- corpo: mês + painel ---------- */
.agenda-corpo { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.agenda-corpo.agenda-so { display: block; overflow: auto; }
.agenda-corpo.agenda-so .agenda-det { display: none; }
.agenda-vista { position: relative; min-width: 0; overflow: auto; padding: 10px 12px; }
.agenda-det { position: relative; min-width: 0; border-left: 1px solid var(--agenda-fraca); overflow: auto; padding: 12px 14px; background: rgba(0, 0, 0, .18); }
.agenda-rodape {
    flex: 0 0 auto; display: flex; gap: 4px 14px; flex-wrap: wrap; padding: 6px 16px;
    border-top: 1px solid var(--agenda-fraca); color: var(--agenda-muted); font-size: .7rem;
}
.agenda-rodape i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: -1px; background: var(--c); }
.agenda-rodape-nota { margin-left: auto; }

/* ---------- peças comuns ---------- */
.agenda-tp { width: 16px; height: 16px; vertical-align: -3px; object-fit: contain; }
.agenda-tpl { display: inline-flex; gap: 2px; align-items: center; flex: 0 0 auto; }
.agenda-st { display: inline-block; font-size: .66rem; padding: 1px 7px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.agenda-st-on { color: #ffb2aa; border-color: rgba(255, 120, 110, .6); background: rgba(120, 20, 15, .35); }
.agenda-st-fut { color: #fff; border-color: var(--agenda-borda); background: rgba(0, 0, 0, .3); }
.agenda-st-fim { color: #7f8496; border-color: #3a3e4c; }
.agenda-apto { font-size: .7rem; }
.agenda-apto.grande { font-size: .8rem; }
.agenda-apto.s { color: var(--agenda-verde); }
.agenda-apto.n { color: var(--agenda-verm); }
.agenda-passado { opacity: .35; }
.agenda-apg { opacity: .22 !important; }
/* "Acompanhar tipagem": só a grade apaga forte; no painel o que não é da tipagem continua legível */
.agenda-det .agenda-apg { opacity: .55 !important; }
/* evento indisponível: apagado, com o selo "Indisponível" e sem botão */
.agenda-indisp { opacity: .5; }
.agenda-chip.agenda-indisp { text-decoration: line-through; }
.agenda-st-ind { color: #b3b7c6; border-color: #555a6b; border-style: dashed; background: rgba(0, 0, 0, .3); }
/* principal: branco com texto escuro; secundário: só o contorno branco */
.agenda-cta {
    padding: 6px 14px; border-radius: 999px; border: 1px solid #fff; cursor: pointer;
    background: #fff; color: #111 !important; font: 600 .78rem var(--agenda-fonte);
}
.agenda-cta.sec { background: transparent; color: #fff !important; }
.agenda-cta:hover { filter: brightness(.92); }
.agenda-cta.sec:hover { filter: none; background: rgba(255, 255, 255, .14); }

/* ---------- o mês ---------- */
.agenda-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.agenda-h { font: 600 .78rem var(--agenda-fonte); color: #cfd3e2; text-align: center; padding: 2px 0; }
.agenda-h.agenda-fds { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .45); }
/* O dia na cor da tipagem dele: o JS põe `--td` no style da célula (sem tipagem: cinza neutro).
   A 1ª declaração de borda/fundo é o piso para navegador sem color-mix(). */
.agenda-cel {
    position: relative; min-height: 122px; min-width: 0; border-radius: 12px; padding: 4px 5px; overflow: hidden;
    border: 1px solid var(--agenda-fraca);
    border-color: color-mix(in srgb, var(--td, #555) 40%, transparent);
    background: #12141b;
    background: radial-gradient(130% 100% at 100% 100%, color-mix(in srgb, var(--td, #555) 60%, transparent) 0%, color-mix(in srgb, var(--td, #555) 14%, #12141b) 55%, #12141b 100%);
    cursor: pointer; display: flex; flex-direction: column; gap: 3px;
    transition: transform .12s, outline-color .12s;
}
.agenda-cel:hover { border-color: var(--agenda-borda); }
.agenda-cel:focus-visible { outline: 2px solid var(--agenda-borda); outline-offset: 1px; }
.agenda-cel.agenda-fora { opacity: .3; cursor: default; }
.agenda-cel.agenda-fora:hover { border-color: var(--agenda-fraca); }
/* hoje: contorno branco por dentro + brilho na cor do dia */
.agenda-cel.agenda-hoje { border-color: #fff; box-shadow: 0 0 0 2px #fff inset, 0 0 18px rgba(255, 255, 255, .5); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .agenda-cel.agenda-hoje { box-shadow: 0 0 0 2px #fff inset, 0 0 18px color-mix(in srgb, var(--td, #fff) 70%, transparent); }
}
/* o dia inteiro que já passou fica apagado; as linhas dele não apagam de novo por cima */
.agenda-cel.agenda-passado .agenda-chip.agenda-passado { opacity: 1; }
/* marca-d'água: o ícone da tipagem do dia, gigante, no canto de baixo */
.agenda-wm { position: absolute; right: -10px; bottom: -12px; width: 66px; height: 66px; object-fit: contain; opacity: .3; filter: saturate(1.4); pointer-events: none; z-index: 0; }
.agenda-n { position: relative; z-index: 1; font: 600 .95rem var(--agenda-fonte); line-height: 1.15; color: #fff; }
/* rótulo com o nome da tipagem do dia, na cor dela */
.agenda-tdia {
    position: relative; z-index: 1; display: block; margin-top: -3px; font: 700 .54rem var(--agenda-fonte); line-height: 1.2;
    color: var(--td, #cfd3e2); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* a linha do evento: degradê das próprias tipagens (`--c1`, `--c2` vêm do JS) */
.agenda-chip {
    position: relative; z-index: 1; display: flex; gap: 4px; align-items: center; font-size: .64rem; line-height: 1.5; padding: 1px 5px; border-radius: 6px;
    background: linear-gradient(90deg, var(--c1, #e8e2d0), var(--c2, #b9b2a3)); color: #0b0c10; font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35); white-space: nowrap; overflow: hidden; min-width: 0; flex: 0 0 auto;
}
.agenda-chip:hover { filter: brightness(1.12); }
.agenda-chip .agenda-ct { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.agenda-chip .agenda-tp { width: 12px; height: 12px; vertical-align: 0; filter: drop-shadow(0 0 1px #fff); }
/* quinzenal ou mensal: contorno claro com brilho */
.agenda-chip.agenda-grande { box-shadow: inset 0 0 0 1.5px #fff, 0 0 7px rgba(255, 255, 255, .6); }
.agenda-mais { position: relative; z-index: 1; font-size: .62rem; color: #dfe2ee; text-decoration: underline dotted; }
.agenda-lock { position: relative; z-index: 1; font-size: .62rem; color: #dfe2ee; }
.agenda-big { position: absolute; z-index: 1; right: 5px; top: 3px; font-size: 14px; line-height: 1; }
/* dia selecionado: contorno + brilho + número na cor do destaque (vale por cima do "hoje") */
.agenda-mes .agenda-cel.agenda-sel {
    outline: 3px solid var(--agenda-sel); outline-offset: 2px; z-index: 2; transform: scale(1.03);
    background-color: rgba(255, 226, 122, .16);
    filter: drop-shadow(0 0 10px rgba(255, 226, 122, .65));
}
.agenda-mes .agenda-cel.agenda-sel .agenda-n { color: var(--agenda-sel); }
.agenda-mes .agenda-cel.agenda-sel.agenda-passado,
.agenda-mes .agenda-cel.agenda-sel.agenda-apg { opacity: .85 !important; }
.agenda-nota { color: var(--agenda-muted); font-size: .7rem; margin: 8px 0 0; line-height: 1.45; }

/* ---------- carregando / erro ---------- */
.agenda-estado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 260px; padding: 30px 16px; text-align: center; }
.agenda-estado p { margin: 0; color: var(--agenda-text); font-size: .9rem; max-width: 420px; line-height: 1.5; }
.agenda-estado-em { font-size: 34px; opacity: .7; }
.agenda-girando { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--agenda-fraca); border-top-color: #fff; animation: agenda-gira .9s linear infinite; }
@keyframes agenda-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .agenda-girando { animation: none; } .agenda-cel { transition: none; } }

/* ---------- painel de detalhe ---------- */
.agenda-det h3 { margin: 0 0 2px; font: 600 1.1rem var(--agenda-fonte); color: #fff; overflow-wrap: anywhere; }
.agenda-fmt { font-size: .72rem; color: var(--agenda-muted); margin-bottom: 8px; }
.agenda-pt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.agenda-cadb { font-weight: 600; color: #fff; }
.agenda-cadb.forte { color: var(--agenda-sel); }
.agenda-lbl { display: block; color: var(--agenda-muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 3px; }
.agenda-linha { font-size: .78rem; line-height: 1.45; }
.agenda-det ul { margin: 0; padding-left: 16px; font-size: .76rem; }
.agenda-det li { margin: 2px 0; }
.agenda-det ul.agenda-prl { font-size: .72rem; padding-left: 14px; }
.agenda-obs { font-size: .7rem; color: var(--agenda-muted); margin-top: 6px; line-height: 1.45; }
.agenda-vazio { color: var(--agenda-muted); font-size: .8rem; text-align: center; margin: 14px 0; }
.agenda-voltar { background: none; border: 0; color: #fff !important; cursor: pointer; font-size: .74rem; padding: 4px 0; margin: 0 0 6px; }
.agenda-voltar:hover { text-decoration: underline; }
.agenda-boss { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--agenda-fraca); border-radius: 10px; margin: 8px 0; }
.agenda-boss > div { min-width: 0; }
.agenda-boss-camp { background: radial-gradient(circle at 20% 50%, #2a1c3d, rgba(0, 0, 0, .2) 70%); }
.agenda-boss-em { font-size: 36px; line-height: 1; }
.agenda-boss b { font: 600 .95rem var(--agenda-fonte); color: #fff; overflow-wrap: anywhere; }
.agenda-boss-sub { font-size: .72rem; color: var(--agenda-muted); line-height: 1.4; }
/* ---------- boss da raid: a imagem quando já foi definido; a moldura com "?" quando não ---------- */
.agenda-boss-raid { border-color: var(--agenda-borda); background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, .13), rgba(0, 0, 0, .2) 70%); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .agenda-boss-raid { background: radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--bc, #8a8f9c) 42%, transparent), rgba(0, 0, 0, .2) 70%); }
}
.agenda-boss-img { flex: 0 0 auto; width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); }
/* moldura de monstro ainda sem dono: quadro arredondado, borda tracejada clara e o "?" */
.agenda-boss-vazio {
    flex: 0 0 auto; width: 72px; height: 72px; display: inline-grid; place-items: center; border-radius: 14px;
    border: 2px dashed rgba(255, 255, 255, .5); background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .12), rgba(0, 0, 0, .3) 75%);
    font: 700 2.3rem var(--agenda-fonte); line-height: 1; color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, .5);
}
/* miniatura na linha do tempo do dia (à direita de cada raid) */
.agenda-boss-mini { float: right; width: 42px; height: 42px; margin: -2px -2px 0 6px; }
.agenda-boss-vazio.agenda-boss-mini { border-width: 1.5px; border-radius: 10px; font-size: 1.4rem; }
.agenda-como { font-size: .72rem; line-height: 1.45; padding: 7px 9px; margin: 8px 0; border-radius: 8px; border: 1px solid var(--agenda-fraca); border-left: 3px solid #fff; background: rgba(0, 0, 0, .22); }
.agenda-rot { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 6px; padding: 8px; border-radius: 10px; border: 1px solid var(--agenda-fraca); background: rgba(0, 0, 0, .25); font-size: .74rem; }
.agenda-rot-t b { color: #fff; }
.agenda-td-l { display: flex; gap: 4px; flex-wrap: wrap; }
.agenda-td { display: inline-flex; gap: 5px; align-items: center; font-size: .7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--agenda-borda); background: rgba(0, 0, 0, .25); }
.agenda-td.eu { border-color: var(--agenda-sel); color: var(--agenda-sel); font-weight: 600; }
.agenda-cota { font-size: .72rem; line-height: 1.45; padding: 6px 8px; margin: 2px 0 6px; border-radius: 8px; border: 1px solid rgba(127, 208, 138, .4); background: rgba(127, 208, 138, .08); }
.agenda-cota.cheia { border-color: rgba(255, 143, 130, .5); background: rgba(255, 143, 130, .08); }
.agenda-pr { display: flex; height: 16px; border-radius: 5px; overflow: hidden; margin: 6px 0 4px; font-size: .58rem; }
.agenda-pr div { display: grid; place-items: center; color: #0b0c10; font-weight: 700; white-space: nowrap; overflow: hidden; min-width: 0; }
.agenda-acoes { margin-top: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.agenda-aviso { font-size: .74rem; color: var(--agenda-muted); padding: 5px 12px; border: 1px dashed var(--agenda-borda); border-radius: 999px; }

/* ---------- detalhe do dia: linha do tempo ---------- */
.agenda-cont { display: flex; gap: 4px 10px; flex-wrap: wrap; font-size: .7rem; color: var(--agenda-muted); margin: 0 0 4px; }
.agenda-cont i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; background: var(--c); }
.agenda-sec { display: block; color: var(--agenda-muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; margin: 10px 0 6px; }
.agenda-tl { position: relative; margin-left: 6px; border-left: 2px solid var(--agenda-fraca); padding-left: 14px; }
.agenda-tl-it { position: relative; margin: 0 0 8px; padding: 7px 9px; border: 1px solid var(--agenda-fraca); border-radius: 9px; background: rgba(0, 0, 0, .24); cursor: pointer; }
.agenda-tl-it:hover, .agenda-tl-it:focus-visible { border-color: var(--c); outline: none; }
.agenda-tl-it::before { content: ""; position: absolute; left: -22px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(0, 0, 0, .45), 0 0 8px var(--c); }
.agenda-tl-it .agenda-hr { display: block; font-size: .66rem; color: var(--agenda-muted); }
.agenda-tl-it b { display: block; color: var(--agenda-text); font: 600 .86rem var(--agenda-fonte); margin: 1px 0; overflow-wrap: anywhere; }
.agenda-tl-it .agenda-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; font-size: .68rem; }
.agenda-tl-it .agenda-em { float: right; font-size: 20px; line-height: 1; margin-left: 6px; }
.agenda-tl-it.agenda-rolando { opacity: .85; border-style: dashed; }
.agenda-ins { display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; margin: 0 0 6px; border: 1px solid var(--agenda-fraca); border-left: 3px solid var(--c); border-radius: 8px; background: rgba(0, 0, 0, .24); cursor: pointer; font-size: .76rem; }
.agenda-ins span { color: var(--agenda-muted); font-size: .68rem; }

/* ---------- prêmios e chances (0.415.0): o campo `premio` de cada evento (contrato P) ----------
   Mock: techterra-online-backend/docs/mock-agenda-no-jogo.html. Tudo começa com `agp-`. */
.agp-sec, .agp-g, .agp-lista, .agp-vw, .agp-exc, .agp-pod, .agp-efs, .agp-junto, .agp-inv, .agp-tlw, .agp-it, .agp-chip, .agp-vc, .agp-passos { position: relative; }
.agp-lbl { display: flex !important; align-items: center; gap: 4px; }
.agp-lbl .tt-info-btn svg { width: 16px; height: 16px; }
.agp-g { border: 1px solid rgba(127,208,138,.45); background: rgba(127,208,138,.08); border-radius: 10px; padding: 7px 9px; margin: 2px 0 6px; }
.agp-g.cheia { border-color: rgba(255,143,130,.6); background: rgba(255,143,130,.09); }
.agp-gt { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font: 600 .76rem var(--agenda-fonte); color: #fff; margin-bottom: 5px; }
.agp-gt small { font: 400 .64rem 'Lora', serif; color: var(--agenda-muted); text-align: right; }
.agp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.agp-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 5px; padding: 3px 9px; border-radius: 10px; border: 1px solid var(--agenda-borda); background: rgba(0,0,0,.32); font-size: .72rem; line-height: 1.35; }
.agp-chip b { font: 600 .78rem var(--agenda-fonte); color: #fff; }
.agp-chip small { flex-basis: 100%; color: var(--agenda-muted); font-size: .62rem; }
.agp-chip.off { opacity: .45; text-decoration: line-through; }
.agp-chip img, .agp-chip .agp-q { width: 20px; height: 20px; object-fit: contain; }
.agp-ess { border-color: rgba(232,197,106,.7); }
.agp-nota { font-size: .68rem; color: var(--agenda-muted); line-height: 1.45; margin-top: 5px; }
.agp-nota b { color: #fff; font-weight: 600; }
.agp-hd { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.agp-hd .agenda-lbl { margin: 0; }
.agp-modo { position: relative; overflow: visible; }
.agp-modo button { padding: 2px 9px; font-size: .64rem; }
.agp-pr { height: 18px; }
.agp-pr div { font-size: .58rem; }
.agp-r { display: flex; align-items: center; gap: 6px; margin: 9px 0 2px; font: 600 .72rem var(--agenda-fonte); color: var(--rc); }
.agp-r i { width: 8px; height: 8px; border-radius: 50%; background: var(--rc); flex: none; }
.agp-r span { margin-left: auto; color: var(--agenda-muted); font: 400 .64rem 'Lora', serif; white-space: nowrap; }
.agp-it { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 6px; align-items: start; padding: 4px 0 4px 7px; margin-left: 3px; border-left: 2px solid var(--rc); }
.agp-ic { font-size: 13px; line-height: 1.3; text-align: center; }
.agp-tx { min-width: 0; }
.agp-tx b { display: block; font-size: .74rem; color: #fff; font-weight: 600; line-height: 1.3; }
.agp-tx small { display: block; font-size: .62rem; color: var(--agenda-muted); line-height: 1.35; }
.agp-ch { text-align: right; white-space: nowrap; }
.agp-ch b { display: block; font: 600 .82rem var(--agenda-fonte); color: #fff; line-height: 1.2; }
.agp-ch small { display: block; font-size: .6rem; color: var(--agenda-muted); }
.agp-th { display: flex; gap: 3px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.agp-th img, .agp-th .agp-q { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: rgba(255,255,255,.06); border: 1px solid var(--agenda-fraca); }
.agp-q { display: inline-grid; place-items: center; font: 700 .72rem var(--agenda-fonte); color: #fff; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.4); border-radius: 6px; }
.agp-th em { font-style: normal; font-size: .62rem; color: var(--agenda-muted); }
.agp-th-g img { width: 40px; height: 40px; }
.agp-off { opacity: .4; filter: grayscale(.7); pointer-events: none; }
.agp-pratica { position: relative; border: 1px solid rgba(255,226,122,.35); background: rgba(255,226,122,.07); border-radius: 10px; padding: 7px 9px; margin: 10px 0 6px; font-size: .7rem; line-height: 1.45; }
.agp-pratica b.t { display: block; font: 600 .74rem var(--agenda-fonte); color: var(--agenda-sel); margin-bottom: 2px; }
.agp-pratica ul { margin: 0; padding-left: 15px; font-size: .7rem; }
.agp-pratica b { color: #fff; font-weight: 600; }
.agp-letras { position: relative; margin-top: 8px; font-size: .68rem; color: var(--agenda-muted); border-top: 1px solid var(--agenda-fraca); padding-top: 6px; }
.agp-letras summary { cursor: pointer; color: #fff; font: 600 .72rem var(--agenda-fonte); }
.agp-letras ul { padding-left: 15px; margin: 4px 0 0; font-size: .68rem; }
.agp-vbtn { width: 100%; margin-top: 4px; }
/* vitrine */
.agp-vg { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.agp-vc { border: 1px solid var(--agenda-fraca); border-top: 2px solid var(--rc); border-radius: 8px; background: rgba(0,0,0,.28); padding: 5px 4px; text-align: center; min-width: 0; }
.agp-vc img, .agp-vc .agp-q { width: 54px; height: 54px; object-fit: contain; display: block; margin: 0 auto 3px; }
.agp-vc .agp-q { display: grid; }
.agp-vc b { display: block; font-size: .62rem; line-height: 1.2; color: #fff; overflow-wrap: anywhere; font-weight: 600; }
.agp-vc small { display: block; font-size: .56rem; color: var(--agenda-muted); line-height: 1.25; }
.agp-vc .agp-pc { display: block; font: 600 .7rem var(--agenda-fonte); color: var(--rc); margin-top: 2px; }
.agp-vc.agp-mais { display: grid; place-content: center; }
.agp-vc.agp-mais b { font: 600 1rem var(--agenda-fonte); }
.agp-vg-p { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
/* campeonato */
.agp-metal-local { --mt: #cd7f32; } .agp-metal-regional { --mt: #c9d1db; } .agp-metal-mundial { --mt: #f2c14e; }
.agp-pod { display: flex; flex-direction: column; gap: 6px; }
.agp-pl { border: 1px solid var(--agenda-fraca); border-radius: 10px; padding: 7px 9px; background: rgba(0,0,0,.25); }
.agp-pl .h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font: 600 .82rem var(--agenda-fonte); color: #fff; }
.agp-pl .h small { font: 400 .68rem 'Lora', serif; color: var(--agenda-muted); }
.agp-pl.nada { opacity: .6; padding: 5px 9px; }
.agp-split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 6px 0 2px; }
.agp-split div { min-width: 0; }
.agp-split-l { display: flex; justify-content: space-between; font-size: .64rem; color: var(--agenda-muted); }
.agp-split-l b { color: var(--mt); font-weight: 600; }
.agp-exc .agp-th img { border: 2px solid var(--mt); box-shadow: 0 0 6px var(--mt); }
.agp-passos { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: .7rem; }
.agp-passos span { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--agenda-borda); background: rgba(0,0,0,.3); }
.agp-passos span:last-of-type { border-color: var(--agenda-sel); color: var(--agenda-sel); }
.agp-passos i { font-style: normal; color: var(--agenda-muted); }
/* evento global */
.agp-ef { border: 1px solid var(--agenda-fraca); border-radius: 10px; padding: 7px 9px; background: rgba(0,0,0,.25); margin: 4px 0; }
.agp-ef .h { display: flex; justify-content: space-between; font: 600 .8rem var(--agenda-fonte); color: #fff; }
.agp-ef .h span { font: 400 .66rem 'Lora', serif; color: var(--agenda-sel); }
.agp-met { display: grid; grid-template-columns: 62px 1fr 42px; gap: 6px; align-items: center; font-size: .64rem; color: var(--agenda-muted); margin-top: 4px; }
.agp-met div { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.agp-met div i { display: block; height: 100%; background: #8f8aa0; }
.agp-met.agora div i { background: var(--agenda-sel); }
.agp-met b { color: #fff; text-align: right; font: 600 .74rem var(--agenda-fonte); }
.agp-met.agora span { color: #fff; }
.agp-jt { padding: 5px 8px; margin: 0 0 5px; border: 1px solid var(--agenda-fraca); border-left: 3px solid #e8c56a; border-radius: 8px; background: rgba(0,0,0,.24); cursor: pointer; font-size: .72rem; }
.agp-jt span { display: block; color: var(--agenda-muted); font-size: .66rem; }
.agp-jt em { color: var(--agenda-sel); font-style: normal; font-weight: 600; }
/* dia */
.agp-cotas { position: relative; display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: center; font-size: .68rem; color: var(--agenda-muted); padding: 6px 8px; border: 1px solid var(--agenda-fraca); border-radius: 8px; background: rgba(0,0,0,.22); margin: 6px 0 2px; }
.agp-cotas > span:first-of-type { flex-basis: 100%; }
.agp-cotas b { color: #fff; font-weight: 600; }
.agp-dots { letter-spacing: 1px; color: var(--agenda-verde); }
.agp-dots.cheia { color: var(--agenda-verm); }
.agp-tl { display: block; margin-top: 4px; font-size: .66rem; color: #e6e8f0; line-height: 1.35; }
.agp-tl.off { color: var(--agenda-verm); }
/* a miniatura/cartão do prêmio é um botão: abre o detalhe do jogo (espécie ou item) */
.agp-det { padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; border-radius: 6px; }
.agp-det:hover img, .agp-det:focus-visible img { filter: brightness(1.18); }
.agp-det:focus-visible { outline: 2px solid var(--agenda-sel); outline-offset: 1px; }
.agp-vc.agp-det { display: block; width: 100%; font: inherit; color: inherit; text-align: center; cursor: pointer; border: 1px solid var(--agenda-fraca); border-top: 2px solid var(--rc); background: rgba(0, 0, 0, .28); padding: 5px 4px; }
.agp-vc.agp-det:hover { background: rgba(255, 255, 255, .06); }

/* ---------- tablet: o painel desce para baixo do mês; rola o corpo inteiro ---------- */
@media (max-width: 1100px) {
    .mestre-form-modal.agenda-tela { width: min(1060px, 96vw); height: 92vh; height: 92dvh; max-height: none; }
    .agenda-corpo { display: block; overflow: auto; }
    .agenda-vista, .agenda-det { overflow: visible; }
    .agenda-det { border-left: 0; border-top: 1px solid var(--agenda-fraca); }
    .agenda-nav span { min-width: 0; }
    .agenda-roda { margin-left: 0; }
    .agenda-cel:hover { transform: none; }
}
/* ---------- celular: as linhas viram só ícones; filtros quebram em linhas ---------- */
@media (max-width: 640px) {
    .agenda-top { flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px 8px 12px; }
    .agenda-top h3 { flex: 1 1 0; font-size: .92rem; }
    .agenda-top .mestre-form-close { order: 2; }
    .agenda-nav { order: 3; flex: 1 1 100%; margin-left: 0; justify-content: space-between; }
    .agenda-nav button { width: 36px; height: 36px; }
    .agenda-barra { padding: 7px 10px; gap: 6px; }
    .agenda-seg { flex-wrap: wrap; border-radius: 14px; }
    .agenda-seg button { padding: 6px 7px; flex: 1 1 auto; justify-content: center; font-size: .72rem; gap: 4px; }
    .agenda-selt { padding: 6px 10px; flex: 1 1 100%; }
    .agenda-chk { flex: 1 1 auto; }
    .agenda-vista { padding: 8px 6px; }
    .agenda-det { padding: 12px 12px 18px; }
    .agenda-mes { gap: 2px; }
    .agenda-cel { min-height: 74px; flex-direction: row; flex-wrap: wrap; align-content: flex-start; padding: 3px; gap: 2px; border-radius: 8px; }
    .agenda-n { width: 100%; font-size: .8rem; }
    /* o dia continua na cor da tipagem; a marca-d'água encolhe e o rótulo some (não cabe) */
    .agenda-wm { width: 40px; height: 40px; right: -6px; bottom: -7px; }
    .agenda-tdia { display: none; }
    /* no celular o toque escolhe o DIA; o evento se escolhe na linha do tempo, logo abaixo */
    .agenda-chip { font-size: 11px; line-height: 1; padding: 2px; border-radius: 5px; overflow: visible; pointer-events: none; }
    .agenda-chip .agenda-ct, .agenda-lock .agenda-ct { display: none; }
    .agenda-chip .agenda-tp { width: 13px; height: 13px; }
    .agenda-big, .agenda-mais { display: none; }
    .agenda-lock { font-size: .56rem; width: 100%; white-space: nowrap; overflow: hidden; }
    .agenda-mes .agenda-cel.agenda-sel { outline-width: 2px; outline-offset: 1px; transform: none; }
    .agenda-rodape { padding: 6px 10px; }
    .agenda-rodape-nota { display: none; }
    .agenda-cta { padding: 9px 16px; font-size: .8rem; }
}

/* ---------- celular de verdade (folha de baixo da casca): ocupa a folha inteira ---------- */
html[data-viewport="mobile"] .mestre-form-modal.agenda-tela { height: var(--mob-sheet-h, 92dvh); padding-bottom: var(--mob-safe-b, 0px); }
@media (max-width: 480px) {
    html[data-viewport="mobile"] .mestre-form-modal.agenda-tela { height: 100dvh; }
}